@charset "UTF-8";
/**
 * Toornament turnkey package allowing the use of css variables.
 *
 * @author Oliver Paradis <oparadis@toornament.com>
 * @version 1.0
 */
/**
 * Aspect ratio keeps a ratio using css only (instead on relying on <img> behavior)
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Breakable word is a mixin that allows to break words using browser compatibility.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Cache busting variable
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Ellipsis is a mixin that enforces the ellipsis in a sized element.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Expand is a mixin that uses flex to force an element to fill the remaining space.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Tools used to handle the coloring.
 */
/**
 * Color definition
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Returns the variable name from a css variable reference.
 */
/**
 * Returns a variant color (lightness change) for a given color and variant name.
 *
 * Note: this method assumes there exist sub variables using a suffix (-h and -s) to define the hue and saturation of
 * a given color name. These are used to redefine the color using a hsla() css function. Otherwise, it is assumed that
 * a variable exist with the color and variant name.
 */
/**
 * Returns the hue of a declared color.
 */
/**
 * Returns the saturation of a declared color.
 */
/**
 * Returns the lightness of a declared color.
 */
/**
 * Tools used to handle the coloring.
 */
/**
 * typography definition
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Spacing definition
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Declares CSS attributes to apply a typo-set (font + extra properties)
 */
/**
 * Declares the CSS variables required for given typo config.
 */
/**
 * Turnkey configuration.
 *
 * @author Olivier Paradis <oparadis@toornament.com>
 */
/**
 * Includes all base elements
 */
/**
 * Includes all paths
 */
/**
 * Device config provides mainly responsive sizing limited to the device level.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Includes all variables
 */
html {
  --color-standard-h: 220;
  --color-standard-s: 5%;
  --color-standard-l: 50%;
  --color-standard: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-standard-l));
  --color-primary-h: 203;
  --color-primary-s: 100%;
  --color-primary-l: 50%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-secondary-h: 259;
  --color-secondary-s: 38%;
  --color-secondary-l: 50%;
  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
  --color-action-h: 203;
  --color-action-s: 100%;
  --color-action-l: 50%;
  --color-action: hsl(var(--color-action-h), var(--color-action-s), var(--color-action-l));
  --color-alert-h: 0;
  --color-alert-s: 80%;
  --color-alert-l: 50%;
  --color-alert: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-alert-l));
  --color-warning-h: 28;
  --color-warning-s: 100%;
  --color-warning-l: 50%;
  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
  --color-success-h: 116;
  --color-success-s: 43%;
  --color-success-l: 50%;
  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
  --color-admin-h: 203;
  --color-admin-s: 100%;
  --color-admin-l: 50%;
  --color-admin: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-admin-l));
  --color-win-h: 116;
  --color-win-s: 43%;
  --color-win-l: 50%;
  --color-win: hsl(var(--color-win-h), var(--color-win-s), var(--color-win-l));
  --color-draw-h: 0;
  --color-draw-s: 0%;
  --color-draw-l: 50%;
  --color-draw: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-draw-l));
  --color-loss-h: 0;
  --color-loss-s: 80%;
  --color-loss-l: 50%;
  --color-loss: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-loss-l));
  --color-forfeit-h: 28;
  --color-forfeit-s: 100%;
  --color-forfeit-l: 50%;
  --color-forfeit: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-forfeit-l));
  --color-gold-h: 51;
  --color-gold-s: 100%;
  --color-gold-l: 45%;
  --color-gold: hsl(var(--color-gold-h), var(--color-gold-s), var(--color-gold-l));
  --color-silver-h: 0;
  --color-silver-s: 0%;
  --color-silver-l: 75%;
  --color-silver: hsl(var(--color-silver-h), var(--color-silver-s), var(--color-silver-l));
  --color-bronze-h: 30;
  --color-bronze-s: 61%;
  --color-bronze-l: 50%;
  --color-bronze: hsl(var(--color-bronze-h), var(--color-bronze-s), var(--color-bronze-l));
  --color-variant-top: 100%;
  --color-variant-high5: 95%;
  --color-variant-high4: 90%;
  --color-variant-high3: 85%;
  --color-variant-high2: 70%;
  --color-variant-high1: 60%;
  --color-variant-medium: 50%;
  --color-variant-low1: 40%;
  --color-variant-low2: 30%;
  --color-variant-low3: 15%;
  --color-variant-low4: 10%;
  --color-variant-low5: 5%;
  --color-variant-bottom: 0%;
  --color-variant-i_top: 0%;
  --color-variant-i_high5: 5%;
  --color-variant-i_high4: 10%;
  --color-variant-i_high3: 15%;
  --color-variant-i_high2: 30%;
  --color-variant-i_high1: 40%;
  --color-variant-i_medium: 50%;
  --color-variant-i_low1: 60%;
  --color-variant-i_low2: 70%;
  --color-variant-i_low3: 85%;
  --color-variant-i_low4: 90%;
  --color-variant-i_low5: 95%;
  --color-variant-i_bottom: 100%; }

html {
  --sizing-space-tiny: 0.25rem;
  --sizing-space-small: 0.5rem;
  --sizing-space-medium: 0.75rem;
  --sizing-space-large: 1.25rem;
  --sizing-space-huge: 2.5rem;
  --sizing-text-tiny: 0.75rem;
  --sizing-text-small: 0.875rem;
  --sizing-text-medium: 1rem;
  --sizing-text-large: 1.125rem;
  --sizing-text-huge: 1.25rem;
  --sizing-title-tiny: 1rem;
  --sizing-title-small: 1.125rem;
  --sizing-title-medium: 1.4375rem;
  --sizing-title-large: 1.8125rem;
  --sizing-title-huge: 2.125rem;
  --sizing-display-small: 2.8125rem;
  --sizing-display-medium: 3.5rem;
  --sizing-display-large: 6.5625rem; }

html {
  --typo-text-tiny-font-family: Noto Sans, sans-serif;
  --typo-text-tiny-font-size: 0.75rem;
  --typo-text-tiny-line-height: 1.5em;
  --typo-text-tiny-font-weight: 400;
  --typo-text-tiny-letter-spacing: 0;
  --typo-text-tiny: var(--typo-text-tiny-font-weight) var(--typo-text-tiny-font-size)/var(--typo-text-tiny-line-height) var(--typo-text-tiny-font-family);
  --typo-text-small-font-family: Noto Sans, sans-serif;
  --typo-text-small-font-size: 0.875rem;
  --typo-text-small-line-height: 1.5em;
  --typo-text-small-font-weight: 400;
  --typo-text-small-letter-spacing: 0;
  --typo-text-small: var(--typo-text-small-font-weight) var(--typo-text-small-font-size)/var(--typo-text-small-line-height) var(--typo-text-small-font-family);
  --typo-text-medium-font-family: Noto Sans, sans-serif;
  --typo-text-medium-font-size: 1rem;
  --typo-text-medium-line-height: 1.5em;
  --typo-text-medium-font-weight: 400;
  --typo-text-medium-letter-spacing: 0;
  --typo-text-medium: var(--typo-text-medium-font-weight) var(--typo-text-medium-font-size)/var(--typo-text-medium-line-height) var(--typo-text-medium-font-family);
  --typo-text-large-font-family: Noto Sans, sans-serif;
  --typo-text-large-font-size: 1.125rem;
  --typo-text-large-line-height: 1.5em;
  --typo-text-large-font-weight: 400;
  --typo-text-large-letter-spacing: 0;
  --typo-text-large: var(--typo-text-large-font-weight) var(--typo-text-large-font-size)/var(--typo-text-large-line-height) var(--typo-text-large-font-family);
  --typo-text-huge-font-family: Noto Sans, sans-serif;
  --typo-text-huge-font-size: 1.25rem;
  --typo-text-huge-line-height: 1.5em;
  --typo-text-huge-font-weight: 400;
  --typo-text-huge-letter-spacing: 0;
  --typo-text-huge: var(--typo-text-huge-font-weight) var(--typo-text-huge-font-size)/var(--typo-text-huge-line-height) var(--typo-text-huge-font-family);
  --typo-label-tiny-font-family: Noto Sans, sans-serif;
  --typo-label-tiny-font-size: 0.75rem;
  --typo-label-tiny-line-height: 1.2em;
  --typo-label-tiny-font-weight: 400;
  --typo-label-tiny-letter-spacing: 0;
  --typo-label-tiny: var(--typo-label-tiny-font-weight) var(--typo-label-tiny-font-size)/var(--typo-label-tiny-line-height) var(--typo-label-tiny-font-family);
  --typo-label-small-font-family: Noto Sans, sans-serif;
  --typo-label-small-font-size: 0.875rem;
  --typo-label-small-line-height: 1.2em;
  --typo-label-small-font-weight: 400;
  --typo-label-small-letter-spacing: 0;
  --typo-label-small: var(--typo-label-small-font-weight) var(--typo-label-small-font-size)/var(--typo-label-small-line-height) var(--typo-label-small-font-family);
  --typo-label-medium-font-family: Noto Sans, sans-serif;
  --typo-label-medium-font-size: 1rem;
  --typo-label-medium-line-height: 1.2em;
  --typo-label-medium-font-weight: 400;
  --typo-label-medium-letter-spacing: 0;
  --typo-label-medium: var(--typo-label-medium-font-weight) var(--typo-label-medium-font-size)/var(--typo-label-medium-line-height) var(--typo-label-medium-font-family);
  --typo-label-large-font-family: Noto Sans, sans-serif;
  --typo-label-large-font-size: 1.125rem;
  --typo-label-large-line-height: 1.2em;
  --typo-label-large-font-weight: 400;
  --typo-label-large-letter-spacing: 0;
  --typo-label-large: var(--typo-label-large-font-weight) var(--typo-label-large-font-size)/var(--typo-label-large-line-height) var(--typo-label-large-font-family);
  --typo-label-huge-font-family: Noto Sans, sans-serif;
  --typo-label-huge-font-size: 1.25rem;
  --typo-label-huge-line-height: 1.2em;
  --typo-label-huge-font-weight: 400;
  --typo-label-huge-letter-spacing: 0;
  --typo-label-huge: var(--typo-label-huge-font-weight) var(--typo-label-huge-font-size)/var(--typo-label-huge-line-height) var(--typo-label-huge-font-family);
  --typo-title-tiny-font-family: Noto Sans, sans-serif;
  --typo-title-tiny-font-size: 1rem;
  --typo-title-tiny-line-height: 1.2em;
  --typo-title-tiny-font-weight: 400;
  --typo-title-tiny-letter-spacing: 0;
  --typo-title-tiny: var(--typo-title-tiny-font-weight) var(--typo-title-tiny-font-size)/var(--typo-title-tiny-line-height) var(--typo-title-tiny-font-family);
  --typo-title-small-font-family: Noto Sans, sans-serif;
  --typo-title-small-font-size: 1.125rem;
  --typo-title-small-line-height: 1.2em;
  --typo-title-small-font-weight: 400;
  --typo-title-small-letter-spacing: 0;
  --typo-title-small: var(--typo-title-small-font-weight) var(--typo-title-small-font-size)/var(--typo-title-small-line-height) var(--typo-title-small-font-family);
  --typo-title-medium-font-family: Noto Sans, sans-serif;
  --typo-title-medium-font-size: 1.4375rem;
  --typo-title-medium-line-height: 1.2em;
  --typo-title-medium-font-weight: 400;
  --typo-title-medium-letter-spacing: 0;
  --typo-title-medium: var(--typo-title-medium-font-weight) var(--typo-title-medium-font-size)/var(--typo-title-medium-line-height) var(--typo-title-medium-font-family);
  --typo-title-large-font-family: Noto Sans, sans-serif;
  --typo-title-large-font-size: 1.8125rem;
  --typo-title-large-line-height: 1.2em;
  --typo-title-large-font-weight: 400;
  --typo-title-large-letter-spacing: 0;
  --typo-title-large: var(--typo-title-large-font-weight) var(--typo-title-large-font-size)/var(--typo-title-large-line-height) var(--typo-title-large-font-family);
  --typo-title-huge-font-family: Noto Sans, sans-serif;
  --typo-title-huge-font-size: 2.125rem;
  --typo-title-huge-line-height: 1.2em;
  --typo-title-huge-font-weight: 400;
  --typo-title-huge-letter-spacing: 0;
  --typo-title-huge: var(--typo-title-huge-font-weight) var(--typo-title-huge-font-size)/var(--typo-title-huge-line-height) var(--typo-title-huge-font-family);
  --typo-display-small-font-family: Noto Sans, sans-serif;
  --typo-display-small-font-size: 2.8125rem;
  --typo-display-small-line-height: 1.2em;
  --typo-display-small-font-weight: 600;
  --typo-display-small-letter-spacing: 0;
  --typo-display-small: var(--typo-display-small-font-weight) var(--typo-display-small-font-size)/var(--typo-display-small-line-height) var(--typo-display-small-font-family);
  --typo-display-medium-font-family: Noto Sans, sans-serif;
  --typo-display-medium-font-size: 4.125rem;
  --typo-display-medium-line-height: 1em;
  --typo-display-medium-font-weight: 600;
  --typo-display-medium-letter-spacing: 0;
  --typo-display-medium: var(--typo-display-medium-font-weight) var(--typo-display-medium-font-size)/var(--typo-display-medium-line-height) var(--typo-display-medium-font-family);
  --typo-display-large-font-family: Noto Sans, sans-serif;
  --typo-display-large-font-size: 6.5625rem;
  --typo-display-large-line-height: 1em;
  --typo-display-large-font-weight: 600;
  --typo-display-large-letter-spacing: 0;
  --typo-display-large: var(--typo-display-large-font-weight) var(--typo-display-large-font-size)/var(--typo-display-large-line-height) var(--typo-display-large-font-family); }

/**
 * Turnkey specific css variables.
 *
 * @author Olivier Paradis <oparadis@toornament.com>
 */
/**
 * Turnkey overrides.
 *
 * @author Olivier Paradis <oparadis@toornament.com>
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address inconsistent styling of `abbr[title]`.
 * 1. Correct styling in Firefox 39 and Opera 12.
 * 2. Correct missing styling in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/**
 * Includes all components
 */
/**
 * Includes all badge styling
 */
/**
 * Badge core component.
 */
/**
 * Badge configuration
 */
.badge {
  display: inline-block;
  padding: var(--badge-padding-v) var(--badge-padding-h);
  border-radius: var(--badge-border-radius);
  border-width: var(--badge-border-width);
  border-style: solid;
  border-color: var(--badge-border-color);
  background-color: var(--badge-background-color);
  color: var(--badge-text-color);
  font: var(--badge-font);
  vertical-align: var(--badge-vertical-align);
  letter-spacing: 0;
  text-shadow: none; }

:root {
  --badge-padding-h: var(--sizing-space-small);
  --badge-padding-v: 0.1em;
  --badge-border-width: 1px;
  --badge-border-radius: var(--sizing-space-tiny);
  --badge-border-color: var(--color-standard);
  --badge-background-color: var(--color-standard);
  --badge-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --badge-font: inherit;
  --badge-vertical-align: baseline; }

/**
 * Extension to provide classes to change the badge style and colors.
 * Styles: subdued, light
 * Colors: standard, primary, secondary, action, alert, warning, success, admin
 */
.badge.standard, .badge.primary, .badge.secondary, .badge.action, .badge.alert, .badge.warning, .badge.success, .badge.admin {
  --badge-border-color: var(--badge-base-color);
  --badge-background-color: var(--badge-base-color); }

.badge.subdued {
  --badge-border-color: var(--badge-base-color);
  --badge-background-color: transparent;
  --badge-text-color: var(--badge-base-color); }

.badge.light {
  --badge-border-color: transparent;
  --badge-background-color: transparent;
  --badge-text-color: var(--badge-base-color); }

.badge.circular {
  --badge-border-radius: 666rem; }

.badge.angular {
  --badge-border-radius: 0; }

.badge.standard {
  --badge-base-color: var(--color-standard); }

.badge.primary {
  --badge-base-color: var(--color-primary); }

.badge.secondary {
  --badge-base-color: var(--color-secondary); }

.badge.action {
  --badge-base-color: var(--color-primary); }

.badge.alert {
  --badge-base-color: var(--color-alert); }

.badge.warning {
  --badge-base-color: var(--color-warning); }

.badge.success {
  --badge-base-color: var(--color-success); }

.badge.admin {
  --badge-base-color: var(--color-admin); }

:root {
  --badge-base-color: var(--color-standard); }

/**
 * Extension to provide classes that alter the size of a badge.
 * Sizes: tiny, small, medium, large, huge
 */
.badge.tiny {
  --badge-font: var(--typo-text-tiny);
  --badge-padding-h: var(--sizing-space-small); }

.badge.small {
  --badge-font: var(--typo-text-small);
  --badge-padding-h: var(--sizing-space-small); }

.badge.medium {
  --badge-font: var(--typo-text-medium);
  --badge-padding-h: var(--sizing-space-medium); }

.badge.large {
  --badge-font: var(--typo-text-large);
  --badge-padding-h: var(--sizing-space-medium); }

.badge.huge {
  --badge-font: var(--typo-text-huge);
  --badge-padding-h: var(--sizing-space-medium); }

.badge.align-middle {
  vertical-align: middle; }

/**
 * Includes all button styling
 */
/**
 * button components that provides global button styling.
 *
 * note: known limitation = buttons do not have borders
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
button, a.button {
  --button-font: var(--typo-text-medium);
  --button-padding-h: var(--sizing-space-large);
  --button-padding-v: var(--sizing-space-small);
  --button-border-width: 1px;
  --button-border-radius: var(--sizing-space-tiny);
  --button-base-color-h: var(--color-primary-h);
  --button-base-color-s: var(--color-primary-s);
  --button-base-color-l: var(--color-primary-l);
  --button-base-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--button-base-color-l-primary-l));
  --button-disabled-color-h: var(--color-standard-h);
  --button-disabled-color-s: var(--color-standard-s);
  --button-disabled-color-l: var(--color-standard-l);
  --button-disabled-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--button-disabled-color-l));
  --button-colorless-color: var(--color-standard);
  --button-text-color: white;
  --button-border-color: transparent;
  --button-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-medium));
  --button-colorless-text-color: var(--button-text-color);
  --button-colorless-border-color: var(--button-colorless-color);
  --button-colorless-background-color: var(--button-colorless-color);
  --button-hover-text-color: var(--button-text-color);
  --button-hover-border-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-hover-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-active-text-color: var(--button-text-color);
  --button-active-border-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-active-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high1));
  --button-disabled-border-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  --button-disabled-background-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  display: inline-block;
  position: relative;
  border-radius: var(--button-border-radius);
  border: var(--button-border-width) solid var(--button-border-color);
  font: var(--button-font);
  padding: var(--button-padding-v) var(--button-padding-h);
  vertical-align: middle;
  text-align: center;
  word-break: break-all;
  word-wrap: break-word;
  transition: all 0.1s ease-in-out;
  user-select: none;
  color: var(--button-text-color);
  background: var(--button-background-color);
  border-color: var(--button-border-color); }
  button.inverted, a.button.inverted {
    --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high1));
    --button-disabled-border-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3));
    --button-disabled-background-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3)); }
  button.colorless, a.button.colorless {
    color: var(--button-colorless-text-color);
    background: var(--button-colorless-background-color);
    border-color: var(--button-colorless-border-color); }
  button:visited, a.button:visited {
    color: var(--button-text-color);
    background: var(--button-background-color);
    border-color: var(--button-border-color); }
  button:hover, button:focus, a.button:hover, a.button:focus {
    color: var(--button-hover-text-color);
    background: var(--button-hover-background-color);
    border-color: var(--button-hover-border-color); }
  button:active, a.button:active {
    color: var(--button-active-text-color);
    background: var(--button-active-background-color);
    border-color: var(--button-active-border-color); }
  button.disabled, button[disabled], a.button.disabled, a.button[disabled] {
    color: var(--button-disabled-text-color) !important;
    background: var(--button-disabled-background-color);
    border-color: var(--button-disabled-border-color); }
  button.standard, a.button.standard {
    --button-base-color-h: var(--color-standard-h);
    --button-base-color-s: var(--color-standard-s); }
  button.primary, a.button.primary {
    --button-base-color-h: var(--color-primary-h);
    --button-base-color-s: var(--color-primary-s); }
  button.secondary, a.button.secondary {
    --button-base-color-h: var(--color-secondary-h);
    --button-base-color-s: var(--color-secondary-s); }
  button.action, a.button.action {
    --button-base-color-h: var(--color-action-h);
    --button-base-color-s: var(--color-action-s); }
  button.alert, a.button.alert {
    --button-base-color-h: var(--color-alert-h);
    --button-base-color-s: var(--color-alert-s); }
  button.warning, a.button.warning {
    --button-base-color-h: var(--color-warning-h);
    --button-base-color-s: var(--color-warning-s); }
  button.success, a.button.success {
    --button-base-color-h: var(--color-success-h);
    --button-base-color-s: var(--color-success-s); }
  button.admin, a.button.admin {
    --button-base-color-h: var(--color-admin-h);
    --button-base-color-s: var(--color-admin-s); }
  button:hover, a.button:hover {
    text-decoration: none; }
  button:focus, a.button:focus {
    outline: none; }
  button.disabled, button[disabled], a.button.disabled, a.button[disabled] {
    cursor: not-allowed !important;
    pointer-events: auto !important; }
  button.expand, a.button.expand {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center; }

@media (max-width: 600px) {
  button.mobile-expand, .button.mobile-expand {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center; } }

@media (min-width: 601px) and (max-width: 1280px) {
  button.tablet-expand, .button.tablet-expand {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center; } }

/**
 * Extension to handle a "light" variant.
 * - no background, no border
 * - hover: text color changes
 * - active: text color changes
 */
button.light, a.button.light {
  --button-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-medium));
  --button-border-color: transparent;
  --button-background-color: transparent;
  --button-colorless-text-color: var(--button-colorless-color);
  --button-colorless-border-color: transparent;
  --button-colorless-background-color: transparent;
  --button-hover-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-hover-border-color: transparent;
  --button-hover-background-color: transparent;
  --button-active-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-active-border-color: transparent;
  --button-active-background-color: transparent;
  --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  --button-disabled-border-color: transparent;
  --button-disabled-background-color: transparent;
  padding: var(--sizing-space-small); }
  button.light.inverted, a.button.light.inverted {
    --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3));
    --button-disabled-border-color: transparent;
    --button-disabled-background-color:transparent; }
  button.light i, a.button.light i {
    vertical-align: baseline; }

/**
 * Extension to handle an "outlined" variant.
 * - no background and border with the same color as text
 * - hover: is same as standard
 * - active: is same as standard
 */
button.outlined, a.button.outlined {
  --button-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-medium));
  --button-border-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-medium));
  --button-background-color: transparent;
  --button-colorless-text-color: var(--button-colorless-color);
  --button-colorless-border-color: var(--button-colorless-color);
  --button-colorless-background-color: transparent;
  --button-hover-text-color: white;
  --button-hover-border-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-hover-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-active-text-color: white;
  --button-active-border-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-active-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  --button-disabled-border-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  --button-disabled-background-color: transparent; }
  button.outlined.inverted, a.button.outlined.inverted {
    --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3));
    --button-disabled-border-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3));
    --button-disabled-background-color: transparent; }

/**
 * Extension to handle a "subdued" variant.
 * - no background, no border
 * - hover: hover text color and a light background
 * - active: active text color and a light background
 */
button.subdued, a.button.subdued {
  --button-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-medium));
  --button-border-color: transparent;
  --button-background-color: transparent;
  --button-colorless-text-color: var(--button-colorless-color);
  --button-colorless-border-color: transparent;
  --button-colorless-background-color: transparent;
  --button-hover-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high1));
  --button-hover-border-color: transparent;
  --button-hover-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high5));
  --button-active-text-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-low1));
  --button-active-border-color: transparent;
  --button-active-background-color: hsl(var(--button-base-color-h), var(--button-base-color-s), var(--color-variant-high5));
  --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-high3));
  --button-disabled-border-color: transparent;
  --button-disabled-background-color: transparent; }
  button.subdued.inverted, a.button.subdued.inverted {
    --button-disabled-text-color: hsl(var(--button-disabled-color-h), var(--button-disabled-color-s), var(--color-variant-i_high3));
    --button-disabled-border-color: transparent;
    --button-disabled-background-color:transparent; }

/**
 * button toggle
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
button .on, .button .on {
  display: inline-block; }

button .off, .button .off {
  display: none; }

button.on .on, .button.on .on {
  display: inline-block; }

button.on .off, .button.on .off {
  display: none; }

button.off .on, .button.off .on {
  display: none; }

button.off .off, .button.off .off {
  display: inline-block; }

button *, .button * {
  pointer-events: none; }

button .timer_display, .button .timer_display {
  display: block;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  inset-inline-start: 0;
  z-index: 1; }
  button .timer_display.horizontal, .button .timer_display.horizontal {
    top: 0;
    width: 0; }
    button .timer_display.horizontal.short, .button .timer_display.horizontal.short {
      transition: width 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
    button .timer_display.horizontal.long, .button .timer_display.horizontal.long {
      transition: width 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
    button .timer_display.horizontal.expanded, .button .timer_display.horizontal.expanded {
      width: 100%; }
  button .timer_display.vertical, .button .timer_display.vertical {
    width: 100%;
    height: 0; }
    button .timer_display.vertical.short, .button .timer_display.vertical.short {
      transition: height 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
    button .timer_display.vertical.long, .button .timer_display.vertical.long {
      transition: height 2.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
    button .timer_display.vertical.expanded, .button .timer_display.vertical.expanded {
      height: 100%; }

/**
 * Extension to handle icons and label in the button.
 */
button i, a.button i {
  font-size: 1em;
  color: inherit !important;
  margin: 0; }

button span + i,
button i + span, a.button span + i,
a.button i + span {
  margin-inline-start: var(--sizing-space-small); }

button.vertical, a.button.vertical {
  text-align: center; }
  button.vertical i, a.button.vertical i {
    display: inline-block; }
  button.vertical span, a.button.vertical span {
    display: block; }
  button.vertical span + i, button.vertical i + span, a.button.vertical span + i, a.button.vertical i + span {
    margin-inline-start: 0; }

/**
 * Extension to handle badge in the button.
 */
button > .badge, a.button > .badge {
  margin-inline-start: var(--sizing-space-small); }

/**
 * Includes all card styling.
 */
/**
 * Basic card style
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Card configuration
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  color: var(--card-color);
  margin: var(--card-margin);
  border-radius: var(--card-radius);
  overflow: hidden;
  text-align: start;
  position: relative; }
  .card .card {
    position: initial; }
  .card.expand {
    height: 100%; }
  .card.expandable {
    max-height: 100%; }
  .card.inverted {
    --card-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --card-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    --card-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }

:root {
  --card-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --card-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --card-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --card-border: none;
  --card-radius: var(--sizing-space-tiny);
  --card-shadow: 0px 0.2rem 0.3rem rgba(0, 0, 0, 0.1);
  --card-margin: 0; }

/**
 * Card header styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.card [class^="card-"] {
  padding-block: var(--card-content-padding-v);
  padding-inline: var(--card-content-padding-h);
  font: var(--typo-text-medium); }
  .card [class^="card-"].no-expand {
    flex: 0 0 auto; }
  .card [class^="card-"].expand {
    flex: 1;
    min-height: 0;
    height: initial !important; }
  .card [class^="card-"].expandable {
    flex: 0 1 auto; }
  .card [class^="card-"].scrollable {
    overflow: auto; }
  .card [class^="card-"].scrollable-x {
    overflow-x: auto; }
  .card [class^="card-"].scrollable-y {
    overflow-y: auto; }
  .card [class^="card-"].divided, .card [class^="card-"].divider {
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .card [class^="card-"].collapsed {
    padding-bottom: 0; }
  .card [class^="card-"].block {
    padding: 0; }
  .card [class^="card-"].spaced, .card [class^="card-"].spacious {
    padding: var(--sizing-space-huge); }
  .card [class^="card-"].narrow {
    padding: var(--sizing-space-medium); }
  .card [class^="card-"].centered {
    align-self: stretch;
    text-align: center; }
  .card [class^="card-"].highlight {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.card.inverted [class^="card-"] {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
  .card.inverted [class^="card-"].highlight {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

.card .card-header {
  background: transparent; }
  .card .card-header h1, .card .card-header h2, .card .card-header h3, .card .card-header h4, .card .card-header h5, .card .card-header h6 {
    margin: 0; }
  .card .card-header:not(:last-child) {
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .card .card-header:not(:first-child) {
    border-top: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }

.card.inverted .card-header {
  background: transparent;
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.card .card-footer h1, .card .card-footer h2, .card .card-footer h3, .card .card-footer h4, .card .card-footer h5, .card .card-footer h6 {
  margin: 0; }

.card .card-title h1, .card .card-title h2, .card .card-title h3, .card .card-title h4, .card .card-title h5, .card .card-title h6 {
  margin: 0; }

.card .card-toolbar {
  padding: var(--sizing-space-small); }

.card .card-content {
  flex: 1;
  overflow: hidden;
  word-wrap: break-word; }
  .card .card-content.scrollable {
    overflow: auto; }

.card .card-block {
  padding: 0; }

.card .card-caption {
  padding: var(--sizing-space-medium) var(--sizing-space-large); }

.card .card-media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden; }
  .card .card-media img {
    width: 100%;
    height: auto; }

.card .card-divider {
  padding: 0;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  width: 100%;
  height: 1px; }
  .card .card-divider:before {
    content: ''; }
  .card .card-divider.large {
    height: 2px; }
  .card .card-divider.standard {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .card .card-divider.primary {
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .card .card-divider.secondary {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }
  .card .card-divider.action {
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .card .card-divider.alert {
    background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .card .card-divider.warning {
    background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
  .card .card-divider.success {
    background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
  .card .card-divider.admin {
    background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.card.inverted .card-divider {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.card .card-expand {
  padding: 0;
  flex: 1;
  min-height: 0; }
  .card .card-expand.scrollable {
    overflow: auto; }

.card .card-columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  padding: 0; }
  .card .card-columns > * {
    flex: 1 1 0; }
    .card .card-columns > *.divided {
      border-block-end: 0;
      border-inline-end: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .card .card-columns > *.collapsed {
      padding-inline-end: 0;
      padding-block-end: var(--sizing-space-large); }

:root {
  --card-content-padding-h: var(--sizing-space-large);
  --card-content-padding-v: var(--sizing-space-large); }

/**
 * Extension to display a disabled card.
 */
.card.disabled {
  position: relative;
  user-select: none; }
  .card.disabled > * {
    opacity: 0.5; }
  .card.disabled:after {
    content: " ";
    position: absolute;
    inset-inline: 0 0;
    inset-block: 0 0;
    z-index: 999;
    cursor: not-allowed; }

/**
 * Extension to provide a hover effect on a card.
 */
.card.hover:hover {
  box-shadow: 0 0 0 var(--card-hover-size) var(--card-hover-border-color);
  cursor: pointer; }

.card.hover.inverted:hover {
  box-shadow: 0 0 0 var(--card-hover-size) var(--card-hover-inverted-border-color); }

@media (max-width: 600px) {
  .card.hover:hover {
    box-shadow: none; }
  .card.hover.inverted:hover {
    box-shadow: none; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .card.hover:hover {
    box-shadow: none; }
  .card.hover.inverted:hover {
    box-shadow: none; } }

:root {
  --card-hover-size: 2px;
  --card-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --card-hover-inverted-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

/**
 * Extension to provide a current state on a card.
 */
.card.current {
  box-shadow: 0 0 0 var(--card-current-size) var(--card-current-border-color); }
  .card.current.inverted:current {
    --card-current-border-color: var(--card-current-inverted-border); }

:root {
  --card-current-size: 2px;
  --card-current-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --card-current-inverted-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

/**
 * Extension to configure the radius of a card using classes.
 * @note: It supports device prefixes to specify a different sizes based on the device.
 */
.card.radius-small {
  border-radius: var(--sizing-space-tiny); }

.card.radius-medium {
  border-radius: var(--sizing-space-small); }

.card.radius-large {
  border-radius: var(--sizing-space-medium); }

.card.radius-none {
  border-radius: 0; }

@media (max-width: 600px) {
  .card.mobile-radius-small {
    border-radius: var(--sizing-space-tiny); }
  .card.mobile-radius-medium {
    border-radius: var(--sizing-space-small); }
  .card.mobile-radius-large {
    border-radius: var(--sizing-space-medium); }
  .card.mobile-radius-none {
    border-radius: 0; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .card.tablet-radius-small {
    border-radius: var(--sizing-space-tiny); }
  .card.tablet-radius-medium {
    border-radius: var(--sizing-space-small); }
  .card.tablet-radius-large {
    border-radius: var(--sizing-space-medium); }
  .card.tablet-radius-none {
    border-radius: 0; } }

@media (min-width: 1281px) {
  .card.desktop-radius-small {
    border-radius: var(--sizing-space-tiny); }
  .card.desktop-radius-medium {
    border-radius: var(--sizing-space-small); }
  .card.desktop-radius-large {
    border-radius: var(--sizing-space-medium); }
  .card.desktop-radius-none {
    border-radius: 0; } }

/**
 * Extension to configure the size of a card using classes.
 * @note: It supports device prefixes to specify a different sizes based on the device.
 */
.card.size-tiny {
  inline-size: calc(var(--sizing-space-tiny) * 4 * 6);
  block-size: calc(var(--sizing-space-tiny) * 4 * 6); }

.card.size-small {
  inline-size: calc(var(--sizing-space-small) * 4 * 6);
  block-size: calc(var(--sizing-space-small) * 4 * 6); }

.card.size-medium {
  inline-size: calc(var(--sizing-space-medium) * 4 * 6);
  block-size: calc(var(--sizing-space-medium) * 4 * 6); }

.card.size-large {
  inline-size: calc(var(--sizing-space-large) * 4 * 6);
  block-size: calc(var(--sizing-space-large) * 4 * 6); }

.card.size-huge {
  inline-size: calc(var(--sizing-space-huge) * 4 * 6);
  block-size: calc(var(--sizing-space-huge) * 4 * 6); }

.card.size-width-tiny {
  width: calc(var(--sizing-space-tiny) * 4 * 6); }

.card.size-width-small {
  width: calc(var(--sizing-space-small) * 4 * 6); }

.card.size-width-medium {
  width: calc(var(--sizing-space-medium) * 4 * 6); }

.card.size-width-large {
  width: calc(var(--sizing-space-large) * 4 * 6); }

.card.size-width-huge {
  width: calc(var(--sizing-space-huge) * 4 * 6); }

.card.size-height-tiny {
  height: calc(var(--sizing-space-tiny) * 4 * 6); }

.card.size-height-small {
  height: calc(var(--sizing-space-small) * 4 * 6); }

.card.size-height-medium {
  height: calc(var(--sizing-space-medium) * 4 * 6); }

.card.size-height-large {
  height: calc(var(--sizing-space-large) * 4 * 6); }

.card.size-height-huge {
  height: calc(var(--sizing-space-huge) * 4 * 6); }

.card [class^="card-"].max-tiny {
  max-height: calc(var(--sizing-space-tiny) * 4 * 6); }

.card [class^="card-"].max-small {
  max-height: calc(var(--sizing-space-small) * 4 * 6); }

.card [class^="card-"].max-medium {
  max-height: calc(var(--sizing-space-medium) * 4 * 6); }

.card [class^="card-"].max-large {
  max-height: calc(var(--sizing-space-large) * 4 * 6); }

.card [class^="card-"].max-huge {
  max-height: calc(var(--sizing-space-huge) * 4 * 6); }

.card [class^="card-"].min-tiny {
  min-height: calc(var(--sizing-space-tiny) * 4 * 6); }

.card [class^="card-"].min-small {
  min-height: calc(var(--sizing-space-small) * 4 * 6); }

.card [class^="card-"].min-medium {
  min-height: calc(var(--sizing-space-medium) * 4 * 6); }

.card [class^="card-"].min-large {
  min-height: calc(var(--sizing-space-large) * 4 * 6); }

.card [class^="card-"].min-huge {
  min-height: calc(var(--sizing-space-huge) * 4 * 6); }

@media (max-width: 600px) {
  .card.mobile-size-tiny {
    inline-size: calc(var(--sizing-space-tiny) * 4 * 6);
    block-size: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.mobile-size-small {
    inline-size: calc(var(--sizing-space-small) * 4 * 6);
    block-size: calc(var(--sizing-space-small) * 4 * 6); }
  .card.mobile-size-medium {
    inline-size: calc(var(--sizing-space-medium) * 4 * 6);
    block-size: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.mobile-size-large {
    inline-size: calc(var(--sizing-space-large) * 4 * 6);
    block-size: calc(var(--sizing-space-large) * 4 * 6); }
  .card.mobile-size-huge {
    inline-size: calc(var(--sizing-space-huge) * 4 * 6);
    block-size: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.mobile-size-width-tiny {
    width: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.mobile-size-width-small {
    width: calc(var(--sizing-space-small) * 4 * 6); }
  .card.mobile-size-width-medium {
    width: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.mobile-size-width-large {
    width: calc(var(--sizing-space-large) * 4 * 6); }
  .card.mobile-size-width-huge {
    width: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.mobile-size-height-tiny {
    height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.mobile-size-height-small {
    height: calc(var(--sizing-space-small) * 4 * 6); }
  .card.mobile-size-height-medium {
    height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.mobile-size-height-large {
    height: calc(var(--sizing-space-large) * 4 * 6); }
  .card.mobile-size-height-huge {
    height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].max-tiny {
    max-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].max-small {
    max-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].max-medium {
    max-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].max-large {
    max-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].max-huge {
    max-height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].min-tiny {
    min-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].min-small {
    min-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].min-medium {
    min-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].min-large {
    min-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].min-huge {
    min-height: calc(var(--sizing-space-huge) * 4 * 6); } }

@media (min-width: 601px) and (max-width: 1280px) {
  .card.tablet-size-tiny {
    inline-size: calc(var(--sizing-space-tiny) * 4 * 6);
    block-size: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.tablet-size-small {
    inline-size: calc(var(--sizing-space-small) * 4 * 6);
    block-size: calc(var(--sizing-space-small) * 4 * 6); }
  .card.tablet-size-medium {
    inline-size: calc(var(--sizing-space-medium) * 4 * 6);
    block-size: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.tablet-size-large {
    inline-size: calc(var(--sizing-space-large) * 4 * 6);
    block-size: calc(var(--sizing-space-large) * 4 * 6); }
  .card.tablet-size-huge {
    inline-size: calc(var(--sizing-space-huge) * 4 * 6);
    block-size: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.tablet-size-width-tiny {
    width: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.tablet-size-width-small {
    width: calc(var(--sizing-space-small) * 4 * 6); }
  .card.tablet-size-width-medium {
    width: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.tablet-size-width-large {
    width: calc(var(--sizing-space-large) * 4 * 6); }
  .card.tablet-size-width-huge {
    width: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.tablet-size-height-tiny {
    height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.tablet-size-height-small {
    height: calc(var(--sizing-space-small) * 4 * 6); }
  .card.tablet-size-height-medium {
    height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.tablet-size-height-large {
    height: calc(var(--sizing-space-large) * 4 * 6); }
  .card.tablet-size-height-huge {
    height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].max-tiny {
    max-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].max-small {
    max-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].max-medium {
    max-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].max-large {
    max-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].max-huge {
    max-height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].min-tiny {
    min-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].min-small {
    min-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].min-medium {
    min-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].min-large {
    min-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].min-huge {
    min-height: calc(var(--sizing-space-huge) * 4 * 6); } }

@media (min-width: 1281px) {
  .card.desktop-size-tiny {
    inline-size: calc(var(--sizing-space-tiny) * 4 * 6);
    block-size: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.desktop-size-small {
    inline-size: calc(var(--sizing-space-small) * 4 * 6);
    block-size: calc(var(--sizing-space-small) * 4 * 6); }
  .card.desktop-size-medium {
    inline-size: calc(var(--sizing-space-medium) * 4 * 6);
    block-size: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.desktop-size-large {
    inline-size: calc(var(--sizing-space-large) * 4 * 6);
    block-size: calc(var(--sizing-space-large) * 4 * 6); }
  .card.desktop-size-huge {
    inline-size: calc(var(--sizing-space-huge) * 4 * 6);
    block-size: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.desktop-size-width-tiny {
    width: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.desktop-size-width-small {
    width: calc(var(--sizing-space-small) * 4 * 6); }
  .card.desktop-size-width-medium {
    width: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.desktop-size-width-large {
    width: calc(var(--sizing-space-large) * 4 * 6); }
  .card.desktop-size-width-huge {
    width: calc(var(--sizing-space-huge) * 4 * 6); }
  .card.desktop-size-height-tiny {
    height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card.desktop-size-height-small {
    height: calc(var(--sizing-space-small) * 4 * 6); }
  .card.desktop-size-height-medium {
    height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card.desktop-size-height-large {
    height: calc(var(--sizing-space-large) * 4 * 6); }
  .card.desktop-size-height-huge {
    height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].max-tiny {
    max-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].max-small {
    max-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].max-medium {
    max-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].max-large {
    max-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].max-huge {
    max-height: calc(var(--sizing-space-huge) * 4 * 6); }
  .card [class^="card-"].min-tiny {
    min-height: calc(var(--sizing-space-tiny) * 4 * 6); }
  .card [class^="card-"].min-small {
    min-height: calc(var(--sizing-space-small) * 4 * 6); }
  .card [class^="card-"].min-medium {
    min-height: calc(var(--sizing-space-medium) * 4 * 6); }
  .card [class^="card-"].min-large {
    min-height: calc(var(--sizing-space-large) * 4 * 6); }
  .card [class^="card-"].min-huge {
    min-height: calc(var(--sizing-space-huge) * 4 * 6); } }

.card.fixed-height {
  min-height: 16rem; }

/**
 * Extension to provide style variants that mainly allow to enable/disable a border and/or a shadow.
 */
.card.flat {
  --card-shadow: none; }

.card.shadow {
  --card-shadow: 0px 0.2rem 0.3rem rgba(0, 0, 0, 0.1); }

.card.bordered {
  --card-border: 1px solid var(--card-border-color);
  --card-border-color: var(--card-variant-border-color); }

.card.subdued {
  --card-border: 1px solid var(--card-border-color);
  --card-border-color: var(--card-variant-border-color);
  --card-shadow: none; }

.card.inverted.bordered {
  --card-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.card.inverted.subdued {
  --card-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

:root {
  --card-variant-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }

/**
 * Bridge between card and notice to merge notice and card border and margins.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
[class^="card-"].notice {
  border-radius: 0;
  border-inline-width: 0 0;
  margin: 0; }

/**
 * Bridge between card and button to align subdued buttons with the card padding.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.card .card-actions {
  padding-block: var(--sizing-space-small);
  padding-inline: calc(var(--sizing-space-large) - var(--sizing-space-large) - 1px); }

/**
 * Bridge between card and form to align input fields with the card padding.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * The Form component adds its own semantic colors that are mapped to the core colors.
 *
 * This allows changing the form colors without changing the core colors.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.card .card-input.start {
  padding-inline-start: calc(var(--sizing-space-large) - var(--sizing-space-small) - 1px); }

.card .card-input.end {
  padding-inline-end: calc(var(--sizing-space-large) - var(--sizing-space-small) - 1px); }

.card .card-input.both {
  padding-inline: calc(var(--sizing-space-large) - var(--sizing-space-small) - 1px); }

.card .card-input.left {
  padding-inline-start: calc(var(--sizing-space-large) - var(--sizing-space-small) - 1px); }

.card .card-input.right {
  padding-inline-end: calc(var(--sizing-space-large) - var(--sizing-space-small) - 1px); }

/**
 * Includes all chart components
 */
/**
 * Includes all chart components
 */
svg.chart .chart-bar {
  fill: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
  svg.chart .chart-bar.highlighted {
    fill: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

svg.chart .chart-grid-rows line {
  stroke: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  stroke-dasharray: 5, 5; }

svg.chart .chart-axis-tick-label {
  font: var(--typo-label-tiny);
  letter-spacing: 0;
  fill: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  svg.chart .chart-axis-tick-label.left, svg.chart .chart-axis-tick-label.start {
    text-anchor: end;
    dominant-baseline: middle; }
  svg.chart .chart-axis-tick-label.right, svg.chart .chart-axis-tick-label.end {
    text-anchor: start;
    dominant-baseline: middle; }
  svg.chart .chart-axis-tick-label.bottom {
    text-anchor: middle; }

svg.chart .chart-axis-line {
  stroke: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

svg.chart .chart-axis-tick line {
  stroke: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

svg.chart .chart-axis-tick line {
  stroke: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

/**
 * Includes all color view styling
 */
.color {
  --size: 2rem;
  color: var(--color);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center; }
  .color.circle {
    width: var(--size);
    height: var(--size);
    border-radius: 50%; }
  .color.square {
    width: var(--size);
    height: var(--size);
    border-radius: var(--sizing-space-tiny); }
  .color.stroke {
    height: var(--size); }
  .color.bordered {
    border: 1px solid var(--border-color); }
  .color.hover {
    cursor: pointer; }
  .color.hover:hover, .color.focus {
    box-shadow: 0 0 0 2px hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)), 0 0 0 4px var(--color-primary); }
    .color.hover:hover.inverted, .color.focus.inverted {
      box-shadow: 0 0 0 2px hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)), 0 0 0 4px var(--color-primary); }
  .color.disabled {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .color.tiny {
    --size: 1rem; }
  .color.small {
    --size: 1.5rem; }
  .color.medium {
    --size: 2rem; }
  .color.large {
    --size: 2.5rem; }
  .color.huge {
    --size: 3rem; }

/**
 * Includes all computer components
 */
/**
 * Component that renders <code> html elements
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
code {
  display: inline-block;
  font-family: monospace;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  padding: var(--sizing-space-tiny); }

pre code {
  display: block;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: monospace;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  border-radius: var(--sizing-space-tiny);
  padding: var(--sizing-space-medium);
  margin: 0; }
  pre code.limited {
    max-height: 15rem; }
  pre code.block {
    border-radius: 0; }

/**
 * Component that renders <samp> html elements.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
samp {
  font-family: monospace;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  padding: var(--sizing-space-tiny); }

pre samp {
  display: block;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: monospace;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  border-radius: var(--sizing-space-tiny);
  padding: var(--sizing-space-large);
  margin: 0; }
  pre samp.limited {
    max-height: 15rem; }
  pre samp.block {
    border-radius: 0; }

/**
 * Component that renders <kbd> html elements.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
kbd {
  font-family: monospace;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  border-radius: var(--sizing-space-tiny);
  padding: var(--sizing-space-tiny); }

pre kbd {
  display: block;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
  padding: var(--sizing-space-medium);
  border-radius: var(--sizing-space-small); }

/**
 * Component that provides a "container" wrapper to use the Container CSS Queries (using a polyfill if needed).
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
 * @see https://github.com/GoogleChromeLabs/container-query-polyfill
 */
.container.horizontal {
  container-type: inline-size; }

.container.vertical {
  container-type: block-size; }

/**
 * Includes all data-grid styling
 */
.data-grid {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--data-grid-spacing);
  padding: var(--data-grid-padding); }
  .data-grid.expand {
    height: 100%; }
  .data-grid.expandable {
    max-height: 100%; }

:root {
  --data-grid-padding: 0;
  --data-grid-spacing: var(--sizing-space-medium); }

/**
 * Component that handles the toolbar of a data-grid.
 */
.data-grid .dg-toolbar {
  display: grid;
  grid-template-areas: "selection filter pagination";
  grid-template-columns: 1fr auto auto;
  justify-content: stretch;
  align-items: center;
  padding: var(--data-grid-toolbar-padding);
  gap: var(--data-grid-toolbar-spacing); }
  @media (max-width: 600px) {
    .data-grid .dg-toolbar {
      grid-template-areas: "selection selection selection" ". filter pagination";
      grid-template-columns: 1fr auto auto; } }

:root {
  --data-grid-toolbar-padding: 0 calc(var(--sizing-space-small) * 2);
  --data-grid-toolbar-spacing: 0 var(--sizing-space-large); }

/**
 * Component that handles the table of a data-grid.
 */
.data-grid .dg-table {
  display: grid;
  justify-content: stretch;
  align-content: start;
  justify-items: stretch;
  align-items: center;
  grid-template-columns: var(--data-grid-template-columns);
  position: relative;
  min-height: 4rem;
  padding: var(--data-grid-table-padding); }
  .data-grid .dg-table .dg-table-heading,
  .data-grid .dg-table .dg-table-row {
    display: contents;
    gap: var(--data-grid-table-row-spacing); }
  .data-grid .dg-table .dg-table-cell {
    padding-block: var(--data-grid-table-row-spacing);
    padding-inline: var(--data-grid-table-column-spacing);
    justify-self: stretch;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start; }
    .data-grid .dg-table .dg-table-cell:first-child {
      padding-inline-start: calc(var(--data-grid-table-column-spacing) * 2); }
    .data-grid .dg-table .dg-table-cell:last-child {
      padding-inline-end: calc(var(--data-grid-table-column-spacing) * 2); }
    .data-grid .dg-table .dg-table-cell.align-start {
      text-align: start;
      justify-content: start; }
    .data-grid .dg-table .dg-table-cell.align-center {
      text-align: center;
      justify-content: center; }
    .data-grid .dg-table .dg-table-cell.align-end {
      text-align: end;
      justify-content: end; }

:root {
  --data-grid-table-padding: 0;
  --data-grid-table-row-spacing: var(--sizing-space-small);
  --data-grid-table-column-spacing: var(--sizing-space-small);
  --data-grid-template-columns: 1fr; }

/**
 * Component that handles the footer of a data-grid.
 */
.data-grid .dg-footer {
  display: grid;
  grid-template-areas: "selection filter pagination";
  grid-template-columns: 1fr auto auto;
  justify-content: end;
  align-items: center;
  padding: var(--data-grid-footer-padding);
  gap: var(--data-grid-footer-spacing); }

:root {
  --data-grid-footer-padding: 0 calc(var(--sizing-space-small) * 2);
  --data-grid-footer-spacing: 0 var(--sizing-space-large); }

/**
 * Component that handles a divider in the data grid table.
 */
.data-grid .dg-table .dg-table-row .dg-table-cell {
  border-top: 1px solid var(--data-grid-table-divider-color); }

.data-grid .dg-table .dg-table-divider {
  display: none;
  grid-column: var(--data-grid-table-divider-space);
  margin-top: var(--data-grid-table-divider-spacing);
  border-top: 1px solid var(--data-grid-table-divider-color);
  padding-top: var(--data-grid-table-divider-spacing); }

:root {
  --data-grid-table-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --data-grid-table-divider-spacing: 0;
  --data-grid-table-divider-space: auto; }

.data-grid .dg-toolbar .dg-toolbar-filter {
  grid-area: filter;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--data-grid-filter-toolbar-spacing); }

:root {
  --data-grid-filter-toolbar-spacing: 0; }

/**
 * Component that handles a divider in the data grid table.
 */
.data-grid .dg-table.hover .dg-table-row:hover .dg-table-cell {
  cursor: pointer;
  background: var(--data-grid-table-hover-color); }

:root {
  --data-grid-table-hover-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.data-grid .dg-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--data-grid-message-min-height);
  padding: var(--data-grid-message-padding);
  font: var(--data-grid-message-font);
  color: var(--data-grid-message-color); }

:root {
  --data-grid-message-padding: var(--sizing-space-small);
  --data-grid-message-min-height: 4rem;
  --data-grid-message-font: var(--typo-label-small);
  --data-grid-message-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.data-grid .dg-toolbar .dg-toolbar-pagination,
.data-grid .dg-footer .dg-toolbar-pagination {
  grid-area: pagination;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--data-grid-pagination-toolbar-spacing); }
  .data-grid .dg-toolbar .dg-toolbar-pagination .dg-toolbar-pagination-message,
  .data-grid .dg-footer .dg-toolbar-pagination .dg-toolbar-pagination-message {
    font: var(--data-grid-pagination-toolbar-message-font);
    color: var(--data-grid-pagination-toolbar-message-color); }

:root {
  --data-grid-pagination-toolbar-spacing: var(--sizing-space-medium);
  --data-grid-pagination-toolbar-message-font: var(--typo-label-small);
  --data-grid-pagination-toolbar-message-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.data-grid .dg-toolbar .dg-toolbar-selection {
  grid-area: selection;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--data-grid-selection-toolbar-spacing); }
  .data-grid .dg-toolbar .dg-toolbar-selection .dg-toolbar-selection-box .checkbox-field {
    --form-field-checkbox-box-icon: "-"; }

.data-grid .dg-table .dg-table-row.selected .dg-table-cell {
  background: var(--data-grid-selection-row-color); }

:root {
  --data-grid-selection-toolbar-spacing: var(--sizing-space-medium);
  --data-grid-selection-row-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.data-grid-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--sizing-space-medium); }

.data-grid-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding-inline: var(--sizing-space-medium); }
  .data-grid-row.selected, .data-grid-row.hover:hover {
    background: var(--data-grid-hover-background-color); }
  .data-grid-row input {
    --form-field-checkbox-box-size: 1em; }
  .data-grid-row a {
    color: inherit; }

.data-grid-row-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  column-gap: var(--sizing-space-medium); }
  .data-grid-row-content > *.weight-1 {
    flex: 1; }
  .data-grid-row-content > *.weight-2 {
    flex: 2; }
  .data-grid-row-content > *.weight-3 {
    flex: 3; }
  .data-grid-row-content > *.weight-4 {
    flex: 4; }
  .data-grid-row-content > *.weight-5 {
    flex: 5; }
  .data-grid-row-content > *.weight-6 {
    flex: 6; }
  .data-grid-row-content > *.weight-7 {
    flex: 7; }
  .data-grid-row-content > *.weight-8 {
    flex: 8; }
  .data-grid-row-content > *.weight-9 {
    flex: 9; }
  .data-grid-row-content > *.weight-10 {
    flex: 10; }
  .data-grid-row-content > *.weight-11 {
    flex: 11; }
  .data-grid-row-content > *.weight-12 {
    flex: 12; }

/**
 * Includes all form styling
 *
 * @depends mixins/flex
 */
/**
 * The Form component provides its own mixins for internal use.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Core form component that does composition on the different from sub components: field, fieldset, label and message.
 * - Its main purpose is to handle the layout and spacing between within a form-row.
 * - Spacing between rows are handled by an external component (grid-flex) or a deprecated layout extension.
 */
.form-row .form-label {
  margin: var(--form-margin-label); }

.form-row .form-field {
  margin: var(--form-margin-field); }

.form-row ul.message-list {
  margin: var(--form-margin-message); }

.form-row .form-help {
  margin: var(--form-margin-help); }

.form-row.inverted {
  --form-text-color: var(--form-inverted-text-color);
  --form-border-color: var(--form-inverted-border-color);
  --form-highlighted-color: var(--form-inverted-highlighted-color);
  --form-subdued-color: var(--form-inverted-subdued-color);
  --form-alert-color: var(--form-inverted-alert-color);
  --form-warning-color: var(--form-inverted-warning-color);
  --form-success-color: var(--form-inverted-success-color); }

html {
  --form-margin-label: 0 0 var(--sizing-space-tiny) 0;
  --form-margin-field: 0;
  --form-margin-message: var(--sizing-space-tiny) 0 0 0;
  --form-margin-help: var(--sizing-space-tiny) 0 0 0; }

:root {
  --form-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-highlighted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-alert-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --form-warning-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --form-success-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --form-inverted-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
  --form-inverted-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-inverted-highlighted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  --form-inverted-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-inverted-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-inverted-alert-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium));
  --form-inverted-warning-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
  --form-inverted-success-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
  --form-item-radius: var(--sizing-space-tiny);
  --form-item-border-width: 1px;
  --form-item-state-border-width: 1px;
  --form-item-border: var(--form-item-border-width) solid var(--form-border-color);
  --form-item-spacing: var(--sizing-space-large);
  --form-item-font: var(--typo-text-medium);
  --form-item-line-height: 1.5em;
  --form-item-state-border: true;
  --form-item-icon-padding: var(--sizing-space-small);
  --form-item-icon-width: calc(1.5rem + var(--sizing-space-small)*2);
  --form-item-icon-font-family: "Font Awesome 6 Pro";
  --form-item-icon-font-solid: 900;
  --form-item-icon-font-regular: 400;
  --form-item-icon-font: 900 var(--sizing-text-medium)/1.5em "Font Awesome 6 Pro";
  --form-item-padding: var(--sizing-space-small);
  --form-item-disabled-opacity: 0.5; }

/**
 * Includes all form styling
 *
 * @depends mixins/flex
 */
/**
 * Form field core styling.
 */
/**
 * The form fields have their own configuration because the input components are special ui elements.
 *
 * For example, the input is not inverted.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row {
  --form-field-state-border: none; }
  .form-row .form-field {
    position: relative;
    clear: both; }
    .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']),
    .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']),
    .form-row .form-field > textarea {
      display: inline-block;
      border: var(--form-field-border);
      border-radius: var(--form-field-radius);
      border-color: var(--form-field-border-color);
      background: var(--form-field-background-color);
      color: var(--form-field-color);
      padding: var(--form-field-padding);
      font: var(--form-field-font);
      width: 100%;
      height: auto;
      box-sizing: border-box;
      outline: none;
      vertical-align: middle;
      box-shadow: var(--form-field-state-border);
      transition: all 0.2s ease-in-out; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])::-webkit-input-placeholder,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])::-webkit-input-placeholder,
      .form-row .form-field > textarea::-webkit-input-placeholder {
        color: var(--form-field-placeholder-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])::-moz-placeholder,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])::-moz-placeholder,
      .form-row .form-field > textarea::-moz-placeholder {
        color: var(--form-field-placeholder-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):-moz-placeholder,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):-moz-placeholder,
      .form-row .form-field > textarea:-moz-placeholder {
        color: var(--form-field-placeholder-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):-ms-input-placeholder,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):-ms-input-placeholder,
      .form-row .form-field > textarea:-ms-input-placeholder {
        color: var(--form-field-placeholder-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):focus,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']):focus,
      .form-row .form-field > textarea:focus {
        color: var(--form-field-focus-color);
        background: var(--form-field-focus-background-color);
        border-color: var(--form-field-focus-border-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])[disabled],
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])[disabled],
      .form-row .form-field > textarea[disabled] {
        cursor: not-allowed;
        user-select: none;
        --form-field-color: var(--form-field-disabled-color);
        --form-field-background-color: var(--form-field-disabled-background-color);
        --form-field-border-color: var(--form-field-disabled-border-color);
        --form-field-placeholder-color: var(--form-field-disabled-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])[readonly],
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'])[readonly],
      .form-row .form-field > textarea[readonly] {
        --form-field-color: var(--form-field-disabled-color);
        --form-field-background-color: var(--form-field-disabled-background-color);
        --form-field-border-color: var(--form-field-disabled-border-color);
        --form-field-placeholder-color: var(--form-field-disabled-color); }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-start,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-start,
      .form-row .form-field > textarea.align-start {
        text-align: start; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-end,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-end,
      .form-row .form-field > textarea.align-end {
        text-align: end; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-center,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-center,
      .form-row .form-field > textarea.align-center {
        text-align: center; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-left,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-left,
      .form-row .form-field > textarea.align-left {
        text-align: start; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-right,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).align-right,
      .form-row .form-field > textarea.align-right {
        text-align: end; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).borderless,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).borderless,
      .form-row .form-field > textarea.borderless {
        border: 1px solid transparent; }
      .form-row .form-field > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).transparent,
      .form-row .form-field > * > input:is([type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week']).transparent,
      .form-row .form-field > textarea.transparent {
        background: transparent; }
  .form-row.error, .form-row.alert {
    --form-field-border-color: var(--form-field-alert-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-alert-border-color);
    --form-field-focus-border-color: var(--form-field-alert-border-color); }
  .form-row.warning {
    --form-field-border-color: var(--form-field-warning-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-warning-border-color);
    --form-field-focus-border-color: var(--form-field-warning-border-color); }
  .form-row.success {
    --form-field-border-color: var(--form-field-success-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-success-border-color);
    --form-field-focus-border-color: var(--form-field-success-border-color); }
  .form-row.dirty, .form-row.primary {
    --form-field-border-color: var(--form-field-primary-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-primary-border-color);
    --form-field-focus-border-color: var(--form-field-primary-border-color); }

html {
  --form-field-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-field-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --form-field-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-field-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-field-focus-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1));
  --form-field-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-disabled-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --form-field-disabled-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-field-placeholder-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-alert-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --form-field-alert-background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5));
  --form-field-alert-border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --form-field-alert-subdued-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3));
  --form-field-warning-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --form-field-warning-background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5));
  --form-field-warning-border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --form-field-warning-subdued-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3));
  --form-field-success-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --form-field-success-background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5));
  --form-field-success-border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --form-field-success-subdued-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3));
  --form-field-primary-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-primary-background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5));
  --form-field-primary-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --form-field-primary-subdued-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3));
  --form-field-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-field-inverted-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-inverted-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-inverted-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-field-inverted-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-field-inverted-focus-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-inverted-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-inverted-disabled-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-inverted-disabled-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-inverted-placeholder-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-inverted-alert-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --form-field-inverted-alert-background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-top));
  --form-field-inverted-alert-border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --form-field-inverted-alert-subdued-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high4));
  --form-field-inverted-warning-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --form-field-inverted-warning-background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-top));
  --form-field-inverted-warning-border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --form-field-inverted-warning-subdued-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high4));
  --form-field-inverted-success-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --form-field-inverted-success-background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-top));
  --form-field-inverted-success-border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --form-field-inverted-success-subdued-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high4));
  --form-field-inverted-primary-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --form-field-inverted-primary-background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
  --form-field-inverted-primary-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --form-field-inverted-primary-subdued-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4));
  --form-field-border: var(--form-item-border);
  --form-field-padding: var(--form-item-padding);
  --form-field-radius: var(--form-item-radius);
  --form-field-font: var(--form-item-font); }

/**
 * Checkbox form component
 * @note: new technique using https://moderncss.dev/pure-css-custom-checkbox-style/
 */
.form-row .checkbox-field {
  display: flex;
  gap: var(--form-field-padding);
  align-items: start;
  user-select: none;
  padding: var(--form-field-padding) 0;
  font: var(--form-field-font); }
  .form-row .checkbox-field input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    margin: 0;
    display: grid;
    place-content: center;
    font: inherit;
    color: currentColor;
    width: var(--form-field-checkbox-box-size);
    height: var(--form-field-checkbox-box-size);
    box-sizing: content-box;
    border: var(--form-field-border);
    border-width: var(--form-item-border-width);
    border-radius: var(--form-field-checkbox-box-radius);
    border-color: var(--form-field-border-color);
    background: var(--form-field-background-color);
    transition: all 0.2s ease-in-out;
    cursor: pointer; }
  .form-row .checkbox-field input[type=checkbox]:focus {
    background: var(--form-field-focus-background-color);
    border-color: var(--form-field-focus-border-color); }
  .form-row .checkbox-field input[type=checkbox]:disabled {
    background: var(--form-field-disabled-background-color);
    border-color: var(--form-field-disabled-border-color); }
  .form-row .checkbox-field input[type=checkbox]::before {
    font: var(--form-field-font);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\00a0";
    color: var(--form-field-color);
    text-align: center;
    transform: scale(0);
    transition: transform 0.2s ease-in-out; }
  .form-row .checkbox-field input[type=checkbox]:checked::before {
    content: var(--form-field-checkbox-box-icon);
    transform: scale(1); }
  .form-row .checkbox-field.partial input[type=checkbox]:checked::before {
    content: var(--form-field-checkbox-box-partial-icon); }
  .form-row .checkbox-field input[type=checkbox]:focus::before {
    color: var(--form-field-focus-color); }
  .form-row .checkbox-field input[type=checkbox]:disabled::before {
    color: var(--form-field-disabled-color); }
  .form-row .checkbox-field input + label {
    display: inline-block;
    position: relative;
    flex: 1;
    font: var(--form-field-font);
    cursor: pointer;
    margin: 0;
    padding: var(--form-field-checkbox-label-padding);
    color: var(--form-field-checkbox-label-color); }
  .form-row .checkbox-field input:disabled + label {
    cursor: not-allowed;
    color: var(--form-field-checkbox-label-disabled-color); }

.form-row.inverted {
  --form-field-radio-label-color: var(--form-inverted-text-color);
  --form-field-radio-label-disabled-color: var(--form-inverted-disabled-color); }

html {
  --form-field-checkbox-spacing: var(--form-field-padding);
  --form-field-checkbox-label-padding: var(--form-item-border-width);
  --form-field-checkbox-label-color: var(--form-field-text-color);
  --form-field-checkbox-label-disabled-color: var(--form-field-disabled-color);
  --form-field-checkbox-box-size: 1.5em;
  --form-field-checkbox-box-icon: "";
  --form-field-checkbox-box-partial-icon: '-';
  --form-field-checkbox-box-radius: calc(var(--form-field-radius) / 2); }

/**
 * Checkbox block form component
 *
 * @depends input
 */
.form-row {
  --form-field-state-border: none; }
  .form-row > .checkbox-block-field {
    user-select: none;
    margin: 0;
    text-align: center; }
    .form-row > .checkbox-block-field input[type=checkbox] {
      position: absolute;
      inset-inline-start: -9999px; }
    .form-row > .checkbox-block-field input[type=checkbox] + label {
      display: block;
      position: relative;
      cursor: pointer;
      font: var(--form-field-checkbox-block-font);
      color: var(--form-field-checkbox-block-color);
      background: var(--form-field-checkbox-block-background-color);
      border: var(--form-field-checkbox-block-border);
      border-color: var(--form-field-checkbox-block-border-color);
      border-radius: var(--form-field-checkbox-block-container-radius);
      padding: var(--form-field-checkbox-block-padding);
      box-shadow: var(--form-field-state-border);
      transition: all 0.2s ease-in-out; }
    .form-row > .checkbox-block-field input[type=checkbox]:checked + label {
      color: var(--form-field-checkbox-block-selected-color);
      background-color: var(--form-field-checkbox-block-selected-background-color);
      border-color: var(--form-field-checkbox-block-selected-border-color); }
    .form-row > .checkbox-block-field input[type=checkbox]:focus-visible + label {
      color: var(--form-field-checkbox-block-focus-color);
      background-color: var(--form-field-checkbox-block-focus-background-color);
      border-color: var(--form-field-checkbox-block-focus-border-color); }
    .form-row > .checkbox-block-field input[type=checkbox]:disabled + label {
      cursor: not-allowed; }
    .form-row > .checkbox-block-field input[type=checkbox]:not(:checked):disabled + label {
      opacity: var(--form-field-checkbox-block-disabled-opacity); }
    .form-row > .checkbox-block-field.primary {
      --form-field-checkbox-block-selected-background-color: var(--color-primary); }
    .form-row > .checkbox-block-field.secondary {
      --form-field-checkbox-block-selected-background-color: var(--color-secondary); }
    .form-row > .checkbox-block-field.action {
      --form-field-checkbox-block-selected-background-color: var(--color-action); }
    .form-row > .checkbox-block-field.alert {
      --form-field-checkbox-block-selected-background-color: var(--color-alert); }
    .form-row > .checkbox-block-field.warning {
      --form-field-checkbox-block-selected-background-color: var(--color-warning); }
    .form-row > .checkbox-block-field.success {
      --form-field-checkbox-block-selected-background-color: var(--color-success); }
    .form-row > .checkbox-block-field.admin {
      --form-field-checkbox-block-selected-background-color: var(--color-admin); }
  .form-row.error .form-row,
  .form-row.alert .form-row {
    --form-field-checkbox-block-border-color: var(--form-field-alert-border-color);
    --form-field-checkbox-block-selected-border-color: var(--form-field-alert-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-alert-border-color) !important; }
  .form-row.warning .form-row {
    --form-field-checkbox-block-border-color: var(--form-field-warning-border-color);
    --form-field-checkbox-block-selected-border-color: var(--form-field-warning-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-warning-border-color) !important; }
  .form-row.success .form-row {
    --form-field-checkbox-block-border-color: var(--form-field-success-border-color);
    --form-field-checkbox-block-selected-border-color: var(--form-field-success-border-color);
    --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-success-border-color) !important; }
  .form-row.inverted {
    --form-field-checkbox-block-color: var(--form-field-checkbox-block-inverted-color);
    --form-field-checkbox-block-background-color: var(--form-field-checkbox-block-inverted-background-color);
    --form-field-checkbox-block-border-color: var(--form-field-checkbox-block-inverted-border-color);
    --form-field-checkbox-block-selected-color: var(--form-field-checkbox-block-inverted-selected-color);
    --form-field-checkbox-block-selected-background-color: var(--form-field-checkbox-block-inverted-selected-background-color);
    --form-field-checkbox-block-selected-border-color: var(--form-field-checkbox-block-inverted-selected-border-color);
    --form-field-checkbox-block-focus-color: var(--form-field-checkbox-block-inverted-focus-color);
    --form-field-checkbox-block-focus-background-color: var(--form-field-checkbox-block-inverted-focus-background-color);
    --form-field-checkbox-block-focus-border-color: var(--form-field-checkbox-block-inverted-focus-border-color); }

html {
  --form-field-checkbox-block-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-field-checkbox-block-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-field-checkbox-block-border-color: transparent;
  --form-field-checkbox-block-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-checkbox-block-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-checkbox-block-selected-border-color: transparent;
  --form-field-checkbox-block-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-checkbox-block-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-checkbox-block-focus-border-color: transparent;
  --form-field-checkbox-block-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-checkbox-block-inverted-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-field-checkbox-block-inverted-border-color: var(--form-field-checkbox-block-inverted-background-color);
  --form-field-checkbox-block-inverted-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-checkbox-block-inverted-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-checkbox-block-inverted-selected-border-color: var(--form-field-checkbox-block-inverted-selected-background-color);
  --form-field-checkbox-block-inverted-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-checkbox-block-inverted-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-checkbox-block-inverted-focus-border-color: var(--form-field-checkbox-block-inverted-focus-background-color);
  --form-field-checkbox-block-container-radius: var(--form-field-radius);
  --form-field-checkbox-block-padding-h: var(--sizing-space-medium);
  --form-field-checkbox-block-padding-v: var(--sizing-space-small);
  --form-field-checkbox-block-padding: var(--form-field-checkbox-block-padding-v) var(--form-field-checkbox-block-padding-h);
  --form-field-checkbox-block-border: var(--form-field-border);
  --form-field-checkbox-block-font: var(--form-field-font);
  --form-field-checkbox-block-disabled-opacity: var(--form-item-disabled-opacity); }

/**
 * Date field that displays a focused field even when a dropdown is opened.
 */
.form-row .form-field.date-field {
  position: relative;
  clear: both; }
  .form-row .form-field.date-field > input,
  .form-row .form-field.date-field > * > input {
    transition: all 0.2s ease-in-out, border-radius 0ms; }
    .form-row .form-field.date-field > input.bottom-start, .form-row .form-field.date-field > input.bottom, .form-row .form-field.date-field > input.bottom-end,
    .form-row .form-field.date-field > * > input.bottom-start,
    .form-row .form-field.date-field > * > input.bottom,
    .form-row .form-field.date-field > * > input.bottom-end {
      border-end-start-radius: 0;
      border-end-end-radius: 0; }
    .form-row .form-field.date-field > input.top-start, .form-row .form-field.date-field > input.top, .form-row .form-field.date-field > input.top-end,
    .form-row .form-field.date-field > * > input.top-start,
    .form-row .form-field.date-field > * > input.top,
    .form-row .form-field.date-field > * > input.top-end {
      border-start-start-radius: 0;
      border-start-end-radius: 0; }
  .form-row .form-field.date-field.opened > input, .form-row .form-field.date-field.opened > * > input {
    color: var(--form-field-focus-color);
    background: var(--form-field-focus-background-color);
    border-color: var(--form-field-focus-border-color); }

/**
 * Time field that displays a focused field even when a dropdown is opened.
 */
.form-row .form-field.time-field {
  position: relative;
  clear: both; }
  .form-row .form-field.time-field > input,
  .form-row .form-field.time-field > * > input {
    transition: all 0.2s ease-in-out, border-radius 0ms; }
    .form-row .form-field.time-field > input.bottom-start, .form-row .form-field.time-field > input.bottom, .form-row .form-field.time-field > input.bottom-end,
    .form-row .form-field.time-field > * > input.bottom-start,
    .form-row .form-field.time-field > * > input.bottom,
    .form-row .form-field.time-field > * > input.bottom-end {
      border-end-start-radius: 0;
      border-end-end-radius: 0; }
    .form-row .form-field.time-field > input.top-start, .form-row .form-field.time-field > input.top, .form-row .form-field.time-field > input.top-end,
    .form-row .form-field.time-field > * > input.top-start,
    .form-row .form-field.time-field > * > input.top,
    .form-row .form-field.time-field > * > input.top-end {
      border-start-start-radius: 0;
      border-start-end-radius: 0; }
  .form-row .form-field.time-field.opened > input, .form-row .form-field.time-field.opened > * > input {
    color: var(--form-field-focus-color);
    background: var(--form-field-focus-background-color);
    border-color: var(--form-field-focus-border-color); }

/**
 * Styling of datepicker input
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.zf-cal {
  position: relative;
  width: var(--form-calendar-width);
  color: var(--form-calendar-text-color);
  background-color: var(--form-calendar-background-color);
  user-select: none; }
  .zf-cal .zf-cal-header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    position: relative;
    font: var(--form-calendar-header-font);
    margin-bottom: var(--form-calendar-spacing); }
    .zf-cal .zf-cal-header .zf-cal-prev {
      width: 10%; }
    .zf-cal .zf-cal-header .zf-cal-month-selector {
      width: 50%; }
    .zf-cal .zf-cal-header .zf-cal-year-selector {
      width: 30%; }
    .zf-cal .zf-cal-header .zf-cal-next {
      width: 10%; }
    .zf-cal .zf-cal-header .zf-cal-month-selector,
    .zf-cal .zf-cal-header .zf-cal-year-selector {
      text-align: center; }
    .zf-cal .zf-cal-header .zf-cal-prev, .zf-cal .zf-cal-header .zf-cal-next {
      display: inline-block;
      position: relative;
      font: var(--form-calendar-header-icon-font);
      cursor: pointer;
      text-align: center; }
    .zf-cal .zf-cal-header .zf-cal-prev > div::before {
      content: var(--form-calendar-header-icon-previous); }
    .zf-cal .zf-cal-header .zf-cal-next > div::before {
      content: var(--form-calendar-header-icon-next); }
  .zf-cal table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--form-calendar-item-background); }
  .zf-cal td {
    width: 14%;
    padding: var(--form-calendar-item-padding) 0;
    font: var(--form-calendar-item-font);
    color: var(--form-calendar-item-color);
    border: var(--form-calendar-item-border);
    background: var(--form-calendar-item-background);
    vertical-align: top;
    text-align: center;
    cursor: pointer; }
  .zf-cal .zf-cal-dow td {
    font: var(--form-calendar-days-font);
    color: var(--form-calendar-days-color);
    cursor: default; }
  .zf-cal .zf-cal-days td.empty {
    color: var(--form-calendar-item-empty-text-color);
    background: var(--form-calendar-item-empty-background-color);
    cursor: not-allowed; }
  .zf-cal .zf-cal-days td.disabled {
    color: var(--form-calendar-item-disabled-text-color);
    background: var(--form-calendar-item-disabled-background-color);
    cursor: not-allowed; }
  .zf-cal .zf-cal-days td.today {
    color: var(--form-calendar-item-today-text-color);
    background: var(--form-calendar-item-today-background-color); }
  .zf-cal .zf-cal-days td.selected {
    color: var(--form-calendar-item-selected-text-color);
    background: var(--form-calendar-item-selected-background-color); }
  .zf-cal .zf-cal-days td:not(.empty):not(.disabled):hover {
    color: var(--form-calendar-item-hover-text-color);
    background: var(--form-calendar-item-hover-background-color); }

html {
  --form-calendar-width: 16rem;
  --form-calendar-spacing: var(--sizing-space-small);
  --form-calendar-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-calendar-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-calendar-header-font: var(--typo-label-small);
  --form-calendar-header-icon-font: 900 var(--sizing-text-medium)/1.5em "Font Awesome 6 Pro";
  --form-calendar-header-icon-previous: "";
  --form-calendar-header-icon-next: "";
  --form-calendar-days-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-calendar-days-font: var(--typo-label-tiny);
  --form-calendar-item-font: var(--typo-label-small);
  --form-calendar-item-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-calendar-item-border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-calendar-item-padding: var(--sizing-space-small);
  --form-calendar-item-background: transparent;
  --form-calendar-item-empty-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-calendar-item-empty-background-color: transparent;
  --form-calendar-item-disabled-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-calendar-item-disabled-background-color: inherit;
  --form-calendar-item-today-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-calendar-item-today-background-color: transparent;
  --form-calendar-item-selected-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-calendar-item-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-calendar-item-hover-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-calendar-item-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * Form email input styling.
 */
/**
 * Form number input styling.
 *
 * @depends input
 */
.form-row .form-field.number-field {
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */ }
  .form-row .form-field.number-field input::-webkit-outer-spin-button,
  .form-row .form-field.number-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  .form-row .form-field.number-field input[type=number] {
    -moz-appearance: textfield; }

/**
 * Form password input styling.
 *
 * @depends input
 */
/**
 * Radio form component
 */
.form-row .radio-field {
  display: flex;
  gap: var(--form-field-padding);
  align-items: start;
  user-select: none;
  padding: var(--form-field-padding) 0;
  font: var(--form-field-font); }
  .form-row .radio-field input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    margin: 0;
    display: grid;
    place-content: center;
    font: inherit;
    color: currentColor;
    width: var(--form-field-radio-box-size);
    height: var(--form-field-radio-box-size);
    box-sizing: content-box;
    border: var(--form-field-border);
    border-width: var(--form-item-border-width);
    border-radius: 50%;
    border-color: var(--form-field-border-color);
    background: var(--form-field-background-color);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative; }
  .form-row .radio-field input[type=radio]:focus {
    background: var(--form-field-focus-background-color);
    border-color: var(--form-field-focus-border-color); }
  .form-row .radio-field input[type=radio]:disabled {
    background: var(--form-field-disabled-background-color);
    border-color: var(--form-field-disabled-border-color); }
  .form-row .radio-field input[type=radio]::before {
    position: absolute;
    content: "";
    margin: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: var(--form-field-color);
    transform: scale(0);
    transition: transform 0.2s ease-in-out; }
  .form-row .radio-field input[type=radio]:checked::before {
    transform: scale(1); }
  .form-row .radio-field input[type=radio]:focus::before {
    color: var(--form-field-focus-color); }
  .form-row .radio-field input[type=radio]:disabled::before {
    color: var(--form-field-disabled-color); }
  .form-row .radio-field input + label {
    display: inline-block;
    position: relative;
    flex: 1;
    font: var(--form-field-font);
    cursor: pointer;
    margin: 0;
    padding: var(--form-field-radio-label-padding);
    color: var(--form-field-radio-label-color); }
  .form-row .radio-field input:disabled + label {
    cursor: not-allowed;
    color: var(--form-field-radio-label-disabled-color); }

.form-row.inverted {
  --form-field-radio-label-color: var(--form-inverted-text-color);
  --form-field-radio-label-disabled-color: var(--form-inverted-disabled-color); }

html {
  --form-field-radio-spacing: var(--form-field-padding);
  --form-field-radio-label-padding: var(--form-item-border-width);
  --form-field-radio-label-color: var(--form-field-text-color);
  --form-field-radio-label-disabled-color: var(--form-field-disabled-color);
  --form-field-radio-box-size: 1.5em; }

/**
 * Radio block form component
 *
 * @depends input
 */
.form-row > .form-field .radio-block-container {
  border-radius: var(--form-field-radio-block-container-radius);
  border: var(--form-field-radio-block-container-border-width) solid var(--form-field-radio-block-container-border-color);
  overflow: hidden; }

.form-row > .radio-block-field {
  user-select: none;
  margin: 0;
  border: 0; }
  .form-row > .radio-block-field input[type=radio] {
    position: absolute;
    inset-inline-start: -9999px; }
  .form-row > .radio-block-field input[type=radio] + label {
    display: block;
    position: relative;
    cursor: pointer;
    font: var(--form-field-radio-block-font);
    color: var(--form-field-radio-block-color);
    background: var(--form-field-radio-block-background-color);
    border: var(--form-field-radio-block-border-width) solid transparent;
    padding: var(--form-field-radio-block-padding);
    transition: all 0.2s ease-in-out; }
  .form-row > .radio-block-field input[type=radio]:checked + label {
    color: var(--form-field-radio-block-selected-color);
    background-color: var(--form-field-radio-block-selected-background-color); }
  .form-row > .radio-block-field input[type=radio]:focus-visible + label {
    color: var(--form-field-radio-block-focus-color);
    background-color: var(--form-field-radio-block-focus-background-color); }
  .form-row > .radio-block-field input[type=radio]:disabled + label {
    cursor: not-allowed; }
  .form-row > .radio-block-field input[type=radio]:not(:checked):disabled + label {
    opacity: var(--form-field-radio-block-disabled-opacity); }
  .form-row > .radio-block-field.primary {
    --form-field-radio-block-selected-background-color: var(--color-primary); }
  .form-row > .radio-block-field.secondary {
    --form-field-radio-block-selected-background-color: var(--color-secondary); }
  .form-row > .radio-block-field.action {
    --form-field-radio-block-selected-background-color: var(--color-action); }
  .form-row > .radio-block-field.alert {
    --form-field-radio-block-selected-background-color: var(--color-alert); }
  .form-row > .radio-block-field.warning {
    --form-field-radio-block-selected-background-color: var(--color-warning); }
  .form-row > .radio-block-field.success {
    --form-field-radio-block-selected-background-color: var(--color-success); }
  .form-row > .radio-block-field.admin {
    --form-field-radio-block-selected-background-color: var(--color-admin); }

.form-row.error, .form-row.alert {
  --form-field-radio-block-container-border-width: var(--form-item-border-width);
  --form-field-radio-block-container-border-color: var(--form-field-alert-border-color);
  --form-field-radio-block-border-width: 0;
  --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-alert-border-color) !important; }

.form-row.warning {
  --form-field-radio-block-container-border-width: var(--form-item-border-width);
  --form-field-radio-block-container-border-color: var(--form-field-warning-border-color);
  --form-field-radio-block-border-width: 0;
  --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-warning-border-color) !important; }

.form-row.success {
  --form-field-radio-block-container-border-width: var(--form-item-border-width);
  --form-field-radio-block-container-border-color: var(--form-field-success-border-color);
  --form-field-radio-block-border-width: 0;
  --form-field-state-border: 0 0 0 var(--form-item-state-border-width) var(--form-field-success-border-color) !important; }

.form-row.inverted {
  --form-field-radio-block-container-border-color: var(--form-field-radio-block-inverted-container-border-color);
  --form-field-radio-block-color: var(--form-field-radio-block-inverted-color);
  --form-field-radio-block-background-color: var(--form-field-radio-block-inverted-background-color);
  --form-field-radio-block-border-color: var(--form-field-radio-block-inverted-border-color);
  --form-field-radio-block-selected-color: var(--form-field-radio-block-inverted-selected-color);
  --form-field-radio-block-selected-background-color: var(--form-field-radio-block-inverted-selected-background-color);
  --form-field-radio-block-focus-color: var(--form-field-radio-block-inverted-focus-color);
  --form-field-radio-block-focus-background-color: var(--form-field-radio-block-inverted-focus-background-color); }

html {
  --form-field-radio-block-container-border-color: transparent;
  --form-field-radio-block-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --form-field-radio-block-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-field-radio-block-border-color: transparent;
  --form-field-radio-block-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-radio-block-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-radio-block-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-radio-block-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-field-radio-block-inverted-container-border-color: transparent;
  --form-field-radio-block-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-radio-block-inverted-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-field-radio-block-inverted-border-color: transparent;
  --form-field-radio-block-inverted-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-radio-block-inverted-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --form-field-radio-block-inverted-focus-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-field-radio-block-inverted-focus-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --form-field-radio-block-container-border-width: 0;
  --form-field-radio-block-container-radius: var(--form-field-radius);
  --form-field-radio-block-padding-h: var(--sizing-space-medium);
  --form-field-radio-block-padding-v: var(--sizing-space-small);
  --form-field-radio-block-padding: var(--form-field-radio-block-padding-v) var(--form-field-radio-block-padding-h);
  --form-field-radio-block-border: var(--form-field-border);
  --form-field-radio-block-border-width: var(--form-item-border-width);
  --form-field-radio-block-font: var(--form-field-font);
  --form-field-radio-block-disabled-opacity: var(--form-item-disabled-opacity); }

/**
 * Form search input styling.
 *
 * @depends input
 */
.form-row .form-field.search-field > input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none; }

/**
 * Form input styling.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row .form-field.select-field {
  position: relative;
  clear: both; }
  .form-row .form-field.select-field .simple {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    color: var(--form-field-color);
    background: var(--form-field-background-color);
    border: var(--form-field-border);
    border-radius: var(--form-field-radius);
    border-color: var(--form-field-border-color);
    padding: var(--form-field-padding);
    font: var(--form-field-font);
    outline: none;
    vertical-align: middle;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--form-field-state-border);
    transition: all 0.2s ease-in-out, border-radius 0ms;
    user-select: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none; }
    .form-row .form-field.select-field .simple:focus, .form-row .form-field.select-field .simple.focus {
      color: var(--form-field-focus-color);
      background: var(--form-field-focus-background-color);
      border-color: var(--form-field-focus-border-color); }
    .form-row .form-field.select-field .simple.disabled, .form-row .form-field.select-field .simple[disabled], .form-row .form-field.select-field .simple[readonly] {
      color: var(--form-field-disabled-color);
      background: var(--form-field-disabled-background-color);
      border-color: var(--form-field-disabled-border-color); }
    .form-row .form-field.select-field .simple[disabled], .form-row .form-field.select-field .simple.disabled {
      cursor: not-allowed;
      user-select: none; }
    .form-row .form-field.select-field .simple.bottom-start, .form-row .form-field.select-field .simple.bottom, .form-row .form-field.select-field .simple.bottom-end {
      border-end-start-radius: 0;
      border-end-end-radius: 0; }
    .form-row .form-field.select-field .simple.top-start, .form-row .form-field.select-field .simple.top, .form-row .form-field.select-field .simple.top-end {
      border-start-start-radius: 0;
      border-start-end-radius: 0; }
  .form-row .form-field.select-field.arrow {
    color: var(--form-field-color); }
    .form-row .form-field.select-field.arrow.disabled {
      color: var(--form-field-disabled-color); }
    .form-row .form-field.select-field.arrow .simple {
      padding-inline-end: var(--form-select-arrow-width); }
    .form-row .form-field.select-field.arrow::after {
      position: absolute;
      box-sizing: border-box;
      inline-size: var(--form-select-arrow-width);
      padding: var(--form-select-arrow-padding);
      inset-block-start: var(--form-select-arrow-offset);
      inset-inline-end: 0;
      font: var(--form-select-arrow-font);
      color: var(--form-select-arrow-color);
      content: var(--form-select-arrow-content-down);
      border: var(--form-item-border-width) solid transparent;
      text-align: center;
      pointer-events: none; }
    .form-row .form-field.select-field.arrow.down::after {
      content: var(--form-select-arrow-content-down); }
    .form-row .form-field.select-field.arrow.up::after {
      content: var(--form-select-arrow-content-up); }

.form-row .form-field.search-field > input[type="search"].bottom-start, .form-row .form-field.search-field > input[type="search"].bottom, .form-row .form-field.search-field > input[type="search"].bottom-end, .form-row .form-field.search-field > * > input[type="search"].bottom-start, .form-row .form-field.search-field > * > input[type="search"].bottom, .form-row .form-field.search-field > * > input[type="search"].bottom-end {
  border-end-start-radius: 0;
  border-end-end-radius: 0; }

.form-row .form-field.search-field > input[type="search"].top-start, .form-row .form-field.search-field > input[type="search"].top, .form-row .form-field.search-field > input[type="search"].top-end, .form-row .form-field.search-field > * > input[type="search"].top-start, .form-row .form-field.search-field > * > input[type="search"].top, .form-row .form-field.search-field > * > input[type="search"].top-end {
  border-start-start-radius: 0;
  border-start-end-radius: 0; }

html {
  --form-select-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-select-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-select-inverted-selected-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-select-inverted-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --form-select-arrow-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-select-arrow-width: calc(1.5rem + var(--sizing-space-small)*2);
  --form-select-arrow-padding: var(--sizing-space-small);
  --form-select-arrow-font: 900 var(--sizing-text-medium)/1.5em "Font Awesome 6 Pro";
  --form-select-arrow-content-down: "";
  --form-select-arrow-content-up: "";
  --form-select-arrow-offset: 0; }

/**
 * Form switch styling.
 * @note: this field type does not provide support for the form states (focus, alert, warning, success)
 */
.form-row.disabled .form-field.switch-field {
  cursor: not-allowed;
  color: var(--form-field-switch-disabled-color); }

.form-row.readonly .form-field.switch-field {
  cursor: not-allowed;
  color: var(--form-field-switch-disabled-color); }

html {
  --form-field-switch-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

/**
 * Form tel input styling.
 *
 * @depends input
 */
/**
 * Form's textarea styling
 */
.form-row .form-field > textarea {
  resize: vertical;
  min-height: var(--form-textarea-min-height);
  overflow: auto; }
  .form-row .form-field > textarea.sizeless {
    min-height: 0; }
  .form-row .form-field > textarea.no-resize {
    resize: none; }
  .form-row .form-field > textarea.oneline {
    min-height: var(--form-textarea-oneline-height);
    height: var(--form-textarea-oneline-height); }

html {
  --form-textarea-min-height: 8rem;
  --form-textarea-oneline-height: calc(var(--form-item-line-height) + var(--form-item-padding) * 2  + var(--form-item-border-width) * 2); }

/**
 * Form url input styling.
 *
 * @depends input
 */
/**
 * Form upload input styling.
 *
 * @depends input
 */
.form-row .form-field.upload-field .container .dropzone {
  border-radius: var(--form-field-upload-dropzone-radius);
  border: var(--form-field-upload-dropzone-border);
  color: var(--form-field-upload-dropzone-text-color);
  padding: var(--form-field-upload-dropzone-padding);
  cursor: pointer; }
  .form-row .form-field.upload-field .container .dropzone > .text {
    text-align: center;
    user-select: none; }
  .form-row .form-field.upload-field .container .dropzone > .preview {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: minmax(1fr, 100%);
    align-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden; }

.form-row .form-field.upload-field > input {
  display: none; }

.form-row.disabled .upload-field .container .dropzone {
  cursor: not-allowed; }

html {
  --form-field-upload-dropzone-radius: var(--sizing-space-tiny);
  --form-field-upload-dropzone-padding: var(--sizing-space-large);
  --form-field-upload-dropzone-border: var(--form-field-upload-dropzone-border-width) var(--form-field-upload-dropzone-border-style) var(--form-field-upload-dropzone-border-color);
  --form-field-upload-dropzone-border-width: 1px;
  --form-field-upload-dropzone-border-style: dashed;
  --form-field-upload-dropzone-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --form-field-upload-dropzone-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

/**
 * Includes all select components.
 */
/**
 * Core required for un-styled select2.
 *
 * It is also divided into 3 sub-components: single, multi and dropdown.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Form input styling.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.select2-container {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle; }
  .select2-container .selection {
    display: block;
    line-height: 0; }
  .select2-container.select2-container--open.select2-container--above span.select2-selection {
    border-start-start-radius: 0;
    border-start-end-radius: 0; }
  .select2-container.select2-container--open.select2-container--below span.select2-selection {
    border-end-start-radius: 0;
    border-end-end-radius: 0; }
  .select2-container .select2-selection {
    box-sizing: border-box;
    user-select: none; }
    .select2-container .select2-selection .select2-selection__rendered {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

.select2-close-mask {
  display: block;
  position: fixed;
  border: 0;
  margin: 0;
  padding: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  z-index: 99;
  background: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden; }

/**
 * Select single styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 *
 * @todo: error, warning and success don't have a visible focus state
 */
.form-row .select2-selection--single {
  display: inline-block;
  position: relative;
  width: 100%;
  height: auto;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  border-radius: var(--sizing-space-tiny);
  font: var(--typo-text-medium);
  outline: none;
  cursor: pointer; }
  .form-row .select2-selection--single .select2-selection__rendered {
    display: block;
    position: relative;
    padding: var(--sizing-space-small);
    padding-inline-end: calc(1.5rem + var(--sizing-space-small)*2); }
    .form-row .select2-selection--single .select2-selection__rendered::after {
      content: "\00A0"; }
  .form-row .select2-selection--single .select2-selection__placeholder {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .form-row .select2-selection--single .select2-selection__clear {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(-1 * 1px);
    width: 0;
    visibility: hidden; }
  .form-row .select2-selection--single .select2-selection__clear::after {
    position: absolute;
    box-sizing: border-box;
    width: calc(1.5rem + var(--sizing-space-small)*2);
    padding: var(--sizing-space-small);
    padding-inline-end: 0;
    margin-block-start: 2px;
    inset-block-start: calc(-1 * 1px);
    inset-inline-end: calc(-1 * var(--sizing-space-small));
    font: 900 var(--sizing-text-medium)/1.5em "Font Awesome 6 Pro";
    content: "";
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
    border: 1px solid transparent;
    visibility: visible;
    text-align: center; }
  .form-row .select2-selection--single .select2-selection__arrow b::before {
    position: absolute;
    box-sizing: border-box;
    width: calc(1.5rem + var(--sizing-space-small)*2);
    padding: var(--sizing-space-small);
    margin-block-start: 0;
    inset-block-start: calc(-1 * 1px);
    inset-inline-end: 0;
    font: 900 var(--sizing-text-medium)/1.5em "Font Awesome 6 Pro";
    content: "";
    border: 1px solid transparent;
    text-align: center; }
  .form-row .select2-selection--single:focus {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.form-row .select2-container.select2-container--open .select2-selection--single {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.form-row .select2-container.select2-container--open.select2-container--above .select2-selection--single {
  box-shadow: 0 2px var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

.form-row .select2-container.select2-container--open.select2-container--below .select2-selection--single {
  box-shadow: 0 0 var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

.form-row .select2-container.select2-container--open .select2-selection__arrow b::before {
  top: 0;
  content: ""; }

.form-row .select2-container.select2-container--disabled .select2-selection--single {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  cursor: not-allowed; }

.form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--single, .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5));
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--single .select2-selection__placeholder, .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus .select2-selection__placeholder {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }

.form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--single, .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5));
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
  .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--single .select2-selection__placeholder, .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus .select2-selection__placeholder {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }

.form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--single, .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5));
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
  .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--single .select2-selection__placeholder, .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus .select2-selection__placeholder {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }

.form-row.primary .form-field .select2-container:not(.select2-container--open) .select2-selection--single, .form-row.primary .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5));
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .form-row.primary .form-field .select2-container:not(.select2-container--open) .select2-selection--single .select2-selection__placeholder, .form-row.primary .form-field .select2-container:not(.select2-container--open) .select2-selection--single:focus .select2-selection__placeholder {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

/**
 * Multiple select form input
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Tools to handle logical values and RTL.
 */
/**
 * Apply a logical float.
 */
/**
 * Apply a logical position of all 4 values at once.
 */
/**
 * Apply a logical margin of all 4 values at once.
 */
/**
 * Apply a logical padding of all 4 values at once.
 */
/**
 * Apply a logical border-width of all 4 at once.
 */
.form-row .select2-selection--multiple {
  display: block;
  position: relative;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  border-radius: var(--sizing-space-tiny);
  font: var(--typo-text-medium);
  outline: none;
  cursor: text; }

.form-row .select2-selection__rendered {
  display: block;
  position: relative;
  box-sizing: border-box;
  list-style: none;
  width: 100%;
  padding: var(--sizing-space-small) 0 0 var(--sizing-space-small);
  margin: 0; }
  .form-row .select2-selection__rendered::after {
    content: "\00A0"; }
  .form-row .select2-selection__rendered > li {
    display: inline-block;
    float: left;
    margin: 0 var(--sizing-space-small) var(--sizing-space-small) 0;
    cursor: default; }
    [dir="rtl"] .form-row .select2-selection__rendered > li {
      float: right; }
    .form-row .select2-selection__rendered > li.select2-search--inline {
      display: inline-block; }
      .form-row .select2-selection__rendered > li.select2-search--inline input {
        min-width: 4rem; }
    .form-row .select2-selection__rendered > li.select2-selection__choice {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
      padding: 0 var(--sizing-space-small);
      border-radius: var(--sizing-space-tiny); }
    .form-row .select2-selection__rendered > li .select2-selection__choice__remove {
      cursor: pointer;
      padding-inline-end: var(--sizing-space-tiny); }

.form-row .select2-selection__placeholder {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.form-row .select2-container.select2-container--open .select2-selection--multiple {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.form-row .select2-container.select2-container--open.select2-container--above .select2-selection--multiple {
  box-shadow: 0 2px var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

.form-row .select2-container.select2-container--open.select2-container--below .select2-selection--multiple {
  box-shadow: 0 0 var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

.form-row .select2-container.select2-container--disabled .select2-selection--multiple {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  cursor: not-allowed; }
  .form-row .select2-container.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove {
    display: none; }

.form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple, .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5));
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple .select2-selection__placeholder, .form-row.error .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus .select2-selection__placeholder {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }

.form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple, .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5));
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
  .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple .select2-selection__placeholder, .form-row.warning .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus .select2-selection__placeholder {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }

.form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple, .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5));
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  box-shadow: 0 0 0 1px hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
  .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple .select2-selection__placeholder, .form-row.success .form-field .select2-container:not(.select2-container--open) .select2-selection--multiple:focus .select2-selection__placeholder {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }

/**
 * Select's drop-down
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.select2-container .select2-dropdown {
  display: block;
  position: absolute;
  box-sizing: border-box;
  inset-inline-start: -100000px;
  width: 100%;
  z-index: 1978;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1));
  border-radius: var(--sizing-space-tiny);
  font: var(--typo-text-medium); }

.select2-container .select2-search--dropdown {
  display: block;
  padding: 0 var(--sizing-space-small); }
  .select2-container .select2-search--dropdown.select2-search--hide {
    display: none; }
  .select2-container .select2-search--dropdown input.select2-search__field {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
    border: 0;
    border-radius: var(--sizing-space-tiny);
    padding: var(--sizing-space-small);
    box-sizing: border-box;
    width: 100%;
    height: auto;
    font: var(--typo-text-medium);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none; }

.select2-container .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0; }

.select2-container .select2-results {
  display: block;
  padding: var(--sizing-space-small); }

.select2-container .select2-search:not(.select2-search--hide) + .select2-results {
  padding-top: 0; }

.select2-container .select2-results__options {
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto; }
  .select2-container .select2-results__options .select2-results__option {
    padding: var(--sizing-space-tiny) var(--sizing-space-small);
    font: var(--typo-text-medium);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    cursor: pointer;
    user-select: none; }
    .select2-container .select2-results__options .select2-results__option[aria-disabled=true] {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
      cursor: not-allowed; }
    .select2-container .select2-results__options .select2-results__option[aria-selected=true] {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .select2-container .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.select2-container .select2-results__option {
  padding-inline-start: 1em; }
  .select2-container .select2-results__option[role=group] {
    padding: 0; }
  .select2-container .select2-results__option .select2-results__option {
    padding-inline-start: 1em; }

.select2-container .select2-results__group {
  display: block;
  padding: var(--sizing-space-tiny) var(--sizing-space-small);
  cursor: default;
  font: var(--typo-title-small);
  letter-spacing: 0; }

.select2-container.select2-container--open .select2-dropdown {
  inset-inline-start: 0; }

.select2-container.select2-container--open .select2-dropdown--above {
  border-block-end: none;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  box-shadow: 0 0 var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

.select2-container.select2-container--open .select2-dropdown--below {
  border-block-start: none;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  box-shadow: 0 2px var(--sizing-space-tiny) rgba(0, 0, 0, 0.2); }

/**
 * CSS Component that handles dropdowns in form fields. (eg: date, time, select)
 */
.form-dropdown {
  position: relative;
  box-sizing: content-box;
  inset-inline: 0 0;
  padding: var(--form-dropdown-padding);
  border: var(--form-dropdown-border);
  border-radius: var(--form-dropdown-radius);
  background-color: var(--form-dropdown-background-color);
  border-color: var(--form-dropdown-border-color);
  color: var(--form-dropdown-text-color);
  font: var(--form-dropdown-font);
  z-index: 99;
  max-height: 22rem; }
  .form-dropdown .container {
    position: relative;
    max-height: var(--form-dropdown-max-height);
    overflow-y: auto; }
    .form-dropdown .container > ul {
      list-style: none;
      padding: 0;
      margin: 0; }
      .form-dropdown .container > ul > li {
        display: flex;
        align-items: center;
        padding: var(--form-dropdown-item-padding);
        cursor: pointer;
        user-select: none; }
        .form-dropdown .container > ul > li.hover:hover, .form-dropdown .container > ul > li.selected {
          color: var(--form-dropdown-item-selected-text-color);
          background-color: var(--form-dropdown-item-selected-background-color); }
        .form-dropdown .container > ul > li > div {
          margin-inline-end: var(--form-dropdown-item-spacing); }
  .form-dropdown.bottom-start, .form-dropdown.bottom, .form-dropdown.bottom-end {
    border-start-start-radius: 0;
    border-start-end-radius: 0; }
  .form-dropdown.top-start, .form-dropdown.top, .form-dropdown.top-end {
    border-end-start-radius: 0;
    border-end-end-radius: 0; }
  .form-dropdown.inverted {
    --form-dropdown-background-color: var(--form-dropdown-inverted-background-color);
    --form-dropdown-border-color: var(--form-dropdown-inverted-border-color);
    --form-dropdown-text-color: var(--form-dropdown-inverted-text-color);
    --form-dropdown-item-selected-text-color: var(--form-dropdown-item-selected-inverted-text-color);
    --form-dropdown-item-selected-background-color: var(--form-dropdown-item-selected-inverted-background-color); }

html {
  --form-dropdown-offset: var(--form-item-border-width);
  --form-dropdown-padding: var(--form-field-padding);
  --form-dropdown-border: var(--form-field-border);
  --form-dropdown-radius: var(--form-field-radius);
  --form-dropdown-font: var(--form-field-font);
  --form-dropdown-max-height: 22rem;
  --form-dropdown-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --form-dropdown-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1));
  --form-dropdown-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --form-dropdown-inverted-background-color: var(--form-field-inverted-focus-background-color);
  --form-dropdown-inverted-border-color: var(--form-field-inverted-focus-border-color);
  --form-dropdown-inverted-text-color: var(--form-field-inverted-focus-color);
  --form-dropdown-item-padding: var(--sizing-space-tiny) var(--sizing-space-small);
  --form-dropdown-item-spacing: var(--sizing-space-small);
  --form-dropdown-item-selected-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-dropdown-item-selected-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --form-dropdown-item-selected-inverted-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --form-dropdown-item-selected-inverted-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

/**
 * Form action styling.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row .form-field .form-action {
  position: absolute;
  inset-inline-end: var(--form-item-border-width);
  inset-block-start: 0;
  inline-size: var(--form-action-size);
  block-size: calc(var(--form-item-line-height) + var(--form-item-padding) * 2  + var(--form-item-border-width) * 2);
  display: flex;
  justify-content: end;
  align-content: center;
  transition: all 0.2s ease-in-out;
  z-index: 1; }
  .form-row .form-field .form-action ~ input,
  .form-row .form-field .form-action ~ textarea,
  .form-row .form-field .form-action ~ select,
  .form-row .form-field .form-action ~ .simple {
    padding-inline-end: var(--form-action-size) !important; }
  .form-row .form-field .form-action.double {
    --form-action-size: 5rem; }
    .form-row .form-field .form-action.double ~ input,
    .form-row .form-field .form-action.double ~ textarea,
    .form-row .form-field .form-action.double ~ select,
    .form-row .form-field .form-action.double ~ .simple {
      --form-action-size: 5rem; }

html {
  --form-action-size: 2.5rem; }

/**
 * Extension that provide a way to set an icon within a field (within the input on the left).
 */
.form-row .form-field .form-icon {
  position: absolute;
  inset-inline-start: var(--form-item-border-width);
  inset-block-start: var(--form-item-border-width);
  inline-size: var(--form-icon-size);
  text-align: start; }

.form-row .form-field .form-icon ~ input,
.form-row .form-field .form-icon ~ textarea,
.form-row .form-field .form-icon ~ select {
  padding-inline-start: var(--form-icon-size) !important; }

html {
  --form-icon-size: 2.5rem; }

/**
 * Form label styling.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row .form-label {
  position: relative;
  font: var(--form-label-font);
  color: var(--form-label-color); }
  .form-row .form-label > label {
    display: inline-flex;
    align-items: baseline;
    cursor: pointer;
    margin: var(--form-label-spacing); }
    .form-row .form-label > label .required {
      font: var(--form-label-secondary-font);
      margin-inline-start: var(--form-label-secondary-spacing);
      color: var(--form-label-required-color); }
    .form-row .form-label > label .optional {
      font: var(--form-label-secondary-font);
      margin-inline-start: var(--form-label-secondary-spacing);
      color: var(--form-label-optional-color); }
    .form-row .form-label > label .constraint {
      font: var(--form-label-secondary-font);
      margin-inline-start: var(--form-label-secondary-spacing);
      color: var(--form-label-constraint-color); }
    .form-row .form-label > label .info {
      font: var(--form-label-secondary-font);
      margin-inline-start: var(--form-label-secondary-spacing);
      color: var(--form-label-info-color); }
    .form-row .form-label > label .admin {
      font: var(--form-label-secondary-font);
      margin-inline-start: var(--form-label-secondary-spacing);
      color: var(--form-label-admin-color); }

.form-row.disabled .form-label > label {
  cursor: not-allowed;
  color: var(--form-label-disabled-color); }

.form-row.inverted {
  --form-label-default-color: var(--form-inverted-text-color);
  --form-label-required-color: var(--form-inverted-warning-color);
  --form-label-optional-color: var(--form-inverted-subdued-color);
  --form-label-disabled-color: var(--form-inverted-disabled-color) ;
  --form-label-constraint-color: var(--form-inverted-subdued-color);
  --form-label-info-color: color_variant($color-primary, 'i_medium');
  --form-label-admin-color: color_variant($color-admin, 'i_medium'); }

html {
  --form-label-font: var(--typo-label-small);
  --form-label-spacing: 0;
  --form-label-secondary-font: var(--typo-label-tiny);
  --form-label-secondary-spacing: var(--sizing-space-tiny);
  --form-label-color: var(--form-text-color);
  --form-label-required-color: var(--form-warning-color);
  --form-label-optional-color: var(--form-subdued-color);
  --form-label-disabled-color: var(--form-disabled-color) ;
  --form-label-constraint-color: var(--form-subdued-color);
  --form-label-info-color: color_variant($color-primary, 'medium');
  --form-label-admin-color: color_variant($color-admin, 'medium'); }

/**
 * Extension to the form label to add the ability to set an action at the right of the label section.
 */
.form-row .form-label > .action {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  font: var(--form-label-secondary-font); }

/**
 * Form help styling.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row .form-help {
  font: var(--form-help-font);
  color: var(--form-help-color); }

.form-row.disabled .form-help {
  cursor: not-allowed; }

.form-row.inverted {
  --form-help-color: var(--form-inverted-text-color); }

html {
  --form-help-font: var(--typo-text-small);
  --form-help-color: var(--form-text-color); }

/**
 * Form messages styling.
 *
 * Please notice that this only concerns how error messages are displayed, not the state of a the input fields.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.form-row ul.message-list {
  color: var(--form-message-color);
  clear: both;
  padding: 0;
  font: var(--form-message-font); }
  .form-row ul.message-list li {
    display: block; }

.form-row.alert ul.message-list,
.form-row.error ul.message-list {
  color: var(--form-message-alert-color); }

.form-row.warning ul.message-list {
  color: var(--form-message-warning-color); }

.form-row.success ul.message-list {
  color: var(--form-message-success-color); }

.form-row.disabled ul.message-list {
  color: var(--form-message-disabled-color);
  cursor: not-allowed; }

.form-row.inverted {
  --form-message-color: var(--form-inverted-text-color);
  --form-message-disabled-color: var(--form-inverted-disabled-color);
  --form-message-alert-color: var(--form-inverted-alert-color);
  --form-message-warning-color: var(--form-inverted-warning-color);
  --form-message-success-color: var(--form-inverted-success-color); }

html {
  --form-message-font: var(--typo-text-small);
  --form-message-color: var(--form-text-color);
  --form-message-disabled-color: var(--form-disabled-color);
  --form-message-alert-color: var(--form-alert-color);
  --form-message-warning-color: var(--form-warning-color);
  --form-message-success-color: var(--form-success-color); }

/**
 * Extension to handle field sets.
 *
 * @note: This has not been converted to css variables because it has a high potential for deprecation.
 */
fieldset {
  position: relative;
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  padding: var(--sizing-space-large);
  margin: 0;
  border-radius: var(--sizing-space-tiny);
  user-select: none; }
  fieldset.condensed {
    padding-block-start: 0; }
  fieldset legend {
    position: relative;
    font: var(--typo-label-medium);
    padding: 0 var(--sizing-space-small);
    margin-inline-start: calc(-1 * var(--sizing-space-small)); }
  fieldset.gripped {
    padding-inline-start: calc(15px + var(--sizing-space-large)); }
    fieldset.gripped .grip {
      position: absolute;
      inset-inline-start: 2px;
      inset-block: 3px 3px;
      inline-size: 15px;
      border-start-start-radius: 0.25rem;
      border-end-start-radius: 0.25rem;
      cursor: move;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAYAAABLLYUHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAyMTUwNEVFOEM3MDExRTVCNTU3RjJGOTFFOUJFRjIyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAyMTUwNEVGOEM3MDExRTVCNTU3RjJGOTFFOUJFRjIyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDIxNTA0RUM4QzcwMTFFNUI1NTdGMkY5MUU5QkVGMjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDIxNTA0RUQ4QzcwMTFFNUI1NTdGMkY5MUU5QkVGMjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6fze6XAAAAIklEQVR42mI8e/bsfwYgMDIyYmRiQAKM////h3NQZAACDAAJYwcByT8iTAAAAABJRU5ErkJggg=="); }
    fieldset.gripped legend + .grip {
      inset-block-start: calc(calc(0.6 * var(--sizing-title-tiny)) + 3px); }

.sortable-placeholder {
  height: 84px;
  margin: 0;
  margin-block-end: var(--sizing-space-large);
  border: 1px dashed gray;
  box-sizing: border-box;
  border-radius: var(--sizing-space-tiny); }

/**
 * Form styling related to form layout.
 *
 * Field layouts:
 * - default:     Fields are rendered vertically
 * - inline:      Fields are rendered horizontally and may take more than one line
 * - column:      Fields are rendered in columns.
 * - flex:        Fields are spread on 100% of the available space possibly using multiple lines.
 *
 * @deprecated use grid-flex instead
 */
.form-row .form-field.default-layout > .form-container > .form-row, .form-row .form-field.vertical-layout > .form-container > .form-row {
  width: 100%;
  margin: 0 0 var(--sizing-space-tiny) 0; }
  .form-row .form-field.default-layout > .form-container > .form-row:last-child, .form-row .form-field.vertical-layout > .form-container > .form-row:last-child {
    margin: 0; }

.form-row .form-field.inline-layout > .form-container {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--sizing-space-medium)/2); }
  .form-row .form-field.inline-layout > .form-container > .form-row {
    margin: calc(var(--sizing-space-medium)/2); }

.form-row .form-field.flex-layout > .form-container, .form-row .form-field.flex-css-layout > .form-container {
  display: flex;
  margin: calc(-1 * var(--sizing-space-medium)/2); }
  .form-row .form-field.flex-layout > .form-container > .form-row, .form-row .form-field.flex-css-layout > .form-container > .form-row {
    flex: 1;
    margin: calc(var(--sizing-space-medium)/2); }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-1, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-1 {
      flex: 1; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-2, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-2 {
      flex: 2; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-3, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-3 {
      flex: 3; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-4, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-4 {
      flex: 4; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-5, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-5 {
      flex: 5; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-6, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-6 {
      flex: 6; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-7, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-7 {
      flex: 7; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-8, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-8 {
      flex: 8; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-9, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-9 {
      flex: 9; }
    .form-row .form-field.flex-layout > .form-container > .form-row.flex-10, .form-row .form-field.flex-css-layout > .form-container > .form-row.flex-10 {
      flex: 10; }

.form-row .form-field.column-layout > .form-container {
  -webkit-columns: calc(10 * var(--sizing-space-medium));
  -moz-columns: calc(10 * var(--sizing-space-medium));
  columns: calc(10 * var(--sizing-space-medium));
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4; }

/**
 * Includes all loader styling
 */
/**
 * The image ui component.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
img.image {
  display: block; }
  img.image.inline {
    display: inline; }
  img.image.width-expand {
    width: 100%; }
  img.image.bordered {
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
    img.image.bordered.inverted {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

/**
 * Includes all grid styling
 */
/**
 * Includes all flex grid styling
 */
/**
 * core ui flexgrid component.
 *
 * Provides a generic way to layout items on a page by using the flexible box layout module (flexbox)
 *
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date   05/02/2016 
 */
/**
 * Grid flex configuration
 */
/**
 * core ui flexgrid component.
 *
 * Provides a generic way to layout items on a page by using the flexible box layout module (flexbox)
 *
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date   05/02/2016 
 */
.grid-flex {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box; }
  .grid-flex > * {
    box-sizing: border-box; }

/**
 * Core element that handles the grid flex flow.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex.horizontal {
  flex-direction: row;
  flex-wrap: wrap; }
  .grid-flex.horizontal.reverse {
    flex-direction: row-reverse; }
  .grid-flex.horizontal > * {
    flex: 1 1 0;
    min-width: 0; }

.grid-flex.vertical {
  flex-direction: column;
  flex-wrap: nowrap; }
  .grid-flex.vertical.reverse {
    flex-direction: column-reverse; }
  .grid-flex.vertical > * {
    flex: 0 0 auto; }

.grid-flex.no-wrap {
  flex-wrap: nowrap; }

.grid-flex.vertical > * {
  flex: 0 0 auto; }

.grid-flex.horizontal > * {
  flex: 1 1 0;
  min-width: 0; }

.grid-flex.inline {
  display: inline-flex; }

@media (min-width: 1281px) {
  .grid-flex.desktop-horizontal {
    flex-direction: row;
    flex-wrap: wrap; }
    .grid-flex.desktop-horizontal.reverse {
      flex-direction: row-reverse; }
    .grid-flex.desktop-horizontal > * {
      flex: 1 1 0;
      min-width: 0; }
  .grid-flex.desktop-vertical {
    flex-direction: column;
    flex-wrap: nowrap; }
    .grid-flex.desktop-vertical.reverse {
      flex-direction: column-reverse; }
    .grid-flex.desktop-vertical > * {
      flex: 0 0 auto; }
  .grid-flex.desktop-no-wrap {
    flex-wrap: nowrap; }
  .grid-flex.desktop-wrap {
    flex-wrap: wrap; }
  .grid-flex.desktop-inline {
    display: inline-flex; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex.medium-desktop-horizontal {
    flex-direction: row;
    flex-wrap: wrap; }
    .grid-flex.medium-desktop-horizontal.reverse {
      flex-direction: row-reverse; }
    .grid-flex.medium-desktop-horizontal > * {
      flex: 1 1 0;
      min-width: 0; }
  .grid-flex.medium-desktop-vertical {
    flex-direction: column;
    flex-wrap: nowrap; }
    .grid-flex.medium-desktop-vertical.reverse {
      flex-direction: column-reverse; }
    .grid-flex.medium-desktop-vertical > * {
      flex: 0 0 auto; }
  .grid-flex.medium-desktop-no-wrap {
    flex-wrap: nowrap; }
  .grid-flex.medium-desktop-wrap {
    flex-wrap: wrap; }
  .grid-flex.medium-desktop-inline {
    display: inline-flex; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex.tablet-horizontal {
    flex-direction: row;
    flex-wrap: wrap; }
    .grid-flex.tablet-horizontal.reverse {
      flex-direction: row-reverse; }
    .grid-flex.tablet-horizontal > * {
      flex: 1 1 0;
      min-width: 0; }
  .grid-flex.tablet-vertical {
    flex-direction: column;
    flex-wrap: nowrap; }
    .grid-flex.tablet-vertical.reverse {
      flex-direction: column-reverse; }
    .grid-flex.tablet-vertical > * {
      flex: 0 0 auto; }
  .grid-flex.tablet-no-wrap {
    flex-wrap: nowrap; }
  .grid-flex.tablet-wrap {
    flex-wrap: wrap; }
  .grid-flex.tablet-inline {
    display: inline-flex; } }

@media (max-width: 600px) {
  .grid-flex.mobile-horizontal {
    flex-direction: row;
    flex-wrap: wrap; }
    .grid-flex.mobile-horizontal.reverse {
      flex-direction: row-reverse; }
    .grid-flex.mobile-horizontal > * {
      flex: 1 1 0;
      min-width: 0; }
  .grid-flex.mobile-vertical {
    flex-direction: column;
    flex-wrap: nowrap; }
    .grid-flex.mobile-vertical.reverse {
      flex-direction: column-reverse; }
    .grid-flex.mobile-vertical > * {
      flex: 0 0 auto; }
  .grid-flex.mobile-no-wrap {
    flex-wrap: nowrap; }
  .grid-flex.mobile-wrap {
    flex-wrap: wrap; }
  .grid-flex.mobile-inline {
    display: inline-flex; } }

/**
 * Core element that handles the alignment of elements inside a grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex.align-start {
  justify-content: flex-start; }

.grid-flex.align-center {
  justify-content: center; }

.grid-flex.align-end {
  justify-content: flex-end; }

.grid-flex.align-spread {
  justify-content: space-between; }

.grid-flex.align-around {
  justify-content: space-around; }

.grid-flex.align-top {
  align-items: flex-start; }

.grid-flex.align-middle {
  align-items: center; }

.grid-flex.align-bottom {
  align-items: flex-end; }

.grid-flex.align-baseline {
  align-items: baseline; }

.grid-flex.align-stretch {
  align-items: stretch; }

.grid-flex.cross-align-start {
  align-items: flex-start; }

.grid-flex.cross-align-center {
  align-items: center; }

.grid-flex.cross-align-end {
  align-items: flex-end; }

.grid-flex.cross-align-baseline {
  align-items: baseline; }

.grid-flex.cross-align-stretch {
  align-items: stretch; }

.grid-flex > *.align-top {
  align-self: flex-start; }

.grid-flex > *.align-middle {
  align-self: center; }

.grid-flex > *.align-bottom {
  align-self: flex-end; }

.grid-flex > *.align-baseline {
  align-self: baseline; }

.grid-flex > *.align-stretch {
  align-self: stretch; }

.grid-flex > *.cross-align-start {
  align-self: flex-start; }

.grid-flex > *.cross-align-center {
  align-self: center; }

.grid-flex > *.cross-align-end {
  align-self: flex-end; }

.grid-flex > *.cross-align-baseline {
  align-self: baseline; }

.grid-flex > *.cross-align-stretch {
  align-self: stretch; }

.grid-flex > *.text-align-start {
  text-align: start; }

.grid-flex > *.text-align-end {
  text-align: end; }

.grid-flex > *.text-align-center {
  text-align: center; }

.grid-flex > *.text-align-justify {
  text-align: justify; }

.grid-flex > *.text-align-left {
  text-align: start; }

.grid-flex > *.text-align-right {
  text-align: end; }

.grid-flex.vertical > .push-start {
  margin-block-end: auto; }

.grid-flex.vertical > .push-end {
  margin-block-start: auto; }

.grid-flex:not(.vertical) > .push-start {
  margin-block-end: auto; }

.grid-flex:not(.vertical) > .push-end {
  margin-block-start: auto; }

@media (min-width: 1281px) {
  .grid-flex.desktop-align-start {
    justify-content: flex-start; }
  .grid-flex.desktop-align-center {
    justify-content: center; }
  .grid-flex.desktop-align-end {
    justify-content: flex-end; }
  .grid-flex.desktop-align-spread {
    justify-content: space-between; }
  .grid-flex.desktop-align-around {
    justify-content: space-around; }
  .grid-flex.desktop-align-top {
    align-items: flex-start; }
  .grid-flex.desktop-align-middle {
    align-items: center; }
  .grid-flex.desktop-align-bottom {
    align-items: flex-end; }
  .grid-flex.desktop-align-baseline {
    align-items: baseline; }
  .grid-flex.desktop-align-stretch {
    align-items: stretch; }
  .grid-flex.desktop-cross-align-start {
    align-items: flex-start; }
  .grid-flex.desktop-cross-align-center {
    align-items: center; }
  .grid-flex.desktop-cross-align-end {
    align-items: flex-end; }
  .grid-flex.desktop-cross-align-baseline {
    align-items: baseline; }
  .grid-flex.desktop-cross-align-stretch {
    align-items: stretch; }
  .grid-flex > *.desktop-align-top {
    align-self: flex-start; }
  .grid-flex > *.desktop-align-middle {
    align-self: center; }
  .grid-flex > *.desktop-align-bottom {
    align-self: flex-end; }
  .grid-flex > *.desktop-align-baseline {
    align-self: baseline; }
  .grid-flex > *.desktop-align-stretch {
    align-self: stretch; }
  .grid-flex > *.desktop-cross-align-start {
    align-self: flex-start; }
  .grid-flex > *.desktop-cross-align-center {
    align-self: center; }
  .grid-flex > *.desktop-cross-align-end {
    align-self: flex-end; }
  .grid-flex > *.desktop-cross-align-baseline {
    align-self: baseline; }
  .grid-flex > *.desktop-cross-align-stretch {
    align-self: stretch; }
  .grid-flex > *.desktop-text-align-start {
    text-align: start; }
  .grid-flex > *.desktop-text-align-end {
    text-align: end; }
  .grid-flex > *.desktop-text-align-center {
    text-align: center; }
  .grid-flex > *.desktop-text-align-justify {
    text-align: justify; }
  .grid-flex > *.desktop-text-align-left {
    text-align: start; }
  .grid-flex > *.desktop-text-align-right {
    text-align: end; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex.medium-desktop-align-start {
    justify-content: flex-start; }
  .grid-flex.medium-desktop-align-center {
    justify-content: center; }
  .grid-flex.medium-desktop-align-end {
    justify-content: flex-end; }
  .grid-flex.medium-desktop-align-spread {
    justify-content: space-between; }
  .grid-flex.medium-desktop-align-around {
    justify-content: space-around; }
  .grid-flex.medium-desktop-align-top {
    align-items: flex-start; }
  .grid-flex.medium-desktop-align-middle {
    align-items: center; }
  .grid-flex.medium-desktop-align-bottom {
    align-items: flex-end; }
  .grid-flex.medium-desktop-align-baseline {
    align-items: baseline; }
  .grid-flex.medium-desktop-align-stretch {
    align-items: stretch; }
  .grid-flex.medium-desktop-cross-align-start {
    align-items: flex-start; }
  .grid-flex.medium-desktop-cross-align-center {
    align-items: center; }
  .grid-flex.medium-desktop-cross-align-end {
    align-items: flex-end; }
  .grid-flex.medium-desktop-cross-align-baseline {
    align-items: baseline; }
  .grid-flex.medium-desktop-cross-align-stretch {
    align-items: stretch; }
  .grid-flex > *.medium-desktop-align-top {
    align-self: flex-start; }
  .grid-flex > *.medium-desktop-align-middle {
    align-self: center; }
  .grid-flex > *.medium-desktop-align-bottom {
    align-self: flex-end; }
  .grid-flex > *.medium-desktop-align-baseline {
    align-self: baseline; }
  .grid-flex > *.medium-desktop-align-stretch {
    align-self: stretch; }
  .grid-flex > *.medium-desktop-cross-align-start {
    align-self: flex-start; }
  .grid-flex > *.medium-desktop-cross-align-center {
    align-self: center; }
  .grid-flex > *.medium-desktop-cross-align-end {
    align-self: flex-end; }
  .grid-flex > *.medium-desktop-cross-align-baseline {
    align-self: baseline; }
  .grid-flex > *.medium-desktop-cross-align-stretch {
    align-self: stretch; }
  .grid-flex > *.medium-desktop-text-align-start {
    text-align: start; }
  .grid-flex > *.medium-desktop-text-align-end {
    text-align: end; }
  .grid-flex > *.medium-desktop-text-align-center {
    text-align: center; }
  .grid-flex > *.medium-desktop-text-align-justify {
    text-align: justify; }
  .grid-flex > *.medium-desktop-text-align-left {
    text-align: start; }
  .grid-flex > *.medium-desktop-text-align-right {
    text-align: end; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex.tablet-align-start {
    justify-content: flex-start; }
  .grid-flex.tablet-align-center {
    justify-content: center; }
  .grid-flex.tablet-align-end {
    justify-content: flex-end; }
  .grid-flex.tablet-align-spread {
    justify-content: space-between; }
  .grid-flex.tablet-align-around {
    justify-content: space-around; }
  .grid-flex.tablet-align-top {
    align-items: flex-start; }
  .grid-flex.tablet-align-middle {
    align-items: center; }
  .grid-flex.tablet-align-bottom {
    align-items: flex-end; }
  .grid-flex.tablet-align-baseline {
    align-items: baseline; }
  .grid-flex.tablet-align-stretch {
    align-items: stretch; }
  .grid-flex.tablet-cross-align-start {
    align-items: flex-start; }
  .grid-flex.tablet-cross-align-center {
    align-items: center; }
  .grid-flex.tablet-cross-align-end {
    align-items: flex-end; }
  .grid-flex.tablet-cross-align-baseline {
    align-items: baseline; }
  .grid-flex.tablet-cross-align-stretch {
    align-items: stretch; }
  .grid-flex > *.tablet-align-top {
    align-self: flex-start; }
  .grid-flex > *.tablet-align-middle {
    align-self: center; }
  .grid-flex > *.tablet-align-bottom {
    align-self: flex-end; }
  .grid-flex > *.tablet-align-baseline {
    align-self: baseline; }
  .grid-flex > *.tablet-align-stretch {
    align-self: stretch; }
  .grid-flex > *.tablet-cross-align-start {
    align-self: flex-start; }
  .grid-flex > *.tablet-cross-align-center {
    align-self: center; }
  .grid-flex > *.tablet-cross-align-end {
    align-self: flex-end; }
  .grid-flex > *.tablet-cross-align-baseline {
    align-self: baseline; }
  .grid-flex > *.tablet-cross-align-stretch {
    align-self: stretch; }
  .grid-flex > *.tablet-text-align-start {
    text-align: start; }
  .grid-flex > *.tablet-text-align-end {
    text-align: end; }
  .grid-flex > *.tablet-text-align-center {
    text-align: center; }
  .grid-flex > *.tablet-text-align-justify {
    text-align: justify; }
  .grid-flex > *.tablet-text-align-left {
    text-align: start; }
  .grid-flex > *.tablet-text-align-right {
    text-align: end; } }

@media (max-width: 600px) {
  .grid-flex.mobile-align-start {
    justify-content: flex-start; }
  .grid-flex.mobile-align-center {
    justify-content: center; }
  .grid-flex.mobile-align-end {
    justify-content: flex-end; }
  .grid-flex.mobile-align-spread {
    justify-content: space-between; }
  .grid-flex.mobile-align-around {
    justify-content: space-around; }
  .grid-flex.mobile-align-top {
    align-items: flex-start; }
  .grid-flex.mobile-align-middle {
    align-items: center; }
  .grid-flex.mobile-align-bottom {
    align-items: flex-end; }
  .grid-flex.mobile-align-baseline {
    align-items: baseline; }
  .grid-flex.mobile-align-stretch {
    align-items: stretch; }
  .grid-flex.mobile-cross-align-start {
    align-items: flex-start; }
  .grid-flex.mobile-cross-align-center {
    align-items: center; }
  .grid-flex.mobile-cross-align-end {
    align-items: flex-end; }
  .grid-flex.mobile-cross-align-baseline {
    align-items: baseline; }
  .grid-flex.mobile-cross-align-stretch {
    align-items: stretch; }
  .grid-flex > *.mobile-align-top {
    align-self: flex-start; }
  .grid-flex > *.mobile-align-middle {
    align-self: center; }
  .grid-flex > *.mobile-align-bottom {
    align-self: flex-end; }
  .grid-flex > *.mobile-align-baseline {
    align-self: baseline; }
  .grid-flex > *.mobile-align-stretch {
    align-self: stretch; }
  .grid-flex > *.mobile-cross-align-start {
    align-self: flex-start; }
  .grid-flex > *.mobile-cross-align-center {
    align-self: center; }
  .grid-flex > *.mobile-cross-align-end {
    align-self: flex-end; }
  .grid-flex > *.mobile-cross-align-baseline {
    align-self: baseline; }
  .grid-flex > *.mobile-cross-align-stretch {
    align-self: stretch; }
  .grid-flex > *.mobile-text-align-start {
    text-align: start; }
  .grid-flex > *.mobile-text-align-end {
    text-align: end; }
  .grid-flex > *.mobile-text-align-center {
    text-align: center; }
  .grid-flex > *.mobile-text-align-justify {
    text-align: justify; }
  .grid-flex > *.mobile-text-align-left {
    text-align: start; }
  .grid-flex > *.mobile-text-align-right {
    text-align: end; } }

/**
 * Core element that handles the spacing between elements inside the grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex {
  margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
  margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
  .grid-flex > * {
    padding-inline: var(--sizing-space-medium) 0;
    padding-block: var(--sizing-space-medium) 0; }
  .grid-flex.outer-spacing {
    margin-inline: 0 var(--sizing-space-medium);
    margin-block: 0 var(--sizing-space-medium); }
  .grid-flex.spacing-tiny {
    margin-inline: calc(-1 * var(--sizing-space-tiny)) 0;
    margin-block: calc(-1 * var(--sizing-space-tiny)) 0; }
    .grid-flex.spacing-tiny > * {
      padding-inline: var(--sizing-space-tiny) 0;
      padding-block: var(--sizing-space-tiny) 0; }
    .grid-flex.spacing-tiny.outer-spacing {
      margin-inline: 0 var(--sizing-space-tiny);
      margin-block: 0 var(--sizing-space-tiny); }
  .grid-flex.spacing-small {
    margin-inline: calc(-1 * var(--sizing-space-small)) 0;
    margin-block: calc(-1 * var(--sizing-space-small)) 0; }
    .grid-flex.spacing-small > * {
      padding-inline: var(--sizing-space-small) 0;
      padding-block: var(--sizing-space-small) 0; }
    .grid-flex.spacing-small.outer-spacing {
      margin-inline: 0 var(--sizing-space-small);
      margin-block: 0 var(--sizing-space-small); }
  .grid-flex.spacing-medium {
    margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
    margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
    .grid-flex.spacing-medium > * {
      padding-inline: var(--sizing-space-medium) 0;
      padding-block: var(--sizing-space-medium) 0; }
    .grid-flex.spacing-medium.outer-spacing {
      margin-inline: 0 var(--sizing-space-medium);
      margin-block: 0 var(--sizing-space-medium); }
  .grid-flex.spacing-large {
    margin-inline: calc(-1 * var(--sizing-space-large)) 0;
    margin-block: calc(-1 * var(--sizing-space-large)) 0; }
    .grid-flex.spacing-large > * {
      padding-inline: var(--sizing-space-large) 0;
      padding-block: var(--sizing-space-large) 0; }
    .grid-flex.spacing-large.outer-spacing {
      margin-inline: 0 var(--sizing-space-large);
      margin-block: 0 var(--sizing-space-large); }
  .grid-flex.spacing-huge {
    margin-inline: calc(-1 * var(--sizing-space-huge)) 0;
    margin-block: calc(-1 * var(--sizing-space-huge)) 0; }
    .grid-flex.spacing-huge > * {
      padding-inline: var(--sizing-space-huge) 0;
      padding-block: var(--sizing-space-huge) 0; }
    .grid-flex.spacing-huge.outer-spacing {
      margin-inline: 0 var(--sizing-space-huge);
      margin-block: 0 var(--sizing-space-huge); }
  .grid-flex.spacing-one {
    margin-inline: calc(-1 * 1px) 0;
    margin-block: calc(-1 * 1px) 0; }
    .grid-flex.spacing-one > * {
      padding-inline: 1px 0;
      padding-block: 1px 0; }
    .grid-flex.spacing-one.outer-spacing {
      margin-inline: 0 1px;
      margin-block: 0 1px; }
  .grid-flex.spacing-none {
    margin-inline: calc(-1 * 0px) 0;
    margin-block: calc(-1 * 0px) 0; }
    .grid-flex.spacing-none > * {
      padding-inline: 0px 0;
      padding-block: 0px 0; }
    .grid-flex.spacing-none.outer-spacing {
      margin-inline: 0 0px;
      margin-block: 0 0px; }
  .grid-flex.spaceless {
    margin-inline: calc(-1 * 0px) 0;
    margin-block: calc(-1 * 0px) 0; }
    .grid-flex.spaceless > * {
      padding-inline: 0px 0;
      padding-block: 0px 0; }
    .grid-flex.spaceless.outer-spacing {
      margin-inline: 0 0px;
      margin-block: 0 0px; }
  @media (min-width: 1281px) {
    .grid-flex.desktop-spacing-tiny {
      margin-inline: calc(-1 * var(--sizing-space-tiny)) 0;
      margin-block: calc(-1 * var(--sizing-space-tiny)) 0; }
      .grid-flex.desktop-spacing-tiny > * {
        padding-inline: var(--sizing-space-tiny) 0;
        padding-block: var(--sizing-space-tiny) 0; }
      .grid-flex.desktop-spacing-tiny.outer-spacing {
        margin-inline: 0 var(--sizing-space-tiny);
        margin-block: 0 var(--sizing-space-tiny); }
    .grid-flex.desktop-spacing-small {
      margin-inline: calc(-1 * var(--sizing-space-small)) 0;
      margin-block: calc(-1 * var(--sizing-space-small)) 0; }
      .grid-flex.desktop-spacing-small > * {
        padding-inline: var(--sizing-space-small) 0;
        padding-block: var(--sizing-space-small) 0; }
      .grid-flex.desktop-spacing-small.outer-spacing {
        margin-inline: 0 var(--sizing-space-small);
        margin-block: 0 var(--sizing-space-small); }
    .grid-flex.desktop-spacing-medium {
      margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
      margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
      .grid-flex.desktop-spacing-medium > * {
        padding-inline: var(--sizing-space-medium) 0;
        padding-block: var(--sizing-space-medium) 0; }
      .grid-flex.desktop-spacing-medium.outer-spacing {
        margin-inline: 0 var(--sizing-space-medium);
        margin-block: 0 var(--sizing-space-medium); }
    .grid-flex.desktop-spacing-large {
      margin-inline: calc(-1 * var(--sizing-space-large)) 0;
      margin-block: calc(-1 * var(--sizing-space-large)) 0; }
      .grid-flex.desktop-spacing-large > * {
        padding-inline: var(--sizing-space-large) 0;
        padding-block: var(--sizing-space-large) 0; }
      .grid-flex.desktop-spacing-large.outer-spacing {
        margin-inline: 0 var(--sizing-space-large);
        margin-block: 0 var(--sizing-space-large); }
    .grid-flex.desktop-spacing-huge {
      margin-inline: calc(-1 * var(--sizing-space-huge)) 0;
      margin-block: calc(-1 * var(--sizing-space-huge)) 0; }
      .grid-flex.desktop-spacing-huge > * {
        padding-inline: var(--sizing-space-huge) 0;
        padding-block: var(--sizing-space-huge) 0; }
      .grid-flex.desktop-spacing-huge.outer-spacing {
        margin-inline: 0 var(--sizing-space-huge);
        margin-block: 0 var(--sizing-space-huge); }
    .grid-flex.desktop-spacing-one {
      margin-inline: calc(-1 * 1px) 0;
      margin-block: calc(-1 * 1px) 0; }
      .grid-flex.desktop-spacing-one > * {
        padding-inline: 1px 0;
        padding-block: 1px 0; }
      .grid-flex.desktop-spacing-one.outer-spacing {
        margin-inline: 0 1px;
        margin-block: 0 1px; }
    .grid-flex.desktop-spacing-none {
      margin-inline: calc(-1 * 0px) 0;
      margin-block: calc(-1 * 0px) 0; }
      .grid-flex.desktop-spacing-none > * {
        padding-inline: 0px 0;
        padding-block: 0px 0; }
      .grid-flex.desktop-spacing-none.outer-spacing {
        margin-inline: 0 0px;
        margin-block: 0 0px; } }
  @media (min-width: 1281px) and (max-width: 1690px) {
    .grid-flex.medium-desktop-spacing-tiny {
      margin-inline: calc(-1 * var(--sizing-space-tiny)) 0;
      margin-block: calc(-1 * var(--sizing-space-tiny)) 0; }
      .grid-flex.medium-desktop-spacing-tiny > * {
        padding-inline: var(--sizing-space-tiny) 0;
        padding-block: var(--sizing-space-tiny) 0; }
      .grid-flex.medium-desktop-spacing-tiny.outer-spacing {
        margin-inline: 0 var(--sizing-space-tiny);
        margin-block: 0 var(--sizing-space-tiny); }
    .grid-flex.medium-desktop-spacing-small {
      margin-inline: calc(-1 * var(--sizing-space-small)) 0;
      margin-block: calc(-1 * var(--sizing-space-small)) 0; }
      .grid-flex.medium-desktop-spacing-small > * {
        padding-inline: var(--sizing-space-small) 0;
        padding-block: var(--sizing-space-small) 0; }
      .grid-flex.medium-desktop-spacing-small.outer-spacing {
        margin-inline: 0 var(--sizing-space-small);
        margin-block: 0 var(--sizing-space-small); }
    .grid-flex.medium-desktop-spacing-medium {
      margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
      margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
      .grid-flex.medium-desktop-spacing-medium > * {
        padding-inline: var(--sizing-space-medium) 0;
        padding-block: var(--sizing-space-medium) 0; }
      .grid-flex.medium-desktop-spacing-medium.outer-spacing {
        margin-inline: 0 var(--sizing-space-medium);
        margin-block: 0 var(--sizing-space-medium); }
    .grid-flex.medium-desktop-spacing-large {
      margin-inline: calc(-1 * var(--sizing-space-large)) 0;
      margin-block: calc(-1 * var(--sizing-space-large)) 0; }
      .grid-flex.medium-desktop-spacing-large > * {
        padding-inline: var(--sizing-space-large) 0;
        padding-block: var(--sizing-space-large) 0; }
      .grid-flex.medium-desktop-spacing-large.outer-spacing {
        margin-inline: 0 var(--sizing-space-large);
        margin-block: 0 var(--sizing-space-large); }
    .grid-flex.medium-desktop-spacing-huge {
      margin-inline: calc(-1 * var(--sizing-space-huge)) 0;
      margin-block: calc(-1 * var(--sizing-space-huge)) 0; }
      .grid-flex.medium-desktop-spacing-huge > * {
        padding-inline: var(--sizing-space-huge) 0;
        padding-block: var(--sizing-space-huge) 0; }
      .grid-flex.medium-desktop-spacing-huge.outer-spacing {
        margin-inline: 0 var(--sizing-space-huge);
        margin-block: 0 var(--sizing-space-huge); }
    .grid-flex.medium-desktop-spacing-one {
      margin-inline: calc(-1 * 1px) 0;
      margin-block: calc(-1 * 1px) 0; }
      .grid-flex.medium-desktop-spacing-one > * {
        padding-inline: 1px 0;
        padding-block: 1px 0; }
      .grid-flex.medium-desktop-spacing-one.outer-spacing {
        margin-inline: 0 1px;
        margin-block: 0 1px; }
    .grid-flex.medium-desktop-spacing-none {
      margin-inline: calc(-1 * 0px) 0;
      margin-block: calc(-1 * 0px) 0; }
      .grid-flex.medium-desktop-spacing-none > * {
        padding-inline: 0px 0;
        padding-block: 0px 0; }
      .grid-flex.medium-desktop-spacing-none.outer-spacing {
        margin-inline: 0 0px;
        margin-block: 0 0px; } }
  @media (min-width: 601px) and (max-width: 1280px) {
    .grid-flex.tablet-spacing-tiny {
      margin-inline: calc(-1 * var(--sizing-space-tiny)) 0;
      margin-block: calc(-1 * var(--sizing-space-tiny)) 0; }
      .grid-flex.tablet-spacing-tiny > * {
        padding-inline: var(--sizing-space-tiny) 0;
        padding-block: var(--sizing-space-tiny) 0; }
      .grid-flex.tablet-spacing-tiny.outer-spacing {
        margin-inline: 0 var(--sizing-space-tiny);
        margin-block: 0 var(--sizing-space-tiny); }
    .grid-flex.tablet-spacing-small {
      margin-inline: calc(-1 * var(--sizing-space-small)) 0;
      margin-block: calc(-1 * var(--sizing-space-small)) 0; }
      .grid-flex.tablet-spacing-small > * {
        padding-inline: var(--sizing-space-small) 0;
        padding-block: var(--sizing-space-small) 0; }
      .grid-flex.tablet-spacing-small.outer-spacing {
        margin-inline: 0 var(--sizing-space-small);
        margin-block: 0 var(--sizing-space-small); }
    .grid-flex.tablet-spacing-medium {
      margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
      margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
      .grid-flex.tablet-spacing-medium > * {
        padding-inline: var(--sizing-space-medium) 0;
        padding-block: var(--sizing-space-medium) 0; }
      .grid-flex.tablet-spacing-medium.outer-spacing {
        margin-inline: 0 var(--sizing-space-medium);
        margin-block: 0 var(--sizing-space-medium); }
    .grid-flex.tablet-spacing-large {
      margin-inline: calc(-1 * var(--sizing-space-large)) 0;
      margin-block: calc(-1 * var(--sizing-space-large)) 0; }
      .grid-flex.tablet-spacing-large > * {
        padding-inline: var(--sizing-space-large) 0;
        padding-block: var(--sizing-space-large) 0; }
      .grid-flex.tablet-spacing-large.outer-spacing {
        margin-inline: 0 var(--sizing-space-large);
        margin-block: 0 var(--sizing-space-large); }
    .grid-flex.tablet-spacing-huge {
      margin-inline: calc(-1 * var(--sizing-space-huge)) 0;
      margin-block: calc(-1 * var(--sizing-space-huge)) 0; }
      .grid-flex.tablet-spacing-huge > * {
        padding-inline: var(--sizing-space-huge) 0;
        padding-block: var(--sizing-space-huge) 0; }
      .grid-flex.tablet-spacing-huge.outer-spacing {
        margin-inline: 0 var(--sizing-space-huge);
        margin-block: 0 var(--sizing-space-huge); }
    .grid-flex.tablet-spacing-one {
      margin-inline: calc(-1 * 1px) 0;
      margin-block: calc(-1 * 1px) 0; }
      .grid-flex.tablet-spacing-one > * {
        padding-inline: 1px 0;
        padding-block: 1px 0; }
      .grid-flex.tablet-spacing-one.outer-spacing {
        margin-inline: 0 1px;
        margin-block: 0 1px; }
    .grid-flex.tablet-spacing-none {
      margin-inline: calc(-1 * 0px) 0;
      margin-block: calc(-1 * 0px) 0; }
      .grid-flex.tablet-spacing-none > * {
        padding-inline: 0px 0;
        padding-block: 0px 0; }
      .grid-flex.tablet-spacing-none.outer-spacing {
        margin-inline: 0 0px;
        margin-block: 0 0px; } }
  @media (max-width: 600px) {
    .grid-flex.mobile-spacing-tiny {
      margin-inline: calc(-1 * var(--sizing-space-tiny)) 0;
      margin-block: calc(-1 * var(--sizing-space-tiny)) 0; }
      .grid-flex.mobile-spacing-tiny > * {
        padding-inline: var(--sizing-space-tiny) 0;
        padding-block: var(--sizing-space-tiny) 0; }
      .grid-flex.mobile-spacing-tiny.outer-spacing {
        margin-inline: 0 var(--sizing-space-tiny);
        margin-block: 0 var(--sizing-space-tiny); }
    .grid-flex.mobile-spacing-small {
      margin-inline: calc(-1 * var(--sizing-space-small)) 0;
      margin-block: calc(-1 * var(--sizing-space-small)) 0; }
      .grid-flex.mobile-spacing-small > * {
        padding-inline: var(--sizing-space-small) 0;
        padding-block: var(--sizing-space-small) 0; }
      .grid-flex.mobile-spacing-small.outer-spacing {
        margin-inline: 0 var(--sizing-space-small);
        margin-block: 0 var(--sizing-space-small); }
    .grid-flex.mobile-spacing-medium {
      margin-inline: calc(-1 * var(--sizing-space-medium)) 0;
      margin-block: calc(-1 * var(--sizing-space-medium)) 0; }
      .grid-flex.mobile-spacing-medium > * {
        padding-inline: var(--sizing-space-medium) 0;
        padding-block: var(--sizing-space-medium) 0; }
      .grid-flex.mobile-spacing-medium.outer-spacing {
        margin-inline: 0 var(--sizing-space-medium);
        margin-block: 0 var(--sizing-space-medium); }
    .grid-flex.mobile-spacing-large {
      margin-inline: calc(-1 * var(--sizing-space-large)) 0;
      margin-block: calc(-1 * var(--sizing-space-large)) 0; }
      .grid-flex.mobile-spacing-large > * {
        padding-inline: var(--sizing-space-large) 0;
        padding-block: var(--sizing-space-large) 0; }
      .grid-flex.mobile-spacing-large.outer-spacing {
        margin-inline: 0 var(--sizing-space-large);
        margin-block: 0 var(--sizing-space-large); }
    .grid-flex.mobile-spacing-huge {
      margin-inline: calc(-1 * var(--sizing-space-huge)) 0;
      margin-block: calc(-1 * var(--sizing-space-huge)) 0; }
      .grid-flex.mobile-spacing-huge > * {
        padding-inline: var(--sizing-space-huge) 0;
        padding-block: var(--sizing-space-huge) 0; }
      .grid-flex.mobile-spacing-huge.outer-spacing {
        margin-inline: 0 var(--sizing-space-huge);
        margin-block: 0 var(--sizing-space-huge); }
    .grid-flex.mobile-spacing-one {
      margin-inline: calc(-1 * 1px) 0;
      margin-block: calc(-1 * 1px) 0; }
      .grid-flex.mobile-spacing-one > * {
        padding-inline: 1px 0;
        padding-block: 1px 0; }
      .grid-flex.mobile-spacing-one.outer-spacing {
        margin-inline: 0 1px;
        margin-block: 0 1px; }
    .grid-flex.mobile-spacing-none {
      margin-inline: calc(-1 * 0px) 0;
      margin-block: calc(-1 * 0px) 0; }
      .grid-flex.mobile-spacing-none > * {
        padding-inline: 0px 0;
        padding-block: 0px 0; }
      .grid-flex.mobile-spacing-none.outer-spacing {
        margin-inline: 0 0px;
        margin-block: 0 0px; } }

/**
 * Core element that handles the size of the elements within a grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex > *.size-content {
  flex: 0 0 auto;
  min-inline-size: 0; }

.grid-flex > *.size-full {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-1 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-2 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-2-of-2 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-3 {
  flex: 0 0 33.33333%;
  min-inline-size: 33.33333%; }

.grid-flex > *.size-2-of-3 {
  flex: 0 0 66.66667%;
  min-inline-size: 66.66667%; }

.grid-flex > *.size-3-of-3 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-4 {
  flex: 0 0 25%;
  min-inline-size: 25%; }

.grid-flex > *.size-2-of-4 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-3-of-4 {
  flex: 0 0 75%;
  min-inline-size: 75%; }

.grid-flex > *.size-4-of-4 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-5 {
  flex: 0 0 20%;
  min-inline-size: 20%; }

.grid-flex > *.size-2-of-5 {
  flex: 0 0 40%;
  min-inline-size: 40%; }

.grid-flex > *.size-3-of-5 {
  flex: 0 0 60%;
  min-inline-size: 60%; }

.grid-flex > *.size-4-of-5 {
  flex: 0 0 80%;
  min-inline-size: 80%; }

.grid-flex > *.size-5-of-5 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-6 {
  flex: 0 0 16.66667%;
  min-inline-size: 16.66667%; }

.grid-flex > *.size-2-of-6 {
  flex: 0 0 33.33333%;
  min-inline-size: 33.33333%; }

.grid-flex > *.size-3-of-6 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-4-of-6 {
  flex: 0 0 66.66667%;
  min-inline-size: 66.66667%; }

.grid-flex > *.size-5-of-6 {
  flex: 0 0 83.33333%;
  min-inline-size: 83.33333%; }

.grid-flex > *.size-6-of-6 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-7 {
  flex: 0 0 14.28571%;
  min-inline-size: 14.28571%; }

.grid-flex > *.size-2-of-7 {
  flex: 0 0 28.57143%;
  min-inline-size: 28.57143%; }

.grid-flex > *.size-3-of-7 {
  flex: 0 0 42.85714%;
  min-inline-size: 42.85714%; }

.grid-flex > *.size-4-of-7 {
  flex: 0 0 57.14286%;
  min-inline-size: 57.14286%; }

.grid-flex > *.size-5-of-7 {
  flex: 0 0 71.42857%;
  min-inline-size: 71.42857%; }

.grid-flex > *.size-6-of-7 {
  flex: 0 0 85.71429%;
  min-inline-size: 85.71429%; }

.grid-flex > *.size-7-of-7 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-8 {
  flex: 0 0 12.5%;
  min-inline-size: 12.5%; }

.grid-flex > *.size-2-of-8 {
  flex: 0 0 25%;
  min-inline-size: 25%; }

.grid-flex > *.size-3-of-8 {
  flex: 0 0 37.5%;
  min-inline-size: 37.5%; }

.grid-flex > *.size-4-of-8 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-5-of-8 {
  flex: 0 0 62.5%;
  min-inline-size: 62.5%; }

.grid-flex > *.size-6-of-8 {
  flex: 0 0 75%;
  min-inline-size: 75%; }

.grid-flex > *.size-7-of-8 {
  flex: 0 0 87.5%;
  min-inline-size: 87.5%; }

.grid-flex > *.size-8-of-8 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-9 {
  flex: 0 0 11.11111%;
  min-inline-size: 11.11111%; }

.grid-flex > *.size-2-of-9 {
  flex: 0 0 22.22222%;
  min-inline-size: 22.22222%; }

.grid-flex > *.size-3-of-9 {
  flex: 0 0 33.33333%;
  min-inline-size: 33.33333%; }

.grid-flex > *.size-4-of-9 {
  flex: 0 0 44.44444%;
  min-inline-size: 44.44444%; }

.grid-flex > *.size-5-of-9 {
  flex: 0 0 55.55556%;
  min-inline-size: 55.55556%; }

.grid-flex > *.size-6-of-9 {
  flex: 0 0 66.66667%;
  min-inline-size: 66.66667%; }

.grid-flex > *.size-7-of-9 {
  flex: 0 0 77.77778%;
  min-inline-size: 77.77778%; }

.grid-flex > *.size-8-of-9 {
  flex: 0 0 88.88889%;
  min-inline-size: 88.88889%; }

.grid-flex > *.size-9-of-9 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-10 {
  flex: 0 0 10%;
  min-inline-size: 10%; }

.grid-flex > *.size-2-of-10 {
  flex: 0 0 20%;
  min-inline-size: 20%; }

.grid-flex > *.size-3-of-10 {
  flex: 0 0 30%;
  min-inline-size: 30%; }

.grid-flex > *.size-4-of-10 {
  flex: 0 0 40%;
  min-inline-size: 40%; }

.grid-flex > *.size-5-of-10 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-6-of-10 {
  flex: 0 0 60%;
  min-inline-size: 60%; }

.grid-flex > *.size-7-of-10 {
  flex: 0 0 70%;
  min-inline-size: 70%; }

.grid-flex > *.size-8-of-10 {
  flex: 0 0 80%;
  min-inline-size: 80%; }

.grid-flex > *.size-9-of-10 {
  flex: 0 0 90%;
  min-inline-size: 90%; }

.grid-flex > *.size-10-of-10 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-11 {
  flex: 0 0 9.09091%;
  min-inline-size: 9.09091%; }

.grid-flex > *.size-2-of-11 {
  flex: 0 0 18.18182%;
  min-inline-size: 18.18182%; }

.grid-flex > *.size-3-of-11 {
  flex: 0 0 27.27273%;
  min-inline-size: 27.27273%; }

.grid-flex > *.size-4-of-11 {
  flex: 0 0 36.36364%;
  min-inline-size: 36.36364%; }

.grid-flex > *.size-5-of-11 {
  flex: 0 0 45.45455%;
  min-inline-size: 45.45455%; }

.grid-flex > *.size-6-of-11 {
  flex: 0 0 54.54545%;
  min-inline-size: 54.54545%; }

.grid-flex > *.size-7-of-11 {
  flex: 0 0 63.63636%;
  min-inline-size: 63.63636%; }

.grid-flex > *.size-8-of-11 {
  flex: 0 0 72.72727%;
  min-inline-size: 72.72727%; }

.grid-flex > *.size-9-of-11 {
  flex: 0 0 81.81818%;
  min-inline-size: 81.81818%; }

.grid-flex > *.size-10-of-11 {
  flex: 0 0 90.90909%;
  min-inline-size: 90.90909%; }

.grid-flex > *.size-11-of-11 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-1-of-12 {
  flex: 0 0 8.33333%;
  min-inline-size: 8.33333%; }

.grid-flex > *.size-2-of-12 {
  flex: 0 0 16.66667%;
  min-inline-size: 16.66667%; }

.grid-flex > *.size-3-of-12 {
  flex: 0 0 25%;
  min-inline-size: 25%; }

.grid-flex > *.size-4-of-12 {
  flex: 0 0 33.33333%;
  min-inline-size: 33.33333%; }

.grid-flex > *.size-5-of-12 {
  flex: 0 0 41.66667%;
  min-inline-size: 41.66667%; }

.grid-flex > *.size-6-of-12 {
  flex: 0 0 50%;
  min-inline-size: 50%; }

.grid-flex > *.size-7-of-12 {
  flex: 0 0 58.33333%;
  min-inline-size: 58.33333%; }

.grid-flex > *.size-8-of-12 {
  flex: 0 0 66.66667%;
  min-inline-size: 66.66667%; }

.grid-flex > *.size-9-of-12 {
  flex: 0 0 75%;
  min-inline-size: 75%; }

.grid-flex > *.size-10-of-12 {
  flex: 0 0 83.33333%;
  min-inline-size: 83.33333%; }

.grid-flex > *.size-11-of-12 {
  flex: 0 0 91.66667%;
  min-inline-size: 91.66667%; }

.grid-flex > *.size-12-of-12 {
  flex: 0 0 100%;
  min-inline-size: 100%; }

.grid-flex > *.size-fixed-1 {
  flex: 0 0 1rem;
  min-inline-size: 1rem; }

.grid-flex > *.size-fixed-2 {
  flex: 0 0 2rem;
  min-inline-size: 2rem; }

.grid-flex > *.size-fixed-3 {
  flex: 0 0 3rem;
  min-inline-size: 3rem; }

.grid-flex > *.size-fixed-4 {
  flex: 0 0 4rem;
  min-inline-size: 4rem; }

.grid-flex > *.size-fixed-5 {
  flex: 0 0 5rem;
  min-inline-size: 5rem; }

.grid-flex > *.size-fixed-6 {
  flex: 0 0 6rem;
  min-inline-size: 6rem; }

.grid-flex > *.size-fixed-7 {
  flex: 0 0 7rem;
  min-inline-size: 7rem; }

.grid-flex > *.size-fixed-8 {
  flex: 0 0 8rem;
  min-inline-size: 8rem; }

.grid-flex > *.size-fixed-9 {
  flex: 0 0 9rem;
  min-inline-size: 9rem; }

.grid-flex > *.size-fixed-10 {
  flex: 0 0 10rem;
  min-inline-size: 10rem; }

.grid-flex > *.size-fixed-11 {
  flex: 0 0 11rem;
  min-inline-size: 11rem; }

.grid-flex > *.size-fixed-12 {
  flex: 0 0 12rem;
  min-inline-size: 12rem; }

.grid-flex > *.size-fixed-13 {
  flex: 0 0 13rem;
  min-inline-size: 13rem; }

.grid-flex > *.size-fixed-14 {
  flex: 0 0 14rem;
  min-inline-size: 14rem; }

.grid-flex > *.size-fixed-15 {
  flex: 0 0 15rem;
  min-inline-size: 15rem; }

.grid-flex > *.size-fixed-16 {
  flex: 0 0 16rem;
  min-inline-size: 16rem; }

.grid-flex > *.size-fixed-17 {
  flex: 0 0 17rem;
  min-inline-size: 17rem; }

.grid-flex > *.size-fixed-18 {
  flex: 0 0 18rem;
  min-inline-size: 18rem; }

.grid-flex > *.size-fixed-19 {
  flex: 0 0 19rem;
  min-inline-size: 19rem; }

.grid-flex > *.size-fixed-20 {
  flex: 0 0 20rem;
  min-inline-size: 20rem; }

.grid-flex > *.weight-1 {
  flex: 1;
  min-inline-size: 0; }

.grid-flex > *.weight-2 {
  flex: 2;
  min-inline-size: 0; }

.grid-flex > *.weight-3 {
  flex: 3;
  min-inline-size: 0; }

.grid-flex > *.weight-4 {
  flex: 4;
  min-inline-size: 0; }

.grid-flex > *.weight-5 {
  flex: 5;
  min-inline-size: 0; }

.grid-flex > *.weight-6 {
  flex: 6;
  min-inline-size: 0; }

.grid-flex > *.weight-7 {
  flex: 7;
  min-inline-size: 0; }

.grid-flex > *.weight-8 {
  flex: 8;
  min-inline-size: 0; }

.grid-flex > *.weight-9 {
  flex: 9;
  min-inline-size: 0; }

.grid-flex > *.weight-10 {
  flex: 10;
  min-inline-size: 0; }

.grid-flex > *.weight-11 {
  flex: 11;
  min-inline-size: 0; }

.grid-flex > *.weight-12 {
  flex: 12;
  min-inline-size: 0; }

.grid-flex > *.size-expand {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */ }

@media (min-width: 1281px) {
  .grid-flex > *.desktop-size-content {
    flex: 0 0 auto;
    min-inline-size: 0; }
  .grid-flex > *.desktop-size-full {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-1 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-2 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-2-of-2 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-3 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.desktop-size-2-of-3 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.desktop-size-3-of-3 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-4 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.desktop-size-2-of-4 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-3-of-4 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.desktop-size-4-of-4 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-5 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.desktop-size-2-of-5 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.desktop-size-3-of-5 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.desktop-size-4-of-5 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.desktop-size-5-of-5 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-6 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.desktop-size-2-of-6 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.desktop-size-3-of-6 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-4-of-6 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.desktop-size-5-of-6 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.desktop-size-6-of-6 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-7 {
    flex: 0 0 14.28571%;
    min-inline-size: 14.28571%; }
  .grid-flex > *.desktop-size-2-of-7 {
    flex: 0 0 28.57143%;
    min-inline-size: 28.57143%; }
  .grid-flex > *.desktop-size-3-of-7 {
    flex: 0 0 42.85714%;
    min-inline-size: 42.85714%; }
  .grid-flex > *.desktop-size-4-of-7 {
    flex: 0 0 57.14286%;
    min-inline-size: 57.14286%; }
  .grid-flex > *.desktop-size-5-of-7 {
    flex: 0 0 71.42857%;
    min-inline-size: 71.42857%; }
  .grid-flex > *.desktop-size-6-of-7 {
    flex: 0 0 85.71429%;
    min-inline-size: 85.71429%; }
  .grid-flex > *.desktop-size-7-of-7 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-8 {
    flex: 0 0 12.5%;
    min-inline-size: 12.5%; }
  .grid-flex > *.desktop-size-2-of-8 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.desktop-size-3-of-8 {
    flex: 0 0 37.5%;
    min-inline-size: 37.5%; }
  .grid-flex > *.desktop-size-4-of-8 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-5-of-8 {
    flex: 0 0 62.5%;
    min-inline-size: 62.5%; }
  .grid-flex > *.desktop-size-6-of-8 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.desktop-size-7-of-8 {
    flex: 0 0 87.5%;
    min-inline-size: 87.5%; }
  .grid-flex > *.desktop-size-8-of-8 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-9 {
    flex: 0 0 11.11111%;
    min-inline-size: 11.11111%; }
  .grid-flex > *.desktop-size-2-of-9 {
    flex: 0 0 22.22222%;
    min-inline-size: 22.22222%; }
  .grid-flex > *.desktop-size-3-of-9 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.desktop-size-4-of-9 {
    flex: 0 0 44.44444%;
    min-inline-size: 44.44444%; }
  .grid-flex > *.desktop-size-5-of-9 {
    flex: 0 0 55.55556%;
    min-inline-size: 55.55556%; }
  .grid-flex > *.desktop-size-6-of-9 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.desktop-size-7-of-9 {
    flex: 0 0 77.77778%;
    min-inline-size: 77.77778%; }
  .grid-flex > *.desktop-size-8-of-9 {
    flex: 0 0 88.88889%;
    min-inline-size: 88.88889%; }
  .grid-flex > *.desktop-size-9-of-9 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-10 {
    flex: 0 0 10%;
    min-inline-size: 10%; }
  .grid-flex > *.desktop-size-2-of-10 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.desktop-size-3-of-10 {
    flex: 0 0 30%;
    min-inline-size: 30%; }
  .grid-flex > *.desktop-size-4-of-10 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.desktop-size-5-of-10 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-6-of-10 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.desktop-size-7-of-10 {
    flex: 0 0 70%;
    min-inline-size: 70%; }
  .grid-flex > *.desktop-size-8-of-10 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.desktop-size-9-of-10 {
    flex: 0 0 90%;
    min-inline-size: 90%; }
  .grid-flex > *.desktop-size-10-of-10 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-11 {
    flex: 0 0 9.09091%;
    min-inline-size: 9.09091%; }
  .grid-flex > *.desktop-size-2-of-11 {
    flex: 0 0 18.18182%;
    min-inline-size: 18.18182%; }
  .grid-flex > *.desktop-size-3-of-11 {
    flex: 0 0 27.27273%;
    min-inline-size: 27.27273%; }
  .grid-flex > *.desktop-size-4-of-11 {
    flex: 0 0 36.36364%;
    min-inline-size: 36.36364%; }
  .grid-flex > *.desktop-size-5-of-11 {
    flex: 0 0 45.45455%;
    min-inline-size: 45.45455%; }
  .grid-flex > *.desktop-size-6-of-11 {
    flex: 0 0 54.54545%;
    min-inline-size: 54.54545%; }
  .grid-flex > *.desktop-size-7-of-11 {
    flex: 0 0 63.63636%;
    min-inline-size: 63.63636%; }
  .grid-flex > *.desktop-size-8-of-11 {
    flex: 0 0 72.72727%;
    min-inline-size: 72.72727%; }
  .grid-flex > *.desktop-size-9-of-11 {
    flex: 0 0 81.81818%;
    min-inline-size: 81.81818%; }
  .grid-flex > *.desktop-size-10-of-11 {
    flex: 0 0 90.90909%;
    min-inline-size: 90.90909%; }
  .grid-flex > *.desktop-size-11-of-11 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-1-of-12 {
    flex: 0 0 8.33333%;
    min-inline-size: 8.33333%; }
  .grid-flex > *.desktop-size-2-of-12 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.desktop-size-3-of-12 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.desktop-size-4-of-12 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.desktop-size-5-of-12 {
    flex: 0 0 41.66667%;
    min-inline-size: 41.66667%; }
  .grid-flex > *.desktop-size-6-of-12 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.desktop-size-7-of-12 {
    flex: 0 0 58.33333%;
    min-inline-size: 58.33333%; }
  .grid-flex > *.desktop-size-8-of-12 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.desktop-size-9-of-12 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.desktop-size-10-of-12 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.desktop-size-11-of-12 {
    flex: 0 0 91.66667%;
    min-inline-size: 91.66667%; }
  .grid-flex > *.desktop-size-12-of-12 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.desktop-size-fixed-1 {
    flex: 0 0 1rem;
    min-inline-size: 1rem; }
  .grid-flex > *.desktop-size-fixed-2 {
    flex: 0 0 2rem;
    min-inline-size: 2rem; }
  .grid-flex > *.desktop-size-fixed-3 {
    flex: 0 0 3rem;
    min-inline-size: 3rem; }
  .grid-flex > *.desktop-size-fixed-4 {
    flex: 0 0 4rem;
    min-inline-size: 4rem; }
  .grid-flex > *.desktop-size-fixed-5 {
    flex: 0 0 5rem;
    min-inline-size: 5rem; }
  .grid-flex > *.desktop-size-fixed-6 {
    flex: 0 0 6rem;
    min-inline-size: 6rem; }
  .grid-flex > *.desktop-size-fixed-7 {
    flex: 0 0 7rem;
    min-inline-size: 7rem; }
  .grid-flex > *.desktop-size-fixed-8 {
    flex: 0 0 8rem;
    min-inline-size: 8rem; }
  .grid-flex > *.desktop-size-fixed-9 {
    flex: 0 0 9rem;
    min-inline-size: 9rem; }
  .grid-flex > *.desktop-size-fixed-10 {
    flex: 0 0 10rem;
    min-inline-size: 10rem; }
  .grid-flex > *.desktop-size-fixed-11 {
    flex: 0 0 11rem;
    min-inline-size: 11rem; }
  .grid-flex > *.desktop-size-fixed-12 {
    flex: 0 0 12rem;
    min-inline-size: 12rem; }
  .grid-flex > *.desktop-size-fixed-13 {
    flex: 0 0 13rem;
    min-inline-size: 13rem; }
  .grid-flex > *.desktop-size-fixed-14 {
    flex: 0 0 14rem;
    min-inline-size: 14rem; }
  .grid-flex > *.desktop-size-fixed-15 {
    flex: 0 0 15rem;
    min-inline-size: 15rem; }
  .grid-flex > *.desktop-size-fixed-16 {
    flex: 0 0 16rem;
    min-inline-size: 16rem; }
  .grid-flex > *.desktop-size-fixed-17 {
    flex: 0 0 17rem;
    min-inline-size: 17rem; }
  .grid-flex > *.desktop-size-fixed-18 {
    flex: 0 0 18rem;
    min-inline-size: 18rem; }
  .grid-flex > *.desktop-size-fixed-19 {
    flex: 0 0 19rem;
    min-inline-size: 19rem; }
  .grid-flex > *.desktop-size-fixed-20 {
    flex: 0 0 20rem;
    min-inline-size: 20rem; }
  .grid-flex > *.desktop-weight-1 {
    flex: 1;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-2 {
    flex: 2;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-3 {
    flex: 3;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-4 {
    flex: 4;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-5 {
    flex: 5;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-6 {
    flex: 6;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-7 {
    flex: 7;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-8 {
    flex: 8;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-9 {
    flex: 9;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-10 {
    flex: 10;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-11 {
    flex: 11;
    min-inline-size: 0; }
  .grid-flex > *.desktop-weight-12 {
    flex: 12;
    min-inline-size: 0; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex > *.medium-desktop-size-content {
    flex: 0 0 auto;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-size-full {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-1 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-2 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-2-of-2 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-3 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.medium-desktop-size-2-of-3 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.medium-desktop-size-3-of-3 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-4 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.medium-desktop-size-2-of-4 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-3-of-4 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.medium-desktop-size-4-of-4 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-5 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.medium-desktop-size-2-of-5 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.medium-desktop-size-3-of-5 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.medium-desktop-size-4-of-5 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.medium-desktop-size-5-of-5 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-6 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.medium-desktop-size-2-of-6 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.medium-desktop-size-3-of-6 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-4-of-6 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.medium-desktop-size-5-of-6 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.medium-desktop-size-6-of-6 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-7 {
    flex: 0 0 14.28571%;
    min-inline-size: 14.28571%; }
  .grid-flex > *.medium-desktop-size-2-of-7 {
    flex: 0 0 28.57143%;
    min-inline-size: 28.57143%; }
  .grid-flex > *.medium-desktop-size-3-of-7 {
    flex: 0 0 42.85714%;
    min-inline-size: 42.85714%; }
  .grid-flex > *.medium-desktop-size-4-of-7 {
    flex: 0 0 57.14286%;
    min-inline-size: 57.14286%; }
  .grid-flex > *.medium-desktop-size-5-of-7 {
    flex: 0 0 71.42857%;
    min-inline-size: 71.42857%; }
  .grid-flex > *.medium-desktop-size-6-of-7 {
    flex: 0 0 85.71429%;
    min-inline-size: 85.71429%; }
  .grid-flex > *.medium-desktop-size-7-of-7 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-8 {
    flex: 0 0 12.5%;
    min-inline-size: 12.5%; }
  .grid-flex > *.medium-desktop-size-2-of-8 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.medium-desktop-size-3-of-8 {
    flex: 0 0 37.5%;
    min-inline-size: 37.5%; }
  .grid-flex > *.medium-desktop-size-4-of-8 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-5-of-8 {
    flex: 0 0 62.5%;
    min-inline-size: 62.5%; }
  .grid-flex > *.medium-desktop-size-6-of-8 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.medium-desktop-size-7-of-8 {
    flex: 0 0 87.5%;
    min-inline-size: 87.5%; }
  .grid-flex > *.medium-desktop-size-8-of-8 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-9 {
    flex: 0 0 11.11111%;
    min-inline-size: 11.11111%; }
  .grid-flex > *.medium-desktop-size-2-of-9 {
    flex: 0 0 22.22222%;
    min-inline-size: 22.22222%; }
  .grid-flex > *.medium-desktop-size-3-of-9 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.medium-desktop-size-4-of-9 {
    flex: 0 0 44.44444%;
    min-inline-size: 44.44444%; }
  .grid-flex > *.medium-desktop-size-5-of-9 {
    flex: 0 0 55.55556%;
    min-inline-size: 55.55556%; }
  .grid-flex > *.medium-desktop-size-6-of-9 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.medium-desktop-size-7-of-9 {
    flex: 0 0 77.77778%;
    min-inline-size: 77.77778%; }
  .grid-flex > *.medium-desktop-size-8-of-9 {
    flex: 0 0 88.88889%;
    min-inline-size: 88.88889%; }
  .grid-flex > *.medium-desktop-size-9-of-9 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-10 {
    flex: 0 0 10%;
    min-inline-size: 10%; }
  .grid-flex > *.medium-desktop-size-2-of-10 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.medium-desktop-size-3-of-10 {
    flex: 0 0 30%;
    min-inline-size: 30%; }
  .grid-flex > *.medium-desktop-size-4-of-10 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.medium-desktop-size-5-of-10 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-6-of-10 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.medium-desktop-size-7-of-10 {
    flex: 0 0 70%;
    min-inline-size: 70%; }
  .grid-flex > *.medium-desktop-size-8-of-10 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.medium-desktop-size-9-of-10 {
    flex: 0 0 90%;
    min-inline-size: 90%; }
  .grid-flex > *.medium-desktop-size-10-of-10 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-11 {
    flex: 0 0 9.09091%;
    min-inline-size: 9.09091%; }
  .grid-flex > *.medium-desktop-size-2-of-11 {
    flex: 0 0 18.18182%;
    min-inline-size: 18.18182%; }
  .grid-flex > *.medium-desktop-size-3-of-11 {
    flex: 0 0 27.27273%;
    min-inline-size: 27.27273%; }
  .grid-flex > *.medium-desktop-size-4-of-11 {
    flex: 0 0 36.36364%;
    min-inline-size: 36.36364%; }
  .grid-flex > *.medium-desktop-size-5-of-11 {
    flex: 0 0 45.45455%;
    min-inline-size: 45.45455%; }
  .grid-flex > *.medium-desktop-size-6-of-11 {
    flex: 0 0 54.54545%;
    min-inline-size: 54.54545%; }
  .grid-flex > *.medium-desktop-size-7-of-11 {
    flex: 0 0 63.63636%;
    min-inline-size: 63.63636%; }
  .grid-flex > *.medium-desktop-size-8-of-11 {
    flex: 0 0 72.72727%;
    min-inline-size: 72.72727%; }
  .grid-flex > *.medium-desktop-size-9-of-11 {
    flex: 0 0 81.81818%;
    min-inline-size: 81.81818%; }
  .grid-flex > *.medium-desktop-size-10-of-11 {
    flex: 0 0 90.90909%;
    min-inline-size: 90.90909%; }
  .grid-flex > *.medium-desktop-size-11-of-11 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-1-of-12 {
    flex: 0 0 8.33333%;
    min-inline-size: 8.33333%; }
  .grid-flex > *.medium-desktop-size-2-of-12 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.medium-desktop-size-3-of-12 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.medium-desktop-size-4-of-12 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.medium-desktop-size-5-of-12 {
    flex: 0 0 41.66667%;
    min-inline-size: 41.66667%; }
  .grid-flex > *.medium-desktop-size-6-of-12 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.medium-desktop-size-7-of-12 {
    flex: 0 0 58.33333%;
    min-inline-size: 58.33333%; }
  .grid-flex > *.medium-desktop-size-8-of-12 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.medium-desktop-size-9-of-12 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.medium-desktop-size-10-of-12 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.medium-desktop-size-11-of-12 {
    flex: 0 0 91.66667%;
    min-inline-size: 91.66667%; }
  .grid-flex > *.medium-desktop-size-12-of-12 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.medium-desktop-size-fixed-1 {
    flex: 0 0 1rem;
    min-inline-size: 1rem; }
  .grid-flex > *.medium-desktop-size-fixed-2 {
    flex: 0 0 2rem;
    min-inline-size: 2rem; }
  .grid-flex > *.medium-desktop-size-fixed-3 {
    flex: 0 0 3rem;
    min-inline-size: 3rem; }
  .grid-flex > *.medium-desktop-size-fixed-4 {
    flex: 0 0 4rem;
    min-inline-size: 4rem; }
  .grid-flex > *.medium-desktop-size-fixed-5 {
    flex: 0 0 5rem;
    min-inline-size: 5rem; }
  .grid-flex > *.medium-desktop-size-fixed-6 {
    flex: 0 0 6rem;
    min-inline-size: 6rem; }
  .grid-flex > *.medium-desktop-size-fixed-7 {
    flex: 0 0 7rem;
    min-inline-size: 7rem; }
  .grid-flex > *.medium-desktop-size-fixed-8 {
    flex: 0 0 8rem;
    min-inline-size: 8rem; }
  .grid-flex > *.medium-desktop-size-fixed-9 {
    flex: 0 0 9rem;
    min-inline-size: 9rem; }
  .grid-flex > *.medium-desktop-size-fixed-10 {
    flex: 0 0 10rem;
    min-inline-size: 10rem; }
  .grid-flex > *.medium-desktop-size-fixed-11 {
    flex: 0 0 11rem;
    min-inline-size: 11rem; }
  .grid-flex > *.medium-desktop-size-fixed-12 {
    flex: 0 0 12rem;
    min-inline-size: 12rem; }
  .grid-flex > *.medium-desktop-size-fixed-13 {
    flex: 0 0 13rem;
    min-inline-size: 13rem; }
  .grid-flex > *.medium-desktop-size-fixed-14 {
    flex: 0 0 14rem;
    min-inline-size: 14rem; }
  .grid-flex > *.medium-desktop-size-fixed-15 {
    flex: 0 0 15rem;
    min-inline-size: 15rem; }
  .grid-flex > *.medium-desktop-size-fixed-16 {
    flex: 0 0 16rem;
    min-inline-size: 16rem; }
  .grid-flex > *.medium-desktop-size-fixed-17 {
    flex: 0 0 17rem;
    min-inline-size: 17rem; }
  .grid-flex > *.medium-desktop-size-fixed-18 {
    flex: 0 0 18rem;
    min-inline-size: 18rem; }
  .grid-flex > *.medium-desktop-size-fixed-19 {
    flex: 0 0 19rem;
    min-inline-size: 19rem; }
  .grid-flex > *.medium-desktop-size-fixed-20 {
    flex: 0 0 20rem;
    min-inline-size: 20rem; }
  .grid-flex > *.medium-desktop-weight-1 {
    flex: 1;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-2 {
    flex: 2;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-3 {
    flex: 3;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-4 {
    flex: 4;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-5 {
    flex: 5;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-6 {
    flex: 6;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-7 {
    flex: 7;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-8 {
    flex: 8;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-9 {
    flex: 9;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-10 {
    flex: 10;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-11 {
    flex: 11;
    min-inline-size: 0; }
  .grid-flex > *.medium-desktop-weight-12 {
    flex: 12;
    min-inline-size: 0; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex > *.tablet-size-content {
    flex: 0 0 auto;
    min-inline-size: 0; }
  .grid-flex > *.tablet-size-full {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-1 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-2 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-2-of-2 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-3 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.tablet-size-2-of-3 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.tablet-size-3-of-3 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-4 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.tablet-size-2-of-4 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-3-of-4 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.tablet-size-4-of-4 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-5 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.tablet-size-2-of-5 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.tablet-size-3-of-5 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.tablet-size-4-of-5 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.tablet-size-5-of-5 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-6 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.tablet-size-2-of-6 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.tablet-size-3-of-6 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-4-of-6 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.tablet-size-5-of-6 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.tablet-size-6-of-6 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-7 {
    flex: 0 0 14.28571%;
    min-inline-size: 14.28571%; }
  .grid-flex > *.tablet-size-2-of-7 {
    flex: 0 0 28.57143%;
    min-inline-size: 28.57143%; }
  .grid-flex > *.tablet-size-3-of-7 {
    flex: 0 0 42.85714%;
    min-inline-size: 42.85714%; }
  .grid-flex > *.tablet-size-4-of-7 {
    flex: 0 0 57.14286%;
    min-inline-size: 57.14286%; }
  .grid-flex > *.tablet-size-5-of-7 {
    flex: 0 0 71.42857%;
    min-inline-size: 71.42857%; }
  .grid-flex > *.tablet-size-6-of-7 {
    flex: 0 0 85.71429%;
    min-inline-size: 85.71429%; }
  .grid-flex > *.tablet-size-7-of-7 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-8 {
    flex: 0 0 12.5%;
    min-inline-size: 12.5%; }
  .grid-flex > *.tablet-size-2-of-8 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.tablet-size-3-of-8 {
    flex: 0 0 37.5%;
    min-inline-size: 37.5%; }
  .grid-flex > *.tablet-size-4-of-8 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-5-of-8 {
    flex: 0 0 62.5%;
    min-inline-size: 62.5%; }
  .grid-flex > *.tablet-size-6-of-8 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.tablet-size-7-of-8 {
    flex: 0 0 87.5%;
    min-inline-size: 87.5%; }
  .grid-flex > *.tablet-size-8-of-8 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-9 {
    flex: 0 0 11.11111%;
    min-inline-size: 11.11111%; }
  .grid-flex > *.tablet-size-2-of-9 {
    flex: 0 0 22.22222%;
    min-inline-size: 22.22222%; }
  .grid-flex > *.tablet-size-3-of-9 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.tablet-size-4-of-9 {
    flex: 0 0 44.44444%;
    min-inline-size: 44.44444%; }
  .grid-flex > *.tablet-size-5-of-9 {
    flex: 0 0 55.55556%;
    min-inline-size: 55.55556%; }
  .grid-flex > *.tablet-size-6-of-9 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.tablet-size-7-of-9 {
    flex: 0 0 77.77778%;
    min-inline-size: 77.77778%; }
  .grid-flex > *.tablet-size-8-of-9 {
    flex: 0 0 88.88889%;
    min-inline-size: 88.88889%; }
  .grid-flex > *.tablet-size-9-of-9 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-10 {
    flex: 0 0 10%;
    min-inline-size: 10%; }
  .grid-flex > *.tablet-size-2-of-10 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.tablet-size-3-of-10 {
    flex: 0 0 30%;
    min-inline-size: 30%; }
  .grid-flex > *.tablet-size-4-of-10 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.tablet-size-5-of-10 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-6-of-10 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.tablet-size-7-of-10 {
    flex: 0 0 70%;
    min-inline-size: 70%; }
  .grid-flex > *.tablet-size-8-of-10 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.tablet-size-9-of-10 {
    flex: 0 0 90%;
    min-inline-size: 90%; }
  .grid-flex > *.tablet-size-10-of-10 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-11 {
    flex: 0 0 9.09091%;
    min-inline-size: 9.09091%; }
  .grid-flex > *.tablet-size-2-of-11 {
    flex: 0 0 18.18182%;
    min-inline-size: 18.18182%; }
  .grid-flex > *.tablet-size-3-of-11 {
    flex: 0 0 27.27273%;
    min-inline-size: 27.27273%; }
  .grid-flex > *.tablet-size-4-of-11 {
    flex: 0 0 36.36364%;
    min-inline-size: 36.36364%; }
  .grid-flex > *.tablet-size-5-of-11 {
    flex: 0 0 45.45455%;
    min-inline-size: 45.45455%; }
  .grid-flex > *.tablet-size-6-of-11 {
    flex: 0 0 54.54545%;
    min-inline-size: 54.54545%; }
  .grid-flex > *.tablet-size-7-of-11 {
    flex: 0 0 63.63636%;
    min-inline-size: 63.63636%; }
  .grid-flex > *.tablet-size-8-of-11 {
    flex: 0 0 72.72727%;
    min-inline-size: 72.72727%; }
  .grid-flex > *.tablet-size-9-of-11 {
    flex: 0 0 81.81818%;
    min-inline-size: 81.81818%; }
  .grid-flex > *.tablet-size-10-of-11 {
    flex: 0 0 90.90909%;
    min-inline-size: 90.90909%; }
  .grid-flex > *.tablet-size-11-of-11 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-1-of-12 {
    flex: 0 0 8.33333%;
    min-inline-size: 8.33333%; }
  .grid-flex > *.tablet-size-2-of-12 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.tablet-size-3-of-12 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.tablet-size-4-of-12 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.tablet-size-5-of-12 {
    flex: 0 0 41.66667%;
    min-inline-size: 41.66667%; }
  .grid-flex > *.tablet-size-6-of-12 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.tablet-size-7-of-12 {
    flex: 0 0 58.33333%;
    min-inline-size: 58.33333%; }
  .grid-flex > *.tablet-size-8-of-12 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.tablet-size-9-of-12 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.tablet-size-10-of-12 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.tablet-size-11-of-12 {
    flex: 0 0 91.66667%;
    min-inline-size: 91.66667%; }
  .grid-flex > *.tablet-size-12-of-12 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.tablet-size-fixed-1 {
    flex: 0 0 1rem;
    min-inline-size: 1rem; }
  .grid-flex > *.tablet-size-fixed-2 {
    flex: 0 0 2rem;
    min-inline-size: 2rem; }
  .grid-flex > *.tablet-size-fixed-3 {
    flex: 0 0 3rem;
    min-inline-size: 3rem; }
  .grid-flex > *.tablet-size-fixed-4 {
    flex: 0 0 4rem;
    min-inline-size: 4rem; }
  .grid-flex > *.tablet-size-fixed-5 {
    flex: 0 0 5rem;
    min-inline-size: 5rem; }
  .grid-flex > *.tablet-size-fixed-6 {
    flex: 0 0 6rem;
    min-inline-size: 6rem; }
  .grid-flex > *.tablet-size-fixed-7 {
    flex: 0 0 7rem;
    min-inline-size: 7rem; }
  .grid-flex > *.tablet-size-fixed-8 {
    flex: 0 0 8rem;
    min-inline-size: 8rem; }
  .grid-flex > *.tablet-size-fixed-9 {
    flex: 0 0 9rem;
    min-inline-size: 9rem; }
  .grid-flex > *.tablet-size-fixed-10 {
    flex: 0 0 10rem;
    min-inline-size: 10rem; }
  .grid-flex > *.tablet-size-fixed-11 {
    flex: 0 0 11rem;
    min-inline-size: 11rem; }
  .grid-flex > *.tablet-size-fixed-12 {
    flex: 0 0 12rem;
    min-inline-size: 12rem; }
  .grid-flex > *.tablet-size-fixed-13 {
    flex: 0 0 13rem;
    min-inline-size: 13rem; }
  .grid-flex > *.tablet-size-fixed-14 {
    flex: 0 0 14rem;
    min-inline-size: 14rem; }
  .grid-flex > *.tablet-size-fixed-15 {
    flex: 0 0 15rem;
    min-inline-size: 15rem; }
  .grid-flex > *.tablet-size-fixed-16 {
    flex: 0 0 16rem;
    min-inline-size: 16rem; }
  .grid-flex > *.tablet-size-fixed-17 {
    flex: 0 0 17rem;
    min-inline-size: 17rem; }
  .grid-flex > *.tablet-size-fixed-18 {
    flex: 0 0 18rem;
    min-inline-size: 18rem; }
  .grid-flex > *.tablet-size-fixed-19 {
    flex: 0 0 19rem;
    min-inline-size: 19rem; }
  .grid-flex > *.tablet-size-fixed-20 {
    flex: 0 0 20rem;
    min-inline-size: 20rem; }
  .grid-flex > *.tablet-weight-1 {
    flex: 1;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-2 {
    flex: 2;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-3 {
    flex: 3;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-4 {
    flex: 4;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-5 {
    flex: 5;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-6 {
    flex: 6;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-7 {
    flex: 7;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-8 {
    flex: 8;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-9 {
    flex: 9;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-10 {
    flex: 10;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-11 {
    flex: 11;
    min-inline-size: 0; }
  .grid-flex > *.tablet-weight-12 {
    flex: 12;
    min-inline-size: 0; } }

@media (max-width: 600px) {
  .grid-flex > *.mobile-size-content {
    flex: 0 0 auto;
    min-inline-size: 0; }
  .grid-flex > *.mobile-size-full {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-1 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-2 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-2-of-2 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-3 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.mobile-size-2-of-3 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.mobile-size-3-of-3 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-4 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.mobile-size-2-of-4 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-3-of-4 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.mobile-size-4-of-4 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-5 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.mobile-size-2-of-5 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.mobile-size-3-of-5 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.mobile-size-4-of-5 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.mobile-size-5-of-5 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-6 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.mobile-size-2-of-6 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.mobile-size-3-of-6 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-4-of-6 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.mobile-size-5-of-6 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.mobile-size-6-of-6 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-7 {
    flex: 0 0 14.28571%;
    min-inline-size: 14.28571%; }
  .grid-flex > *.mobile-size-2-of-7 {
    flex: 0 0 28.57143%;
    min-inline-size: 28.57143%; }
  .grid-flex > *.mobile-size-3-of-7 {
    flex: 0 0 42.85714%;
    min-inline-size: 42.85714%; }
  .grid-flex > *.mobile-size-4-of-7 {
    flex: 0 0 57.14286%;
    min-inline-size: 57.14286%; }
  .grid-flex > *.mobile-size-5-of-7 {
    flex: 0 0 71.42857%;
    min-inline-size: 71.42857%; }
  .grid-flex > *.mobile-size-6-of-7 {
    flex: 0 0 85.71429%;
    min-inline-size: 85.71429%; }
  .grid-flex > *.mobile-size-7-of-7 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-8 {
    flex: 0 0 12.5%;
    min-inline-size: 12.5%; }
  .grid-flex > *.mobile-size-2-of-8 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.mobile-size-3-of-8 {
    flex: 0 0 37.5%;
    min-inline-size: 37.5%; }
  .grid-flex > *.mobile-size-4-of-8 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-5-of-8 {
    flex: 0 0 62.5%;
    min-inline-size: 62.5%; }
  .grid-flex > *.mobile-size-6-of-8 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.mobile-size-7-of-8 {
    flex: 0 0 87.5%;
    min-inline-size: 87.5%; }
  .grid-flex > *.mobile-size-8-of-8 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-9 {
    flex: 0 0 11.11111%;
    min-inline-size: 11.11111%; }
  .grid-flex > *.mobile-size-2-of-9 {
    flex: 0 0 22.22222%;
    min-inline-size: 22.22222%; }
  .grid-flex > *.mobile-size-3-of-9 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.mobile-size-4-of-9 {
    flex: 0 0 44.44444%;
    min-inline-size: 44.44444%; }
  .grid-flex > *.mobile-size-5-of-9 {
    flex: 0 0 55.55556%;
    min-inline-size: 55.55556%; }
  .grid-flex > *.mobile-size-6-of-9 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.mobile-size-7-of-9 {
    flex: 0 0 77.77778%;
    min-inline-size: 77.77778%; }
  .grid-flex > *.mobile-size-8-of-9 {
    flex: 0 0 88.88889%;
    min-inline-size: 88.88889%; }
  .grid-flex > *.mobile-size-9-of-9 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-10 {
    flex: 0 0 10%;
    min-inline-size: 10%; }
  .grid-flex > *.mobile-size-2-of-10 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .grid-flex > *.mobile-size-3-of-10 {
    flex: 0 0 30%;
    min-inline-size: 30%; }
  .grid-flex > *.mobile-size-4-of-10 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .grid-flex > *.mobile-size-5-of-10 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-6-of-10 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .grid-flex > *.mobile-size-7-of-10 {
    flex: 0 0 70%;
    min-inline-size: 70%; }
  .grid-flex > *.mobile-size-8-of-10 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .grid-flex > *.mobile-size-9-of-10 {
    flex: 0 0 90%;
    min-inline-size: 90%; }
  .grid-flex > *.mobile-size-10-of-10 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-11 {
    flex: 0 0 9.09091%;
    min-inline-size: 9.09091%; }
  .grid-flex > *.mobile-size-2-of-11 {
    flex: 0 0 18.18182%;
    min-inline-size: 18.18182%; }
  .grid-flex > *.mobile-size-3-of-11 {
    flex: 0 0 27.27273%;
    min-inline-size: 27.27273%; }
  .grid-flex > *.mobile-size-4-of-11 {
    flex: 0 0 36.36364%;
    min-inline-size: 36.36364%; }
  .grid-flex > *.mobile-size-5-of-11 {
    flex: 0 0 45.45455%;
    min-inline-size: 45.45455%; }
  .grid-flex > *.mobile-size-6-of-11 {
    flex: 0 0 54.54545%;
    min-inline-size: 54.54545%; }
  .grid-flex > *.mobile-size-7-of-11 {
    flex: 0 0 63.63636%;
    min-inline-size: 63.63636%; }
  .grid-flex > *.mobile-size-8-of-11 {
    flex: 0 0 72.72727%;
    min-inline-size: 72.72727%; }
  .grid-flex > *.mobile-size-9-of-11 {
    flex: 0 0 81.81818%;
    min-inline-size: 81.81818%; }
  .grid-flex > *.mobile-size-10-of-11 {
    flex: 0 0 90.90909%;
    min-inline-size: 90.90909%; }
  .grid-flex > *.mobile-size-11-of-11 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-1-of-12 {
    flex: 0 0 8.33333%;
    min-inline-size: 8.33333%; }
  .grid-flex > *.mobile-size-2-of-12 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .grid-flex > *.mobile-size-3-of-12 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .grid-flex > *.mobile-size-4-of-12 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .grid-flex > *.mobile-size-5-of-12 {
    flex: 0 0 41.66667%;
    min-inline-size: 41.66667%; }
  .grid-flex > *.mobile-size-6-of-12 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .grid-flex > *.mobile-size-7-of-12 {
    flex: 0 0 58.33333%;
    min-inline-size: 58.33333%; }
  .grid-flex > *.mobile-size-8-of-12 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .grid-flex > *.mobile-size-9-of-12 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .grid-flex > *.mobile-size-10-of-12 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .grid-flex > *.mobile-size-11-of-12 {
    flex: 0 0 91.66667%;
    min-inline-size: 91.66667%; }
  .grid-flex > *.mobile-size-12-of-12 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .grid-flex > *.mobile-size-fixed-1 {
    flex: 0 0 1rem;
    min-inline-size: 1rem; }
  .grid-flex > *.mobile-size-fixed-2 {
    flex: 0 0 2rem;
    min-inline-size: 2rem; }
  .grid-flex > *.mobile-size-fixed-3 {
    flex: 0 0 3rem;
    min-inline-size: 3rem; }
  .grid-flex > *.mobile-size-fixed-4 {
    flex: 0 0 4rem;
    min-inline-size: 4rem; }
  .grid-flex > *.mobile-size-fixed-5 {
    flex: 0 0 5rem;
    min-inline-size: 5rem; }
  .grid-flex > *.mobile-size-fixed-6 {
    flex: 0 0 6rem;
    min-inline-size: 6rem; }
  .grid-flex > *.mobile-size-fixed-7 {
    flex: 0 0 7rem;
    min-inline-size: 7rem; }
  .grid-flex > *.mobile-size-fixed-8 {
    flex: 0 0 8rem;
    min-inline-size: 8rem; }
  .grid-flex > *.mobile-size-fixed-9 {
    flex: 0 0 9rem;
    min-inline-size: 9rem; }
  .grid-flex > *.mobile-size-fixed-10 {
    flex: 0 0 10rem;
    min-inline-size: 10rem; }
  .grid-flex > *.mobile-size-fixed-11 {
    flex: 0 0 11rem;
    min-inline-size: 11rem; }
  .grid-flex > *.mobile-size-fixed-12 {
    flex: 0 0 12rem;
    min-inline-size: 12rem; }
  .grid-flex > *.mobile-size-fixed-13 {
    flex: 0 0 13rem;
    min-inline-size: 13rem; }
  .grid-flex > *.mobile-size-fixed-14 {
    flex: 0 0 14rem;
    min-inline-size: 14rem; }
  .grid-flex > *.mobile-size-fixed-15 {
    flex: 0 0 15rem;
    min-inline-size: 15rem; }
  .grid-flex > *.mobile-size-fixed-16 {
    flex: 0 0 16rem;
    min-inline-size: 16rem; }
  .grid-flex > *.mobile-size-fixed-17 {
    flex: 0 0 17rem;
    min-inline-size: 17rem; }
  .grid-flex > *.mobile-size-fixed-18 {
    flex: 0 0 18rem;
    min-inline-size: 18rem; }
  .grid-flex > *.mobile-size-fixed-19 {
    flex: 0 0 19rem;
    min-inline-size: 19rem; }
  .grid-flex > *.mobile-size-fixed-20 {
    flex: 0 0 20rem;
    min-inline-size: 20rem; }
  .grid-flex > *.mobile-weight-1 {
    flex: 1;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-2 {
    flex: 2;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-3 {
    flex: 3;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-4 {
    flex: 4;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-5 {
    flex: 5;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-6 {
    flex: 6;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-7 {
    flex: 7;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-8 {
    flex: 8;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-9 {
    flex: 9;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-10 {
    flex: 10;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-11 {
    flex: 11;
    min-inline-size: 0; }
  .grid-flex > *.mobile-weight-12 {
    flex: 12;
    min-inline-size: 0; } }

/**
 * Core element that handles the ordering of the elements within a grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex > *.order-1 {
  order: 1; }

.grid-flex > *.order-2 {
  order: 2; }

.grid-flex > *.order-3 {
  order: 3; }

.grid-flex > *.order-4 {
  order: 4; }

.grid-flex > *.order-5 {
  order: 5; }

.grid-flex > *.order-6 {
  order: 6; }

.grid-flex > *.order-7 {
  order: 7; }

.grid-flex > *.order-8 {
  order: 8; }

.grid-flex > *.order-9 {
  order: 9; }

.grid-flex > *.order-10 {
  order: 10; }

.grid-flex > *.order-11 {
  order: 11; }

.grid-flex > *.order-12 {
  order: 12; }

@media (min-width: 1281px) {
  .grid-flex > *.desktop-order-1 {
    order: 1; }
  .grid-flex > *.desktop-order-2 {
    order: 2; }
  .grid-flex > *.desktop-order-3 {
    order: 3; }
  .grid-flex > *.desktop-order-4 {
    order: 4; }
  .grid-flex > *.desktop-order-5 {
    order: 5; }
  .grid-flex > *.desktop-order-6 {
    order: 6; }
  .grid-flex > *.desktop-order-7 {
    order: 7; }
  .grid-flex > *.desktop-order-8 {
    order: 8; }
  .grid-flex > *.desktop-order-9 {
    order: 9; }
  .grid-flex > *.desktop-order-10 {
    order: 10; }
  .grid-flex > *.desktop-order-11 {
    order: 11; }
  .grid-flex > *.desktop-order-12 {
    order: 12; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex > *.medium-desktop-order-1 {
    order: 1; }
  .grid-flex > *.medium-desktop-order-2 {
    order: 2; }
  .grid-flex > *.medium-desktop-order-3 {
    order: 3; }
  .grid-flex > *.medium-desktop-order-4 {
    order: 4; }
  .grid-flex > *.medium-desktop-order-5 {
    order: 5; }
  .grid-flex > *.medium-desktop-order-6 {
    order: 6; }
  .grid-flex > *.medium-desktop-order-7 {
    order: 7; }
  .grid-flex > *.medium-desktop-order-8 {
    order: 8; }
  .grid-flex > *.medium-desktop-order-9 {
    order: 9; }
  .grid-flex > *.medium-desktop-order-10 {
    order: 10; }
  .grid-flex > *.medium-desktop-order-11 {
    order: 11; }
  .grid-flex > *.medium-desktop-order-12 {
    order: 12; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex > *.tablet-order-1 {
    order: 1; }
  .grid-flex > *.tablet-order-2 {
    order: 2; }
  .grid-flex > *.tablet-order-3 {
    order: 3; }
  .grid-flex > *.tablet-order-4 {
    order: 4; }
  .grid-flex > *.tablet-order-5 {
    order: 5; }
  .grid-flex > *.tablet-order-6 {
    order: 6; }
  .grid-flex > *.tablet-order-7 {
    order: 7; }
  .grid-flex > *.tablet-order-8 {
    order: 8; }
  .grid-flex > *.tablet-order-9 {
    order: 9; }
  .grid-flex > *.tablet-order-10 {
    order: 10; }
  .grid-flex > *.tablet-order-11 {
    order: 11; }
  .grid-flex > *.tablet-order-12 {
    order: 12; } }

@media (max-width: 600px) {
  .grid-flex > *.mobile-order-1 {
    order: 1; }
  .grid-flex > *.mobile-order-2 {
    order: 2; }
  .grid-flex > *.mobile-order-3 {
    order: 3; }
  .grid-flex > *.mobile-order-4 {
    order: 4; }
  .grid-flex > *.mobile-order-5 {
    order: 5; }
  .grid-flex > *.mobile-order-6 {
    order: 6; }
  .grid-flex > *.mobile-order-7 {
    order: 7; }
  .grid-flex > *.mobile-order-8 {
    order: 8; }
  .grid-flex > *.mobile-order-9 {
    order: 9; }
  .grid-flex > *.mobile-order-10 {
    order: 10; }
  .grid-flex > *.mobile-order-11 {
    order: 11; }
  .grid-flex > *.mobile-order-12 {
    order: 12; } }

/**
 * Core element that handles the visibility of elements within a grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex > .show {
  display: block; }

.grid-flex > .hide {
  display: none; }

@media (min-width: 1281px) {
  .grid-flex > .desktop-show {
    display: block; }
  .grid-flex > .desktop-hide {
    display: none; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex > .medium-desktop-show {
    display: block; }
  .grid-flex > .medium-desktop-hide {
    display: none; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex > .tablet-show {
    display: block; }
  .grid-flex > .tablet-hide {
    display: none; } }

@media (max-width: 600px) {
  .grid-flex > .mobile-show {
    display: block; }
  .grid-flex > .mobile-hide {
    display: none; } }

/**
 * Extension that provides a generic way to add dividers in a layout.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 05/07/2016
 */
.grid-flex > * > .divider {
  background: var(--grid-flex-divider-color); }
  .grid-flex > * > .divider.inverted {
    --grid-flex-divider-color: var(--grid-flex-divider-inverted-color); }
  .grid-flex > * > .divider.highlight {
    --grid-flex-divider-color: var(--grid-flex-divider-highlight-color); }
  .grid-flex > * > .divider.inverted.highlight {
    --grid-flex-divider-color: var(--grid-flex-divider-inverted-highlight-color); }
  .grid-flex > * > .divider.transparent {
    --grid-flex-divider-color: transparent; }

.grid-flex > * > .divider,
.grid-flex.horizontal > * > .divider {
  width: var(--grid-flex-divider-size);
  height: 100%; }

.grid-flex.vertical > * > .divider {
  width: 100%;
  height: var(--grid-flex-divider-size); }

html {
  --grid-flex-divider-size: 1px;
  --grid-flex-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --grid-flex-divider-highlight-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --grid-flex-divider-inverted-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5));
  --grid-flex-divider-inverted-highlight-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

/**
 * Extension that allows to expand a vertical grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex.expand {
  block-size: calc(100% + var(--sizing-space-medium)) !important; }
  .grid-flex.expand.spacing-tiny {
    block-size: calc(100% + var(--sizing-space-tiny)) !important; }
  .grid-flex.expand.spacing-small {
    block-size: calc(100% + var(--sizing-space-small)) !important; }
  .grid-flex.expand.spacing-medium {
    block-size: calc(100% + var(--sizing-space-medium)) !important; }
  .grid-flex.expand.spacing-large {
    block-size: calc(100% + var(--sizing-space-large)) !important; }
  .grid-flex.expand.spacing-huge {
    block-size: calc(100% + var(--sizing-space-huge)) !important; }
  .grid-flex.expand.spacing-one {
    block-size: calc(100% + 1px) !important; }
  .grid-flex.expand.spacing-none {
    block-size: calc(100% + 0px) !important; }
  .grid-flex.expand.spaceless {
    block-size: calc(100% + 0px) !important; }
  .grid-flex.expand > *.scrollable {
    overflow-y: auto; }

.grid-flex > * .expand {
  height: 100%;
  box-sizing: border-box; }

@media (min-width: 1281px) {
  .grid-flex.desktop-vertical.expand {
    block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-tiny {
      block-size: calc(100% + var(--sizing-space-tiny)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-small {
      block-size: calc(100% + var(--sizing-space-small)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-medium {
      block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-large {
      block-size: calc(100% + var(--sizing-space-large)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-huge {
      block-size: calc(100% + var(--sizing-space-huge)) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-one {
      block-size: calc(100% + 1px) !important; }
    .grid-flex.desktop-vertical.expand.desktop-spacing-none {
      block-size: calc(100% + 0px) !important; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .grid-flex.medium-desktop-vertical.expand {
    block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-tiny {
      block-size: calc(100% + var(--sizing-space-tiny)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-small {
      block-size: calc(100% + var(--sizing-space-small)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-medium {
      block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-large {
      block-size: calc(100% + var(--sizing-space-large)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-huge {
      block-size: calc(100% + var(--sizing-space-huge)) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-one {
      block-size: calc(100% + 1px) !important; }
    .grid-flex.medium-desktop-vertical.expand.medium-desktop-spacing-none {
      block-size: calc(100% + 0px) !important; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .grid-flex.tablet-vertical.expand {
    block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-tiny {
      block-size: calc(100% + var(--sizing-space-tiny)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-small {
      block-size: calc(100% + var(--sizing-space-small)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-medium {
      block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-large {
      block-size: calc(100% + var(--sizing-space-large)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-huge {
      block-size: calc(100% + var(--sizing-space-huge)) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-one {
      block-size: calc(100% + 1px) !important; }
    .grid-flex.tablet-vertical.expand.tablet-spacing-none {
      block-size: calc(100% + 0px) !important; } }

@media (max-width: 600px) {
  .grid-flex.mobile-vertical.expand {
    block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-tiny {
      block-size: calc(100% + var(--sizing-space-tiny)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-small {
      block-size: calc(100% + var(--sizing-space-small)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-medium {
      block-size: calc(100% + var(--sizing-space-medium)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-large {
      block-size: calc(100% + var(--sizing-space-large)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-huge {
      block-size: calc(100% + var(--sizing-space-huge)) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-one {
      block-size: calc(100% + 1px) !important; }
    .grid-flex.mobile-vertical.expand.mobile-spacing-none {
      block-size: calc(100% + 0px) !important; } }

/**
 * Extension that allows to expand a vertical grid flex.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 * @date 22/02/2021
 */
.grid-flex > .no-overflow {
  overflow: hidden; }

/**
 * Includes all icon styling.
 */
/**
 * Basic card style
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
[dir="rtl"] .fa-angle-left, [dir="rtl"]
.fa-angle-right, [dir="rtl"]
.fa-arrow-left, [dir="rtl"]
.fa-arrow-right, [dir="rtl"]
.fa-chevron-left, [dir="rtl"]
.fa-chevron-right {
  transform: scale(-1, 1); }

/**
 * Includes all layout styling
 */
.grid-layout {
  align-self: center;
  width: 100%;
  max-width: 70rem;
  display: grid;
  grid-gap: var(--sizing-space-huge);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

.layout-dashboard-6 {
  grid-template-areas: "item1 item1 item1 item2 item2 item2" "item3 item3 item3 item2 item2 item2" "item4 item4 item5 item5 item6 item6";
  grid-template-rows: auto 1fr; }
  .layout-dashboard-6 > * > .expand {
    height: 100%;
    box-sizing: border-box; }
  .layout-dashboard-6 > .item1 {
    grid-area: item1; }
  .layout-dashboard-6 > .item2 {
    grid-area: item2; }
  .layout-dashboard-6 > .item3 {
    grid-area: item3; }
  .layout-dashboard-6 > .item4 {
    grid-area: item4; }
  .layout-dashboard-6 > .item5 {
    grid-area: item5; }
  .layout-dashboard-6 > .item6 {
    grid-area: item6; }

.layout-dashboard-7 {
  grid-template-areas: "item1 item1 item1 item2 item2 item2" "item3 item3 item3 item4 item4 item4" "item5 item5 item6 item6 item7 item7"; }
  .layout-dashboard-7 > * > .expand {
    height: 100%;
    box-sizing: border-box; }
  .layout-dashboard-7 > .item1 {
    grid-area: item1; }
  .layout-dashboard-7 > .item2 {
    grid-area: item2; }
  .layout-dashboard-7 > .item3 {
    grid-area: item3; }
  .layout-dashboard-7 > .item4 {
    grid-area: item4; }
  .layout-dashboard-7 > .item5 {
    grid-area: item5; }
  .layout-dashboard-7 > .item6 {
    grid-area: item6; }
  .layout-dashboard-7 > .item7 {
    grid-area: item7; }

@media (max-width: 600px) {
  .layout-dashboard-6 {
    width: 100%;
    grid-template-areas: "item1" "item2" "item3" "item4" "item5" "item6"; }
  .layout-dashboard-7 {
    width: 100%;
    grid-template-areas: "item1" "item2" "item3" "item4" "item5" "item6" "item7"; }
  .grid-layout {
    grid-template-columns: 1fr;
    margin-bottom: 20px; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .layout-dashboard-6 {
    width: 100%;
    grid-template-areas: "item1" "item2" "item3" "item4" "item5" "item6"; }
  .layout-dashboard-7 {
    width: 100%;
    grid-template-areas: "item1" "item2" "item3" "item4" "item5" "item6" "item7"; }
  .grid-layout {
    grid-template-columns: 1fr;
    margin-bottom: 20px; } }

/**
 * core chat layout component.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.chat-layout {
  display: flex;
  flex-direction: column;
  /* A chat section represents one segment of the chat interface. Its purpose is to provide a layout mechanism to
     handle various element sizes and responsive. */ }
  .chat-layout .chat-section {
    /* The discussion section is the main chat area that must fill the available space */
    /* The notification section is used to alert the user when he is offline or when there are new messages */
    /* The form section contains the input form */ }
    .chat-layout .chat-section.discussion {
      flex: 1;
      overflow-y: hidden;
      overflow-y: overlay;
      overflow-x: hidden;
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
      /* child items are aligned vertically and must be pushed to the end of the area */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      /* Contains chat messages */
      /* Displays a chat status (loading or empty) */ }
      .chat-layout .chat-section.discussion > .chat-messages {
        width: 100%;
        max-width: 70rem;
        box-sizing: border-box;
        padding: var(--sizing-space-medium);
        padding-block-end: 0;
        min-height: 0; }
        .chat-layout .chat-section.discussion > .chat-messages > .chat-history-loading {
          text-align: center; }
      .chat-layout .chat-section.discussion > .chat-state {
        height: 100%;
        width: 100%;
        max-width: 70rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .chat-layout .chat-section.discussion > .chat-state .text {
          text-align: center; }
          .chat-layout .chat-section.discussion > .chat-state .text.loading {
            color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
          .chat-layout .chat-section.discussion > .chat-state .text.no-messages {
            color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
        .chat-layout .chat-section.discussion > .chat-state .loader + .text {
          margin-top: var(--sizing-space-medium); }
    .chat-layout .chat-section.notification {
      display: flex;
      flex-direction: column;
      align-items: center; }
      .chat-layout .chat-section.notification.notice {
        border-radius: 0;
        margin-block-bottom: 0;
        border-inline-start-width: 0;
        border-inline-end-width: 0;
        padding: var(--sizing-space-small); }
      .chat-layout .chat-section.notification > .chat-notification {
        width: 100%;
        max-width: 70rem;
        text-align: center; }
    .chat-layout .chat-section.form {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .chat-layout .chat-section.form > .chat-form {
        width: 100%;
        max-width: 70rem;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        padding: 0 var(--sizing-space-medium); }
        .chat-layout .chat-section.form > .chat-form > * {
          padding: var(--sizing-space-medium) 0; }
        .chat-layout .chat-section.form > .chat-form > .chat-form-input {
          flex: 1;
          margin-inline-end: var(--sizing-space-medium); }
  .chat-layout .chat-section.discussion + .chat-section.form {
    border-top: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

.navigation-layout {
  z-index: 1; }
  .navigation-layout .main-nav {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    background-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    width: 100%;
    /*temporary fix to handle organizer */
    /*temporary fix to handle organizer */ }
    .navigation-layout .main-nav.fixed {
      position: fixed; }
    .navigation-layout .main-nav.vertical {
      width: 19rem;
      height: 100%; }
  .navigation-layout .mini-nav {
    display: none;
    position: fixed;
    z-index: 2;
    width: 100%; }
  .navigation-layout .side-nav {
    position: fixed;
    z-index: 2;
    width: 19rem;
    inset-block: 0 0;
    inset-inline-start: -19rem;
    transition: inset-inline 0.1s;
    overflow: auto;
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .navigation-layout .side-nav.open {
      inset-inline-start: 0; }
  .navigation-layout .overlay {
    display: none;
    position: fixed;
    overflow: hidden;
    inset-inline: 0 0;
    inset-block: 0 0;
    z-index: 1;
    background-color: #000;
    opacity: 0.5; }

@media (min-width: 601px) and (max-width: 1280px) {
  .navigation-layout .main-nav {
    display: none; }
  .navigation-layout .mini-nav {
    display: block; }
  .navigation-layout .side-nav {
    display: block; }
  .navigation-layout .side-nav.open + .overlay {
    display: block; } }

@media (max-width: 600px) {
  .navigation-layout .main-nav {
    display: none; }
  .navigation-layout .mini-nav {
    display: block; }
  .navigation-layout .side-nav {
    display: block; }
  .navigation-layout .side-nav.open + .overlay {
    display: block; } }

/**
 * Basic responsive classes to handle adaptive.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
@media (max-width: 600px) {
  .mobile-hide {
    display: none !important; }
  .mobile-show {
    display: block !important; }
  .mobile-visible {
    visibility: visible; }
  .mobile-invisible {
    visibility: hidden; }
  .scrollable {
    overflow: auto; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .tablet-show {
    display: block !important; }
  .tablet-hide {
    display: none !important; }
  .tablet-visible {
    visibility: visible; }
  .tablet-invisible {
    visibility: hidden; }
  .scrollable {
    overflow: auto; } }

@media (min-width: 1281px) {
  .desktop-show {
    display: block !important; }
  .desktop-hide {
    display: none !important; }
  .desktop-visible {
    visibility: visible; }
  .desktop-invisible {
    visibility: hidden; }
  .scrollable {
    overflow: auto; } }

@media (min-width: 1281px) and (max-width: 1690px) {
  .medium-desktop-show {
    display: block !important; }
  .medium-desktop-hide {
    display: none !important; }
  .medium-desktop-visible {
    visibility: visible; }
  .medium-desktop-invisible {
    visibility: hidden; }
  .scrollable {
    overflow: auto; } }

/**
 * core ui layout component
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.ui-layout {
  display: flex;
  margin: calc(-1 * var(--sizing-space-small)/2);
  padding: 0;
  list-style: none;
  justify-content: flex-start;
  align-content: flex-start; }
  .ui-layout > * {
    margin: calc(var(--sizing-space-small)/2); }
  .ui-layout.outer-spacing {
    margin: calc(var(--sizing-space-small)/2); }
  .ui-layout, .ui-layout.horizontal {
    flex-flow: row wrap; }
  .ui-layout.vertical {
    flex-flow: column wrap; }
  .ui-layout.h-start {
    justify-content: flex-start; }
  .ui-layout.h-center {
    justify-content: center; }
  .ui-layout.h-end {
    justify-content: flex-end; }
  .ui-layout.h-spread {
    justify-content: space-between; }
  .ui-layout.left {
    justify-content: flex-start; }
  .ui-layout.center {
    justify-content: center; }
  .ui-layout.right {
    justify-content: flex-end; }
  .ui-layout.spread {
    justify-content: space-between; }
  .ui-layout.spaceless {
    margin: calc(-1 * 0/2); }
    .ui-layout.spaceless > * {
      margin: calc(0/2); }
    .ui-layout.spaceless.outer-spacing {
      margin: calc(0/2); }
  .ui-layout.spacing-tiny {
    margin: calc(-1 * var(--sizing-space-tiny)/2); }
    .ui-layout.spacing-tiny > * {
      margin: calc(var(--sizing-space-tiny)/2); }
    .ui-layout.spacing-tiny.outer-spacing {
      margin: calc(var(--sizing-space-tiny)/2); }
  .ui-layout.spacing-small {
    margin: calc(-1 * var(--sizing-space-small)/2); }
    .ui-layout.spacing-small > * {
      margin: calc(var(--sizing-space-small)/2); }
    .ui-layout.spacing-small.outer-spacing {
      margin: calc(var(--sizing-space-small)/2); }
  .ui-layout.spacing-medium {
    margin: calc(-1 * var(--sizing-space-medium)/2); }
    .ui-layout.spacing-medium > * {
      margin: calc(var(--sizing-space-medium)/2); }
    .ui-layout.spacing-medium.outer-spacing {
      margin: calc(var(--sizing-space-medium)/2); }
  .ui-layout.spacing-large {
    margin: calc(-1 * var(--sizing-space-large)/2); }
    .ui-layout.spacing-large > * {
      margin: calc(var(--sizing-space-large)/2); }
    .ui-layout.spacing-large.outer-spacing {
      margin: calc(var(--sizing-space-large)/2); }
  .ui-layout.spacing-huge {
    margin: calc(-1 * var(--sizing-space-huge)/2); }
    .ui-layout.spacing-huge > * {
      margin: calc(var(--sizing-space-huge)/2); }
    .ui-layout.spacing-huge.outer-spacing {
      margin: calc(var(--sizing-space-huge)/2); }
  .ui-layout.v-start {
    align-items: flex-start; }
  .ui-layout.v-center {
    align-items: center; }
  .ui-layout.v-end {
    align-items: flex-end; }
  .ui-layout.v-baseline {
    align-items: baseline; }
  .ui-layout.v-top {
    align-items: flex-start; }
  .ui-layout.v-bottom {
    align-items: flex-end; }
  .ui-layout > .flex-1 {
    flex-basis: auto; }
  .ui-layout > .flex-2 {
    flex-basis: auto; }
  .ui-layout > .flex-3 {
    flex-basis: auto; }
  .ui-layout > .flex-4 {
    flex-basis: auto; }
  .ui-layout > .flex-5 {
    flex-basis: auto; }
  .ui-layout > .flex-6 {
    flex-basis: auto; }
  .ui-layout > .flex-7 {
    flex-basis: auto; }
  .ui-layout > .flex-8 {
    flex-basis: auto; }
  .ui-layout > .flex-9 {
    flex-basis: auto; }
  .ui-layout > .flex-10 {
    flex-basis: auto; }
  .ui-layout > .flex-11 {
    flex-basis: auto; }
  .ui-layout > .flex-12 {
    flex-basis: auto; }
  .ui-layout > .flex-tiny {
    flex-basis: 3rem; }
  .ui-layout > .flex-small {
    flex-basis: 5rem; }
  .ui-layout > .flex-medium {
    flex-basis: 10rem; }
  .ui-layout > .flex-large {
    flex-basis: 15rem; }
  .ui-layout > .flex-huge {
    flex-basis: 20rem; }
  .ui-layout > .flex-gargantuan {
    flex-basis: 30rem; }
  .ui-layout > .flex-colossal {
    flex-basis: 50rem; }
  .ui-layout > .position-1 {
    order: 1; }
  .ui-layout > .position-2 {
    order: 2; }
  .ui-layout > .position-3 {
    order: 3; }
  .ui-layout > .position-4 {
    order: 4; }
  .ui-layout > .position-5 {
    order: 5; }
  .ui-layout > .position-6 {
    order: 6; }
  .ui-layout > .position-7 {
    order: 7; }
  .ui-layout > .position-8 {
    order: 8; }
  .ui-layout > .position-9 {
    order: 9; }
  .ui-layout > .position-10 {
    order: 10; }
  .ui-layout > .position-11 {
    order: 11; }
  .ui-layout > .position-12 {
    order: 12; }
  .ui-layout > .position-13 {
    order: 13; }
  .ui-layout > .position-14 {
    order: 14; }
  .ui-layout > .position-15 {
    order: 15; }
  .ui-layout > .position-16 {
    order: 16; }
  .ui-layout > .position-17 {
    order: 17; }
  .ui-layout > .position-18 {
    order: 18; }
  .ui-layout > .position-19 {
    order: 19; }
  .ui-layout > .position-20 {
    order: 20; }

/**
 * Includes all components
 */
/**
 * link design
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
a {
  position: relative;
  outline: 0;
  --link-color-h: var(--color-primary-h);
  --link-color-s: var(--color-primary-s);
  --link-color-l: var(--color-primary-l);
  --link-color-state-l: var(--link-color-l);
  color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-state-l));
  text-decoration: none; }
  a:not(.button):not(.subdued):not(.light):hover, a:not(.button):not(.subdued):not(.light):focus {
    --link-color-state-l: calc(var(--link-color-l) + 10%) !important; }
  a:not(.button):not(.subdued):not(.light):active {
    --link-color-state-l: calc(var(--link-color-l) + -10%) !important; }
  a:not(.button):not(.subdued):not(.light).inverted:hover, a:not(.button):not(.subdued):not(.light).inverted:focus {
    --link-color-state-l: calc(var(--link-color-l) + 10%) !important; }
  a:not(.button):not(.subdued):not(.light).inverted:active {
    --link-color-state-l: calc(var(--link-color-l) + -10%) !important; }
  a:not(.button).subdued, a:not(.button).subdued:visited {
    color: inherit; }
  a:not(.button).subdued:hover, a:not(.button).subdued:focus {
    color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-state-l));
    --link-color-state-l: calc(var(--link-color-l)) !important; }
  a:not(.button).subdued:active {
    color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-state-l));
    --link-color-state-l: calc(var(--link-color-l) + -10%) !important; }
  a:not(.button).subdued.inverted:hover, a:not(.button).subdued.inverted:focus {
    color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-state-l));
    --link-color-state-l: calc(var(--link-color-l)) !important; }
  a:not(.button).subdued.inverted:active {
    color: hsl(var(--link-color-h), var(--link-color-s), var(--link-color-state-l));
    --link-color-state-l-l: calc(var(--link-color-l) + -10%) !important; }
  a:not(.button).light, a:not(.button).light:visited {
    color: inherit; }
  a:not(.button).light:hover, a:not(.button).light:focus {
    color: inherit; }
  a:not(.button).light:active {
    color: inherit; }
  a.disabled, a[disabled] {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)) !important; }
  a.standard {
    --link-color-h: var(--color-standard-h);
    --link-color-s: var(--color-standard-s); }
  a.primary {
    --link-color-h: var(--color-primary-h);
    --link-color-s: var(--color-primary-s); }
  a.secondary {
    --link-color-h: var(--color-secondary-h);
    --link-color-s: var(--color-secondary-s); }
  a.action {
    --link-color-h: var(--color-action-h);
    --link-color-s: var(--color-action-s); }
  a.alert {
    --link-color-h: var(--color-alert-h);
    --link-color-s: var(--color-alert-s); }
  a.warning {
    --link-color-h: var(--color-warning-h);
    --link-color-s: var(--color-warning-s); }
  a.success {
    --link-color-h: var(--color-success-h);
    --link-color-s: var(--color-success-s); }
  a.admin {
    --link-color-h: var(--color-admin-h);
    --link-color-s: var(--color-admin-s); }
  a:hover {
    text-decoration: none; }
  a.inherit {
    color: inherit;
    text-decoration: underline; }
    a.inherit:hover {
      text-decoration: underline; }
  a.disabled, a[disabled] {
    cursor: not-allowed;
    pointer-events: none; }
    a.disabled:hover, a[disabled]:hover {
      text-decoration: inherit; }
  a.highlighted {
    text-decoration: underline; }

/**
 * Includes all list components
 */
/**
 * Includes all basic list components
 */
/**
 * list/data component provides a way to display rows of N columns of data.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.list, ul.list, ol.list {
  margin: 0;
  padding: 0;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  list-style: none; }
  .list > li > a, .list > li > i, .list > li > .content, .list > .item > a, .list > .item > i, .list > .item > .content, ul.list > li > a, ul.list > li > i, ul.list > li > .content, ul.list > .item > a, ul.list > .item > i, ul.list > .item > .content, ol.list > li > a, ol.list > li > i, ol.list > li > .content, ol.list > .item > a, ol.list > .item > i, ol.list > .item > .content {
    padding: var(--sizing-space-tiny) var(--sizing-space-small); }
  .list > li > i + .content,
  .list > li .content + i, .list > .item > i + .content,
  .list > .item .content + i, ul.list > li > i + .content,
  ul.list > li .content + i, ul.list > .item > i + .content,
  ul.list > .item .content + i, ol.list > li > i + .content,
  ol.list > li .content + i, ol.list > .item > i + .content,
  ol.list > .item .content + i {
    padding-inline-start: 0; }
  .list > li, .list > .item, ul.list > li, ul.list > .item, ol.list > li, ol.list > .item {
    display: flex;
    align-items: center;
    font: var(--typo-text-small);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    .list > li > a, .list > .item > a, ul.list > li > a, ul.list > .item > a, ol.list > li > a, ol.list > .item > a {
      display: block;
      flex: 1; }
    .list > li > i, .list > li > a > i, .list > .item > i, .list > .item > a > i, ul.list > li > i, ul.list > li > a > i, ul.list > .item > i, ul.list > .item > a > i, ol.list > li > i, ol.list > li > a > i, ol.list > .item > i, ol.list > .item > a > i {
      font-size: var(--sizing-text-huge); }
    .list > li > .content .header, .list > li > a > .content .header, .list > .item > .content .header, .list > .item > a > .content .header, ul.list > li > .content .header, ul.list > li > a > .content .header, ul.list > .item > .content .header, ul.list > .item > a > .content .header, ol.list > li > .content .header, ol.list > li > a > .content .header, ol.list > .item > .content .header, ol.list > .item > a > .content .header {
      font-weight: bold;
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }
    .list > li > .content .description, .list > li > a > .content .description, .list > .item > .content .description, .list > .item > a > .content .description, ul.list > li > .content .description, ul.list > li > a > .content .description, ul.list > .item > .content .description, ul.list > .item > a > .content .description, ol.list > li > .content .description, ol.list > li > a > .content .description, ol.list > .item > .content .description, ol.list > .item > a > .content .description {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
  .list.divided > li, ul.list.divided > li, ol.list.divided > li {
    border-top: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
    .list.divided > li:first-child, ul.list.divided > li:first-child, ol.list.divided > li:first-child {
      border-top: 0; }
  .list.hover > li > a, .list.hover > li > a:visited, ul.list.hover > li > a, ul.list.hover > li > a:visited, ol.list.hover > li > a, ol.list.hover > li > a:visited {
    color: inherit; }
  .list.hover > li > a:hover, .list.hover > li > a:focus, ul.list.hover > li > a:hover, ul.list.hover > li > a:focus, ol.list.hover > li > a:hover, ol.list.hover > li > a:focus {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5)); }
  .list.hover > li:hover, ul.list.hover > li:hover, ol.list.hover > li:hover {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .list.spaceless > li > a, .list.spaceless > li > i, .list.spaceless > li > .content, .list.spaceless > .item > a, .list.spaceless > .item > i, .list.spaceless > .item > .content, ul.list.spaceless > li > a, ul.list.spaceless > li > i, ul.list.spaceless > li > .content, ul.list.spaceless > .item > a, ul.list.spaceless > .item > i, ul.list.spaceless > .item > .content, ol.list.spaceless > li > a, ol.list.spaceless > li > i, ol.list.spaceless > li > .content, ol.list.spaceless > .item > a, ol.list.spaceless > .item > i, ol.list.spaceless > .item > .content {
    padding: 0 0; }
  .list.spaceless > li > i + .content,
  .list.spaceless > li .content + i, .list.spaceless > .item > i + .content,
  .list.spaceless > .item .content + i, ul.list.spaceless > li > i + .content,
  ul.list.spaceless > li .content + i, ul.list.spaceless > .item > i + .content,
  ul.list.spaceless > .item .content + i, ol.list.spaceless > li > i + .content,
  ol.list.spaceless > li .content + i, ol.list.spaceless > .item > i + .content,
  ol.list.spaceless > .item .content + i {
    padding-inline-start: 0; }
  .list.spacing-tiny > li > a, .list.spacing-tiny > li > i, .list.spacing-tiny > li > .content, .list.spacing-tiny > .item > a, .list.spacing-tiny > .item > i, .list.spacing-tiny > .item > .content, ul.list.spacing-tiny > li > a, ul.list.spacing-tiny > li > i, ul.list.spacing-tiny > li > .content, ul.list.spacing-tiny > .item > a, ul.list.spacing-tiny > .item > i, ul.list.spacing-tiny > .item > .content, ol.list.spacing-tiny > li > a, ol.list.spacing-tiny > li > i, ol.list.spacing-tiny > li > .content, ol.list.spacing-tiny > .item > a, ol.list.spacing-tiny > .item > i, ol.list.spacing-tiny > .item > .content {
    padding: var(--sizing-space-tiny) var(--sizing-space-small); }
  .list.spacing-tiny > li > i + .content,
  .list.spacing-tiny > li .content + i, .list.spacing-tiny > .item > i + .content,
  .list.spacing-tiny > .item .content + i, ul.list.spacing-tiny > li > i + .content,
  ul.list.spacing-tiny > li .content + i, ul.list.spacing-tiny > .item > i + .content,
  ul.list.spacing-tiny > .item .content + i, ol.list.spacing-tiny > li > i + .content,
  ol.list.spacing-tiny > li .content + i, ol.list.spacing-tiny > .item > i + .content,
  ol.list.spacing-tiny > .item .content + i {
    padding-inline-start: 0; }
  .list.spacing-small > li > a, .list.spacing-small > li > i, .list.spacing-small > li > .content, .list.spacing-small > .item > a, .list.spacing-small > .item > i, .list.spacing-small > .item > .content, ul.list.spacing-small > li > a, ul.list.spacing-small > li > i, ul.list.spacing-small > li > .content, ul.list.spacing-small > .item > a, ul.list.spacing-small > .item > i, ul.list.spacing-small > .item > .content, ol.list.spacing-small > li > a, ol.list.spacing-small > li > i, ol.list.spacing-small > li > .content, ol.list.spacing-small > .item > a, ol.list.spacing-small > .item > i, ol.list.spacing-small > .item > .content {
    padding: var(--sizing-space-small) var(--sizing-space-medium); }
  .list.spacing-small > li > i + .content,
  .list.spacing-small > li .content + i, .list.spacing-small > .item > i + .content,
  .list.spacing-small > .item .content + i, ul.list.spacing-small > li > i + .content,
  ul.list.spacing-small > li .content + i, ul.list.spacing-small > .item > i + .content,
  ul.list.spacing-small > .item .content + i, ol.list.spacing-small > li > i + .content,
  ol.list.spacing-small > li .content + i, ol.list.spacing-small > .item > i + .content,
  ol.list.spacing-small > .item .content + i {
    padding-inline-start: 0; }
  .list.spacing-medium > li > a, .list.spacing-medium > li > i, .list.spacing-medium > li > .content, .list.spacing-medium > .item > a, .list.spacing-medium > .item > i, .list.spacing-medium > .item > .content, ul.list.spacing-medium > li > a, ul.list.spacing-medium > li > i, ul.list.spacing-medium > li > .content, ul.list.spacing-medium > .item > a, ul.list.spacing-medium > .item > i, ul.list.spacing-medium > .item > .content, ol.list.spacing-medium > li > a, ol.list.spacing-medium > li > i, ol.list.spacing-medium > li > .content, ol.list.spacing-medium > .item > a, ol.list.spacing-medium > .item > i, ol.list.spacing-medium > .item > .content {
    padding: var(--sizing-space-medium) var(--sizing-space-medium); }
  .list.spacing-medium > li > i + .content,
  .list.spacing-medium > li .content + i, .list.spacing-medium > .item > i + .content,
  .list.spacing-medium > .item .content + i, ul.list.spacing-medium > li > i + .content,
  ul.list.spacing-medium > li .content + i, ul.list.spacing-medium > .item > i + .content,
  ul.list.spacing-medium > .item .content + i, ol.list.spacing-medium > li > i + .content,
  ol.list.spacing-medium > li .content + i, ol.list.spacing-medium > .item > i + .content,
  ol.list.spacing-medium > .item .content + i {
    padding-inline-start: 0; }
  .list.spacing-large > li > a, .list.spacing-large > li > i, .list.spacing-large > li > .content, .list.spacing-large > .item > a, .list.spacing-large > .item > i, .list.spacing-large > .item > .content, ul.list.spacing-large > li > a, ul.list.spacing-large > li > i, ul.list.spacing-large > li > .content, ul.list.spacing-large > .item > a, ul.list.spacing-large > .item > i, ul.list.spacing-large > .item > .content, ol.list.spacing-large > li > a, ol.list.spacing-large > li > i, ol.list.spacing-large > li > .content, ol.list.spacing-large > .item > a, ol.list.spacing-large > .item > i, ol.list.spacing-large > .item > .content {
    padding: var(--sizing-space-large) var(--sizing-space-large); }
  .list.spacing-large > li > i + .content,
  .list.spacing-large > li .content + i, .list.spacing-large > .item > i + .content,
  .list.spacing-large > .item .content + i, ul.list.spacing-large > li > i + .content,
  ul.list.spacing-large > li .content + i, ul.list.spacing-large > .item > i + .content,
  ul.list.spacing-large > .item .content + i, ol.list.spacing-large > li > i + .content,
  ol.list.spacing-large > li .content + i, ol.list.spacing-large > .item > i + .content,
  ol.list.spacing-large > .item .content + i {
    padding-inline-start: 0; }
  .list.spacing-huge > li > a, .list.spacing-huge > li > i, .list.spacing-huge > li > .content, .list.spacing-huge > .item > a, .list.spacing-huge > .item > i, .list.spacing-huge > .item > .content, ul.list.spacing-huge > li > a, ul.list.spacing-huge > li > i, ul.list.spacing-huge > li > .content, ul.list.spacing-huge > .item > a, ul.list.spacing-huge > .item > i, ul.list.spacing-huge > .item > .content, ol.list.spacing-huge > li > a, ol.list.spacing-huge > li > i, ol.list.spacing-huge > li > .content, ol.list.spacing-huge > .item > a, ol.list.spacing-huge > .item > i, ol.list.spacing-huge > .item > .content {
    padding: var(--sizing-space-huge) var(--sizing-space-huge); }
  .list.spacing-huge > li > i + .content,
  .list.spacing-huge > li .content + i, .list.spacing-huge > .item > i + .content,
  .list.spacing-huge > .item .content + i, ul.list.spacing-huge > li > i + .content,
  ul.list.spacing-huge > li .content + i, ul.list.spacing-huge > .item > i + .content,
  ul.list.spacing-huge > .item .content + i, ol.list.spacing-huge > li > i + .content,
  ol.list.spacing-huge > li .content + i, ol.list.spacing-huge > .item > i + .content,
  ol.list.spacing-huge > .item .content + i {
    padding-inline-start: 0; }

ul:not(.list).spacing-none {
  margin: calc(-1 * 0/2) 0; }
  ul:not(.list).spacing-none > * {
    margin: calc(0/2) 0; }
  ul:not(.list).spacing-none.outer-spacing {
    margin: calc(0/2); }

ul:not(.list).spacing-tiny {
  margin: calc(-1 * var(--sizing-space-tiny)/2) 0; }
  ul:not(.list).spacing-tiny > * {
    margin: calc(var(--sizing-space-tiny)/2) 0; }
  ul:not(.list).spacing-tiny.outer-spacing {
    margin: calc(var(--sizing-space-tiny)/2); }

ul:not(.list).spacing-small {
  margin: calc(-1 * var(--sizing-space-small)/2) 0; }
  ul:not(.list).spacing-small > * {
    margin: calc(var(--sizing-space-small)/2) 0; }
  ul:not(.list).spacing-small.outer-spacing {
    margin: calc(var(--sizing-space-small)/2); }

ul:not(.list).spacing-medium {
  margin: calc(-1 * var(--sizing-space-medium)/2) 0; }
  ul:not(.list).spacing-medium > * {
    margin: calc(var(--sizing-space-medium)/2) 0; }
  ul:not(.list).spacing-medium.outer-spacing {
    margin: calc(var(--sizing-space-medium)/2); }

ul:not(.list).spacing-large {
  margin: calc(-1 * var(--sizing-space-large)/2) 0; }
  ul:not(.list).spacing-large > * {
    margin: calc(var(--sizing-space-large)/2) 0; }
  ul:not(.list).spacing-large.outer-spacing {
    margin: calc(var(--sizing-space-large)/2); }

ul:not(.list).spacing-huge {
  margin: calc(-1 * var(--sizing-space-huge)/2) 0; }
  ul:not(.list).spacing-huge > * {
    margin: calc(var(--sizing-space-huge)/2) 0; }
  ul:not(.list).spacing-huge.outer-spacing {
    margin: calc(var(--sizing-space-huge)/2); }

ul:not(.list).standard ::marker {
  color: var(--color-standard); }

ul:not(.list).primary ::marker {
  color: var(--color-primary); }

ul:not(.list).secondary ::marker {
  color: var(--color-secondary); }

ul:not(.list).action ::marker {
  color: var(--color-primary); }

ul:not(.list).success ::marker {
  color: var(--color-success); }

ul:not(.list).warning ::marker {
  color: var(--color-warning); }

ul:not(.list).alert ::marker {
  color: var(--color-alert); }

ul:not(.list).admin ::marker {
  color: var(--color-admin); }

/**
 * Includes all advanced list components
 */
/**
 * Advanced list/data component provides a way to display rows of N columns of data.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
.advanced-list .header {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .advanced-list .header > .content {
    flex: 1;
    padding: var(--sizing-space-small) 0;
    font: var(--typo-text-small);
    letter-spacing: 0; }

.advanced-list .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: calc(2.5rem + 2px); }
  .advanced-list .item > *:first-child:not(.icon) {
    padding-inline-start: var(--sizing-space-small); }
  .advanced-list .item > *:last-child:not(.actions) {
    padding-inline-end: var(--sizing-space-small); }
  .advanced-list .item > .content {
    flex: 1;
    font: var(--typo-label-medium);
    letter-spacing: 0;
    padding-block: var(--sizing-space-small);
    min-width: 0; }
    .advanced-list .item > .content.ellipsable {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }

.advanced-list .item.hover > .actions > a, .advanced-list .item.hover > .actions > button {
  opacity: 0; }

.advanced-list .item.hover:hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border-radius: var(--sizing-space-tiny); }
  .advanced-list .item.hover:hover > .actions > a, .advanced-list .item.hover:hover > .actions > button {
    opacity: 1; }

.advanced-list.inverted .item.hover:hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

/**
 * Extension to add drag & drop behavior on an advanced list
 */
.advanced-list .placeholder {
  height: 0;
  border-bottom: 4px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.advanced-list .item.selected {
  border-radius: var(--sizing-space-tiny);
  outline: 1px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.advanced-list .item.drop-target {
  border-radius: 0;
  outline: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

.advanced-list.inverted .item.drop-target {
  outline-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.advanced-list .droppable {
  min-height: 2.5rem;
  border: 1px dashed transparent;
  background: transparent; }
  .advanced-list .droppable.active {
    border: 1px dashed hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
    background: transparent; }
  .advanced-list .droppable.current {
    border: 1px dashed transparent;
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

/**
 * Includes all loader styling
 */
/**
 * The google like loader
 *
 * @see https://codepen.io/jczimm/pen/vEBpoL
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.loader {
  background: url("../asset/loader/ring.svg") no-repeat;
  height: 2rem;
  width: 2rem; }
  .loader.tiny {
    height: 0.5rem;
    width: 0.5rem;
    background-image: url("../asset/loader/ring-thick.svg"); }
  .loader.small {
    height: 0.9rem;
    width: 0.9rem;
    background-image: url("../asset/loader/ring-thick.svg"); }
  .loader.large {
    height: 4rem;
    width: 4rem;
    background-image: url("../asset/loader/ring-thin.svg"); }
  .loader.huge {
    height: 6rem;
    width: 6rem;
    background-image: url("../asset/loader/ring-thin.svg"); }

/**
 * Includes all message styling
 */
/**
 * The message styling
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
/**
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.message-group {
  display: flex;
  flex-direction: column; }
  .message-group > .author {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .message-group > .message > .content:not(.subdued) {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }
  .message-group > .message > .content.subdued {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .message-group.standard > .author {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .message-group.standard > .message > .content:not(.subdued) {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }
  .message-group.standard > .message > .content.subdued {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .message-group.primary > .author {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .message-group.primary > .message > .content:not(.subdued) {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }
  .message-group.primary > .message > .content.subdued {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
  .message-group.secondary > .author {
    color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }
  .message-group.secondary > .message > .content:not(.subdued) {
    color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-top));
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high1)); }
  .message-group.secondary > .message > .content.subdued {
    color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low2));
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high5)); }
  .message-group.action > .author {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .message-group.action > .message > .content:not(.subdued) {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }
  .message-group.action > .message > .content.subdued {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
  .message-group.alert > .author {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .message-group.alert > .message > .content:not(.subdued) {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-top));
    background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high1)); }
  .message-group.alert > .message > .content.subdued {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low2));
    background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5)); }
  .message-group.warning > .author {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
  .message-group.warning > .message > .content:not(.subdued) {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-top));
    background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1)); }
  .message-group.warning > .message > .content.subdued {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low2));
    background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5)); }
  .message-group.success > .author {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
  .message-group.success > .message > .content:not(.subdued) {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-top));
    background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high1)); }
  .message-group.success > .message > .content.subdued {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low2));
    background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5)); }
  .message-group.admin > .author {
    color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
  .message-group.admin > .message > .content:not(.subdued) {
    color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-top));
    background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high1)); }
  .message-group.admin > .message > .content.subdued {
    color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low2));
    background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high5)); }
  .message-group > * {
    display: table;
    align-self: flex-start; }
  .message-group.end > *, .message-group.right > * {
    align-self: flex-end; }
  .message-group > .author {
    margin-block-end: var(--sizing-space-tiny);
    font: var(--typo-text-tiny); }
    .message-group > .author > .name {
      font-weight: 700; }
  .message-group.space-around {
    margin-block: var(--sizing-space-large); }
  .message-group:not(:last-child) {
    margin-block-end: var(--sizing-space-large); }
  .message-group > .message {
    display: flex;
    align-items: center; }
    .message-group > .message > .content {
      max-width: 26rem;
      font: var(--typo-text-small);
      border-radius: var(--sizing-space-medium);
      padding: var(--sizing-space-small) var(--sizing-space-large); }
      .message-group > .message > .content.pending {
        position: relative; }
        .message-group > .message > .content.pending:after {
          content: " ";
          background: rgba(255, 255, 255, 0.7);
          position: absolute;
          inset-inline: 0 0;
          inset-block: 0 0; }
        .message-group > .message > .content.pending.inverted:after {
          background: rgba(0, 0, 0, 0.7); }
    .message-group > .message > .state {
      margin-block: 0;
      margin-inline: 0.75rem; }
    .message-group > .message:not(:last-child) {
      margin-block-end: var(--sizing-space-small); }

/**
 * Includes all modal styling
 */
.modal {
  position: fixed;
  overflow: hidden;
  inset: 0;
  z-index: 9999;
  background: transparent !important;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: minmax(auto, 1fr); }
  .modal .modal-layer {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 0; }
  .modal .modal-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: calc(100vw - var(--sizing-space-huge)*2);
    max-width: 30rem;
    min-width: 10rem;
    overflow: hidden;
    z-index: 1;
    max-height: calc(100vh - var(--sizing-space-huge)*2); }
    .modal .modal-content.size-none {
      width: auto;
      min-width: auto;
      max-width: none; }
    .modal .modal-content.size-small {
      max-width: 20rem; }
    .modal .modal-content.size-medium {
      max-width: 30rem; }
    .modal .modal-content.size-large {
      max-width: 50rem; }
    .modal .modal-content.size-huge {
      max-width: 100rem;
      height: 100%; }
    .modal .modal-content.size-full {
      max-width: calc(100vw - var(--sizing-space-huge)*2);
      height: 100%; }
    .modal .modal-content.scrollable {
      overflow-y: auto; }
    .modal .modal-content > .card {
      width: 100%; }
    @media (max-width: 600px) {
      .modal .modal-content {
        position: absolute;
        width: auto;
        max-width: none;
        max-height: none;
        inset: 0;
        inset-block-start: var(--sizing-space-large); }
        .modal .modal-content > .card {
          border-radius: 0;
          position: absolute;
          width: 100%;
          inset: 0; } }

body.modal-enabled {
  overflow: hidden; }

/**
 * Includes all navs
 */
/**
 * Global config of navigation items
 */
/**
 * Includes nav mixins
 */
/**
 * Component that provides a generic configurable nav.
 */
ul.generic-nav {
  display: flex;
  flex-direction: var(--nav-generic-direction);
  justify-content: start;
  justify-items: unset;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: var(--nav-generic-wrap);
  gap: var(--nav-generic-spacing);
  margin: var(--nav-generic-margin-v) var(--nav-generic-margin-h);
  padding: var(--nav-generic-padding-v) var(--nav-generic-padding-h);
  color: var(--nav-generic-color);
  border-color: var(--nav-generic-border-color);
  border-radius: var(--nav-generic-border-radius);
  border-width: var(--nav-generic-border-width);
  border-style: var(--nav-generic-border-style);
  background: var(--nav-generic-background);
  list-style: none;
  width: 100%;
  overflow-x: var(--nav-generic-overflow); }
  ul.generic-nav > li {
    display: block;
    font: var(--nav-generic-font); }
    ul.generic-nav > li > a, ul.generic-nav > li > span, ul.generic-nav > li > div {
      display: flex !important;
      flex-direction: row;
      justify-content: var(--nav-generic-item-alignment);
      justify-items: unset;
      align-content: center;
      align-items: center;
      width: var(--nav-generic-item-width);
      height: 100%;
      box-sizing: border-box;
      flex-wrap: wrap;
      gap: var(--nav-generic-item-spacing);
      padding: var(--nav-generic-item-padding-v) var(--nav-generic-item-padding-h);
      text-align: var(--nav-generic-item-text-alignment); }
    ul.generic-nav > li > a, ul.generic-nav > li > span {
      color: var(--nav-generic-item-color);
      border-radius: var(--nav-generic-item-border-radius);
      border-inline-start-width: var(--nav-generic-item-border-inline-start-width, var(--nav-generic-item-border-width));
      border-inline-end-width: var(--nav-generic-item-border-inline-end-width, var(--nav-generic-item-border-width));
      border-block-start-width: var(--nav-generic-item-border-block-start-width, var(--nav-generic-item-border-width));
      border-block-end-width: var(--nav-generic-item-border-block-end-width, var(--nav-generic-item-border-width));
      border-style: var(--nav-generic-item-border-style);
      border-color: var(--nav-generic-item-border-color);
      background: var(--nav-generic-item-background);
      text-decoration: none;
      word-wrap: break-word;
      outline: 0; }
    ul.generic-nav > li > a:visited {
      color: var(--nav-generic-item-color); }
    ul.generic-nav > li > a:hover, ul.generic-nav > li > a:focus, ul.generic-nav > li > a:active {
      color: var(--nav-generic-item-hover-color);
      border-color: var(--nav-generic-item-hover-border-color);
      background: var(--nav-generic-item-hover-background); }
    ul.generic-nav > li.current {
      --nav-generic-item-color: var(--nav-generic-item-current-color);
      --nav-generic-item-border-color: var(--nav-generic-item-current-border-color);
      --nav-generic-item-background: var(--nav-generic-item-current-background);
      --nav-generic-item-hover-color: var(--nav-generic-item-current-color);
      --nav-generic-item-hover-border-color: var(--nav-generic-item-current-border-color);
      --nav-generic-item-hover-background: var(--nav-generic-item-current-background); }
    ul.generic-nav > li.disabled {
      --nav-generic-item-color: var(--nav-generic-item-disabled-color);
      --nav-generic-item-border-color: var(--nav-generic-item-disabled-border-color);
      --nav-generic-item-background: var(--nav-generic-item-disabled-background);
      --nav-generic-item-hover-color: var(--nav-generic-item-disabled-color);
      --nav-generic-item-hover-border-color: var(--nav-generic-item-disabled-border-color);
      --nav-generic-item-hover-background: var(--nav-generic-item-disabled-background);
      cursor: not-allowed;
      user-select: none; }

:root {
  --nav-generic-direction: row;
  --nav-generic-wrap: wrap;
  --nav-generic-overflow: hidden;
  --nav-generic-font: var(--typo-label-medium);
  --nav-generic-margin-h: 0;
  --nav-generic-margin-v: 0;
  --nav-generic-padding-h: 0;
  --nav-generic-padding-v: 0;
  --nav-generic-spacing: 1px;
  --nav-generic-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --nav-generic-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --nav-generic-border-radius: 0;
  --nav-generic-border-width: 0;
  --nav-generic-border-style: solid;
  --nav-generic-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --nav-generic-item-width: auto;
  --nav-generic-item-padding-h: var(--sizing-space-large);
  --nav-generic-item-padding-v: var(--sizing-space-medium);
  --nav-generic-item-spacing: var(--sizing-space-small);
  --nav-generic-item-alignment: start;
  --nav-generic-item-text-alignment: start;
  --nav-generic-item-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --nav-generic-item-border-radius: 0;
  --nav-generic-item-border-width: 0;
  --nav-generic-item-border-style: solid;
  --nav-generic-item-border-color: transparent;
  --nav-generic-item-backround: inherit;
  --nav-generic-item-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
  --nav-generic-item-hover-border-color: var(--color-primary);
  --nav-generic-item-hover-background: var(--color-primary);
  --nav-generic-item-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --nav-generic-item-disabled-border-color: transparent;
  --nav-generic-item-disabled-background: inherit;
  --nav-generic-item-current-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
  --nav-generic-item-current-border-color: transparent;
  --nav-generic-item-current-background: var(--color-primary); }

/**
 * Includes all horizontal nav styling
 */
/**
 * horizontal navigation component.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.horizontal-nav {
  display: flex;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  white-space: nowrap;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  ul.horizontal-nav > li {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    background: inherit; }
    ul.horizontal-nav > li > a, ul.horizontal-nav > li > a:visited, ul.horizontal-nav > li > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.horizontal-nav > li > a:hover, ul.horizontal-nav > li > a:focus, ul.horizontal-nav > li > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.horizontal-nav > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    ul.horizontal-nav > li.subdued > a, ul.horizontal-nav > li.subdued > a:visited, ul.horizontal-nav > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    ul.horizontal-nav > li.subdued > a:hover, ul.horizontal-nav > li.subdued > a:focus, ul.horizontal-nav > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    ul.horizontal-nav > li.alert > a, ul.horizontal-nav > li.alert > a:visited, ul.horizontal-nav > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    ul.horizontal-nav > li.alert > a:hover, ul.horizontal-nav > li.alert > a:focus, ul.horizontal-nav > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    ul.horizontal-nav > li.current > a, ul.horizontal-nav > li.current > a:visited, ul.horizontal-nav > li.current > * {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.horizontal-nav > li.current > a:hover, ul.horizontal-nav > li.current > a:focus, ul.horizontal-nav > li.current > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.horizontal-nav > li.current_ancestor > a, ul.horizontal-nav > li.current_ancestor > a:visited, ul.horizontal-nav > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.horizontal-nav > li.current_ancestor > a:hover, ul.horizontal-nav > li.current_ancestor > a:focus, ul.horizontal-nav > li.current_ancestor > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.horizontal-nav > li.disabled > a, ul.horizontal-nav > li.disabled > a:visited, ul.horizontal-nav > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    ul.horizontal-nav > li.disabled > a:hover, ul.horizontal-nav > li.disabled > a:focus, ul.horizontal-nav > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  ul.horizontal-nav.inverted {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }
    ul.horizontal-nav.inverted > li {
      border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5));
      background: inherit; }
      ul.horizontal-nav.inverted > li > a, ul.horizontal-nav.inverted > li > a:visited, ul.horizontal-nav.inverted > li > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.horizontal-nav.inverted > li > a:hover, ul.horizontal-nav.inverted > li > a:focus, ul.horizontal-nav.inverted > li > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.horizontal-nav.inverted > li.label > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      ul.horizontal-nav.inverted > li.subdued > a, ul.horizontal-nav.inverted > li.subdued > a:visited, ul.horizontal-nav.inverted > li.subdued > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }
      ul.horizontal-nav.inverted > li.subdued > a:hover, ul.horizontal-nav.inverted > li.subdued > a:focus, ul.horizontal-nav.inverted > li.subdued > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
      ul.horizontal-nav.inverted > li.alert > a, ul.horizontal-nav.inverted > li.alert > a:visited, ul.horizontal-nav.inverted > li.alert > * {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
      ul.horizontal-nav.inverted > li.alert > a:hover, ul.horizontal-nav.inverted > li.alert > a:focus, ul.horizontal-nav.inverted > li.alert > a:active {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
      ul.horizontal-nav.inverted > li.current > a, ul.horizontal-nav.inverted > li.current > a:visited, ul.horizontal-nav.inverted > li.current > * {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.horizontal-nav.inverted > li.current > a:hover, ul.horizontal-nav.inverted > li.current > a:focus, ul.horizontal-nav.inverted > li.current > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.horizontal-nav.inverted > li.current_ancestor > a, ul.horizontal-nav.inverted > li.current_ancestor > a:visited, ul.horizontal-nav.inverted > li.current_ancestor > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.horizontal-nav.inverted > li.current_ancestor > a:hover, ul.horizontal-nav.inverted > li.current_ancestor > a:focus, ul.horizontal-nav.inverted > li.current_ancestor > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.horizontal-nav.inverted > li.disabled > a, ul.horizontal-nav.inverted > li.disabled > a:visited, ul.horizontal-nav.inverted > li.disabled > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
      ul.horizontal-nav.inverted > li.disabled > a:hover, ul.horizontal-nav.inverted > li.disabled > a:focus, ul.horizontal-nav.inverted > li.disabled > a:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
  ul.horizontal-nav.transparent {
    background: transparent; }
  ul.horizontal-nav.inherit {
    background: inherit; }
  ul.horizontal-nav > li {
    display: block;
    font: var(--typo-label-medium);
    letter-spacing: 0; }
    ul.horizontal-nav > li > a, ul.horizontal-nav > li > span {
      display: flex;
      align-items: center;
      position: relative;
      block-size: 3.75rem;
      padding-inline: var(--sizing-space-large);
      padding-block: 0;
      text-align: center;
      outline: 0;
      word-wrap: break-word;
      user-select: none; }
    ul.horizontal-nav > li.first > a {
      padding-inline-start: 0; }
    ul.horizontal-nav > li.last > a {
      padding-inline-end: 0; }
    ul.horizontal-nav > li.disabled > span, ul.horizontal-nav > li.disabled > a {
      cursor: not-allowed; }
    ul.horizontal-nav > li.expand {
      flex: 1; }
  ul.horizontal-nav.extra-spacing > li > a, ul.horizontal-nav.extra-spacing > li > span {
    padding-inline: var(--sizing-space-huge);
    padding-block: 0; }
  ul.horizontal-nav.large > li > a, ul.horizontal-nav.large > li > span {
    block-size: 5rem;
    padding-inline: var(--sizing-space-large);
    padding-block: 0; }
  ul.horizontal-nav.small > li > a, ul.horizontal-nav.small > li > span {
    block-size: calc(2.5rem + 2px);
    padding-inline: calc(var(--sizing-space-medium) + 1px);
    padding-block: 0; }
  ul.horizontal-nav.inside-spacing-large > li {
    padding: 1rem 1rem; }
  ul.horizontal-nav.spread {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between; }
    ul.horizontal-nav.spread > li:first-child > a, ul.horizontal-nav.spread > li:first-child > span {
      padding-inline-start: 0; }
    ul.horizontal-nav.spread > li:last-child > a, ul.horizontal-nav.spread > li:last-child > span {
      padding-inline-end: 0; }
    ul.horizontal-nav.spread > li > a, ul.horizontal-nav.spread > li > span {
      margin: 0; }
  ul.horizontal-nav.space-around {
    width: 100%;
    -webkit-box-sizing: border-box;
    justify-content: space-around; }
  ul.horizontal-nav.no-outer-padding > li:first-child > a, ul.horizontal-nav.no-outer-padding > li:first-child > span {
    padding-inline-start: 0; }
  ul.horizontal-nav.no-outer-padding > li:last-child > a, ul.horizontal-nav.no-outer-padding > li:last-child > span {
    padding-inline-end: 0; }
  ul.horizontal-nav.align-start {
    align-items: flex-start; }
  ul.horizontal-nav.align-end {
    align-items: flex-end; }
  ul.horizontal-nav.align-middle {
    align-items: center; }
  ul.horizontal-nav.align-left {
    text-align: start; }
  ul.horizontal-nav.align-right {
    text-align: end; }
  ul.horizontal-nav.uppercase {
    text-transform: uppercase; }
  ul.horizontal-nav.strong > li {
    font-weight: bold; }

/**
 * Dropdown within a horizontal nav.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.horizontal-nav > li.has-dropdown {
  position: relative; }
  @media (max-width: 600px) {
    ul.horizontal-nav > li.has-dropdown {
      position: initial; } }
  @media (min-width: 601px) and (max-width: 1280px) {
    ul.horizontal-nav > li.has-dropdown {
      position: initial; } }
  ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
    position: absolute;
    list-style: none;
    z-index: 999;
    min-width: 12rem; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.align-start {
      inset-inline-start: 0; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.align-end {
      inset-inline-end: 0; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.align-left {
      inset-inline-start: 0; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.align-right {
      inset-inline-end: 0; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.size-small {
      width: 12rem;
      white-space: initial; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.size-medium {
      width: 15rem;
      white-space: initial; }
    ul.horizontal-nav > li.has-dropdown > .dropdown-nav.size-large {
      width: 20rem;
      white-space: initial; }
    @media (max-width: 600px) {
      ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
        width: 100% !important;
        inset-inline-start: 0; } }
    @media (min-width: 601px) and (max-width: 1280px) {
      ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
        width: 100% !important;
        inset-inline-start: 0; } }
  ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
    visibility: hidden;
    opacity: 0;
    margin-block-start: -1rem;
    transition: all 100ms; }
    @media (max-width: 600px) {
      ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
        display: none;
        transition: none; } }
    @media (min-width: 601px) and (max-width: 1280px) {
      ul.horizontal-nav > li.has-dropdown > .dropdown-nav {
        display: none;
        transition: none; } }
  ul.horizontal-nav > li.has-dropdown.opened > .dropdown-nav {
    visibility: visible;
    opacity: 1;
    margin-block-start: 0; }
    @media (max-width: 600px) {
      ul.horizontal-nav > li.has-dropdown.opened > .dropdown-nav {
        display: block; } }
    @media (min-width: 601px) and (max-width: 1280px) {
      ul.horizontal-nav > li.has-dropdown.opened > .dropdown-nav {
        display: block; } }
  ul.horizontal-nav > li.has-dropdown > .dropdown-nav.direction-up {
    bottom: 100%;
    margin-block: 0 -1rem; }
  ul.horizontal-nav > li.has-dropdown.opened > .dropdown-nav.direction-up {
    margin-block: 0 0; }
  ul.horizontal-nav > li.has-dropdown:not(.iconless) > a::after {
    display: inline-block;
    content: "\2039";
    inline-size: 1em;
    transform-origin: center center;
    transform: rotate(-90deg);
    transition: transform 200ms; }
    [dir="rtl"] ul.horizontal-nav > li.has-dropdown:not(.iconless) > a::after {
      transform: rotate(90deg); }
    @media (max-width: 600px) {
      ul.horizontal-nav > li.has-dropdown:not(.iconless) > a::after {
        transition: none; } }
    @media (min-width: 601px) and (max-width: 1280px) {
      ul.horizontal-nav > li.has-dropdown:not(.iconless) > a::after {
        transition: none; } }
  ul.horizontal-nav > li.has-dropdown.opened:not(.iconless) > a::after {
    transform: rotate(90deg); }
    [dir="rtl"] ul.horizontal-nav > li.has-dropdown.opened:not(.iconless) > a::after {
      transform: rotate(-90deg); }
  ul.horizontal-nav > li.has-dropdown.has-megamenu > .dropdown-nav.megamenu {
    position: fixed;
    width: 80rem;
    inset-inline: 0;
    margin-inline: auto;
    background: transparent; }
  ul.horizontal-nav > li.has-dropdown.has-megamenu::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-start: auto;
    inline-size: 0;
    block-size: 0;
    margin-inline-start: calc(50% - 1rem);
    border-block-start: 0.5rem solid transparent;
    border-block-end: 0.5rem solid white;
    border-inline-start: 0.5rem solid transparent;
    border-inline-end: 0.5rem solid transparent;
    visibility: hidden;
    opacity: 0;
    inset-block-end: 1rem;
    transition: all 100ms; }
  ul.horizontal-nav > li.has-dropdown.has-megamenu.opened::after {
    visibility: visible;
    opacity: 1;
    inset-block-end: 0; }

ul.horizontal-nav.direction-up > li.has-dropdown > .dropdown-nav {
  inset-block-end: 100%;
  margin-block: 0 -1rem; }

ul.horizontal-nav.direction-up > li.has-dropdown.opened > .dropdown-nav {
  margin-block: 0; }

/**
 * Includes all side nav styling
 */
/**
 * Vertical nav component that handles a second level of sub-navigation.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.vertical-nav {
  list-style: none;
  overflow: auto;
  margin: 0;
  padding-inline: var(--nav-vertical-padding-h);
  padding-block: var(--nav-vertical-padding-v);
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  ul.vertical-nav.expand {
    height: 100%;
    box-sizing: border-box; }
  ul.vertical-nav.uppercase {
    text-transform: uppercase; }
  ul.vertical-nav.strong > li {
    font-weight: bold; }
  ul.vertical-nav.centered {
    text-align: center; }
  ul.vertical-nav > li,
  ul.vertical-nav > li > ul > li {
    font: var(--nav-vertical-item-font);
    display: block;
    margin: 0;
    padding: 0; }
    ul.vertical-nav > li > a,
    ul.vertical-nav > li > ul > li > a {
      cursor: pointer; }
    ul.vertical-nav > li > a, ul.vertical-nav > li > span,
    ul.vertical-nav > li > ul > li > a,
    ul.vertical-nav > li > ul > li > span {
      display: block;
      position: relative;
      text-align: start;
      padding: var(--nav-vertical-item-padding-v) var(--nav-vertical-item-padding-h);
      margin: var(--nav-vertical-item-margin-v) var(--nav-vertical-item-margin-h);
      border-radius: var(--nav-vertical-item-radius);
      outline: 0;
      user-select: none; }
      ul.vertical-nav > li > a > span, ul.vertical-nav > li > span > span,
      ul.vertical-nav > li > ul > li > a > span,
      ul.vertical-nav > li > ul > li > span > span {
        display: inline;
        word-wrap: break-word;
        word-break: break-all; }
    ul.vertical-nav > li.disabled > *,
    ul.vertical-nav > li > ul > li.disabled > * {
      cursor: not-allowed;
      user-select: none; }
    ul.vertical-nav > li.divider,
    ul.vertical-nav > li > ul > li.divider {
      margin: var(--nav-vertical-divider-margin);
      border-block-start-width: 1px;
      border-block-start-style: solid; }
  ul.vertical-nav > li.has-dropdown:not(.iconless) > a::after {
    display: inline-block;
    content: "\2039";
    float: right;
    transform-origin: center center;
    transform: rotate(-90deg);
    color: var(--nav-vertical-sub-item-icon-color); }
    [dir="rtl"] ul.vertical-nav > li.has-dropdown:not(.iconless) > a::after {
      float: left; }
    [dir="rtl"] ul.vertical-nav > li.has-dropdown:not(.iconless) > a::after {
      transform: rotate(90deg); }
  ul.vertical-nav > li > ul {
    margin: 0;
    padding: 0; }
  ul.vertical-nav > li > ul.vertical-nav > li {
    --nav-vertical-item-font: var(--nav-vertical-sub-item-font); }
    ul.vertical-nav > li > ul.vertical-nav > li > a, ul.vertical-nav > li > ul.vertical-nav > li > span {
      padding-inline-start: calc(var(--nav-vertical-item-padding-h) + var(--nav-vertical-sub-item-indent)*1); }
  ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > a, ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > span {
    padding-inline-start: calc(var(--nav-vertical-item-padding-h) + var(--nav-vertical-sub-item-indent)*2); }
  ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > a, ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > ul.vertical-nav > li > span {
    padding-inline-start: calc(var(--nav-vertical-item-padding-h) + var(--nav-vertical-sub-item-indent)*3); }
  ul.vertical-nav.closed > li > ul {
    display: none; }
  ul.vertical-nav.closed > li.current > ul, ul.vertical-nav.closed > li.current_ancestor > ul {
    display: block; }
  ul.vertical-nav.extra-spacing > li > a, ul.vertical-nav.extra-spacing > li > span {
    padding-block: var(--nav-vertical-item-extra-spacing-v); }
  ul.vertical-nav.lower-spacing > li > a, ul.vertical-nav.lower-spacing > li > span, ul.vertical-nav.lower-spacing > li > ul.vertical-nav > a, ul.vertical-nav.lower-spacing > li > ul.vertical-nav > span {
    padding-block: var(--nav-vertical-item-lower-spacing-v); }
  ul.vertical-nav > li {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    background: inherit; }
    ul.vertical-nav > li > a, ul.vertical-nav > li > a:visited, ul.vertical-nav > li > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.vertical-nav > li > a:hover, ul.vertical-nav > li > a:focus, ul.vertical-nav > li > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.vertical-nav > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    ul.vertical-nav > li.subdued > a, ul.vertical-nav > li.subdued > a:visited, ul.vertical-nav > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    ul.vertical-nav > li.subdued > a:hover, ul.vertical-nav > li.subdued > a:focus, ul.vertical-nav > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    ul.vertical-nav > li.alert > a, ul.vertical-nav > li.alert > a:visited, ul.vertical-nav > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    ul.vertical-nav > li.alert > a:hover, ul.vertical-nav > li.alert > a:focus, ul.vertical-nav > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    ul.vertical-nav > li.current > a, ul.vertical-nav > li.current > a:visited, ul.vertical-nav > li.current > * {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.vertical-nav > li.current > a:hover, ul.vertical-nav > li.current > a:focus, ul.vertical-nav > li.current > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.vertical-nav > li.current_ancestor > a, ul.vertical-nav > li.current_ancestor > a:visited, ul.vertical-nav > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.vertical-nav > li.current_ancestor > a:hover, ul.vertical-nav > li.current_ancestor > a:focus, ul.vertical-nav > li.current_ancestor > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
      background: inherit; }
    ul.vertical-nav > li.disabled > a, ul.vertical-nav > li.disabled > a:visited, ul.vertical-nav > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    ul.vertical-nav > li.disabled > a:hover, ul.vertical-nav > li.disabled > a:focus, ul.vertical-nav > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  ul.vertical-nav.inverted {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }
    ul.vertical-nav.inverted > li {
      border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5));
      background: inherit; }
      ul.vertical-nav.inverted > li > a, ul.vertical-nav.inverted > li > a:visited, ul.vertical-nav.inverted > li > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.vertical-nav.inverted > li > a:hover, ul.vertical-nav.inverted > li > a:focus, ul.vertical-nav.inverted > li > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.vertical-nav.inverted > li.label > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      ul.vertical-nav.inverted > li.subdued > a, ul.vertical-nav.inverted > li.subdued > a:visited, ul.vertical-nav.inverted > li.subdued > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }
      ul.vertical-nav.inverted > li.subdued > a:hover, ul.vertical-nav.inverted > li.subdued > a:focus, ul.vertical-nav.inverted > li.subdued > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
      ul.vertical-nav.inverted > li.alert > a, ul.vertical-nav.inverted > li.alert > a:visited, ul.vertical-nav.inverted > li.alert > * {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
      ul.vertical-nav.inverted > li.alert > a:hover, ul.vertical-nav.inverted > li.alert > a:focus, ul.vertical-nav.inverted > li.alert > a:active {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
      ul.vertical-nav.inverted > li.current > a, ul.vertical-nav.inverted > li.current > a:visited, ul.vertical-nav.inverted > li.current > * {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.vertical-nav.inverted > li.current > a:hover, ul.vertical-nav.inverted > li.current > a:focus, ul.vertical-nav.inverted > li.current > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.vertical-nav.inverted > li.current_ancestor > a, ul.vertical-nav.inverted > li.current_ancestor > a:visited, ul.vertical-nav.inverted > li.current_ancestor > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.vertical-nav.inverted > li.current_ancestor > a:hover, ul.vertical-nav.inverted > li.current_ancestor > a:focus, ul.vertical-nav.inverted > li.current_ancestor > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
        background: inherit; }
      ul.vertical-nav.inverted > li.disabled > a, ul.vertical-nav.inverted > li.disabled > a:visited, ul.vertical-nav.inverted > li.disabled > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
      ul.vertical-nav.inverted > li.disabled > a:hover, ul.vertical-nav.inverted > li.disabled > a:focus, ul.vertical-nav.inverted > li.disabled > a:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
  ul.vertical-nav.transparent {
    background: transparent; }
  ul.vertical-nav.inherit {
    background: inherit; }

:root {
  --nav-vertical-padding-h: 0;
  --nav-vertical-padding-v: var(--sizing-space-small);
  --nav-vertical-item-font: var(--typo-label-medium);
  --nav-vertical-item-padding-h: var(--sizing-space-medium);
  --nav-vertical-item-padding-v: var(--sizing-space-medium);
  --nav-vertical-item-margin-h: var(--sizing-space-medium);
  --nav-vertical-item-margin-v: 0;
  --nav-vertical-item-radius: 0;
  --nav-vertical-sub-item-icon-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --nav-vertical-sub-item-icon-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --nav-vertical-sub-item-font: var(--typo-label-small);
  --nav-vertical-sub-item-indent: var(--sizing-space-large);
  --nav-vertical-divider-margin: var(--sizing-space-small) 0;
  --nav-vertical-divider-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.7);
  --nav-vertical-item-extra-spacing-v: var(--sizing-space-large);
  --nav-vertical-item-lower-spacing-v: var(--sizing-space-small); }

/**
 * vertical nav dropdown component
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 *
 * @deprecated Still there for BC reasons
 */
ul.vertical-nav.dropdown {
  min-width: 18rem;
  max-width: 18rem;
  min-height: 0;
  max-height: 20rem; }

.dropdown-content {
  display: none; }

/**
 * Extension to the vertical nav to display a title within the nav.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.vertical-nav > li > .header {
  padding: var(--nav-vertical-item-padding-v) var(--nav-vertical-item-padding-h);
  margin: var(--nav-vertical-item-margin-v) var(--nav-vertical-item-margin-h);
  border-radius: var(--nav-vertical-item-radius);
  display: flex;
  position: relative;
  align-items: center;
  gap: var(--nav-vertical-header-spacing); }
  ul.vertical-nav > li > .header > .image {
    font: var(--nav-vertical-header-image-font);
    padding: var(--nav-vertical-header-image-padding);
    border-radius: var(--nav-vertical-header-image-radius);
    background: var(--nav-vertical-header-image-background); }
  ul.vertical-nav > li > .header > .identity {
    display: flex;
    flex-direction: column;
    gap: var(--nav-vertical-header-identity-spacing); }
    ul.vertical-nav > li > .header > .identity > .name {
      font: var(--nav-vertical-header-name-font);
      font-weight: var(--nav-vertical-header-name-weight);
      color: var(--nav-vertical-header-name-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    ul.vertical-nav > li > .header > .identity > .description {
      font: var(--nav-vertical-header-description-font);
      color: var(--nav-vertical-header-description-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }

ul.vertical-nav.inverted {
  --nav-vertical-header-image-background: var(--nav-vertical-header-image-inverted-background);
  --nav-vertical-header-name-color: var(--nav-vertical-header-name-inverted-color);
  --nav-vertical-header-description-color: var(--nav-vertical-header-description-inverted-color); }

:root {
  --nav-vertical-header-spacing: var(--sizing-space-medium);
  --nav-vertical-header-image-font: var(--typo-label-medium);
  --nav-vertical-header-image-padding: var(--sizing-space-small);
  --nav-vertical-header-image-radius: var(--sizing-space-tiny);
  --nav-vertical-header-image-background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-top));
  --nav-vertical-header-image-inverted-background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
  --nav-vertical-header-identity-spacing: var(--sizing-space-tiny);
  --nav-vertical-header-name-font: var(--typo-title-tiny);
  --nav-vertical-header-name-weight: 700;
  --nav-vertical-header-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --nav-vertical-header-name-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  --nav-vertical-header-description-font: var(--typo-label-tiny);
  --nav-vertical-header-description-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
  --nav-vertical-header-description-inverted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }

/**
 * Extension to the vertical nav to highlight a whole nav.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
ul.vertical-nav.highlight {
  background: var(--nav-vertical-highlight-background); }
  ul.vertical-nav.highlight.inverted {
    --nav-vertical-highlight-background: var(--nav-vertical-highlight-inverted-background); }

:root {
  --nav-vertical-highlight-background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high4));
  --nav-vertical-highlight-inverted-background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high4)); }

/**
 * Includes all breadcrumb styling
 */
/**
 * breadcrumb component
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.breadcrumb-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-standard); }
  ul.breadcrumb-nav li {
    display: inline-block;
    white-space: nowrap;
    font: var(--typo-text-small); }
  ul.breadcrumb-nav::after {
    content: "\00a0"; }
  ul.breadcrumb-nav li::after {
    display: inline-block;
    content: "/";
    margin: 0 0.25em;
    color: var(--color-standard); }
  ul.breadcrumb-nav li:last-child::after {
    content: none;
    margin: 0; }
  ul.breadcrumb-nav.trailing li:last-child::after {
    display: inline-block;
    content: "/";
    margin: 0 0.25em;
    color: var(--color-standard); }
  ul.breadcrumb-nav.leading li:first-child::before {
    display: inline-block;
    content: "/";
    margin: 0 0.25em;
    color: var(--color-standard); }
  ul.breadcrumb-nav i + span,
  ul.breadcrumb-nav span + i {
    margin-inline-start: 0.25em; }
  ul.breadcrumb-nav a, ul.breadcrumb-nav a:visited, ul.breadcrumb-nav a:active {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
  ul.breadcrumb-nav a:focus, ul.breadcrumb-nav a:hover {
    color: var(--color-primary); }

@media (max-width: 600px) {
  ul.breadcrumb-nav > li {
    display: none; }
  ul.breadcrumb-nav > li::after {
    content: none; }
  ul.breadcrumb-nav > li:last-of-type {
    display: inline-block; } }

/**
 * Includes all pagination nav styling
 */
/**
 * pagination nav component
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.pagination-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: -1px 0 0 -1px;
  list-style: none;
  padding: 0; }
  .pagination-nav li {
    display: block;
    text-align: center;
    padding: 1px 0 0 1px;
    flex: 0 0 auto;
    font: var(--typo-text-small);
    letter-spacing: 0; }
    .pagination-nav li > .page, .pagination-nav li .arrow, .pagination-nav li .more {
      display: block;
      text-align: center;
      width: 1.875rem;
      box-sizing: border-box;
      padding: var(--sizing-space-tiny) 0;
      border-radius: var(--sizing-space-tiny);
      outline: 0;
      text-decoration: none; }
      .pagination-nav li > .page[disabled], .pagination-nav li > .page.disabled, .pagination-nav li .arrow[disabled], .pagination-nav li .arrow.disabled, .pagination-nav li .more[disabled], .pagination-nav li .more.disabled {
        cursor: not-allowed; }
    .pagination-nav li > .more {
      width: 1rem; }
    .pagination-nav li > .page {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
      background: transparent; }
      .pagination-nav li > .page:visited {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .pagination-nav li > .page:hover, .pagination-nav li > .page:focus {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
        background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
      .pagination-nav li > .page:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
        background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
      .pagination-nav li > .page[disabled], .pagination-nav li > .page.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)) !important;
        background: transparent; }
    .pagination-nav li > .page.current {
      color: var(--color-primary);
      background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
      .pagination-nav li > .page.current:visited {
        color: var(--color-primary); }
      .pagination-nav li > .page.current:hover, .pagination-nav li > .page.current:focus {
        color: var(--color-primary);
        background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
      .pagination-nav li > .page.current:active {
        color: var(--color-primary);
        background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }
      .pagination-nav li > .page.current[disabled], .pagination-nav li > .page.current.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
        background: transparent; }
    .pagination-nav li > .arrow {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
      background: transparent; }
      .pagination-nav li > .arrow:visited {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
      .pagination-nav li > .arrow:hover, .pagination-nav li > .arrow:focus {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
        background: transparent; }
      .pagination-nav li > .arrow:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
        background: transparent; }
      .pagination-nav li > .arrow[disabled], .pagination-nav li > .arrow.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
        background: transparent; }

ul.pagination-nav {
  list-style: none;
  padding: 0; }

/**
 * Includes all tab styling
 */
/**
 * tab components that provides a tab feature
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.tabs,
ul.tab-nav {
  --nav-tab-font: var(--typo-label-medium);
  --nav-tab-item-padding-h: var(--sizing-space-huge);
  --nav-tab-item-padding-v: var(--sizing-space-large);
  --nav-tab-item-spacing: 0px;
  --nav-tab-item-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --nav-tab-item-current-text-color: var(--color-primary);
  --nav-tab-item-current-border-width: var(--sizing-space-tiny);
  --nav-tab-item-current-border-color: var(--color-primary);
  --nav-tab-item-hover-text-color: var(--nav-tab-item-current-text-color);
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  border: 0;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: inherit; }
  ul.tabs.inverted,
  ul.tab-nav.inverted {
    --nav-tab-item-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
  ul.tabs, ul.tabs ul,
  ul.tab-nav,
  ul.tab-nav ul {
    padding: 0;
    margin: 0;
    list-style: none; }
  ul.tabs li,
  ul.tab-nav li {
    margin: 0;
    padding: 0; }
  ul.tabs > li,
  ul.tab-nav > li {
    display: block;
    font: var(--nav-tab-font);
    margin-inline-end: var(---nav-tab-item-spacing); }
    ul.tabs > li:last-child,
    ul.tab-nav > li:last-child {
      margin-inline-end: 0; }
    ul.tabs > li > a, ul.tabs > li > span,
    ul.tab-nav > li > a,
    ul.tab-nav > li > span {
      display: block;
      padding: var(--nav-tab-item-padding-v) var(--nav-tab-item-padding-h);
      text-align: center;
      text-decoration: none;
      word-wrap: break-word;
      outline: 0;
      white-space: nowrap; }
    ul.tabs > li > *::after,
    ul.tab-nav > li > *::after {
      position: absolute;
      content: ' ';
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 0;
      background: transparent; }
    ul.tabs > li.disabled > span,
    ul.tab-nav > li.disabled > span {
      cursor: not-allowed;
      user-select: none; }
    ul.tabs > li.current > *::after,
    ul.tab-nav > li.current > *::after {
      block-size: var(--nav-tab-item-current-border-width); }
  ul.tabs.small > li > a,
  ul.tabs.small > li > span,
  ul.tab-nav.small > li > a,
  ul.tab-nav.small > li > span {
    padding: var(--sizing-space-medium) var(--sizing-space-large); }
  ul.tabs.medium > li > a,
  ul.tabs.medium > li > span,
  ul.tab-nav.medium > li > a,
  ul.tab-nav.medium > li > span {
    padding: var(--sizing-space-large) var(--sizing-space-large); }
  ul.tabs.large > li > a,
  ul.tabs.large > li > span,
  ul.tab-nav.large > li > a,
  ul.tab-nav.large > li > span {
    padding: var(--sizing-space-large) var(--sizing-space-huge); }
  ul.tabs.spread,
  ul.tab-nav.spread {
    width: 100%;
    box-sizing: border-box; }
    ul.tabs.spread > li,
    ul.tab-nav.spread > li {
      flex: 1; }
  ul.tabs.centered,
  ul.tab-nav.centered {
    justify-content: center; }
  ul.tabs.uppercase,
  ul.tab-nav.uppercase {
    text-transform: uppercase; }
  ul.tabs.strong > li,
  ul.tab-nav.strong > li {
    font-weight: bold; }
  ul.tabs > li,
  ul.tab-nav > li {
    border-color: inherit;
    background: inherit; }
    ul.tabs > li > a, ul.tabs > li > a:visited, ul.tabs > li > span,
    ul.tab-nav > li > a,
    ul.tab-nav > li > a:visited,
    ul.tab-nav > li > span {
      color: var(--nav-tab-item-text-color);
      background: inherit; }
    ul.tabs > li > a:hover, ul.tabs > li > a:focus, ul.tabs > li > a:active,
    ul.tab-nav > li > a:hover,
    ul.tab-nav > li > a:focus,
    ul.tab-nav > li > a:active {
      color: var(--nav-tab-item-hover-text-color);
      background: inherit; }
    ul.tabs > li.label > span,
    ul.tab-nav > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    ul.tabs > li.subdued > a, ul.tabs > li.subdued > a:visited, ul.tabs > li.subdued > *,
    ul.tab-nav > li.subdued > a,
    ul.tab-nav > li.subdued > a:visited,
    ul.tab-nav > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    ul.tabs > li.subdued > a:hover, ul.tabs > li.subdued > a:focus, ul.tabs > li.subdued > a:active,
    ul.tab-nav > li.subdued > a:hover,
    ul.tab-nav > li.subdued > a:focus,
    ul.tab-nav > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    ul.tabs > li.alert > a, ul.tabs > li.alert > a:visited, ul.tabs > li.alert > *,
    ul.tab-nav > li.alert > a,
    ul.tab-nav > li.alert > a:visited,
    ul.tab-nav > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    ul.tabs > li.alert > a:hover, ul.tabs > li.alert > a:focus, ul.tabs > li.alert > a:active,
    ul.tab-nav > li.alert > a:hover,
    ul.tab-nav > li.alert > a:focus,
    ul.tab-nav > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    ul.tabs > li.current > a, ul.tabs > li.current > a:visited, ul.tabs > li.current > *,
    ul.tab-nav > li.current > a,
    ul.tab-nav > li.current > a:visited,
    ul.tab-nav > li.current > * {
      color: var(--nav-tab-item-current-text-color);
      background: inherit; }
    ul.tabs > li.current > a:hover, ul.tabs > li.current > a:focus, ul.tabs > li.current > a:active,
    ul.tab-nav > li.current > a:hover,
    ul.tab-nav > li.current > a:focus,
    ul.tab-nav > li.current > a:active {
      color: var(--nav-tab-item-hover-text-color);
      background: inherit; }
    ul.tabs > li.current_ancestor > a, ul.tabs > li.current_ancestor > a:visited, ul.tabs > li.current_ancestor > *,
    ul.tab-nav > li.current_ancestor > a,
    ul.tab-nav > li.current_ancestor > a:visited,
    ul.tab-nav > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.tabs > li.current_ancestor > a:hover, ul.tabs > li.current_ancestor > a:focus, ul.tabs > li.current_ancestor > a:active,
    ul.tab-nav > li.current_ancestor > a:hover,
    ul.tab-nav > li.current_ancestor > a:focus,
    ul.tab-nav > li.current_ancestor > a:active {
      color: var(--nav-tab-item-hover-text-color);
      background: inherit; }
    ul.tabs > li.disabled > a, ul.tabs > li.disabled > a:visited, ul.tabs > li.disabled > *,
    ul.tab-nav > li.disabled > a,
    ul.tab-nav > li.disabled > a:visited,
    ul.tab-nav > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    ul.tabs > li.disabled > a:hover, ul.tabs > li.disabled > a:focus, ul.tabs > li.disabled > a:active,
    ul.tab-nav > li.disabled > a:hover,
    ul.tab-nav > li.disabled > a:focus,
    ul.tab-nav > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  ul.tabs.inverted,
  ul.tab-nav.inverted {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    border-color: inherit; }
    ul.tabs.inverted > li,
    ul.tab-nav.inverted > li {
      border-color: inherit;
      background: inherit; }
      ul.tabs.inverted > li > a, ul.tabs.inverted > li > a:visited, ul.tabs.inverted > li > span,
      ul.tab-nav.inverted > li > a,
      ul.tab-nav.inverted > li > a:visited,
      ul.tab-nav.inverted > li > span {
        color: var(--nav-tab-item-text-color);
        background: inherit; }
      ul.tabs.inverted > li > a:hover, ul.tabs.inverted > li > a:focus, ul.tabs.inverted > li > a:active,
      ul.tab-nav.inverted > li > a:hover,
      ul.tab-nav.inverted > li > a:focus,
      ul.tab-nav.inverted > li > a:active {
        color: var(--nav-tab-item-hover-text-color);
        background: inherit; }
      ul.tabs.inverted > li.label > span,
      ul.tab-nav.inverted > li.label > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      ul.tabs.inverted > li.subdued > a, ul.tabs.inverted > li.subdued > a:visited, ul.tabs.inverted > li.subdued > *,
      ul.tab-nav.inverted > li.subdued > a,
      ul.tab-nav.inverted > li.subdued > a:visited,
      ul.tab-nav.inverted > li.subdued > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }
      ul.tabs.inverted > li.subdued > a:hover, ul.tabs.inverted > li.subdued > a:focus, ul.tabs.inverted > li.subdued > a:active,
      ul.tab-nav.inverted > li.subdued > a:hover,
      ul.tab-nav.inverted > li.subdued > a:focus,
      ul.tab-nav.inverted > li.subdued > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
      ul.tabs.inverted > li.alert > a, ul.tabs.inverted > li.alert > a:visited, ul.tabs.inverted > li.alert > *,
      ul.tab-nav.inverted > li.alert > a,
      ul.tab-nav.inverted > li.alert > a:visited,
      ul.tab-nav.inverted > li.alert > * {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
      ul.tabs.inverted > li.alert > a:hover, ul.tabs.inverted > li.alert > a:focus, ul.tabs.inverted > li.alert > a:active,
      ul.tab-nav.inverted > li.alert > a:hover,
      ul.tab-nav.inverted > li.alert > a:focus,
      ul.tab-nav.inverted > li.alert > a:active {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
      ul.tabs.inverted > li.current > a, ul.tabs.inverted > li.current > a:visited, ul.tabs.inverted > li.current > *,
      ul.tab-nav.inverted > li.current > a,
      ul.tab-nav.inverted > li.current > a:visited,
      ul.tab-nav.inverted > li.current > * {
        color: var(--nav-tab-item-current-text-color);
        background: inherit; }
      ul.tabs.inverted > li.current > a:hover, ul.tabs.inverted > li.current > a:focus, ul.tabs.inverted > li.current > a:active,
      ul.tab-nav.inverted > li.current > a:hover,
      ul.tab-nav.inverted > li.current > a:focus,
      ul.tab-nav.inverted > li.current > a:active {
        color: var(--nav-tab-item-hover-text-color);
        background: inherit; }
      ul.tabs.inverted > li.current_ancestor > a, ul.tabs.inverted > li.current_ancestor > a:visited, ul.tabs.inverted > li.current_ancestor > *,
      ul.tab-nav.inverted > li.current_ancestor > a,
      ul.tab-nav.inverted > li.current_ancestor > a:visited,
      ul.tab-nav.inverted > li.current_ancestor > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.tabs.inverted > li.current_ancestor > a:hover, ul.tabs.inverted > li.current_ancestor > a:focus, ul.tabs.inverted > li.current_ancestor > a:active,
      ul.tab-nav.inverted > li.current_ancestor > a:hover,
      ul.tab-nav.inverted > li.current_ancestor > a:focus,
      ul.tab-nav.inverted > li.current_ancestor > a:active {
        color: var(--nav-tab-item-hover-text-color);
        background: inherit; }
      ul.tabs.inverted > li.disabled > a, ul.tabs.inverted > li.disabled > a:visited, ul.tabs.inverted > li.disabled > *,
      ul.tab-nav.inverted > li.disabled > a,
      ul.tab-nav.inverted > li.disabled > a:visited,
      ul.tab-nav.inverted > li.disabled > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
      ul.tabs.inverted > li.disabled > a:hover, ul.tabs.inverted > li.disabled > a:focus, ul.tabs.inverted > li.disabled > a:active,
      ul.tab-nav.inverted > li.disabled > a:hover,
      ul.tab-nav.inverted > li.disabled > a:focus,
      ul.tab-nav.inverted > li.disabled > a:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
  ul.tabs > li.current > *::after,
  ul.tab-nav > li.current > *::after {
    background: var(--nav-tab-item-current-border-color); }
  ul.tabs.inverted > li.current > *::after,
  ul.tab-nav.inverted > li.current > *::after {
    background: var(--nav-tab-item-current-border-color); }
  ul.tabs.transparent,
  ul.tab-nav.transparent {
    background: transparent; }

@media (max-width: 600px) {
  ul.tab-nav, ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.tab-nav.mobile-scrollable, ul.tabs.mobile-scrollable {
      display: box;
      overflow-x: auto;
      inline-size: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

@media (min-width: 601px) and (max-width: 1280px) {
  ul.tab-nav, ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.tab-nav.tablet-scrollable, ul.tabs.tablet-scrollable {
      display: box;
      overflow-x: auto;
      inline-size: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

/**
 * Includes all block styling
 */
/**
 * tab components that provides a tab feature
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
ul.block-nav {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: var(--sizing-space-small) 0;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  ul.block-nav > li {
    display: block;
    font: var(--typo-label-medium);
    margin-inline-end: 1px; }
    ul.block-nav > li:last-child {
      margin-inline-end: 0; }
    ul.block-nav > li > a, ul.block-nav > li > span {
      display: block;
      padding: calc(var(--sizing-space-large) - var(--sizing-space-small)) var(--sizing-space-large);
      text-align: center;
      text-decoration: none;
      word-wrap: break-word;
      outline: 0;
      white-space: nowrap; }
    ul.block-nav > li.disabled > span {
      cursor: not-allowed;
      user-select: none; }
    ul.block-nav > li.label > span {
      font: var(--typo-label-small); }
  ul.block-nav > li {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    background: inherit; }
    ul.block-nav > li > a, ul.block-nav > li > a:visited, ul.block-nav > li > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
      background: inherit; }
    ul.block-nav > li > a:hover, ul.block-nav > li > a:focus, ul.block-nav > li > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
      background: var(--color-primary); }
    ul.block-nav > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    ul.block-nav > li.subdued > a, ul.block-nav > li.subdued > a:visited, ul.block-nav > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    ul.block-nav > li.subdued > a:hover, ul.block-nav > li.subdued > a:focus, ul.block-nav > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }
    ul.block-nav > li.alert > a, ul.block-nav > li.alert > a:visited, ul.block-nav > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    ul.block-nav > li.alert > a:hover, ul.block-nav > li.alert > a:focus, ul.block-nav > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    ul.block-nav > li.current > a, ul.block-nav > li.current > a:visited, ul.block-nav > li.current > * {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
      background: var(--color-primary); }
    ul.block-nav > li.current > a:hover, ul.block-nav > li.current > a:focus, ul.block-nav > li.current > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
      background: var(--color-primary); }
    ul.block-nav > li.current_ancestor > a, ul.block-nav > li.current_ancestor > a:visited, ul.block-nav > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.block-nav > li.current_ancestor > a:hover, ul.block-nav > li.current_ancestor > a:focus, ul.block-nav > li.current_ancestor > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
      background: var(--color-primary); }
    ul.block-nav > li.disabled > a, ul.block-nav > li.disabled > a:visited, ul.block-nav > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    ul.block-nav > li.disabled > a:hover, ul.block-nav > li.disabled > a:focus, ul.block-nav > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  ul.block-nav.inverted {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }
    ul.block-nav.inverted > li {
      border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5));
      background: inherit; }
      ul.block-nav.inverted > li > a, ul.block-nav.inverted > li > a:visited, ul.block-nav.inverted > li > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
        background: inherit; }
      ul.block-nav.inverted > li > a:hover, ul.block-nav.inverted > li > a:focus, ul.block-nav.inverted > li > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
        background: var(--color-primary); }
      ul.block-nav.inverted > li.label > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      ul.block-nav.inverted > li.subdued > a, ul.block-nav.inverted > li.subdued > a:visited, ul.block-nav.inverted > li.subdued > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }
      ul.block-nav.inverted > li.subdued > a:hover, ul.block-nav.inverted > li.subdued > a:focus, ul.block-nav.inverted > li.subdued > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }
      ul.block-nav.inverted > li.alert > a, ul.block-nav.inverted > li.alert > a:visited, ul.block-nav.inverted > li.alert > * {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
      ul.block-nav.inverted > li.alert > a:hover, ul.block-nav.inverted > li.alert > a:focus, ul.block-nav.inverted > li.alert > a:active {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
      ul.block-nav.inverted > li.current > a, ul.block-nav.inverted > li.current > a:visited, ul.block-nav.inverted > li.current > * {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
        background: var(--color-primary); }
      ul.block-nav.inverted > li.current > a:hover, ul.block-nav.inverted > li.current > a:focus, ul.block-nav.inverted > li.current > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
        background: var(--color-primary); }
      ul.block-nav.inverted > li.current_ancestor > a, ul.block-nav.inverted > li.current_ancestor > a:visited, ul.block-nav.inverted > li.current_ancestor > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.block-nav.inverted > li.current_ancestor > a:hover, ul.block-nav.inverted > li.current_ancestor > a:focus, ul.block-nav.inverted > li.current_ancestor > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
        background: var(--color-primary); }
      ul.block-nav.inverted > li.disabled > a, ul.block-nav.inverted > li.disabled > a:visited, ul.block-nav.inverted > li.disabled > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
      ul.block-nav.inverted > li.disabled > a:hover, ul.block-nav.inverted > li.disabled > a:focus, ul.block-nav.inverted > li.disabled > a:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
  ul.block-nav.transparent {
    background: transparent; }

@media (max-width: 600px) {
  ul.block-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.block-nav.mobile-scrollable {
      display: box;
      overflow-x: auto;
      inline-size: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

@media (min-width: 601px) and (max-width: 1280px) {
  ul.block-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.block-nav.tablet-scrollable {
      display: box;
      overflow-x: auto;
      inline-size: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

/**
 * Includes all pills styling
 */
/**
 * Component that provides a pills nav feature.
 */
ul.pills-nav {
  --nav-pills-direction: column;
  --nav-pills-align-items: center;
  --nav-pills-font: var(--typo-label-medium);
  --nav-pills-padding-h: 0;
  --nav-pills-padding-v: var(--sizing-space-small);
  --nav-pills-item-padding-h: var(--sizing-space-huge);
  --nav-pills-item-padding-v: var(--sizing-space-large);
  --nav-pills-item-spacing: 1px;
  --nav-pills-item-radius: 0;
  --nav-pills-item-text-alignment: center;
  --nav-pills-item-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --nav-pills-item-current-text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top));
  --nav-pills-item-current-bg-color: var(--color-primary);
  --nav-pills-item-hover-text-color: var(--nav-pills-item-current-text-color);
  --nav-pills-item-hover-bg-color: var(--nav-pills-item-current-bg-color);
  display: flex;
  align-content: center;
  align-items: var(--nav-pills-align-items);
  flex-wrap: wrap;
  flex-direction: var(--nav-pills-direction);
  padding: var(--nav-pills-padding-v) var(--nav-pills-padding-h);
  gap: var(--nav-pills-item-spacing);
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: inherit; }
  ul.pills-nav.inverted {
    --nav-pills-item-text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
  ul.pills-nav, ul.pills-nav ul {
    padding: 0;
    margin: 0;
    list-style: none; }
  ul.pills-nav li {
    margin: 0;
    padding: 0; }
  ul.pills-nav > li {
    display: block;
    font: var(--nav-pills-font);
    width: var(--nav-pills-item-width); }
    ul.pills-nav > li > a, ul.pills-nav > li > span {
      display: block;
      padding: var(--nav-pills-item-padding-v) var(--nav-pills-item-padding-h);
      border-radius: var(--nav-pills-item-radius);
      text-align: var(--nav-pills-item-text-alignment);
      text-decoration: none;
      word-wrap: break-word;
      outline: 0;
      white-space: nowrap; }
    ul.pills-nav > li.disabled > span {
      cursor: not-allowed;
      user-select: none; }
    ul.pills-nav > li.label > span {
      font: var(--typo-label-small); }
  ul.pills-nav > li {
    border-color: inherit;
    background: inherit; }
    ul.pills-nav > li > a, ul.pills-nav > li > a:visited, ul.pills-nav > li > span {
      color: var(--nav-pills-item-text-color);
      background: inherit; }
    ul.pills-nav > li > a:hover, ul.pills-nav > li > a:focus, ul.pills-nav > li > a:active {
      color: var(--nav-pills-item-hover-text-color);
      background: var(--nav-pills-item-hover-bg-color); }
    ul.pills-nav > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    ul.pills-nav > li.subdued > a, ul.pills-nav > li.subdued > a:visited, ul.pills-nav > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    ul.pills-nav > li.subdued > a:hover, ul.pills-nav > li.subdued > a:focus, ul.pills-nav > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    ul.pills-nav > li.alert > a, ul.pills-nav > li.alert > a:visited, ul.pills-nav > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    ul.pills-nav > li.alert > a:hover, ul.pills-nav > li.alert > a:focus, ul.pills-nav > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    ul.pills-nav > li.current > a, ul.pills-nav > li.current > a:visited, ul.pills-nav > li.current > * {
      color: var(--nav-pills-item-current-text-color);
      background: var(--nav-pills-item-current-bg-color); }
    ul.pills-nav > li.current > a:hover, ul.pills-nav > li.current > a:focus, ul.pills-nav > li.current > a:active {
      color: var(--nav-pills-item-hover-text-color);
      background: var(--nav-pills-item-hover-bg-color); }
    ul.pills-nav > li.current_ancestor > a, ul.pills-nav > li.current_ancestor > a:visited, ul.pills-nav > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    ul.pills-nav > li.current_ancestor > a:hover, ul.pills-nav > li.current_ancestor > a:focus, ul.pills-nav > li.current_ancestor > a:active {
      color: var(--nav-pills-item-hover-text-color);
      background: var(--nav-pills-item-hover-bg-color); }
    ul.pills-nav > li.disabled > a, ul.pills-nav > li.disabled > a:visited, ul.pills-nav > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    ul.pills-nav > li.disabled > a:hover, ul.pills-nav > li.disabled > a:focus, ul.pills-nav > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  ul.pills-nav.inverted {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    border-color: inherit; }
    ul.pills-nav.inverted > li {
      border-color: inherit;
      background: inherit; }
      ul.pills-nav.inverted > li > a, ul.pills-nav.inverted > li > a:visited, ul.pills-nav.inverted > li > span {
        color: var(--nav-pills-item-text-color);
        background: inherit; }
      ul.pills-nav.inverted > li > a:hover, ul.pills-nav.inverted > li > a:focus, ul.pills-nav.inverted > li > a:active {
        color: var(--nav-pills-item-hover-text-color);
        background: var(--nav-pills-item-hover-bg-color); }
      ul.pills-nav.inverted > li.label > span {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      ul.pills-nav.inverted > li.subdued > a, ul.pills-nav.inverted > li.subdued > a:visited, ul.pills-nav.inverted > li.subdued > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }
      ul.pills-nav.inverted > li.subdued > a:hover, ul.pills-nav.inverted > li.subdued > a:focus, ul.pills-nav.inverted > li.subdued > a:active {
        color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
      ul.pills-nav.inverted > li.alert > a, ul.pills-nav.inverted > li.alert > a:visited, ul.pills-nav.inverted > li.alert > * {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
      ul.pills-nav.inverted > li.alert > a:hover, ul.pills-nav.inverted > li.alert > a:focus, ul.pills-nav.inverted > li.alert > a:active {
        color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
      ul.pills-nav.inverted > li.current > a, ul.pills-nav.inverted > li.current > a:visited, ul.pills-nav.inverted > li.current > * {
        color: var(--nav-pills-item-current-text-color);
        background: var(--nav-pills-item-current-bg-color); }
      ul.pills-nav.inverted > li.current > a:hover, ul.pills-nav.inverted > li.current > a:focus, ul.pills-nav.inverted > li.current > a:active {
        color: var(--nav-pills-item-hover-text-color);
        background: var(--nav-pills-item-hover-bg-color); }
      ul.pills-nav.inverted > li.current_ancestor > a, ul.pills-nav.inverted > li.current_ancestor > a:visited, ul.pills-nav.inverted > li.current_ancestor > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5));
        background: inherit; }
      ul.pills-nav.inverted > li.current_ancestor > a:hover, ul.pills-nav.inverted > li.current_ancestor > a:focus, ul.pills-nav.inverted > li.current_ancestor > a:active {
        color: var(--nav-pills-item-hover-text-color);
        background: var(--nav-pills-item-hover-bg-color); }
      ul.pills-nav.inverted > li.disabled > a, ul.pills-nav.inverted > li.disabled > a:visited, ul.pills-nav.inverted > li.disabled > * {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
      ul.pills-nav.inverted > li.disabled > a:hover, ul.pills-nav.inverted > li.disabled > a:focus, ul.pills-nav.inverted > li.disabled > a:active {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
        background: inherit; }
  ul.pills-nav.transparent {
    background: transparent; }

@media (max-width: 600px) {
  ul.block-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.block-nav.mobile-scrollable {
      display: box;
      overflow-x: auto;
      width: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

@media (min-width: 601px) and (max-width: 1280px) {
  ul.block-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    ul.block-nav.tablet-scrollable {
      display: box;
      overflow-x: auto;
      width: 100%;
      flex-wrap: nowrap;
      white-space: nowrap; } }

/**
 * Includes all notice styling
 */
/**
 * notice component provides a simple way to alert the user with a message
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.notice {
  display: block;
  padding: var(--sizing-space-large);
  border: 1px solid transparent;
  border-radius: var(--sizing-space-tiny);
  margin-block-end: var(--sizing-space-medium);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .notice:last-child {
    margin-block-end: 0; }
  .notice.inverted {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
  .notice h1, .notice h2, .notice h3, .notice h4, .notice h5, .notice h6 {
    color: inherit; }
  .notice ul {
    margin: 0; }
  .notice.standard {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .notice.standard.inverted {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
  .notice.primary {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5));
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    .notice.primary.inverted {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
      background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }
  .notice.secondary {
    color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium));
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high5));
    border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }
    .notice.secondary.inverted {
      color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_medium));
      background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high2)); }
  .notice.action {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
    background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5));
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    .notice.action.inverted {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
      background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }
  .notice.alert {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
    background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5));
    border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    .notice.alert.inverted {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium));
      background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }
  .notice.warning {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
    background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5));
    border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }
    .notice.warning.inverted {
      color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
      background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high2)); }
  .notice.success {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
    background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5));
    border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }
    .notice.success.inverted {
      color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
      background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high2)); }
  .notice.admin {
    color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium));
    background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high5));
    border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }
    .notice.admin.inverted {
      color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_medium));
      background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high5));
      border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high2)); }

/**
 * Includes all components
 */
/**
 * quote
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
blockquote, .quote {
  display: block;
  border-inline-start: var(--sizing-space-tiny) solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  padding: 0 var(--sizing-space-large);
  margin: var(--sizing-space-large);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }
  blockquote.inverted, .quote.inverted {
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

/**
 * Includes all table components
 */
/**
 * table/data component provides a way to display rows of N columns of data.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
table.table {
  margin: 0;
  padding: 0;
  inline-size: 100%;
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  table.table th {
    font: var(--typo-label-tiny);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
    text-transform: uppercase;
    white-space: nowrap; }
  table.table td {
    font: var(--typo-label-small);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
  table.table td, table.table th {
    padding: var(--sizing-space-large) var(--sizing-space-large);
    text-align: start;
    word-break: break-all;
    word-wrap: break-word; }
    table.table td.icon, table.table th.icon {
      font-size: var(--sizing-text-huge);
      inline-size: 1rem; }
    table.table td.block, table.table th.block {
      padding: 0; }
    table.table td.actions, table.table th.actions {
      padding: 0 var(--sizing-space-large);
      text-align: end; }
    table.table td.center, table.table th.center {
      text-align: center; }
    table.table td.start, table.table th.start {
      text-align: start; }
    table.table td.end, table.table th.end {
      text-align: end; }
    table.table td.left, table.table th.left {
      text-align: start; }
    table.table td.right, table.table th.right {
      text-align: end; }
  table.table.rows tbody tr {
    border-block-start: 1px solid transparent; }
  table.table.columns td, table.table.columns th {
    border-inline-end: 1px solid transparent; }
    table.table.columns td:last-child, table.table.columns th:last-child {
      border-inline-end: 0; }
  table.table.hover tbody tr:hover .actions {
    opacity: 1; }
  table.table th {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  table.table td {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
  table.table.hover > tbody > tr:hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  table.table.rows tbody tr {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  table.table.columns td, table.table.columns th {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  table.table.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    table.table.inverted th {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    table.table.inverted td {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
    table.table.inverted.hover > tbody > tr:hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    table.table.inverted.rows tbody tr {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    table.table.inverted.columns td, table.table.inverted.columns th {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
  table.table.transparent {
    background: transparent; }

table.table td, table.table th {
  box-sizing: border-box; }
  table.table td.size-tiny, table.table th.size-tiny {
    inline-size: 5rem; }
  table.table td.size-small, table.table th.size-small {
    inline-size: 10rem; }
  table.table td.size-medium, table.table th.size-medium {
    inline-size: 15rem; }
  table.table td.size-large, table.table th.size-large {
    inline-size: 25rem; }
  table.table td.size-huge, table.table th.size-huge {
    inline-size: 40rem; }

@media (max-width: 600px) {
  .table-container {
    inline-size: 100%;
    overflow-x: auto; }
    .table-container > table.table {
      inline-size: max-content; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .table-container {
    inline-size: 100%;
    overflow-x: auto; }
    .table-container > table.table {
      inline-size: max-content; } }

/**
 * Includes all components
 */
/**
 * root html design
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * display design
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
html {
  --typo-root-font-family: Noto Sans, sans-serif;
  --typo-root-font-size: 16px;
  --typo-root-line-height: 1.5em;
  --typo-root-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  font-family: var(--typo-root-font-family);
  font-size: var(--typo-root-font-size);
  line-height: var(--typo-root-line-height);
  color: var(--typo-root-color); }

/**
 * Core component to handle the display of text using title, paragraph or labels.
 */
p.tiny, .paragraph.tiny, .text.tiny {
  --text-font: var(--typo-text-tiny);
  font: var(--text-font); }

p.small, .paragraph.small, .text.small {
  --text-font: var(--typo-text-small);
  font: var(--text-font); }

p.medium, .paragraph.medium, .text.medium {
  --text-font: var(--typo-text-medium);
  font: var(--text-font); }

p.large, .paragraph.large, .text.large {
  --text-font: var(--typo-text-large);
  font: var(--text-font); }

p.huge, .paragraph.huge, .text.huge {
  --text-font: var(--typo-text-huge);
  font: var(--text-font); }

p.sized, .paragraph.sized, .text.sized {
  --text-font: var(--typo-text-medium);
  font: var(--text-font); }

p, .paragraph {
  margin: 0;
  margin-block-end: var(--sizing-space-medium); }
  p:last-child, .paragraph:last-child {
    margin-block-end: 0; }

.label.tiny {
  --text-font: var(--typo-label-tiny);
  font: var(--text-font); }

.label.small {
  --text-font: var(--typo-label-small);
  font: var(--text-font); }

.label.medium {
  --text-font: var(--typo-label-medium);
  font: var(--text-font); }

.label.large {
  --text-font: var(--typo-label-large);
  font: var(--text-font); }

.label.huge {
  --text-font: var(--typo-label-huge);
  font: var(--text-font); }

.label.sized {
  --text-font: var(--typo-text-medium);
  font: var(--text-font); }

h1, .title1 {
  --text-font: var(--typo-title-huge);
  font: var(--text-font); }

h2, .title2 {
  --text-font: var(--typo-title-large);
  font: var(--text-font); }

h3, .title3 {
  --text-font: var(--typo-title-medium);
  font: var(--text-font); }

h4, .title4 {
  --text-font: var(--typo-title-small);
  font: var(--text-font); }

h5, .title5 {
  --text-font: var(--typo-title-tiny);
  font: var(--text-font); }

h6, .title6 {
  --text-font: var(--typo-text-large);
  font: var(--text-font); }

.display-large {
  --text-font: var(--typo-display-large);
  font: var(--text-font); }

.display-medium {
  --text-font: var(--typo-display-medium);
  font: var(--text-font); }

.display-small {
  --text-font: var(--typo-display-small);
  font: var(--text-font); }

p, .paragraph, .text, .label, h1, .title1, h2, .title2, h3, .title3, h4, .title4, h5, .title5, h6, .title6, .display-large, .display-medium, .display-small {
  color: var(--text-color); }
  p.inherit, .inherit.paragraph, .inherit.text, .inherit.label, h1.inherit, .inherit.title1, h2.inherit, .inherit.title2, h3.inherit, .inherit.title3, h4.inherit, .inherit.title4, h5.inherit, .inherit.title5, h6.inherit, .inherit.title6, .inherit.display-large, .inherit.display-medium, .inherit.display-small {
    --text-color: inherit; }
  p.standard, .standard.paragraph, .standard.text, .standard.label, h1.standard, .standard.title1, h2.standard, .standard.title2, h3.standard, .standard.title3, h4.standard, .standard.title4, h5.standard, .standard.title5, h6.standard, .standard.title6, .standard.display-large, .standard.display-medium, .standard.display-small {
    --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    p.standard.subdued, .standard.subdued.paragraph, .standard.subdued.text, .standard.subdued.label, h1.standard.subdued, .standard.subdued.title1, h2.standard.subdued, .standard.subdued.title2, h3.standard.subdued, .standard.subdued.title3, h4.standard.subdued, .standard.subdued.title4, h5.standard.subdued, .standard.subdued.title5, h6.standard.subdued, .standard.subdued.title6, .standard.subdued.display-large, .standard.subdued.display-medium, .standard.subdued.display-small {
      --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    p.standard.disabled, .standard.disabled.paragraph, .standard.disabled.text, .standard.disabled.label, h1.standard.disabled, .standard.disabled.title1, h2.standard.disabled, .standard.disabled.title2, h3.standard.disabled, .standard.disabled.title3, h4.standard.disabled, .standard.disabled.title4, h5.standard.disabled, .standard.disabled.title5, h6.standard.disabled, .standard.disabled.title6, .standard.disabled.display-large, .standard.disabled.display-medium, .standard.disabled.display-small {
      --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    p.standard.inverted, .standard.inverted.paragraph, .standard.inverted.text, .standard.inverted.label, h1.standard.inverted, .standard.inverted.title1, h2.standard.inverted, .standard.inverted.title2, h3.standard.inverted, .standard.inverted.title3, h4.standard.inverted, .standard.inverted.title4, h5.standard.inverted, .standard.inverted.title5, h6.standard.inverted, .standard.inverted.title6, .standard.inverted.display-large, .standard.inverted.display-medium, .standard.inverted.display-small {
      --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
    p.standard.inverted.subdued, .standard.inverted.subdued.paragraph, .standard.inverted.subdued.text, .standard.inverted.subdued.label, h1.standard.inverted.subdued, .standard.inverted.subdued.title1, h2.standard.inverted.subdued, .standard.inverted.subdued.title2, h3.standard.inverted.subdued, .standard.inverted.subdued.title3, h4.standard.inverted.subdued, .standard.inverted.subdued.title4, h5.standard.inverted.subdued, .standard.inverted.subdued.title5, h6.standard.inverted.subdued, .standard.inverted.subdued.title6, .standard.inverted.subdued.display-large, .standard.inverted.subdued.display-medium, .standard.inverted.subdued.display-small {
      --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    p.standard.inverted.disabled, .standard.inverted.disabled.paragraph, .standard.inverted.disabled.text, .standard.inverted.disabled.label, h1.standard.inverted.disabled, .standard.inverted.disabled.title1, h2.standard.inverted.disabled, .standard.inverted.disabled.title2, h3.standard.inverted.disabled, .standard.inverted.disabled.title3, h4.standard.inverted.disabled, .standard.inverted.disabled.title4, h5.standard.inverted.disabled, .standard.inverted.disabled.title5, h6.standard.inverted.disabled, .standard.inverted.disabled.title6, .standard.inverted.disabled.display-large, .standard.inverted.disabled.display-medium, .standard.inverted.disabled.display-small {
      --text-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  p.primary, .primary.paragraph, .primary.text, .primary.label, h1.primary, .primary.title1, h2.primary, .primary.title2, h3.primary, .primary.title3, h4.primary, .primary.title4, h5.primary, .primary.title5, h6.primary, .primary.title6, .primary.display-large, .primary.display-medium, .primary.display-small {
    --text-color: var(--color-primary); }
    p.primary.subdued, .primary.subdued.paragraph, .primary.subdued.text, .primary.subdued.label, h1.primary.subdued, .primary.subdued.title1, h2.primary.subdued, .primary.subdued.title2, h3.primary.subdued, .primary.subdued.title3, h4.primary.subdued, .primary.subdued.title4, h5.primary.subdued, .primary.subdued.title5, h6.primary.subdued, .primary.subdued.title6, .primary.subdued.display-large, .primary.subdued.display-medium, .primary.subdued.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    p.primary.disabled, .primary.disabled.paragraph, .primary.disabled.text, .primary.disabled.label, h1.primary.disabled, .primary.disabled.title1, h2.primary.disabled, .primary.disabled.title2, h3.primary.disabled, .primary.disabled.title3, h4.primary.disabled, .primary.disabled.title4, h5.primary.disabled, .primary.disabled.title5, h6.primary.disabled, .primary.disabled.title6, .primary.disabled.display-large, .primary.disabled.display-medium, .primary.disabled.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }
    p.primary.inverted, .primary.inverted.paragraph, .primary.inverted.text, .primary.inverted.label, h1.primary.inverted, .primary.inverted.title1, h2.primary.inverted, .primary.inverted.title2, h3.primary.inverted, .primary.inverted.title3, h4.primary.inverted, .primary.inverted.title4, h5.primary.inverted, .primary.inverted.title5, h6.primary.inverted, .primary.inverted.title6, .primary.inverted.display-large, .primary.inverted.display-medium, .primary.inverted.display-small {
      --text-color: var(--color-primary); }
    p.primary.inverted.subdued, .primary.inverted.subdued.paragraph, .primary.inverted.subdued.text, .primary.inverted.subdued.label, h1.primary.inverted.subdued, .primary.inverted.subdued.title1, h2.primary.inverted.subdued, .primary.inverted.subdued.title2, h3.primary.inverted.subdued, .primary.inverted.subdued.title3, h4.primary.inverted.subdued, .primary.inverted.subdued.title4, h5.primary.inverted.subdued, .primary.inverted.subdued.title5, h6.primary.inverted.subdued, .primary.inverted.subdued.title6, .primary.inverted.subdued.display-large, .primary.inverted.subdued.display-medium, .primary.inverted.subdued.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    p.primary.inverted.disabled, .primary.inverted.disabled.paragraph, .primary.inverted.disabled.text, .primary.inverted.disabled.label, h1.primary.inverted.disabled, .primary.inverted.disabled.title1, h2.primary.inverted.disabled, .primary.inverted.disabled.title2, h3.primary.inverted.disabled, .primary.inverted.disabled.title3, h4.primary.inverted.disabled, .primary.inverted.disabled.title4, h5.primary.inverted.disabled, .primary.inverted.disabled.title5, h6.primary.inverted.disabled, .primary.inverted.disabled.title6, .primary.inverted.disabled.display-large, .primary.inverted.disabled.display-medium, .primary.inverted.disabled.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }
  p.secondary, .secondary.paragraph, .secondary.text, .secondary.label, h1.secondary, .secondary.title1, h2.secondary, .secondary.title2, h3.secondary, .secondary.title3, h4.secondary, .secondary.title4, h5.secondary, .secondary.title5, h6.secondary, .secondary.title6, .secondary.display-large, .secondary.display-medium, .secondary.display-small {
    --text-color: var(--color-secondary); }
    p.secondary.subdued, .secondary.subdued.paragraph, .secondary.subdued.text, .secondary.subdued.label, h1.secondary.subdued, .secondary.subdued.title1, h2.secondary.subdued, .secondary.subdued.title2, h3.secondary.subdued, .secondary.subdued.title3, h4.secondary.subdued, .secondary.subdued.title4, h5.secondary.subdued, .secondary.subdued.title5, h6.secondary.subdued, .secondary.subdued.title6, .secondary.subdued.display-large, .secondary.subdued.display-medium, .secondary.subdued.display-small {
      --text-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }
    p.secondary.disabled, .secondary.disabled.paragraph, .secondary.disabled.text, .secondary.disabled.label, h1.secondary.disabled, .secondary.disabled.title1, h2.secondary.disabled, .secondary.disabled.title2, h3.secondary.disabled, .secondary.disabled.title3, h4.secondary.disabled, .secondary.disabled.title4, h5.secondary.disabled, .secondary.disabled.title5, h6.secondary.disabled, .secondary.disabled.title6, .secondary.disabled.display-large, .secondary.disabled.display-medium, .secondary.disabled.display-small {
      --text-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high3)); }
    p.secondary.inverted, .secondary.inverted.paragraph, .secondary.inverted.text, .secondary.inverted.label, h1.secondary.inverted, .secondary.inverted.title1, h2.secondary.inverted, .secondary.inverted.title2, h3.secondary.inverted, .secondary.inverted.title3, h4.secondary.inverted, .secondary.inverted.title4, h5.secondary.inverted, .secondary.inverted.title5, h6.secondary.inverted, .secondary.inverted.title6, .secondary.inverted.display-large, .secondary.inverted.display-medium, .secondary.inverted.display-small {
      --text-color: var(--color-secondary); }
    p.secondary.inverted.subdued, .secondary.inverted.subdued.paragraph, .secondary.inverted.subdued.text, .secondary.inverted.subdued.label, h1.secondary.inverted.subdued, .secondary.inverted.subdued.title1, h2.secondary.inverted.subdued, .secondary.inverted.subdued.title2, h3.secondary.inverted.subdued, .secondary.inverted.subdued.title3, h4.secondary.inverted.subdued, .secondary.inverted.subdued.title4, h5.secondary.inverted.subdued, .secondary.inverted.subdued.title5, h6.secondary.inverted.subdued, .secondary.inverted.subdued.title6, .secondary.inverted.subdued.display-large, .secondary.inverted.subdued.display-medium, .secondary.inverted.subdued.display-small {
      --text-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }
    p.secondary.inverted.disabled, .secondary.inverted.disabled.paragraph, .secondary.inverted.disabled.text, .secondary.inverted.disabled.label, h1.secondary.inverted.disabled, .secondary.inverted.disabled.title1, h2.secondary.inverted.disabled, .secondary.inverted.disabled.title2, h3.secondary.inverted.disabled, .secondary.inverted.disabled.title3, h4.secondary.inverted.disabled, .secondary.inverted.disabled.title4, h5.secondary.inverted.disabled, .secondary.inverted.disabled.title5, h6.secondary.inverted.disabled, .secondary.inverted.disabled.title6, .secondary.inverted.disabled.display-large, .secondary.inverted.disabled.display-medium, .secondary.inverted.disabled.display-small {
      --text-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high3)); }
  p.action, .action.paragraph, .action.text, .action.label, h1.action, .action.title1, h2.action, .action.title2, h3.action, .action.title3, h4.action, .action.title4, h5.action, .action.title5, h6.action, .action.title6, .action.display-large, .action.display-medium, .action.display-small {
    --text-color: var(--color-primary); }
    p.action.subdued, .action.subdued.paragraph, .action.subdued.text, .action.subdued.label, h1.action.subdued, .action.subdued.title1, h2.action.subdued, .action.subdued.title2, h3.action.subdued, .action.subdued.title3, h4.action.subdued, .action.subdued.title4, h5.action.subdued, .action.subdued.title5, h6.action.subdued, .action.subdued.title6, .action.subdued.display-large, .action.subdued.display-medium, .action.subdued.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    p.action.disabled, .action.disabled.paragraph, .action.disabled.text, .action.disabled.label, h1.action.disabled, .action.disabled.title1, h2.action.disabled, .action.disabled.title2, h3.action.disabled, .action.disabled.title3, h4.action.disabled, .action.disabled.title4, h5.action.disabled, .action.disabled.title5, h6.action.disabled, .action.disabled.title6, .action.disabled.display-large, .action.disabled.display-medium, .action.disabled.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }
    p.action.inverted, .action.inverted.paragraph, .action.inverted.text, .action.inverted.label, h1.action.inverted, .action.inverted.title1, h2.action.inverted, .action.inverted.title2, h3.action.inverted, .action.inverted.title3, h4.action.inverted, .action.inverted.title4, h5.action.inverted, .action.inverted.title5, h6.action.inverted, .action.inverted.title6, .action.inverted.display-large, .action.inverted.display-medium, .action.inverted.display-small {
      --text-color: var(--color-primary); }
    p.action.inverted.subdued, .action.inverted.subdued.paragraph, .action.inverted.subdued.text, .action.inverted.subdued.label, h1.action.inverted.subdued, .action.inverted.subdued.title1, h2.action.inverted.subdued, .action.inverted.subdued.title2, h3.action.inverted.subdued, .action.inverted.subdued.title3, h4.action.inverted.subdued, .action.inverted.subdued.title4, h5.action.inverted.subdued, .action.inverted.subdued.title5, h6.action.inverted.subdued, .action.inverted.subdued.title6, .action.inverted.subdued.display-large, .action.inverted.subdued.display-medium, .action.inverted.subdued.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }
    p.action.inverted.disabled, .action.inverted.disabled.paragraph, .action.inverted.disabled.text, .action.inverted.disabled.label, h1.action.inverted.disabled, .action.inverted.disabled.title1, h2.action.inverted.disabled, .action.inverted.disabled.title2, h3.action.inverted.disabled, .action.inverted.disabled.title3, h4.action.inverted.disabled, .action.inverted.disabled.title4, h5.action.inverted.disabled, .action.inverted.disabled.title5, h6.action.inverted.disabled, .action.inverted.disabled.title6, .action.inverted.disabled.display-large, .action.inverted.disabled.display-medium, .action.inverted.disabled.display-small {
      --text-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }
  p.alert, .alert.paragraph, .alert.text, .alert.label, h1.alert, .alert.title1, h2.alert, .alert.title2, h3.alert, .alert.title3, h4.alert, .alert.title4, h5.alert, .alert.title5, h6.alert, .alert.title6, .alert.display-large, .alert.display-medium, .alert.display-small {
    --text-color: var(--color-alert); }
    p.alert.subdued, .alert.subdued.paragraph, .alert.subdued.text, .alert.subdued.label, h1.alert.subdued, .alert.subdued.title1, h2.alert.subdued, .alert.subdued.title2, h3.alert.subdued, .alert.subdued.title3, h4.alert.subdued, .alert.subdued.title4, h5.alert.subdued, .alert.subdued.title5, h6.alert.subdued, .alert.subdued.title6, .alert.subdued.display-large, .alert.subdued.display-medium, .alert.subdued.display-small {
      --text-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    p.alert.disabled, .alert.disabled.paragraph, .alert.disabled.text, .alert.disabled.label, h1.alert.disabled, .alert.disabled.title1, h2.alert.disabled, .alert.disabled.title2, h3.alert.disabled, .alert.disabled.title3, h4.alert.disabled, .alert.disabled.title4, h5.alert.disabled, .alert.disabled.title5, h6.alert.disabled, .alert.disabled.title6, .alert.disabled.display-large, .alert.disabled.display-medium, .alert.disabled.display-small {
      --text-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }
    p.alert.inverted, .alert.inverted.paragraph, .alert.inverted.text, .alert.inverted.label, h1.alert.inverted, .alert.inverted.title1, h2.alert.inverted, .alert.inverted.title2, h3.alert.inverted, .alert.inverted.title3, h4.alert.inverted, .alert.inverted.title4, h5.alert.inverted, .alert.inverted.title5, h6.alert.inverted, .alert.inverted.title6, .alert.inverted.display-large, .alert.inverted.display-medium, .alert.inverted.display-small {
      --text-color: var(--color-alert); }
    p.alert.inverted.subdued, .alert.inverted.subdued.paragraph, .alert.inverted.subdued.text, .alert.inverted.subdued.label, h1.alert.inverted.subdued, .alert.inverted.subdued.title1, h2.alert.inverted.subdued, .alert.inverted.subdued.title2, h3.alert.inverted.subdued, .alert.inverted.subdued.title3, h4.alert.inverted.subdued, .alert.inverted.subdued.title4, h5.alert.inverted.subdued, .alert.inverted.subdued.title5, h6.alert.inverted.subdued, .alert.inverted.subdued.title6, .alert.inverted.subdued.display-large, .alert.inverted.subdued.display-medium, .alert.inverted.subdued.display-small {
      --text-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    p.alert.inverted.disabled, .alert.inverted.disabled.paragraph, .alert.inverted.disabled.text, .alert.inverted.disabled.label, h1.alert.inverted.disabled, .alert.inverted.disabled.title1, h2.alert.inverted.disabled, .alert.inverted.disabled.title2, h3.alert.inverted.disabled, .alert.inverted.disabled.title3, h4.alert.inverted.disabled, .alert.inverted.disabled.title4, h5.alert.inverted.disabled, .alert.inverted.disabled.title5, h6.alert.inverted.disabled, .alert.inverted.disabled.title6, .alert.inverted.disabled.display-large, .alert.inverted.disabled.display-medium, .alert.inverted.disabled.display-small {
      --text-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }
  p.warning, .warning.paragraph, .warning.text, .warning.label, h1.warning, .warning.title1, h2.warning, .warning.title2, h3.warning, .warning.title3, h4.warning, .warning.title4, h5.warning, .warning.title5, h6.warning, .warning.title6, .warning.display-large, .warning.display-medium, .warning.display-small {
    --text-color: var(--color-warning); }
    p.warning.subdued, .warning.subdued.paragraph, .warning.subdued.text, .warning.subdued.label, h1.warning.subdued, .warning.subdued.title1, h2.warning.subdued, .warning.subdued.title2, h3.warning.subdued, .warning.subdued.title3, h4.warning.subdued, .warning.subdued.title4, h5.warning.subdued, .warning.subdued.title5, h6.warning.subdued, .warning.subdued.title6, .warning.subdued.display-large, .warning.subdued.display-medium, .warning.subdued.display-small {
      --text-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }
    p.warning.disabled, .warning.disabled.paragraph, .warning.disabled.text, .warning.disabled.label, h1.warning.disabled, .warning.disabled.title1, h2.warning.disabled, .warning.disabled.title2, h3.warning.disabled, .warning.disabled.title3, h4.warning.disabled, .warning.disabled.title4, h5.warning.disabled, .warning.disabled.title5, h6.warning.disabled, .warning.disabled.title6, .warning.disabled.display-large, .warning.disabled.display-medium, .warning.disabled.display-small {
      --text-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }
    p.warning.inverted, .warning.inverted.paragraph, .warning.inverted.text, .warning.inverted.label, h1.warning.inverted, .warning.inverted.title1, h2.warning.inverted, .warning.inverted.title2, h3.warning.inverted, .warning.inverted.title3, h4.warning.inverted, .warning.inverted.title4, h5.warning.inverted, .warning.inverted.title5, h6.warning.inverted, .warning.inverted.title6, .warning.inverted.display-large, .warning.inverted.display-medium, .warning.inverted.display-small {
      --text-color: var(--color-warning); }
    p.warning.inverted.subdued, .warning.inverted.subdued.paragraph, .warning.inverted.subdued.text, .warning.inverted.subdued.label, h1.warning.inverted.subdued, .warning.inverted.subdued.title1, h2.warning.inverted.subdued, .warning.inverted.subdued.title2, h3.warning.inverted.subdued, .warning.inverted.subdued.title3, h4.warning.inverted.subdued, .warning.inverted.subdued.title4, h5.warning.inverted.subdued, .warning.inverted.subdued.title5, h6.warning.inverted.subdued, .warning.inverted.subdued.title6, .warning.inverted.subdued.display-large, .warning.inverted.subdued.display-medium, .warning.inverted.subdued.display-small {
      --text-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }
    p.warning.inverted.disabled, .warning.inverted.disabled.paragraph, .warning.inverted.disabled.text, .warning.inverted.disabled.label, h1.warning.inverted.disabled, .warning.inverted.disabled.title1, h2.warning.inverted.disabled, .warning.inverted.disabled.title2, h3.warning.inverted.disabled, .warning.inverted.disabled.title3, h4.warning.inverted.disabled, .warning.inverted.disabled.title4, h5.warning.inverted.disabled, .warning.inverted.disabled.title5, h6.warning.inverted.disabled, .warning.inverted.disabled.title6, .warning.inverted.disabled.display-large, .warning.inverted.disabled.display-medium, .warning.inverted.disabled.display-small {
      --text-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }
  p.success, .success.paragraph, .success.text, .success.label, h1.success, .success.title1, h2.success, .success.title2, h3.success, .success.title3, h4.success, .success.title4, h5.success, .success.title5, h6.success, .success.title6, .success.display-large, .success.display-medium, .success.display-small {
    --text-color: var(--color-success); }
    p.success.subdued, .success.subdued.paragraph, .success.subdued.text, .success.subdued.label, h1.success.subdued, .success.subdued.title1, h2.success.subdued, .success.subdued.title2, h3.success.subdued, .success.subdued.title3, h4.success.subdued, .success.subdued.title4, h5.success.subdued, .success.subdued.title5, h6.success.subdued, .success.subdued.title6, .success.subdued.display-large, .success.subdued.display-medium, .success.subdued.display-small {
      --text-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }
    p.success.disabled, .success.disabled.paragraph, .success.disabled.text, .success.disabled.label, h1.success.disabled, .success.disabled.title1, h2.success.disabled, .success.disabled.title2, h3.success.disabled, .success.disabled.title3, h4.success.disabled, .success.disabled.title4, h5.success.disabled, .success.disabled.title5, h6.success.disabled, .success.disabled.title6, .success.disabled.display-large, .success.disabled.display-medium, .success.disabled.display-small {
      --text-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }
    p.success.inverted, .success.inverted.paragraph, .success.inverted.text, .success.inverted.label, h1.success.inverted, .success.inverted.title1, h2.success.inverted, .success.inverted.title2, h3.success.inverted, .success.inverted.title3, h4.success.inverted, .success.inverted.title4, h5.success.inverted, .success.inverted.title5, h6.success.inverted, .success.inverted.title6, .success.inverted.display-large, .success.inverted.display-medium, .success.inverted.display-small {
      --text-color: var(--color-success); }
    p.success.inverted.subdued, .success.inverted.subdued.paragraph, .success.inverted.subdued.text, .success.inverted.subdued.label, h1.success.inverted.subdued, .success.inverted.subdued.title1, h2.success.inverted.subdued, .success.inverted.subdued.title2, h3.success.inverted.subdued, .success.inverted.subdued.title3, h4.success.inverted.subdued, .success.inverted.subdued.title4, h5.success.inverted.subdued, .success.inverted.subdued.title5, h6.success.inverted.subdued, .success.inverted.subdued.title6, .success.inverted.subdued.display-large, .success.inverted.subdued.display-medium, .success.inverted.subdued.display-small {
      --text-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }
    p.success.inverted.disabled, .success.inverted.disabled.paragraph, .success.inverted.disabled.text, .success.inverted.disabled.label, h1.success.inverted.disabled, .success.inverted.disabled.title1, h2.success.inverted.disabled, .success.inverted.disabled.title2, h3.success.inverted.disabled, .success.inverted.disabled.title3, h4.success.inverted.disabled, .success.inverted.disabled.title4, h5.success.inverted.disabled, .success.inverted.disabled.title5, h6.success.inverted.disabled, .success.inverted.disabled.title6, .success.inverted.disabled.display-large, .success.inverted.disabled.display-medium, .success.inverted.disabled.display-small {
      --text-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }
  p.admin, .admin.paragraph, .admin.text, .admin.label, h1.admin, .admin.title1, h2.admin, .admin.title2, h3.admin, .admin.title3, h4.admin, .admin.title4, h5.admin, .admin.title5, h6.admin, .admin.title6, .admin.display-large, .admin.display-medium, .admin.display-small {
    --text-color: var(--color-admin); }
    p.admin.subdued, .admin.subdued.paragraph, .admin.subdued.text, .admin.subdued.label, h1.admin.subdued, .admin.subdued.title1, h2.admin.subdued, .admin.subdued.title2, h3.admin.subdued, .admin.subdued.title3, h4.admin.subdued, .admin.subdued.title4, h5.admin.subdued, .admin.subdued.title5, h6.admin.subdued, .admin.subdued.title6, .admin.subdued.display-large, .admin.subdued.display-medium, .admin.subdued.display-small {
      --text-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }
    p.admin.disabled, .admin.disabled.paragraph, .admin.disabled.text, .admin.disabled.label, h1.admin.disabled, .admin.disabled.title1, h2.admin.disabled, .admin.disabled.title2, h3.admin.disabled, .admin.disabled.title3, h4.admin.disabled, .admin.disabled.title4, h5.admin.disabled, .admin.disabled.title5, h6.admin.disabled, .admin.disabled.title6, .admin.disabled.display-large, .admin.disabled.display-medium, .admin.disabled.display-small {
      --text-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high3)); }
    p.admin.inverted, .admin.inverted.paragraph, .admin.inverted.text, .admin.inverted.label, h1.admin.inverted, .admin.inverted.title1, h2.admin.inverted, .admin.inverted.title2, h3.admin.inverted, .admin.inverted.title3, h4.admin.inverted, .admin.inverted.title4, h5.admin.inverted, .admin.inverted.title5, h6.admin.inverted, .admin.inverted.title6, .admin.inverted.display-large, .admin.inverted.display-medium, .admin.inverted.display-small {
      --text-color: var(--color-admin); }
    p.admin.inverted.subdued, .admin.inverted.subdued.paragraph, .admin.inverted.subdued.text, .admin.inverted.subdued.label, h1.admin.inverted.subdued, .admin.inverted.subdued.title1, h2.admin.inverted.subdued, .admin.inverted.subdued.title2, h3.admin.inverted.subdued, .admin.inverted.subdued.title3, h4.admin.inverted.subdued, .admin.inverted.subdued.title4, h5.admin.inverted.subdued, .admin.inverted.subdued.title5, h6.admin.inverted.subdued, .admin.inverted.subdued.title6, .admin.inverted.subdued.display-large, .admin.inverted.subdued.display-medium, .admin.inverted.subdued.display-small {
      --text-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }
    p.admin.inverted.disabled, .admin.inverted.disabled.paragraph, .admin.inverted.disabled.text, .admin.inverted.disabled.label, h1.admin.inverted.disabled, .admin.inverted.disabled.title1, h2.admin.inverted.disabled, .admin.inverted.disabled.title2, h3.admin.inverted.disabled, .admin.inverted.disabled.title3, h4.admin.inverted.disabled, .admin.inverted.disabled.title4, h5.admin.inverted.disabled, .admin.inverted.disabled.title5, h6.admin.inverted.disabled, .admin.inverted.disabled.title6, .admin.inverted.disabled.display-large, .admin.inverted.disabled.display-medium, .admin.inverted.disabled.display-small {
      --text-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high3)); }
  p.bevel, .bevel.paragraph, .bevel.text, .bevel.label, h1.bevel, .bevel.title1, h2.bevel, .bevel.title2, h3.bevel, .bevel.title3, h4.bevel, .bevel.title4, h5.bevel, .bevel.title5, h6.bevel, .bevel.title6, .bevel.display-large, .bevel.display-medium, .bevel.display-small {
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); }
  p.shadow, .shadow.paragraph, .shadow.text, .shadow.label, h1.shadow, .shadow.title1, h2.shadow, .shadow.title2, h3.shadow, .shadow.title3, h4.shadow, .shadow.title4, h5.shadow, .shadow.title5, h6.shadow, .shadow.title6, .shadow.display-large, .shadow.display-medium, .shadow.display-small {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
  p.bold, .bold.paragraph, .bold.text, .bold.label, h1.bold, .bold.title1, h2.bold, .bold.title2, h3.bold, .bold.title3, h4.bold, .bold.title4, h5.bold, .bold.title5, h6.bold, .bold.title6, .bold.display-large, .bold.display-medium, .bold.display-small {
    font-weight: 700; }
  p.light, .light.paragraph, .light.text, .light.label, h1.light, .light.title1, h2.light, .light.title2, h3.light, .light.title3, h4.light, .light.title4, h5.light, .light.title5, h6.light, .light.title6, .light.display-large, .light.display-medium, .light.display-small {
    font-weight: 300; }
  p.breakable, .breakable.paragraph, .breakable.text, .breakable.label, h1.breakable, .breakable.title1, h2.breakable, .breakable.title2, h3.breakable, .breakable.title3, h4.breakable, .breakable.title4, h5.breakable, .breakable.title5, h6.breakable, .breakable.title6, .breakable.display-large, .breakable.display-medium, .breakable.display-small {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  p.ellipsable, .ellipsable.paragraph, .ellipsable.text, .ellipsable.label, h1.ellipsable, .ellipsable.title1, h2.ellipsable, .ellipsable.title2, h3.ellipsable, .ellipsable.title3, h4.ellipsable, .ellipsable.title4, h5.ellipsable, .ellipsable.title5, h6.ellipsable, .ellipsable.title6, .ellipsable.display-large, .ellipsable.display-medium, .ellipsable.display-small {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; }
  p.align-start, .align-start.paragraph, .align-start.text, .align-start.label, h1.align-start, .align-start.title1, h2.align-start, .align-start.title2, h3.align-start, .align-start.title3, h4.align-start, .align-start.title4, h5.align-start, .align-start.title5, h6.align-start, .align-start.title6, .align-start.display-large, .align-start.display-medium, .align-start.display-small {
    text-align: start; }
  p.align-center, .align-center.paragraph, .align-center.text, .align-center.label, h1.align-center, .align-center.title1, h2.align-center, .align-center.title2, h3.align-center, .align-center.title3, h4.align-center, .align-center.title4, h5.align-center, .align-center.title5, h6.align-center, .align-center.title6, .align-center.display-large, .align-center.display-medium, .align-center.display-small {
    text-align: center; }
  p.align-end, .align-end.paragraph, .align-end.text, .align-end.label, h1.align-end, .align-end.title1, h2.align-end, .align-end.title2, h3.align-end, .align-end.title3, h4.align-end, .align-end.title4, h5.align-end, .align-end.title5, h6.align-end, .align-end.title6, .align-end.display-large, .align-end.display-medium, .align-end.display-small {
    text-align: end; }
  p.justified, .justified.paragraph, .justified.text, .justified.label, h1.justified, .justified.title1, h2.justified, .justified.title2, h3.justified, .justified.title3, h4.justified, .justified.title4, h5.justified, .justified.title5, h6.justified, .justified.title6, .justified.display-large, .justified.display-medium, .justified.display-small, p.align-justify, .align-justify.paragraph, .align-justify.text, .align-justify.label, h1.align-justify, .align-justify.title1, h2.align-justify, .align-justify.title2, h3.align-justify, .align-justify.title3, h4.align-justify, .align-justify.title4, h5.align-justify, .align-justify.title5, h6.align-justify, .align-justify.title6, .align-justify.display-large, .align-justify.display-medium, .align-justify.display-small {
    text-align: justify; }
  p.align-left, .align-left.paragraph, .align-left.text, .align-left.label, h1.align-left, .align-left.title1, h2.align-left, .align-left.title2, h3.align-left, .align-left.title3, h4.align-left, .align-left.title4, h5.align-left, .align-left.title5, h6.align-left, .align-left.title6, .align-left.display-large, .align-left.display-medium, .align-left.display-small {
    text-align: start; }
  p.align-right, .align-right.paragraph, .align-right.text, .align-right.label, h1.align-right, .align-right.title1, h2.align-right, .align-right.title2, h3.align-right, .align-right.title3, h4.align-right, .align-right.title4, h5.align-right, .align-right.title5, h6.align-right, .align-right.title6, .align-right.display-large, .align-right.display-medium, .align-right.display-small {
    text-align: end; }
  p.line-single, .line-single.paragraph, .line-single.text, .line-single.label, h1.line-single, .line-single.title1, h2.line-single, .line-single.title2, h3.line-single, .line-single.title3, h4.line-single, .line-single.title4, h5.line-single, .line-single.title5, h6.line-single, .line-single.title6, .line-single.display-large, .line-single.display-medium, .line-single.display-small {
    line-height: 1em; }
  p.line-closed, .line-closed.paragraph, .line-closed.text, .line-closed.label, h1.line-closed, .line-closed.title1, h2.line-closed, .line-closed.title2, h3.line-closed, .line-closed.title3, h4.line-closed, .line-closed.title4, h5.line-closed, .line-closed.title5, h6.line-closed, .line-closed.title6, .line-closed.display-large, .line-closed.display-medium, .line-closed.display-small {
    line-height: 1.2em; }
  p.line-spaced, .line-spaced.paragraph, .line-spaced.text, .line-spaced.label, h1.line-spaced, .line-spaced.title1, h2.line-spaced, .line-spaced.title2, h3.line-spaced, .line-spaced.title3, h4.line-spaced, .line-spaced.title4, h5.line-spaced, .line-spaced.title5, h6.line-spaced, .line-spaced.title6, .line-spaced.display-large, .line-spaced.display-medium, .line-spaced.display-small {
    line-height: 1.5em; }
  p.line-spread, .line-spread.paragraph, .line-spread.text, .line-spread.label, h1.line-spread, .line-spread.title1, h2.line-spread, .line-spread.title2, h3.line-spread, .line-spread.title3, h4.line-spread, .line-spread.title4, h5.line-spread, .line-spread.title5, h6.line-spread, .line-spread.title6, .line-spread.display-large, .line-spread.display-medium, .line-spread.display-small {
    line-height: 2em; }
  p.max-tiny, .max-tiny.paragraph, .max-tiny.text, .max-tiny.label, h1.max-tiny, .max-tiny.title1, h2.max-tiny, .max-tiny.title2, h3.max-tiny, .max-tiny.title3, h4.max-tiny, .max-tiny.title4, h5.max-tiny, .max-tiny.title5, h6.max-tiny, .max-tiny.title6, .max-tiny.display-large, .max-tiny.display-medium, .max-tiny.display-small {
    max-inline-size: 21.6em; }
  p.max-small, .max-small.paragraph, .max-small.text, .max-small.label, h1.max-small, .max-small.title1, h2.max-small, .max-small.title2, h3.max-small, .max-small.title3, h4.max-small, .max-small.title4, h5.max-small, .max-small.title5, h6.max-small, .max-small.title6, .max-small.display-large, .max-small.display-medium, .max-small.display-small {
    max-inline-size: 24em; }
  p.max-medium, .max-medium.paragraph, .max-medium.text, .max-medium.label, h1.max-medium, .max-medium.title1, h2.max-medium, .max-medium.title2, h3.max-medium, .max-medium.title3, h4.max-medium, .max-medium.title4, h5.max-medium, .max-medium.title5, h6.max-medium, .max-medium.title6, .max-medium.display-large, .max-medium.display-medium, .max-medium.display-small {
    max-inline-size: 28.8em; }
  p.max-large, .max-large.paragraph, .max-large.text, .max-large.label, h1.max-large, .max-large.title1, h2.max-large, .max-large.title2, h3.max-large, .max-large.title3, h4.max-large, .max-large.title4, h5.max-large, .max-large.title5, h6.max-large, .max-large.title6, .max-large.display-large, .max-large.display-medium, .max-large.display-small {
    max-inline-size: 38.4em; }
  p.max-huge, .max-huge.paragraph, .max-huge.text, .max-huge.label, h1.max-huge, .max-huge.title1, h2.max-huge, .max-huge.title2, h3.max-huge, .max-huge.title3, h4.max-huge, .max-huge.title4, h5.max-huge, .max-huge.title5, h6.max-huge, .max-huge.title6, .max-huge.display-large, .max-huge.display-medium, .max-huge.display-small {
    max-inline-size: 54em; }

h1, .title1, h2, .title2, h3, .title3, h4, .title4, h5, .title5, h6, .title6 {
  margin-block: var(--sizing-space-small) var(--sizing-space-medium);
  margin-inline: 0; }
  h1:first-child, .title1:first-child, h2:first-child, .title2:first-child, h3:first-child, .title3:first-child, h4:first-child, .title4:first-child, h5:first-child, .title5:first-child, h6:first-child, .title6:first-child {
    margin-block-start: 0; }
  h1:last-child, .title1:last-child, h2:last-child, .title2:last-child, h3:last-child, .title3:last-child, h4:last-child, .title4:last-child, h5:last-child, .title5:last-child, h6:last-child, .title6:last-child {
    margin-block-end: 0; }
  h1 > i + span, .title1 > i + span, h2 > i + span, .title2 > i + span, h3 > i + span, .title3 > i + span, h4 > i + span, .title4 > i + span, h5 > i + span, .title5 > i + span, h6 > i + span, .title6 > i + span {
    margin-inline-start: 0.25em; }
  h1 > span + i, .title1 > span + i, h2 > span + i, .title2 > span + i, h3 > span + i, .title3 > span + i, h4 > span + i, .title4 > span + i, h5 > span + i, .title5 > span + i, h6 > span + i, .title6 > span + i {
    margin-inline-end: 0.25em; }

/**
 * Includes all notice styling
 */
.progressbar {
  background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4));
  border-radius: 10px;
  margin: var(--sizing-space-medium) 0; }
  .progressbar div {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
    height: var(--sizing-space-medium);
    width: 75%;
    display: block;
    border-radius: 10px;
    transition: width 1s; }

/**
 * Includes all notice styling
 */
.gauge {
  border-radius: 0.75rem;
  overflow: hidden; }
  .gauge.tiny > div {
    height: var(--sizing-space-tiny); }
  .gauge.small > div {
    height: var(--sizing-space-small); }
  .gauge.medium > div {
    height: var(--sizing-space-medium); }
  .gauge.large > div {
    height: var(--sizing-space-large); }
  .gauge div {
    display: block;
    transition: width 1s; }
  .gauge.standard {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .gauge.standard > div {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .gauge.standard.inverted {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
      .gauge.standard.inverted > div {
        background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
  .gauge.primary {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }
    .gauge.primary > div {
      background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .gauge.primary.inverted {
      background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }
      .gauge.primary.inverted > div {
        background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
  .gauge.secondary {
    background-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high4)); }
    .gauge.secondary > div {
      background-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }
    .gauge.secondary.inverted {
      background-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high4)); }
      .gauge.secondary.inverted > div {
        background-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_medium)); }
  .gauge.action {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }
    .gauge.action > div {
      background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .gauge.action.inverted {
      background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }
      .gauge.action.inverted > div {
        background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
  .gauge.alert {
    background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high4)); }
    .gauge.alert > div {
      background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .gauge.alert.inverted {
      background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high4)); }
      .gauge.alert.inverted > div {
        background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }
  .gauge.warning {
    background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high4)); }
    .gauge.warning > div {
      background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
    .gauge.warning.inverted {
      background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high4)); }
      .gauge.warning.inverted > div {
        background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium)); }
  .gauge.success {
    background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high4)); }
    .gauge.success > div {
      background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .gauge.success.inverted {
      background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high4)); }
      .gauge.success.inverted > div {
        background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium)); }
  .gauge.admin {
    background-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high4)); }
    .gauge.admin > div {
      background-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
    .gauge.admin.inverted {
      background-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high4)); }
      .gauge.admin.inverted > div {
        background-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_medium)); }

/**
 * Includes all switch components
 */
.switch > label {
  position: relative;
  display: inline-block;
  inline-size: 45px;
  block-size: 26px;
  margin-block-start: 6px; }
  .switch > label input {
    display: none; }
    .switch > label input:checked + .slider {
      background-color: var(--switch-on-background-color); }
    .switch > label input:checked:disabled + .slider {
      background-color: var(--switch-on-disabled-background-color); }
    .switch > label input + .slider {
      background-color: var(--switch-off-background-color); }
    .switch > label input:disabled + .slider {
      cursor: not-allowed;
      background-color: var(--switch-off-disabled-background-color); }
    .switch > label input:checked + .slider:before {
      transform: translateX(17px); }
      [dir="rtl"] .switch > label input:checked + .slider:before {
        transform: translateX(-17px); }

.switch.disabled {
  opacity: 0.3; }
  .switch.disabled .slider {
    cursor: not-allowed; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--switch-off-background-color); }
  .slider.round {
    border-radius: 34px; }
    .slider.round:before {
      border-radius: 50%; }
  .slider:before {
    position: absolute;
    content: "";
    inline-size: 20px;
    block-size: 20px;
    inset-inline-start: 4px;
    inset-block-end: 3px;
    background-color: var(--switch-round-color);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); }

html {
  --switch-off-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --switch-off-disabled-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --switch-on-background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --switch-on-disabled-background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5));
  --switch-round-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

.tippy-tooltip.toornament-theme {
  text-align: start; }

/**
 * Includes all domain elements
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * domain component styling API documentation
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * API definition
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.api.definition {
  display: flex;
  flex: none;
  width: 100%;
  margin: 0;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4));
  font: var(--typo-text-small);
  padding: var(--sizing-space-small) 0; }
  .api.definition > .field {
    flex: 1; }
    .api.definition > .field > .name {
      display: block;
      font-style: normal;
      word-wrap: break-word; }
    .api.definition > .field > .type {
      display: block;
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
      font: var(--typo-text-tiny); }
  .api.definition > .description {
    flex: 3;
    margin-inline-start: var(--sizing-space-small); }
    .api.definition > .description p.allowed {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }
    .api.definition > .description p.default {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }
    .api.definition > .description p.example {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }
    .api.definition > .description p.required {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .api.definition > .description ul, .api.definition > .description p {
      margin-block-end: var(--sizing-space-small); }
    .api.definition > .description button.toggle {
      float: right; }
      [dir="rtl"] .api.definition > .description button.toggle {
        float: left; }

.api.definition + .embed {
  display: none;
  padding-inline-start: var(--sizing-space-large);
  border-inline-start: 1px dashed hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  margin-inline-start: var(--sizing-space-small);
  margin-block-end: var(--sizing-space-large); }

ul.api li {
  display: block; }

/**
 * Includes all bracket styling.
 */
/**
 * Bracket standard format styling.
 */
.bracket.format-standard {
  position: relative; }
  .bracket.format-standard .bracket-nodes {
    position: absolute;
    z-index: 1; }
  .bracket.format-standard .bracket-links {
    position: absolute;
    z-index: 0; }
    [dir="rtl"] .bracket.format-standard .bracket-links {
      transform: scale(-1, 1); }
  .bracket.format-standard .node {
    display: grid;
    align-content: center;
    justify-content: stretch;
    box-sizing: border-box;
    width: var(--bracket-node-width);
    height: var(--bracket-node-height);
    border-width: var(--bracket-node-border-width);
    border-style: solid;
    border-color: var(--bracket-node-border-color);
    border-radius: var(--bracket-node-radius);
    background: var(--bracket-node-background);
    padding: var(--bracket-node-padding);
    overflow: hidden; }
    .bracket.format-standard .node.hover:hover {
      border-color: var(--bracket-node-hover-border-color);
      background: var(--bracket-node-hover-background); }
  .bracket.format-standard svg .link {
    stroke-linecap: square;
    stroke-linejoin: miter;
    shape-rendering: crispEdges; }
    .bracket.format-standard svg .link.winner {
      fill: none;
      stroke: var(--bracket-link-winner-color);
      stroke-width: var(--bracket-link-stroke-width); }
    .bracket.format-standard svg .link.loser {
      fill: none;
      stroke: var(--bracket-link-loser-color);
      stroke-width: var(--bracket-link-stroke-width); }
  .bracket.format-standard.inverted {
    --bracket-stroke-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

/**
 * Bracket container that is used to layout multiple brackets.
 */
.bracket-container.vertical {
  display: grid;
  grid-auto-flow: row;
  gap: var(--bracket-container-spacing); }

.bracket-container.horizontal {
  display: flex;
  flex-wrap: wrap; }
  .bracket-container.horizontal > * {
    margin-bottom: var(--bracket-container-spacing); }

.bracket-container .bracket-group {
  display: grid;
  grid-auto-flow: row;
  align-items: center;
  box-sizing: content-box;
  gap: var(--bracket-spacing); }

:root {
  --bracket-stroke-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --bracket-container-spacing: var(--sizing-space-huge);
  --bracket-spacing: var(--sizing-space-large);
  --bracket-node-width: 12rem;
  --bracket-node-height: 3.875rem;
  --bracket-node-radius: 0;
  --bracket-node-padding: 0;
  --bracket-node-border-width: 0;
  --bracket-node-border-color: var(--bracket-stroke-color, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)));
  --bracket-node-background: transparent;
  --bracket-node-hover-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --bracket-node-hover-background: transparent;
  --bracket-link-winner-color: var(--bracket-stroke-color, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)));
  --bracket-link-loser-color: var(--bracket-stroke-color, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)));
  --bracket-link-stroke-width: 62.5; }

/**
 * Extension to add custom colors based on a status of a match on bracket node.
 */
.bracket.format-standard .node.running {
  border-color: var(--bracket-node-status-running-border-color);
  background-color: var(--bracket-node-status-running-background-color); }

:root {
  --bracket-node-status-running-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --bracket-node-status-running-background-color: transparent; }

/**
 * Includes all circuit styling.
 */
/**
 * Circuit shown in the header format.
 * @note: This header assumes that it is inverted by default and does not provide a normal version.
 */
.circuit.format-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: var(--sizing-space-huge);
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }
  .circuit.format-header .image img {
    max-width: 128px;
    max-height: 128px; }
  .circuit.format-header .title {
    display: flex;
    align-items: center;
    padding: var(--sizing-space-medium);
    font: var(--typo-title-large);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  .circuit.format-header .secondary {
    padding: var(--sizing-space-small);
    font: var(--typo-text-medium);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    max-width: 50rem;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }

.concerto.block.wireframe {
  position: relative; }
  .concerto.block.wireframe:before {
    position: absolute;
    content: " ";
    inset: 0;
    border: 1px solid hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium));
    z-index: 1;
    pointer-events: none; }

/**
 * Competitor domain components
 */
/**
 * CSS component to display a competitor in a box format.
 */
.competitor.format-box {
  display: flex;
  flex-direction: column;
  justify-content: var(--competitor-box-v-alignment);
  align-items: var(--competitor-box-h-alignment);
  gap: var(--competitor-box-spacing);
  border: var(--competitor-box-border);
  border-radius: var(--competitor-box-radius);
  background: var(--competitor-box-background-color);
  padding: var(--competitor-box-padding);
  box-sizing: border-box;
  --competitor-box-border: var(--competitor-box-border-width) solid var(--competitor-box-border-color);
  --competitor-box-name-alignment: var(--competitor-box-h-alignment);
  --competitor-box-info-alignment: var(--competitor-box-h-alignment); }
  .competitor.format-box.transparent {
    background: none; }
  .competitor.format-box.expand {
    height: 100%;
    box-sizing: border-box; }
  .competitor.format-box .image {
    display: block;
    width: var(--competitor-box-icon-size); }
    .competitor.format-box .image > img {
      width: 100%;
      display: block; }
    .competitor.format-box .image > i {
      display: block; }
  .competitor.format-box > .identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--competitor-box-spacing); }
    .competitor.format-box > .identity > .name {
      flex: 1;
      font: var(--competitor-box-name-font);
      color: var(--competitor-box-name-color);
      text-align: var(--competitor-box-name-alignment);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
      .competitor.format-box > .identity > .name > .discipline {
        display: block;
        margin-block-start: var(--competitor-box-discipline-spacing);
        font: var(--competitor-box-discipline-font);
        color: var(--competitor-box-discipline-color); }
  .competitor.format-box > .info {
    display: block;
    font: var(--competitor-box-info-font);
    color: var(--competitor-box-info-color);
    text-align: var(--competitor-box-info-alignment);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  .competitor.format-box.hover:hover {
    cursor: pointer;
    border-color: var(--competitor-box-hover-border-color);
    background-color: var(--competitor-box-hover-background-color); }
  .competitor.format-box.disabled {
    opacity: var(--competitor-box-disabled-opacity); }

html {
  --competitor-box-padding: var(--sizing-space-medium);
  --competitor-box-h-alignment: center;
  --competitor-box-v-alignment: center;
  --competitor-box-border-width: 1px;
  --competitor-box-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --competitor-box-radius: var(--sizing-space-tiny);
  --competitor-box-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --competitor-box-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --competitor-box-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --competitor-box-disabled-opacity: 0.5;
  --competitor-box-spacing: var(--sizing-space-small);
  --competitor-box-icon-size: 4rem;
  --competitor-box-name-font: var(--typo-title-small);
  --competitor-box-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --competitor-box-discipline-spacing: var(--sizing-space-tiny);
  --competitor-box-discipline-font: var(--typo-text-small);
  --competitor-box-discipline-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --competitor-box-info-font: var(--typo-text-small);
  --competitor-box-info-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * CSS component to display a competitor in a info format.
 */
.competitor.format-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: var(--competitor-info-spacing);
  border: var(--competitor-info-border);
  border-radius: var(--competitor-info-radius);
  background: var(--competitor-info-background-color);
  padding: var(--competitor-info-padding);
  box-sizing: border-box;
  --competitor-info-border: var(--competitor-info-border-width) solid var(--competitor-info-border-color); }
  .competitor.format-info.transparent {
    background: none; }
  .competitor.format-info.expand {
    height: 100%;
    box-sizing: border-box; }
  .competitor.format-info > .image {
    display: block;
    width: var(--competitor-info-identity-icon-size); }
    .competitor.format-info > .image > img {
      width: 100%;
      display: block; }
    .competitor.format-info > .image > i {
      display: block; }
  .competitor.format-info > .identity {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--competitor-info-identity-spacing); }
    .competitor.format-info > .identity > .name {
      font: var(--competitor-info-identity-name-font);
      color: var(--competitor-info-identity-name-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .competitor.format-info > .identity > .discipline {
      font: var(--competitor-info-identity-discipline-font);
      color: var(--competitor-info-identity-discipline-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
  .competitor.format-info > .properties {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--competitor-info-properties-spacing-v) var(--competitor-info-properties-spacing-h); }
    .competitor.format-info > .properties > * .name {
      font: var(--competitor-info-properties-name-font);
      color: var(--competitor-info-properties-name-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .competitor.format-info > .properties > * .value {
      font: var(--competitor-info-properties-value-font);
      color: var(--competitor-info-properties-value-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
  .competitor.format-info.hover:hover {
    cursor: pointer;
    border-color: var(--competitor-info-hover-border-color);
    background-color: var(--competitor-info-hover-background-color); }

html {
  --competitor-info-padding: var(--sizing-space-medium);
  --competitor-info-border-width: 1px;
  --competitor-info-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --competitor-info-radius: var(--sizing-space-tiny);
  --competitor-info-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --competitor-info-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --competitor-info-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --competitor-info-disabled-opacity: 0.5;
  --competitor-info-spacing: var(--sizing-space-medium);
  --competitor-info-identity-spacing: var(--sizing-space-tiny);
  --competitor-info-identity-icon-size: 4rem;
  --competitor-info-identity-name-font: var(--typo-title-small);
  --competitor-info-identity-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --competitor-info-identity-discipline-font: var(--typo-text-small);
  --competitor-info-identity-discipline-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --competitor-info-properties-spacing-h: var(--sizing-space-huge);
  --competitor-info-properties-spacing-v: var(--sizing-space-medium);
  --competitor-info-properties-name-font: var(--typo-text-small);
  --competitor-info-properties-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --competitor-info-properties-value-font: var(--typo-text-medium);
  --competitor-info-properties-value-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

/**
 * Includes all country styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Includes all country flags using svg resources to allow the scaling of the flags.
 *
 * - Each flag is provided by an unique svg asset.
 * - Some svg files have a bigger file size than others.
 * - svg filters can be applied on a flag.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.flag-svg {
  display: inline-block;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: baseline; }
  .flag-svg.small {
    width: 0.75em;
    height: 0.6em; }
  .flag-svg, .flag-svg.medium {
    width: 1.06em;
    height: 0.8em; }
  .flag-svg.large {
    width: 1.33em;
    height: 1.0em; }
  .flag-svg.ratio-2-3.small {
    width: 0.90em;
    height: 0.6em; }
  .flag-svg.ratio-2-3, .flag-svg.ratio-2-3.medium {
    width: 1.20em;
    height: 0.8em; }
  .flag-svg.ratio-2-3.large {
    width: 1.50em;
    height: 1.0em; }
  .flag-svg.squared.small {
    width: 0.60em;
    height: 0.6em; }
  .flag-svg.squared, .flag-svg.squared.medium {
    width: 0.80em;
    height: 0.8em; }
  .flag-svg.squared.large {
    width: 1.00em;
    height: 1.0em; }
  .flag-svg > .overlay {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/overlay/gradient.svg?800607295);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.2); }
  .flag-svg.rounded, .flag-svg.rounded > .overlay {
    border-radius: 666rem; }

.flag-svg.flag-ad {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ad.svg?800607295); }
  .flag-svg.flag-ad.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ad.svg?800607295); }

.flag-svg.flag-ae {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ae.svg?800607295); }
  .flag-svg.flag-ae.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ae.svg?800607295); }

.flag-svg.flag-af {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/af.svg?800607295); }
  .flag-svg.flag-af.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/af.svg?800607295); }

.flag-svg.flag-ag {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ag.svg?800607295); }
  .flag-svg.flag-ag.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ag.svg?800607295); }

.flag-svg.flag-ai {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ai.svg?800607295); }
  .flag-svg.flag-ai.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ai.svg?800607295); }

.flag-svg.flag-al {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/al.svg?800607295); }
  .flag-svg.flag-al.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/al.svg?800607295); }

.flag-svg.flag-am {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/am.svg?800607295); }
  .flag-svg.flag-am.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/am.svg?800607295); }

.flag-svg.flag-an {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/an.svg?800607295); }
  .flag-svg.flag-an.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/an.svg?800607295); }

.flag-svg.flag-ao {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ao.svg?800607295); }
  .flag-svg.flag-ao.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ao.svg?800607295); }

.flag-svg.flag-aq {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/aq.svg?800607295); }
  .flag-svg.flag-aq.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/aq.svg?800607295); }

.flag-svg.flag-ar {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ar.svg?800607295); }
  .flag-svg.flag-ar.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ar.svg?800607295); }

.flag-svg.flag-as {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/as.svg?800607295); }
  .flag-svg.flag-as.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/as.svg?800607295); }

.flag-svg.flag-at {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/at.svg?800607295); }
  .flag-svg.flag-at.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/at.svg?800607295); }

.flag-svg.flag-au {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/au.svg?800607295); }
  .flag-svg.flag-au.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/au.svg?800607295); }

.flag-svg.flag-aw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/aw.svg?800607295); }
  .flag-svg.flag-aw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/aw.svg?800607295); }

.flag-svg.flag-ax {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ax.svg?800607295); }
  .flag-svg.flag-ax.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ax.svg?800607295); }

.flag-svg.flag-az {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/az.svg?800607295); }
  .flag-svg.flag-az.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/az.svg?800607295); }

.flag-svg.flag-ba {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ba.svg?800607295); }
  .flag-svg.flag-ba.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ba.svg?800607295); }

.flag-svg.flag-bb {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bb.svg?800607295); }
  .flag-svg.flag-bb.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bb.svg?800607295); }

.flag-svg.flag-bd {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bd.svg?800607295); }
  .flag-svg.flag-bd.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bd.svg?800607295); }

.flag-svg.flag-be {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/be.svg?800607295); }
  .flag-svg.flag-be.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/be.svg?800607295); }

.flag-svg.flag-bf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bf.svg?800607295); }
  .flag-svg.flag-bf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bf.svg?800607295); }

.flag-svg.flag-bg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bg.svg?800607295); }
  .flag-svg.flag-bg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bg.svg?800607295); }

.flag-svg.flag-bh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bh.svg?800607295); }
  .flag-svg.flag-bh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bh.svg?800607295); }

.flag-svg.flag-bi {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bi.svg?800607295); }
  .flag-svg.flag-bi.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bi.svg?800607295); }

.flag-svg.flag-bj {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bj.svg?800607295); }
  .flag-svg.flag-bj.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bj.svg?800607295); }

.flag-svg.flag-bl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bl.svg?800607295); }
  .flag-svg.flag-bl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bl.svg?800607295); }

.flag-svg.flag-bm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bm.svg?800607295); }
  .flag-svg.flag-bm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bm.svg?800607295); }

.flag-svg.flag-bn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bn.svg?800607295); }
  .flag-svg.flag-bn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bn.svg?800607295); }

.flag-svg.flag-bo {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bo.svg?800607295); }
  .flag-svg.flag-bo.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bo.svg?800607295); }

.flag-svg.flag-br {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/br.svg?800607295); }
  .flag-svg.flag-br.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/br.svg?800607295); }

.flag-svg.flag-bs {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bs.svg?800607295); }
  .flag-svg.flag-bs.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bs.svg?800607295); }

.flag-svg.flag-bt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bt.svg?800607295); }
  .flag-svg.flag-bt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bt.svg?800607295); }

.flag-svg.flag-bw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bw.svg?800607295); }
  .flag-svg.flag-bw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bw.svg?800607295); }

.flag-svg.flag-by {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/by.svg?800607295); }
  .flag-svg.flag-by.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/by.svg?800607295); }

.flag-svg.flag-bz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/bz.svg?800607295); }
  .flag-svg.flag-bz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/bz.svg?800607295); }

.flag-svg.flag-ca {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ca.svg?800607295); }
  .flag-svg.flag-ca.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ca.svg?800607295); }

.flag-svg.flag-cc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cc.svg?800607295); }
  .flag-svg.flag-cc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cc.svg?800607295); }

.flag-svg.flag-cd {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cd.svg?800607295); }
  .flag-svg.flag-cd.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cd.svg?800607295); }

.flag-svg.flag-cf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cf.svg?800607295); }
  .flag-svg.flag-cf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cf.svg?800607295); }

.flag-svg.flag-cg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cg.svg?800607295); }
  .flag-svg.flag-cg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cg.svg?800607295); }

.flag-svg.flag-ch {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ch.svg?800607295); }
  .flag-svg.flag-ch.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ch.svg?800607295); }

.flag-svg.flag-ci {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ci.svg?800607295); }
  .flag-svg.flag-ci.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ci.svg?800607295); }

.flag-svg.flag-ck {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ck.svg?800607295); }
  .flag-svg.flag-ck.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ck.svg?800607295); }

.flag-svg.flag-cl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cl.svg?800607295); }
  .flag-svg.flag-cl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cl.svg?800607295); }

.flag-svg.flag-cm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cm.svg?800607295); }
  .flag-svg.flag-cm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cm.svg?800607295); }

.flag-svg.flag-cn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cn.svg?800607295); }
  .flag-svg.flag-cn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cn.svg?800607295); }

.flag-svg.flag-co {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/co.svg?800607295); }
  .flag-svg.flag-co.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/co.svg?800607295); }

.flag-svg.flag-cr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cr.svg?800607295); }
  .flag-svg.flag-cr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cr.svg?800607295); }

.flag-svg.flag-cu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cu.svg?800607295); }
  .flag-svg.flag-cu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cu.svg?800607295); }

.flag-svg.flag-cv {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cv.svg?800607295); }
  .flag-svg.flag-cv.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cv.svg?800607295); }

.flag-svg.flag-cw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cw.svg?800607295); }
  .flag-svg.flag-cw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cw.svg?800607295); }

.flag-svg.flag-cx {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cx.svg?800607295); }
  .flag-svg.flag-cx.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cx.svg?800607295); }

.flag-svg.flag-cy {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cy.svg?800607295); }
  .flag-svg.flag-cy.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cy.svg?800607295); }

.flag-svg.flag-cz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/cz.svg?800607295); }
  .flag-svg.flag-cz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/cz.svg?800607295); }

.flag-svg.flag-de {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/de.svg?800607295); }
  .flag-svg.flag-de.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/de.svg?800607295); }

.flag-svg.flag-dj {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/dj.svg?800607295); }
  .flag-svg.flag-dj.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/dj.svg?800607295); }

.flag-svg.flag-dk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/dk.svg?800607295); }
  .flag-svg.flag-dk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/dk.svg?800607295); }

.flag-svg.flag-dm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/dm.svg?800607295); }
  .flag-svg.flag-dm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/dm.svg?800607295); }

.flag-svg.flag-do {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/do.svg?800607295); }
  .flag-svg.flag-do.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/do.svg?800607295); }

.flag-svg.flag-dz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/dz.svg?800607295); }
  .flag-svg.flag-dz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/dz.svg?800607295); }

.flag-svg.flag-ec {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ec.svg?800607295); }
  .flag-svg.flag-ec.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ec.svg?800607295); }

.flag-svg.flag-ee {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ee.svg?800607295); }
  .flag-svg.flag-ee.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ee.svg?800607295); }

.flag-svg.flag-eg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/eg.svg?800607295); }
  .flag-svg.flag-eg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/eg.svg?800607295); }

.flag-svg.flag-eh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/eh.svg?800607295); }
  .flag-svg.flag-eh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/eh.svg?800607295); }

.flag-svg.flag-er {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/er.svg?800607295); }
  .flag-svg.flag-er.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/er.svg?800607295); }

.flag-svg.flag-es {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/es.svg?800607295); }
  .flag-svg.flag-es.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/es.svg?800607295); }

.flag-svg.flag-et {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/et.svg?800607295); }
  .flag-svg.flag-et.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/et.svg?800607295); }

.flag-svg.flag-fi {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fi.svg?800607295); }
  .flag-svg.flag-fi.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fi.svg?800607295); }

.flag-svg.flag-fj {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fj.svg?800607295); }
  .flag-svg.flag-fj.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fj.svg?800607295); }

.flag-svg.flag-fk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fk.svg?800607295); }
  .flag-svg.flag-fk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fk.svg?800607295); }

.flag-svg.flag-fm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fm.svg?800607295); }
  .flag-svg.flag-fm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fm.svg?800607295); }

.flag-svg.flag-fo {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fo.svg?800607295); }
  .flag-svg.flag-fo.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fo.svg?800607295); }

.flag-svg.flag-fr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/fr.svg?800607295); }
  .flag-svg.flag-fr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/fr.svg?800607295); }

.flag-svg.flag-ga {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ga.svg?800607295); }
  .flag-svg.flag-ga.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ga.svg?800607295); }

.flag-svg.flag-gb {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gb.svg?800607295); }
  .flag-svg.flag-gb.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gb.svg?800607295); }

.flag-svg.flag-gd {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gd.svg?800607295); }
  .flag-svg.flag-gd.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gd.svg?800607295); }

.flag-svg.flag-ge {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ge.svg?800607295); }
  .flag-svg.flag-ge.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ge.svg?800607295); }

.flag-svg.flag-gg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gg.svg?800607295); }
  .flag-svg.flag-gg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gg.svg?800607295); }

.flag-svg.flag-gh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gh.svg?800607295); }
  .flag-svg.flag-gh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gh.svg?800607295); }

.flag-svg.flag-gi {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gi.svg?800607295); }
  .flag-svg.flag-gi.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gi.svg?800607295); }

.flag-svg.flag-gl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gl.svg?800607295); }
  .flag-svg.flag-gl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gl.svg?800607295); }

.flag-svg.flag-gm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gm.svg?800607295); }
  .flag-svg.flag-gm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gm.svg?800607295); }

.flag-svg.flag-gn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gn.svg?800607295); }
  .flag-svg.flag-gn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gn.svg?800607295); }

.flag-svg.flag-gq {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gq.svg?800607295); }
  .flag-svg.flag-gq.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gq.svg?800607295); }

.flag-svg.flag-gr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gr.svg?800607295); }
  .flag-svg.flag-gr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gr.svg?800607295); }

.flag-svg.flag-gs {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gs.svg?800607295); }
  .flag-svg.flag-gs.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gs.svg?800607295); }

.flag-svg.flag-gt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gt.svg?800607295); }
  .flag-svg.flag-gt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gt.svg?800607295); }

.flag-svg.flag-gu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gu.svg?800607295); }
  .flag-svg.flag-gu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gu.svg?800607295); }

.flag-svg.flag-gw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gw.svg?800607295); }
  .flag-svg.flag-gw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gw.svg?800607295); }

.flag-svg.flag-gy {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/gy.svg?800607295); }
  .flag-svg.flag-gy.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/gy.svg?800607295); }

.flag-svg.flag-hk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/hk.svg?800607295); }
  .flag-svg.flag-hk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/hk.svg?800607295); }

.flag-svg.flag-hn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/hn.svg?800607295); }
  .flag-svg.flag-hn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/hn.svg?800607295); }

.flag-svg.flag-hr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/hr.svg?800607295); }
  .flag-svg.flag-hr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/hr.svg?800607295); }

.flag-svg.flag-ht {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ht.svg?800607295); }
  .flag-svg.flag-ht.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ht.svg?800607295); }

.flag-svg.flag-hu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/hu.svg?800607295); }
  .flag-svg.flag-hu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/hu.svg?800607295); }

.flag-svg.flag-ic {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ic.svg?800607295); }
  .flag-svg.flag-ic.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ic.svg?800607295); }

.flag-svg.flag-id {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/id.svg?800607295); }
  .flag-svg.flag-id.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/id.svg?800607295); }

.flag-svg.flag-ie {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ie.svg?800607295); }
  .flag-svg.flag-ie.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ie.svg?800607295); }

.flag-svg.flag-il {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/il.svg?800607295); }
  .flag-svg.flag-il.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/il.svg?800607295); }

.flag-svg.flag-im {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/im.svg?800607295); }
  .flag-svg.flag-im.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/im.svg?800607295); }

.flag-svg.flag-in {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/in.svg?800607295); }
  .flag-svg.flag-in.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/in.svg?800607295); }

.flag-svg.flag-iq {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/iq.svg?800607295); }
  .flag-svg.flag-iq.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/iq.svg?800607295); }

.flag-svg.flag-ir {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ir.svg?800607295); }
  .flag-svg.flag-ir.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ir.svg?800607295); }

.flag-svg.flag-is {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/is.svg?800607295); }
  .flag-svg.flag-is.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/is.svg?800607295); }

.flag-svg.flag-it {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/it.svg?800607295); }
  .flag-svg.flag-it.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/it.svg?800607295); }

.flag-svg.flag-je {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/je.svg?800607295); }
  .flag-svg.flag-je.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/je.svg?800607295); }

.flag-svg.flag-jm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/jm.svg?800607295); }
  .flag-svg.flag-jm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/jm.svg?800607295); }

.flag-svg.flag-jo {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/jo.svg?800607295); }
  .flag-svg.flag-jo.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/jo.svg?800607295); }

.flag-svg.flag-jp {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/jp.svg?800607295); }
  .flag-svg.flag-jp.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/jp.svg?800607295); }

.flag-svg.flag-ke {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ke.svg?800607295); }
  .flag-svg.flag-ke.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ke.svg?800607295); }

.flag-svg.flag-kg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kg.svg?800607295); }
  .flag-svg.flag-kg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kg.svg?800607295); }

.flag-svg.flag-kh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kh.svg?800607295); }
  .flag-svg.flag-kh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kh.svg?800607295); }

.flag-svg.flag-ki {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ki.svg?800607295); }
  .flag-svg.flag-ki.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ki.svg?800607295); }

.flag-svg.flag-km {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/km.svg?800607295); }
  .flag-svg.flag-km.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/km.svg?800607295); }

.flag-svg.flag-kn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kn.svg?800607295); }
  .flag-svg.flag-kn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kn.svg?800607295); }

.flag-svg.flag-kp {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kp.svg?800607295); }
  .flag-svg.flag-kp.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kp.svg?800607295); }

.flag-svg.flag-kr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kr.svg?800607295); }
  .flag-svg.flag-kr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kr.svg?800607295); }

.flag-svg.flag-kw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kw.svg?800607295); }
  .flag-svg.flag-kw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kw.svg?800607295); }

.flag-svg.flag-ky {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ky.svg?800607295); }
  .flag-svg.flag-ky.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ky.svg?800607295); }

.flag-svg.flag-kz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/kz.svg?800607295); }
  .flag-svg.flag-kz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/kz.svg?800607295); }

.flag-svg.flag-la {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/la.svg?800607295); }
  .flag-svg.flag-la.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/la.svg?800607295); }

.flag-svg.flag-lb {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lb.svg?800607295); }
  .flag-svg.flag-lb.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lb.svg?800607295); }

.flag-svg.flag-lc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lc.svg?800607295); }
  .flag-svg.flag-lc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lc.svg?800607295); }

.flag-svg.flag-li {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/li.svg?800607295); }
  .flag-svg.flag-li.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/li.svg?800607295); }

.flag-svg.flag-lk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lk.svg?800607295); }
  .flag-svg.flag-lk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lk.svg?800607295); }

.flag-svg.flag-lr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lr.svg?800607295); }
  .flag-svg.flag-lr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lr.svg?800607295); }

.flag-svg.flag-ls {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ls.svg?800607295); }
  .flag-svg.flag-ls.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ls.svg?800607295); }

.flag-svg.flag-lt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lt.svg?800607295); }
  .flag-svg.flag-lt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lt.svg?800607295); }

.flag-svg.flag-lu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lu.svg?800607295); }
  .flag-svg.flag-lu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lu.svg?800607295); }

.flag-svg.flag-lv {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/lv.svg?800607295); }
  .flag-svg.flag-lv.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/lv.svg?800607295); }

.flag-svg.flag-ly {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ly.svg?800607295); }
  .flag-svg.flag-ly.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ly.svg?800607295); }

.flag-svg.flag-ma {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ma.svg?800607295); }
  .flag-svg.flag-ma.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ma.svg?800607295); }

.flag-svg.flag-mc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mc.svg?800607295); }
  .flag-svg.flag-mc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mc.svg?800607295); }

.flag-svg.flag-md {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/md.svg?800607295); }
  .flag-svg.flag-md.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/md.svg?800607295); }

.flag-svg.flag-me {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/me.svg?800607295); }
  .flag-svg.flag-me.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/me.svg?800607295); }

.flag-svg.flag-mf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mf.svg?800607295); }
  .flag-svg.flag-mf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mf.svg?800607295); }

.flag-svg.flag-mg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mg.svg?800607295); }
  .flag-svg.flag-mg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mg.svg?800607295); }

.flag-svg.flag-mh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mh.svg?800607295); }
  .flag-svg.flag-mh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mh.svg?800607295); }

.flag-svg.flag-mk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mk.svg?800607295); }
  .flag-svg.flag-mk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mk.svg?800607295); }

.flag-svg.flag-ml {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ml.svg?800607295); }
  .flag-svg.flag-ml.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ml.svg?800607295); }

.flag-svg.flag-mm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mm.svg?800607295); }
  .flag-svg.flag-mm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mm.svg?800607295); }

.flag-svg.flag-mn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mn.svg?800607295); }
  .flag-svg.flag-mn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mn.svg?800607295); }

.flag-svg.flag-mo {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mo.svg?800607295); }
  .flag-svg.flag-mo.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mo.svg?800607295); }

.flag-svg.flag-mp {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mp.svg?800607295); }
  .flag-svg.flag-mp.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mp.svg?800607295); }

.flag-svg.flag-mq {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mq.svg?800607295); }
  .flag-svg.flag-mq.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mq.svg?800607295); }

.flag-svg.flag-mr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mr.svg?800607295); }
  .flag-svg.flag-mr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mr.svg?800607295); }

.flag-svg.flag-ms {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ms.svg?800607295); }
  .flag-svg.flag-ms.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ms.svg?800607295); }

.flag-svg.flag-mt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mt.svg?800607295); }
  .flag-svg.flag-mt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mt.svg?800607295); }

.flag-svg.flag-mu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mu.svg?800607295); }
  .flag-svg.flag-mu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mu.svg?800607295); }

.flag-svg.flag-mv {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mv.svg?800607295); }
  .flag-svg.flag-mv.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mv.svg?800607295); }

.flag-svg.flag-mw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mw.svg?800607295); }
  .flag-svg.flag-mw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mw.svg?800607295); }

.flag-svg.flag-mx {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/mx.svg?800607295); }
  .flag-svg.flag-mx.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/mx.svg?800607295); }

.flag-svg.flag-my {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/my.svg?800607295); }
  .flag-svg.flag-my.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/my.svg?800607295); }

.flag-svg.flag-na {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/na.svg?800607295); }
  .flag-svg.flag-na.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/na.svg?800607295); }

.flag-svg.flag-nc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nc.svg?800607295); }
  .flag-svg.flag-nc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nc.svg?800607295); }

.flag-svg.flag-ne {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ne.svg?800607295); }
  .flag-svg.flag-ne.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ne.svg?800607295); }

.flag-svg.flag-nf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nf.svg?800607295); }
  .flag-svg.flag-nf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nf.svg?800607295); }

.flag-svg.flag-ng {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ng.svg?800607295); }
  .flag-svg.flag-ng.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ng.svg?800607295); }

.flag-svg.flag-ni {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ni.svg?800607295); }
  .flag-svg.flag-ni.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ni.svg?800607295); }

.flag-svg.flag-nl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nl.svg?800607295); }
  .flag-svg.flag-nl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nl.svg?800607295); }

.flag-svg.flag-no {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/no.svg?800607295); }
  .flag-svg.flag-no.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/no.svg?800607295); }

.flag-svg.flag-np {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/np.svg?800607295); }
  .flag-svg.flag-np.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/np.svg?800607295); }

.flag-svg.flag-nr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nr.svg?800607295); }
  .flag-svg.flag-nr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nr.svg?800607295); }

.flag-svg.flag-nu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nu.svg?800607295); }
  .flag-svg.flag-nu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nu.svg?800607295); }

.flag-svg.flag-nz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/nz.svg?800607295); }
  .flag-svg.flag-nz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/nz.svg?800607295); }

.flag-svg.flag-om {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/om.svg?800607295); }
  .flag-svg.flag-om.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/om.svg?800607295); }

.flag-svg.flag-pa {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pa.svg?800607295); }
  .flag-svg.flag-pa.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pa.svg?800607295); }

.flag-svg.flag-pe {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pe.svg?800607295); }
  .flag-svg.flag-pe.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pe.svg?800607295); }

.flag-svg.flag-pf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pf.svg?800607295); }
  .flag-svg.flag-pf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pf.svg?800607295); }

.flag-svg.flag-pg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pg.svg?800607295); }
  .flag-svg.flag-pg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pg.svg?800607295); }

.flag-svg.flag-ph {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ph.svg?800607295); }
  .flag-svg.flag-ph.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ph.svg?800607295); }

.flag-svg.flag-pk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pk.svg?800607295); }
  .flag-svg.flag-pk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pk.svg?800607295); }

.flag-svg.flag-pl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pl.svg?800607295); }
  .flag-svg.flag-pl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pl.svg?800607295); }

.flag-svg.flag-pn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pn.svg?800607295); }
  .flag-svg.flag-pn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pn.svg?800607295); }

.flag-svg.flag-pr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pr.svg?800607295); }
  .flag-svg.flag-pr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pr.svg?800607295); }

.flag-svg.flag-ps {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ps.svg?800607295); }
  .flag-svg.flag-ps.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ps.svg?800607295); }

.flag-svg.flag-pt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pt.svg?800607295); }
  .flag-svg.flag-pt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pt.svg?800607295); }

.flag-svg.flag-pw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/pw.svg?800607295); }
  .flag-svg.flag-pw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/pw.svg?800607295); }

.flag-svg.flag-py {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/py.svg?800607295); }
  .flag-svg.flag-py.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/py.svg?800607295); }

.flag-svg.flag-qa {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/qa.svg?800607295); }
  .flag-svg.flag-qa.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/qa.svg?800607295); }

.flag-svg.flag-ro {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ro.svg?800607295); }
  .flag-svg.flag-ro.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ro.svg?800607295); }

.flag-svg.flag-rs {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/rs.svg?800607295); }
  .flag-svg.flag-rs.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/rs.svg?800607295); }

.flag-svg.flag-ru {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ru.svg?800607295); }
  .flag-svg.flag-ru.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ru.svg?800607295); }

.flag-svg.flag-rw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/rw.svg?800607295); }
  .flag-svg.flag-rw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/rw.svg?800607295); }

.flag-svg.flag-sa {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sa.svg?800607295); }
  .flag-svg.flag-sa.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sa.svg?800607295); }

.flag-svg.flag-sb {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sb.svg?800607295); }
  .flag-svg.flag-sb.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sb.svg?800607295); }

.flag-svg.flag-sc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sc.svg?800607295); }
  .flag-svg.flag-sc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sc.svg?800607295); }

.flag-svg.flag-sd {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sd.svg?800607295); }
  .flag-svg.flag-sd.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sd.svg?800607295); }

.flag-svg.flag-se {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/se.svg?800607295); }
  .flag-svg.flag-se.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/se.svg?800607295); }

.flag-svg.flag-sg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sg.svg?800607295); }
  .flag-svg.flag-sg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sg.svg?800607295); }

.flag-svg.flag-sh {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sh.svg?800607295); }
  .flag-svg.flag-sh.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sh.svg?800607295); }

.flag-svg.flag-si {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/si.svg?800607295); }
  .flag-svg.flag-si.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/si.svg?800607295); }

.flag-svg.flag-sk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sk.svg?800607295); }
  .flag-svg.flag-sk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sk.svg?800607295); }

.flag-svg.flag-sl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sl.svg?800607295); }
  .flag-svg.flag-sl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sl.svg?800607295); }

.flag-svg.flag-sm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sm.svg?800607295); }
  .flag-svg.flag-sm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sm.svg?800607295); }

.flag-svg.flag-sn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sn.svg?800607295); }
  .flag-svg.flag-sn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sn.svg?800607295); }

.flag-svg.flag-so {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/so.svg?800607295); }
  .flag-svg.flag-so.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/so.svg?800607295); }

.flag-svg.flag-sr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sr.svg?800607295); }
  .flag-svg.flag-sr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sr.svg?800607295); }

.flag-svg.flag-ss {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ss.svg?800607295); }
  .flag-svg.flag-ss.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ss.svg?800607295); }

.flag-svg.flag-st {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/st.svg?800607295); }
  .flag-svg.flag-st.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/st.svg?800607295); }

.flag-svg.flag-sv {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sv.svg?800607295); }
  .flag-svg.flag-sv.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sv.svg?800607295); }

.flag-svg.flag-sy {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sy.svg?800607295); }
  .flag-svg.flag-sy.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sy.svg?800607295); }

.flag-svg.flag-sz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/sz.svg?800607295); }
  .flag-svg.flag-sz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/sz.svg?800607295); }

.flag-svg.flag-tc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tc.svg?800607295); }
  .flag-svg.flag-tc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tc.svg?800607295); }

.flag-svg.flag-td {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/td.svg?800607295); }
  .flag-svg.flag-td.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/td.svg?800607295); }

.flag-svg.flag-tf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tf.svg?800607295); }
  .flag-svg.flag-tf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tf.svg?800607295); }

.flag-svg.flag-tg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tg.svg?800607295); }
  .flag-svg.flag-tg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tg.svg?800607295); }

.flag-svg.flag-th {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/th.svg?800607295); }
  .flag-svg.flag-th.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/th.svg?800607295); }

.flag-svg.flag-tj {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tj.svg?800607295); }
  .flag-svg.flag-tj.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tj.svg?800607295); }

.flag-svg.flag-tk {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tk.svg?800607295); }
  .flag-svg.flag-tk.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tk.svg?800607295); }

.flag-svg.flag-tl {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tl.svg?800607295); }
  .flag-svg.flag-tl.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tl.svg?800607295); }

.flag-svg.flag-tm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tm.svg?800607295); }
  .flag-svg.flag-tm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tm.svg?800607295); }

.flag-svg.flag-tn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tn.svg?800607295); }
  .flag-svg.flag-tn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tn.svg?800607295); }

.flag-svg.flag-to {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/to.svg?800607295); }
  .flag-svg.flag-to.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/to.svg?800607295); }

.flag-svg.flag-tr {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tr.svg?800607295); }
  .flag-svg.flag-tr.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tr.svg?800607295); }

.flag-svg.flag-tt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tt.svg?800607295); }
  .flag-svg.flag-tt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tt.svg?800607295); }

.flag-svg.flag-tv {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tv.svg?800607295); }
  .flag-svg.flag-tv.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tv.svg?800607295); }

.flag-svg.flag-tw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tw.svg?800607295); }
  .flag-svg.flag-tw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tw.svg?800607295); }

.flag-svg.flag-tz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/tz.svg?800607295); }
  .flag-svg.flag-tz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/tz.svg?800607295); }

.flag-svg.flag-ua {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ua.svg?800607295); }
  .flag-svg.flag-ua.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ua.svg?800607295); }

.flag-svg.flag-ug {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ug.svg?800607295); }
  .flag-svg.flag-ug.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ug.svg?800607295); }

.flag-svg.flag-us {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/us.svg?800607295); }
  .flag-svg.flag-us.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/us.svg?800607295); }

.flag-svg.flag-uy {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/uy.svg?800607295); }
  .flag-svg.flag-uy.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/uy.svg?800607295); }

.flag-svg.flag-uz {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/uz.svg?800607295); }
  .flag-svg.flag-uz.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/uz.svg?800607295); }

.flag-svg.flag-va {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/va.svg?800607295); }
  .flag-svg.flag-va.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/va.svg?800607295); }

.flag-svg.flag-vc {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/vc.svg?800607295); }
  .flag-svg.flag-vc.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/vc.svg?800607295); }

.flag-svg.flag-ve {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ve.svg?800607295); }
  .flag-svg.flag-ve.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ve.svg?800607295); }

.flag-svg.flag-vg {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/vg.svg?800607295); }
  .flag-svg.flag-vg.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/vg.svg?800607295); }

.flag-svg.flag-vi {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/vi.svg?800607295); }
  .flag-svg.flag-vi.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/vi.svg?800607295); }

.flag-svg.flag-vn {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/vn.svg?800607295); }
  .flag-svg.flag-vn.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/vn.svg?800607295); }

.flag-svg.flag-vu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/vu.svg?800607295); }
  .flag-svg.flag-vu.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/vu.svg?800607295); }

.flag-svg.flag-wf {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/wf.svg?800607295); }
  .flag-svg.flag-wf.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/wf.svg?800607295); }

.flag-svg.flag-ws {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ws.svg?800607295); }
  .flag-svg.flag-ws.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ws.svg?800607295); }

.flag-svg.flag-ye {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/ye.svg?800607295); }
  .flag-svg.flag-ye.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/ye.svg?800607295); }

.flag-svg.flag-yt {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/yt.svg?800607295); }
  .flag-svg.flag-yt.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/yt.svg?800607295); }

.flag-svg.flag-za {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/za.svg?800607295); }
  .flag-svg.flag-za.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/za.svg?800607295); }

.flag-svg.flag-zm {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/zm.svg?800607295); }
  .flag-svg.flag-zm.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/zm.svg?800607295); }

.flag-svg.flag-zw {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/zw.svg?800607295); }
  .flag-svg.flag-zw.squared {
    background-image: url(https://www.lollfl.com/asset/country/flag/svg/squared_compressed/zw.svg?800607295); }

.flag-svg.flag-eu {
  background-image: url(https://www.lollfl.com/asset/country/flag/svg/4x3_compressed/europeanunion.svg?800607295); }

/**
 * Includes all country flags using a png 16px sprite.
 *
 * - All flags are within a single PNG file.
 * - Flags are already styled and cannot be modified (unless making a new png file)
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.flag-16 {
  display: inline-block;
  width: 14px;
  height: 11px;
  vertical-align: baseline;
  background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-16.png?800607295) no-repeat; }
  .flag-16.quality {
    background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-16-hq.png?800607295) no-repeat; }
  .flag-16.align-middle {
    vertical-align: middle; }
  .flag-16.flag-ch {
    height: 12px; }

.flag-16 {
  background-position: -290px -223px; }

.flag-16.flag-ad {
  background-position: -171px -2px; }

.flag-16.flag-ae {
  background-position: -290px -53px; }

.flag-16.flag-af {
  background-position: -120px -36px; }

.flag-16.flag-ag {
  background-position: -35px -36px; }

.flag-16.flag-ai {
  background-position: -86px -70px; }

.flag-16.flag-al {
  background-position: -154px -223px; }

.flag-16.flag-am {
  background-position: -188px -53px; }

.flag-16.flag-an {
  background-position: -222px -138px; }

.flag-16.flag-ao {
  background-position: -256px -121px; }

.flag-16.flag-aq {
  background-position: -222px -121px; }

.flag-16.flag-ar {
  background-position: -69px -121px; }

.flag-16.flag-as {
  background-position: -69px -172px; }

.flag-16.flag-at {
  background-position: -35px -53px; }

.flag-16.flag-au {
  background-position: -103px -121px; }

.flag-16.flag-aw {
  background-position: -86px -36px; }

.flag-16.flag-ax {
  background-position: -1px -189px; }

.flag-16.flag-az {
  background-position: -273px -138px; }

.flag-16.flag-ba {
  background-position: -52px -155px; }

.flag-16.flag-bb {
  background-position: -256px -189px; }

.flag-16.flag-bd {
  background-position: -1px -19px; }

.flag-16.flag-be {
  background-position: -154px -19px; }

.flag-16.flag-bf {
  background-position: -205px -138px; }

.flag-16.flag-bg {
  background-position: -52px -70px; }

.flag-16.flag-bh {
  background-position: -1px -53px; }

.flag-16.flag-bi {
  background-position: -52px -87px; }

.flag-16.flag-bj {
  background-position: -103px -104px; }

.flag-16.flag-bl {
  background-position: -290px -104px; }

.flag-16.flag-bm {
  background-position: -52px -2px; }

.flag-16.flag-bn {
  background-position: -1px -36px; }

.flag-16.flag-bo {
  background-position: -239px -19px; }

.flag-16.flag-br {
  background-position: -273px -2px; }

.flag-16.flag-bs {
  background-position: -222px -53px; }

.flag-16.flag-bt {
  background-position: -69px -223px; }

.flag-16.flag-bw {
  background-position: -137px -19px; }

.flag-16.flag-by {
  background-position: -273px -87px; }

.flag-16.flag-bz {
  background-position: -86px -2px; }

.flag-16.flag-ca {
  background-position: -239px -172px; }

.flag-16.flag-cc {
  background-position: -69px -2px; }

.flag-16.flag-cd {
  background-position: -103px -206px; }

.flag-16.flag-cf {
  background-position: -18px -70px; }

.flag-16.flag-cg {
  background-position: -69px -189px; }

.flag-16.flag-ch {
  background-position: -103px -87px; }

.flag-16.flag-ci {
  background-position: -239px -104px; }

.flag-16.flag-ck {
  background-position: -205px -172px; }

.flag-16.flag-cl {
  background-position: -18px -104px; }

.flag-16.flag-cm {
  background-position: -273px -155px; }

.flag-16.flag-cn {
  background-position: -205px -70px; }

.flag-16.flag-co {
  background-position: -35px -121px; }

.flag-16.flag-cr {
  background-position: -171px -138px; }

.flag-16.flag-cu {
  background-position: -137px -155px; }

.flag-16.flag-cv {
  background-position: -171px -206px; }

.flag-16.flag-cw {
  background-position: -69px -104px; }

.flag-16.flag-cx {
  background-position: -154px -121px; }

.flag-16.flag-cy {
  background-position: -103px -155px; }

.flag-16.flag-cz {
  background-position: -18px -87px; }

.flag-16.flag-de {
  background-position: -273px -53px; }

.flag-16.flag-dj {
  background-position: -120px -19px; }

.flag-16.flag-dk {
  background-position: -18px -19px; }

.flag-16.flag-dm {
  background-position: -69px -206px; }

.flag-16.flag-do {
  background-position: -171px -189px; }

.flag-16.flag-dz {
  background-position: -120px -138px; }

.flag-16.flag-ec {
  background-position: -171px -155px; }

.flag-16.flag-ee {
  background-position: -205px -53px; }

.flag-16.flag-eg {
  background-position: -120px -70px; }

.flag-16.flag-eh {
  background-position: -69px -19px; }

.flag-16.flag-er {
  background-position: -35px -87px; }

.flag-16.flag-es {
  background-position: -290px -2px; }

.flag-16.flag-et {
  background-position: -154px -87px; }

.flag-16.flag-eu {
  background-position: -205px -189px; }

.flag-16.flag-fi {
  background-position: -103px -138px; }

.flag-16.flag-fj {
  background-position: -35px -138px; }

.flag-16.flag-fk {
  background-position: -188px -138px; }

.flag-16.flag-fm {
  background-position: -137px -206px; }

.flag-16.flag-fo {
  background-position: -86px -155px; }

.flag-16.flag-fr {
  background-position: -290px -172px; }

.flag-16.flag-ga {
  background-position: -239px -2px; }

.flag-16.flag-gb {
  background-position: -256px -70px; }

.flag-16.flag-gd {
  background-position: -171px -87px; }

.flag-16.flag-ge {
  background-position: -86px -19px; }

.flag-16.flag-gg {
  background-position: -273px -172px; }

.flag-16.flag-gh {
  background-position: -290px -70px; }

.flag-16.flag-gi {
  background-position: -222px -155px; }

.flag-16.flag-gl {
  background-position: -273px -189px; }

.flag-16.flag-gm {
  background-position: -52px -206px; }

.flag-16.flag-gn {
  background-position: -18px -206px; }

.flag-16.flag-gq {
  background-position: -1px -104px; }

.flag-16.flag-gr {
  background-position: -86px -104px; }

.flag-16.flag-gs {
  background-position: -290px -138px; }

.flag-16.flag-gt {
  background-position: -52px -172px; }

.flag-16.flag-gu {
  background-position: -171px -104px; }

.flag-16.flag-gw {
  background-position: -120px -2px; }

.flag-16.flag-gy {
  background-position: -103px -2px; }

.flag-16.flag-hk {
  background-position: -188px -206px; }

.flag-16.flag-hn {
  background-position: -18px -223px; }

.flag-16.flag-hr {
  background-position: -69px -87px; }

.flag-16.flag-ht {
  background-position: -154px -172px; }

.flag-16.flag-hu {
  background-position: -120px -189px; }

.flag-16.flag-ic {
  background-position: -154px -2px; }

.flag-16.flag-id {
  background-position: -18px -36px; }

.flag-16.flag-ie {
  background-position: -86px -206px; }

.flag-16.flag-il {
  background-position: -256px -53px; }

.flag-16.flag-im {
  background-position: -290px -36px; }

.flag-16.flag-in {
  background-position: -239px -206px; }

.flag-16.flag-iq {
  background-position: -52px -53px; }

.flag-16.flag-ir {
  background-position: -86px -223px; }

.flag-16.flag-is {
  background-position: -120px -121px; }

.flag-16.flag-it {
  background-position: -18px -138px; }

.flag-16.flag-je {
  background-position: -1px -172px; }

.flag-16.flag-jm {
  background-position: -69px -70px; }

.flag-16.flag-jo {
  background-position: -103px -19px; }

.flag-16.flag-jp {
  background-position: -103px -53px; }

.flag-16.flag-ke {
  background-position: -86px -172px; }

.flag-16.flag-kg {
  background-position: -103px -223px; }

.flag-16.flag-kh {
  background-position: -18px -155px; }

.flag-16.flag-ki {
  background-position: -120px -206px; }

.flag-16.flag-km {
  background-position: -86px -138px; }

.flag-16.flag-kn {
  background-position: -256px -138px; }

.flag-16.flag-kp {
  background-position: -1px -155px; }

.flag-16.flag-kr {
  background-position: -137px -121px; }

.flag-16.flag-kw {
  background-position: -239px -138px; }

.flag-16.flag-ky {
  background-position: -137px -2px; }

.flag-16.flag-kz {
  background-position: -52px -36px; }

.flag-16.flag-la {
  background-position: -256px -87px; }

.flag-16.flag-lb {
  background-position: -290px -155px; }

.flag-16.flag-lc {
  background-position: -69px -36px; }

.flag-16.flag-li {
  background-position: -137px -138px; }

.flag-16.flag-lk {
  background-position: -35px -206px; }

.flag-16.flag-lr {
  background-position: -154px -189px; }

.flag-16.flag-ls {
  background-position: -171px -223px; }

.flag-16.flag-lt {
  background-position: -256px -2px; }

.flag-16.flag-lu {
  background-position: -273px -36px; }

.flag-16.flag-lv {
  background-position: -256px -104px; }

.flag-16.flag-ly {
  background-position: -86px -189px; }

.flag-16.flag-ma {
  background-position: -52px -19px; }

.flag-16.flag-mc {
  background-position: -154px -36px; }

.flag-16.flag-md {
  background-position: -239px -155px; }

.flag-16.flag-me {
  background-position: -205px -2px; }

.flag-16.flag-mf {
  background-position: -52px -121px; }

.flag-16.flag-mg {
  background-position: -52px -138px; }

.flag-16.flag-mh {
  background-position: -137px -87px; }

.flag-16.flag-mk {
  background-position: -35px -172px; }

.flag-16.flag-ml {
  background-position: -188px -155px; }

.flag-16.flag-mm {
  background-position: -222px -70px; }

.flag-16.flag-mn {
  background-position: -1px -121px; }

.flag-16.flag-mo {
  background-position: -205px -36px; }

.flag-16.flag-mp {
  background-position: -35px -19px; }

.flag-16.flag-mq {
  background-position: -137px -172px; }

.flag-16.flag-mr {
  background-position: -222px -189px; }

.flag-16.flag-ms {
  background-position: -120px -172px; }

.flag-16.flag-mt {
  background-position: -120px -87px; }

.flag-16.flag-mu {
  background-position: -103px -172px; }

.flag-16.flag-mv {
  background-position: -35px -104px; }

.flag-16.flag-mw {
  background-position: -273px -121px; }

.flag-16.flag-mx {
  background-position: -154px -155px; }

.flag-16.flag-my {
  background-position: -205px -104px; }

.flag-16.flag-mz {
  background-position: -188px -2px; }

.flag-16.flag-na {
  background-position: -18px -121px; }

.flag-16.flag-nc {
  background-position: -120px -223px; }

.flag-16.flag-ne {
  background-position: -137px -36px; }

.flag-16.flag-nf {
  background-position: -137px -70px; }

.flag-16.flag-ng {
  background-position: -273px -19px; }

.flag-16.flag-ni {
  background-position: -273px -104px; }

.flag-16.flag-nl {
  background-position: -171px -19px; }

.flag-16.flag-no {
  background-position: -137px -53px; }

.flag-16.flag-np {
  background-position: -35px -189px; }

.flag-16.flag-nr {
  background-position: -103px -36px; }

.flag-16.flag-nu {
  background-position: -1px -70px; }

.flag-16.flag-nz {
  background-position: -222px -206px; }

.flag-16.flag-om {
  background-position: -222px -104px; }

.flag-16.flag-pa {
  background-position: -137px -104px; }

.flag-16.flag-pe {
  background-position: -86px -121px; }

.flag-16.flag-pf {
  background-position: -256px -36px; }

.flag-16.flag-pg {
  background-position: -18px -172px; }

.flag-16.flag-ph {
  background-position: -86px -53px; }

.flag-16.flag-pk {
  background-position: -239px -70px; }

.flag-16.flag-pl {
  background-position: -171px -70px; }

.flag-16.flag-pn {
  background-position: -239px -53px; }

.flag-16.flag-pr {
  background-position: -1px -2px; }

.flag-16.flag-ps {
  background-position: -35px -155px; }

.flag-16.flag-pt {
  background-position: -1px -138px; }

.flag-16.flag-pw {
  background-position: -188px -19px; }

.flag-16.flag-py {
  background-position: -103px -70px; }

.flag-16.flag-qa {
  background-position: -188px -121px; }

.flag-16.flag-ro {
  background-position: -205px -206px; }

.flag-16.flag-rs {
  background-position: -188px -189px; }

.flag-16.flag-ru {
  background-position: -239px -87px; }

.flag-16.flag-rw {
  background-position: -256px -172px; }

.flag-16.flag-sa {
  background-position: -256px -19px; }

.flag-16.flag-sb {
  background-position: -290px -87px; }

.flag-16.flag-sc {
  background-position: -69px -138px; }

.flag-16.flag-sd {
  background-position: -171px -172px; }

.flag-16.flag-se {
  background-position: -18px -2px; }

.flag-16.flag-sg {
  background-position: -120px -155px; }

.flag-16.flag-sh {
  background-position: -171px -121px; }

.flag-16.flag-si {
  background-position: -69px -155px; }

.flag-16.flag-sk {
  background-position: -188px -172px; }

.flag-16.flag-sl {
  background-position: -1px -206px; }

.flag-16.flag-sm {
  background-position: -35px -223px; }

.flag-16.flag-sn {
  background-position: -86px -87px; }

.flag-16.flag-so {
  background-position: -222px -87px; }

.flag-16.flag-sr {
  background-position: -35px -70px; }

.flag-16.flag-ss {
  background-position: -188px -104px; }

.flag-16.flag-st {
  background-position: -69px -53px; }

.flag-16.flag-sv {
  background-position: -205px -155px; }

.flag-16.flag-sy {
  background-position: -188px -36px; }

.flag-16.flag-sz {
  background-position: -222px -19px; }

.flag-16.flag-tc {
  background-position: -18px -53px; }

.flag-16.flag-td {
  background-position: -120px -53px; }

.flag-16.flag-tf {
  background-position: -154px -206px; }

.flag-16.flag-tg {
  background-position: -1px -87px; }

.flag-16.flag-th {
  background-position: -205px -121px; }

.flag-16.flag-tj {
  background-position: -205px -19px; }

.flag-16.flag-tk {
  background-position: -1px -223px; }

.flag-16.flag-tl {
  background-position: -154px -53px; }

.flag-16.flag-tm {
  background-position: -188px -87px; }

.flag-16.flag-tn {
  background-position: -188px -70px; }

.flag-16.flag-to {
  background-position: -290px -19px; }

.flag-16.flag-tr {
  background-position: -222px -172px; }

.flag-16.flag-tt {
  background-position: -52px -189px; }

.flag-16.flag-tv {
  background-position: -239px -36px; }

.flag-16.flag-tw {
  background-position: -171px -53px; }

.flag-16.flag-tz {
  background-position: -154px -104px; }

.flag-16.flag-ua {
  background-position: -120px -104px; }

.flag-16.flag-ug {
  background-position: -256px -155px; }

.flag-16.flag-us {
  background-position: -205px -87px; }

.flag-16.flag-uy {
  background-position: -239px -121px; }

.flag-16.flag-uz {
  background-position: -103px -189px; }

.flag-16.flag-va {
  background-position: -18px -189px; }

.flag-16.flag-vc {
  background-position: -52px -223px; }

.flag-16.flag-ve {
  background-position: -222px -36px; }

.flag-16.flag-vg {
  background-position: -137px -223px; }

.flag-16.flag-vi {
  background-position: -171px -36px; }

.flag-16.flag-vn {
  background-position: -273px -70px; }

.flag-16.flag-vu {
  background-position: -290px -121px; }

.flag-16.flag-wf {
  background-position: -35px -2px; }

.flag-16.flag-ws {
  background-position: -137px -189px; }

.flag-16.flag-ye {
  background-position: -52px -104px; }

.flag-16.flag-yt {
  background-position: -239px -189px; }

.flag-16.flag-za {
  background-position: -154px -138px; }

.flag-16.flag-zm {
  background-position: -154px -70px; }

.flag-16.flag-zw {
  background-position: -222px -2px; }

/**
 * Flags 32 provides flags in a 30x20 format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.flag-32 {
  display: inline-block;
  width: 30px;
  height: 20px;
  vertical-align: baseline;
  background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-32.png?800607295) no-repeat; }
  .flag-32.quality {
    background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-32-hq.png?800607295) no-repeat; }
  .flag-32.align-middle {
    vertical-align: middle; }

.flag-32 {
  background-position: -430px -567px; }

.flag-32.flag-ad {
  background-position: -166px -105px; }

.flag-32.flag-ae {
  background-position: -232px -138px; }

.flag-32.flag-af {
  background-position: -232px -72px; }

.flag-32.flag-ag {
  background-position: -67px -534px; }

.flag-32.flag-ai {
  background-position: -166px -270px; }

.flag-32.flag-al {
  background-position: -331px -138px; }

.flag-32.flag-am {
  background-position: -34px -402px; }

.flag-32.flag-an {
  background-position: -298px -171px; }

.flag-32.flag-ao {
  background-position: -430px -468px; }

.flag-32.flag-aq {
  background-position: -166px -171px; }

.flag-32.flag-ar {
  background-position: -298px -534px; }

.flag-32.flag-as {
  background-position: -430px -204px; }

.flag-32.flag-at {
  background-position: -34px -435px; }

.flag-32.flag-au {
  background-position: -430px -435px; }

.flag-32.flag-aw {
  background-position: -1px -171px; }

.flag-32.flag-ax {
  background-position: -34px -39px; }

.flag-32.flag-az {
  background-position: -34px -468px; }

.flag-32.flag-ba {
  background-position: -1px -39px; }

.flag-32.flag-bb {
  background-position: -67px -72px; }

.flag-32.flag-bd {
  background-position: -331px -171px; }

.flag-32.flag-be {
  background-position: -430px -336px; }

.flag-32.flag-bf {
  background-position: -133px -468px; }

.flag-32.flag-bg {
  background-position: -265px -204px; }

.flag-32.flag-bh {
  background-position: -133px -6px; }

.flag-32.flag-bi {
  background-position: -364px -270px; }

.flag-32.flag-bj {
  background-position: -100px -138px; }

.flag-32.flag-bl {
  background-position: -34px -567px; }

.flag-32.flag-bm {
  background-position: -67px -567px; }

.flag-32.flag-bn {
  background-position: -199px -468px; }

.flag-32.flag-bo {
  background-position: -232px -171px; }

.flag-32.flag-br {
  background-position: -199px -369px; }

.flag-32.flag-bs {
  background-position: -34px -204px; }

.flag-32.flag-bt {
  background-position: -67px -105px; }

.flag-32.flag-bw {
  background-position: -100px -435px; }

.flag-32.flag-by {
  background-position: -100px -567px; }

.flag-32.flag-bz {
  background-position: -397px -138px; }

.flag-32.flag-ca {
  background-position: -133px -435px; }

.flag-32.flag-cc {
  background-position: -100px -270px; }

.flag-32.flag-cd {
  background-position: -67px -171px; }

.flag-32.flag-cf {
  background-position: -34px -501px; }

.flag-32.flag-cg {
  background-position: -133px -72px; }

.flag-32.flag-ch {
  background-position: -199px -336px; }

.flag-32.flag-ci {
  background-position: -166px -435px; }

.flag-32.flag-ck {
  background-position: -265px -6px; }

.flag-32.flag-cl {
  background-position: -133px -171px; }

.flag-32.flag-cm {
  background-position: -34px -72px; }

.flag-32.flag-cn {
  background-position: -166px -204px; }

.flag-32.flag-co {
  background-position: -166px -39px; }

.flag-32.flag-cr {
  background-position: -364px -105px; }

.flag-32.flag-cu {
  background-position: -133px -237px; }

.flag-32.flag-cv {
  background-position: -298px -402px; }

.flag-32.flag-cw {
  background-position: -199px -171px; }

.flag-32.flag-cx {
  background-position: -364px -6px; }

.flag-32.flag-cy {
  background-position: -364px -402px; }

.flag-32.flag-cz {
  background-position: -397px -6px; }

.flag-32.flag-de {
  background-position: -265px -138px; }

.flag-32.flag-dj {
  background-position: -430px -237px; }

.flag-32.flag-dk {
  background-position: -67px -435px; }

.flag-32.flag-dm {
  background-position: -364px -72px; }

.flag-32.flag-do {
  background-position: -199px -237px; }

.flag-32.flag-dz {
  background-position: -67px -6px; }

.flag-32.flag-ec {
  background-position: -397px -369px; }

.flag-32.flag-ee {
  background-position: -232px -336px; }

.flag-32.flag-eg {
  background-position: -34px -171px; }

.flag-32.flag-eh {
  background-position: -166px -237px; }

.flag-32.flag-er {
  background-position: -199px -402px; }

.flag-32.flag-es {
  background-position: -133px -105px; }

.flag-32.flag-et {
  background-position: -34px -237px; }

.flag-32.flag-eu {
  background-position: -298px -468px; }

.flag-32.flag-fi {
  background-position: -364px -171px; }

.flag-32.flag-fj {
  background-position: -232px -534px; }

.flag-32.flag-fk {
  background-position: -265px -534px; }

.flag-32.flag-fm {
  background-position: -100px -39px; }

.flag-32.flag-fo {
  background-position: -34px -303px; }

.flag-32.flag-fr {
  background-position: -133px -501px; }

.flag-32.flag-ga {
  background-position: -1px -435px; }

.flag-32.flag-gb {
  background-position: -232px -105px; }

.flag-32.flag-gd {
  background-position: -298px -336px; }

.flag-32.flag-ge {
  background-position: -430px -270px; }

.flag-32.flag-gg {
  background-position: -199px -270px; }

.flag-32.flag-gh {
  background-position: -1px -105px; }

.flag-32.flag-gi {
  background-position: -1px -402px; }

.flag-32.flag-gl {
  background-position: -331px -270px; }

.flag-32.flag-gm {
  background-position: -430px -303px; }

.flag-32.flag-gn {
  background-position: -199px -105px; }

.flag-32.flag-gq {
  background-position: -232px -402px; }

.flag-32.flag-gr {
  background-position: -298px -105px; }

.flag-32.flag-gs {
  background-position: -265px -237px; }

.flag-32.flag-gt {
  background-position: -298px -237px; }

.flag-32.flag-gu {
  background-position: -265px -105px; }

.flag-32.flag-gw {
  background-position: -397px -303px; }

.flag-32.flag-gy {
  background-position: -298px -72px; }

.flag-32.flag-hk {
  background-position: -67px -336px; }

.flag-32.flag-hn {
  background-position: -199px -6px; }

.flag-32.flag-hr {
  background-position: -265px -501px; }

.flag-32.flag-ht {
  background-position: -1px -237px; }

.flag-32.flag-hu {
  background-position: -133px -138px; }

.flag-32.flag-ic {
  background-position: -298px -435px; }

.flag-32.flag-id {
  background-position: -166px -534px; }

.flag-32.flag-ie {
  background-position: -133px -567px; }

.flag-32.flag-il {
  background-position: -364px -435px; }

.flag-32.flag-im {
  background-position: -331px -105px; }

.flag-32.flag-in {
  background-position: -34px -270px; }

.flag-32.flag-iq {
  background-position: -1px -303px; }

.flag-32.flag-ir {
  background-position: -232px -501px; }

.flag-32.flag-is {
  background-position: -397px -435px; }

.flag-32.flag-it {
  background-position: -265px -369px; }

.flag-32.flag-je {
  background-position: -397px -402px; }

.flag-32.flag-jm {
  background-position: -331px -369px; }

.flag-32.flag-jo {
  background-position: -166px -72px; }

.flag-32.flag-jp {
  background-position: -430px -72px; }

.flag-32.flag-ke {
  background-position: -67px -468px; }

.flag-32.flag-kg {
  background-position: -1px -204px; }

.flag-32.flag-kh {
  background-position: -100px -303px; }

.flag-32.flag-ki {
  background-position: -331px -39px; }

.flag-32.flag-km {
  background-position: -265px -336px; }

.flag-32.flag-kn {
  background-position: -34px -6px; }

.flag-32.flag-kp {
  background-position: -133px -402px; }

.flag-32.flag-kr {
  background-position: -265px -270px; }

.flag-32.flag-kw {
  background-position: -67px -402px; }

.flag-32.flag-ky {
  background-position: -298px -204px; }

.flag-32.flag-kz {
  background-position: -298px -303px; }

.flag-32.flag-la {
  background-position: -67px -270px; }

.flag-32.flag-lb {
  background-position: -1px -270px; }

.flag-32.flag-lc {
  background-position: -265px -171px; }

.flag-32.flag-li {
  background-position: -232px -237px; }

.flag-32.flag-lk {
  background-position: -232px -6px; }

.flag-32.flag-lr {
  background-position: -100px -171px; }

.flag-32.flag-ls {
  background-position: -265px -39px; }

.flag-32.flag-lt {
  background-position: -100px -336px; }

.flag-32.flag-lu {
  background-position: -232px -468px; }

.flag-32.flag-lv {
  background-position: -100px -402px; }

.flag-32.flag-ly {
  background-position: -199px -204px; }

.flag-32.flag-ma {
  background-position: -331px -204px; }

.flag-32.flag-mc {
  background-position: -397px -336px; }

.flag-32.flag-md {
  background-position: -67px -39px; }

.flag-32.flag-me {
  background-position: -397px -204px; }

.flag-32.flag-mf {
  background-position: -166px -468px; }

.flag-32.flag-mg {
  background-position: -430px -138px; }

.flag-32.flag-mh {
  background-position: -364px -303px; }

.flag-32.flag-mk {
  background-position: -298px -501px; }

.flag-32.flag-ml {
  background-position: -34px -138px; }

.flag-32.flag-mm {
  background-position: -232px -39px; }

.flag-32.flag-mn {
  background-position: -364px -501px; }

.flag-32.flag-mo {
  background-position: -298px -6px; }

.flag-32.flag-mp {
  background-position: -364px -336px; }

.flag-32.flag-mq {
  background-position: -364px -204px; }

.flag-32.flag-mr {
  background-position: -199px -501px; }

.flag-32.flag-ms {
  background-position: -397px -501px; }

.flag-32.flag-mt {
  background-position: -1px -336px; }

.flag-32.flag-mu {
  background-position: -331px -6px; }

.flag-32.flag-mv {
  background-position: -100px -369px; }

.flag-32.flag-mw {
  background-position: -166px -6px; }

.flag-32.flag-mx {
  background-position: -1px -6px; }

.flag-32.flag-my {
  background-position: -298px -138px; }

.flag-32.flag-mz {
  background-position: -199px -303px; }

.flag-32.flag-na {
  background-position: -34px -534px; }

.flag-32.flag-nc {
  background-position: -1px -534px; }

.flag-32.flag-ne {
  background-position: -331px -534px; }

.flag-32.flag-nf {
  background-position: -100px -72px; }

.flag-32.flag-ng {
  background-position: -133px -369px; }

.flag-32.flag-ni {
  background-position: -364px -39px; }

.flag-32.flag-nl {
  background-position: -199px -435px; }

.flag-32.flag-no {
  background-position: -430px -6px; }

.flag-32.flag-np {
  background-position: -34px -336px; }

.flag-32.flag-nr {
  background-position: -397px -270px; }

.flag-32.flag-nu {
  background-position: -133px -303px; }

.flag-32.flag-nz {
  background-position: -265px -303px; }

.flag-32.flag-om {
  background-position: -430px -402px; }

.flag-32.flag-pa {
  background-position: -166px -501px; }

.flag-32.flag-pe {
  background-position: -265px -72px; }

.flag-32.flag-pf {
  background-position: -397px -171px; }

.flag-32.flag-pg {
  background-position: -1px -567px; }

.flag-32.flag-ph {
  background-position: -100px -534px; }

.flag-32.flag-pk {
  background-position: -1px -501px; }

.flag-32.flag-pl {
  background-position: -331px -402px; }

.flag-32.flag-pn {
  background-position: -100px -6px; }

.flag-32.flag-pr {
  background-position: -166px -402px; }

.flag-32.flag-ps {
  background-position: -331px -336px; }

.flag-32.flag-pt {
  background-position: -364px -138px; }

.flag-32.flag-pw {
  background-position: -166px -303px; }

.flag-32.flag-py {
  background-position: -364px -369px; }

.flag-32.flag-qa {
  background-position: -67px -303px; }

.flag-32.flag-ro {
  background-position: -1px -369px; }

.flag-32.flag-rs {
  background-position: -100px -501px; }

.flag-32.flag-ru {
  background-position: -166px -336px; }

.flag-32.flag-rw {
  background-position: -232px -270px; }

.flag-32.flag-sa {
  background-position: -100px -105px; }

.flag-32.flag-sb {
  background-position: -1px -468px; }

.flag-32.flag-sc {
  background-position: -331px -303px; }

.flag-32.flag-sd {
  background-position: -100px -237px; }

.flag-32.flag-se {
  background-position: -364px -468px; }

.flag-32.flag-sg {
  background-position: -430px -39px; }

.flag-32.flag-sh {
  background-position: -232px -369px; }

.flag-32.flag-si {
  background-position: -265px -435px; }

.flag-32.flag-sk {
  background-position: -67px -237px; }

.flag-32.flag-sl {
  background-position: -133px -39px; }

.flag-32.flag-sm {
  background-position: -166px -567px; }

.flag-32.flag-sn {
  background-position: -430px -105px; }

.flag-32.flag-so {
  background-position: -133px -534px; }

.flag-32.flag-sr {
  background-position: -67px -204px; }

.flag-32.flag-ss {
  background-position: -199px -534px; }

.flag-32.flag-st {
  background-position: -430px -369px; }

.flag-32.flag-sv {
  background-position: -199px -72px; }

.flag-32.flag-sy {
  background-position: -1px -72px; }

.flag-32.flag-sz {
  background-position: -232px -204px; }

.flag-32.flag-tc {
  background-position: -133px -336px; }

.flag-32.flag-td {
  background-position: -100px -204px; }

.flag-32.flag-tf {
  background-position: -133px -270px; }

.flag-32.flag-tg {
  background-position: -232px -303px; }

.flag-32.flag-th {
  background-position: -34px -369px; }

.flag-32.flag-tj {
  background-position: -397px -72px; }

.flag-32.flag-tk {
  background-position: -67px -138px; }

.flag-32.flag-tl {
  background-position: -397px -39px; }

.flag-32.flag-tm {
  background-position: -397px -105px; }

.flag-32.flag-tn {
  background-position: -331px -435px; }

.flag-32.flag-to {
  background-position: -265px -402px; }

.flag-32.flag-tr {
  background-position: -331px -72px; }

.flag-32.flag-tt {
  background-position: -166px -138px; }

.flag-32.flag-tv {
  background-position: -331px -237px; }

.flag-32.flag-tw {
  background-position: -100px -468px; }

.flag-32.flag-tz {
  background-position: -397px -237px; }

.flag-32.flag-ua {
  background-position: -331px -501px; }

.flag-32.flag-ug {
  background-position: -199px -138px; }

.flag-32.flag-us {
  background-position: -67px -369px; }

.flag-32.flag-uy {
  background-position: -265px -468px; }

.flag-32.flag-uz {
  background-position: -298px -369px; }

.flag-32.flag-va {
  background-position: -298px -39px; }

.flag-32.flag-vc {
  background-position: -67px -501px; }

.flag-32.flag-ve {
  background-position: -397px -468px; }

.flag-32.flag-vg {
  background-position: -199px -567px; }

.flag-32.flag-vi {
  background-position: -199px -39px; }

.flag-32.flag-vn {
  background-position: -232px -435px; }

.flag-32.flag-vu {
  background-position: -364px -237px; }

.flag-32.flag-wf {
  background-position: -166px -369px; }

.flag-32.flag-ws {
  background-position: -331px -468px; }

.flag-32.flag-ye {
  background-position: -133px -204px; }

.flag-32.flag-yt {
  background-position: -298px -270px; }

.flag-32.flag-za {
  background-position: -34px -105px; }

.flag-32.flag-zm {
  background-position: -430px -171px; }

.flag-32.flag-zw {
  background-position: -1px -138px; }

/**
 * Flags 64 provides flags in 60x40 format
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.flag-48,
.flag-64 {
  display: inline-block;
  width: 60px;
  height: 40px;
  vertical-align: baseline;
  background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-64.png?800607295) no-repeat; }
  .flag-48.quality,
  .flag-64.quality {
    background: transparent url(https://www.lollfl.com/asset/country/flag/png/flags-64-hq.png?800607295) no-repeat; }
  .flag-48.align-middle,
  .flag-64.align-middle {
    vertical-align: middle; }

.flag-48,
.flag-64 {
  background-position: -782px -1182px; }

.flag-48.flag-ad,
.flag-64.flag-ad {
  background-position: -782px -792px; }

.flag-48.flag-ae,
.flag-64.flag-ae {
  background-position: -717px -857px; }

.flag-48.flag-af,
.flag-64.flag-af {
  background-position: -522px -662px; }

.flag-48.flag-ag,
.flag-64.flag-ag {
  background-position: -262px -1182px; }

.flag-48.flag-ai,
.flag-64.flag-ai {
  background-position: -652px -1052px; }

.flag-48.flag-al,
.flag-64.flag-al {
  background-position: -132px -532px; }

.flag-48.flag-am,
.flag-64.flag-am {
  background-position: -392px -142px; }

.flag-48.flag-an,
.flag-64.flag-an {
  background-position: -197px -727px; }

.flag-48.flag-ao,
.flag-64.flag-ao {
  background-position: -587px -12px; }

.flag-48.flag-aq,
.flag-64.flag-aq {
  background-position: -197px -532px; }

.flag-48.flag-ar,
.flag-64.flag-ar {
  background-position: -327px -337px; }

.flag-48.flag-as,
.flag-64.flag-as {
  background-position: -392px -207px; }

.flag-48.flag-at,
.flag-64.flag-at {
  background-position: -2px -337px; }

.flag-48.flag-au,
.flag-64.flag-au {
  background-position: -67px -922px; }

.flag-48.flag-aw,
.flag-64.flag-aw {
  background-position: -132px -337px; }

.flag-48.flag-ax,
.flag-64.flag-ax {
  background-position: -67px -467px; }

.flag-48.flag-az,
.flag-64.flag-az {
  background-position: -327px -1117px; }

.flag-48.flag-ba,
.flag-64.flag-ba {
  background-position: -262px -922px; }

.flag-48.flag-bb,
.flag-64.flag-bb {
  background-position: -67px -77px; }

.flag-48.flag-bd,
.flag-64.flag-bd {
  background-position: -782px -272px; }

.flag-48.flag-be,
.flag-64.flag-be {
  background-position: -67px -402px; }

.flag-48.flag-bf,
.flag-64.flag-bf {
  background-position: -392px -1182px; }

.flag-48.flag-bg,
.flag-64.flag-bg {
  background-position: -2px -402px; }

.flag-48.flag-bh,
.flag-64.flag-bh {
  background-position: -67px -1182px; }

.flag-48.flag-bi,
.flag-64.flag-bi {
  background-position: -132px -1052px; }

.flag-48.flag-bj,
.flag-64.flag-bj {
  background-position: -392px -272px; }

.flag-48.flag-bl,
.flag-64.flag-bl {
  background-position: -132px -402px; }

.flag-48.flag-bm,
.flag-64.flag-bm {
  background-position: -197px -467px; }

.flag-48.flag-bn,
.flag-64.flag-bn {
  background-position: -262px -467px; }

.flag-48.flag-bo,
.flag-64.flag-bo {
  background-position: -717px -402px; }

.flag-48.flag-br,
.flag-64.flag-br {
  background-position: -132px -77px; }

.flag-48.flag-bs,
.flag-64.flag-bs {
  background-position: -457px -727px; }

.flag-48.flag-bt,
.flag-64.flag-bt {
  background-position: -717px -727px; }

.flag-48.flag-bw,
.flag-64.flag-bw {
  background-position: -197px -987px; }

.flag-48.flag-by,
.flag-64.flag-by {
  background-position: -652px -727px; }

.flag-48.flag-bz,
.flag-64.flag-bz {
  background-position: -717px -207px; }

.flag-48.flag-ca,
.flag-64.flag-ca {
  background-position: -67px -1117px; }

.flag-48.flag-cc,
.flag-64.flag-cc {
  background-position: -457px -77px; }

.flag-48.flag-cd,
.flag-64.flag-cd {
  background-position: -197px -142px; }

.flag-48.flag-cf,
.flag-64.flag-cf {
  background-position: -782px -1052px; }

.flag-48.flag-cg,
.flag-64.flag-cg {
  background-position: -717px -1117px; }

.flag-48.flag-ch,
.flag-64.flag-ch {
  background-position: -262px -77px; }

.flag-48.flag-ci,
.flag-64.flag-ci {
  background-position: -392px -402px; }

.flag-48.flag-ck,
.flag-64.flag-ck {
  background-position: -132px -987px; }

.flag-48.flag-cl,
.flag-64.flag-cl {
  background-position: -587px -662px; }

.flag-48.flag-cm,
.flag-64.flag-cm {
  background-position: -392px -792px; }

.flag-48.flag-cn,
.flag-64.flag-cn {
  background-position: -327px -662px; }

.flag-48.flag-co,
.flag-64.flag-co {
  background-position: -652px -77px; }

.flag-48.flag-cr,
.flag-64.flag-cr {
  background-position: -522px -402px; }

.flag-48.flag-cu,
.flag-64.flag-cu {
  background-position: -327px -532px; }

.flag-48.flag-cv,
.flag-64.flag-cv {
  background-position: -2px -467px; }

.flag-48.flag-cw,
.flag-64.flag-cw {
  background-position: -132px -12px; }

.flag-48.flag-cx,
.flag-64.flag-cx {
  background-position: -262px -207px; }

.flag-48.flag-cy,
.flag-64.flag-cy {
  background-position: -782px -987px; }

.flag-48.flag-cz,
.flag-64.flag-cz {
  background-position: -327px -727px; }

.flag-48.flag-de,
.flag-64.flag-de {
  background-position: -717px -77px; }

.flag-48.flag-dj,
.flag-64.flag-dj {
  background-position: -197px -272px; }

.flag-48.flag-dk,
.flag-64.flag-dk {
  background-position: -262px -402px; }

.flag-48.flag-dm,
.flag-64.flag-dm {
  background-position: -67px -662px; }

.flag-48.flag-do,
.flag-64.flag-do {
  background-position: -782px -922px; }

.flag-48.flag-dz,
.flag-64.flag-dz {
  background-position: -652px -532px; }

.flag-48.flag-ec,
.flag-64.flag-ec {
  background-position: -2px -532px; }

.flag-48.flag-ee,
.flag-64.flag-ee {
  background-position: -392px -922px; }

.flag-48.flag-eg,
.flag-64.flag-eg {
  background-position: -2px -857px; }

.flag-48.flag-eh,
.flag-64.flag-eh {
  background-position: -457px -922px; }

.flag-48.flag-er,
.flag-64.flag-er {
  background-position: -652px -207px; }

.flag-48.flag-es,
.flag-64.flag-es {
  background-position: -197px -207px; }

.flag-48.flag-et,
.flag-64.flag-et {
  background-position: -782px -662px; }

.flag-48.flag-eu,
.flag-64.flag-eu {
  background-position: -782px -857px; }

.flag-48.flag-fi,
.flag-64.flag-fi {
  background-position: -197px -77px; }

.flag-48.flag-fj,
.flag-64.flag-fj {
  background-position: -652px -987px; }

.flag-48.flag-fk,
.flag-64.flag-fk {
  background-position: -392px -467px; }

.flag-48.flag-fm,
.flag-64.flag-fm {
  background-position: -327px -792px; }

.flag-48.flag-fo,
.flag-64.flag-fo {
  background-position: -457px -402px; }

.flag-48.flag-fr,
.flag-64.flag-fr {
  background-position: -132px -467px; }

.flag-48.flag-ga,
.flag-64.flag-ga {
  background-position: -2px -662px; }

.flag-48.flag-gb,
.flag-64.flag-gb {
  background-position: -197px -1052px; }

.flag-48.flag-gd,
.flag-64.flag-gd {
  background-position: -2px -1052px; }

.flag-48.flag-ge,
.flag-64.flag-ge {
  background-position: -587px -727px; }

.flag-48.flag-gg,
.flag-64.flag-gg {
  background-position: -587px -402px; }

.flag-48.flag-gh,
.flag-64.flag-gh {
  background-position: -457px -662px; }

.flag-48.flag-gi,
.flag-64.flag-gi {
  background-position: -782px -77px; }

.flag-48.flag-gl,
.flag-64.flag-gl {
  background-position: -2px -12px; }

.flag-48.flag-gm,
.flag-64.flag-gm {
  background-position: -132px -597px; }

.flag-48.flag-gn,
.flag-64.flag-gn {
  background-position: -457px -987px; }

.flag-48.flag-gq,
.flag-64.flag-gq {
  background-position: -67px -727px; }

.flag-48.flag-gr,
.flag-64.flag-gr {
  background-position: -2px -272px; }

.flag-48.flag-gs,
.flag-64.flag-gs {
  background-position: -327px -207px; }

.flag-48.flag-gt,
.flag-64.flag-gt {
  background-position: -392px -1117px; }

.flag-48.flag-gu,
.flag-64.flag-gu {
  background-position: -717px -792px; }

.flag-48.flag-gw,
.flag-64.flag-gw {
  background-position: -327px -272px; }

.flag-48.flag-gy,
.flag-64.flag-gy {
  background-position: -652px -467px; }

.flag-48.flag-hk,
.flag-64.flag-hk {
  background-position: -262px -792px; }

.flag-48.flag-hn,
.flag-64.flag-hn {
  background-position: -2px -792px; }

.flag-48.flag-hr,
.flag-64.flag-hr {
  background-position: -457px -467px; }

.flag-48.flag-ht,
.flag-64.flag-ht {
  background-position: -392px -77px; }

.flag-48.flag-hu,
.flag-64.flag-hu {
  background-position: -652px -337px; }

.flag-48.flag-ic,
.flag-64.flag-ic {
  background-position: -197px -792px; }

.flag-48.flag-id,
.flag-64.flag-id {
  background-position: -67px -207px; }

.flag-48.flag-ie,
.flag-64.flag-ie {
  background-position: -652px -272px; }

.flag-48.flag-il,
.flag-64.flag-il {
  background-position: -652px -142px; }

.flag-48.flag-im,
.flag-64.flag-im {
  background-position: -587px -1117px; }

.flag-48.flag-in,
.flag-64.flag-in {
  background-position: -457px -1182px; }

.flag-48.flag-iq,
.flag-64.flag-iq {
  background-position: -197px -337px; }

.flag-48.flag-ir,
.flag-64.flag-ir {
  background-position: -522px -532px; }

.flag-48.flag-is,
.flag-64.flag-is {
  background-position: -132px -1117px; }

.flag-48.flag-it,
.flag-64.flag-it {
  background-position: -132px -727px; }

.flag-48.flag-je,
.flag-64.flag-je {
  background-position: -262px -532px; }

.flag-48.flag-jm,
.flag-64.flag-jm {
  background-position: -457px -1052px; }

.flag-48.flag-jo,
.flag-64.flag-jo {
  background-position: -67px -987px; }

.flag-48.flag-jp,
.flag-64.flag-jp {
  background-position: -392px -1052px; }

.flag-48.flag-ke,
.flag-64.flag-ke {
  background-position: -67px -1052px; }

.flag-48.flag-kg,
.flag-64.flag-kg {
  background-position: -587px -207px; }

.flag-48.flag-kh,
.flag-64.flag-kh {
  background-position: -587px -922px; }

.flag-48.flag-ki,
.flag-64.flag-ki {
  background-position: -197px -662px; }

.flag-48.flag-km,
.flag-64.flag-km {
  background-position: -197px -922px; }

.flag-48.flag-kn,
.flag-64.flag-kn {
  background-position: -327px -597px; }

.flag-48.flag-kp,
.flag-64.flag-kp {
  background-position: -652px -662px; }

.flag-48.flag-kr,
.flag-64.flag-kr {
  background-position: -132px -662px; }

.flag-48.flag-kw,
.flag-64.flag-kw {
  background-position: -392px -337px; }

.flag-48.flag-ky,
.flag-64.flag-ky {
  background-position: -67px -792px; }

.flag-48.flag-kz,
.flag-64.flag-kz {
  background-position: -197px -1182px; }

.flag-48.flag-la,
.flag-64.flag-la {
  background-position: -132px -272px; }

.flag-48.flag-lb,
.flag-64.flag-lb {
  background-position: -197px -1117px; }

.flag-48.flag-lc,
.flag-64.flag-lc {
  background-position: -392px -987px; }

.flag-48.flag-li,
.flag-64.flag-li {
  background-position: -197px -402px; }

.flag-48.flag-lk,
.flag-64.flag-lk {
  background-position: -587px -532px; }

.flag-48.flag-lr,
.flag-64.flag-lr {
  background-position: -457px -272px; }

.flag-48.flag-ls,
.flag-64.flag-ls {
  background-position: -392px -857px; }

.flag-48.flag-lt,
.flag-64.flag-lt {
  background-position: -327px -467px; }

.flag-48.flag-lu,
.flag-64.flag-lu {
  background-position: -392px -12px; }

.flag-48.flag-lv,
.flag-64.flag-lv {
  background-position: -782px -337px; }

.flag-48.flag-ly,
.flag-64.flag-ly {
  background-position: -262px -337px; }

.flag-48.flag-ma,
.flag-64.flag-ma {
  background-position: -67px -272px; }

.flag-48.flag-mc,
.flag-64.flag-mc {
  background-position: -457px -1117px; }

.flag-48.flag-md,
.flag-64.flag-md {
  background-position: -327px -857px; }

.flag-48.flag-me,
.flag-64.flag-me {
  background-position: -327px -142px; }

.flag-48.flag-mf,
.flag-64.flag-mf {
  background-position: -262px -272px; }

.flag-48.flag-mg,
.flag-64.flag-mg {
  background-position: -717px -597px; }

.flag-48.flag-mh,
.flag-64.flag-mh {
  background-position: -2px -1182px; }

.flag-48.flag-mk,
.flag-64.flag-mk {
  background-position: -587px -792px; }

.flag-48.flag-ml,
.flag-64.flag-ml {
  background-position: -782px -12px; }

.flag-48.flag-mm,
.flag-64.flag-mm {
  background-position: -782px -207px; }

.flag-48.flag-mn,
.flag-64.flag-mn {
  background-position: -587px -337px; }

.flag-48.flag-mo,
.flag-64.flag-mo {
  background-position: -587px -597px; }

.flag-48.flag-mp,
.flag-64.flag-mp {
  background-position: -522px -12px; }

.flag-48.flag-mq,
.flag-64.flag-mq {
  background-position: -262px -1052px; }

.flag-48.flag-mr,
.flag-64.flag-mr {
  background-position: -782px -727px; }

.flag-48.flag-ms,
.flag-64.flag-ms {
  background-position: -262px -857px; }

.flag-48.flag-mt,
.flag-64.flag-mt {
  background-position: -652px -402px; }

.flag-48.flag-mu,
.flag-64.flag-mu {
  background-position: -457px -142px; }

.flag-48.flag-mv,
.flag-64.flag-mv {
  background-position: -327px -1052px; }

.flag-48.flag-mw,
.flag-64.flag-mw {
  background-position: -262px -12px; }

.flag-48.flag-mx,
.flag-64.flag-mx {
  background-position: -717px -12px; }

.flag-48.flag-my,
.flag-64.flag-my {
  background-position: -782px -532px; }

.flag-48.flag-mz,
.flag-64.flag-mz {
  background-position: -132px -1182px; }

.flag-48.flag-na,
.flag-64.flag-na {
  background-position: -457px -532px; }

.flag-48.flag-nc,
.flag-64.flag-nc {
  background-position: -132px -857px; }

.flag-48.flag-ne,
.flag-64.flag-ne {
  background-position: -327px -1182px; }

.flag-48.flag-nf,
.flag-64.flag-nf {
  background-position: -392px -532px; }

.flag-48.flag-ng,
.flag-64.flag-ng {
  background-position: -717px -142px; }

.flag-48.flag-ni,
.flag-64.flag-ni {
  background-position: -652px -857px; }

.flag-48.flag-nl,
.flag-64.flag-nl {
  background-position: -717px -532px; }

.flag-48.flag-no,
.flag-64.flag-no {
  background-position: -652px -922px; }

.flag-48.flag-np,
.flag-64.flag-np {
  background-position: -717px -922px; }

.flag-48.flag-nr,
.flag-64.flag-nr {
  background-position: -522px -142px; }

.flag-48.flag-nu,
.flag-64.flag-nu {
  background-position: -717px -662px; }

.flag-48.flag-nz,
.flag-64.flag-nz {
  background-position: -652px -792px; }

.flag-48.flag-om,
.flag-64.flag-om {
  background-position: -717px -1052px; }

.flag-48.flag-pa,
.flag-64.flag-pa {
  background-position: -587px -987px; }

.flag-48.flag-pe,
.flag-64.flag-pe {
  background-position: -587px -857px; }

.flag-48.flag-pf,
.flag-64.flag-pf {
  background-position: -717px -987px; }

.flag-48.flag-pg,
.flag-64.flag-pg {
  background-position: -262px -727px; }

.flag-48.flag-ph,
.flag-64.flag-ph {
  background-position: -587px -1052px; }

.flag-48.flag-pk,
.flag-64.flag-pk {
  background-position: -522px -467px; }

.flag-48.flag-pl,
.flag-64.flag-pl {
  background-position: -2px -597px; }

.flag-48.flag-pn,
.flag-64.flag-pn {
  background-position: -2px -727px; }

.flag-48.flag-pr,
.flag-64.flag-pr {
  background-position: -262px -987px; }

.flag-48.flag-ps,
.flag-64.flag-ps {
  background-position: -262px -142px; }

.flag-48.flag-pt,
.flag-64.flag-pt {
  background-position: -327px -987px; }

.flag-48.flag-pw,
.flag-64.flag-pw {
  background-position: -522px -207px; }

.flag-48.flag-py,
.flag-64.flag-py {
  background-position: -522px -272px; }

.flag-48.flag-qa,
.flag-64.flag-qa {
  background-position: -652px -1117px; }

.flag-48.flag-ro,
.flag-64.flag-ro {
  background-position: -717px -467px; }

.flag-48.flag-rs,
.flag-64.flag-rs {
  background-position: -522px -77px; }

.flag-48.flag-ru,
.flag-64.flag-ru {
  background-position: -522px -922px; }

.flag-48.flag-rw,
.flag-64.flag-rw {
  background-position: -2px -207px; }

.flag-48.flag-sa,
.flag-64.flag-sa {
  background-position: -197px -857px; }

.flag-48.flag-sb,
.flag-64.flag-sb {
  background-position: -587px -272px; }

.flag-48.flag-sc,
.flag-64.flag-sc {
  background-position: -717px -272px; }

.flag-48.flag-sd,
.flag-64.flag-sd {
  background-position: -262px -597px; }

.flag-48.flag-se,
.flag-64.flag-se {
  background-position: -197px -597px; }

.flag-48.flag-sg,
.flag-64.flag-sg {
  background-position: -522px -597px; }

.flag-48.flag-sh,
.flag-64.flag-sh {
  background-position: -392px -662px; }

.flag-48.flag-si,
.flag-64.flag-si {
  background-position: -457px -207px; }

.flag-48.flag-sk,
.flag-64.flag-sk {
  background-position: -327px -77px; }

.flag-48.flag-sl,
.flag-64.flag-sl {
  background-position: -2px -987px; }

.flag-48.flag-sm,
.flag-64.flag-sm {
  background-position: -2px -142px; }

.flag-48.flag-sn,
.flag-64.flag-sn {
  background-position: -457px -337px; }

.flag-48.flag-so,
.flag-64.flag-so {
  background-position: -2px -77px; }

.flag-48.flag-sr,
.flag-64.flag-sr {
  background-position: -262px -662px; }

.flag-48.flag-ss,
.flag-64.flag-ss {
  background-position: -457px -12px; }

.flag-48.flag-st,
.flag-64.flag-st {
  background-position: -522px -337px; }

.flag-48.flag-sv,
.flag-64.flag-sv {
  background-position: -587px -142px; }

.flag-48.flag-sy,
.flag-64.flag-sy {
  background-position: -67px -337px; }

.flag-48.flag-sz,
.flag-64.flag-sz {
  background-position: -782px -467px; }

.flag-48.flag-tc,
.flag-64.flag-tc {
  background-position: -522px -792px; }

.flag-48.flag-td,
.flag-64.flag-td {
  background-position: -67px -857px; }

.flag-48.flag-tf,
.flag-64.flag-tf {
  background-position: -197px -12px; }

.flag-48.flag-tg,
.flag-64.flag-tg {
  background-position: -522px -857px; }

.flag-48.flag-th,
.flag-64.flag-th {
  background-position: -522px -987px; }

.flag-48.flag-tj,
.flag-64.flag-tj {
  background-position: -652px -12px; }

.flag-48.flag-tk,
.flag-64.flag-tk {
  background-position: -392px -597px; }

.flag-48.flag-tl,
.flag-64.flag-tl {
  background-position: -2px -922px; }

.flag-48.flag-tm,
.flag-64.flag-tm {
  background-position: -327px -922px; }

.flag-48.flag-tn,
.flag-64.flag-tn {
  background-position: -782px -142px; }

.flag-48.flag-to,
.flag-64.flag-to {
  background-position: -457px -792px; }

.flag-48.flag-tr,
.flag-64.flag-tr {
  background-position: -717px -337px; }

.flag-48.flag-tt,
.flag-64.flag-tt {
  background-position: -327px -402px; }

.flag-48.flag-tv,
.flag-64.flag-tv {
  background-position: -132px -792px; }

.flag-48.flag-tw,
.flag-64.flag-tw {
  background-position: -782px -402px; }

.flag-48.flag-tz,
.flag-64.flag-tz {
  background-position: -457px -857px; }

.flag-48.flag-ua,
.flag-64.flag-ua {
  background-position: -132px -922px; }

.flag-48.flag-ug,
.flag-64.flag-ug {
  background-position: -132px -207px; }

.flag-48.flag-us,
.flag-64.flag-us {
  background-position: -67px -12px; }

.flag-48.flag-uy,
.flag-64.flag-uy {
  background-position: -587px -77px; }

.flag-48.flag-uz,
.flag-64.flag-uz {
  background-position: -327px -12px; }

.flag-48.flag-va,
.flag-64.flag-va {
  background-position: -262px -1117px; }

.flag-48.flag-vc,
.flag-64.flag-vc {
  background-position: -392px -727px; }

.flag-48.flag-ve,
.flag-64.flag-ve {
  background-position: -587px -467px; }

.flag-48.flag-vg,
.flag-64.flag-vg {
  background-position: -522px -1052px; }

.flag-48.flag-vi,
.flag-64.flag-vi {
  background-position: -652px -597px; }

.flag-48.flag-vn,
.flag-64.flag-vn {
  background-position: -522px -1117px; }

.flag-48.flag-vu,
.flag-64.flag-vu {
  background-position: -522px -727px; }

.flag-48.flag-wf,
.flag-64.flag-wf {
  background-position: -457px -597px; }

.flag-48.flag-ws,
.flag-64.flag-ws {
  background-position: -67px -142px; }

.flag-48.flag-ye,
.flag-64.flag-ye {
  background-position: -2px -1117px; }

.flag-48.flag-yt,
.flag-64.flag-yt {
  background-position: -67px -532px; }

.flag-48.flag-za,
.flag-64.flag-za {
  background-position: -132px -142px; }

.flag-48.flag-zm,
.flag-64.flag-zm {
  background-position: -782px -597px; }

.flag-48.flag-zw,
.flag-64.flag-zw {
  background-position: -67px -597px; }

/**
 * Includes all design styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * domain component styling the "design" elements
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.design .design-item {
  margin: 0 0 var(--sizing-space-large) 0; }
  .design .design-item .demo {
    padding: var(--sizing-space-medium);
    box-sizing: border-box;
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .design .design-item .demo.light, .design .design-item .demo.sandboxed {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
      border-color: transparent; }
    .design .design-item .demo.medium, .design .design-item .demo.sandboxed-medium {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
      border-color: transparent; }
    .design .design-item .demo.inverted, .design .design-item .demo.sandboxed-inverted {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
      border-color: transparent; }
    .design .design-item .demo.sandboxed-tv {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
      background: url(https://www.lollfl.com/asset/demo/tv/background_pattern.jpg?800607295) repeat;
      border-color: transparent; }
    .design .design-item .demo.transparent {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB5PSIxMiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRUVFRUVFIi8+CjxyZWN0IHg9IjEyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9IiNFRUVFRUUiLz4KPC9zdmc+Cg==");
      border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .design .design-item .demo.spaceless {
      padding: 0; }
    .design .design-item .demo.space-reduced > .content {
      width: 25rem; }
    .design .design-item .demo .guideline {
      color: inherit !important;
      background: rgba(138, 43, 226, 0.2) !important;
      background-clip: content-box; }
  .design .design-item .toolbar {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .design .design-item .code {
    margin: 0; }
  .design .design-item .code.hidden {
    display: none; }

/**
 * domain component styling the "color" base variables
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.design .color-standard {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .bg-color-standard {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .border-color-standard {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .hue-standard:after {
  content: 'H'; }

.design .saturation-standard:after {
  content: 'S'; }

.design .lightness-standard:after {
  content: 'L'; }

.design .background .hue-standard, .design .background .saturation-standard, .design .background .lightness-standard {
  color: white; }

.design .color-standard-top {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

.design .bg-color-standard-top {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

.design .border-color-standard-top {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

.design .hue-standard-top:after {
  content: 'H'; }

.design .saturation-standard-top:after {
  content: 'S'; }

.design .lightness-standard-top:after {
  content: 'L'; }

.design .background .hue-standard-top, .design .background .saturation-standard-top, .design .background .lightness-standard-top {
  color: white; }

.design .color-standard-high5 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.design .bg-color-standard-high5 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.design .border-color-standard-high5 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

.design .hue-standard-high5:after {
  content: 'H'; }

.design .saturation-standard-high5:after {
  content: 'S'; }

.design .lightness-standard-high5:after {
  content: 'L'; }

.design .background .hue-standard-high5, .design .background .saturation-standard-high5, .design .background .lightness-standard-high5 {
  color: white; }

.design .color-standard-high4 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }

.design .bg-color-standard-high4 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }

.design .border-color-standard-high4 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }

.design .hue-standard-high4:after {
  content: 'H'; }

.design .saturation-standard-high4:after {
  content: 'S'; }

.design .lightness-standard-high4:after {
  content: 'L'; }

.design .background .hue-standard-high4, .design .background .saturation-standard-high4, .design .background .lightness-standard-high4 {
  color: white; }

.design .color-standard-high3 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

.design .bg-color-standard-high3 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

.design .border-color-standard-high3 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

.design .hue-standard-high3:after {
  content: 'H'; }

.design .saturation-standard-high3:after {
  content: 'S'; }

.design .lightness-standard-high3:after {
  content: 'L'; }

.design .background .hue-standard-high3, .design .background .saturation-standard-high3, .design .background .lightness-standard-high3 {
  color: white; }

.design .color-standard-high2 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.design .bg-color-standard-high2 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.design .border-color-standard-high2 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.design .hue-standard-high2:after {
  content: 'H'; }

.design .saturation-standard-high2:after {
  content: 'S'; }

.design .lightness-standard-high2:after {
  content: 'L'; }

.design .background .hue-standard-high2, .design .background .saturation-standard-high2, .design .background .lightness-standard-high2 {
  color: white; }

.design .color-standard-high1 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.design .bg-color-standard-high1 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.design .border-color-standard-high1 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }

.design .hue-standard-high1:after {
  content: 'H'; }

.design .saturation-standard-high1:after {
  content: 'S'; }

.design .lightness-standard-high1:after {
  content: 'L'; }

.design .background .hue-standard-high1, .design .background .saturation-standard-high1, .design .background .lightness-standard-high1 {
  color: white; }

.design .color-standard-medium {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .bg-color-standard-medium {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .border-color-standard-medium {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

.design .hue-standard-medium:after {
  content: 'H'; }

.design .saturation-standard-medium:after {
  content: 'S'; }

.design .lightness-standard-medium:after {
  content: 'L'; }

.design .background .hue-standard-medium, .design .background .saturation-standard-medium, .design .background .lightness-standard-medium {
  color: white; }

.design .color-standard-low1 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low1)); }

.design .bg-color-standard-low1 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low1)); }

.design .border-color-standard-low1 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low1)); }

.design .hue-standard-low1:after {
  content: 'H'; }

.design .saturation-standard-low1:after {
  content: 'S'; }

.design .lightness-standard-low1:after {
  content: 'L'; }

.design .background .hue-standard-low1, .design .background .saturation-standard-low1, .design .background .lightness-standard-low1 {
  color: white; }

.design .color-standard-low2 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }

.design .bg-color-standard-low2 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }

.design .border-color-standard-low2 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }

.design .hue-standard-low2:after {
  content: 'H'; }

.design .saturation-standard-low2:after {
  content: 'S'; }

.design .lightness-standard-low2:after {
  content: 'L'; }

.design .background .hue-standard-low2, .design .background .saturation-standard-low2, .design .background .lightness-standard-low2 {
  color: white; }

.design .color-standard-low3 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }

.design .bg-color-standard-low3 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }

.design .border-color-standard-low3 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }

.design .hue-standard-low3:after {
  content: 'H'; }

.design .saturation-standard-low3:after {
  content: 'S'; }

.design .lightness-standard-low3:after {
  content: 'L'; }

.design .background .hue-standard-low3, .design .background .saturation-standard-low3, .design .background .lightness-standard-low3 {
  color: white; }

.design .color-standard-low4 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }

.design .bg-color-standard-low4 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }

.design .border-color-standard-low4 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)); }

.design .hue-standard-low4:after {
  content: 'H'; }

.design .saturation-standard-low4:after {
  content: 'S'; }

.design .lightness-standard-low4:after {
  content: 'L'; }

.design .background .hue-standard-low4, .design .background .saturation-standard-low4, .design .background .lightness-standard-low4 {
  color: white; }

.design .color-standard-low5 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5)); }

.design .bg-color-standard-low5 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5)); }

.design .border-color-standard-low5 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5)); }

.design .hue-standard-low5:after {
  content: 'H'; }

.design .saturation-standard-low5:after {
  content: 'S'; }

.design .lightness-standard-low5:after {
  content: 'L'; }

.design .background .hue-standard-low5, .design .background .saturation-standard-low5, .design .background .lightness-standard-low5 {
  color: white; }

.design .color-standard-bottom {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

.design .bg-color-standard-bottom {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

.design .border-color-standard-bottom {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

.design .hue-standard-bottom:after {
  content: 'H'; }

.design .saturation-standard-bottom:after {
  content: 'S'; }

.design .lightness-standard-bottom:after {
  content: 'L'; }

.design .background .hue-standard-bottom, .design .background .saturation-standard-bottom, .design .background .lightness-standard-bottom {
  color: white; }

.design .color-standard-i_top {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }

.design .bg-color-standard-i_top {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }

.design .border-color-standard-i_top {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }

.design .hue-standard-i_top:after {
  content: 'H'; }

.design .saturation-standard-i_top:after {
  content: 'S'; }

.design .lightness-standard-i_top:after {
  content: 'L'; }

.design .background .hue-standard-i_top, .design .background .saturation-standard-i_top, .design .background .lightness-standard-i_top {
  color: white; }

.design .color-standard-i_high5 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

.design .bg-color-standard-i_high5 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

.design .border-color-standard-i_high5 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

.design .hue-standard-i_high5:after {
  content: 'H'; }

.design .saturation-standard-i_high5:after {
  content: 'S'; }

.design .lightness-standard-i_high5:after {
  content: 'L'; }

.design .background .hue-standard-i_high5, .design .background .saturation-standard-i_high5, .design .background .lightness-standard-i_high5 {
  color: white; }

.design .color-standard-i_high4 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.design .bg-color-standard-i_high4 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.design .border-color-standard-i_high4 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

.design .hue-standard-i_high4:after {
  content: 'H'; }

.design .saturation-standard-i_high4:after {
  content: 'S'; }

.design .lightness-standard-i_high4:after {
  content: 'L'; }

.design .background .hue-standard-i_high4, .design .background .saturation-standard-i_high4, .design .background .lightness-standard-i_high4 {
  color: white; }

.design .color-standard-i_high3 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

.design .bg-color-standard-i_high3 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

.design .border-color-standard-i_high3 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

.design .hue-standard-i_high3:after {
  content: 'H'; }

.design .saturation-standard-i_high3:after {
  content: 'S'; }

.design .lightness-standard-i_high3:after {
  content: 'L'; }

.design .background .hue-standard-i_high3, .design .background .saturation-standard-i_high3, .design .background .lightness-standard-i_high3 {
  color: white; }

.design .color-standard-i_high2 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

.design .bg-color-standard-i_high2 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

.design .border-color-standard-i_high2 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

.design .hue-standard-i_high2:after {
  content: 'H'; }

.design .saturation-standard-i_high2:after {
  content: 'S'; }

.design .lightness-standard-i_high2:after {
  content: 'L'; }

.design .background .hue-standard-i_high2, .design .background .saturation-standard-i_high2, .design .background .lightness-standard-i_high2 {
  color: white; }

.design .color-standard-i_high1 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high1)); }

.design .bg-color-standard-i_high1 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high1)); }

.design .border-color-standard-i_high1 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high1)); }

.design .hue-standard-i_high1:after {
  content: 'H'; }

.design .saturation-standard-i_high1:after {
  content: 'S'; }

.design .lightness-standard-i_high1:after {
  content: 'L'; }

.design .background .hue-standard-i_high1, .design .background .saturation-standard-i_high1, .design .background .lightness-standard-i_high1 {
  color: white; }

.design .color-standard-i_medium {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

.design .bg-color-standard-i_medium {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

.design .border-color-standard-i_medium {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

.design .hue-standard-i_medium:after {
  content: 'H'; }

.design .saturation-standard-i_medium:after {
  content: 'S'; }

.design .lightness-standard-i_medium:after {
  content: 'L'; }

.design .background .hue-standard-i_medium, .design .background .saturation-standard-i_medium, .design .background .lightness-standard-i_medium {
  color: white; }

.design .color-standard-i_low1 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low1)); }

.design .bg-color-standard-i_low1 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low1)); }

.design .border-color-standard-i_low1 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low1)); }

.design .hue-standard-i_low1:after {
  content: 'H'; }

.design .saturation-standard-i_low1:after {
  content: 'S'; }

.design .lightness-standard-i_low1:after {
  content: 'L'; }

.design .background .hue-standard-i_low1, .design .background .saturation-standard-i_low1, .design .background .lightness-standard-i_low1 {
  color: white; }

.design .color-standard-i_low2 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }

.design .bg-color-standard-i_low2 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }

.design .border-color-standard-i_low2 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2)); }

.design .hue-standard-i_low2:after {
  content: 'H'; }

.design .saturation-standard-i_low2:after {
  content: 'S'; }

.design .lightness-standard-i_low2:after {
  content: 'L'; }

.design .background .hue-standard-i_low2, .design .background .saturation-standard-i_low2, .design .background .lightness-standard-i_low2 {
  color: white; }

.design .color-standard-i_low3 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }

.design .bg-color-standard-i_low3 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }

.design .border-color-standard-i_low3 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }

.design .hue-standard-i_low3:after {
  content: 'H'; }

.design .saturation-standard-i_low3:after {
  content: 'S'; }

.design .lightness-standard-i_low3:after {
  content: 'L'; }

.design .background .hue-standard-i_low3, .design .background .saturation-standard-i_low3, .design .background .lightness-standard-i_low3 {
  color: white; }

.design .color-standard-i_low4 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low4)); }

.design .bg-color-standard-i_low4 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low4)); }

.design .border-color-standard-i_low4 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low4)); }

.design .hue-standard-i_low4:after {
  content: 'H'; }

.design .saturation-standard-i_low4:after {
  content: 'S'; }

.design .lightness-standard-i_low4:after {
  content: 'L'; }

.design .background .hue-standard-i_low4, .design .background .saturation-standard-i_low4, .design .background .lightness-standard-i_low4 {
  color: white; }

.design .color-standard-i_low5 {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5)); }

.design .bg-color-standard-i_low5 {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5)); }

.design .border-color-standard-i_low5 {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low5)); }

.design .hue-standard-i_low5:after {
  content: 'H'; }

.design .saturation-standard-i_low5:after {
  content: 'S'; }

.design .lightness-standard-i_low5:after {
  content: 'L'; }

.design .background .hue-standard-i_low5, .design .background .saturation-standard-i_low5, .design .background .lightness-standard-i_low5 {
  color: white; }

.design .color-standard-i_bottom {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

.design .bg-color-standard-i_bottom {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

.design .border-color-standard-i_bottom {
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

.design .hue-standard-i_bottom:after {
  content: 'H'; }

.design .saturation-standard-i_bottom:after {
  content: 'S'; }

.design .lightness-standard-i_bottom:after {
  content: 'L'; }

.design .background .hue-standard-i_bottom, .design .background .saturation-standard-i_bottom, .design .background .lightness-standard-i_bottom {
  color: white; }

.design .color-primary {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .bg-color-primary {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .border-color-primary {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .hue-primary:after {
  content: 'H'; }

.design .saturation-primary:after {
  content: 'S'; }

.design .lightness-primary:after {
  content: 'L'; }

.design .background .hue-primary, .design .background .saturation-primary, .design .background .lightness-primary {
  color: white; }

.design .color-primary-top {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .bg-color-primary-top {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .border-color-primary-top {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .hue-primary-top:after {
  content: 'H'; }

.design .saturation-primary-top:after {
  content: 'S'; }

.design .lightness-primary-top:after {
  content: 'L'; }

.design .background .hue-primary-top, .design .background .saturation-primary-top, .design .background .lightness-primary-top {
  color: white; }

.design .color-primary-high5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .bg-color-primary-high5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .border-color-primary-high5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .hue-primary-high5:after {
  content: 'H'; }

.design .saturation-primary-high5:after {
  content: 'S'; }

.design .lightness-primary-high5:after {
  content: 'L'; }

.design .background .hue-primary-high5, .design .background .saturation-primary-high5, .design .background .lightness-primary-high5 {
  color: white; }

.design .color-primary-high4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .bg-color-primary-high4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .border-color-primary-high4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .hue-primary-high4:after {
  content: 'H'; }

.design .saturation-primary-high4:after {
  content: 'S'; }

.design .lightness-primary-high4:after {
  content: 'L'; }

.design .background .hue-primary-high4, .design .background .saturation-primary-high4, .design .background .lightness-primary-high4 {
  color: white; }

.design .color-primary-high3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .bg-color-primary-high3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .border-color-primary-high3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .hue-primary-high3:after {
  content: 'H'; }

.design .saturation-primary-high3:after {
  content: 'S'; }

.design .lightness-primary-high3:after {
  content: 'L'; }

.design .background .hue-primary-high3, .design .background .saturation-primary-high3, .design .background .lightness-primary-high3 {
  color: white; }

.design .color-primary-high2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .bg-color-primary-high2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .border-color-primary-high2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .hue-primary-high2:after {
  content: 'H'; }

.design .saturation-primary-high2:after {
  content: 'S'; }

.design .lightness-primary-high2:after {
  content: 'L'; }

.design .background .hue-primary-high2, .design .background .saturation-primary-high2, .design .background .lightness-primary-high2 {
  color: white; }

.design .color-primary-high1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .bg-color-primary-high1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .border-color-primary-high1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .hue-primary-high1:after {
  content: 'H'; }

.design .saturation-primary-high1:after {
  content: 'S'; }

.design .lightness-primary-high1:after {
  content: 'L'; }

.design .background .hue-primary-high1, .design .background .saturation-primary-high1, .design .background .lightness-primary-high1 {
  color: white; }

.design .color-primary-medium {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .bg-color-primary-medium {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .border-color-primary-medium {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .hue-primary-medium:after {
  content: 'H'; }

.design .saturation-primary-medium:after {
  content: 'S'; }

.design .lightness-primary-medium:after {
  content: 'L'; }

.design .background .hue-primary-medium, .design .background .saturation-primary-medium, .design .background .lightness-primary-medium {
  color: white; }

.design .color-primary-low1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .bg-color-primary-low1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .border-color-primary-low1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .hue-primary-low1:after {
  content: 'H'; }

.design .saturation-primary-low1:after {
  content: 'S'; }

.design .lightness-primary-low1:after {
  content: 'L'; }

.design .background .hue-primary-low1, .design .background .saturation-primary-low1, .design .background .lightness-primary-low1 {
  color: white; }

.design .color-primary-low2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .bg-color-primary-low2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .border-color-primary-low2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .hue-primary-low2:after {
  content: 'H'; }

.design .saturation-primary-low2:after {
  content: 'S'; }

.design .lightness-primary-low2:after {
  content: 'L'; }

.design .background .hue-primary-low2, .design .background .saturation-primary-low2, .design .background .lightness-primary-low2 {
  color: white; }

.design .color-primary-low3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .bg-color-primary-low3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .border-color-primary-low3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .hue-primary-low3:after {
  content: 'H'; }

.design .saturation-primary-low3:after {
  content: 'S'; }

.design .lightness-primary-low3:after {
  content: 'L'; }

.design .background .hue-primary-low3, .design .background .saturation-primary-low3, .design .background .lightness-primary-low3 {
  color: white; }

.design .color-primary-low4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .bg-color-primary-low4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .border-color-primary-low4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .hue-primary-low4:after {
  content: 'H'; }

.design .saturation-primary-low4:after {
  content: 'S'; }

.design .lightness-primary-low4:after {
  content: 'L'; }

.design .background .hue-primary-low4, .design .background .saturation-primary-low4, .design .background .lightness-primary-low4 {
  color: white; }

.design .color-primary-low5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .bg-color-primary-low5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .border-color-primary-low5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .hue-primary-low5:after {
  content: 'H'; }

.design .saturation-primary-low5:after {
  content: 'S'; }

.design .lightness-primary-low5:after {
  content: 'L'; }

.design .background .hue-primary-low5, .design .background .saturation-primary-low5, .design .background .lightness-primary-low5 {
  color: white; }

.design .color-primary-bottom {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .bg-color-primary-bottom {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .border-color-primary-bottom {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .hue-primary-bottom:after {
  content: 'H'; }

.design .saturation-primary-bottom:after {
  content: 'S'; }

.design .lightness-primary-bottom:after {
  content: 'L'; }

.design .background .hue-primary-bottom, .design .background .saturation-primary-bottom, .design .background .lightness-primary-bottom {
  color: white; }

.design .color-primary-i_top {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .bg-color-primary-i_top {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .border-color-primary-i_top {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .hue-primary-i_top:after {
  content: 'H'; }

.design .saturation-primary-i_top:after {
  content: 'S'; }

.design .lightness-primary-i_top:after {
  content: 'L'; }

.design .background .hue-primary-i_top, .design .background .saturation-primary-i_top, .design .background .lightness-primary-i_top {
  color: white; }

.design .color-primary-i_high5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .bg-color-primary-i_high5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .border-color-primary-i_high5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .hue-primary-i_high5:after {
  content: 'H'; }

.design .saturation-primary-i_high5:after {
  content: 'S'; }

.design .lightness-primary-i_high5:after {
  content: 'L'; }

.design .background .hue-primary-i_high5, .design .background .saturation-primary-i_high5, .design .background .lightness-primary-i_high5 {
  color: white; }

.design .color-primary-i_high4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .bg-color-primary-i_high4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .border-color-primary-i_high4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .hue-primary-i_high4:after {
  content: 'H'; }

.design .saturation-primary-i_high4:after {
  content: 'S'; }

.design .lightness-primary-i_high4:after {
  content: 'L'; }

.design .background .hue-primary-i_high4, .design .background .saturation-primary-i_high4, .design .background .lightness-primary-i_high4 {
  color: white; }

.design .color-primary-i_high3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .bg-color-primary-i_high3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .border-color-primary-i_high3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .hue-primary-i_high3:after {
  content: 'H'; }

.design .saturation-primary-i_high3:after {
  content: 'S'; }

.design .lightness-primary-i_high3:after {
  content: 'L'; }

.design .background .hue-primary-i_high3, .design .background .saturation-primary-i_high3, .design .background .lightness-primary-i_high3 {
  color: white; }

.design .color-primary-i_high2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .bg-color-primary-i_high2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .border-color-primary-i_high2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .hue-primary-i_high2:after {
  content: 'H'; }

.design .saturation-primary-i_high2:after {
  content: 'S'; }

.design .lightness-primary-i_high2:after {
  content: 'L'; }

.design .background .hue-primary-i_high2, .design .background .saturation-primary-i_high2, .design .background .lightness-primary-i_high2 {
  color: white; }

.design .color-primary-i_high1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .bg-color-primary-i_high1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .border-color-primary-i_high1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .hue-primary-i_high1:after {
  content: 'H'; }

.design .saturation-primary-i_high1:after {
  content: 'S'; }

.design .lightness-primary-i_high1:after {
  content: 'L'; }

.design .background .hue-primary-i_high1, .design .background .saturation-primary-i_high1, .design .background .lightness-primary-i_high1 {
  color: white; }

.design .color-primary-i_medium {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .bg-color-primary-i_medium {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .border-color-primary-i_medium {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .hue-primary-i_medium:after {
  content: 'H'; }

.design .saturation-primary-i_medium:after {
  content: 'S'; }

.design .lightness-primary-i_medium:after {
  content: 'L'; }

.design .background .hue-primary-i_medium, .design .background .saturation-primary-i_medium, .design .background .lightness-primary-i_medium {
  color: white; }

.design .color-primary-i_low1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .bg-color-primary-i_low1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .border-color-primary-i_low1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .hue-primary-i_low1:after {
  content: 'H'; }

.design .saturation-primary-i_low1:after {
  content: 'S'; }

.design .lightness-primary-i_low1:after {
  content: 'L'; }

.design .background .hue-primary-i_low1, .design .background .saturation-primary-i_low1, .design .background .lightness-primary-i_low1 {
  color: white; }

.design .color-primary-i_low2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .bg-color-primary-i_low2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .border-color-primary-i_low2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .hue-primary-i_low2:after {
  content: 'H'; }

.design .saturation-primary-i_low2:after {
  content: 'S'; }

.design .lightness-primary-i_low2:after {
  content: 'L'; }

.design .background .hue-primary-i_low2, .design .background .saturation-primary-i_low2, .design .background .lightness-primary-i_low2 {
  color: white; }

.design .color-primary-i_low3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .bg-color-primary-i_low3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .border-color-primary-i_low3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .hue-primary-i_low3:after {
  content: 'H'; }

.design .saturation-primary-i_low3:after {
  content: 'S'; }

.design .lightness-primary-i_low3:after {
  content: 'L'; }

.design .background .hue-primary-i_low3, .design .background .saturation-primary-i_low3, .design .background .lightness-primary-i_low3 {
  color: white; }

.design .color-primary-i_low4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .bg-color-primary-i_low4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .border-color-primary-i_low4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .hue-primary-i_low4:after {
  content: 'H'; }

.design .saturation-primary-i_low4:after {
  content: 'S'; }

.design .lightness-primary-i_low4:after {
  content: 'L'; }

.design .background .hue-primary-i_low4, .design .background .saturation-primary-i_low4, .design .background .lightness-primary-i_low4 {
  color: white; }

.design .color-primary-i_low5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .bg-color-primary-i_low5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .border-color-primary-i_low5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .hue-primary-i_low5:after {
  content: 'H'; }

.design .saturation-primary-i_low5:after {
  content: 'S'; }

.design .lightness-primary-i_low5:after {
  content: 'L'; }

.design .background .hue-primary-i_low5, .design .background .saturation-primary-i_low5, .design .background .lightness-primary-i_low5 {
  color: white; }

.design .color-primary-i_bottom {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .bg-color-primary-i_bottom {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .border-color-primary-i_bottom {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .hue-primary-i_bottom:after {
  content: 'H'; }

.design .saturation-primary-i_bottom:after {
  content: 'S'; }

.design .lightness-primary-i_bottom:after {
  content: 'L'; }

.design .background .hue-primary-i_bottom, .design .background .saturation-primary-i_bottom, .design .background .lightness-primary-i_bottom {
  color: white; }

.design .color-secondary {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .bg-color-secondary {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .border-color-secondary {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .hue-secondary:after {
  content: 'H'; }

.design .saturation-secondary:after {
  content: 'S'; }

.design .lightness-secondary:after {
  content: 'L'; }

.design .background .hue-secondary, .design .background .saturation-secondary, .design .background .lightness-secondary {
  color: white; }

.design .color-secondary-top {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-top)); }

.design .bg-color-secondary-top {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-top)); }

.design .border-color-secondary-top {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-top)); }

.design .hue-secondary-top:after {
  content: 'H'; }

.design .saturation-secondary-top:after {
  content: 'S'; }

.design .lightness-secondary-top:after {
  content: 'L'; }

.design .background .hue-secondary-top, .design .background .saturation-secondary-top, .design .background .lightness-secondary-top {
  color: white; }

.design .color-secondary-high5 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high5)); }

.design .bg-color-secondary-high5 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high5)); }

.design .border-color-secondary-high5 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high5)); }

.design .hue-secondary-high5:after {
  content: 'H'; }

.design .saturation-secondary-high5:after {
  content: 'S'; }

.design .lightness-secondary-high5:after {
  content: 'L'; }

.design .background .hue-secondary-high5, .design .background .saturation-secondary-high5, .design .background .lightness-secondary-high5 {
  color: white; }

.design .color-secondary-high4 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high4)); }

.design .bg-color-secondary-high4 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high4)); }

.design .border-color-secondary-high4 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high4)); }

.design .hue-secondary-high4:after {
  content: 'H'; }

.design .saturation-secondary-high4:after {
  content: 'S'; }

.design .lightness-secondary-high4:after {
  content: 'L'; }

.design .background .hue-secondary-high4, .design .background .saturation-secondary-high4, .design .background .lightness-secondary-high4 {
  color: white; }

.design .color-secondary-high3 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high3)); }

.design .bg-color-secondary-high3 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high3)); }

.design .border-color-secondary-high3 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high3)); }

.design .hue-secondary-high3:after {
  content: 'H'; }

.design .saturation-secondary-high3:after {
  content: 'S'; }

.design .lightness-secondary-high3:after {
  content: 'L'; }

.design .background .hue-secondary-high3, .design .background .saturation-secondary-high3, .design .background .lightness-secondary-high3 {
  color: white; }

.design .color-secondary-high2 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }

.design .bg-color-secondary-high2 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }

.design .border-color-secondary-high2 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high2)); }

.design .hue-secondary-high2:after {
  content: 'H'; }

.design .saturation-secondary-high2:after {
  content: 'S'; }

.design .lightness-secondary-high2:after {
  content: 'L'; }

.design .background .hue-secondary-high2, .design .background .saturation-secondary-high2, .design .background .lightness-secondary-high2 {
  color: white; }

.design .color-secondary-high1 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high1)); }

.design .bg-color-secondary-high1 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high1)); }

.design .border-color-secondary-high1 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-high1)); }

.design .hue-secondary-high1:after {
  content: 'H'; }

.design .saturation-secondary-high1:after {
  content: 'S'; }

.design .lightness-secondary-high1:after {
  content: 'L'; }

.design .background .hue-secondary-high1, .design .background .saturation-secondary-high1, .design .background .lightness-secondary-high1 {
  color: white; }

.design .color-secondary-medium {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .bg-color-secondary-medium {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .border-color-secondary-medium {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }

.design .hue-secondary-medium:after {
  content: 'H'; }

.design .saturation-secondary-medium:after {
  content: 'S'; }

.design .lightness-secondary-medium:after {
  content: 'L'; }

.design .background .hue-secondary-medium, .design .background .saturation-secondary-medium, .design .background .lightness-secondary-medium {
  color: white; }

.design .color-secondary-low1 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low1)); }

.design .bg-color-secondary-low1 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low1)); }

.design .border-color-secondary-low1 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low1)); }

.design .hue-secondary-low1:after {
  content: 'H'; }

.design .saturation-secondary-low1:after {
  content: 'S'; }

.design .lightness-secondary-low1:after {
  content: 'L'; }

.design .background .hue-secondary-low1, .design .background .saturation-secondary-low1, .design .background .lightness-secondary-low1 {
  color: white; }

.design .color-secondary-low2 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low2)); }

.design .bg-color-secondary-low2 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low2)); }

.design .border-color-secondary-low2 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low2)); }

.design .hue-secondary-low2:after {
  content: 'H'; }

.design .saturation-secondary-low2:after {
  content: 'S'; }

.design .lightness-secondary-low2:after {
  content: 'L'; }

.design .background .hue-secondary-low2, .design .background .saturation-secondary-low2, .design .background .lightness-secondary-low2 {
  color: white; }

.design .color-secondary-low3 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low3)); }

.design .bg-color-secondary-low3 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low3)); }

.design .border-color-secondary-low3 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low3)); }

.design .hue-secondary-low3:after {
  content: 'H'; }

.design .saturation-secondary-low3:after {
  content: 'S'; }

.design .lightness-secondary-low3:after {
  content: 'L'; }

.design .background .hue-secondary-low3, .design .background .saturation-secondary-low3, .design .background .lightness-secondary-low3 {
  color: white; }

.design .color-secondary-low4 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low4)); }

.design .bg-color-secondary-low4 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low4)); }

.design .border-color-secondary-low4 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low4)); }

.design .hue-secondary-low4:after {
  content: 'H'; }

.design .saturation-secondary-low4:after {
  content: 'S'; }

.design .lightness-secondary-low4:after {
  content: 'L'; }

.design .background .hue-secondary-low4, .design .background .saturation-secondary-low4, .design .background .lightness-secondary-low4 {
  color: white; }

.design .color-secondary-low5 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low5)); }

.design .bg-color-secondary-low5 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low5)); }

.design .border-color-secondary-low5 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-low5)); }

.design .hue-secondary-low5:after {
  content: 'H'; }

.design .saturation-secondary-low5:after {
  content: 'S'; }

.design .lightness-secondary-low5:after {
  content: 'L'; }

.design .background .hue-secondary-low5, .design .background .saturation-secondary-low5, .design .background .lightness-secondary-low5 {
  color: white; }

.design .color-secondary-bottom {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-bottom)); }

.design .bg-color-secondary-bottom {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-bottom)); }

.design .border-color-secondary-bottom {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-bottom)); }

.design .hue-secondary-bottom:after {
  content: 'H'; }

.design .saturation-secondary-bottom:after {
  content: 'S'; }

.design .lightness-secondary-bottom:after {
  content: 'L'; }

.design .background .hue-secondary-bottom, .design .background .saturation-secondary-bottom, .design .background .lightness-secondary-bottom {
  color: white; }

.design .color-secondary-i_top {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top)); }

.design .bg-color-secondary-i_top {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top)); }

.design .border-color-secondary-i_top {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top)); }

.design .hue-secondary-i_top:after {
  content: 'H'; }

.design .saturation-secondary-i_top:after {
  content: 'S'; }

.design .lightness-secondary-i_top:after {
  content: 'L'; }

.design .background .hue-secondary-i_top, .design .background .saturation-secondary-i_top, .design .background .lightness-secondary-i_top {
  color: white; }

.design .color-secondary-i_high5 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }

.design .bg-color-secondary-i_high5 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }

.design .border-color-secondary-i_high5 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)); }

.design .hue-secondary-i_high5:after {
  content: 'H'; }

.design .saturation-secondary-i_high5:after {
  content: 'S'; }

.design .lightness-secondary-i_high5:after {
  content: 'L'; }

.design .background .hue-secondary-i_high5, .design .background .saturation-secondary-i_high5, .design .background .lightness-secondary-i_high5 {
  color: white; }

.design .color-secondary-i_high4 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high4)); }

.design .bg-color-secondary-i_high4 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high4)); }

.design .border-color-secondary-i_high4 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high4)); }

.design .hue-secondary-i_high4:after {
  content: 'H'; }

.design .saturation-secondary-i_high4:after {
  content: 'S'; }

.design .lightness-secondary-i_high4:after {
  content: 'L'; }

.design .background .hue-secondary-i_high4, .design .background .saturation-secondary-i_high4, .design .background .lightness-secondary-i_high4 {
  color: white; }

.design .color-secondary-i_high3 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high3)); }

.design .bg-color-secondary-i_high3 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high3)); }

.design .border-color-secondary-i_high3 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high3)); }

.design .hue-secondary-i_high3:after {
  content: 'H'; }

.design .saturation-secondary-i_high3:after {
  content: 'S'; }

.design .lightness-secondary-i_high3:after {
  content: 'L'; }

.design .background .hue-secondary-i_high3, .design .background .saturation-secondary-i_high3, .design .background .lightness-secondary-i_high3 {
  color: white; }

.design .color-secondary-i_high2 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high2)); }

.design .bg-color-secondary-i_high2 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high2)); }

.design .border-color-secondary-i_high2 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high2)); }

.design .hue-secondary-i_high2:after {
  content: 'H'; }

.design .saturation-secondary-i_high2:after {
  content: 'S'; }

.design .lightness-secondary-i_high2:after {
  content: 'L'; }

.design .background .hue-secondary-i_high2, .design .background .saturation-secondary-i_high2, .design .background .lightness-secondary-i_high2 {
  color: white; }

.design .color-secondary-i_high1 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high1)); }

.design .bg-color-secondary-i_high1 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high1)); }

.design .border-color-secondary-i_high1 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high1)); }

.design .hue-secondary-i_high1:after {
  content: 'H'; }

.design .saturation-secondary-i_high1:after {
  content: 'S'; }

.design .lightness-secondary-i_high1:after {
  content: 'L'; }

.design .background .hue-secondary-i_high1, .design .background .saturation-secondary-i_high1, .design .background .lightness-secondary-i_high1 {
  color: white; }

.design .color-secondary-i_medium {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_medium)); }

.design .bg-color-secondary-i_medium {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_medium)); }

.design .border-color-secondary-i_medium {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_medium)); }

.design .hue-secondary-i_medium:after {
  content: 'H'; }

.design .saturation-secondary-i_medium:after {
  content: 'S'; }

.design .lightness-secondary-i_medium:after {
  content: 'L'; }

.design .background .hue-secondary-i_medium, .design .background .saturation-secondary-i_medium, .design .background .lightness-secondary-i_medium {
  color: white; }

.design .color-secondary-i_low1 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low1)); }

.design .bg-color-secondary-i_low1 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low1)); }

.design .border-color-secondary-i_low1 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low1)); }

.design .hue-secondary-i_low1:after {
  content: 'H'; }

.design .saturation-secondary-i_low1:after {
  content: 'S'; }

.design .lightness-secondary-i_low1:after {
  content: 'L'; }

.design .background .hue-secondary-i_low1, .design .background .saturation-secondary-i_low1, .design .background .lightness-secondary-i_low1 {
  color: white; }

.design .color-secondary-i_low2 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low2)); }

.design .bg-color-secondary-i_low2 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low2)); }

.design .border-color-secondary-i_low2 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low2)); }

.design .hue-secondary-i_low2:after {
  content: 'H'; }

.design .saturation-secondary-i_low2:after {
  content: 'S'; }

.design .lightness-secondary-i_low2:after {
  content: 'L'; }

.design .background .hue-secondary-i_low2, .design .background .saturation-secondary-i_low2, .design .background .lightness-secondary-i_low2 {
  color: white; }

.design .color-secondary-i_low3 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low3)); }

.design .bg-color-secondary-i_low3 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low3)); }

.design .border-color-secondary-i_low3 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low3)); }

.design .hue-secondary-i_low3:after {
  content: 'H'; }

.design .saturation-secondary-i_low3:after {
  content: 'S'; }

.design .lightness-secondary-i_low3:after {
  content: 'L'; }

.design .background .hue-secondary-i_low3, .design .background .saturation-secondary-i_low3, .design .background .lightness-secondary-i_low3 {
  color: white; }

.design .color-secondary-i_low4 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low4)); }

.design .bg-color-secondary-i_low4 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low4)); }

.design .border-color-secondary-i_low4 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low4)); }

.design .hue-secondary-i_low4:after {
  content: 'H'; }

.design .saturation-secondary-i_low4:after {
  content: 'S'; }

.design .lightness-secondary-i_low4:after {
  content: 'L'; }

.design .background .hue-secondary-i_low4, .design .background .saturation-secondary-i_low4, .design .background .lightness-secondary-i_low4 {
  color: white; }

.design .color-secondary-i_low5 {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low5)); }

.design .bg-color-secondary-i_low5 {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low5)); }

.design .border-color-secondary-i_low5 {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_low5)); }

.design .hue-secondary-i_low5:after {
  content: 'H'; }

.design .saturation-secondary-i_low5:after {
  content: 'S'; }

.design .lightness-secondary-i_low5:after {
  content: 'L'; }

.design .background .hue-secondary-i_low5, .design .background .saturation-secondary-i_low5, .design .background .lightness-secondary-i_low5 {
  color: white; }

.design .color-secondary-i_bottom {
  color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_bottom)); }

.design .bg-color-secondary-i_bottom {
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_bottom)); }

.design .border-color-secondary-i_bottom {
  border-color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_bottom)); }

.design .hue-secondary-i_bottom:after {
  content: 'H'; }

.design .saturation-secondary-i_bottom:after {
  content: 'S'; }

.design .lightness-secondary-i_bottom:after {
  content: 'L'; }

.design .background .hue-secondary-i_bottom, .design .background .saturation-secondary-i_bottom, .design .background .lightness-secondary-i_bottom {
  color: white; }

.design .color-action {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .bg-color-action {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .border-color-action {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .hue-action:after {
  content: 'H'; }

.design .saturation-action:after {
  content: 'S'; }

.design .lightness-action:after {
  content: 'L'; }

.design .background .hue-action, .design .background .saturation-action, .design .background .lightness-action {
  color: white; }

.design .color-action-top {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .bg-color-action-top {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .border-color-action-top {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-top)); }

.design .hue-action-top:after {
  content: 'H'; }

.design .saturation-action-top:after {
  content: 'S'; }

.design .lightness-action-top:after {
  content: 'L'; }

.design .background .hue-action-top, .design .background .saturation-action-top, .design .background .lightness-action-top {
  color: white; }

.design .color-action-high5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .bg-color-action-high5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .border-color-action-high5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high5)); }

.design .hue-action-high5:after {
  content: 'H'; }

.design .saturation-action-high5:after {
  content: 'S'; }

.design .lightness-action-high5:after {
  content: 'L'; }

.design .background .hue-action-high5, .design .background .saturation-action-high5, .design .background .lightness-action-high5 {
  color: white; }

.design .color-action-high4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .bg-color-action-high4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .border-color-action-high4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high4)); }

.design .hue-action-high4:after {
  content: 'H'; }

.design .saturation-action-high4:after {
  content: 'S'; }

.design .lightness-action-high4:after {
  content: 'L'; }

.design .background .hue-action-high4, .design .background .saturation-action-high4, .design .background .lightness-action-high4 {
  color: white; }

.design .color-action-high3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .bg-color-action-high3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .border-color-action-high3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high3)); }

.design .hue-action-high3:after {
  content: 'H'; }

.design .saturation-action-high3:after {
  content: 'S'; }

.design .lightness-action-high3:after {
  content: 'L'; }

.design .background .hue-action-high3, .design .background .saturation-action-high3, .design .background .lightness-action-high3 {
  color: white; }

.design .color-action-high2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .bg-color-action-high2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .border-color-action-high2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high2)); }

.design .hue-action-high2:after {
  content: 'H'; }

.design .saturation-action-high2:after {
  content: 'S'; }

.design .lightness-action-high2:after {
  content: 'L'; }

.design .background .hue-action-high2, .design .background .saturation-action-high2, .design .background .lightness-action-high2 {
  color: white; }

.design .color-action-high1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .bg-color-action-high1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .border-color-action-high1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-high1)); }

.design .hue-action-high1:after {
  content: 'H'; }

.design .saturation-action-high1:after {
  content: 'S'; }

.design .lightness-action-high1:after {
  content: 'L'; }

.design .background .hue-action-high1, .design .background .saturation-action-high1, .design .background .lightness-action-high1 {
  color: white; }

.design .color-action-medium {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .bg-color-action-medium {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .border-color-action-medium {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.design .hue-action-medium:after {
  content: 'H'; }

.design .saturation-action-medium:after {
  content: 'S'; }

.design .lightness-action-medium:after {
  content: 'L'; }

.design .background .hue-action-medium, .design .background .saturation-action-medium, .design .background .lightness-action-medium {
  color: white; }

.design .color-action-low1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .bg-color-action-low1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .border-color-action-low1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low1)); }

.design .hue-action-low1:after {
  content: 'H'; }

.design .saturation-action-low1:after {
  content: 'S'; }

.design .lightness-action-low1:after {
  content: 'L'; }

.design .background .hue-action-low1, .design .background .saturation-action-low1, .design .background .lightness-action-low1 {
  color: white; }

.design .color-action-low2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .bg-color-action-low2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .border-color-action-low2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low2)); }

.design .hue-action-low2:after {
  content: 'H'; }

.design .saturation-action-low2:after {
  content: 'S'; }

.design .lightness-action-low2:after {
  content: 'L'; }

.design .background .hue-action-low2, .design .background .saturation-action-low2, .design .background .lightness-action-low2 {
  color: white; }

.design .color-action-low3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .bg-color-action-low3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .border-color-action-low3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low3)); }

.design .hue-action-low3:after {
  content: 'H'; }

.design .saturation-action-low3:after {
  content: 'S'; }

.design .lightness-action-low3:after {
  content: 'L'; }

.design .background .hue-action-low3, .design .background .saturation-action-low3, .design .background .lightness-action-low3 {
  color: white; }

.design .color-action-low4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .bg-color-action-low4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .border-color-action-low4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low4)); }

.design .hue-action-low4:after {
  content: 'H'; }

.design .saturation-action-low4:after {
  content: 'S'; }

.design .lightness-action-low4:after {
  content: 'L'; }

.design .background .hue-action-low4, .design .background .saturation-action-low4, .design .background .lightness-action-low4 {
  color: white; }

.design .color-action-low5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .bg-color-action-low5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .border-color-action-low5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-low5)); }

.design .hue-action-low5:after {
  content: 'H'; }

.design .saturation-action-low5:after {
  content: 'S'; }

.design .lightness-action-low5:after {
  content: 'L'; }

.design .background .hue-action-low5, .design .background .saturation-action-low5, .design .background .lightness-action-low5 {
  color: white; }

.design .color-action-bottom {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .bg-color-action-bottom {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .border-color-action-bottom {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-bottom)); }

.design .hue-action-bottom:after {
  content: 'H'; }

.design .saturation-action-bottom:after {
  content: 'S'; }

.design .lightness-action-bottom:after {
  content: 'L'; }

.design .background .hue-action-bottom, .design .background .saturation-action-bottom, .design .background .lightness-action-bottom {
  color: white; }

.design .color-action-i_top {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .bg-color-action-i_top {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .border-color-action-i_top {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_top)); }

.design .hue-action-i_top:after {
  content: 'H'; }

.design .saturation-action-i_top:after {
  content: 'S'; }

.design .lightness-action-i_top:after {
  content: 'L'; }

.design .background .hue-action-i_top, .design .background .saturation-action-i_top, .design .background .lightness-action-i_top {
  color: white; }

.design .color-action-i_high5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .bg-color-action-i_high5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .border-color-action-i_high5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high5)); }

.design .hue-action-i_high5:after {
  content: 'H'; }

.design .saturation-action-i_high5:after {
  content: 'S'; }

.design .lightness-action-i_high5:after {
  content: 'L'; }

.design .background .hue-action-i_high5, .design .background .saturation-action-i_high5, .design .background .lightness-action-i_high5 {
  color: white; }

.design .color-action-i_high4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .bg-color-action-i_high4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .border-color-action-i_high4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high4)); }

.design .hue-action-i_high4:after {
  content: 'H'; }

.design .saturation-action-i_high4:after {
  content: 'S'; }

.design .lightness-action-i_high4:after {
  content: 'L'; }

.design .background .hue-action-i_high4, .design .background .saturation-action-i_high4, .design .background .lightness-action-i_high4 {
  color: white; }

.design .color-action-i_high3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .bg-color-action-i_high3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .border-color-action-i_high3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high3)); }

.design .hue-action-i_high3:after {
  content: 'H'; }

.design .saturation-action-i_high3:after {
  content: 'S'; }

.design .lightness-action-i_high3:after {
  content: 'L'; }

.design .background .hue-action-i_high3, .design .background .saturation-action-i_high3, .design .background .lightness-action-i_high3 {
  color: white; }

.design .color-action-i_high2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .bg-color-action-i_high2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .border-color-action-i_high2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high2)); }

.design .hue-action-i_high2:after {
  content: 'H'; }

.design .saturation-action-i_high2:after {
  content: 'S'; }

.design .lightness-action-i_high2:after {
  content: 'L'; }

.design .background .hue-action-i_high2, .design .background .saturation-action-i_high2, .design .background .lightness-action-i_high2 {
  color: white; }

.design .color-action-i_high1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .bg-color-action-i_high1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .border-color-action-i_high1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_high1)); }

.design .hue-action-i_high1:after {
  content: 'H'; }

.design .saturation-action-i_high1:after {
  content: 'S'; }

.design .lightness-action-i_high1:after {
  content: 'L'; }

.design .background .hue-action-i_high1, .design .background .saturation-action-i_high1, .design .background .lightness-action-i_high1 {
  color: white; }

.design .color-action-i_medium {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .bg-color-action-i_medium {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .border-color-action-i_medium {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.design .hue-action-i_medium:after {
  content: 'H'; }

.design .saturation-action-i_medium:after {
  content: 'S'; }

.design .lightness-action-i_medium:after {
  content: 'L'; }

.design .background .hue-action-i_medium, .design .background .saturation-action-i_medium, .design .background .lightness-action-i_medium {
  color: white; }

.design .color-action-i_low1 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .bg-color-action-i_low1 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .border-color-action-i_low1 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low1)); }

.design .hue-action-i_low1:after {
  content: 'H'; }

.design .saturation-action-i_low1:after {
  content: 'S'; }

.design .lightness-action-i_low1:after {
  content: 'L'; }

.design .background .hue-action-i_low1, .design .background .saturation-action-i_low1, .design .background .lightness-action-i_low1 {
  color: white; }

.design .color-action-i_low2 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .bg-color-action-i_low2 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .border-color-action-i_low2 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low2)); }

.design .hue-action-i_low2:after {
  content: 'H'; }

.design .saturation-action-i_low2:after {
  content: 'S'; }

.design .lightness-action-i_low2:after {
  content: 'L'; }

.design .background .hue-action-i_low2, .design .background .saturation-action-i_low2, .design .background .lightness-action-i_low2 {
  color: white; }

.design .color-action-i_low3 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .bg-color-action-i_low3 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .border-color-action-i_low3 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low3)); }

.design .hue-action-i_low3:after {
  content: 'H'; }

.design .saturation-action-i_low3:after {
  content: 'S'; }

.design .lightness-action-i_low3:after {
  content: 'L'; }

.design .background .hue-action-i_low3, .design .background .saturation-action-i_low3, .design .background .lightness-action-i_low3 {
  color: white; }

.design .color-action-i_low4 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .bg-color-action-i_low4 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .border-color-action-i_low4 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low4)); }

.design .hue-action-i_low4:after {
  content: 'H'; }

.design .saturation-action-i_low4:after {
  content: 'S'; }

.design .lightness-action-i_low4:after {
  content: 'L'; }

.design .background .hue-action-i_low4, .design .background .saturation-action-i_low4, .design .background .lightness-action-i_low4 {
  color: white; }

.design .color-action-i_low5 {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .bg-color-action-i_low5 {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .border-color-action-i_low5 {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_low5)); }

.design .hue-action-i_low5:after {
  content: 'H'; }

.design .saturation-action-i_low5:after {
  content: 'S'; }

.design .lightness-action-i_low5:after {
  content: 'L'; }

.design .background .hue-action-i_low5, .design .background .saturation-action-i_low5, .design .background .lightness-action-i_low5 {
  color: white; }

.design .color-action-i_bottom {
  color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .bg-color-action-i_bottom {
  background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .border-color-action-i_bottom {
  border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_bottom)); }

.design .hue-action-i_bottom:after {
  content: 'H'; }

.design .saturation-action-i_bottom:after {
  content: 'S'; }

.design .lightness-action-i_bottom:after {
  content: 'L'; }

.design .background .hue-action-i_bottom, .design .background .saturation-action-i_bottom, .design .background .lightness-action-i_bottom {
  color: white; }

.design .color-warning {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .bg-color-warning {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .border-color-warning {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .hue-warning:after {
  content: 'H'; }

.design .saturation-warning:after {
  content: 'S'; }

.design .lightness-warning:after {
  content: 'L'; }

.design .background .hue-warning, .design .background .saturation-warning, .design .background .lightness-warning {
  color: white; }

.design .color-warning-top {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-top)); }

.design .bg-color-warning-top {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-top)); }

.design .border-color-warning-top {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-top)); }

.design .hue-warning-top:after {
  content: 'H'; }

.design .saturation-warning-top:after {
  content: 'S'; }

.design .lightness-warning-top:after {
  content: 'L'; }

.design .background .hue-warning-top, .design .background .saturation-warning-top, .design .background .lightness-warning-top {
  color: white; }

.design .color-warning-high5 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5)); }

.design .bg-color-warning-high5 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5)); }

.design .border-color-warning-high5 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high5)); }

.design .hue-warning-high5:after {
  content: 'H'; }

.design .saturation-warning-high5:after {
  content: 'S'; }

.design .lightness-warning-high5:after {
  content: 'L'; }

.design .background .hue-warning-high5, .design .background .saturation-warning-high5, .design .background .lightness-warning-high5 {
  color: white; }

.design .color-warning-high4 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high4)); }

.design .bg-color-warning-high4 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high4)); }

.design .border-color-warning-high4 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high4)); }

.design .hue-warning-high4:after {
  content: 'H'; }

.design .saturation-warning-high4:after {
  content: 'S'; }

.design .lightness-warning-high4:after {
  content: 'L'; }

.design .background .hue-warning-high4, .design .background .saturation-warning-high4, .design .background .lightness-warning-high4 {
  color: white; }

.design .color-warning-high3 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }

.design .bg-color-warning-high3 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }

.design .border-color-warning-high3 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high3)); }

.design .hue-warning-high3:after {
  content: 'H'; }

.design .saturation-warning-high3:after {
  content: 'S'; }

.design .lightness-warning-high3:after {
  content: 'L'; }

.design .background .hue-warning-high3, .design .background .saturation-warning-high3, .design .background .lightness-warning-high3 {
  color: white; }

.design .color-warning-high2 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }

.design .bg-color-warning-high2 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }

.design .border-color-warning-high2 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high2)); }

.design .hue-warning-high2:after {
  content: 'H'; }

.design .saturation-warning-high2:after {
  content: 'S'; }

.design .lightness-warning-high2:after {
  content: 'L'; }

.design .background .hue-warning-high2, .design .background .saturation-warning-high2, .design .background .lightness-warning-high2 {
  color: white; }

.design .color-warning-high1 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1)); }

.design .bg-color-warning-high1 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1)); }

.design .border-color-warning-high1 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1)); }

.design .hue-warning-high1:after {
  content: 'H'; }

.design .saturation-warning-high1:after {
  content: 'S'; }

.design .lightness-warning-high1:after {
  content: 'L'; }

.design .background .hue-warning-high1, .design .background .saturation-warning-high1, .design .background .lightness-warning-high1 {
  color: white; }

.design .color-warning-medium {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .bg-color-warning-medium {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .border-color-warning-medium {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

.design .hue-warning-medium:after {
  content: 'H'; }

.design .saturation-warning-medium:after {
  content: 'S'; }

.design .lightness-warning-medium:after {
  content: 'L'; }

.design .background .hue-warning-medium, .design .background .saturation-warning-medium, .design .background .lightness-warning-medium {
  color: white; }

.design .color-warning-low1 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low1)); }

.design .bg-color-warning-low1 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low1)); }

.design .border-color-warning-low1 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low1)); }

.design .hue-warning-low1:after {
  content: 'H'; }

.design .saturation-warning-low1:after {
  content: 'S'; }

.design .lightness-warning-low1:after {
  content: 'L'; }

.design .background .hue-warning-low1, .design .background .saturation-warning-low1, .design .background .lightness-warning-low1 {
  color: white; }

.design .color-warning-low2 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low2)); }

.design .bg-color-warning-low2 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low2)); }

.design .border-color-warning-low2 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low2)); }

.design .hue-warning-low2:after {
  content: 'H'; }

.design .saturation-warning-low2:after {
  content: 'S'; }

.design .lightness-warning-low2:after {
  content: 'L'; }

.design .background .hue-warning-low2, .design .background .saturation-warning-low2, .design .background .lightness-warning-low2 {
  color: white; }

.design .color-warning-low3 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low3)); }

.design .bg-color-warning-low3 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low3)); }

.design .border-color-warning-low3 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low3)); }

.design .hue-warning-low3:after {
  content: 'H'; }

.design .saturation-warning-low3:after {
  content: 'S'; }

.design .lightness-warning-low3:after {
  content: 'L'; }

.design .background .hue-warning-low3, .design .background .saturation-warning-low3, .design .background .lightness-warning-low3 {
  color: white; }

.design .color-warning-low4 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low4)); }

.design .bg-color-warning-low4 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low4)); }

.design .border-color-warning-low4 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low4)); }

.design .hue-warning-low4:after {
  content: 'H'; }

.design .saturation-warning-low4:after {
  content: 'S'; }

.design .lightness-warning-low4:after {
  content: 'L'; }

.design .background .hue-warning-low4, .design .background .saturation-warning-low4, .design .background .lightness-warning-low4 {
  color: white; }

.design .color-warning-low5 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low5)); }

.design .bg-color-warning-low5 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low5)); }

.design .border-color-warning-low5 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-low5)); }

.design .hue-warning-low5:after {
  content: 'H'; }

.design .saturation-warning-low5:after {
  content: 'S'; }

.design .lightness-warning-low5:after {
  content: 'L'; }

.design .background .hue-warning-low5, .design .background .saturation-warning-low5, .design .background .lightness-warning-low5 {
  color: white; }

.design .color-warning-bottom {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-bottom)); }

.design .bg-color-warning-bottom {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-bottom)); }

.design .border-color-warning-bottom {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-bottom)); }

.design .hue-warning-bottom:after {
  content: 'H'; }

.design .saturation-warning-bottom:after {
  content: 'S'; }

.design .lightness-warning-bottom:after {
  content: 'L'; }

.design .background .hue-warning-bottom, .design .background .saturation-warning-bottom, .design .background .lightness-warning-bottom {
  color: white; }

.design .color-warning-i_top {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_top)); }

.design .bg-color-warning-i_top {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_top)); }

.design .border-color-warning-i_top {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_top)); }

.design .hue-warning-i_top:after {
  content: 'H'; }

.design .saturation-warning-i_top:after {
  content: 'S'; }

.design .lightness-warning-i_top:after {
  content: 'L'; }

.design .background .hue-warning-i_top, .design .background .saturation-warning-i_top, .design .background .lightness-warning-i_top {
  color: white; }

.design .color-warning-i_high5 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high5)); }

.design .bg-color-warning-i_high5 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high5)); }

.design .border-color-warning-i_high5 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high5)); }

.design .hue-warning-i_high5:after {
  content: 'H'; }

.design .saturation-warning-i_high5:after {
  content: 'S'; }

.design .lightness-warning-i_high5:after {
  content: 'L'; }

.design .background .hue-warning-i_high5, .design .background .saturation-warning-i_high5, .design .background .lightness-warning-i_high5 {
  color: white; }

.design .color-warning-i_high4 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high4)); }

.design .bg-color-warning-i_high4 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high4)); }

.design .border-color-warning-i_high4 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high4)); }

.design .hue-warning-i_high4:after {
  content: 'H'; }

.design .saturation-warning-i_high4:after {
  content: 'S'; }

.design .lightness-warning-i_high4:after {
  content: 'L'; }

.design .background .hue-warning-i_high4, .design .background .saturation-warning-i_high4, .design .background .lightness-warning-i_high4 {
  color: white; }

.design .color-warning-i_high3 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high3)); }

.design .bg-color-warning-i_high3 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high3)); }

.design .border-color-warning-i_high3 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high3)); }

.design .hue-warning-i_high3:after {
  content: 'H'; }

.design .saturation-warning-i_high3:after {
  content: 'S'; }

.design .lightness-warning-i_high3:after {
  content: 'L'; }

.design .background .hue-warning-i_high3, .design .background .saturation-warning-i_high3, .design .background .lightness-warning-i_high3 {
  color: white; }

.design .color-warning-i_high2 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high2)); }

.design .bg-color-warning-i_high2 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high2)); }

.design .border-color-warning-i_high2 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high2)); }

.design .hue-warning-i_high2:after {
  content: 'H'; }

.design .saturation-warning-i_high2:after {
  content: 'S'; }

.design .lightness-warning-i_high2:after {
  content: 'L'; }

.design .background .hue-warning-i_high2, .design .background .saturation-warning-i_high2, .design .background .lightness-warning-i_high2 {
  color: white; }

.design .color-warning-i_high1 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high1)); }

.design .bg-color-warning-i_high1 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high1)); }

.design .border-color-warning-i_high1 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_high1)); }

.design .hue-warning-i_high1:after {
  content: 'H'; }

.design .saturation-warning-i_high1:after {
  content: 'S'; }

.design .lightness-warning-i_high1:after {
  content: 'L'; }

.design .background .hue-warning-i_high1, .design .background .saturation-warning-i_high1, .design .background .lightness-warning-i_high1 {
  color: white; }

.design .color-warning-i_medium {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium)); }

.design .bg-color-warning-i_medium {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium)); }

.design .border-color-warning-i_medium {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium)); }

.design .hue-warning-i_medium:after {
  content: 'H'; }

.design .saturation-warning-i_medium:after {
  content: 'S'; }

.design .lightness-warning-i_medium:after {
  content: 'L'; }

.design .background .hue-warning-i_medium, .design .background .saturation-warning-i_medium, .design .background .lightness-warning-i_medium {
  color: white; }

.design .color-warning-i_low1 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low1)); }

.design .bg-color-warning-i_low1 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low1)); }

.design .border-color-warning-i_low1 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low1)); }

.design .hue-warning-i_low1:after {
  content: 'H'; }

.design .saturation-warning-i_low1:after {
  content: 'S'; }

.design .lightness-warning-i_low1:after {
  content: 'L'; }

.design .background .hue-warning-i_low1, .design .background .saturation-warning-i_low1, .design .background .lightness-warning-i_low1 {
  color: white; }

.design .color-warning-i_low2 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low2)); }

.design .bg-color-warning-i_low2 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low2)); }

.design .border-color-warning-i_low2 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low2)); }

.design .hue-warning-i_low2:after {
  content: 'H'; }

.design .saturation-warning-i_low2:after {
  content: 'S'; }

.design .lightness-warning-i_low2:after {
  content: 'L'; }

.design .background .hue-warning-i_low2, .design .background .saturation-warning-i_low2, .design .background .lightness-warning-i_low2 {
  color: white; }

.design .color-warning-i_low3 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low3)); }

.design .bg-color-warning-i_low3 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low3)); }

.design .border-color-warning-i_low3 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low3)); }

.design .hue-warning-i_low3:after {
  content: 'H'; }

.design .saturation-warning-i_low3:after {
  content: 'S'; }

.design .lightness-warning-i_low3:after {
  content: 'L'; }

.design .background .hue-warning-i_low3, .design .background .saturation-warning-i_low3, .design .background .lightness-warning-i_low3 {
  color: white; }

.design .color-warning-i_low4 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low4)); }

.design .bg-color-warning-i_low4 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low4)); }

.design .border-color-warning-i_low4 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low4)); }

.design .hue-warning-i_low4:after {
  content: 'H'; }

.design .saturation-warning-i_low4:after {
  content: 'S'; }

.design .lightness-warning-i_low4:after {
  content: 'L'; }

.design .background .hue-warning-i_low4, .design .background .saturation-warning-i_low4, .design .background .lightness-warning-i_low4 {
  color: white; }

.design .color-warning-i_low5 {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low5)); }

.design .bg-color-warning-i_low5 {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low5)); }

.design .border-color-warning-i_low5 {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_low5)); }

.design .hue-warning-i_low5:after {
  content: 'H'; }

.design .saturation-warning-i_low5:after {
  content: 'S'; }

.design .lightness-warning-i_low5:after {
  content: 'L'; }

.design .background .hue-warning-i_low5, .design .background .saturation-warning-i_low5, .design .background .lightness-warning-i_low5 {
  color: white; }

.design .color-warning-i_bottom {
  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_bottom)); }

.design .bg-color-warning-i_bottom {
  background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_bottom)); }

.design .border-color-warning-i_bottom {
  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_bottom)); }

.design .hue-warning-i_bottom:after {
  content: 'H'; }

.design .saturation-warning-i_bottom:after {
  content: 'S'; }

.design .lightness-warning-i_bottom:after {
  content: 'L'; }

.design .background .hue-warning-i_bottom, .design .background .saturation-warning-i_bottom, .design .background .lightness-warning-i_bottom {
  color: white; }

.design .color-alert {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .bg-color-alert {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .border-color-alert {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .hue-alert:after {
  content: 'H'; }

.design .saturation-alert:after {
  content: 'S'; }

.design .lightness-alert:after {
  content: 'L'; }

.design .background .hue-alert, .design .background .saturation-alert, .design .background .lightness-alert {
  color: white; }

.design .color-alert-top {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-top)); }

.design .bg-color-alert-top {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-top)); }

.design .border-color-alert-top {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-top)); }

.design .hue-alert-top:after {
  content: 'H'; }

.design .saturation-alert-top:after {
  content: 'S'; }

.design .lightness-alert-top:after {
  content: 'L'; }

.design .background .hue-alert-top, .design .background .saturation-alert-top, .design .background .lightness-alert-top {
  color: white; }

.design .color-alert-high5 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5)); }

.design .bg-color-alert-high5 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5)); }

.design .border-color-alert-high5 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high5)); }

.design .hue-alert-high5:after {
  content: 'H'; }

.design .saturation-alert-high5:after {
  content: 'S'; }

.design .lightness-alert-high5:after {
  content: 'L'; }

.design .background .hue-alert-high5, .design .background .saturation-alert-high5, .design .background .lightness-alert-high5 {
  color: white; }

.design .color-alert-high4 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high4)); }

.design .bg-color-alert-high4 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high4)); }

.design .border-color-alert-high4 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high4)); }

.design .hue-alert-high4:after {
  content: 'H'; }

.design .saturation-alert-high4:after {
  content: 'S'; }

.design .lightness-alert-high4:after {
  content: 'L'; }

.design .background .hue-alert-high4, .design .background .saturation-alert-high4, .design .background .lightness-alert-high4 {
  color: white; }

.design .color-alert-high3 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }

.design .bg-color-alert-high3 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }

.design .border-color-alert-high3 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high3)); }

.design .hue-alert-high3:after {
  content: 'H'; }

.design .saturation-alert-high3:after {
  content: 'S'; }

.design .lightness-alert-high3:after {
  content: 'L'; }

.design .background .hue-alert-high3, .design .background .saturation-alert-high3, .design .background .lightness-alert-high3 {
  color: white; }

.design .color-alert-high2 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }

.design .bg-color-alert-high2 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }

.design .border-color-alert-high2 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }

.design .hue-alert-high2:after {
  content: 'H'; }

.design .saturation-alert-high2:after {
  content: 'S'; }

.design .lightness-alert-high2:after {
  content: 'L'; }

.design .background .hue-alert-high2, .design .background .saturation-alert-high2, .design .background .lightness-alert-high2 {
  color: white; }

.design .color-alert-high1 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high1)); }

.design .bg-color-alert-high1 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high1)); }

.design .border-color-alert-high1 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high1)); }

.design .hue-alert-high1:after {
  content: 'H'; }

.design .saturation-alert-high1:after {
  content: 'S'; }

.design .lightness-alert-high1:after {
  content: 'L'; }

.design .background .hue-alert-high1, .design .background .saturation-alert-high1, .design .background .lightness-alert-high1 {
  color: white; }

.design .color-alert-medium {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .bg-color-alert-medium {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .border-color-alert-medium {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

.design .hue-alert-medium:after {
  content: 'H'; }

.design .saturation-alert-medium:after {
  content: 'S'; }

.design .lightness-alert-medium:after {
  content: 'L'; }

.design .background .hue-alert-medium, .design .background .saturation-alert-medium, .design .background .lightness-alert-medium {
  color: white; }

.design .color-alert-low1 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low1)); }

.design .bg-color-alert-low1 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low1)); }

.design .border-color-alert-low1 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low1)); }

.design .hue-alert-low1:after {
  content: 'H'; }

.design .saturation-alert-low1:after {
  content: 'S'; }

.design .lightness-alert-low1:after {
  content: 'L'; }

.design .background .hue-alert-low1, .design .background .saturation-alert-low1, .design .background .lightness-alert-low1 {
  color: white; }

.design .color-alert-low2 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low2)); }

.design .bg-color-alert-low2 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low2)); }

.design .border-color-alert-low2 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low2)); }

.design .hue-alert-low2:after {
  content: 'H'; }

.design .saturation-alert-low2:after {
  content: 'S'; }

.design .lightness-alert-low2:after {
  content: 'L'; }

.design .background .hue-alert-low2, .design .background .saturation-alert-low2, .design .background .lightness-alert-low2 {
  color: white; }

.design .color-alert-low3 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low3)); }

.design .bg-color-alert-low3 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low3)); }

.design .border-color-alert-low3 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low3)); }

.design .hue-alert-low3:after {
  content: 'H'; }

.design .saturation-alert-low3:after {
  content: 'S'; }

.design .lightness-alert-low3:after {
  content: 'L'; }

.design .background .hue-alert-low3, .design .background .saturation-alert-low3, .design .background .lightness-alert-low3 {
  color: white; }

.design .color-alert-low4 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low4)); }

.design .bg-color-alert-low4 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low4)); }

.design .border-color-alert-low4 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low4)); }

.design .hue-alert-low4:after {
  content: 'H'; }

.design .saturation-alert-low4:after {
  content: 'S'; }

.design .lightness-alert-low4:after {
  content: 'L'; }

.design .background .hue-alert-low4, .design .background .saturation-alert-low4, .design .background .lightness-alert-low4 {
  color: white; }

.design .color-alert-low5 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low5)); }

.design .bg-color-alert-low5 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low5)); }

.design .border-color-alert-low5 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-low5)); }

.design .hue-alert-low5:after {
  content: 'H'; }

.design .saturation-alert-low5:after {
  content: 'S'; }

.design .lightness-alert-low5:after {
  content: 'L'; }

.design .background .hue-alert-low5, .design .background .saturation-alert-low5, .design .background .lightness-alert-low5 {
  color: white; }

.design .color-alert-bottom {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-bottom)); }

.design .bg-color-alert-bottom {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-bottom)); }

.design .border-color-alert-bottom {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-bottom)); }

.design .hue-alert-bottom:after {
  content: 'H'; }

.design .saturation-alert-bottom:after {
  content: 'S'; }

.design .lightness-alert-bottom:after {
  content: 'L'; }

.design .background .hue-alert-bottom, .design .background .saturation-alert-bottom, .design .background .lightness-alert-bottom {
  color: white; }

.design .color-alert-i_top {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_top)); }

.design .bg-color-alert-i_top {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_top)); }

.design .border-color-alert-i_top {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_top)); }

.design .hue-alert-i_top:after {
  content: 'H'; }

.design .saturation-alert-i_top:after {
  content: 'S'; }

.design .lightness-alert-i_top:after {
  content: 'L'; }

.design .background .hue-alert-i_top, .design .background .saturation-alert-i_top, .design .background .lightness-alert-i_top {
  color: white; }

.design .color-alert-i_high5 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high5)); }

.design .bg-color-alert-i_high5 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high5)); }

.design .border-color-alert-i_high5 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high5)); }

.design .hue-alert-i_high5:after {
  content: 'H'; }

.design .saturation-alert-i_high5:after {
  content: 'S'; }

.design .lightness-alert-i_high5:after {
  content: 'L'; }

.design .background .hue-alert-i_high5, .design .background .saturation-alert-i_high5, .design .background .lightness-alert-i_high5 {
  color: white; }

.design .color-alert-i_high4 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high4)); }

.design .bg-color-alert-i_high4 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high4)); }

.design .border-color-alert-i_high4 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high4)); }

.design .hue-alert-i_high4:after {
  content: 'H'; }

.design .saturation-alert-i_high4:after {
  content: 'S'; }

.design .lightness-alert-i_high4:after {
  content: 'L'; }

.design .background .hue-alert-i_high4, .design .background .saturation-alert-i_high4, .design .background .lightness-alert-i_high4 {
  color: white; }

.design .color-alert-i_high3 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high3)); }

.design .bg-color-alert-i_high3 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high3)); }

.design .border-color-alert-i_high3 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high3)); }

.design .hue-alert-i_high3:after {
  content: 'H'; }

.design .saturation-alert-i_high3:after {
  content: 'S'; }

.design .lightness-alert-i_high3:after {
  content: 'L'; }

.design .background .hue-alert-i_high3, .design .background .saturation-alert-i_high3, .design .background .lightness-alert-i_high3 {
  color: white; }

.design .color-alert-i_high2 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }

.design .bg-color-alert-i_high2 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }

.design .border-color-alert-i_high2 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high2)); }

.design .hue-alert-i_high2:after {
  content: 'H'; }

.design .saturation-alert-i_high2:after {
  content: 'S'; }

.design .lightness-alert-i_high2:after {
  content: 'L'; }

.design .background .hue-alert-i_high2, .design .background .saturation-alert-i_high2, .design .background .lightness-alert-i_high2 {
  color: white; }

.design .color-alert-i_high1 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high1)); }

.design .bg-color-alert-i_high1 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high1)); }

.design .border-color-alert-i_high1 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_high1)); }

.design .hue-alert-i_high1:after {
  content: 'H'; }

.design .saturation-alert-i_high1:after {
  content: 'S'; }

.design .lightness-alert-i_high1:after {
  content: 'L'; }

.design .background .hue-alert-i_high1, .design .background .saturation-alert-i_high1, .design .background .lightness-alert-i_high1 {
  color: white; }

.design .color-alert-i_medium {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }

.design .bg-color-alert-i_medium {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }

.design .border-color-alert-i_medium {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }

.design .hue-alert-i_medium:after {
  content: 'H'; }

.design .saturation-alert-i_medium:after {
  content: 'S'; }

.design .lightness-alert-i_medium:after {
  content: 'L'; }

.design .background .hue-alert-i_medium, .design .background .saturation-alert-i_medium, .design .background .lightness-alert-i_medium {
  color: white; }

.design .color-alert-i_low1 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low1)); }

.design .bg-color-alert-i_low1 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low1)); }

.design .border-color-alert-i_low1 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low1)); }

.design .hue-alert-i_low1:after {
  content: 'H'; }

.design .saturation-alert-i_low1:after {
  content: 'S'; }

.design .lightness-alert-i_low1:after {
  content: 'L'; }

.design .background .hue-alert-i_low1, .design .background .saturation-alert-i_low1, .design .background .lightness-alert-i_low1 {
  color: white; }

.design .color-alert-i_low2 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low2)); }

.design .bg-color-alert-i_low2 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low2)); }

.design .border-color-alert-i_low2 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low2)); }

.design .hue-alert-i_low2:after {
  content: 'H'; }

.design .saturation-alert-i_low2:after {
  content: 'S'; }

.design .lightness-alert-i_low2:after {
  content: 'L'; }

.design .background .hue-alert-i_low2, .design .background .saturation-alert-i_low2, .design .background .lightness-alert-i_low2 {
  color: white; }

.design .color-alert-i_low3 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low3)); }

.design .bg-color-alert-i_low3 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low3)); }

.design .border-color-alert-i_low3 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low3)); }

.design .hue-alert-i_low3:after {
  content: 'H'; }

.design .saturation-alert-i_low3:after {
  content: 'S'; }

.design .lightness-alert-i_low3:after {
  content: 'L'; }

.design .background .hue-alert-i_low3, .design .background .saturation-alert-i_low3, .design .background .lightness-alert-i_low3 {
  color: white; }

.design .color-alert-i_low4 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low4)); }

.design .bg-color-alert-i_low4 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low4)); }

.design .border-color-alert-i_low4 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low4)); }

.design .hue-alert-i_low4:after {
  content: 'H'; }

.design .saturation-alert-i_low4:after {
  content: 'S'; }

.design .lightness-alert-i_low4:after {
  content: 'L'; }

.design .background .hue-alert-i_low4, .design .background .saturation-alert-i_low4, .design .background .lightness-alert-i_low4 {
  color: white; }

.design .color-alert-i_low5 {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low5)); }

.design .bg-color-alert-i_low5 {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low5)); }

.design .border-color-alert-i_low5 {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_low5)); }

.design .hue-alert-i_low5:after {
  content: 'H'; }

.design .saturation-alert-i_low5:after {
  content: 'S'; }

.design .lightness-alert-i_low5:after {
  content: 'L'; }

.design .background .hue-alert-i_low5, .design .background .saturation-alert-i_low5, .design .background .lightness-alert-i_low5 {
  color: white; }

.design .color-alert-i_bottom {
  color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_bottom)); }

.design .bg-color-alert-i_bottom {
  background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_bottom)); }

.design .border-color-alert-i_bottom {
  border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_bottom)); }

.design .hue-alert-i_bottom:after {
  content: 'H'; }

.design .saturation-alert-i_bottom:after {
  content: 'S'; }

.design .lightness-alert-i_bottom:after {
  content: 'L'; }

.design .background .hue-alert-i_bottom, .design .background .saturation-alert-i_bottom, .design .background .lightness-alert-i_bottom {
  color: white; }

.design .color-success {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .bg-color-success {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .border-color-success {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .hue-success:after {
  content: 'H'; }

.design .saturation-success:after {
  content: 'S'; }

.design .lightness-success:after {
  content: 'L'; }

.design .background .hue-success, .design .background .saturation-success, .design .background .lightness-success {
  color: white; }

.design .color-success-top {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-top)); }

.design .bg-color-success-top {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-top)); }

.design .border-color-success-top {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-top)); }

.design .hue-success-top:after {
  content: 'H'; }

.design .saturation-success-top:after {
  content: 'S'; }

.design .lightness-success-top:after {
  content: 'L'; }

.design .background .hue-success-top, .design .background .saturation-success-top, .design .background .lightness-success-top {
  color: white; }

.design .color-success-high5 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5)); }

.design .bg-color-success-high5 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5)); }

.design .border-color-success-high5 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high5)); }

.design .hue-success-high5:after {
  content: 'H'; }

.design .saturation-success-high5:after {
  content: 'S'; }

.design .lightness-success-high5:after {
  content: 'L'; }

.design .background .hue-success-high5, .design .background .saturation-success-high5, .design .background .lightness-success-high5 {
  color: white; }

.design .color-success-high4 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high4)); }

.design .bg-color-success-high4 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high4)); }

.design .border-color-success-high4 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high4)); }

.design .hue-success-high4:after {
  content: 'H'; }

.design .saturation-success-high4:after {
  content: 'S'; }

.design .lightness-success-high4:after {
  content: 'L'; }

.design .background .hue-success-high4, .design .background .saturation-success-high4, .design .background .lightness-success-high4 {
  color: white; }

.design .color-success-high3 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }

.design .bg-color-success-high3 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }

.design .border-color-success-high3 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high3)); }

.design .hue-success-high3:after {
  content: 'H'; }

.design .saturation-success-high3:after {
  content: 'S'; }

.design .lightness-success-high3:after {
  content: 'L'; }

.design .background .hue-success-high3, .design .background .saturation-success-high3, .design .background .lightness-success-high3 {
  color: white; }

.design .color-success-high2 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }

.design .bg-color-success-high2 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }

.design .border-color-success-high2 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high2)); }

.design .hue-success-high2:after {
  content: 'H'; }

.design .saturation-success-high2:after {
  content: 'S'; }

.design .lightness-success-high2:after {
  content: 'L'; }

.design .background .hue-success-high2, .design .background .saturation-success-high2, .design .background .lightness-success-high2 {
  color: white; }

.design .color-success-high1 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high1)); }

.design .bg-color-success-high1 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high1)); }

.design .border-color-success-high1 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-high1)); }

.design .hue-success-high1:after {
  content: 'H'; }

.design .saturation-success-high1:after {
  content: 'S'; }

.design .lightness-success-high1:after {
  content: 'L'; }

.design .background .hue-success-high1, .design .background .saturation-success-high1, .design .background .lightness-success-high1 {
  color: white; }

.design .color-success-medium {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .bg-color-success-medium {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .border-color-success-medium {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }

.design .hue-success-medium:after {
  content: 'H'; }

.design .saturation-success-medium:after {
  content: 'S'; }

.design .lightness-success-medium:after {
  content: 'L'; }

.design .background .hue-success-medium, .design .background .saturation-success-medium, .design .background .lightness-success-medium {
  color: white; }

.design .color-success-low1 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low1)); }

.design .bg-color-success-low1 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low1)); }

.design .border-color-success-low1 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low1)); }

.design .hue-success-low1:after {
  content: 'H'; }

.design .saturation-success-low1:after {
  content: 'S'; }

.design .lightness-success-low1:after {
  content: 'L'; }

.design .background .hue-success-low1, .design .background .saturation-success-low1, .design .background .lightness-success-low1 {
  color: white; }

.design .color-success-low2 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low2)); }

.design .bg-color-success-low2 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low2)); }

.design .border-color-success-low2 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low2)); }

.design .hue-success-low2:after {
  content: 'H'; }

.design .saturation-success-low2:after {
  content: 'S'; }

.design .lightness-success-low2:after {
  content: 'L'; }

.design .background .hue-success-low2, .design .background .saturation-success-low2, .design .background .lightness-success-low2 {
  color: white; }

.design .color-success-low3 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low3)); }

.design .bg-color-success-low3 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low3)); }

.design .border-color-success-low3 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low3)); }

.design .hue-success-low3:after {
  content: 'H'; }

.design .saturation-success-low3:after {
  content: 'S'; }

.design .lightness-success-low3:after {
  content: 'L'; }

.design .background .hue-success-low3, .design .background .saturation-success-low3, .design .background .lightness-success-low3 {
  color: white; }

.design .color-success-low4 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low4)); }

.design .bg-color-success-low4 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low4)); }

.design .border-color-success-low4 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low4)); }

.design .hue-success-low4:after {
  content: 'H'; }

.design .saturation-success-low4:after {
  content: 'S'; }

.design .lightness-success-low4:after {
  content: 'L'; }

.design .background .hue-success-low4, .design .background .saturation-success-low4, .design .background .lightness-success-low4 {
  color: white; }

.design .color-success-low5 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low5)); }

.design .bg-color-success-low5 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low5)); }

.design .border-color-success-low5 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-low5)); }

.design .hue-success-low5:after {
  content: 'H'; }

.design .saturation-success-low5:after {
  content: 'S'; }

.design .lightness-success-low5:after {
  content: 'L'; }

.design .background .hue-success-low5, .design .background .saturation-success-low5, .design .background .lightness-success-low5 {
  color: white; }

.design .color-success-bottom {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-bottom)); }

.design .bg-color-success-bottom {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-bottom)); }

.design .border-color-success-bottom {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-bottom)); }

.design .hue-success-bottom:after {
  content: 'H'; }

.design .saturation-success-bottom:after {
  content: 'S'; }

.design .lightness-success-bottom:after {
  content: 'L'; }

.design .background .hue-success-bottom, .design .background .saturation-success-bottom, .design .background .lightness-success-bottom {
  color: white; }

.design .color-success-i_top {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_top)); }

.design .bg-color-success-i_top {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_top)); }

.design .border-color-success-i_top {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_top)); }

.design .hue-success-i_top:after {
  content: 'H'; }

.design .saturation-success-i_top:after {
  content: 'S'; }

.design .lightness-success-i_top:after {
  content: 'L'; }

.design .background .hue-success-i_top, .design .background .saturation-success-i_top, .design .background .lightness-success-i_top {
  color: white; }

.design .color-success-i_high5 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high5)); }

.design .bg-color-success-i_high5 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high5)); }

.design .border-color-success-i_high5 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high5)); }

.design .hue-success-i_high5:after {
  content: 'H'; }

.design .saturation-success-i_high5:after {
  content: 'S'; }

.design .lightness-success-i_high5:after {
  content: 'L'; }

.design .background .hue-success-i_high5, .design .background .saturation-success-i_high5, .design .background .lightness-success-i_high5 {
  color: white; }

.design .color-success-i_high4 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high4)); }

.design .bg-color-success-i_high4 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high4)); }

.design .border-color-success-i_high4 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high4)); }

.design .hue-success-i_high4:after {
  content: 'H'; }

.design .saturation-success-i_high4:after {
  content: 'S'; }

.design .lightness-success-i_high4:after {
  content: 'L'; }

.design .background .hue-success-i_high4, .design .background .saturation-success-i_high4, .design .background .lightness-success-i_high4 {
  color: white; }

.design .color-success-i_high3 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high3)); }

.design .bg-color-success-i_high3 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high3)); }

.design .border-color-success-i_high3 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high3)); }

.design .hue-success-i_high3:after {
  content: 'H'; }

.design .saturation-success-i_high3:after {
  content: 'S'; }

.design .lightness-success-i_high3:after {
  content: 'L'; }

.design .background .hue-success-i_high3, .design .background .saturation-success-i_high3, .design .background .lightness-success-i_high3 {
  color: white; }

.design .color-success-i_high2 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high2)); }

.design .bg-color-success-i_high2 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high2)); }

.design .border-color-success-i_high2 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high2)); }

.design .hue-success-i_high2:after {
  content: 'H'; }

.design .saturation-success-i_high2:after {
  content: 'S'; }

.design .lightness-success-i_high2:after {
  content: 'L'; }

.design .background .hue-success-i_high2, .design .background .saturation-success-i_high2, .design .background .lightness-success-i_high2 {
  color: white; }

.design .color-success-i_high1 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high1)); }

.design .bg-color-success-i_high1 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high1)); }

.design .border-color-success-i_high1 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_high1)); }

.design .hue-success-i_high1:after {
  content: 'H'; }

.design .saturation-success-i_high1:after {
  content: 'S'; }

.design .lightness-success-i_high1:after {
  content: 'L'; }

.design .background .hue-success-i_high1, .design .background .saturation-success-i_high1, .design .background .lightness-success-i_high1 {
  color: white; }

.design .color-success-i_medium {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium)); }

.design .bg-color-success-i_medium {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium)); }

.design .border-color-success-i_medium {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium)); }

.design .hue-success-i_medium:after {
  content: 'H'; }

.design .saturation-success-i_medium:after {
  content: 'S'; }

.design .lightness-success-i_medium:after {
  content: 'L'; }

.design .background .hue-success-i_medium, .design .background .saturation-success-i_medium, .design .background .lightness-success-i_medium {
  color: white; }

.design .color-success-i_low1 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low1)); }

.design .bg-color-success-i_low1 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low1)); }

.design .border-color-success-i_low1 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low1)); }

.design .hue-success-i_low1:after {
  content: 'H'; }

.design .saturation-success-i_low1:after {
  content: 'S'; }

.design .lightness-success-i_low1:after {
  content: 'L'; }

.design .background .hue-success-i_low1, .design .background .saturation-success-i_low1, .design .background .lightness-success-i_low1 {
  color: white; }

.design .color-success-i_low2 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low2)); }

.design .bg-color-success-i_low2 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low2)); }

.design .border-color-success-i_low2 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low2)); }

.design .hue-success-i_low2:after {
  content: 'H'; }

.design .saturation-success-i_low2:after {
  content: 'S'; }

.design .lightness-success-i_low2:after {
  content: 'L'; }

.design .background .hue-success-i_low2, .design .background .saturation-success-i_low2, .design .background .lightness-success-i_low2 {
  color: white; }

.design .color-success-i_low3 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low3)); }

.design .bg-color-success-i_low3 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low3)); }

.design .border-color-success-i_low3 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low3)); }

.design .hue-success-i_low3:after {
  content: 'H'; }

.design .saturation-success-i_low3:after {
  content: 'S'; }

.design .lightness-success-i_low3:after {
  content: 'L'; }

.design .background .hue-success-i_low3, .design .background .saturation-success-i_low3, .design .background .lightness-success-i_low3 {
  color: white; }

.design .color-success-i_low4 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low4)); }

.design .bg-color-success-i_low4 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low4)); }

.design .border-color-success-i_low4 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low4)); }

.design .hue-success-i_low4:after {
  content: 'H'; }

.design .saturation-success-i_low4:after {
  content: 'S'; }

.design .lightness-success-i_low4:after {
  content: 'L'; }

.design .background .hue-success-i_low4, .design .background .saturation-success-i_low4, .design .background .lightness-success-i_low4 {
  color: white; }

.design .color-success-i_low5 {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low5)); }

.design .bg-color-success-i_low5 {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low5)); }

.design .border-color-success-i_low5 {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_low5)); }

.design .hue-success-i_low5:after {
  content: 'H'; }

.design .saturation-success-i_low5:after {
  content: 'S'; }

.design .lightness-success-i_low5:after {
  content: 'L'; }

.design .background .hue-success-i_low5, .design .background .saturation-success-i_low5, .design .background .lightness-success-i_low5 {
  color: white; }

.design .color-success-i_bottom {
  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_bottom)); }

.design .bg-color-success-i_bottom {
  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_bottom)); }

.design .border-color-success-i_bottom {
  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_bottom)); }

.design .hue-success-i_bottom:after {
  content: 'H'; }

.design .saturation-success-i_bottom:after {
  content: 'S'; }

.design .lightness-success-i_bottom:after {
  content: 'L'; }

.design .background .hue-success-i_bottom, .design .background .saturation-success-i_bottom, .design .background .lightness-success-i_bottom {
  color: white; }

.design .color-admin {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .bg-color-admin {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .border-color-admin {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .hue-admin:after {
  content: 'H'; }

.design .saturation-admin:after {
  content: 'S'; }

.design .lightness-admin:after {
  content: 'L'; }

.design .background .hue-admin, .design .background .saturation-admin, .design .background .lightness-admin {
  color: white; }

.design .color-admin-top {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-top)); }

.design .bg-color-admin-top {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-top)); }

.design .border-color-admin-top {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-top)); }

.design .hue-admin-top:after {
  content: 'H'; }

.design .saturation-admin-top:after {
  content: 'S'; }

.design .lightness-admin-top:after {
  content: 'L'; }

.design .background .hue-admin-top, .design .background .saturation-admin-top, .design .background .lightness-admin-top {
  color: white; }

.design .color-admin-high5 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high5)); }

.design .bg-color-admin-high5 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high5)); }

.design .border-color-admin-high5 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high5)); }

.design .hue-admin-high5:after {
  content: 'H'; }

.design .saturation-admin-high5:after {
  content: 'S'; }

.design .lightness-admin-high5:after {
  content: 'L'; }

.design .background .hue-admin-high5, .design .background .saturation-admin-high5, .design .background .lightness-admin-high5 {
  color: white; }

.design .color-admin-high4 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high4)); }

.design .bg-color-admin-high4 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high4)); }

.design .border-color-admin-high4 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high4)); }

.design .hue-admin-high4:after {
  content: 'H'; }

.design .saturation-admin-high4:after {
  content: 'S'; }

.design .lightness-admin-high4:after {
  content: 'L'; }

.design .background .hue-admin-high4, .design .background .saturation-admin-high4, .design .background .lightness-admin-high4 {
  color: white; }

.design .color-admin-high3 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high3)); }

.design .bg-color-admin-high3 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high3)); }

.design .border-color-admin-high3 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high3)); }

.design .hue-admin-high3:after {
  content: 'H'; }

.design .saturation-admin-high3:after {
  content: 'S'; }

.design .lightness-admin-high3:after {
  content: 'L'; }

.design .background .hue-admin-high3, .design .background .saturation-admin-high3, .design .background .lightness-admin-high3 {
  color: white; }

.design .color-admin-high2 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }

.design .bg-color-admin-high2 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }

.design .border-color-admin-high2 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high2)); }

.design .hue-admin-high2:after {
  content: 'H'; }

.design .saturation-admin-high2:after {
  content: 'S'; }

.design .lightness-admin-high2:after {
  content: 'L'; }

.design .background .hue-admin-high2, .design .background .saturation-admin-high2, .design .background .lightness-admin-high2 {
  color: white; }

.design .color-admin-high1 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high1)); }

.design .bg-color-admin-high1 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high1)); }

.design .border-color-admin-high1 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-high1)); }

.design .hue-admin-high1:after {
  content: 'H'; }

.design .saturation-admin-high1:after {
  content: 'S'; }

.design .lightness-admin-high1:after {
  content: 'L'; }

.design .background .hue-admin-high1, .design .background .saturation-admin-high1, .design .background .lightness-admin-high1 {
  color: white; }

.design .color-admin-medium {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .bg-color-admin-medium {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .border-color-admin-medium {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }

.design .hue-admin-medium:after {
  content: 'H'; }

.design .saturation-admin-medium:after {
  content: 'S'; }

.design .lightness-admin-medium:after {
  content: 'L'; }

.design .background .hue-admin-medium, .design .background .saturation-admin-medium, .design .background .lightness-admin-medium {
  color: white; }

.design .color-admin-low1 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low1)); }

.design .bg-color-admin-low1 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low1)); }

.design .border-color-admin-low1 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low1)); }

.design .hue-admin-low1:after {
  content: 'H'; }

.design .saturation-admin-low1:after {
  content: 'S'; }

.design .lightness-admin-low1:after {
  content: 'L'; }

.design .background .hue-admin-low1, .design .background .saturation-admin-low1, .design .background .lightness-admin-low1 {
  color: white; }

.design .color-admin-low2 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low2)); }

.design .bg-color-admin-low2 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low2)); }

.design .border-color-admin-low2 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low2)); }

.design .hue-admin-low2:after {
  content: 'H'; }

.design .saturation-admin-low2:after {
  content: 'S'; }

.design .lightness-admin-low2:after {
  content: 'L'; }

.design .background .hue-admin-low2, .design .background .saturation-admin-low2, .design .background .lightness-admin-low2 {
  color: white; }

.design .color-admin-low3 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low3)); }

.design .bg-color-admin-low3 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low3)); }

.design .border-color-admin-low3 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low3)); }

.design .hue-admin-low3:after {
  content: 'H'; }

.design .saturation-admin-low3:after {
  content: 'S'; }

.design .lightness-admin-low3:after {
  content: 'L'; }

.design .background .hue-admin-low3, .design .background .saturation-admin-low3, .design .background .lightness-admin-low3 {
  color: white; }

.design .color-admin-low4 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low4)); }

.design .bg-color-admin-low4 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low4)); }

.design .border-color-admin-low4 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low4)); }

.design .hue-admin-low4:after {
  content: 'H'; }

.design .saturation-admin-low4:after {
  content: 'S'; }

.design .lightness-admin-low4:after {
  content: 'L'; }

.design .background .hue-admin-low4, .design .background .saturation-admin-low4, .design .background .lightness-admin-low4 {
  color: white; }

.design .color-admin-low5 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low5)); }

.design .bg-color-admin-low5 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low5)); }

.design .border-color-admin-low5 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-low5)); }

.design .hue-admin-low5:after {
  content: 'H'; }

.design .saturation-admin-low5:after {
  content: 'S'; }

.design .lightness-admin-low5:after {
  content: 'L'; }

.design .background .hue-admin-low5, .design .background .saturation-admin-low5, .design .background .lightness-admin-low5 {
  color: white; }

.design .color-admin-bottom {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-bottom)); }

.design .bg-color-admin-bottom {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-bottom)); }

.design .border-color-admin-bottom {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-bottom)); }

.design .hue-admin-bottom:after {
  content: 'H'; }

.design .saturation-admin-bottom:after {
  content: 'S'; }

.design .lightness-admin-bottom:after {
  content: 'L'; }

.design .background .hue-admin-bottom, .design .background .saturation-admin-bottom, .design .background .lightness-admin-bottom {
  color: white; }

.design .color-admin-i_top {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_top)); }

.design .bg-color-admin-i_top {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_top)); }

.design .border-color-admin-i_top {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_top)); }

.design .hue-admin-i_top:after {
  content: 'H'; }

.design .saturation-admin-i_top:after {
  content: 'S'; }

.design .lightness-admin-i_top:after {
  content: 'L'; }

.design .background .hue-admin-i_top, .design .background .saturation-admin-i_top, .design .background .lightness-admin-i_top {
  color: white; }

.design .color-admin-i_high5 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high5)); }

.design .bg-color-admin-i_high5 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high5)); }

.design .border-color-admin-i_high5 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high5)); }

.design .hue-admin-i_high5:after {
  content: 'H'; }

.design .saturation-admin-i_high5:after {
  content: 'S'; }

.design .lightness-admin-i_high5:after {
  content: 'L'; }

.design .background .hue-admin-i_high5, .design .background .saturation-admin-i_high5, .design .background .lightness-admin-i_high5 {
  color: white; }

.design .color-admin-i_high4 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high4)); }

.design .bg-color-admin-i_high4 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high4)); }

.design .border-color-admin-i_high4 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high4)); }

.design .hue-admin-i_high4:after {
  content: 'H'; }

.design .saturation-admin-i_high4:after {
  content: 'S'; }

.design .lightness-admin-i_high4:after {
  content: 'L'; }

.design .background .hue-admin-i_high4, .design .background .saturation-admin-i_high4, .design .background .lightness-admin-i_high4 {
  color: white; }

.design .color-admin-i_high3 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high3)); }

.design .bg-color-admin-i_high3 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high3)); }

.design .border-color-admin-i_high3 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high3)); }

.design .hue-admin-i_high3:after {
  content: 'H'; }

.design .saturation-admin-i_high3:after {
  content: 'S'; }

.design .lightness-admin-i_high3:after {
  content: 'L'; }

.design .background .hue-admin-i_high3, .design .background .saturation-admin-i_high3, .design .background .lightness-admin-i_high3 {
  color: white; }

.design .color-admin-i_high2 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high2)); }

.design .bg-color-admin-i_high2 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high2)); }

.design .border-color-admin-i_high2 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high2)); }

.design .hue-admin-i_high2:after {
  content: 'H'; }

.design .saturation-admin-i_high2:after {
  content: 'S'; }

.design .lightness-admin-i_high2:after {
  content: 'L'; }

.design .background .hue-admin-i_high2, .design .background .saturation-admin-i_high2, .design .background .lightness-admin-i_high2 {
  color: white; }

.design .color-admin-i_high1 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high1)); }

.design .bg-color-admin-i_high1 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high1)); }

.design .border-color-admin-i_high1 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_high1)); }

.design .hue-admin-i_high1:after {
  content: 'H'; }

.design .saturation-admin-i_high1:after {
  content: 'S'; }

.design .lightness-admin-i_high1:after {
  content: 'L'; }

.design .background .hue-admin-i_high1, .design .background .saturation-admin-i_high1, .design .background .lightness-admin-i_high1 {
  color: white; }

.design .color-admin-i_medium {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_medium)); }

.design .bg-color-admin-i_medium {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_medium)); }

.design .border-color-admin-i_medium {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_medium)); }

.design .hue-admin-i_medium:after {
  content: 'H'; }

.design .saturation-admin-i_medium:after {
  content: 'S'; }

.design .lightness-admin-i_medium:after {
  content: 'L'; }

.design .background .hue-admin-i_medium, .design .background .saturation-admin-i_medium, .design .background .lightness-admin-i_medium {
  color: white; }

.design .color-admin-i_low1 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low1)); }

.design .bg-color-admin-i_low1 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low1)); }

.design .border-color-admin-i_low1 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low1)); }

.design .hue-admin-i_low1:after {
  content: 'H'; }

.design .saturation-admin-i_low1:after {
  content: 'S'; }

.design .lightness-admin-i_low1:after {
  content: 'L'; }

.design .background .hue-admin-i_low1, .design .background .saturation-admin-i_low1, .design .background .lightness-admin-i_low1 {
  color: white; }

.design .color-admin-i_low2 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low2)); }

.design .bg-color-admin-i_low2 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low2)); }

.design .border-color-admin-i_low2 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low2)); }

.design .hue-admin-i_low2:after {
  content: 'H'; }

.design .saturation-admin-i_low2:after {
  content: 'S'; }

.design .lightness-admin-i_low2:after {
  content: 'L'; }

.design .background .hue-admin-i_low2, .design .background .saturation-admin-i_low2, .design .background .lightness-admin-i_low2 {
  color: white; }

.design .color-admin-i_low3 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low3)); }

.design .bg-color-admin-i_low3 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low3)); }

.design .border-color-admin-i_low3 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low3)); }

.design .hue-admin-i_low3:after {
  content: 'H'; }

.design .saturation-admin-i_low3:after {
  content: 'S'; }

.design .lightness-admin-i_low3:after {
  content: 'L'; }

.design .background .hue-admin-i_low3, .design .background .saturation-admin-i_low3, .design .background .lightness-admin-i_low3 {
  color: white; }

.design .color-admin-i_low4 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low4)); }

.design .bg-color-admin-i_low4 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low4)); }

.design .border-color-admin-i_low4 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low4)); }

.design .hue-admin-i_low4:after {
  content: 'H'; }

.design .saturation-admin-i_low4:after {
  content: 'S'; }

.design .lightness-admin-i_low4:after {
  content: 'L'; }

.design .background .hue-admin-i_low4, .design .background .saturation-admin-i_low4, .design .background .lightness-admin-i_low4 {
  color: white; }

.design .color-admin-i_low5 {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low5)); }

.design .bg-color-admin-i_low5 {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low5)); }

.design .border-color-admin-i_low5 {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_low5)); }

.design .hue-admin-i_low5:after {
  content: 'H'; }

.design .saturation-admin-i_low5:after {
  content: 'S'; }

.design .lightness-admin-i_low5:after {
  content: 'L'; }

.design .background .hue-admin-i_low5, .design .background .saturation-admin-i_low5, .design .background .lightness-admin-i_low5 {
  color: white; }

.design .color-admin-i_bottom {
  color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_bottom)); }

.design .bg-color-admin-i_bottom {
  background: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_bottom)); }

.design .border-color-admin-i_bottom {
  border-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-i_bottom)); }

.design .hue-admin-i_bottom:after {
  content: 'H'; }

.design .saturation-admin-i_bottom:after {
  content: 'S'; }

.design .lightness-admin-i_bottom:after {
  content: 'L'; }

.design .background .hue-admin-i_bottom, .design .background .saturation-admin-i_bottom, .design .background .lightness-admin-i_bottom {
  color: white; }

.design table.colors td, .design table.colors th {
  text-align: center;
  padding: 0.25rem; }
  .design table.colors td:first-child, .design table.colors th:first-child {
    text-align: start; }

.design table.colors .background {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  width: 5rem;
  height: 4rem;
  border: 1px dotted hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  margin: 0 auto;
  font: var(--typo-label-tiny);
  text-align: center; }
  .design table.colors .background .hue, .design table.colors .background .saturation, .design table.colors .background .lightness {
    flex: 1;
    display: none;
    padding: 0.25rem; }
  .design table.colors .background:hover > * {
    display: block;
    cursor: pointer; }

/**
 * domain component styling the "typo" base variables
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.design .typo-text-tiny {
  font: var(--typo-text-tiny); }

.design .typo-text-tiny::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-text-tiny)";
  font: var(--typo-label-medium); }

.design .typo-text-small {
  font: var(--typo-text-small); }

.design .typo-text-small::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-text-small)";
  font: var(--typo-label-medium); }

.design .typo-text-medium {
  font: var(--typo-text-medium); }

.design .typo-text-medium::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-text-medium)";
  font: var(--typo-label-medium); }

.design .typo-text-large {
  font: var(--typo-text-large); }

.design .typo-text-large::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-text-large)";
  font: var(--typo-label-medium); }

.design .typo-text-huge {
  font: var(--typo-text-huge); }

.design .typo-text-huge::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-text-huge)";
  font: var(--typo-label-medium); }

.design .typo-title-tiny {
  font: var(--typo-title-tiny); }

.design .typo-title-tiny::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-title-tiny)";
  font: var(--typo-label-medium); }

.design .typo-title-small {
  font: var(--typo-title-small); }

.design .typo-title-small::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-title-small)";
  font: var(--typo-label-medium); }

.design .typo-title-medium {
  font: var(--typo-title-medium); }

.design .typo-title-medium::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-title-medium)";
  font: var(--typo-label-medium); }

.design .typo-title-large {
  font: var(--typo-title-large); }

.design .typo-title-large::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-title-large)";
  font: var(--typo-label-medium); }

.design .typo-title-huge {
  font: var(--typo-title-huge); }

.design .typo-title-huge::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-title-huge)";
  font: var(--typo-label-medium); }

.design .typo-display-small {
  font: var(--typo-display-small); }

.design .typo-display-small::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-display-small)";
  font: var(--typo-label-medium); }

.design .typo-display-medium {
  font: var(--typo-display-medium); }

.design .typo-display-medium::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-display-medium)";
  font: var(--typo-label-medium); }

.design .typo-display-large {
  font: var(--typo-display-large); }

.design .typo-display-large::before {
  display: inline-block;
  width: 20rem;
  margin: 0 1rem 0 0;
  content: "var(--typo-display-large)";
  font: var(--typo-label-medium); }

/**
 * domain component styling the "sizing" base variables
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.design .sizing-space-tiny {
  display: flex; }
  .design .sizing-space-tiny .example {
    width: var(--sizing-space-tiny);
    height: var(--sizing-space-tiny);
    margin-inline-end: 10rem-var(--sizing-space-tiny);
    background: var(--color-standard); }
  .design .sizing-space-tiny .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-space-tiny)"; }
  .design .sizing-space-tiny .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-space-small {
  display: flex; }
  .design .sizing-space-small .example {
    width: var(--sizing-space-small);
    height: var(--sizing-space-small);
    margin-inline-end: 10rem-var(--sizing-space-small);
    background: var(--color-standard); }
  .design .sizing-space-small .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-space-small)"; }
  .design .sizing-space-small .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-space-medium {
  display: flex; }
  .design .sizing-space-medium .example {
    width: var(--sizing-space-medium);
    height: var(--sizing-space-medium);
    margin-inline-end: 10rem-var(--sizing-space-medium);
    background: var(--color-standard); }
  .design .sizing-space-medium .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-space-medium)"; }
  .design .sizing-space-medium .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-space-large {
  display: flex; }
  .design .sizing-space-large .example {
    width: var(--sizing-space-large);
    height: var(--sizing-space-large);
    margin-inline-end: 10rem-var(--sizing-space-large);
    background: var(--color-standard); }
  .design .sizing-space-large .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-space-large)"; }
  .design .sizing-space-large .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-space-huge {
  display: flex; }
  .design .sizing-space-huge .example {
    width: var(--sizing-space-huge);
    height: var(--sizing-space-huge);
    margin-inline-end: 10rem-var(--sizing-space-huge);
    background: var(--color-standard); }
  .design .sizing-space-huge .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-space-huge)"; }
  .design .sizing-space-huge .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-text-tiny {
  display: flex; }
  .design .sizing-text-tiny .example {
    width: var(--sizing-text-tiny);
    height: var(--sizing-text-tiny);
    margin-inline-end: 10rem-var(--sizing-text-tiny);
    background: var(--color-standard); }
  .design .sizing-text-tiny .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-text-tiny)"; }
  .design .sizing-text-tiny .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-text-small {
  display: flex; }
  .design .sizing-text-small .example {
    width: var(--sizing-text-small);
    height: var(--sizing-text-small);
    margin-inline-end: 10rem-var(--sizing-text-small);
    background: var(--color-standard); }
  .design .sizing-text-small .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-text-small)"; }
  .design .sizing-text-small .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-text-medium {
  display: flex; }
  .design .sizing-text-medium .example {
    width: var(--sizing-text-medium);
    height: var(--sizing-text-medium);
    margin-inline-end: 10rem-var(--sizing-text-medium);
    background: var(--color-standard); }
  .design .sizing-text-medium .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-text-medium)"; }
  .design .sizing-text-medium .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-text-large {
  display: flex; }
  .design .sizing-text-large .example {
    width: var(--sizing-text-large);
    height: var(--sizing-text-large);
    margin-inline-end: 10rem-var(--sizing-text-large);
    background: var(--color-standard); }
  .design .sizing-text-large .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-text-large)"; }
  .design .sizing-text-large .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-text-huge {
  display: flex; }
  .design .sizing-text-huge .example {
    width: var(--sizing-text-huge);
    height: var(--sizing-text-huge);
    margin-inline-end: 10rem-var(--sizing-text-huge);
    background: var(--color-standard); }
  .design .sizing-text-huge .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-text-huge)"; }
  .design .sizing-text-huge .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-title-tiny {
  display: flex; }
  .design .sizing-title-tiny .example {
    width: var(--sizing-title-tiny);
    height: var(--sizing-title-tiny);
    margin-inline-end: 10rem-var(--sizing-title-tiny);
    background: var(--color-standard); }
  .design .sizing-title-tiny .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-title-tiny)"; }
  .design .sizing-title-tiny .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-title-small {
  display: flex; }
  .design .sizing-title-small .example {
    width: var(--sizing-title-small);
    height: var(--sizing-title-small);
    margin-inline-end: 10rem-var(--sizing-title-small);
    background: var(--color-standard); }
  .design .sizing-title-small .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-title-small)"; }
  .design .sizing-title-small .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-title-medium {
  display: flex; }
  .design .sizing-title-medium .example {
    width: var(--sizing-title-medium);
    height: var(--sizing-title-medium);
    margin-inline-end: 10rem-var(--sizing-title-medium);
    background: var(--color-standard); }
  .design .sizing-title-medium .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-title-medium)"; }
  .design .sizing-title-medium .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-title-large {
  display: flex; }
  .design .sizing-title-large .example {
    width: var(--sizing-title-large);
    height: var(--sizing-title-large);
    margin-inline-end: 10rem-var(--sizing-title-large);
    background: var(--color-standard); }
  .design .sizing-title-large .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-title-large)"; }
  .design .sizing-title-large .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-title-huge {
  display: flex; }
  .design .sizing-title-huge .example {
    width: var(--sizing-title-huge);
    height: var(--sizing-title-huge);
    margin-inline-end: 10rem-var(--sizing-title-huge);
    background: var(--color-standard); }
  .design .sizing-title-huge .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-title-huge)"; }
  .design .sizing-title-huge .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-display-small {
  display: flex; }
  .design .sizing-display-small .example {
    width: var(--sizing-display-small);
    height: var(--sizing-display-small);
    margin-inline-end: 10rem-var(--sizing-display-small);
    background: var(--color-standard); }
  .design .sizing-display-small .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-display-small)"; }
  .design .sizing-display-small .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-display-medium {
  display: flex; }
  .design .sizing-display-medium .example {
    width: var(--sizing-display-medium);
    height: var(--sizing-display-medium);
    margin-inline-end: 10rem-var(--sizing-display-medium);
    background: var(--color-standard); }
  .design .sizing-display-medium .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-display-medium)"; }
  .design .sizing-display-medium .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

.design .sizing-display-large {
  display: flex; }
  .design .sizing-display-large .example {
    width: var(--sizing-display-large);
    height: var(--sizing-display-large);
    margin-inline-end: 10rem-var(--sizing-display-large);
    background: var(--color-standard); }
  .design .sizing-display-large .label:before {
    display: inline-block;
    width: 8rem;
    content: "var(--sizing-display-large)"; }
  .design .sizing-display-large .label:after {
    display: inline-block;
    width: 8rem;
    content: "undefined"; }

/**
 * Includes all discipline styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * discipline shown in the box format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.discipline.format-box {
  display: block;
  position: relative;
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  border-radius: var(--sizing-space-tiny);
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .discipline.format-box > .logo {
    display: block;
    width: 100%;
    border-top-left-radius: var(--sizing-space-tiny);
    border-top-right-radius: var(--sizing-space-tiny); }
  .discipline.format-box > .caption {
    display: flex;
    align-items: center;
    font: var(--typo-title-small);
    letter-spacing: 0;
    font: var(--typo-title-tiny);
    font-weight: 400;
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    margin: var(--sizing-space-small); }
    .discipline.format-box > .caption > .icon {
      width: 1.5rem;
      margin-inline-end: var(--sizing-space-small); }
    .discipline.format-box > .caption > .name {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
  .discipline.format-box.hover:hover {
    box-shadow: 0 0 0 var(--sizing-space-tiny) var(--color-primary);
    cursor: pointer; }
  .discipline.format-box.current {
    box-shadow: 0 0 0 var(--sizing-space-tiny) var(--color-primary); }
  .discipline.format-box, .discipline.format-box.size-original {
    display: block;
    width: 18.75rem; }
  .discipline.format-box.size-small {
    display: block;
    width: 10rem; }
  .discipline.format-box.size-medium {
    display: block;
    width: 15rem; }
  .discipline.format-box.size-large {
    display: block;
    width: 18.75rem; }
  .discipline.format-box.size-scale {
    display: block;
    width: auto; }

@media (max-width: 600px) {
  .discipline.format-box {
    border: none;
    border-radius: 0;
    background: none; }
    .discipline.format-box.hover:hover {
      box-shadow: none;
      cursor: pointer; }
    .discipline.format-box *.mobile-hide {
      display: none; }
    .discipline.format-box .caption {
      margin: 0.5rem 0 0.5rem 0; }
      .discipline.format-box .caption > .name {
        overflow: inherit; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .discipline.format-box.hover:hover {
    box-shadow: none;
    cursor: pointer; }
  .discipline.format-box *.tablet-hide {
    display: none; }
  .discipline.format-box .caption {
    margin: 0.5rem 0 0.5rem 0; }
    .discipline.format-box .caption > .name {
      overflow: inherit; } }

/**
 * discipline shown in the cover 4/3 format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.discipline.format-cover {
  display: block;
  position: relative;
  line-height: 0;
  border-radius: var(--discipline-cover-radius);
  box-shadow: 0 0 0 var(--discipline-cover-border-size) var(--discipline-cover-border-color);
  overflow: hidden; }
  .discipline.format-cover > .cover {
    box-sizing: border-box;
    width: 100%; }
  .discipline.format-cover.hover:hover {
    box-shadow: 0 0 0 var(--discipline-cover-outline-size) var(--discipline-cover-hover-outline-color);
    cursor: pointer; }
  .discipline.format-cover.current {
    box-shadow: 0 0 0 var(--discipline-cover-outline-size) var(--discipline-cover-hover-outline-color); }
  .discipline.format-cover, .discipline.format-cover.size-original {
    display: block;
    width: 14.0625rem;
    height: 18.75rem; }
  .discipline.format-cover.size-small {
    display: block;
    width: 8rem;
    height: 10.66667rem; }
  .discipline.format-cover.size-medium {
    display: block;
    width: 10rem;
    height: 13.33333rem; }
  .discipline.format-cover.size-large {
    display: block;
    width: 12.5rem;
    height: 16.66667rem; }
  .discipline.format-cover.size-scale {
    display: block;
    width: auto;
    height: auto; }
  .discipline.format-cover > .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    background: hsla(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium), 0.38);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    font: var(--typo-title-medium); }

html {
  --discipline-cover-radius: 0;
  --discipline-cover-outline-size: var(--sizing-space-tiny);
  --discipline-cover-hover-outline-color: var(--color-primary);
  --discipline-cover-border-size: 0;
  --discipline-cover-border-color: transparent; }

/**
 * discipline shown in the icon 4/3 format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.discipline.format-icon {
  display: block;
  position: relative;
  line-height: 0;
  border-radius: 0; }
  .discipline.format-icon > img {
    width: 100%;
    box-sizing: border-box; }
  .discipline.format-icon, .discipline.format-icon.size-original {
    width: 3rem;
    height: 3rem; }
  .discipline.format-icon.size-tiny {
    width: 1rem;
    height: 1rem; }
  .discipline.format-icon.size-small {
    width: 1.5rem;
    height: 1.5rem; }
  .discipline.format-icon.size-medium {
    width: 2rem;
    height: 2rem; }
  .discipline.format-icon.size-large {
    width: 2.5rem;
    height: 2.5rem; }
  .discipline.format-icon.size-huge {
    width: 3rem;
    height: 3rem; }
  .discipline.format-icon.size-scale {
    width: auto;
    height: auto; }

/**
 * discipline shown in the header format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.discipline.format-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: var(--sizing-space-huge); }
  .discipline.format-header .title {
    display: flex;
    align-items: center;
    padding: 0;
    font: var(--typo-title-small);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .discipline.format-header .title.light h1 {
      font-weight: 500; }
    .discipline.format-header .title > .discipline.format-icon {
      margin-inline-end: var(--sizing-space-medium); }
  .discipline.format-header .secondary {
    padding: 0;
    font: var(--typo-text-medium);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

@media (max-width: 600px) {
  .discipline.format-header .title > .discipline.format-icon {
    display: none; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .discipline.format-header .title > .discipline.format-icon {
    display: none; } }

/**
 * Includes all game styling
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
/**
 * Game shown in the row format.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.game.format-row {
  display: flex;
  flex-direction: column; }
  .game.format-row > .row {
    display: flex;
    padding: var(--sizing-space-medium); }
    .game.format-row > .row:not(:first-child) {
      border-top: 1px solid; }
    .game.format-row > .row > .opponent.opponent-1 {
      flex: 1;
      display: flex;
      justify-content: flex-end; }
      .game.format-row > .row > .opponent.opponent-1 > * {
        margin-inline-end: var(--sizing-space-small); }
    .game.format-row > .row > .opponent.opponent-2 {
      flex: 2; }
      .game.format-row > .row > .opponent.opponent-2 > * {
        margin-inline-start: var(--sizing-space-small); }
    .game.format-row > .row > .opponent > * {
      width: 7.5rem;
      text-align: center; }
    .game.format-row > .row > .opponent .result {
      border-radius: var(--sizing-space-tiny);
      font: var(--typo-text-medium);
      font-weight: 500;
      text-transform: uppercase; }
    .game.format-row > .row > .value {
      text-align: center; }
  .game.format-row:not(.with-sidebar) > .row > .label {
    width: 25%; }
  .game.format-row:not(.with-sidebar) > .row > .value {
    width: 50%; }
  .game.format-row.with-sidebar > .row > .label {
    width: 18.75remvar(--sizing-space-huge); }
  .game.format-row.with-sidebar > .row > .opponent.opponent-2 {
    flex: 1; }
  .game.format-row.with-sidebar > .row > .value {
    flex: 2; }
  .game.format-row > .row:not(:first-child) {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .game.format-row > .row .label {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .game.format-row > .row .value {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
    font-weight: bold; }
  .game.format-row > .row .result {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .game.format-row > .row .result.none {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .game.format-row > .row .result.win {
      background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .game.format-row > .row .result.draw {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .game.format-row > .row .result.loss {
      background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .game.format-row.inverted > .row:not(:first-child) {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
  .game.format-row.inverted > .row .label {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
  .game.format-row.inverted > .row .value {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low2));
    font-weight: bold; }
  .game.format-row.inverted > .row .result {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .game.format-row.inverted > .row .result.none {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1)); }
    .game.format-row.inverted > .row .result.win {
      background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .game.format-row.inverted > .row .result.draw {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .game.format-row.inverted > .row .result.loss {
      background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }

/**
 * Includes all highlight styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * A tournament highlight
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.highlight.tournament {
  display: flex;
  width: 100%; }
  .highlight.tournament > .embed {
    display: block;
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4));
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); }
  .highlight.tournament > .caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    margin-inline: var(--sizing-space-huge);
    transition: all 200ms; }
    .highlight.tournament > .caption .logo {
      inline-size: 16rem;
      block-size: 16rem; }
    .highlight.tournament > .caption .title {
      flex: 1;
      margin-block-start: var(--sizing-space-medium); }
      .highlight.tournament > .caption .title .primary {
        font: var(--typo-title-medium);
        text-align: center; }
      .highlight.tournament > .caption .title .secondary {
        font: var(--typo-title-tiny);
        text-align: center; }
    .highlight.tournament > .caption:hover {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

.highlight-nav.tournament {
  display: flex;
  align-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  margin-block-end: -1px;
  padding: 0;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .highlight-nav.tournament > li {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    background: inherit; }
    .highlight-nav.tournament > li > a, .highlight-nav.tournament > li > a:visited, .highlight-nav.tournament > li > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    .highlight-nav.tournament > li > a:hover, .highlight-nav.tournament > li > a:focus, .highlight-nav.tournament > li > a:active {
      color: inherit;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .highlight-nav.tournament > li.label > span {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .highlight-nav.tournament > li.subdued > a, .highlight-nav.tournament > li.subdued > a:visited, .highlight-nav.tournament > li.subdued > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2)); }
    .highlight-nav.tournament > li.subdued > a:hover, .highlight-nav.tournament > li.subdued > a:focus, .highlight-nav.tournament > li.subdued > a:active {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .highlight-nav.tournament > li.alert > a, .highlight-nav.tournament > li.alert > a:visited, .highlight-nav.tournament > li.alert > * {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .highlight-nav.tournament > li.alert > a:hover, .highlight-nav.tournament > li.alert > a:focus, .highlight-nav.tournament > li.alert > a:active {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-high2)); }
    .highlight-nav.tournament > li.current > a, .highlight-nav.tournament > li.current > a:visited, .highlight-nav.tournament > li.current > * {
      color: inherit;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .highlight-nav.tournament > li.current > a:hover, .highlight-nav.tournament > li.current > a:focus, .highlight-nav.tournament > li.current > a:active {
      color: inherit;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .highlight-nav.tournament > li.current_ancestor > a, .highlight-nav.tournament > li.current_ancestor > a:visited, .highlight-nav.tournament > li.current_ancestor > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
      background: inherit; }
    .highlight-nav.tournament > li.current_ancestor > a:hover, .highlight-nav.tournament > li.current_ancestor > a:focus, .highlight-nav.tournament > li.current_ancestor > a:active {
      color: inherit;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .highlight-nav.tournament > li.disabled > a, .highlight-nav.tournament > li.disabled > a:visited, .highlight-nav.tournament > li.disabled > * {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
    .highlight-nav.tournament > li.disabled > a:hover, .highlight-nav.tournament > li.disabled > a:focus, .highlight-nav.tournament > li.disabled > a:active {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      background: inherit; }
  .highlight-nav.tournament > li {
    display: block;
    flex: 1; }
    .highlight-nav.tournament > li > a, .highlight-nav.tournament > li > span {
      display: flex;
      align-items: center;
      outline: 0;
      padding: var(--sizing-space-large) var(--sizing-space-large); }
      .highlight-nav.tournament > li > a > .icon, .highlight-nav.tournament > li > span > .icon {
        margin-inline-end: var(--sizing-space-medium); }
      .highlight-nav.tournament > li > a > .caption, .highlight-nav.tournament > li > span > .caption {
        flex: 1;
        text-align: start; }
      .highlight-nav.tournament > li > a .name, .highlight-nav.tournament > li > span .name {
        font: var(--typo-title-small);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low5));
        word-wrap: break-word; }
      .highlight-nav.tournament > li > a .description, .highlight-nav.tournament > li > span .description {
        font: var(--typo-label-small);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
        word-wrap: break-word; }

/**
 * Includes all logo styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Includes all toornament logo styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * toornament logo with a caption.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.logo.toornament.format-standard a {
  display: block;
  position: relative;
  background: url(https://www.lollfl.com/asset/logo/toornament/toornament.svg?800607295) center center no-repeat;
  background-size: contain;
  width: 10.6875rem;
  height: 3.5rem; }

.logo.toornament.format-standard .seo {
  display: none; }

.logo.toornament.format-standard .caption {
  display: block;
  position: absolute;
  inset-block-end: 0;
  right: 0.4375rem;
  text-transform: lowercase;
  text-align: end;
  font: var(--typo-label-small);
  font-style: italic;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)) !important; }

.logo.toornament.format-standard.inverted a {
  background-image: url(https://www.lollfl.com/asset/logo/toornament/toornament-inverted.svg?800607295); }

.logo.toornament.format-standard.inverted .caption {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low4)) !important; }

/**
 * Small version of the standard logo.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.logo.toornament.format-small a {
  display: block;
  position: relative;
  background: url(https://www.lollfl.com/asset/logo/toornament/toornament.svg?800607295) center center no-repeat;
  background-size: contain;
  inline-size: 8rem;
  block-size: 2.375rem; }

.logo.toornament.format-small .caption {
  display: block;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0.4375rem;
  text-transform: lowercase;
  text-align: start;
  font: var(--typo-label-tiny);
  font-style: italic;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low4)) !important; }

.logo.toornament.format-small .seo {
  display: none; }

.logo.toornament.format-small.inverted a {
  background-image: url(https://www.lollfl.com/asset/logo/toornament/toornament-inverted.svg?800607295); }
  .logo.toornament.format-small.inverted a .caption {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low4)) !important; }

/**
 * toornament logo with a caption.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.logo.toornament.format-rings {
  display: block;
  position: relative;
  background: transparent url(https://www.lollfl.com/asset/logo/toornament/rings.svg?800607295) center center no-repeat;
  background-size: contain;
  background-clip: content-box;
  width: 2rem;
  height: 2rem;
  border: var(--sizing-space-tiny) solid transparent; }

/**
 * Small version of the standard logo.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.logo.toornament.format-powered-by {
  display: block;
  position: relative;
  background: url(https://www.lollfl.com/asset/logo/toornament/powered-by.svg?800607295) center center no-repeat;
  background-size: contain;
  width: 9.375rem;
  height: 2.1875rem; }
  .logo.toornament.format-powered-by.inverted {
    background-image: url(https://www.lollfl.com/asset/logo/toornament/powered-by-inverted.svg?800607295); }
  .logo.toornament.format-powered-by .seo {
    display: none; }

/**
 * toornament logo with a caption.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.logo.toornament.format-application {
  display: flex;
  align-items: center; }
  .logo.toornament.format-application.small {
    transform: scale(0.75); }
  .logo.toornament.format-application.large {
    transform: scale(1.5); }
  .logo.toornament.format-application .icon {
    display: block;
    position: relative;
    background: url(https://www.lollfl.com/asset/logo/toornament/rings.svg?800607295) center center no-repeat;
    background-size: contain;
    background-clip: content-box;
    width: 2rem;
    height: 2rem;
    border: var(--sizing-space-tiny) solid transparent; }
  .logo.toornament.format-application .seo {
    display: none; }
  .logo.toornament.format-application .name {
    display: block;
    position: relative;
    margin-inline-start: 0.25rem;
    font: 700 22px "Noto Sans";
    color: black; }
  .logo.toornament.format-application.inverted .name {
    color: white; }

/**
 * Includes all match styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Match shown in the box format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Match global configuration
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.match.format-box {
  position: relative;
  min-width: 20rem;
  max-width: 25rem;
  padding: var(--sizing-space-small) 0;
  border-radius: var(--sizing-space-tiny);
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .match.format-box.hover:hover {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .match.format-box > .title {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .match.format-box > .primary > .record > .opponent > .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .match.format-box > .primary > .record > .opponent > .name.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .match.format-box > .primary > .record > .opponent > .info {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    .match.format-box > .primary > .record > .opponent > .info > .subdued {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .match.format-box > .primary > .record > .opponent > .more {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .match.format-box > .primary > .record > .opponent > .result {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .match.format-box > .primary > .record > .opponent > .result.progress {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-box > .primary > .record > .opponent > .result.win {
      background: var(--color-win); }
    .match.format-box > .primary > .record > .opponent > .result.draw {
      background: var(--color-draw); }
    .match.format-box > .primary > .record > .opponent > .result.loss {
      background: var(--color-loss); }
    .match.format-box > .primary > .record > .opponent > .result.forfeit {
      background: var(--color-forfeit); }
    .match.format-box > .primary > .record > .opponent > .result.rank {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-box > .primary > .record > .opponent > .result.rank-1 {
      background: var(--color-gold); }
    .match.format-box > .primary > .record > .opponent > .result.rank-2 {
      background: var(--color-silver); }
    .match.format-box > .primary > .record > .opponent > .result.rank-3 {
      background: var(--color-bronze); }
    .match.format-box > .primary > .record > .opponent > .result.rank-x {
      background: transparent;
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .match.format-box > .primary > .state {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .match.format-box > .primary > .state.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-box > .primary > .state > .pending, .match.format-box > .primary > .state > .date, .match.format-box > .primary > .state > .time {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .match.format-box > .secondary {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .match.format-box > .secondary .disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .match.format-box > .title {
    display: flex;
    align-items: center;
    padding: 0 var(--sizing-space-small) var(--sizing-space-tiny) var(--sizing-space-small);
    font: var(--typo-label-tiny);
    text-transform: capitalize; }
    .match.format-box > .title > * {
      margin-inline-end: var(--sizing-space-tiny); }
      .match.format-box > .title > *:last-child {
        margin-inline-end: 0; }
  .match.format-box > .primary {
    display: flex;
    padding: 0 var(--sizing-space-small); }
    .match.format-box > .primary > .record {
      display: flex;
      flex-direction: column;
      flex: 3; }
      .match.format-box > .primary > .record .opponent {
        display: flex;
        align-items: center;
        padding: 0; }
        .match.format-box > .primary > .record .opponent.opponent-1 {
          padding-top: 0; }
        .match.format-box > .primary > .record .opponent.opponent-2 {
          padding-bottom: 0; }
        .match.format-box > .primary > .record .opponent > * {
          margin-inline-end: var(--sizing-space-small); }
          .match.format-box > .primary > .record .opponent > *:last-child {
            margin-inline-end: 0; }
        .match.format-box > .primary > .record .opponent > .country {
          width: 1rem;
          margin-inline-end: var(--sizing-space-tiny); }
          .match.format-box > .primary > .record .opponent > .country > i {
            display: block; }
        .match.format-box > .primary > .record .opponent > .logo {
          align-self: center;
          font: var(--typo-text-medium);
          width: 1.2em;
          height: 1.2em;
          margin-inline-end: var(--sizing-space-tiny); }
          .match.format-box > .primary > .record .opponent > .logo > img {
            width: 1.2em;
            height: 1.2em; }
        .match.format-box > .primary > .record .opponent > .name {
          flex: 3;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 0;
          font: var(--typo-text-medium);
          font-weight: 500; }
          .match.format-box > .primary > .record .opponent > .name.disabled {
            font-weight: 400; }
        .match.format-box > .primary > .record .opponent > .info {
          flex: 3;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 0;
          font: var(--typo-text-medium); }
          .match.format-box > .primary > .record .opponent > .info > .subdued {
            font: var(--typo-text-small); }
        .match.format-box > .primary > .record .opponent > .more {
          font: var(--typo-text-small); }
        .match.format-box > .primary > .record .opponent > .result {
          width: 25%;
          box-sizing: border-box;
          border-radius: var(--sizing-space-tiny);
          font: var(--typo-text-small);
          font-weight: 500;
          text-align: center; }
          .match.format-box > .primary > .record .opponent > .result.rank {
            text-transform: none; }
    .match.format-box > .primary > .state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      box-sizing: border-box;
      margin-inline-start: var(--sizing-space-small);
      border-radius: var(--sizing-space-tiny);
      font: var(--typo-label-tiny);
      text-transform: uppercase;
      text-align: center; }
      .match.format-box > .primary > .state .subdued {
        font: var(--typo-label-tiny); }
      .match.format-box > .primary > .state .light {
        font: var(--typo-label-tiny); }
  .match.format-box > .secondary {
    display: flex;
    align-items: center;
    font: var(--typo-label-tiny);
    padding: var(--sizing-space-tiny) var(--sizing-space-small) 0 var(--sizing-space-small); }
    .match.format-box > .secondary > div {
      padding: 0;
      text-transform: uppercase; }
    .match.format-box > .secondary.spread-layout > div {
      flex: 1;
      text-align: center; }
    .match.format-box > .secondary.icon-layout > div:first-child {
      flex: 3;
      padding-inline-start: 0; }
    .match.format-box > .secondary.icon-layout > div:last-child {
      width: 25%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-inline-start: var(--sizing-space-small); }
      .match.format-box > .secondary.icon-layout > div:last-child > * {
        margin: 0 var(--sizing-space-tiny); }
  .match.format-box.inverted {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .match.format-box.inverted.hover:hover {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .match.format-box.inverted > .title {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .match.format-box.inverted > .primary > .record > .opponent > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
      .match.format-box.inverted > .primary > .record > .opponent > .name.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .match.format-box.inverted > .primary > .record > .opponent > .info {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
      .match.format-box.inverted > .primary > .record > .opponent > .info > .subdued {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .match.format-box.inverted > .primary > .record > .opponent > .more {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .match.format-box.inverted > .primary > .record > .opponent > .result {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.progress {
        background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.win {
        background: var(--color-win); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.draw {
        background: var(--color-draw); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.loss {
        background: var(--color-loss); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.forfeit {
        background: var(--color-forfeit); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.rank {
        background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.rank-1 {
        background: var(--color-gold); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.rank-2 {
        background: var(--color-silver); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.rank-3 {
        background: var(--color-bronze); }
      .match.format-box.inverted > .primary > .record > .opponent > .result.rank-x {
        background: transparent;
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .match.format-box.inverted > .primary > .state {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      .match.format-box.inverted > .primary > .state.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
        background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .match.format-box.inverted > .primary > .state > .pending, .match.format-box.inverted > .primary > .state > .date, .match.format-box.inverted > .primary > .state > .time {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .match.format-box.inverted > .secondary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      .match.format-box.inverted > .secondary .disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
  .match.format-box.hover:hover {
    cursor: pointer; }
  .match.format-box.divider {
    margin: var(--sizing-space-small) 0;
    padding: var(--sizing-space-small) 0 calc(var(--sizing-space-small) + 0rem) 0;
    width: auto;
    height: auto; }
    .match.format-box.divider:last-child {
      margin-bottom: var(--sizing-space-small); }
    .match.format-box.divider::after {
      content: "";
      height: 0rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .match.format-box.divider:last-child::after {
      height: 0; }
    .match.format-box.divider.inverted::after {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }

@media (max-width: 600px) {
  .match.format-box {
    min-width: inherit;
    max-width: unset;
    background: none;
    border: none; }
    .match.format-box.inverted {
      background: none; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .match.format-box {
    min-width: inherit;
    background: none;
    border: none;
    max-width: unset; }
    .match.format-box.inverted {
      background: none; } }

/**
 * Match shown in the header format.
 */
/**
 * Config the match header format.
 */
.match.format-header {
  display: grid;
  grid-auto-flow: row;
  position: relative;
  box-sizing: border-box;
  background: var(--match-header-background);
  border: var(--match-header-border-width) solid var(--match-header-border-color);
  border-radius: var(--match-header-border-radius);
  padding: var(--match-header-spacing);
  gap: var(--match-header-spacing); }
  .match.format-header > .record, .match.format-header > .primary {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "opponent-1 state opponent-2";
    justify-content: stretch;
    align-items: stretch;
    gap: var(--match-header-spacing); }
    .match.format-header > .record > .opponent, .match.format-header > .primary > .opponent {
      display: grid;
      grid-auto-flow: row;
      justify-items: center;
      align-items: center;
      gap: var(--match-header-participant-spacing); }
      .match.format-header > .record > .opponent.opponent-1, .match.format-header > .primary > .opponent.opponent-1 {
        grid-area: opponent-1; }
      .match.format-header > .record > .opponent.opponent-2, .match.format-header > .primary > .opponent.opponent-2 {
        grid-area: opponent-2; }
      .match.format-header > .record > .opponent > .name, .match.format-header > .primary > .opponent > .name {
        font: var(--match-header-participant-font);
        color: var(--match-header-participant-color);
        text-align: center;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto; }
        .match.format-header > .record > .opponent > .name.win, .match.format-header > .primary > .opponent > .name.win {
          color: var(--match-header-participant-win-color); }
        .match.format-header > .record > .opponent > .name.loss, .match.format-header > .record > .opponent > .name.forfeit, .match.format-header > .primary > .opponent > .name.loss, .match.format-header > .primary > .opponent > .name.forfeit {
          color: var(--match-header-participant-loss-color); }
        .match.format-header > .record > .opponent > .name.disabled, .match.format-header > .primary > .opponent > .name.disabled {
          font: var(--match-header-participant-disabled-font);
          color: var(--match-header-participant-disabled-color); }
      .match.format-header > .record > .opponent > .country, .match.format-header > .primary > .opponent > .country {
        font-size: var(--match-header-participant-icon-size); }
      .match.format-header > .record > .opponent > .logo, .match.format-header > .primary > .opponent > .logo {
        width: var(--match-header-participant-icon-size);
        height: var(--match-header-participant-icon-size); }
        .match.format-header > .record > .opponent > .logo > img, .match.format-header > .primary > .opponent > .logo > img {
          width: var(--match-header-participant-icon-size);
          height: var(--match-header-participant-icon-size); }
    .match.format-header > .record > .state, .match.format-header > .primary > .state {
      grid-area: state;
      align-self: center;
      justify-self: center;
      display: grid;
      align-items: center;
      justify-items: stretch;
      width: var(--match-header-state-width);
      gap: var(--match-header-state-spacing); }
      .match.format-header > .record > .state > .context, .match.format-header > .primary > .state > .context {
        font: var(--match-header-context-font);
        color: var(--match-header-context-color);
        text-align: center; }
      .match.format-header > .record > .state > .result, .match.format-header > .primary > .state > .result {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
        gap: var(--match-header-result-spacing);
        font: var(--match-header-result-font);
        color: var(--match-header-result-color); }
        .match.format-header > .record > .state > .result.divider, .match.format-header > .primary > .state > .result.divider {
          grid-template-columns: 1fr auto 1fr; }
        .match.format-header > .record > .state > .result > .result-1, .match.format-header > .record > .state > .result > .result-2, .match.format-header > .primary > .state > .result > .result-1, .match.format-header > .primary > .state > .result > .result-2 {
          width: 100%;
          height: var(--match-header-result-height);
          overflow: hidden;
          display: grid;
          justify-content: center;
          align-content: center;
          background: var(--match-header-result-background);
          border-radius: var(--match-header-result-radius);
          padding: var(--match-header-result-padding);
          box-sizing: border-box;
          text-align: center; }
          .match.format-header > .record > .state > .result > .result-1.text, .match.format-header > .record > .state > .result > .result-2.text, .match.format-header > .primary > .state > .result > .result-1.text, .match.format-header > .primary > .state > .result > .result-2.text {
            font: var(--match-header-result-text-font);
            overflow-wrap: break-word;
            word-break: break-word;
            white-space: normal;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto; }
          .match.format-header > .record > .state > .result > .result-1.progress, .match.format-header > .record > .state > .result > .result-2.progress, .match.format-header > .primary > .state > .result > .result-1.progress, .match.format-header > .primary > .state > .result > .result-2.progress {
            background: var(--match-header-result-progress-background);
            color: var(--match-header-result-progress-color); }
          .match.format-header > .record > .state > .result > .result-1.win, .match.format-header > .record > .state > .result > .result-2.win, .match.format-header > .primary > .state > .result > .result-1.win, .match.format-header > .primary > .state > .result > .result-2.win {
            background: var(--match-header-result-win-background);
            color: var(--match-header-result-win-color); }
          .match.format-header > .record > .state > .result > .result-1.draw, .match.format-header > .record > .state > .result > .result-2.draw, .match.format-header > .primary > .state > .result > .result-1.draw, .match.format-header > .primary > .state > .result > .result-2.draw {
            background: var(--match-header-result-draw-background);
            color: var(--match-header-result-draw-color); }
          .match.format-header > .record > .state > .result > .result-1.loss, .match.format-header > .record > .state > .result > .result-2.loss, .match.format-header > .primary > .state > .result > .result-1.loss, .match.format-header > .primary > .state > .result > .result-2.loss {
            background: var(--match-header-result-loss-background);
            color: var(--match-header-result-loss-color); }
          .match.format-header > .record > .state > .result > .result-1.forfeit, .match.format-header > .record > .state > .result > .result-2.forfeit, .match.format-header > .primary > .state > .result > .result-1.forfeit, .match.format-header > .primary > .state > .result > .result-2.forfeit {
            background: var(--match-header-result-forfeit-background);
            color: var(--match-header-result-forfeit-color); }
        .match.format-header > .record > .state > .result > .result-divider, .match.format-header > .primary > .state > .result > .result-divider {
          font: var(--match-header-result-divider-font);
          color: var(--match-header-result-divider-color); }
      .match.format-header > .record > .state > .status, .match.format-header > .primary > .state > .status {
        font: var(--match-header-status-font);
        color: var(--match-header-status-color);
        text-align: center; }
  .match.format-header.inverted {
    --match-header-background: transparent;
    --match-header-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    --match-header-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-header-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --match-header-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
    --match-header-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-header-result-background: transparent;
    --match-header-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-header-result-progress-background: transparent;
    --match-header-result-win-color: white;
    --match-header-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-i_medium));
    --match-header-result-draw-color: white;
    --match-header-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-i_medium));
    --match-header-result-loss-color: white;
    --match-header-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-i_medium));
    --match-header-result-forfeit-color: white;
    --match-header-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-i_medium));
    --match-header-result-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-header-status-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

@media (max-width: 600px) {
  .match.format-header > .record, .match.format-header > .primary {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "opponent-1 opponent-2" "state state"; }
    .match.format-header > .record > .state, .match.format-header > .primary > .state {
      width: 100%; } }

:root {
  --match-header-spacing: var(--sizing-space-large);
  --match-header-border-width: 0;
  --match-header-border-radius: 0;
  --match-header-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --match-header-background: transparent;
  --match-header-participant-icon-size: 8rem;
  --match-header-participant-spacing: var(--sizing-space-medium);
  --match-header-participant-font: var(--typo-title-large);
  --match-header-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-header-participant-win-color: var(--match-header-participant-color);
  --match-header-participant-loss-color: var(--match-header-participant-color);
  --match-header-participant-disabled-font: var(--typo-title-large);
  --match-header-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-header-state-width: 15rem;
  --match-header-state-spacing: var(--sizing-space-large);
  --match-header-context-font: var(--typo-text-medium);
  --match-header-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-header-result-height: 5rem;
  --match-header-result-spacing: var(--sizing-space-large);
  --match-header-result-padding: var(--sizing-space-small);
  --match-header-result-font: var(--typo-display-medium);
  --match-header-result-text-font: var(--typo-title-medium);
  --match-header-result-radius: var(--sizing-space-tiny);
  --match-header-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-header-result-background: transparent;
  --match-header-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-header-result-progress-background: transparent;
  --match-header-result-win-color: white;
  --match-header-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-medium));
  --match-header-result-draw-color: white;
  --match-header-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-medium));
  --match-header-result-loss-color: white;
  --match-header-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-medium));
  --match-header-result-forfeit-color: white;
  --match-header-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-medium));
  --match-header-result-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-header-status-font: var(--typo-text-medium);
  --match-header-status-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * Extension to add a title in the match header (to replace the record in FFA matches).
 */
.match.format-header > .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }
  .match.format-header > .title > .name {
    display: flex;
    flex-direction: column;
    font: var(--match-header-title-font);
    color: var(--match-header-title-color); }

.match.format-header.inverted > .title > .name {
  --match-header-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

:root {
  --match-header-title-font: var(--typo-title-large);
  --match-header-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

/**
 * Extension to add a secondary above the match header.
 */
.match.format-header > .secondary {
  width: 100%;
  display: grid;
  justify-content: center;
  text-align: center;
  font: var(--match-header-secondary-font);
  color: var(--match-header-secondary-color); }
  .match.format-header > .secondary > .status {
    font: var(--match-header-secondary-status-font);
    color: var(--match-header-secondary-status-color); }
    .match.format-header > .secondary > .status.completed {
      color: var(--match-header-secondary-status-completed-color); }
    .match.format-header > .secondary > .status.outcome-locked, .match.format-header > .secondary > .status.locked {
      color: var(--match-header-secondary-status-locked-color); }
    .match.format-header > .secondary > .status.report-dispute, .match.format-header > .secondary > .status.disputed {
      color: var(--match-header-secondary-status-disputed-color); }

.match.format-header.inverted > .secondary {
  --match-header-secondary-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  --match-header-secondary-status-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --match-header-secondary-status-completed-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
  --match-header-secondary-status-locked-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
  --match-header-secondary-status-disputed-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium)); }

:root {
  --match-header-secondary-font: var(--typo-text-tiny);
  --match-header-secondary-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-header-secondary-status-font: var(--typo-title-tiny);
  --match-header-secondary-status-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-header-secondary-status-completed-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --match-header-secondary-status-locked-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --match-header-secondary-status-disputed-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }

/**
 * Extension to add a hover effect on the opponent names of a match header.
 */
.match.format-header > .record > .opponent > .name.hover:hover, .match.format-header > .primary > .opponent > .name.hover:hover {
  cursor: pointer;
  color: var(--match-header-participant-hover-color); }

.match.format-header > .record > .opponent > .name.hover > a, .match.format-header > .primary > .opponent > .name.hover > a {
  color: inherit; }

.match.format-header.inverted {
  --match-header-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

:root {
  --match-header-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

/**
 * Extension to add a description.
 * @deprecated: this should not be used anymore.
 */
.match.format-header > .description {
  font: var(--match-header-description-font); }
  .match.format-header > .description > .structure {
    display: inline-flex; }

:root {
  --match-header-description-font: var(--typo-title-tiny); }

/**
 * Match shown in the mini format.
 */
/**
 * Match shown in the mini format.
 */
.match.format-mini {
  display: flex;
  position: relative;
  box-sizing: border-box;
  min-width: var(--match-mini-min-width);
  padding: var(--match-mini-padding);
  border-radius: var(--match-mini-radius);
  border-width: var(--match-mini-border-width);
  border-style: solid;
  border-color: var(--match-mini-border-color);
  background-color: var(--match-mini-background-color); }
  .match.format-mini > .record {
    flex: 3; }
    .match.format-mini > .record > .opponent {
      display: flex;
      align-items: center;
      margin-bottom: var(--match-mini-opponent-v-spacing); }
      .match.format-mini > .record > .opponent:last-child {
        margin-bottom: 0; }
      .match.format-mini > .record > .opponent > * {
        margin-inline-end: var(--match-mini-opponent-h-spacing); }
        .match.format-mini > .record > .opponent > *:last-child {
          margin-inline-end: 0; }
  .match.format-mini > .record > .opponent > .name, .match.format-mini > .record > .opponent > .info, .match.format-mini > .record > .opponent > .more {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 3;
    width: 0;
    font: var(--match-mini-participant-font);
    color: var(--match-mini-participant-color); }
    .match.format-mini > .record > .opponent > .name.win, .match.format-mini > .record > .opponent > .info.win, .match.format-mini > .record > .opponent > .more.win {
      color: var(--match-mini-participant-win-color); }
    .match.format-mini > .record > .opponent > .name.loss, .match.format-mini > .record > .opponent > .name.forfeit, .match.format-mini > .record > .opponent > .info.loss, .match.format-mini > .record > .opponent > .info.forfeit, .match.format-mini > .record > .opponent > .more.loss, .match.format-mini > .record > .opponent > .more.forfeit {
      color: var(--match-mini-participant-loss-color); }
    .match.format-mini > .record > .opponent > .name.disabled, .match.format-mini > .record > .opponent > .info.disabled, .match.format-mini > .record > .opponent > .more.disabled {
      font: var(--match-mini-participant-disabled-font);
      color: var(--match-mini-participant-disabled-color); }
    .match.format-mini > .record > .opponent > .name.subdued, .match.format-mini > .record > .opponent > .name > .subdued, .match.format-mini > .record > .opponent > .info.subdued, .match.format-mini > .record > .opponent > .info > .subdued, .match.format-mini > .record > .opponent > .more.subdued, .match.format-mini > .record > .opponent > .more > .subdued {
      font: var(--match-mini-participant-subdued-font);
      color: var(--match-mini-participant-subdued-color); }
  .match.format-mini > .record > .opponent > .more {
    font: var(--match-mini-participant-subdued-font);
    color: var(--match-mini-participant-subdued-color); }
  .match.format-mini > .record > .opponent > .country {
    width: var(--match-mini-participant-icon-size); }
    .match.format-mini > .record > .opponent > .country > i {
      display: block; }
  .match.format-mini > .record > .opponent > .logo {
    width: var(--match-mini-participant-icon-size);
    height: var(--match-mini-participant-icon-size); }
    .match.format-mini > .record > .opponent > .logo > img {
      display: block;
      width: var(--match-mini-participant-icon-size);
      height: var(--match-mini-participant-icon-size); }
  .match.format-mini > .record > .opponent > .result {
    width: var(--match-mini-result-size);
    box-sizing: border-box;
    font: var(--match-mini-result-font);
    color: var(--match-mini-result-color);
    text-align: center; }
    .match.format-mini > .record > .opponent > .result.progress {
      color: var(--match-mini-result-progress-color); }
    .match.format-mini > .record > .opponent > .result.win {
      color: var(--match-mini-result-win-color); }
    .match.format-mini > .record > .opponent > .result.draw {
      color: var(--match-mini-result-draw-color); }
    .match.format-mini > .record > .opponent > .result.loss {
      color: var(--match-mini-result-loss-color); }
    .match.format-mini > .record > .opponent > .result.forfeit {
      color: var(--match-mini-result-forfeit-color); }
    .match.format-mini > .record > .opponent > .result.ranked {
      color: var(--match-mini-result-ranked-color); }
  .match.format-mini.inverted {
    --match-mini-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --match-mini-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --match-mini-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-mini-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-mini-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-mini-participant-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-mini-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --match-mini-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-mini-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
    --match-mini-result-win-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
    --match-mini-result-draw-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-mini-result-loss-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium));
    --match-mini-result-forfeit-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
    --match-mini-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
  .match.format-mini.transparent {
    --match-mini-background-color: transparent; }

:root {
  --match-mini-min-width: 12rem;
  --match-mini-padding: var(--sizing-space-small);
  --match-mini-radius: var(--sizing-space-tiny);
  --match-mini-border-width: 1px;
  --match-mini-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-mini-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --match-mini-opponent-v-spacing: 1px;
  --match-mini-opponent-h-spacing: var(--sizing-space-tiny);
  --match-mini-participant-icon-size: 1rem;
  --match-mini-participant-font: var(--typo-text-small);
  --match-mini-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-mini-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-mini-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-mini-participant-disabled-font: var(--typo-text-small);
  --match-mini-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-mini-participant-subdued-font: var(--typo-label-tiny);
  --match-mini-participant-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-mini-result-size: max(1em, 15%);
  --match-mini-result-font: var(--typo-text-small);
  --match-mini-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-mini-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --match-mini-result-win-color: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-medium));
  --match-mini-result-draw-color: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-bottom));
  --match-mini-result-loss-color: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-medium));
  --match-mini-result-forfeit-color: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-medium));
  --match-mini-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * Deprecated elements in the match mini.
 */
.match.format-mini .hide {
  display: none; }

/**
 * Extension to add a header on the match mini format.
 */
.match.format-mini > .header {
  display: flex;
  position: absolute;
  top: calc(-1 * var(--match-mini-padding));
  left: var(--match-mini-padding);
  right: var(--match-mini-padding);
  font: var(--match-mini-header-font);
  z-index: 1; }
  .match.format-mini > .header > div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--match-mini-header-color);
    background: var(--match-mini-header-background-color);
    padding: 0 var(--match-mini-header-spacing);
    margin-inline-end: var(--match-mini-header-spacing); }
    .match.format-mini > .header > div:first-child {
      margin-inline-start: 0; }
    .match.format-mini > .header > div:last-child {
      margin-inline-end: 0; }

.match.format-mini.inverted {
  --match-mini-header-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --match-mini-header-background-color: var(--match-mini-background-color, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top))); }

.match.format-mini.transparent {
  --match-mini-header-background-color: transparent; }

:root {
  --match-mini-header-font: var(--typo-label-tiny);
  --match-mini-header-spacing: var(--sizing-space-tiny);
  --match-mini-header-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-mini-header-background-color: var(--match-mini-background-color, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top))); }

/**
 * Extension to replace the result area with a state area.
 */
.match.format-mini > .state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--match-mini-state-size);
  margin-inline-start: var(--match-mini-opponent-h-spacing);
  border-radius: var(--match-mini-state-radius);
  font: var(--match-mini-state-font);
  text-align: center;
  color: var(--match-mini-state-color); }
  .match.format-mini > .state > .pending, .match.format-mini > .state > .date, .match.format-mini > .state > .time {
    color: var(--match-mini-state-color); }
    .match.format-mini > .state > .pending.disabled, .match.format-mini > .state > .date.disabled, .match.format-mini > .state > .time.disabled {
      color: var(--match-mini-state-disabled-color); }
  .match.format-mini > .state > .live {
    color: var(--match-mini-state-live-color);
    font: var(--match-mini-state-live-font); }

.match.format-mini.inverted {
  --match-mini-state-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --match-mini-state-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --match-mini-state-live-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }

:root {
  --match-mini-state-size: max(25%, 3.5rem);
  --match-mini-state-radius: var(--sizing-space-tiny);
  --match-mini-state-font: var(--typo-label-tiny);
  --match-mini-state-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-mini-state-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --match-mini-state-live-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --match-mini-state-live-font: var(--typo-label-tiny); }

/**
 * Extension to add hover effects on a mini match (whole match or the opponent names).
 */
.match.format-mini.hover:hover {
  border-color: var(--match-mini-hover-border-color);
  background-color: var(--match-mini-hover-background-color);
  cursor: pointer; }

.match.format-mini > .record > .opponent > .name.hover:hover, .match.format-mini > .primary > .opponent > .name.hover:hover {
  cursor: pointer;
  color: var(--match-mini-participant-hover-color); }

.match.format-mini > .record > .opponent > .name.hover > a, .match.format-mini > .primary > .opponent > .name.hover > a {
  color: inherit; }

.match.format-mini.inverted {
  --match-mini-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
  --match-mini-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
  --match-mini-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.match.format-mini.transparent {
  --match-mini-hover-background-color: transparent; }

:root {
  --match-mini-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --match-mini-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --match-mini-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

/**
 * Extension to add custom colors based on a status of a match on a mini match.
 */
.match.format-mini.running {
  border-color: var(--match-mini-status-running-border-color);
  background-color: var(--match-mini-status-running-background-color); }

:root {
  --match-mini-status-running-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-mini-status-running-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

/**
 * Match shown in the row format.
 */
/**
 * Match shown in the row format.
 */
.match.format-row {
  display: flex;
  position: relative;
  box-sizing: border-box;
  min-width: var(--match-row-min-width);
  padding: var(--match-row-padding);
  align-items: center;
  background: var(--match-row-background);
  border: var(--match-row-border-width) solid var(--match-row-border-color);
  border-radius: var(--match-row-border-radius); }
  .match.format-row > * {
    margin-inline-end: var(--match-row-h-spacing); }
    .match.format-row > *:last-child {
      margin-inline-end: 0; }
  .match.format-row > .logo, .match.format-row > .logo > img {
    width: var(--match-row-logo-size);
    height: var(--match-row-logo-size); }
  .match.format-row > .record {
    flex: 1;
    display: grid;
    grid-auto-flow: row;
    justify-content: stretch;
    gap: var(--match-row-v-spacing); }
    .match.format-row > .record > .opponent {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 0; }
      .match.format-row > .record > .opponent > * {
        margin-inline-end: var(--match-row-h-spacing); }
        .match.format-row > .record > .opponent > *:last-child {
          margin-inline-end: 0; }
  .match.format-row > .record > .opponent > .name, .match.format-row > .record > .opponent > .info, .match.format-row > .record > .opponent > .more {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 3;
    width: 0;
    font: var(--match-row-participant-font);
    color: var(--match-row-participant-color); }
    .match.format-row > .record > .opponent > .name.win, .match.format-row > .record > .opponent > .info.win, .match.format-row > .record > .opponent > .more.win {
      color: var(--match-row-participant-win-color); }
    .match.format-row > .record > .opponent > .name.loss, .match.format-row > .record > .opponent > .name.forfeit, .match.format-row > .record > .opponent > .info.loss, .match.format-row > .record > .opponent > .info.forfeit, .match.format-row > .record > .opponent > .more.loss, .match.format-row > .record > .opponent > .more.forfeit {
      color: var(--match-row-participant-loss-color); }
    .match.format-row > .record > .opponent > .name.disabled, .match.format-row > .record > .opponent > .info.disabled, .match.format-row > .record > .opponent > .more.disabled {
      font: var(--match-row-participant-disabled-font);
      color: var(--match-row-participant-disabled-color); }
    .match.format-row > .record > .opponent > .name.subdued, .match.format-row > .record > .opponent > .name > .subdued, .match.format-row > .record > .opponent > .info.subdued, .match.format-row > .record > .opponent > .info > .subdued, .match.format-row > .record > .opponent > .more.subdued, .match.format-row > .record > .opponent > .more > .subdued {
      font: var(--match-row-participant-subdued-font);
      color: var(--match-row-participant-subdued-color); }
  .match.format-row > .record > .opponent > .more {
    font: var(--match-row-participant-subdued-font);
    color: var(--match-row-participant-subdued-color); }
  .match.format-row > .record > .opponent > .country {
    width: var(--match-row-participant-icon-size);
    margin-inline-end: var(--match-row-participant-spacing); }
    .match.format-row > .record > .opponent > .country > i {
      display: block; }
  .match.format-row > .record > .opponent > .logo {
    width: var(--match-row-participant-icon-size);
    height: var(--match-row-participant-icon-size);
    margin-inline-end: var(--match-row-participant-spacing); }
    .match.format-row > .record > .opponent > .logo > img {
      display: block;
      width: var(--match-row-participant-icon-size);
      height: var(--match-row-participant-icon-size); }
  .match.format-row > .record > .opponent > .result {
    width: var(--match-row-result-width);
    box-sizing: border-box;
    border-radius: var(--match-row-result-radius);
    font: var(--match-row-result-font);
    color: var(--match-row-result-color);
    text-align: center; }
    .match.format-row > .record > .opponent > .result.progress {
      background: var(--match-row-result-progress-background);
      color: var(--match-row-result-progress-color); }
    .match.format-row > .record > .opponent > .result.win {
      background: var(--match-row-result-win-background);
      color: var(--match-row-result-win-color); }
    .match.format-row > .record > .opponent > .result.draw {
      background: var(--match-row-result-draw-background);
      color: var(--match-row-result-draw-color); }
    .match.format-row > .record > .opponent > .result.loss {
      background: var(--match-row-result-loss-background);
      color: var(--match-row-result-loss-color); }
    .match.format-row > .record > .opponent > .result.forfeit {
      background: var(--match-row-result-forfeit-background);
      color: var(--match-row-result-forfeit-color); }
    .match.format-row > .record > .opponent > .result.rank {
      background: var(--match-row-result-ranked-background);
      color: var(--match-row-result-ranked-color); }
    .match.format-row > .record > .opponent > .result.rank-1 {
      background: var(--match-row-result-rank-1-background);
      color: var(--match-row-result-rank-1-color); }
    .match.format-row > .record > .opponent > .result.rank-2 {
      background: var(--match-row-result-rank-2-background);
      color: var(--match-row-result-rank-2-color); }
    .match.format-row > .record > .opponent > .result.rank-3 {
      background: var(--match-row-result-rank-3-background);
      color: var(--match-row-result-rank-3-color); }
    .match.format-row > .record > .opponent > .result.rank-x {
      background: var(--match-row-result-rank-x-background);
      color: var(--match-row-result-rank-x-color); }
  .match.format-row.inverted {
    --match-row-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --match-row-border-color: transparent;
    --match-row-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-row-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --match-row-participant-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-row-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-result-progress-background: transparent;
    --match-row-result-win-color: white;
    --match-row-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-i_medium));
    --match-row-result-draw-color: white;
    --match-row-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-i_medium));
    --match-row-result-loss-color: white;
    --match-row-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-i_medium));
    --match-row-result-forfeit-color: white;
    --match-row-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-i_medium));
    --match-row-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-result-ranked-background: transparent;
    --match-row-result-rank-1-color: white;
    --match-row-result-rank-1-background: var(--color-gold);
    --match-row-result-rank-2-color: white;
    --match-row-result-rank-2-background: var(--color-silver);
    --match-row-result-rank-3-color: white;
    --match-row-result-rank-3-background: var(--color-bronze);
    --match-row-result-rank-x-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-row-result-rank-x-background: transparent; }
  .match.format-row.transparent {
    --match-row-background: transparent; }
  @media (min-width: 601px) and (max-width: 1280px) {
    .match.format-row:not(.non-adaptive) > .logo {
      display: none; } }
  @media (max-width: 600px) {
    .match.format-row:not(.non-adaptive) {
      flex-wrap: wrap; }
      .match.format-row:not(.non-adaptive) > .logo {
        display: none; }
      .match.format-row:not(.non-adaptive) > .context {
        order: -1;
        width: 100% !important;
        max-width: none !important;
        margin-bottom: var(--match-row-v-spacing); }
        .match.format-row:not(.non-adaptive) > .context > :not(:first-child) {
          display: none; }
      .match.format-row:not(.non-adaptive) > .schedule:first-child + .context {
        display: none; }
      .match.format-row:not(.non-adaptive) > .schedule:first-child + .logo + .context {
        display: none; } }

:root {
  --match-row-min-width: 18rem;
  --match-row-padding: var(--sizing-space-large);
  --match-row-v-spacing: 1px;
  --match-row-h-spacing: var(--sizing-space-large);
  --match-row-font: var(--typo-text-small);
  --match-row-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --match-row-border-radius: 0;
  --match-row-border-width: 0;
  --match-row-border-color: transparent;
  --match-row-logo-size: 2.5rem;
  --match-row-participant-icon-size: 1rem;
  --match-row-participant-spacing: var(--sizing-space-tiny);
  --match-row-participant-font: var(--typo-text-small);
  --match-row-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-row-participant-disabled-font: var(--typo-text-small);
  --match-row-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-row-participant-subdued-font: var(--typo-label-tiny);
  --match-row-participant-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-row-result-width: 5rem;
  --match-row-result-radius: var(--sizing-space-tiny);
  --match-row-result-font: var(--typo-text-small);
  --match-row-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-result-progress-background: transparent;
  --match-row-result-win-color: white;
  --match-row-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-medium));
  --match-row-result-draw-color: white;
  --match-row-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-medium));
  --match-row-result-loss-color: white;
  --match-row-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-medium));
  --match-row-result-forfeit-color: white;
  --match-row-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-medium));
  --match-row-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-result-ranked-background: transparent;
  --match-row-result-rank-1-color: white;
  --match-row-result-rank-1-background: var(--color-gold);
  --match-row-result-rank-2-color: white;
  --match-row-result-rank-2-background: var(--color-silver);
  --match-row-result-rank-3-color: white;
  --match-row-result-rank-3-background: var(--color-bronze);
  --match-row-result-rank-x-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-result-rank-x-background: transparent; }

/**
 * Extension to add a schedule section in the match row.
 */
.match.format-row .schedule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--match-row-schedule-width);
  min-width: var(--match-row-schedule-width);
  font: var(--match-row-schedule-font);
  color: var(--match-row-schedule-color);
  text-align: var(--match-row-schedule-text-align);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }
  .match.format-row .schedule > * {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; }
  .match.format-row .schedule.time {
    font: var(--match-row-schedule-time-font); }
  .match.format-row .schedule.date {
    font: var(--match-row-schedule-date-font); }
  .match.format-row .schedule.datetime {
    font: var(--match-row-schedule-datetime-font); }
  .match.format-row .schedule > .secondary {
    color: var(--match-row-schedule-subdued-color); }
  .match.format-row .schedule > .subdued {
    font: var(--match-row-schedule-subdued-font); }

.match.format-row.inverted {
  --match-row-schedule-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  --match-row-schedule-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

:root {
  --match-row-schedule-width: 12rem;
  --match-row-schedule-font: var(--typo-title-tiny);
  --match-row-schedule-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-schedule-text-align: start;
  --match-row-schedule-subdued-font: var(--typo-text-small);
  --match-row-schedule-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-row-schedule-time-font: var(--typo-title-medium);
  --match-row-schedule-date-font: var(--typo-title-medium);
  --match-row-schedule-datetime-font: var(--typo-title-tiny); }

/**
 * Extension to add a context section in the match row.
 */
.match.format-row .context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--match-row-context-width);
  min-width: var(--match-row-context-min-width);
  max-width: var(--match-row-context-max-width);
  font: var(--match-row-context-font);
  color: var(--match-row-context-color);
  text-align: var(--match-row-context-text-align); }
  .match.format-row .context > :first-child {
    color: var(--match-row-context-highlighted-color);
    font: var(--match-row-context-highlighted-font); }

.match.format-row.inverted {
  --match-row-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --match-row-context-highlighted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

:root {
  --match-row-context-width: 33%;
  --match-row-context-min-width: 10rem;
  --match-row-context-max-width: 18rem;
  --match-row-context-text-align: start;
  --match-row-context-font: var(--typo-text-tiny);
  --match-row-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-row-context-highlighted-font: var(--typo-title-tiny);
  --match-row-context-highlighted-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

/**
 * Extension to add a state section in the match row.
 */
.match.format-row .state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--match-row-state-width);
  font: var(--match-row-state-font);
  color: var(--match-row-state-color);
  text-align: center; }
  .match.format-row .state > .pending {
    color: var(--match-row-state-pending-color); }
  .match.format-row .state > .dispute {
    color: var(--match-row-state-dispute-color); }
  .match.format-row .state > .live {
    color: var(--match-row-state-live-color);
    font: var(--match-row-state-live-font); }

.match.format-row.inverted {
  --match-row-state-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
  --match-row-state-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --match-row-state-dispute-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
  --match-row-state-live-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium)); }

:root {
  --match-row-state-width: 5rem;
  --match-row-state-font: var(--typo-label-tiny);
  --match-row-state-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-row-state-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-row-state-dispute-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --match-row-state-live-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --match-row-state-live-font: var(--typo-label-tiny); }

/**
 * Extension to add a small version of a row that reduces the size of the elements in the row.
 */
.match.format-row.small {
  --match-row-padding: var(--sizing-space-medium);
  --match-row-v-spacing: 1px;
  --match-row-h-spacing: var(--sizing-space-large);
  --match-row-context-width: 25%;
  --match-row-context-min-width: 8rem;
  --match-row-context-max-width: 15rem; }

/**
 * Extension to add hover effects on a row match (whole match or the opponent names).
 */
.match.format-row.hover:hover {
  border-color: var(--match-row-hover-border-color);
  background-color: var(--match-row-hover-background-color);
  cursor: pointer; }

.match.format-row > .record > .opponent > .name.hover:hover, .match.format-row > .primary > .opponent > .name.hover:hover {
  cursor: pointer;
  color: var(--match-row-participant-hover-color); }

.match.format-row > .record > .opponent > .name.hover > a, .match.format-row > .primary > .opponent > .name.hover > a {
  color: inherit; }

.match.format-row.inverted {
  --match-row-hover-border-color: transparent;
  --match-row-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5));
  --match-row-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

.match.format-row.transparent {
  --match-row-hover-background-color: transparent; }

:root {
  --match-row-hover-border-color: transparent;
  --match-row-hover-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --match-row-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

/**
 * Extension to add custom colors based on a status of a match on a row match.
 */
.match.format-row.running {
  border-color: var(--match-row-status-running-border-color);
  background-color: var(--match-row-status-running-background-color); }

:root {
  --match-row-status-running-border-color: transparent;
  --match-row-status-running-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }

/**
 * Includes all match sheet styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Match displayed in the sheet format.
 *
 * Note: This format mostly handles page layout.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Match sheet configuration
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/** deprecated */
.match.format-sheet {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box; }
  .match.format-sheet > * {
    margin-bottom: var(--sizing-space-large); }
    .match.format-sheet > *:last-child {
      margin-bottom: 0; }
  .match.format-sheet > .report {
    display: flex;
    align-items: center; }
    .match.format-sheet > .report > * {
      flex: 1;
      margin-inline-end: var(--sizing-space-large); }
      .match.format-sheet > .report > *:last-child {
        margin-inline-end: 0; }
  .match.format-sheet > .opponents {
    display: flex;
    align-items: flex-start; }
    .match.format-sheet > .opponents > * {
      flex: 1;
      margin-inline-end: var(--sizing-space-large); }
      .match.format-sheet > .opponents > *:last-child {
        margin-inline-end: 0; }

/**
 * Match lineup.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.match.format-lineup {
  display: flex;
  flex-direction: column;
  position: relative; }
  .match.format-lineup .player {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .match.format-lineup .player .primary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .match.format-lineup .player .primary .disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-lineup .player .secondary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
      .match.format-lineup .player .secondary .disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .match.format-lineup .player {
    display: flex;
    align-items: flex-start;
    padding-bottom: var(--sizing-space-medium);
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
    margin-bottom: var(--sizing-space-medium); }
    .match.format-lineup .player > * {
      flex: 1;
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .match.format-lineup .player:last-child {
      padding-bottom: 0;
      border-bottom: 0;
      margin-bottom: 0; }
    .match.format-lineup .player .primary {
      display: flex;
      align-items: center; }
      .match.format-lineup .player .primary .avatar {
        margin-inline-end: 0.5rem; }
        .match.format-lineup .player .primary .avatar > img {
          width: 3rem;
          height: 3rem; }
      .match.format-lineup .player .primary .info {
        font: var(--typo-title-tiny);
        padding: var(--sizing-space-tiny) 0; }
        .match.format-lineup .player .primary .info .disabled {
          font: var(--typo-text-tiny); }
    .match.format-lineup .player .secondary {
      font: var(--typo-text-tiny);
      padding: var(--sizing-space-tiny);
      word-break: break-all; }
      .match.format-lineup .player .secondary .disabled {
        font: var(--typo-text-tiny); }
  .match.format-lineup.inverted .player {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
    .match.format-lineup.inverted .player .primary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
      .match.format-lineup.inverted .player .primary .disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
    .match.format-lineup.inverted .player .secondary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      .match.format-lineup.inverted .player .secondary .disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

@media (max-width: 600px) {
  .match.format-lineup .player {
    flex-wrap: wrap; }
    .match.format-lineup .player .primary {
      flex: 0 0 100%; }
    .match.format-lineup .player .secondary {
      flex: 0 0 100%; } }

/**
 * Match (or match set) shown in the info format.
 */
/**
 * Config the match header format.
 */
.match.format-info {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  width: 100%;
  box-sizing: border-box;
  padding: var(--match-info-padding);
  gap: var(--match-info-spacing);
  background: var(--match-info-background); }
  .match.format-info.scrollable {
    overflow-x: auto; }
  .match.format-info > .record {
    display: flex;
    flex-direction: column; }
    .match.format-info > .record > .header, .match.format-info > .record > .title, .match.format-info > .record > .opponent {
      display: flex;
      align-items: center;
      min-width: 100%;
      box-sizing: border-box;
      padding: var(--match-info-participant-spacing-v) var(--match-info-participant-spacing-h);
      border-bottom: var(--match-info-divider-width) solid var(--match-info-divider-color); }
      .match.format-info > .record > .header:last-child, .match.format-info > .record > .title:last-child, .match.format-info > .record > .opponent:last-child {
        border-bottom: none; }
      .match.format-info > .record > .header > *, .match.format-info > .record > .title > *, .match.format-info > .record > .opponent > * {
        box-sizing: content-box;
        margin-inline-end: var(--match-info-participant-spacing-h); }
        .match.format-info > .record > .header > *:last-child, .match.format-info > .record > .title > *:last-child, .match.format-info > .record > .opponent > *:last-child {
          margin-inline-end: 0; }
      .match.format-info > .record > .header > .country, .match.format-info > .record > .header > .flag, .match.format-info > .record > .header > .logo, .match.format-info > .record > .title > .country, .match.format-info > .record > .title > .flag, .match.format-info > .record > .title > .logo, .match.format-info > .record > .opponent > .country, .match.format-info > .record > .opponent > .flag, .match.format-info > .record > .opponent > .logo {
        width: var(--match-info-participant-icon-size); }
        .match.format-info > .record > .header > .country > i, .match.format-info > .record > .header > .flag > i, .match.format-info > .record > .header > .logo > i, .match.format-info > .record > .title > .country > i, .match.format-info > .record > .title > .flag > i, .match.format-info > .record > .title > .logo > i, .match.format-info > .record > .opponent > .country > i, .match.format-info > .record > .opponent > .flag > i, .match.format-info > .record > .opponent > .logo > i {
          display: block; }
        .match.format-info > .record > .header > .country > img, .match.format-info > .record > .header > .flag > img, .match.format-info > .record > .header > .logo > img, .match.format-info > .record > .title > .country > img, .match.format-info > .record > .title > .flag > img, .match.format-info > .record > .title > .logo > img, .match.format-info > .record > .opponent > .country > img, .match.format-info > .record > .opponent > .flag > img, .match.format-info > .record > .opponent > .logo > img {
          display: block;
          width: var(--match-info-participant-icon-size);
          height: var(--match-info-participant-icon-size); }
      .match.format-info > .record > .header > .name, .match.format-info > .record > .title > .name, .match.format-info > .record > .opponent > .name {
        flex: 1;
        min-width: var(--match-info-participant-min-width);
        width: 0;
        text-align: start; }
      .match.format-info > .record > .header > .data, .match.format-info > .record > .title > .data, .match.format-info > .record > .opponent > .data {
        text-align: center;
        width: var(--match-info-data-width); }
        .match.format-info > .record > .header > .data.huge, .match.format-info > .record > .title > .data.huge, .match.format-info > .record > .opponent > .data.huge {
          width: 10rem; }
        .match.format-info > .record > .header > .data.large, .match.format-info > .record > .title > .data.large, .match.format-info > .record > .opponent > .data.large {
          width: 7rem; }
        .match.format-info > .record > .header > .data.medium, .match.format-info > .record > .title > .data.medium, .match.format-info > .record > .opponent > .data.medium {
          width: 5rem; }
        .match.format-info > .record > .header > .data.small, .match.format-info > .record > .title > .data.small, .match.format-info > .record > .opponent > .data.small {
          width: 3rem; }
      .match.format-info > .record > .header > .result, .match.format-info > .record > .title > .result, .match.format-info > .record > .opponent > .result {
        width: var(--match-info-result-width);
        text-align: center; }
    .match.format-info > .record > .opponent > .name {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font: var(--match-info-participant-font);
      color: var(--match-info-participant-color); }
      .match.format-info > .record > .opponent > .name.win {
        color: var(--match-info-participant-win-color); }
      .match.format-info > .record > .opponent > .name.loss, .match.format-info > .record > .opponent > .name.forfeit {
        color: var(--match-info-participant-loss-color); }
      .match.format-info > .record > .opponent > .name.disabled {
        color: var(--match-info-participant-disabled-color); }
      .match.format-info > .record > .opponent > .name.weighted:not(.disabled) {
        font-weight: 700; }
      .match.format-info > .record > .opponent > .name > .description {
        font: var(--match-info-participant-description-font);
        color: var(--match-info-participant-description-color); }
    .match.format-info > .record > .opponent > .data {
      font: var(--match-info-data-font);
      color: var(--match-info-data-color); }
    .match.format-info > .record > .opponent > .result {
      font: var(--match-info-result-font);
      color: var(--match-info-result-color);
      border-radius: var(--match-info-result-radius); }
      .match.format-info > .record > .opponent > .result.progress {
        background: var(--match-info-result-progress-background);
        color: var(--match-info-result-progress-color); }
      .match.format-info > .record > .opponent > .result.win {
        background: var(--match-info-result-win-background);
        color: var(--match-info-result-win-color); }
      .match.format-info > .record > .opponent > .result.draw {
        background: var(--match-info-result-draw-background);
        color: var(--match-info-result-draw-color); }
      .match.format-info > .record > .opponent > .result.loss {
        background: var(--match-info-result-loss-background);
        color: var(--match-info-result-loss-color); }
      .match.format-info > .record > .opponent > .result.forfeit {
        background: var(--match-info-result-forfeit-background);
        color: var(--match-info-result-forfeit-color); }
      .match.format-info > .record > .opponent > .result.rank {
        background: var(--match-info-result-ranked-background);
        color: var(--match-info-result-ranked-color); }
      .match.format-info > .record > .opponent > .result.rank-1 {
        background: var(--match-info-result-rank-1-background);
        color: var(--match-info-result-rank-1-color); }
      .match.format-info > .record > .opponent > .result.rank-2 {
        background: var(--match-info-result-rank-2-background);
        color: var(--match-info-result-rank-2-color); }
      .match.format-info > .record > .opponent > .result.rank-3 {
        background: var(--match-info-result-rank-3-background);
        color: var(--match-info-result-rank-3-color); }
      .match.format-info > .record > .opponent > .result.rank-x {
        background: var(--match-info-result-rank-x-background);
        color: var(--match-info-result-rank-x-color); }
    .match.format-info > .record > .header, .match.format-info > .record > .title {
      font: var(--match-info-header-font);
      color: var(--match-info-header-color);
      text-transform: var(--match-info-header-transform); }
  .match.format-info.inverted {
    --match-info-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --match-info-header-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
    --match-info-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    --match-info-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-info-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --match-info-participant-description-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --match-info-data-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
    --match-info-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-result-progress-background: transparent;
    --match-info-result-win-color: white;
    --match-info-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-i_medium));
    --match-info-result-draw-color: white;
    --match-info-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-i_medium));
    --match-info-result-loss-color: white;
    --match-info-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-i_medium));
    --match-info-result-forfeit-color: white;
    --match-info-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-i_medium));
    --match-info-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-result-ranked-background: transparent;
    --match-info-result-rank-1-color: white;
    --match-info-result-rank-1-background: var(--color-gold);
    --match-info-result-rank-2-color: white;
    --match-info-result-rank-2-background: var(--color-silver);
    --match-info-result-rank-3-color: white;
    --match-info-result-rank-3-background: var(--color-bronze);
    --match-info-result-rank-x-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --match-info-result-rank-x-background: transparent; }

:root {
  --match-info-spacing: var(--sizing-space-medium);
  --match-info-padding: 0;
  --match-info-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --match-info-header-font: var(--typo-text-tiny);
  --match-info-header-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --match-info-header-transform: uppercase;
  --match-info-divider-width: 1px;
  --match-info-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --match-info-participant-spacing-v: var(--sizing-space-medium);
  --match-info-participant-spacing-h: var(--sizing-space-medium);
  --match-info-participant-icon-size: 2rem;
  --match-info-participant-min-width: 10rem;
  --match-info-participant-font: var(--typo-text-large);
  --match-info-participant-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-participant-win-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-participant-loss-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-info-participant-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --match-info-participant-description-font: var(--typo-text-tiny);
  --match-info-participant-description-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --match-info-data-width: 5rem;
  --match-info-data-font: var(--typo-text-medium);
  --match-info-data-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --match-info-result-width: 5rem;
  --match-info-result-radius: var(--sizing-space-tiny);
  --match-info-result-font: var(--typo-text-medium);
  --match-info-result-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-result-progress-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-result-progress-background: transparent;
  --match-info-result-win-color: white;
  --match-info-result-win-background: hsl(var(--color-win-h), var(--color-win-s), var(--color-variant-medium));
  --match-info-result-draw-color: white;
  --match-info-result-draw-background: hsl(var(--color-draw-h), var(--color-draw-s), var(--color-variant-medium));
  --match-info-result-loss-color: white;
  --match-info-result-loss-background: hsl(var(--color-loss-h), var(--color-loss-s), var(--color-variant-medium));
  --match-info-result-forfeit-color: white;
  --match-info-result-forfeit-background: hsl(var(--color-forfeit-h), var(--color-forfeit-s), var(--color-variant-medium));
  --match-info-result-ranked-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-result-ranked-background: transparent;
  --match-info-result-rank-1-color: white;
  --match-info-result-rank-1-background: var(--color-gold);
  --match-info-result-rank-2-color: white;
  --match-info-result-rank-2-background: var(--color-silver);
  --match-info-result-rank-3-color: white;
  --match-info-result-rank-3-background: var(--color-bronze);
  --match-info-result-rank-x-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --match-info-result-rank-x-background: transparent; }

/**
 * Extension to add a title at the beginning of the match info.
 */
.match.format-info > .title {
  font: var(--match-info-title-font);
  color: var(--match-info-title-color); }

.match.format-info.inverted {
  --match-info-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

:root {
  --match-info-title-font: var(--typo-title-medium);
  --match-info-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

/**
 * Extension to add a properties at the beginning of the match info.
 */
.match.format-info > .properties {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--match-info-properties-spacing-v) var(--match-info-properties-spacing-h); }
  .match.format-info > .properties > * .name {
    font: var(--match-info-properties-label-font);
    color: var(--match-info-properties-label-color);
    text-transform: var(--match-info-properties-label-transform); }
  .match.format-info > .properties > * .value {
    font: var(--match-info-properties-value-font);
    color: var(--match-info-properties-value-color); }

.match.format-info.inverted {
  --match-info-properties-label-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
  --match-info-properties-value-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

:root {
  --match-info-properties-spacing-h: var(--sizing-space-huge);
  --match-info-properties-spacing-v: var(--sizing-space-medium);
  --match-info-properties-label-font: var(--typo-text-tiny);
  --match-info-properties-label-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --match-info-properties-label-transform: uppercase;
  --match-info-properties-value-font: var(--typo-text-medium);
  --match-info-properties-value-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }

/**
 * Extension to add a hover effect on the opponent names of a match info.
 */
.match.format-info > .record > .opponent > .name.hover:hover {
  cursor: pointer;
  color: var(--match-info-participant-hover-color); }

.match.format-info > .record > .opponent > .name.hover > a {
  color: inherit; }

.match.format-info.inverted {
  --match-info-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

:root {
  --match-info-participant-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

/**
 * Extension to display a logo at the beginning of the match info.
 * @deprecated There is no use case for this.
 */
.match.format-info > .logo, .match.format-info > .logo > img {
  width: 2.5rem;
  height: 2.5rem; }

/**
 * Match-form component
 *
 */
.match.format-form {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  min-inline-size: 100%;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .match.format-form > * {
    padding: 0;
    padding-block-end: var(--sizing-space-medium); }
    .match.format-form > *:last-child {
      padding-block-end: 0; }
  .match.format-form > .title {
    font: var(--typo-title-medium);
    letter-spacing: 0; }
  .match.format-form > .properties {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sizing-space-medium); }
    .match.format-form > .properties .name {
      font: var(--typo-text-tiny);
      text-transform: uppercase; }
    .match.format-form > .properties .value {
      font: var(--typo-text-medium); }
  .match.format-form > .record {
    display: flex;
    flex-direction: column; }
    .match.format-form > .record > .opponent {
      display: flex;
      flex-direction: column;
      font: var(--typo-text-medium);
      border-block-end: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
      .match.format-form > .record > .opponent:last-child {
        border-block-end: none; }
      .match.format-form > .record > .opponent > .item {
        display: flex;
        align-items: center;
        padding: var(--sizing-space-medium)/2var(--sizing-space-large)/2 var(--sizing-space-medium);
        gap: var(--sizing-space-medium); }
        .match.format-form > .record > .opponent > .item:first-child {
          padding-block-start: var(--sizing-space-large); }
        .match.format-form > .record > .opponent > .item:last-child {
          padding-block-end: var(--sizing-space-large); }
        .match.format-form > .record > .opponent > .item > * > .value {
          padding-block: var(--sizing-space-small);
          padding-inline: 0;
          border: 1px solid transparent; }
        .match.format-form > .record > .opponent > .item > .name {
          flex: 8 0 8rem;
          order: 1;
          font: var(--typo-text-large);
          font-weight: 700; }
          .match.format-form > .record > .opponent > .item > .name > .description {
            font: var(--typo-text-tiny);
            color: gray; }
        .match.format-form > .record > .opponent > .item > .forfeit {
          flex: 1 0 5rem;
          order: 2;
          max-inline-size: 5rem;
          text-align: center; }
          .match.format-form > .record > .opponent > .item > .forfeit .form-row .checkbox-field {
            justify-content: center; }
            .match.format-form > .record > .opponent > .item > .forfeit .form-row .checkbox-field label {
              display: none; }
        .match.format-form > .record > .opponent > .item > .metric {
          flex: 1 1 3rem;
          order: 3;
          max-inline-size: 5rem;
          text-align: center; }
        .match.format-form > .record > .opponent > .item > .score {
          flex: 1 1 3rem;
          order: 4;
          max-inline-size: 5rem;
          text-align: center; }
          .match.format-form > .record > .opponent > .item > .score.duration {
            flex: 1 1 12rem;
            max-inline-size: 16rem; }
        .match.format-form > .record > .opponent > .item > .result {
          flex: 1 1 9rem;
          order: 5;
          text-align: center; }
          .match.format-form > .record > .opponent > .item > .result > .value {
            font: var(--typo-text-medium); }
            .match.format-form > .record > .opponent > .item > .result > .value > * {
              display: inline-block;
              border-radius: var(--sizing-space-tiny);
              min-inline-size: 5rem;
              text-align: center; }
        .match.format-form > .record > .opponent > .item > .rank {
          flex: 1 1 3rem;
          order: 5;
          max-inline-size: 5rem;
          text-align: center; }
          .match.format-form > .record > .opponent > .item > .rank > .value {
            font: var(--typo-text-medium); }
            .match.format-form > .record > .opponent > .item > .rank > .value > * {
              display: inline-block;
              border-radius: var(--sizing-space-tiny);
              min-inline-size: 5rem;
              text-align: center; }
            .match.format-form > .record > .opponent > .item > .rank > .value > .rank {
              text-transform: none; }
        .match.format-form > .record > .opponent > .item > .property {
          width: calc(25% - var(--sizing-space-medium)); }
      .match.format-form > .record > .opponent.header > .item > * {
        text-transform: uppercase;
        font: var(--typo-text-tiny) !important; }
      .match.format-form > .record > .opponent > .item > * > .header {
        display: none; }
  .match.format-form .title {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .match.format-form .properties {
    padding: var(--sizing-space-medium); }
    .match.format-form .properties .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-form .properties .value {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .match.format-form > .record > .opponent {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .match.format-form > .record > .opponent > .item > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .match.format-form > .record > .opponent > .item > .name.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
    .match.format-form > .record > .opponent > .item > .score {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    .match.format-form > .record > .opponent > .item > .metric {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    .match.format-form > .record > .opponent > .item > .forfeit {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }
    .match.format-form > .record > .opponent > .item > .result {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .match.format-form > .record > .opponent > .item > .result > .value > .progress {
        background: transparent;
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
      .match.format-form > .record > .opponent > .item > .result > .value > .win {
        background: var(--color-win);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .result > .value > .draw {
        background: var(--color-draw);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .result > .value > .loss {
        background: var(--color-loss);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .result > .value > .forfeit {
        background: var(--color-warning);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .match.format-form > .record > .opponent > .item > .rank {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .progress {
        background: transparent;
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .rank-1 {
        background: var(--color-gold);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .rank-2 {
        background: var(--color-silver);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .rank-3 {
        background: var(--color-bronze);
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .rank-x {
        background: transparent;
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .match.format-form > .record > .opponent > .item > .rank > .value > .forfeit {
        background: transparent;
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .match.format-form > .record > .opponent.header > .item > .name,
    .match.format-form > .record > .opponent.header > .item > .score,
    .match.format-form > .record > .opponent.header > .item > .metric,
    .match.format-form > .record > .opponent.header > .item > .forfeit,
    .match.format-form > .record > .opponent.header > .item > .result,
    .match.format-form > .record > .opponent.header > .item > .rank {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .match.format-form > .record > .opponent > .item > * > .header {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .match.format-form.inverted {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .match.format-form.inverted .title {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .match.format-form.inverted .properties {
      padding: var(--sizing-space-medium); }
      .match.format-form.inverted .properties .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .match.format-form.inverted .properties .value {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .match.format-form.inverted > .record > .opponent {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
      .match.format-form.inverted > .record > .opponent > .item > .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
        .match.format-form.inverted > .record > .opponent > .item > .name.disabled {
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
      .match.format-form.inverted > .record > .opponent > .item > .score {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
      .match.format-form.inverted > .record > .opponent > .item > .metric {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
      .match.format-form.inverted > .record > .opponent > .item > .forfeit {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3)); }
      .match.format-form.inverted > .record > .opponent > .item > .result {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
        .match.format-form.inverted > .record > .opponent > .item > .result > .value > .progress {
          background: transparent;
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
        .match.format-form.inverted > .record > .opponent > .item > .result > .value > .win {
          background: var(--color-win);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .result > .value > .draw {
          background: var(--color-draw);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .result > .value > .loss {
          background: var(--color-loss);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .result > .value > .forfeit {
          background: var(--color-warning);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
      .match.format-form.inverted > .record > .opponent > .item > .rank {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .progress {
          background: transparent;
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .rank-1 {
          background: var(--color-gold);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .rank-2 {
          background: var(--color-silver);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .rank-3 {
          background: var(--color-bronze);
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .rank-x {
          background: transparent;
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
        .match.format-form.inverted > .record > .opponent > .item > .rank > .value > .forfeit {
          background: transparent;
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
      .match.format-form.inverted > .record > .opponent.header > .item > .name,
      .match.format-form.inverted > .record > .opponent.header > .item > .score,
      .match.format-form.inverted > .record > .opponent.header > .item > .metric,
      .match.format-form.inverted > .record > .opponent.header > .item > .forfeit,
      .match.format-form.inverted > .record > .opponent.header > .item > .result,
      .match.format-form.inverted > .record > .opponent.header > .item > .rank {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .match.format-form.inverted > .record > .opponent > .item > * > .header {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

@media (min-width: 601px) and (max-width: 1280px) {
  .match.format-form > .title {
    padding: 0; }
  .match.format-form > .record > .opponent > .item {
    flex-wrap: wrap; }
    .match.format-form > .record > .opponent > .item > .property {
      width: calc(33% - var(--sizing-space-medium)); } }

@media (max-width: 600px) {
  .match.format-form > .title {
    padding: 0; }
  .match.format-form > .properties > * {
    flex: 1 0 calc(50% - var(--sizing-space-medium)); }
  .match.format-form > .record > .opponent.header {
    display: none; }
  .match.format-form > .record > .opponent > .item > * > .header {
    display: block;
    text-transform: uppercase;
    font: var(--typo-text-tiny);
    text-align: start;
    margin-block-end: var(--sizing-space-tiny); }
  .match.format-form > .record > .opponent > .item {
    flex-wrap: wrap; }
    .match.format-form > .record > .opponent > .item > * {
      text-align: start !important; }
    .match.format-form > .record > .opponent > .item > .name {
      flex: 1 0 calc(100% - var(--sizing-space-medium)); }
    .match.format-form > .record > .opponent > .item > .forfeit {
      flex: 1 0 auto;
      max-inline-size: none;
      text-align: start; }
      .match.format-form > .record > .opponent > .item > .forfeit .form-row .checkbox-field {
        justify-content: start; }
    .match.format-form > .record > .opponent > .item > .metric {
      order: 10;
      min-inline-size: calc(50% - var(--sizing-space-medium));
      text-align: start; }
    .match.format-form > .record > .opponent > .item > .score {
      text-align: start; }
    .match.format-form > .record > .opponent > .item > .result {
      min-inline-size: calc(50% - var(--sizing-space-medium));
      text-align: start; }
    .match.format-form > .record > .opponent > .item > .rank {
      min-inline-size: calc(50% - var(--sizing-space-medium));
      max-inline-size: initial;
      text-align: start; }
    .match.format-form > .record > .opponent > .item > .property {
      flex: 1 0 calc(50% - var(--sizing-space-medium)); } }

/**
 * Includes all notification styling
 */
/**
 * Represents a notification in a row format.
 */
/**
 * Notification row style.
 */
.notification.format-row {
  display: grid;
  grid-template-areas: "state context time" "state message time";
  grid-template-rows: auto;
  grid-template-columns: var(--notification-row-state-size) 1fr auto;
  justify-content: stretch;
  align-items: stretch;
  gap: var(--notification-row-spacing-v) var(--notification-row-spacing-h);
  padding-inline: var(--notification-row-padding-h);
  padding-block: var(--notification-row-padding-v);
  border-radius: var(--notification-row-radius);
  border-width: var(--notification-row-border-width);
  border-style: solid;
  border-color: var(--notification-row-border-color);
  background-color: var(--notification-row-background-color); }
  .notification.format-row > .state {
    grid-area: state;
    align-self: center;
    text-align: center; }
    .notification.format-row > .state > :first-child {
      inline-size: var(--notification-row-state-size);
      block-size: var(--notification-row-state-size);
      border-radius: 50%; }
      .notification.format-row > .state > :first-child.read {
        background-color: var(--notification-row-state-read-color); }
      .notification.format-row > .state > :first-child.unread {
        background-color: var(--notification-row-state-unread-color); }
  .notification.format-row > .context {
    grid-area: context;
    font: var(--notification-row-context-font);
    color: var(--notification-row-context-color);
    text-align: start; }
  .notification.format-row > .message {
    grid-area: message;
    font: var(--notification-row-message-font);
    color: var(--notification-row-message-color);
    text-align: start; }
  .notification.format-row > .time {
    grid-area: time;
    align-self: center;
    min-inline-size: 2rem;
    font: var(--notification-row-time-font);
    color: var(--notification-row-time-color);
    text-align: start; }
  @media (max-width: 600px) {
    .notification.format-row {
      grid-template-areas: "state context" "state message" "state time";
      grid-template-columns: var(--notification-row-state-size) 1fr; } }
  .notification.format-row.inverted {
    --notification-row-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --notification-row-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --notification-row-state-read-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --notification-row-state-unread-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
    --notification-row-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --notification-row-message-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --notification-row-time-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

html {
  --notification-row-padding-h: var(--sizing-space-large);
  --notification-row-padding-v: var(--sizing-space-large);
  --notification-row-spacing-h: var(--sizing-space-large);
  --notification-row-spacing-v: var(--sizing-space-tiny);
  --notification-row-radius: var(--sizing-space-tiny);
  --notification-row-border-width: 1px;
  --notification-row-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --notification-row-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --notification-row-state-size: 12px;
  --notification-row-state-read-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --notification-row-state-unread-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --notification-row-context-font: var(--typo-label-small);
  --notification-row-context-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --notification-row-message-font: var(--typo-label-large);
  --notification-row-message-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --notification-row-time-font: var(--typo-label-small);
  --notification-row-time-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * registration domain components
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Participant shown in the box format.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.format-box {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--sizing-space-medium);
  border-radius: var(--sizing-space-tiny);
  min-height: calc(100% - var(--sizing-space-medium) - 2px);
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .participant.format-box.hover:hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .participant.format-box.transparent {
    background: none; }
  .participant.format-box > .image {
    display: flex;
    align-items: center;
    justify-content: center; }
    .participant.format-box > .image > * {
      margin-inline-end: var(--sizing-space-medium); }
    .participant.format-box > .image > .participant.logo.none, .participant.format-box > .image .participant.country.none {
      margin-inline-end: 0; }
    .participant.format-box > .image > .participant.country i {
      display: block; }
  .participant.format-box > .identity {
    flex: 1;
    min-width: 0; }
    .participant.format-box > .identity > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .participant.format-box > .identity > .description {
      color: var(--color-standard); }
    .participant.format-box > .identity > .name {
      font: var(--typo-title-small); }
    .participant.format-box > .identity > .description {
      font: var(--typo-text-tiny); }
  .participant.format-box.hover:hover {
    cursor: pointer; }
  .participant.format-box.inverted {
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .participant.format-box.inverted.hover:hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .participant.format-box.inverted > .identity > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .participant.format-box.inverted > .identity > .description {
      color: var(--color-standard); }

/**
 * Participant shown in the header format.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.format-header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .participant.format-header > .name {
    font: var(--typo-title-huge); }
  .participant.format-header > *:not(:last-child) {
    margin-inline-end: var(--sizing-space-large); }

@media (max-width: 600px) {
  .participant.format-header {
    flex-direction: column;
    flex-wrap: nowrap; } }

/**
 * Participant logo.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.logo {
  width: 4rem;
  height: 4rem; }
  .participant.logo > img {
    width: 4rem;
    height: 4rem; }
  .participant.logo.small {
    width: 2rem;
    height: 2rem; }
    .participant.logo.small > img {
      width: 2rem;
      height: 2rem; }
  .participant.logo.large {
    width: 8rem;
    height: 8rem; }
    .participant.logo.large > img {
      width: 8rem;
      height: 8rem; }
  .participant.logo.none {
    width: 0; }

/**
 * seeding mini format styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.participant.format-row {
  display: flex;
  align-items: center;
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  font: var(--typo-text-small);
  min-height: 1.75rem;
  padding: var(--sizing-space-small); }
  .participant.format-row .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .participant.format-row.divider {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .participant.format-row.disabled, .participant.format-row.disabled .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .participant.format-row.hover:hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .participant.format-row.title {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .participant.format-row.title .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .participant.format-row.title div {
      user-select: none; }
      .participant.format-row.title div > a {
        cursor: pointer; }
  .participant.format-row.spacing-large {
    padding: var(--sizing-space-medium); }
  .participant.format-row > * {
    box-sizing: content-box;
    margin-inline-start: 0; }
    .participant.format-row > *:not(:first-child) {
      margin-inline-start: var(--sizing-space-small); }
  .participant.format-row .identity {
    flex: 10;
    display: flex;
    align-items: center; }
    .participant.format-row .identity > * {
      box-sizing: content-box;
      margin-inline-start: var(--sizing-space-small); }
      .participant.format-row .identity > *:first-child {
        margin-inline-start: 0; }
    .participant.format-row .identity .image {
      display: flex;
      align-items: center;
      justify-content: center; }
      .participant.format-row .identity .image.logo > img {
        width: 1.2em;
        height: 1.2em; }
      .participant.format-row .identity .image.logo.large > img {
        width: 2.5em;
        height: 2.5em; }
    .participant.format-row .identity > .information {
      text-align: start;
      width: 0; }
      .participant.format-row .identity > .information > .description {
        font: var(--typo-text-tiny); }
  .participant.format-row .information {
    flex: 6;
    text-align: start;
    width: 0; }
  .participant.format-row .metric {
    width: 5rem;
    text-align: center;
    font: var(--typo-text-tiny); }
    .participant.format-row .metric.small {
      width: 3rem; }
    .participant.format-row .metric.large {
      width: 10rem; }
    .participant.format-row .metric > a {
      font: var(--typo-text-small); }
    .participant.format-row .metric.align-start {
      text-align: start; }
    .participant.format-row .metric.align-end {
      text-align: end; }
    .participant.format-row .metric.align-left {
      text-align: start; }
    .participant.format-row .metric.align-right {
      text-align: end; }
  .participant.format-row .switch {
    text-align: center;
    width: 5rem; }
  .participant.format-row .status {
    width: 8rem; }
  .participant.format-row .actions .form-row, .participant.format-row .actions .form-row .form-field {
    margin: 0;
    padding: 0; }
  .participant.format-row .actions.primary {
    width: 2rem;
    text-align: center; }
    .participant.format-row .actions.primary button {
      padding: 0; }
  .participant.format-row .actions.secondary {
    width: 2rem; }
    .participant.format-row .actions.secondary button {
      padding: 0; }
    .participant.format-row .actions.secondary.large {
      width: 3rem; }
  .participant.format-row.divider {
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
    width: auto; }
    .participant.format-row.divider:last-child:not(.title) {
      border-bottom: none; }
  .participant.format-row.disabled {
    font-weight: 400;
    cursor: not-allowed; }
  .participant.format-row.hover {
    cursor: pointer; }
    .participant.format-row.hover.disabled {
      cursor: not-allowed; }
  .participant.format-row.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .participant.format-row.inverted .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .participant.format-row.inverted.divider {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
    .participant.format-row.inverted.disabled, .participant.format-row.inverted.disabled .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .participant.format-row.inverted.hover:hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .participant.format-row.inverted.title {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .participant.format-row.inverted.title .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .participant.format-row.inverted.title div {
        user-select: none; }
        .participant.format-row.inverted.title div > a {
          cursor: pointer; }

@media (min-width: 601px) and (max-width: 1280px) {
  .participant.format-row:not(.small) > *.tablet-hide, .participant.format-row:not(.small) > .identity > .image.tablet-hide {
    display: none; }
  .participant.format-row:not(.small) .status, .participant.format-row:not(.small) .date {
    display: none; } }

@media (max-width: 600px) {
  .participant.format-row:not(.small) > *.mobile-hide, .participant.format-row:not(.small) > .identity > .image.mobile-hide, .participant.format-row:not(.small) .identity .description {
    display: none; }
  .participant.format-row:not(.small) .status, .participant.format-row:not(.small) .email, .participant.format-row:not(.small) .date {
    display: none; } }

/**
 * Includes all pick-ban styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * toornament logo with a caption.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.pick-ban {
  display: inline-block;
  width: 5rem; }
  .pick-ban input[type=checkbox] {
    position: absolute;
    left: -9999px; }
  .pick-ban .image {
    position: relative; }
    .pick-ban .image > img {
      border-radius: 0;
      padding: var(--sizing-space-tiny);
      box-shadow: 0 0 0 1px hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
      width: calc(5rem - 2*var(--sizing-space-tiny)); }
  .pick-ban .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    text-align: center;
    user-select: none; }
  .pick-ban.inverted .image > img {
    box-shadow: 0 0 0 1px hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
  .pick-ban.inverted .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
  .pick-ban input + label {
    cursor: pointer; }
  .pick-ban.selected .image > img,
  .pick-ban.selectable input:checked + label .image > img {
    border-radius: calc(var(--sizing-space-tiny)/2);
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
    box-shadow: 0 0 0 var(--sizing-space-tiny) hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .pick-ban.picked .image::before,
  .pick-ban.pickable input:checked + label .image::before {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: var(--sizing-space-tiny);
    padding-inline: calc(var(--sizing-space-tiny)*2) var(--sizing-space-tiny);
    padding-block: var(--sizing-space-tiny) 0;
    font: 400 var(--sizing-text-tiny)/1.5em "Font Awesome 6 Pro";
    border-start-start-radius: calc(calc(var(--sizing-space-tiny)/2)*2);
    text-transform: uppercase;
    content: "";
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .pick-ban.picked .image > img,
  .pick-ban.pickable input:checked + label .image > img {
    border-radius: calc(var(--sizing-space-tiny)/2);
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
    box-shadow: 0 0 0 var(--sizing-space-tiny) hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .pick-ban.banned .image::before,
  .pick-ban.bannable input:checked + label .image::before {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: var(--sizing-space-tiny);
    padding-inline: calc(var(--sizing-space-tiny)*2) var(--sizing-space-tiny);
    padding-block: var(--sizing-space-tiny) 0;
    font: 400 var(--sizing-text-tiny)/1.5em "Font Awesome 6 Pro";
    border-start-start-radius: calc(calc(var(--sizing-space-tiny)/2)*2);
    text-transform: uppercase;
    content: "";
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .pick-ban.banned .image > img,
  .pick-ban.bannable input:checked + label .image > img {
    border-radius: calc(var(--sizing-space-tiny)/2);
    border-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
    box-shadow: 0 0 0 var(--sizing-space-tiny) hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .pick-ban.undefined .image::before {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: var(--sizing-space-tiny);
    padding-inline: calc(var(--sizing-space-tiny)*2) var(--sizing-space-tiny);
    padding-block: var(--sizing-space-tiny) 0;
    font: 400 var(--sizing-text-tiny)/1.5em "Font Awesome 6 Pro";
    border-start-start-radius: calc(calc(var(--sizing-space-tiny)/2)*2);
    text-transform: uppercase;
    content: "";
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .pick-ban.undefined .image > img {
    border-radius: calc(var(--sizing-space-tiny)/2);
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
    box-shadow: 0 0 0 var(--sizing-space-tiny) hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .pick-ban.disabled {
    opacity: 0.25; }
    .pick-ban.disabled input + label {
      cursor: not-allowed; }

/**
 * Includes all ranking styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Ranking mini format styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.ranking.format-mini {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  min-width: 7rem; }
  .ranking.format-mini .ranking-title {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .ranking.format-mini .ranking-title.divider {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .ranking.format-mini .ranking-item {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .ranking.format-mini .ranking-item.divider {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .ranking.format-mini .ranking-item > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
      .ranking.format-mini .ranking-item > .name.disabled {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
    .ranking.format-mini .ranking-item > .highlighted {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .ranking.format-mini .ranking-title, .ranking.format-mini .ranking-item {
    display: flex;
    align-items: center;
    padding: var(--sizing-space-tiny); }
    .ranking.format-mini .ranking-title > *, .ranking.format-mini .ranking-item > * {
      box-sizing: content-box;
      margin-inline-start: var(--sizing-space-tiny); }
      .ranking.format-mini .ranking-title > *:first-child, .ranking.format-mini .ranking-item > *:first-child {
        margin-inline-start: 0; }
    .ranking.format-mini .ranking-title abbr, .ranking.format-mini .ranking-item abbr {
      border-bottom: 0; }
    .ranking.format-mini .ranking-title > .rank, .ranking.format-mini .ranking-item > .rank {
      width: 1.5rem;
      text-align: center; }
      .ranking.format-mini .ranking-title > .rank.large, .ranking.format-mini .ranking-item > .rank.large {
        width: 3rem; }
    .ranking.format-mini .ranking-title > .country, .ranking.format-mini .ranking-item > .country {
      width: 1rem; }
      .ranking.format-mini .ranking-title > .country > i, .ranking.format-mini .ranking-item > .country > i {
        display: block; }
    .ranking.format-mini .ranking-title > .logo, .ranking.format-mini .ranking-item > .logo {
      width: 1rem;
      height: 1rem; }
    .ranking.format-mini .ranking-title > .name, .ranking.format-mini .ranking-item > .name {
      flex: 10;
      text-align: start; }
    .ranking.format-mini .ranking-title > .metric, .ranking.format-mini .ranking-item > .metric {
      flex: 1;
      text-align: center; }
      .ranking.format-mini .ranking-title > .metric.large, .ranking.format-mini .ranking-item > .metric.large {
        min-width: 2rem; }
      .ranking.format-mini .ranking-title > .metric.align-start, .ranking.format-mini .ranking-item > .metric.align-start {
        text-align: start; }
      .ranking.format-mini .ranking-title > .metric.align-end, .ranking.format-mini .ranking-item > .metric.align-end {
        text-align: end; }
      .ranking.format-mini .ranking-title > .metric.align-left, .ranking.format-mini .ranking-item > .metric.align-left {
        text-align: start; }
      .ranking.format-mini .ranking-title > .metric.align-right, .ranking.format-mini .ranking-item > .metric.align-right {
        text-align: end; }
    .ranking.format-mini .ranking-title.divider, .ranking.format-mini .ranking-item.divider {
      border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .ranking.format-mini .ranking-title {
    font: var(--typo-text-tiny); }
  .ranking.format-mini .ranking-item {
    font: var(--typo-text-small);
    min-height: 1rem; }
    .ranking.format-mini .ranking-item > .logo > img {
      width: 1rem;
      height: 1rem; }
    .ranking.format-mini .ranking-item > .name {
      font: var(--typo-text-small);
      width: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
      .ranking.format-mini .ranking-item > .name.weighted {
        font-weight: 500; }
      .ranking.format-mini .ranking-item > .name.weighted.disabled {
        font-weight: 400; }
    .ranking.format-mini .ranking-item > .highlighted {
      font: var(--typo-text-tiny);
      font-weight: 500; }
  .ranking.format-mini.inverted {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .ranking.format-mini.inverted .ranking-title {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .ranking.format-mini.inverted .ranking-title.divider {
        border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
    .ranking.format-mini.inverted .ranking-item {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      .ranking.format-mini.inverted .ranking-item.divider {
        border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
      .ranking.format-mini.inverted .ranking-item > .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
        .ranking.format-mini.inverted .ranking-item > .name.disabled {
          color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
      .ranking.format-mini.inverted .ranking-item > .highlighted {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
  .ranking.format-mini.transparent {
    background: transparent; }

.ranking.format-sheet,
.ranking.format-standard {
  min-width: var(--ranking-min-width);
  background: var(--ranking-background-color);
  padding: var(--ranking-padding);
  border-radius: var(--ranking-border-radius);
  border-width: var(--ranking-border-width);
  border-style: solid;
  border-color: var(--ranking-border-color); }
  .ranking.format-sheet .ranking-title, .ranking.format-sheet .ranking-item,
  .ranking.format-standard .ranking-title,
  .ranking.format-standard .ranking-item {
    display: inline-flex;
    align-items: center;
    min-width: 100%;
    padding: var(--ranking-item-spacing-v) var(--ranking-item-spacing-h);
    box-sizing: border-box;
    min-height: var(--ranking-item-min-height); }
    .ranking.format-sheet .ranking-title.transparent, .ranking.format-sheet .ranking-item.transparent,
    .ranking.format-standard .ranking-title.transparent,
    .ranking.format-standard .ranking-item.transparent {
      background: transparent; }
    .ranking.format-sheet .ranking-title > *, .ranking.format-sheet .ranking-item > *,
    .ranking.format-standard .ranking-title > *,
    .ranking.format-standard .ranking-item > * {
      box-sizing: content-box;
      margin-inline-end: var(--ranking-item-spacing-h); }
      .ranking.format-sheet .ranking-title > *:last-child, .ranking.format-sheet .ranking-item > *:last-child,
      .ranking.format-standard .ranking-title > *:last-child,
      .ranking.format-standard .ranking-item > *:last-child {
        margin-inline-end: 0; }
    .ranking.format-sheet .ranking-title > .rank, .ranking.format-sheet .ranking-item > .rank,
    .ranking.format-standard .ranking-title > .rank,
    .ranking.format-standard .ranking-item > .rank {
      text-align: center;
      width: var(--ranking-item-rank-width); }
      .ranking.format-sheet .ranking-title > .rank.large, .ranking.format-sheet .ranking-item > .rank.large,
      .ranking.format-standard .ranking-title > .rank.large,
      .ranking.format-standard .ranking-item > .rank.large {
        width: calc(2 * var(--ranking-item-rank-width)); }
    .ranking.format-sheet .ranking-title > .country, .ranking.format-sheet .ranking-title > .flag, .ranking.format-sheet .ranking-title > .logo, .ranking.format-sheet .ranking-item > .country, .ranking.format-sheet .ranking-item > .flag, .ranking.format-sheet .ranking-item > .logo,
    .ranking.format-standard .ranking-title > .country,
    .ranking.format-standard .ranking-title > .flag,
    .ranking.format-standard .ranking-title > .logo,
    .ranking.format-standard .ranking-item > .country,
    .ranking.format-standard .ranking-item > .flag,
    .ranking.format-standard .ranking-item > .logo {
      width: var(--ranking-item-icon-size); }
      .ranking.format-sheet .ranking-title > .country > i, .ranking.format-sheet .ranking-title > .flag > i, .ranking.format-sheet .ranking-title > .logo > i, .ranking.format-sheet .ranking-item > .country > i, .ranking.format-sheet .ranking-item > .flag > i, .ranking.format-sheet .ranking-item > .logo > i,
      .ranking.format-standard .ranking-title > .country > i,
      .ranking.format-standard .ranking-title > .flag > i,
      .ranking.format-standard .ranking-title > .logo > i,
      .ranking.format-standard .ranking-item > .country > i,
      .ranking.format-standard .ranking-item > .flag > i,
      .ranking.format-standard .ranking-item > .logo > i {
        display: block; }
      .ranking.format-sheet .ranking-title > .country > img, .ranking.format-sheet .ranking-title > .flag > img, .ranking.format-sheet .ranking-title > .logo > img, .ranking.format-sheet .ranking-item > .country > img, .ranking.format-sheet .ranking-item > .flag > img, .ranking.format-sheet .ranking-item > .logo > img,
      .ranking.format-standard .ranking-title > .country > img,
      .ranking.format-standard .ranking-title > .flag > img,
      .ranking.format-standard .ranking-title > .logo > img,
      .ranking.format-standard .ranking-item > .country > img,
      .ranking.format-standard .ranking-item > .flag > img,
      .ranking.format-standard .ranking-item > .logo > img {
        display: block;
        width: var(--ranking-item-icon-size);
        height: var(--ranking-item-icon-size); }
    .ranking.format-sheet .ranking-title > .name, .ranking.format-sheet .ranking-item > .name,
    .ranking.format-standard .ranking-title > .name,
    .ranking.format-standard .ranking-item > .name {
      flex: 1;
      min-width: var(--ranking-item-name-min-width);
      width: 0;
      text-align: start; }
    .ranking.format-sheet .ranking-title > .metric, .ranking.format-sheet .ranking-title > .points, .ranking.format-sheet .ranking-item > .metric, .ranking.format-sheet .ranking-item > .points,
    .ranking.format-standard .ranking-title > .metric,
    .ranking.format-standard .ranking-title > .points,
    .ranking.format-standard .ranking-item > .metric,
    .ranking.format-standard .ranking-item > .points {
      width: var(--ranking-item-metric-width);
      text-align: center; }
      .ranking.format-sheet .ranking-title > .metric.large, .ranking.format-sheet .ranking-title > .points.large, .ranking.format-sheet .ranking-item > .metric.large, .ranking.format-sheet .ranking-item > .points.large,
      .ranking.format-standard .ranking-title > .metric.large,
      .ranking.format-standard .ranking-title > .points.large,
      .ranking.format-standard .ranking-item > .metric.large,
      .ranking.format-standard .ranking-item > .points.large {
        width: calc(2 * var(--ranking-item-metric-width)); }
      .ranking.format-sheet .ranking-title > .metric.align-start, .ranking.format-sheet .ranking-title > .points.align-start, .ranking.format-sheet .ranking-item > .metric.align-start, .ranking.format-sheet .ranking-item > .points.align-start,
      .ranking.format-standard .ranking-title > .metric.align-start,
      .ranking.format-standard .ranking-title > .points.align-start,
      .ranking.format-standard .ranking-item > .metric.align-start,
      .ranking.format-standard .ranking-item > .points.align-start {
        text-align: start; }
      .ranking.format-sheet .ranking-title > .metric.align-end, .ranking.format-sheet .ranking-title > .points.align-end, .ranking.format-sheet .ranking-item > .metric.align-end, .ranking.format-sheet .ranking-item > .points.align-end,
      .ranking.format-standard .ranking-title > .metric.align-end,
      .ranking.format-standard .ranking-title > .points.align-end,
      .ranking.format-standard .ranking-item > .metric.align-end,
      .ranking.format-standard .ranking-item > .points.align-end {
        text-align: end; }
      .ranking.format-sheet .ranking-title > .metric.align-left, .ranking.format-sheet .ranking-title > .points.align-left, .ranking.format-sheet .ranking-item > .metric.align-left, .ranking.format-sheet .ranking-item > .points.align-left,
      .ranking.format-standard .ranking-title > .metric.align-left,
      .ranking.format-standard .ranking-title > .points.align-left,
      .ranking.format-standard .ranking-item > .metric.align-left,
      .ranking.format-standard .ranking-item > .points.align-left {
        text-align: start; }
      .ranking.format-sheet .ranking-title > .metric.align-right, .ranking.format-sheet .ranking-title > .points.align-right, .ranking.format-sheet .ranking-item > .metric.align-right, .ranking.format-sheet .ranking-item > .points.align-right,
      .ranking.format-standard .ranking-title > .metric.align-right,
      .ranking.format-standard .ranking-title > .points.align-right,
      .ranking.format-standard .ranking-item > .metric.align-right,
      .ranking.format-standard .ranking-item > .points.align-right {
        text-align: end; }
    .ranking.format-sheet .ranking-title > .points, .ranking.format-sheet .ranking-title > .metric.points, .ranking.format-sheet .ranking-item > .points, .ranking.format-sheet .ranking-item > .metric.points,
    .ranking.format-standard .ranking-title > .points,
    .ranking.format-standard .ranking-title > .metric.points,
    .ranking.format-standard .ranking-item > .points,
    .ranking.format-standard .ranking-item > .metric.points {
      width: var(--ranking-item-points-width); }
      .ranking.format-sheet .ranking-title > .points.large, .ranking.format-sheet .ranking-title > .metric.points.large, .ranking.format-sheet .ranking-item > .points.large, .ranking.format-sheet .ranking-item > .metric.points.large,
      .ranking.format-standard .ranking-title > .points.large,
      .ranking.format-standard .ranking-title > .metric.points.large,
      .ranking.format-standard .ranking-item > .points.large,
      .ranking.format-standard .ranking-item > .metric.points.large {
        width: calc(2 * var(--ranking-item-points-width)); }
    .ranking.format-sheet .ranking-title.divider, .ranking.format-sheet .ranking-item.divider,
    .ranking.format-standard .ranking-title.divider,
    .ranking.format-standard .ranking-item.divider {
      border-bottom: var(--ranking-item-divider-width) solid var(--ranking-item-divider-color); }
  .ranking.format-sheet .ranking-title,
  .ranking.format-standard .ranking-title {
    font: var(--ranking-item-title-font);
    color: var(--ranking-item-title-color); }
    .ranking.format-sheet .ranking-title abbr,
    .ranking.format-standard .ranking-title abbr {
      border-bottom: 0; }
  .ranking.format-sheet .ranking-item,
  .ranking.format-standard .ranking-item {
    font: var(--ranking-item-font); }
    .ranking.format-sheet .ranking-item > .rank,
    .ranking.format-standard .ranking-item > .rank {
      font: var(--ranking-item-rank-font);
      color: var(--ranking-item-rank-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    .ranking.format-sheet .ranking-item > .name,
    .ranking.format-standard .ranking-item > .name {
      font: var(--ranking-item-name-font);
      color: var(--ranking-item-name-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
      .ranking.format-sheet .ranking-item > .name.weighted:not(.disabled),
      .ranking.format-standard .ranking-item > .name.weighted:not(.disabled) {
        font-weight: 700; }
      .ranking.format-sheet .ranking-item > .name.disabled,
      .ranking.format-standard .ranking-item > .name.disabled {
        color: var(--ranking-item-disabled-color); }
    .ranking.format-sheet .ranking-item > .metric,
    .ranking.format-standard .ranking-item > .metric {
      font: var(--ranking-item-metric-font);
      color: var(--ranking-item-metric-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    .ranking.format-sheet .ranking-item > .points, .ranking.format-sheet .ranking-item > .metric.points,
    .ranking.format-standard .ranking-item > .points,
    .ranking.format-standard .ranking-item > .metric.points {
      font: var(--ranking-item-points-font);
      color: var(--ranking-item-points-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
  @media (max-width: 600px) {
    .ranking.format-sheet,
    .ranking.format-standard {
      width: 100%;
      overflow-x: auto; } }
  @media (min-width: 601px) and (max-width: 1280px) {
    .ranking.format-sheet,
    .ranking.format-standard {
      width: 100%;
      overflow-x: auto; } }
  .ranking.format-sheet.inverted,
  .ranking.format-standard.inverted {
    --ranking-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --ranking-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    --ranking-item-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
    --ranking-item-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    --ranking-item-rank-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --ranking-item-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --ranking-item-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3));
    --ranking-item-metric-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --ranking-item-points-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

:root {
  --ranking-min-width: auto;
  --ranking-padding: 0;
  --ranking-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --ranking-border-width: 0;
  --ranking-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --ranking-border-radius: 0;
  --ranking-item-spacing-h: var(--sizing-space-medium);
  --ranking-item-spacing-v: var(--sizing-space-medium);
  --ranking-item-title-font: var(--typo-text-small);
  --ranking-item-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --ranking-item-divider-width: 1px;
  --ranking-item-divider-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  --ranking-item-font: var(--typo-text-medium);
  --ranking-item-rank-font: var(--typo-text-medium);
  --ranking-item-rank-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --ranking-item-name-font: var(--typo-title-small);
  --ranking-item-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --ranking-item-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
  --ranking-item-metric-font: var(--typo-text-medium);
  --ranking-item-metric-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --ranking-item-points-font: var(--typo-text-medium);
  --ranking-item-points-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --ranking-item-min-height: 2rem;
  --ranking-item-rank-width: 2rem;
  --ranking-item-icon-size: 2rem;
  --ranking-item-name-min-width: 7rem;
  --ranking-item-metric-width: 3rem;
  --ranking-item-points-width: 3rem; }

/**
 * Extension to handle an action within a ranking item.
 */
.ranking.format-sheet .ranking-title > .action, .ranking.format-sheet .ranking-title > .expand, .ranking.format-sheet .ranking-item > .action, .ranking.format-sheet .ranking-item > .expand,
.ranking.format-standard .ranking-title > .action,
.ranking.format-standard .ranking-title > .expand,
.ranking.format-standard .ranking-item > .action,
.ranking.format-standard .ranking-item > .expand {
  margin: calc(-1 * var(--ranking-item-spacing-v)) 0;
  width: 2rem;
  text-align: center; }
  .ranking.format-sheet .ranking-title > .action > i, .ranking.format-sheet .ranking-title > .expand > i, .ranking.format-sheet .ranking-item > .action > i, .ranking.format-sheet .ranking-item > .expand > i,
  .ranking.format-standard .ranking-title > .action > i,
  .ranking.format-standard .ranking-title > .expand > i,
  .ranking.format-standard .ranking-item > .action > i,
  .ranking.format-standard .ranking-item > .expand > i {
    display: block; }

/**
 * Extension to handle the display of a container with a ranking item and extra information.
 */
.ranking.format-sheet .ranking-container,
.ranking.format-standard .ranking-container {
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
  padding: var(--ranking-item-spacing-v) var(--ranking-item-spacing-h);
  box-sizing: border-box; }
  .ranking.format-sheet .ranking-container.divider,
  .ranking.format-standard .ranking-container.divider {
    border-bottom: var(--ranking-item-divider-width) solid var(--ranking-item-divider-color); }
  .ranking.format-sheet .ranking-container > *,
  .ranking.format-standard .ranking-container > * {
    padding: 0;
    margin: var(--ranking-item-spacing-v) 0 0 0; }
    .ranking.format-sheet .ranking-container > *:first-child,
    .ranking.format-standard .ranking-container > *:first-child {
      margin: 0; }
  .ranking.format-sheet .ranking-container > .ranking-extra.indent,
  .ranking.format-standard .ranking-container > .ranking-extra.indent {
    margin-inline-start: calc(2rem + var(--ranking-item-spacing-h)); }

/**
 * Extension to display a small history or progression within each ranking item.
 */
.ranking.format-sheet.inverted,
.ranking.format-standard.inverted {
  --ranking-item-history-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
  --ranking-item-history-win-background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
  --ranking-item-history-draw-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
  --ranking-item-history-loss-background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-i_medium));
  --ranking-item-history-forfeit-background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
  --ranking-item-history-bye-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

.ranking.format-sheet .ranking-title > .history, .ranking.format-sheet .ranking-item > .history,
.ranking.format-standard .ranking-title > .history,
.ranking.format-standard .ranking-item > .history {
  display: inline-grid;
  position: relative;
  grid-auto-flow: column;
  width: 0;
  min-width: 5rem;
  text-align: start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }
  @media (max-width: 600px) {
    .ranking.format-sheet .ranking-title > .history, .ranking.format-sheet .ranking-item > .history,
    .ranking.format-standard .ranking-title > .history,
    .ranking.format-standard .ranking-item > .history {
      min-width: 3rem; } }
  .ranking.format-sheet .ranking-title > .history.history-1, .ranking.format-sheet .ranking-item > .history.history-1,
  .ranking.format-standard .ranking-title > .history.history-1,
  .ranking.format-standard .ranking-item > .history.history-1 {
    width: calc(1 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-2, .ranking.format-sheet .ranking-item > .history.history-2,
  .ranking.format-standard .ranking-title > .history.history-2,
  .ranking.format-standard .ranking-item > .history.history-2 {
    width: calc(2 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-3, .ranking.format-sheet .ranking-item > .history.history-3,
  .ranking.format-standard .ranking-title > .history.history-3,
  .ranking.format-standard .ranking-item > .history.history-3 {
    width: calc(3 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-4, .ranking.format-sheet .ranking-item > .history.history-4,
  .ranking.format-standard .ranking-title > .history.history-4,
  .ranking.format-standard .ranking-item > .history.history-4 {
    width: calc(4 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-5, .ranking.format-sheet .ranking-item > .history.history-5,
  .ranking.format-standard .ranking-title > .history.history-5,
  .ranking.format-standard .ranking-item > .history.history-5 {
    width: calc(5 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-6, .ranking.format-sheet .ranking-item > .history.history-6,
  .ranking.format-standard .ranking-title > .history.history-6,
  .ranking.format-standard .ranking-item > .history.history-6 {
    width: calc(6 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-7, .ranking.format-sheet .ranking-item > .history.history-7,
  .ranking.format-standard .ranking-title > .history.history-7,
  .ranking.format-standard .ranking-item > .history.history-7 {
    width: calc(7 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-8, .ranking.format-sheet .ranking-item > .history.history-8,
  .ranking.format-standard .ranking-title > .history.history-8,
  .ranking.format-standard .ranking-item > .history.history-8 {
    width: calc(8 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-9, .ranking.format-sheet .ranking-item > .history.history-9,
  .ranking.format-standard .ranking-title > .history.history-9,
  .ranking.format-standard .ranking-item > .history.history-9 {
    width: calc(9 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history.history-10, .ranking.format-sheet .ranking-item > .history.history-10,
  .ranking.format-standard .ranking-title > .history.history-10,
  .ranking.format-standard .ranking-item > .history.history-10 {
    width: calc(10 * (var(--ranking-item-history-size) + var(--ranking-item-history-spacing)) - var(--ranking-item-history-spacing));
    min-width: auto; }
  .ranking.format-sheet .ranking-title > .history > .result, .ranking.format-sheet .ranking-item > .history > .result,
  .ranking.format-standard .ranking-title > .history > .result,
  .ranking.format-standard .ranking-item > .history > .result {
    font: var(--ranking-item-history-font);
    width: var(--ranking-item-history-size);
    text-align: center;
    padding: 0;
    margin-inline-end: var(--ranking-item-history-spacing);
    color: var(--ranking-item-history-color); }
    .ranking.format-sheet .ranking-title > .history > .result:last-child, .ranking.format-sheet .ranking-item > .history > .result:last-child,
    .ranking.format-standard .ranking-title > .history > .result:last-child,
    .ranking.format-standard .ranking-item > .history > .result:last-child {
      margin-inline-end: 0; }
    .ranking.format-sheet .ranking-title > .history > .result.win, .ranking.format-sheet .ranking-item > .history > .result.win,
    .ranking.format-standard .ranking-title > .history > .result.win,
    .ranking.format-standard .ranking-item > .history > .result.win {
      background: var(--ranking-item-history-win-background); }
    .ranking.format-sheet .ranking-title > .history > .result.draw, .ranking.format-sheet .ranking-item > .history > .result.draw,
    .ranking.format-standard .ranking-title > .history > .result.draw,
    .ranking.format-standard .ranking-item > .history > .result.draw {
      background: var(--ranking-item-history-draw-background); }
    .ranking.format-sheet .ranking-title > .history > .result.loss, .ranking.format-sheet .ranking-item > .history > .result.loss,
    .ranking.format-standard .ranking-title > .history > .result.loss,
    .ranking.format-standard .ranking-item > .history > .result.loss {
      background: var(--ranking-item-history-loss-background); }
    .ranking.format-sheet .ranking-title > .history > .result.forfeit, .ranking.format-sheet .ranking-item > .history > .result.forfeit,
    .ranking.format-standard .ranking-title > .history > .result.forfeit,
    .ranking.format-standard .ranking-item > .history > .result.forfeit {
      background: var(--ranking-item-history-forfeit-background); }
    .ranking.format-sheet .ranking-title > .history > .result.bye, .ranking.format-sheet .ranking-item > .history > .result.bye,
    .ranking.format-standard .ranking-title > .history > .result.bye,
    .ranking.format-standard .ranking-item > .history > .result.bye {
      background: var(--ranking-item-history-bye-background); }

.ranking.format-sheet .ranking-title > .progress, .ranking.format-sheet .ranking-item > .progress,
.ranking.format-standard .ranking-title > .progress,
.ranking.format-standard .ranking-item > .progress {
  width: 1rem;
  text-align: center; }

:root {
  --ranking-item-history-font: var(--typo-text-medium);
  --ranking-item-history-size: 1.5rem;
  --ranking-item-history-spacing: var(--sizing-space-tiny);
  --ranking-item-history-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --ranking-item-history-win-background: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --ranking-item-history-draw-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --ranking-item-history-loss-background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --ranking-item-history-forfeit-background: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --ranking-item-history-bye-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.ranking.format-sheet,
.ranking.format-standard {
  --ranking-hover-background-color: var(--ranking-background-color); }
  .ranking.format-sheet.hover:hover,
  .ranking.format-standard.hover:hover {
    cursor: pointer;
    border-color: var(--ranking-hover-border-color);
    background-color: var(--ranking-hover-background-color); }
  .ranking.format-sheet .ranking-item > .name.hover:hover,
  .ranking.format-standard .ranking-item > .name.hover:hover {
    cursor: pointer;
    color: var(--ranking-item-name-hover-color); }
  .ranking.format-sheet .ranking-item > .name.hover > a,
  .ranking.format-standard .ranking-item > .name.hover > a {
    color: inherit; }
  .ranking.format-sheet.inverted,
  .ranking.format-standard.inverted {
    --ranking-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
    --ranking-item-name-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

:root {
  --ranking-hover-border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --ranking-item-name-hover-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }

/**
 * Extension to display a ranking in a smaller format (instead of using a different format)
 */
.ranking.format-sheet.small,
.ranking.format-standard.small {
  --ranking-item-spacing-v: var(--sizing-space-tiny);
  --ranking-item-spacing-h: var(--sizing-space-tiny);
  --ranking-item-title-font: var(--typo-text-tiny);
  --ranking-item-font: var(--typo-text-small);
  --ranking-item-rank-font: var(--typo-text-small);
  --ranking-item-name-font: var(--typo-text-small);
  --ranking-item-metric-font: var(--typo-text-small);
  --ranking-item-points-font: var(--typo-text-small);
  --ranking-item-min-height: auto;
  --ranking-item-rank-width: 1.5rem;
  --ranking-item-icon-size: 1rem;
  --ranking-item-name-min-width: auto;
  --ranking-item-metric-min-width: 1rem;
  --ranking-item-points-min-width: 1rem;
  min-width: 7rem; }

.ranking.format-sheet,
.ranking.format-standard {
  --ranking-title-spacing: var(--ranking-padding); }
  .ranking.format-sheet .title,
  .ranking.format-standard .title {
    font: var(--ranking-title-font);
    color: var(--ranking-title-color);
    margin-bottom: var(--ranking-title-spacing); }
    .ranking.format-sheet .title .secondary,
    .ranking.format-standard .title .secondary {
      font: var(--ranking-title-secondary-font);
      color: var(--ranking-title-secondary-color); }
  .ranking.format-sheet.inverted,
  .ranking.format-standard.inverted {
    --ranking-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --ranking-title-secondary-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

:root {
  --ranking-title-font: var(--typo-title-large);
  --ranking-title-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --ranking-title-secondary-font: var(--typo-title-small);
  --ranking-title-secondary-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }

/**
 * registration domain components
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Participant shown in the box format.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.format-box {
  display: flex;
  align-items: center;
  padding: var(--sizing-space-medium);
  border-radius: var(--sizing-space-tiny);
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .participant.format-box.hover:hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .participant.format-box > .image {
    display: flex;
    align-items: center;
    justify-content: center; }
    .participant.format-box > .image > * {
      margin-inline-end: var(--sizing-space-medium); }
    .participant.format-box > .image > .participant.logo.none, .participant.format-box > .image .participant.country.none {
      margin-inline-end: 0; }
    .participant.format-box > .image > .participant.country i {
      display: block; }
  .participant.format-box > .identity {
    flex: 1;
    min-width: 0; }
    .participant.format-box > .identity > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .participant.format-box > .identity > .description {
      color: var(--color-standard); }
    .participant.format-box > .identity > .name {
      font: var(--typo-title-small); }
    .participant.format-box > .identity > .description {
      font: var(--typo-text-tiny); }
  .participant.format-box.hover:hover {
    cursor: pointer; }
  .participant.format-box.inverted {
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .participant.format-box.inverted.hover:hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .participant.format-box.inverted > .identity > .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .participant.format-box.inverted > .identity > .description {
      color: var(--color-standard); }

/**
 * Participant shown in the header format.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.format-header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .participant.format-header > .name {
    font: var(--typo-title-huge); }
  .participant.format-header > * {
    margin-inline-end: 0; }
    .participant.format-header > *:not(:last-child) {
      margin-inline-end: var(--sizing-space-large); }

/**
 * Participant logo.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.participant.logo {
  width: 4rem;
  height: 4rem; }
  .participant.logo > img {
    width: 4rem;
    height: 4rem; }
  .participant.logo.small {
    width: 2rem;
    height: 2rem; }
    .participant.logo.small > img {
      width: 2rem;
      height: 2rem; }
  .participant.logo.large {
    width: 8rem;
    height: 8rem; }
    .participant.logo.large > img {
      width: 8rem;
      height: 8rem; }
  .participant.logo.none {
    width: 0; }

/**
 * seeding mini format styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.registration.format-row {
  display: flex;
  align-items: center;
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  user-select: none;
  font: var(--typo-text-small);
  min-height: 1.75rem;
  padding: 0 0.5rem;
  cursor: initial; }
  .registration.format-row .row-text {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .registration.format-row.divider {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .registration.format-row.disabled, .registration.format-row.disabled .row-text {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .registration.format-row.hover:not(.selected):hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .registration.format-row.selected {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .registration.format-row.title {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
    cursor: auto; }
    .registration.format-row.title .row-text {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .registration.format-row > .status.pending {
    color: var(--color-standard); }
  .registration.format-row > .status.pending.disabled {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .registration.format-row > .status.accepted {
    color: var(--color-success); }
  .registration.format-row > .status.accepted.disabled {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .registration.format-row > .status.refused {
    color: var(--color-alert); }
  .registration.format-row > .status.refused.disabled {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .registration.format-row > .status.cancelled {
    color: var(--color-alert); }
  .registration.format-row > .status.cancelled.disabled {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .registration.format-row.hover {
    cursor: pointer; }
  .registration.format-row.spacing-large {
    padding: var(--sizing-space-medium); }
  .registration.format-row > * {
    box-sizing: content-box;
    padding: 0.5rem 0;
    user-select: none;
    margin-inline-start: 0; }
    .registration.format-row > *:not(:first-child) {
      margin-inline-start: var(--sizing-space-small); }
  .registration.format-row .identity {
    flex: 10;
    display: flex;
    align-items: center; }
    .registration.format-row .identity > * {
      box-sizing: content-box;
      margin-inline-start: var(--sizing-space-small); }
      .registration.format-row .identity > *:first-child {
        margin-inline-start: 0; }
    .registration.format-row .identity .image {
      display: flex;
      align-items: center;
      justify-content: center; }
      .registration.format-row .identity .image.logo > img {
        width: 1.2em;
        height: 1.2em; }
      .registration.format-row .identity .image.logo.large > img {
        width: 2.5em;
        height: 2.5em; }
    .registration.format-row .identity > .information {
      text-align: start;
      width: 0; }
      .registration.format-row .identity > .information > .description {
        font: var(--typo-text-tiny); }
  .registration.format-row .status {
    display: flex;
    align-items: center;
    width: 8rem; }
    .registration.format-row .status > * {
      box-sizing: content-box; }
      .registration.format-row .status > *:first-child {
        margin-inline-start: 0; }
    .registration.format-row .status > .information {
      text-align: start;
      width: 0; }
  .registration.format-row .email {
    flex: 10;
    display: flex;
    align-items: center;
    width: 0; }
    .registration.format-row .email > * {
      box-sizing: content-box; }
      .registration.format-row .email > *:first-child {
        margin-inline-start: 0; }
    .registration.format-row .email > .information {
      text-align: start;
      width: 0; }
  .registration.format-row .date {
    display: flex;
    align-items: center;
    width: 12rem; }
    .registration.format-row .date > * {
      box-sizing: content-box; }
      .registration.format-row .date > *:first-child {
        margin-inline-start: 0; }
    .registration.format-row .date > .information {
      text-align: start;
      width: 0; }
  .registration.format-row .checkbox {
    width: 1rem;
    align-items: center;
    align-self: center; }
    .registration.format-row .checkbox .form-row, .registration.format-row .checkbox .form-row .form-field {
      margin: 0;
      padding: 0; }
  .registration.format-row .information {
    flex: 10;
    text-align: left;
    width: 0; }
  .registration.format-row .metric {
    width: 5rem; }
    .registration.format-row .metric.small {
      width: 3rem; }
    .registration.format-row .metric.large {
      width: 10rem; }
    .registration.format-row .metric.align-start {
      text-align: start; }
    .registration.format-row .metric.align-end {
      text-align: end; }
    .registration.format-row .metric.align-left {
      text-align: start; }
    .registration.format-row .metric.align-right {
      text-align: end; }
  .registration.format-row .actions {
    padding: 0;
    width: 8rem; }
  .registration.format-row.divider {
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .registration.format-row.divider:last-child {
      border-bottom: none; }
  .registration.format-row.disabled {
    font-weight: 400;
    cursor: not-allowed; }
  .registration.format-row.hover {
    cursor: pointer; }
    .registration.format-row.hover.disabled {
      cursor: not-allowed; }
  .registration.format-row.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .registration.format-row.inverted .row-text {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .registration.format-row.inverted.divider {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
    .registration.format-row.inverted.disabled, .registration.format-row.inverted.disabled .row-text {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .registration.format-row.inverted.hover:not(.selected):hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .registration.format-row.inverted.selected {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .registration.format-row.inverted.title {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
      cursor: auto; }
      .registration.format-row.inverted.title .row-text {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
    .registration.format-row.inverted > .status.pending {
      color: var(--color-standard); }
    .registration.format-row.inverted > .status.pending.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .registration.format-row.inverted > .status.accepted {
      color: var(--color-success); }
    .registration.format-row.inverted > .status.accepted.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .registration.format-row.inverted > .status.refused {
      color: var(--color-alert); }
    .registration.format-row.inverted > .status.refused.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .registration.format-row.inverted > .status.cancelled {
      color: var(--color-alert); }
    .registration.format-row.inverted > .status.cancelled.disabled {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }

@media (min-width: 601px) and (max-width: 1280px) {
  .registration.format-row > *.tablet-hide, .registration.format-row > .identity > .image.tablet-hide {
    display: none; } }

@media (max-width: 600px) {
  .registration.format-row > *.mobile-hide,
  .registration.format-row > .identity > .image.mobile-hide,
  .registration.format-row > .status span.mobile-hide {
    display: none; }
  .registration.format-row .actions.secondary.large {
    width: auto; }
  .registration.format-row > .status {
    width: 2rem; }
    .registration.format-row > .status .information {
      text-align: center; }
  .registration.format-row .actions {
    width: 2.5rem; }
  .registration.format-row.small > .status {
    width: 6rem; }
  .registration.format-row.mobile-hide {
    display: none; } }

/**
 * Includes all result styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Result medal component.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.medal {
  display: inline-block;
  font: 700 0.75rem/1.3em "Noto Sans";
  width: 1.3em;
  height: 1.3em;
  text-align: center;
  border-radius: 100%;
  border: 1px solid transparent;
  text-shadow: -1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1), 1px 0 rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-color: rgba(0, 0, 0, 0.1); }
  .medal.medal-1 {
    background: var(--color-gold); }
  .medal.medal-2 {
    background: var(--color-silver); }
  .medal.medal-3 {
    background: var(--color-bronze); }
  .medal.inverted {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
    border-color: rgba(255, 255, 255, 0.3);
    text-shadow: none; }
    .medal.inverted.medal-1 {
      background: var(--color-gold); }
    .medal.inverted.medal-2 {
      background: var(--color-silver); }
    .medal.inverted.medal-3 {
      background: var(--color-bronze); }

/**
 * seeding domain components
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * seeding mini format styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.seeding {
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  min-width: 7rem; }
  .seeding .seeding-item {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .seeding .seeding-item.divider {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .seeding .seeding-item .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
    .seeding .seeding-item.disabled,
    .seeding .seeding-item.disabled .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .seeding .seeding-item.header {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
    .seeding .seeding-item.header .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .seeding.hover .seeding-item:not(.header):hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .seeding .seeding-item {
    display: flex;
    align-items: center;
    font: var(--typo-text-small);
    min-height: 1rem;
    padding: var(--sizing-space-tiny); }
    .seeding .seeding-item > * {
      box-sizing: content-box;
      margin-inline-start: var(--sizing-space-tiny); }
      .seeding .seeding-item > *:first-child {
        margin-inline-start: 0; }
    .seeding .seeding-item .number {
      width: 2rem;
      text-align: center; }
      .seeding .seeding-item .number.large {
        width: 3rem; }
    .seeding .seeding-item .name {
      flex: 10;
      text-align: start;
      width: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    .seeding .seeding-item .actions.primary.size-1 {
      width: 2rem; }
    .seeding .seeding-item .actions.secondary.size-1 {
      width: 1.75rem; }
    .seeding .seeding-item .actions.primary.size-2 {
      width: 4rem; }
    .seeding .seeding-item .actions.secondary.size-2 {
      width: 3.5rem; }
    .seeding .seeding-item .actions.primary.size-3 {
      width: 6rem; }
    .seeding .seeding-item .actions.secondary.size-3 {
      width: 5.25rem; }
    .seeding .seeding-item .actions.primary.size-4 {
      width: 8rem; }
    .seeding .seeding-item .actions.secondary.size-4 {
      width: 7rem; }
    .seeding .seeding-item .actions.primary.size-5 {
      width: 10rem; }
    .seeding .seeding-item .actions.secondary.size-5 {
      width: 8.75rem; }
    .seeding .seeding-item .actions.primary.size-6 {
      width: 12rem; }
    .seeding .seeding-item .actions.secondary.size-6 {
      width: 10.5rem; }
    .seeding .seeding-item .actions.primary.size-7 {
      width: 14rem; }
    .seeding .seeding-item .actions.secondary.size-7 {
      width: 12.25rem; }
    .seeding .seeding-item .actions.primary.size-8 {
      width: 16rem; }
    .seeding .seeding-item .actions.secondary.size-8 {
      width: 14rem; }
    .seeding .seeding-item .actions.primary.size-9 {
      width: 18rem; }
    .seeding .seeding-item .actions.secondary.size-9 {
      width: 15.75rem; }
    .seeding .seeding-item .actions.primary.size-10 {
      width: 20rem; }
    .seeding .seeding-item .actions.secondary.size-10 {
      width: 17.5rem; }
    .seeding .seeding-item .actions.primary button {
      width: 2rem;
      text-align: center;
      padding-top: 0;
      padding-bottom: 0; }
    .seeding .seeding-item .actions.secondary button {
      width: 1.75rem;
      padding: 0; }
    .seeding .seeding-item.divider {
      border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    .seeding .seeding-item.disabled {
      font-weight: 400;
      cursor: not-allowed; }
  .seeding.hover .seeding-item {
    cursor: pointer; }
    .seeding.hover .seeding-item.disabled {
      cursor: not-allowed; }
  .seeding.light .seeding-item .actions.secondary button {
    opacity: 0;
    transition: all 0ms; }
    .seeding.light .seeding-item .actions.secondary button.always-visible {
      opacity: 1; }
  .seeding.light .seeding-item:hover .actions.secondary button {
    opacity: 1; }
  .seeding.light .seeding-item.disabled:hover .actions.secondary button {
    opacity: 0; }
    .seeding.light .seeding-item.disabled:hover .actions.secondary button.always-visible {
      opacity: 1; }
  .seeding.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .seeding.inverted .seeding-item {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
      .seeding.inverted .seeding-item.divider {
        border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4)); }
      .seeding.inverted .seeding-item .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
      .seeding.inverted .seeding-item.disabled,
      .seeding.inverted .seeding-item.disabled .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high3)); }
    .seeding.inverted .seeding-item.header {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
      .seeding.inverted .seeding-item.header .name {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }
    .seeding.inverted.hover .seeding-item:not(.header):hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

@media (max-width: 600px) {
  .actions.secondary button {
    opacity: 1 !important; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .actions.secondary button {
    opacity: 1 !important; } }

/**
 * Includes all share styling
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
/**
 * Social Network icons with colors.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.fa-twitter.colored {
  color: #1ca0f2; }

.fa-twitter.hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .fa-twitter.hover:hover {
    color: #1ca0f2; }

.fa-facebook-square.colored, .fa-facebook.colored {
  color: #3c5a9a; }

.fa-facebook-square.hover, .fa-facebook.hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .fa-facebook-square.hover:hover, .fa-facebook.hover:hover {
    color: #3c5a9a; }

.fa-reddit.colored {
  color: #ff4400; }

.fa-reddit.hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .fa-reddit.hover:hover {
    color: #ff4400; }

.fa-vk.colored {
  color: #6282a7; }

.fa-vk.hover {
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .fa-vk.hover:hover {
    color: #6282a7; }

@media (max-width: 600px) {
  #preview-navigator,
  #preview-schedule,
  #preview-stage {
    overflow-x: auto;
    text-align: center; } }

@media (min-width: 601px) and (max-width: 1280px) {
  #preview-navigator,
  #preview-schedule,
  #preview-stage {
    overflow-x: auto;
    text-align: center; } }

/**
 * sponsor display
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
/**
 * Display the logo of a sponsor
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
.sponsor.format-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box; }
  .sponsor.format-logo, .sponsor.format-logo.size-medium {
    width: 320px;
    height: 180px; }
  .sponsor.format-logo.size-small {
    width: 160px;
    height: 90px; }
  .sponsor.format-logo.size-tiny {
    width: 96px;
    height: 54px; }
  .sponsor.format-logo.bordered {
    border-radius: var(--sizing-space-tiny);
    padding: var(--sizing-space-tiny);
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
    .sponsor.format-logo.bordered.hover:hover {
      border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .sponsor.format-logo.bordered.inverted {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
      .sponsor.format-logo.bordered.inverted.hover:hover {
        border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }
  .sponsor.format-logo > img {
    display: block; }

/**
 * statistics components
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
/**
 * Statistics format table
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.stats.format-table > .head:not(:last-child), .stats.format-table > .row:not(:last-child) {
  border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

.stats.format-table > .head {
  display: inline-flex;
  min-width: 100%;
  font: var(--typo-text-tiny);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  padding: 0.5rem 0.25rem; }
  .stats.format-table > .head abbr {
    border-bottom: 0; }

.stats.format-table > .row {
  display: inline-flex;
  min-width: 100%;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  min-height: 2rem;
  padding: 0.75rem 0.25rem;
  font: var(--typo-label-medium); }
  .stats.format-table > .row > .logo > .image {
    display: block;
    background-size: cover;
    background-position: center;
    border-radius: 666px;
    border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
  .stats.format-table > .row > .identity > .primary {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
    font: var(--typo-title-small);
    font-weight: 700; }
  .stats.format-table > .row > .identity > .secondary {
    font: var(--typo-label-tiny);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .stats.format-table > .row > .metric {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .stats.format-table > .row > .metric.highlighted {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
      font-weight: 700; }

.stats.format-table .logo {
  min-width: 3rem;
  margin-inline-end: var(--sizing-space-medium); }
  .stats.format-table .logo > .image {
    width: 3rem;
    height: 3rem;
    display: block;
    box-sizing: border-box; }

.stats.format-table .identity {
  flex: 10;
  min-width: 10rem; }

.stats.format-table .metric {
  flex: 1;
  min-width: 5rem;
  text-align: center; }

.stats.format-table .list-1 {
  width: 2.0625rem; }

.stats.format-table .list-2 {
  width: 4.125rem; }

.stats.format-table .list-3 {
  width: 6.1875rem; }

.stats.format-table .list-4 {
  width: 8.25rem; }

.stats.format-table .list-5 {
  width: 10.3125rem; }

.stats.format-table .list-6 {
  width: 12.375rem; }

.stats.format-table .list-7 {
  width: 14.4375rem; }

.stats.format-table .list-8 {
  width: 16.5rem; }

.stats.format-table .list-9 {
  width: 18.5625rem; }

.stats.format-table .list-10 {
  width: 20.625rem; }

.stats.format-table .list {
  display: flex; }
  .stats.format-table .list:not(:last-child) {
    margin-inline-end: var(--sizing-space-small); }
  .stats.format-table .list > .item {
    width: 2rem; }
    .stats.format-table .list > .item:not(:last-child) {
      margin-inline-end: 0.0625rem; }
    .stats.format-table .list > .item > img {
      width: 2rem;
      height: 2rem; }

@media (max-width: 600px) {
  .stats.format-table {
    width: 100%;
    overflow-x: auto; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .stats.format-table {
    width: 100%;
    overflow-x: auto; } }

/**
 * Statistics format timeline
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.stats.format-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 7.25rem; }
  .stats.format-timeline:after {
    content: " ";
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3));
    width: 100%;
    height: 0.25rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 3.5rem; }
  .stats.format-timeline > .opponents {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around; }
    .stats.format-timeline > .opponents > .opponent {
      font: var(--typo-title-small); }
      .stats.format-timeline > .opponents > .opponent.opponent-1 {
        margin-bottom: 1rem; }
      .stats.format-timeline > .opponents > .opponent.opponent-2 {
        margin-top: 1rem; }
  .stats.format-timeline > .timeline {
    display: flex;
    height: 100%; }
    .stats.format-timeline > .timeline > .event:not(:last-child) {
      margin-inline-end: 0.5rem; }
    .stats.format-timeline > .timeline > .event.opponent-1:after {
      border-bottom-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.opponent-2:before {
      border-top-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.action.opponent-1:after {
      border-bottom-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.action.opponent-2:before {
      border-top-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.alert.opponent-1:after {
      border-bottom-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.alert.opponent-2:before {
      border-top-color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.warning.opponent-1:after {
      border-bottom-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.warning.opponent-2:before {
      border-top-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.success.opponent-1:after {
      border-bottom-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.success.opponent-2:before {
      border-top-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.admin.opponent-1:after {
      border-bottom-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.admin.opponent-2:before {
      border-top-color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
    .stats.format-timeline > .timeline > .event.opponent-1 {
      align-self: flex-start; }
      .stats.format-timeline > .timeline > .event.opponent-1:after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-inline-start: 0.5rem solid transparent;
        border-inline-end: 0.5rem solid transparent;
        border-bottom: 0.5rem solid;
        margin: 0.5rem auto auto; }
    .stats.format-timeline > .timeline > .event.opponent-2 {
      align-self: flex-end; }
      .stats.format-timeline > .timeline > .event.opponent-2:before {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-inline-start: 0.5rem solid transparent;
        border-inline-end: 0.5rem solid transparent;
        border-top: 0.5rem solid;
        margin: auto auto 0.5rem; }
    .stats.format-timeline > .timeline > .event > .image {
      display: block;
      height: 2.5rem;
      width: 2.5rem;
      background-size: cover;
      background-position: center;
      border-radius: 666px; }

/**
 * Statistics format versus
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.stats.format-versus > .row {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 1rem; }
  .stats.format-versus > .row:not(:last-child) {
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .stats.format-versus > .row > .label {
    width: 20%;
    text-align: center;
    font: var(--typo-label-medium);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .stats.format-versus > .row > .value {
    flex: 1;
    text-align: center;
    font: var(--typo-text-large);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
    font-weight: 700; }
  .stats.format-versus > .row > .images {
    display: flex;
    align-items: center;
    width: 8.5rem; }
    .stats.format-versus > .row > .images.start {
      justify-content: flex-start; }
    .stats.format-versus > .row > .images.end {
      justify-content: flex-end; }
    .stats.format-versus > .row > .images.left {
      justify-content: flex-start; }
    .stats.format-versus > .row > .images.right {
      justify-content: flex-end; }
    .stats.format-versus > .row > .images > .image {
      display: block;
      height: 2.5rem;
      width: 2.5rem;
      background-size: cover;
      background-position: center; }
      .stats.format-versus > .row > .images > .image.round {
        border-radius: 666px;
        border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
      .stats.format-versus > .row > .images > .image:not(:last-child) {
        margin-inline-end: 0.5rem; }

/**
 * Includes all elements related to the tournament structure
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Stage mini styling
 *
 * @author Grégoire Richet <gregoire.richet@webedia-group.com>
 */
.structure-stage.format-mini {
  border: 1px solid transparent;
  padding: var(--sizing-space-large);
  border-radius: var(--sizing-space-tiny);
  height: calc(100% - var(--sizing-space-large)*2);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .structure-stage.format-mini.transparent {
    background: transparent; }
  .structure-stage.format-mini .item {
    color: var(--color-standard); }
  .structure-stage.format-mini.hover:hover {
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .structure-stage.format-mini > .title {
    font: var(--typo-title-small); }
  .structure-stage.format-mini > .title + * {
    margin-top: var(--sizing-space-large); }
  .structure-stage.format-mini.hover:hover {
    cursor: pointer; }
  .structure-stage.format-mini.inverted {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .structure-stage.format-mini.inverted.transparent {
      background: transparent; }
    .structure-stage.format-mini.inverted .item {
      color: var(--color-standard); }
    .structure-stage.format-mini.inverted.hover:hover {
      border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

/**
 * stage row format styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.structure-stage.format-row {
  display: flex;
  align-items: center;
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  font: var(--typo-label-tiny);
  padding: var(--sizing-space-medium);
  min-width: 13rem; }
  .structure-stage.format-row .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .structure-stage.format-row > * {
    box-sizing: content-box; }
    .structure-stage.format-row > *:not(:last-child) {
      margin-inline-end: var(--sizing-space-medium); }
  .structure-stage.format-row > .description {
    flex: 1; }
    .structure-stage.format-row > .description > .name {
      font: var(--typo-title-tiny);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .structure-stage.format-row > .description > .type {
      font: var(--typo-label-tiny);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
  .structure-stage.format-row .size {
    width: 6rem; }
  .structure-stage.format-row .status {
    width: 5.5rem; }
  .structure-stage.format-row .actions {
    width: 2rem;
    text-align: end; }
    .structure-stage.format-row .actions button {
      padding: 0; }
  .structure-stage.format-row.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .structure-stage.format-row.inverted .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

@media (max-width: 600px) {
  .structure-stage.format-row > .size {
    display: none; } }

/**
 * Includes all elements related to the tournament group structure
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Group mini styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.structure-group.format-mini {
  border: 1px solid transparent;
  padding: var(--sizing-space-large);
  border-radius: var(--sizing-space-tiny);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .structure-group.format-mini.transparent {
    background-color: transparent; }
  .structure-group.format-mini.hover:hover {
    border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .structure-group.format-mini > .title {
    font: var(--typo-title-medium); }
  .structure-group.format-mini > .title + * {
    margin-top: var(--sizing-space-large); }
  .structure-group.format-mini.hover:hover {
    cursor: pointer; }
  .structure-group.format-mini.inverted {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high4));
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .structure-group.format-mini.inverted.transparent {
      background-color: transparent; }
    .structure-group.format-mini.inverted.hover:hover {
      border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium)); }

/**
 * Includes all elements related to the tournament group structure
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Round mini styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.structure-round.format-mini {
  box-sizing: border-box;
  min-width: var(--structure-round-mini-min-width);
  padding: var(--structure-round-mini-spacing);
  border-radius: var(--structure-round-mini-border-radius);
  border-width: var(--structure-round-mini-border-width);
  border-style: solid;
  border-color: var(--structure-round-mini-border-color);
  color: var(--structure-round-mini-color);
  background-color: var(--structure-round-mini-background-color); }
  .structure-round.format-mini > .title {
    text-align: center;
    font: var(--structure-round-mini-title-font); }
    .structure-round.format-mini > .title.weighted {
      font-weight: var(--structure-round-mini-title-weight); }
  .structure-round.format-mini > .title + * {
    font: var(--structure-round-mini-item-font);
    margin-top: var(--structure-round-mini-spacing); }
  .structure-round.format-mini.inverted {
    --structure-round-mini-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
    --structure-round-mini-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5));
    --structure-round-mini-border-color: transparent; }
  .structure-round.format-mini.transparent {
    --structure-round-mini-background-color: transparent; }

:root {
  --structure-round-mini-min-width: 12rem;
  --structure-round-mini-spacing: var(--sizing-space-medium);
  --structure-round-mini-border-radius: var(--sizing-space-tiny);
  --structure-round-mini-border-width: 0;
  --structure-round-mini-border-color: transparent;
  --structure-round-mini-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --structure-round-mini-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --structure-round-mini-title-font: var(--typo-label-small);
  --structure-round-mini-title-weight: 700;
  --structure-round-mini-item-font: var(--typo-label-tiny); }

/**
 * Includes all tournament styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Tournament shown in the row format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.tournament.format-context {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .tournament.format-context > .back {
    position: absolute;
    top: var(--sizing-space-tiny);
    height: 4rem;
    display: flex;
    align-items: center; }
  .tournament.format-context > .name {
    flex: 1;
    text-align: end; }
  .tournament.format-context > .image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--sizing-space-tiny) var(--sizing-space-huge);
    min-height: 4rem;
    min-width: 4rem; }
  .tournament.format-context > .context {
    flex: 1; }

/**
 * Tournament shown in the row format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.tournament.format-header {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  font: var(--typo-text-medium);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  min-block-size: 12rem;
  gap: var(--sizing-space-large); }
  .tournament.format-header > .image img {
    inline-size: 12rem;
    block-size: 12rem; }
  .tournament.format-header > .information {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sizing-space-medium); }
    .tournament.format-header > .information > .context {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0 var(--sizing-space-large); }
      .tournament.format-header > .information > .context > .featured {
        font: var(--typo-text-small);
        color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1)); }
    .tournament.format-header > .information > .name {
      font: var(--typo-display-small);
      margin: 0; }

@media (max-width: 600px) {
  .tournament.format-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-block-size: inherit; }
    .tournament.format-header > .image {
      display: none; }
    .tournament.format-header > .information {
      padding-block: 0 var(--sizing-space-huge);
      padding-inline: 0;
      inline-size: 100%;
      text-align: center; }
      .tournament.format-header > .information .context {
        justify-content: center; }
      .tournament.format-header > .information .name {
        font: var(--typo-title-huge); } }

@media (min-width: 601px) and (max-width: 1280px) {
  .tournament.format-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-block-size: inherit; }
    .tournament.format-header > .image {
      display: none; }
    .tournament.format-header > .information {
      padding-block: 0 var(--sizing-space-huge);
      padding-inline: 0;
      inline-size: 100%;
      text-align: center; }
      .tournament.format-header > .information .context {
        justify-content: center; } }

/**
 * Tournament image.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.tournament.logo > img {
  display: block;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-radius: var(--sizing-space-tiny); }

.tournament.logo.tiny > img {
  width: 2rem;
  height: 2rem;
  padding: 1px; }

.tournament.logo.small > img {
  width: 3rem;
  height: 3rem;
  padding: 1px; }

.tournament.logo.medium > img {
  width: 4rem;
  height: 4rem;
  padding: var(--sizing-space-small); }

.tournament.logo.large > img {
  width: 8rem;
  height: 8rem;
  padding: var(--sizing-space-small); }

.tournament.logo.huge > img {
  width: 16rem;
  height: 16rem;
  padding: var(--sizing-space-medium); }

/**
 * Tournament shown in the row format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.tournament.format-row {
  display: flex;
  position: relative;
  min-inline-size: var(--tournament-row-min-width);
  align-items: center;
  background: var(--tournament-row-background);
  border: var(--tournament-row-border-width) solid var(--tournament-row-border-color);
  border-radius: var(--tournament-row-border-radius);
  padding: calc(var(--tournament-row-padding) / 2); }
  .tournament.format-row.hover:hover {
    background-color: var(--tournament-row-hover-background);
    border-color: var(--tournament-row-hover-border-color);
    cursor: pointer; }
  .tournament.format-row > * {
    padding: calc(var(--tournament-row-padding) / 2); }
  .tournament.format-row > .link {
    display: block;
    position: absolute;
    inset: 0; }
  .tournament.format-row > .visibility {
    text-align: center;
    font: var(--tournament-row-visibility-font);
    color: var(--tournament-row-visibility-color); }
  .tournament.format-row > .image {
    flex: 0 0 var(--tournament-row-logo-image-size);
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tournament-row-logo-image-size); }
    .tournament.format-row > .image > .discipline {
      inline-size: var(--tournament-row-logo-discipline-image-size);
      block-size: var(--tournament-row-logo-discipline-image-size); }
    .tournament.format-row > .image > .tournament {
      inline-size: var(--tournament-row-logo-tournament-image-size);
      block-size: var(--tournament-row-logo-tournament-image-size); }
  .tournament.format-row > .identity {
    flex: 10 1 10rem;
    min-inline-size: 0;
    display: grid;
    grid-auto-flow: row;
    align-items: start;
    gap: var(--tournament-row-identity-spacing);
    text-align: var(--tournament-row-identity-align); }
    .tournament.format-row > .identity > .name {
      font: var(--tournament-row-identity-name-font);
      color: var(--tournament-row-identity-name-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
    .tournament.format-row > .identity > .description {
      font: var(--tournament-row-identity-description-font);
      color: var(--tournament-row-identity-description-color);
      margin-block-start: var(--tournament-row-identity-spacing);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
    .tournament.format-row > .identity .featured {
      font: var(--tournament-row-identity-featured-font);
      color: var(--tournament-row-identity-featured-color);
      vertical-align: var(--tournament-row-identity-featured-offset); }
  .tournament.format-row > .circuit {
    flex: 6 1 var(--tournament-row-circuit-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: var(--tournament-row-circuit-align);
    gap: var(--tournament-row-circuit-spacing);
    font: var(--tournament-row-circuit-font);
    color: var(--tournament-row-circuit-color); }
  .tournament.format-row > .event {
    flex: 6 1 var(--tournament-row-event-width);
    min-width: 0;
    display: grid;
    grid-auto-flow: row;
    align-items: start;
    gap: var(--tournament-row-event-spacing);
    font: var(--tournament-row-event-font);
    color: var(--tournament-row-event-color);
    text-align: var(--tournament-row-event-align); }
    .tournament.format-row > .event > .dates {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
    .tournament.format-row > .event > .location {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
  .tournament.format-row > .size {
    flex: 2 1 var(--tournament-row-size-width);
    font: var(--tournament-row-size-font);
    color: var(--tournament-row-size-color);
    text-align: var(--tournament-row-size-align); }
  .tournament.format-row > .state {
    flex: 3 1 var(--tournament-row-state-width);
    font: var(--tournament-row-state-font);
    color: var(--tournament-row-state-color);
    text-align: var(--tournament-row-state-align); }
    .tournament.format-row > .state.registration.pending {
      color: var(--tournament-row-state-registration-pending-color); }
    .tournament.format-row > .state.registration.open {
      color: var(--tournament-row-state-registration-open-color); }
    .tournament.format-row > .state.registration.closed {
      color: var(--tournament-row-state-registration-closed-color); }
    .tournament.format-row > .state.pending {
      color: var(--tournament-row-state-pending-color); }
    .tournament.format-row > .state.scheduled {
      color: var(--tournament-row-state-scheduled-color); }
    .tournament.format-row > .state.check-in {
      color: var(--tournament-row-state-check-in-color); }
    .tournament.format-row > .state.running {
      color: var(--tournament-row-state-running-color); }
    .tournament.format-row > .state.completed {
      color: var(--tournament-row-state-completed-color); }
    .tournament.format-row > .state > .icon {
      font: var(--tournament-row-state-icon-font); }
  .tournament.format-row.disabled:after {
    content: " ";
    background: var(--tournament-row-disabled-background);
    position: absolute;
    inset: 0; }
    .tournament.format-row.disabled:after.hover {
      cursor: not-allowed; }
  .tournament.format-row.hover:hover {
    border-color: var(--tournament-row-hover-border-color);
    background-color: var(--tournament-row-hover-background);
    cursor: pointer; }
    .tournament.format-row.hover:hover.disabled::after {
      cursor: not-allowed; }
  .tournament.format-row.inverted {
    --tournament-row-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --tournament-row-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
    --tournament-row-identity-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --tournament-row-hover-border-color: transparent;
    --tournament-row-hover-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5));
    --tournament-row-disabled-background: rgba(0, 0, 0, 0.5);
    --tournament-row-state-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --tournament-row-state-scheduled-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-i_medium));
    --tournament-row-state-check-in-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-i_medium));
    --tournament-row-state-running-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
    --tournament-row-state-completed-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2));
    --tournament-row-state-registration-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium));
    --tournament-row-state-registration-open-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-i_medium));
    --tournament-row-state-registration-closed-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high2)); }

/**
 * Extension to handle tournament lists.
 * @deprecated prefer the use of a grid flex for spacing and separators.
 */
.tournament-list.format-row {
  list-style: none;
  margin: 0; }
  .tournament-list.format-row .tournament.format-row {
    border-block-start: var(--tournament-row-separator-border); }
  .tournament-list.format-row .tournament.format-row:first-child {
    border: 0; }
  .tournament-list.format-row.hover .tournament.format-row:hover {
    background: var(--tournament-row-hover-background);
    cursor: pointer; }

:root {
  --tournament-row-list-separator-border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --tournament-row-list-separator-border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --tournament-row-list-separator-border-color-inverted: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }

/**
 * Extension to ad responsive to a tournament row
 * @note: ensure this is still necessary or if it should be applied using scss variables in the web_mobile theme ?
 */
@media (min-width: 601px) and (max-width: 1280px) {
  .tournament.format-row {
    flex-wrap: wrap; }
    .tournament.format-row > .image {
      order: 1;
      flex: 0 0 2.25rem;
      min-height: auto; }
      .tournament.format-row > .image > .discipline {
        inline-size: 2.25rem;
        block-size: 2.25rem; }
      .tournament.format-row > .image > .tournament {
        inline-size: 2rem;
        block-size: 2rem; }
    .tournament.format-row > .identity {
      order: 1;
      flex: 1 1 50%; }
      .tournament.format-row > .identity:after {
        content: ' ';
        block-size: 0;
        inline-size: 100%; }
    .tournament.format-row > .circuit {
      order: 2;
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: var(--tournament-row-circuit-align); }
    .tournament.format-row > .event {
      order: 3;
      flex: 1 1 50%;
      text-align: start; }
    .tournament.format-row > .size {
      display: none; }
    .tournament.format-row > .state {
      order: 3;
      flex: 1 1 6rem;
      text-align: end; }
    .tournament.format-row > .actions {
      order: 1; } }

@media (max-width: 600px) {
  .tournament.format-row {
    flex-wrap: wrap; }
    .tournament.format-row > .image {
      order: 1;
      flex: 0 0 2.25rem;
      min-height: auto; }
      .tournament.format-row > .image > .discipline {
        inline-size: 2.25rem;
        block-size: 2.25rem; }
      .tournament.format-row > .image > .tournament {
        inline-size: 2rem;
        block-size: 2rem; }
    .tournament.format-row > .identity {
      order: 1;
      flex: 1 1 50%; }
      .tournament.format-row > .identity:after {
        content: ' ';
        block-size: 0;
        inline-size: 100%; }
    .tournament.format-row > .circuit {
      order: 2;
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: var(--tournament-row-circuit-align); }
    .tournament.format-row > .event {
      order: 3;
      flex: 1 1 50%;
      text-align: start; }
    .tournament.format-row > .size {
      display: none; }
    .tournament.format-row > .state {
      order: 3;
      flex: 1 1 6rem;
      text-align: end; }
    .tournament.format-row > .actions {
      order: 1; } }

:root {
  --tournament-row-min-width: 18rem;
  --tournament-row-padding: var(--sizing-space-medium);
  --tournament-row-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --tournament-row-border-radius: 0;
  --tournament-row-border-width: 0;
  --tournament-row-border-color: transparent;
  --tournament-row-hover-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
  --tournament-row-hover-border-color: transparent;
  --tournament-row-disabled-background: rgba(255, 255, 255, 0.8);
  --tournament-row-logo-image-size: 4rem;
  --tournament-row-logo-discipline-image-size: calc(4rem - var(--sizing-space-medium)*2);
  --tournament-row-logo-tournament-image-size: 4rem;
  --tournament-row-identity-spacing: 0;
  --tournament-row-identity-name-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --tournament-row-identity-name-font: var(--typo-title-small);
  --tournament-row-identity-description-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-identity-description-font: var(--typo-text-tiny);
  --tournament-row-identity-featured-font: var(--typo-text-small);
  --tournament-row-identity-featured-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-high1));
  --tournament-row-identity-featured-offset: 1px;
  --tournament-row-identity-align: start;
  --tournament-row-circuit-width: 0;
  --tournament-row-circuit-spacing: var(--sizing-space-tiny);
  --tournament-row-circuit-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-circuit-font: var(--typo-text-tiny);
  --tournament-row-circuit-align: start;
  --tournament-row-event-width: 80px;
  --tournament-row-event-spacing: 0;
  --tournament-row-event-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-event-font: var(--typo-text-tiny);
  --tournament-row-event-align: start;
  --tournament-row-visibility-width: 0;
  --tournament-row-visibility-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-visibility-font: var(--typo-text-tiny);
  --tournament-row-size-width: 0;
  --tournament-row-size-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-size-font: var(--typo-text-tiny);
  --tournament-row-size-align: center;
  --tournament-row-state-width: 0;
  --tournament-row-state-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-state-font: var(--typo-text-tiny);
  --tournament-row-state-align: center;
  --tournament-row-state-icon-font: var(--typo-text-large);
  --tournament-row-state-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-state-scheduled-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --tournament-row-state-check-in-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium));
  --tournament-row-state-running-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --tournament-row-state-completed-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  --tournament-row-state-registration-pending-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --tournament-row-state-registration-open-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --tournament-row-state-registration-closed-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }

/**
 * Tournament shown in the row state.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.tournament.format-state {
  border-radius: var(--sizing-space-tiny);
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .tournament.format-state, .tournament.format-state.medium {
    width: 17rem; }
  .tournament.format-state.small {
    width: 9rem; }
  .tournament.format-state.large {
    width: 22rem; }
  .tournament.format-state > .state > .content > .title.success {
    color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.warning {
    color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.alert {
    color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.admin {
    color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.primary {
    color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.secondary {
    color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .title.standard {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .primary > .winner > .label {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .content > .secondary {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .side > .size > .total {
    border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .tournament.format-state > .state > .side > .size > .type {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
  .tournament.format-state.inverted {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_high5)); }
    .tournament.format-state.inverted > .state > .content > .title.success {
      color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.warning {
      color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.alert {
      color: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.admin {
      color: hsl(var(--color-admin-h), var(--color-admin-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.primary {
      color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.secondary {
      color: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .title.standard {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .tournament.format-state.inverted > .state > .content > .primary > .winner > .label {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .tournament.format-state.inverted > .state > .content > .secondary {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .tournament.format-state.inverted > .state > .side > .size > .total {
      border-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .tournament.format-state.inverted > .state > .side > .size > .type {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
  .tournament.format-state > .state {
    display: flex; }
    .tournament.format-state > .state > .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center; }
      .tournament.format-state > .state > .content > .title {
        font: var(--typo-text-tiny);
        margin-top: var(--sizing-space-small);
        margin-bottom: calc(-1 * var(--sizing-space-small)); }
      .tournament.format-state > .state > .content > .primary {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--sizing-space-large); }
        .tournament.format-state > .state > .content > .primary .progress {
          display: flex;
          flex-direction: column; }
          .tournament.format-state > .state > .content > .primary .progress > .label {
            margin-bottom: var(--sizing-space-medium);
            text-align: center; }
            .tournament.format-state > .state > .content > .primary .progress > .label > *::after {
              content: ' | '; }
            .tournament.format-state > .state > .content > .primary .progress > .label > *:last-child::after {
              content: ''; }
          .tournament.format-state > .state > .content > .primary .progress > .bar {
            display: block;
            position: relative;
            height: var(--sizing-space-tiny);
            background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low2));
            border-radius: var(--sizing-space-tiny);
            box-sizing: border-box;
            overflow: hidden; }
            .tournament.format-state > .state > .content > .primary .progress > .bar > span {
              display: block;
              height: 100%;
              background: var(--color-success); }
        .tournament.format-state > .state > .content > .primary .winner > .label {
          font: var(--typo-text-tiny); }
        .tournament.format-state > .state > .content > .primary .winner > .identity {
          font: var(--typo-text-medium); }
          .tournament.format-state > .state > .content > .primary .winner > .identity > .flag {
            margin-inline-end: var(--sizing-space-tiny); }
          .tournament.format-state > .state > .content > .primary .winner > .identity > .logo, .tournament.format-state > .state > .content > .primary .winner > .identity > .logo > img {
            height: 2rem; }
      .tournament.format-state > .state > .content > .secondary {
        margin-top: calc(-1 * var(--sizing-space-small));
        margin-bottom: var(--sizing-space-small);
        font: var(--typo-text-tiny); }
    .tournament.format-state > .state > .side {
      border-inline-start: 1px dotted hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
      .tournament.format-state > .state > .side > .size {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--sizing-space-medium);
        min-width: 5.5rem;
        min-height: 5.5rem; }
        .tournament.format-state > .state > .side > .size > * {
          padding: 0 var(--sizing-space-tiny); }
        .tournament.format-state > .state > .side > .size > .current {
          font: var(--typo-title-large);
          font-weight: 400; }
        .tournament.format-state > .state > .side > .size > .total {
          border-top: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
          font: var(--typo-title-large); }
        .tournament.format-state > .state > .side > .size > .type {
          font: var(--typo-text-tiny); }
  .tournament.format-state > .action button, .tournament.format-state > .action .button {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .tournament.format-state.transparent {
    background: rgba(0, 0, 0, 0.5); }
    .tournament.format-state.transparent > .state > .side {
      border-color: hsla(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium), 0.54); }

@media (max-width: 600px) {
  .tournament.format-state.large, .tournament.format-state.large.medium {
    width: 100%; }
  .tournament.format-state.large.large {
    width: 100%; }
  .tournament.format-state.large.small {
    width: 100%; }
  .tournament.format-state.large .state .side .size {
    padding: var(--sizing-space-large);
    min-height: inherit; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .tournament.format-state .state .side .size {
    padding: var(--sizing-space-large);
    min-height: inherit; } }

/**
 * Includes all video styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Extension to add a hover effect with a play button.
 */
.video.format-box.hover {
  cursor: pointer; }
  .video.format-box.hover > .preview {
    position: relative; }
    .video.format-box.hover > .preview:after {
      display: block;
      position: absolute;
      background: transparent no-repeat center center;
      content: ' ';
      inset-inline-start: calc(50% - 15%);
      inset-block-start: calc(50% - 15%);
      inline-size: 30%;
      block-size: 30%; }
  .video.format-box.hover:hover > .preview:after {
    background-image: var(--video-box-hover-background-image); }

:root {
  --video-box-hover-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"><circle fill="black" fill-opacity="0.5" cx="514.065" cy="504.152" r="477.545"/><polygon fill="white" points="383,510.151 383,318.502 548.696,414.327 714.529,510.151 548.765,605.976 383,701.801 "/></svg>'); }

/**
 * Video shown in the box format.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.video.format-box {
  display: flex;
  flex-direction: column;
  min-width: var(--video-box-min-width);
  gap: var(--video-box-spacing); }
  .video.format-box > .preview {
    position: relative;
    position: relative; }
    .video.format-box > .preview:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 56.25%; }
    .video.format-box > .preview > .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    .video.format-box > .preview > .screen {
      position: absolute;
      background-color: var(--video-box-preview-background-color);
      border-color: var(--video-box-preview-border-color);
      inset: 0; }
      .video.format-box > .preview > .screen.noise {
        background: var(--video-box-preview-noise-background); }
      .video.format-box > .preview > .screen > * {
        inline-size: 100%;
        block-size: 100%;
        background-position: center center;
        background-size: cover;
        border: 0; }
    .video.format-box > .preview > .osd {
      position: absolute;
      inset-inline-end: var(--video-box-spacing);
      inset-block-end: var(--video-box-spacing);
      padding-inline: var(--video-box-spacing);
      padding-block: 0;
      font: var(--video-box-preview-typo);
      background: var(--video-box-preview-osd-background);
      color: var(--video-box-preview-color);
      text-transform: uppercase; }
      .video.format-box > .preview > .osd.live {
        color: var(--video-box-preview-osd-live-color); }
      .video.format-box > .preview > .osd.disabled {
        color: var(--video-box-preview-osd-disabled-color); }
    .video.format-box > .preview > .category {
      position: absolute;
      inset-inline-start: var(--video-box-preview-category-spacing);
      inset-block-end: var(--video-box-preview-category-spacing);
      padding-inline: var(--video-box-preview-category-spacing);
      padding-block: 0;
      font: var(--video-box-preview-typo);
      background: var(--video-box-preview-category-background);
      color: var(--video-box-preview-color);
      text-transform: uppercase; }
      .video.format-box > .preview > .category.stream {
        background: var(--video-box-preview-stream-background); }
  .video.format-box > .info {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--video-box-info-color);
    padding-inline: 0;
    gap: var(--video-box-info-spacing); }
    .video.format-box > .info > .title {
      font: var(--video-box-info-title-typo);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .video.format-box > .info > .subtitle {
      font: var(--video-box-info-subtitle-typo);
      color: var(--video-box-info-subtitle-color);
      overflow-wrap: break-word;
      word-break: break-word;
      white-space: normal;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto; }
    .video.format-box > .info > .language, .video.format-box > .info > .date, .video.format-box > .info > .subdued {
      font: var(--video-box-info-subdued-typo);
      color: var(--video-box-info-subdued-color); }
  .video.format-box.inverted {
    --video-box-preview-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom));
    --video-box-preview-border-color: hsla(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom), 0.38);
    --video-box-info-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_low3));
    --video-box-info-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }

:root {
  --video-box-min-width: 10rem;
  --video-box-spacing: var(--sizing-space-tiny);
  --video-box-preview-background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom));
  --video-box-preview-border-color: hsla(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom), 0.38);
  --video-box-preview-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  --video-box-preview-typo: var(--typo-text-tiny);
  --video-box-preview-osd-background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --video-box-preview-osd-live-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-variant-medium));
  --video-box-preview-osd-disabled-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --video-box-preview-category-background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-variant-medium));
  --video-box-preview-category-spacing: var(--sizing-space-tiny);
  --video-box-preview-stream-background: hsl(var(--color-alert-h), var(--color-alert-s), var(--color-variant-medium));
  --video-box-preview-noise-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAABsCAAAAAAZaeJOAAAZtUlEQVQYGQXBCYJCAAAAwCl0UI4Ukty0/3/hzoDQtLiw1nIRtIs56w1cU48ACAFgg1nv6g9B5DoBELoDuTsAJsCRuQ1oVn4Gcxux4cy9ggEsD18dYW0T+AEsrrYfXlwBqO8OQoOrFLA58wJ0cMIJeAAAj1v0AAZ/V16Q6Gfw7H1xrL8A6ORyIMxQ+DXFT4oJcmByK3rs4GbRfYE/gEOrgJ6P51jxJelABcYbOR1D40hh5A6o0Hk9/IhfPtwFAOPFzcsKgQn1sAElIMUTqG4JhLJvAgAZnLnjgNXDBI/HqfPCIQaU7mEGA/OuUBMAABya1scEnADkWmJSGHijE4MCLUgwR4TSCARADUAwionfPEGihhg2YCEAAC53ALI5A8S+H8CzhSYQeZ4B9q9R8WBPETMEhLARknKAdoa724I/eAAIuAF8CYAeN0A2qgG4HQFw9Mc1ToCehBsvFk1hvIl9AQBAww2EIBU3AOhg4eYNAADgt8p44gAAAXDh2EA33zIvPHFk6DlwlwLcJezIF4AFULEcAyBAAeeQHogawI0+Y4GQ03VzDAfWoXPhgBQkltx8dqrd4S/yBNBq+ghwFABycvMAH4QDAGCFHRSQtEhdIOIMtN4NcQ6QSQHyHp8d0BJIsABIR/BAHmMFOMBkBqB+ny9lQUgN4L4poHY4Pn1dC0IJUBC63V8cAS6GJuCMNxFmctUIcH0DWQ1QPfB7JG66Aw4+dMAVEHrW86zRwB8eh6O5vbQ312gll3wAWd5bwRcAiN8+VDfUHc5QqyXOE79L8nIjwsdjUZ8ArxIVACmwewFSfyCjCjgvoHeDHwlCMfDEFa6+1hrQowLPFRh5nVYwQeJRO6IFUAD4uCPfTN4Kv1/0HYAHU2V7I6b49SQAgTMAOHrFPRwA9gWQ+QDuAOojq2tpRuuPawoYrrgGwAsGN7YnIgAvDey6CVB2IP6ClcHGjdWJGWgB3uBBB/X0ocXmNYAzOhlIFJAzIAEAL3BXAMCYoQOA1vHPx1dK30NNz9qn7DjwggZhcsHieDRzJgCuABoKqMywxqMdjU0A9IRmSDs6rxJnvo44VwDAT/vBDbAjJgaGvr7iZtICAXfAKy2BBhi9aZlYExmXQYQTwAe4QAfjnRkL4IfuzkPXwGE3YladfIEGcEEN3AA8scOLYwej2xsEvW1xrQyga+Al2jb+TibgJeWz+AFHDHy/YOzVZapGiQP43JVQ4Fnt/P2QMS44E72gACT4jDsDs8EDQjzGTn4PYVCCmhg8tODJh8BpBPfhbh2fANsfyMiKBtYY4Aog4sMEqOVwN7/RA9fsd4aU8ro00OJJCk6EjA454BfzBgBA3QIAVhor8BcLgDcJGI9yACtfOH1QiRn4BGAGZs8ZAG8A6UzrAs754rImgN8084wegYIUHEMZrKBCeOAACSZUR9wAAH7owENGSQVfRi2mCJw0HQAimMDM7kP8hTNCgMPHUeUEGUV8xghmhEDNz5/GWEOIA9gv4Ia88f6wciJ29ANOMPEmwUPsChmoXo4kYk/vS/78Awvvzx3V1wmpRwuOLQCLDYeHRlSVCcQAKwB0gDTHyG/EG6cQAG5eBHQrnhk5MAHg2ILeHfBhYaSMNwA2AzeA9aZSSeq/U0E6gwftzxP4IyNF5gxajBwR8SPegc+ugdAIgAk+TEzgQ2qCGIAHIIOEE5RwRckGQPEGG/h8CQDzVQkAF29CoITmB16c+qRQinGpXwCAAEOMzKUDoAVMLn+eoCtN0KRuItbzNPd2ADG4sXoBDchv4Ad2fJNZ6Q1nP3y9vBewASj4AFYQvxv8UUIFgjtwhhJASY3vl9n5FXpjA0yg5EXZweSMCzCALzYogIg7IehcWmR/fEjqoyNK3izgztNiUzcflICcA0dgQWPyfmFQ4Ajd3AI6lKB5ZDVxh15ZAOCHEiB01kq5by0A+8ERHD2BG7g+pzM9AG4uTjtkhAAg7eQAaG9ghgwBgC/EAApeTgDAAsAHtFz5sh4CcAG/JB3gzu0Dh+fKwaRE9MbkDzgMgAsAAAXoLH6cUi0cfP0pKjyAe4m1gJ2o5e4LVu4w8QX9iS9KtEbW5okHv4IdAAA22g4AEXADOCWftz9SAAAASkACQAwCQNEAqMwSL6zYO1CK3HgJuCHmlnAdKGdQxW8AMoQcxwJwaGlJgB9JeIYTAABGcFEDOZi2CeCjxEILAIAmluCWY7mD0qK9y+fVBiWhm+SNRnc9uCPCGRnG2d4B+INFKOIBLBhF8IWZiBPRmoA6+KNB1PAsAWDEjDCGN6sWLSqcooYeZDEWmwFvsPADEiKREipQouDvyh9AlU7vEABef2XT4+RDD+y8wUTtNIMfACc1AACrHYAT2IFjBQo9rrwDAAAnuUfq2oAdExlMoMbB7Q2ADER24E/5LfzoAHKwuQDQE7vfUAIxKoAHfHdiYkc9B4A3pFZvDMwhzDoCgAKXq9fx8wG3EyDBkcR61ubIbYDVrkdCykvMi1h0Aa8/sHe4/xABUCwqP+ce7RENHTs8gcMCcJ0Ak2DlwGengpbtRwc3foH0AuCLzPB6AY6A/fr2TicA35sT3M2kRld3gJ8P+ABCnJWLiAiKSoME8DVnNn6uflKcfDAlO2IAwMOCBn9syH8tyIDV+QmkhxNwOX8B1FeMZrkJRwALQI/PmD9eLvCYYMj8PnQbAEAIONM77QE4M+FsvOhQHzzYuNzg7qsjBgAAb35Q66xvRtIazxXX4QRADTyuwPb1sw1qmQYADUCw9XnFNFJ9vK8mfQIARxIwnoPsCJsHCWgQAIDRHgP1CsAfqG4rJWDxV/nDA4MeZPgDALgQwPMJwARHkN0x8e6At5hl+2i+D+ZBrnYEAIcT+KpYfcCJngcSHYAIYOfPEa/ID86AEvP7hZJJiYEbbHN5Zvy9MWSolagAYKHDDGbkAF/GAQCoT/wkn6EH/fIZKUu4QOrwAieAh0HGJV3fgC9xC0hPXL0rf39+xOAo6UBY7E/Ahg7QAoywXAERuZgOLxdNygv8YQbs1BEhANzfAEOkDfT3m4C7v8EX2G+8qCAPTTou6AJcNOAKrWQFrm/uQCXwufLE437AFQJ8GnSADhmAWl8DZoCWKzK4A5CxggsMAbToKQ2gBa6+wB8jhTBPqm+XwBsAyt8E+hU0gJ4GE4i7J8zTjRUEAGbYKb6A1wNA0SnY1l/TTsAdLMQAgFTjghz2Y4UlYPfwBACu4ZcQB9PjAs6xGG7IraSH5jcCoHGhWHDEia1T5cx/iJDSf0d0j4PAOgmIqHQZlQZXYsCbHCCDGdQaFSEgBzgyyfjAlQwh8gppSOkGUPZogB2ASEwVolARrRI4e+oNbyDHG3RafMkhYIPOy7iOINLvG0dw8QYrRI49tMgRvmZ/+OSmGrzWu2SPeC2S4wfABACAlD8cqd2hBABAmPUAjw+FMXoa+NJC4XaHBT+ZACC9vijnBBkAPsAFvHnUAPC+bOSf3heaC8DgFCtvJgDUjQviGrwGMmvhBRwRcgWMqitT/QANsPH+K5ABXyCDhe/WyX1Q4+Eq1AMwPvHz8QAFYC+p1C3I0JoBrE/oSxH0loDzFSHQQE/mAkeE8AY2eGKAXYGxIoACqdUDjoSg9+TN5wGODjM08KgBoKlAqQnheQbMwAnFquZUUdAAeHoAaZqCiRbwoQCvnNHMzRP56+MDM6CECoAQWHC8K2N/c0N3t0DhgRQFEp8SFBPc7iFwQ8iuY0StVciREp+17x/yHm+uAB9nkRzz/IrcYVUB8PEFFwDZ6wz208URvEvAV+7s7UkAGWdEYOEItzdACiCDrAU6QLS4azq9S3BuAEDDRgnwB8/6hz/NxQwS4vY0S2siZwUAJACAkQfIkXEWeGUDTkrP3whcYSf+hvjF6gF62CoADUFHjtybFjgAEY0HKJ5oOQEVeFpqgA5oW8AGUCPtAORS9E5KUHG94Wz29eMZYqTP8Hm4ICECZgRgv1NBw7P2BWCGEjAB+CIHfLCmSetFgHJHDdQY4QB+gHGBrIMAsJgqQLJ4Et8vEg4AFJDmCPGgVYGT0wkrLUYf4AFcgRoAwA1/aFhAywEE0P4ZSYD47ACkyRd6XIABODFD8+JhB5gbkAK0eYoAPn54edOISoAm4ZDSsm+EMDuCFhwiKzZc57sBKT7AHaGDLHDwZ59nCZebEzmAM0sOOjG7bQY6FIDghgcAGCs04EbJD/cKkRXUTxBBDFRo7uZhjAEAFgBfarTAUn2JEg4A4O6QXKAHMOODBiluP36gBQDU7F4IUpRgAu0PrlB6WGtom5DqgFMuh5x43R6SqxahC9wpjI0dEHYwfeEHkxUQjhAPAANnBBcTDZO9gDZhAwCs1i/N6YME8DpGs9xnPgnBDnI9vDZGQikpMN3obUCNMwAbwAiLO70EBuIjSM7g6bu8YcEdPeDAAetQIZeg6XDkLabjQ8QPoNwkTgB3C4jiEsDCxR8A8LHieAcgCQDgAQCmtG1H8PWGjk0AadwBL9xyf76cjRQrxNMKAEcmQogYXB4AEI9ODIiNbANPeJ9lCRFeAC/Tgz8yAUrMnQB6YDBTQfqhBxcl2AAUZVEzM4FDOIIe23wAB3BzBycXKHwBCvua+WFli+ALUPw5APbgsoJCYWYyIwEOHwB44LPj4y75c/gDPfACf6AHQMQOjoAnaAE2EIPvUwdOoOkBJHCAHEYYAcAOEMATU/s0wLWjBtAzYxZDfooRAq6gUQBhBAoAyNivbqI6XyCG3RXUV/RhyctWzvg8XYV/OhUAjh/ooAFw6Pn4mzh7MOGJnhT0ipgL4I4f8HI1QWon8WKrO+so5eICZ7101wJRZG3PlK4A8A6V0OEOwNOODDDxA1IrsJ6sZlYoASP5KyEywo8UK47sDXMEnu8nWCfAG1DiAXCCR6lxzReyhroJvP0Miw8oAQFPnldgvjrRD4AvOHAPW4oYdt5qFPe1IFaAZmXnQ4c3vAE1AKDrPRVvi4szyMGTu7RZch4VyBQjp1UBy8rZERgkelhxNiZjDHCFEW+4jdROT9CYPkwgSHFc4dD5ATe+L83ydUpIzgBG3tSA2AgGEJg5CWCAR/JV4DH/HKsLADIRwAPQImG7AwDN+SuALYy83xAAcFejYII/B86AXcH7FxKfUEqwYvvpYNJCDPRGAGdYOPSAUBy8uVpBxINUSc4G0Gvvcqi4eYEFayV3F1EAULmvXDjD82864/AhR+fcYyBkA9Q9vzZsibDjcUuuEtg/vMEFOJ0BXTqABL7ABazyLzsBHkxSP54AuOHn5YH8qwEAlhTw6aXhCes0W+IZKz6wuZIBgM5JUlGDiuPft4UMHKjcvVBqTpDJePOiUZMrqDzBgAc5fzx5zXQAF2Yq5AnABxDS9f3EgzoHgCMA+FxZMAAAzpgBrEDDW8KOBXighOsZ3oAcHgM8PD3NgNr4smDhDOeuBksKTwAc/ugO8IOn5ocruRKUYCfn9boDXAAIvoCU1wQZCRxotiuAp/t9JbuakPEGOszEGwC0ALj4Az4OHeCJqxFgBpYQ8DBhBMCDGVg4f3WgBqC+VgDgXNwAIEk9UsDkAuCBEgBQ76djAgD4A2fgQQrANUcCSOgJ8QUabiW0euABGyyfESCDGnAc+NHLG2IbwJWvBvYcAB/wfaRujpRXAMRgATUlOuAIGOXclEz8dmuexQEAyMEFCaRAQL4C4OGEFoCX/uz1BwAOLAAYO/gDAcPsXbiDCvgxOvCL0fmSwxUAloiGhSrESdaAzA8iHQAGtuwbkOAdwo+Po4qNH3RwAi/gQA3AC7gBeHsQTeAM2MSiakEGVMrKS0vY2XkpHkgdAOwQeadw5oojgAjauC5JwOoFADiBA8COI0QwSNG4Xs5XfPnDxMpwasoCWABSYAfMmABPTpMWjAiBtw/CHkAlCwFMZystJ14sI67M/sjAe68/TADk0DPC/QSABLCgvpU4wD5HOiSkFH7ze2fhyADVcAdYq90NIGBiByAPH/wgWizeQOw053I/AHh75kjg6QJY8EFW4NEDAAegLLwXUMLaAYEn/oD8wACOKsYCKqaCATa2keGwAi6JGqkrJ2xfgR/ge/ZCC3JgN7DDNFoorO+304oMrLiTmnK4AJxvkufxYiDhcHmK4ObQoODi+PYgQ7ALWgAGANioCbuHAGdM9J6LS4k2OYJ4B0AUnoDIpYSemd0Vc4EE18QDMJ4vObI8RQtvqUjMAwAAYADwBEkLJ2AANySvM3hCzJNZdkP3k1PUAZMNrpnDk/MHbgMIZDgq168P4JEBBzJsEdRcgJL9knOBOwfArqhf5afGwwsuUNWAwe5+tkHQwuSNG3zn+AV0OIGBkBpmFtCAkF8PSMP6mytBAn4A3fwAJuqzjZ56Z0RYXPV/ohAAlxpsw5Pjg4sYll2B6CMYf8Ixwo4vhDQPkQdyIloAANEHwAsh+ICe/YkKjB8AXsAswxmQbuAJUOMFAHLBBsDmBQGoQQ4NOWyXZkGNp5s3QMI2a2ek0KjBzwO0HAEYnwxSsRlOQMxf59EkwI6xlEhMKryBoysmgMwFF3D+3RygBCJsHAAgVAHooQVvLW8wj396WgBgXeH2dN9ArS8BvglwpQfcXoudmK4Brv62rUGyBLncyAog40/BddG7EYIL8ILj3j/RmWDeAb6Y1A2VBMTgQZIZpfB6AT0MW6tLGYDpwBFvAEAFRFTZQwsAsKULLvDVIkRuyznDytXgGRR36xOCFoDT4AmgB3JTJsOBiQVcoTsi5A8mDmroqXyJAUgBAEDJiQ1pIgXctReOwKoEKQM0ROmXszOZWYbWCutRgwiAJwDgJPHneMIXH6SAMYDIl2zFwNMPcAVIIAIbKpqvm90BJDAIlJAhwasorICoPq7XI8QAsOOMspJcyAGQsokKCD+4+xCQe64JOnoxvgDgp4YS8KI0AFrIP1qg4jacwIAYAKJKKQd2X7gKV3AmmEJXD7JFbbrSO2FAd8QFqguIVfiw8HuHEPjJeWhR0QAAEWAmNXkD4EiDoBfZ+LmvmALAkw6TjQNw48bjDjPEIaiY6fGI4QUx4ADkdo2zXQElHjACRliBypaF7oWyc6NS1etOYYd3XjAALoa9cHYEwKkEGTGwegMFIGlEyAHA2uMPSOz85oQcYAJeAK5H8ABIwY0UDADACPXh54AbYKsuADemD15WjnpOC6OJilY9f85AQQOaFgDVTwmASlSihJ4HlGdqAuDMgBkIsLKxYqFDcCB3B4AbSGW5Ah+cOGgov7oMoACEYQUwYwbGmAshnBkhP4LH0YsnSOEMADwVDjij+cWYJAvwqShAAPlXDdQYl587jREcr/DFkfOFAFD8RtB6e0NMdIwAUsQXkRAAEpCDDIYSev5YXvi9JpEL4HB1xPX65MIHEgjv8AMAACg44ECDVYUvWikAVQCwOeIBtDQAvF32k65kgfMDuiGDpAF2Xz5oAKDSEHp11IhxxgcC2xDcOQHQp+AE4AuoAaY/mZgOgAZwIfAFfLeOkMyeAZD7QFXskJDxHOko6XB1fcopOfBbAEiw1QA1Il+1XqcBsP+p4QMACQdnnAGov2gAG1znO+Q7wJ/H3wYS3NAEMFzeNIYNAIAJqCyIfkBa8ac6gzCHYh9HACDBbn09EMNLlwbwAIw8CF8AVAruYSYHg13YnoFqhRvm7qh05PBTYFDCoAJ8lA9s6g6w4K3ztwSgBfy1yAMg8YAUpZgjsHEE4E4JEEQVQAo3BTzhnOHkAOAPOoAkBEoFMUAmB3bgqkAVfdzMNXW4AjzoMUMKAil4iCeO02piAASQgTtOBrC2AO4n1AA0GQA7RB0O0vIOKdwGPqDHwrA4m/dx4jkyiZ2JRkAODHQAXDpPZwDRlxrcNBI+HEg+N4DzVESdEp5ckwYgB56rc/h3BIAQ5Pwa8MEOiMEdQwwGaK6onVwwgB9gwyqfUbrggtsJDrDFBpUcHXntqN+cG2IqA96Y5W6VK8rlCHwA0EenlM7bTYubc2X4uzZEoAWY4cq0oMq+ADaAF07k8MeZJzQASnqAizPIwSH9qU1/hhZXwBJtYAaca4X3vgHxAlYvhADuVtYF2O9SHo6ApoPNqr8AO46wwA1XB/hL0JKuGe4W2+mt54HfmQvAD2uY4EMMkDJhvr5xQAjgA4AKAEDrwBVhYrsqOwTwmVn8nAAAnxXWQGH1hREAGVpSADwA4BS74kC9ADPsB1sKAEHHbLlBIS+kgOKNDSDoAXQA8gViNiPYd5QAvJC2OFbEwBABOSvA2drg9/riJ5OxedAffEnfpBtsAGTwhQhbzR9gLIjB2Rdu3m/EwAoMoJoBCDw5KDfABtiloPnh4ABiKCkgzwBwSRgJcQQKT0A4IYQ88OMHAD0i9Yyjc74CAOzCTvMB3HDx+4qgA3PYPvE9giMc8cfD2egCGFMbMjd84QI8IRAIo0kNwA13HoACeK8qBw5c1WbQuxfAxjNJOWYSUFkCV+rwOgFq4I/45TU6IQEEIY8rINe/PIHFCD58Hh+hw0LF0cvLRXy1A7grm9MNBVLKN/QEEoioYXkDoQAM0d8RAAqYcGEj5mmWEbwOGZC7bFTTslNgfBtAR4DVAJsRXDkGG8eXdPCnMQMnvnj3JZc1twMWuAPACaCH9Y0rAAh+FHAD2KPsDFz0PvDiCrMv9vZWAB5XL7xh+Lr7TDj0gUfsyAEaRs1nRQ/YuOzi16CIcRcAXiKggw1mXuigRKY2FfBxRIoE6vzB7wXQsfP7YQDA3baB60njBaR43sG5WSCHy9cEqC96H6xyGGEFOCoSuMA/Y2PYbQhKj1oAAAAASUVORK5CYII=');
  --video-box-info-spacing: var(--sizing-space-tiny);
  --video-box-info-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --video-box-info-subdued-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  --video-box-info-title-typo: var(--typo-title-tiny);
  --video-box-info-subtitle-typo: var(--typo-text-small);
  --video-box-info-subtitle-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
  --video-box-info-subdued-typo: var(--typo-text-tiny); }

/**
 * Includes all user styling
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Auth formats of an user
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.user.auth {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-clip: content-box;
  margin: calc(-1 * var(--sizing-space-medium)) 0 0 calc(-1 * var(--sizing-space-medium) + var(--sizing-space-small)); }
  .user.auth > * {
    padding: var(--sizing-space-medium) 0 0 var(--sizing-space-medium); }
  .user.auth > .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
    font: var(--typo-label-medium);
    text-align: end; }

/**
 * playlist row format styling
 *
 * @author Grégoire Richet <gregoire.richet@webedia-group.com>
 */
.playlist.format-row {
  display: flex;
  align-items: center;
  background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
  font: var(--typo-label-tiny);
  padding: var(--sizing-space-medium);
  min-width: 13rem; }
  .playlist.format-row.hover:hover {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
    .playlist.format-row.hover:hover.disabled {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .playlist.format-row .name {
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-bottom)); }
  .playlist.format-row.disabled {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
    .playlist.format-row.disabled .name, .playlist.format-row.disabled .size {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .playlist.format-row * {
    box-sizing: content-box;
    user-select: none;
    margin-inline-end: 0; }
    .playlist.format-row *:not(:last-child) {
      margin-inline-end: var(--sizing-space-medium); }
  .playlist.format-row .name {
    flex: 1;
    font: var(--typo-text-small);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  .playlist.format-row .size {
    flex: 1;
    width: 6rem; }
  .playlist.format-row .actions {
    width: 5rem;
    text-align: end; }
    .playlist.format-row .actions button {
      padding: 0; }
  .playlist.format-row.disabled {
    font-weight: 400;
    cursor: not-allowed; }
  .playlist.format-row.hover {
    cursor: pointer; }
    .playlist.format-row.hover.disabled {
      cursor: not-allowed; }
  .playlist.format-row.inverted {
    background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top));
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_medium)); }
    .playlist.format-row.inverted.hover:hover {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
      .playlist.format-row.inverted.hover:hover.disabled {
        background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
    .playlist.format-row.inverted .name {
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
    .playlist.format-row.inverted.disabled {
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_top)); }
      .playlist.format-row.inverted.disabled .name, .playlist.format-row.inverted.disabled .size {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }

@media (min-width: 601px) and (max-width: 1280px) {
  .playlist.format-row {
    padding: var(--sizing-space-medium) 0; } }

@media (max-width: 600px) {
  .playlist.format-row {
    padding: var(--sizing-space-medium) 0; }
    .playlist.format-row .size {
      display: none; } }

too-placement-app .loading {
  height: 100%; }

too-placement-app too-participants-modal.modal-large > div > div {
  width: 60vw;
  height: 85vh; }

too-placement-app too-participants-modal.modal-large .metric.large {
  flex: 3;
  min-width: 7rem; }

@media (max-width: 1280px) {
  too-placement-app too-participants-modal.modal-large > div > div {
    width: 80vw;
    height: 85vh; } }

@media (max-width: 700px) {
  too-placement-app too-participants-modal.modal-large > div > div {
    width: 100vw; }
  too-placement-app too-participants-modal.modal-large .metric.large {
    display: none; }
  too-placement-app too-participants-modal.modal-large .card {
    width: 100vw;
    border: none;
    border-radius: 0;
    margin-top: 42px; }
  too-placement-app too-participants-modal.modal-large .card [class^="card-"] {
    padding: 1rem; } }

too-placement-app too-participants-modal {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  display: flex; }
  too-placement-app too-participants-modal.modal-small > div > div {
    width: 28rem;
    height: 15rem; }
  too-placement-app too-participants-modal > div > div {
    display: flex; }

too-placement-app too-participant-list {
  display: flex;
  flex: 1; }
  too-placement-app too-participant-list > .card {
    flex: 1; }
    too-placement-app too-participant-list > .card .card-content .participant-list-container {
      padding-top: 0;
      overflow-y: auto;
      flex: 1; }

/**
 * include all layouts
 */
/**
 * Includes all auth layout styling
 */
/**
 * Core element of the auth layout.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.layout-auth {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .layout-auth > .layout-section > .layout-block {
    width: auto;
    max-width: 32rem;
    margin: auto;
    box-sizing: border-box; }
    .layout-auth > .layout-section > .layout-block.top {
      padding: var(--sizing-space-huge) 0 var(--sizing-space-large); }
    .layout-auth > .layout-section > .layout-block.content {
      padding: var(--sizing-space-small) var(--sizing-space-large); }
    .layout-auth > .layout-section > .layout-block.separator {
      padding: 0 var(--sizing-space-large); }
      .layout-auth > .layout-section > .layout-block.separator > .belt {
        height: 3rem;
        position: relative; }
        .layout-auth > .layout-section > .layout-block.separator > .belt > .loop {
          position: absolute;
          top: 1.5rem;
          left: 0;
          right: 0;
          height: 1px;
          background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
        .layout-auth > .layout-section > .layout-block.separator > .belt > .buckle {
          position: absolute;
          left: calc(50% - 1.5rem);
          z-index: 1;
          width: 3rem;
          height: 3rem;
          background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
          .layout-auth > .layout-section > .layout-block.separator > .belt > .buckle.text {
            display: flex;
            align-items: center;
            justify-content: center; }
    .layout-auth > .layout-section > .layout-block.footer {
      padding: var(--sizing-space-huge) var(--sizing-space-large); }

/**
 * Includes all dashboard layout styling
 */
/**
 * basic dashboard layout
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-dashboard {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .layout-dashboard > .layout-container {
    display: flex;
    position: absolute;
    align-content: stretch;
    inset: 0;
    z-index: 0;
    font: var(--typo-text-small); }
    .layout-dashboard > .layout-container > .main {
      flex: 1;
      position: relative;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5));
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3));
      overflow-y: scroll;
      overflow-x: auto;
      min-width: 59.5rem; }
      .layout-dashboard > .layout-container > .main > .content {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 var(--sizing-space-huge) var(--sizing-space-huge) var(--sizing-space-huge);
        margin: 0 auto;
        max-width: 75rem; }
        .layout-dashboard > .layout-container > .main > .content.small {
          max-width: 55rem; }
        .layout-dashboard > .layout-container > .main > .content.wide {
          max-width: initial; }
        .layout-dashboard > .layout-container > .main > .content > header {
          position: relative;
          z-index: 1;
          display: flex;
          flex-wrap: wrap;
          box-sizing: border-box;
          margin: var(--sizing-space-huge) 0; }
          .layout-dashboard > .layout-container > .main > .content > header > .title {
            flex: 1; }
            .layout-dashboard > .layout-container > .main > .content > header > .title .breadcrumb-nav {
              position: absolute;
              top: calc(-1 * var(--sizing-space-large)); }
            .layout-dashboard > .layout-container > .main > .content > header > .title h1 {
              margin: 0;
              hyphens: auto; }
          .layout-dashboard > .layout-container > .main > .content > header > .header-menu {
            flex: 0 1 auto;
            display: flex;
            flex-wrap: wrap;
            gap: var(--sizing-space-medium); }
        .layout-dashboard > .layout-container > .main > .content > .notice {
          margin: 0 0 var(--sizing-space-huge) 0; }

@media (max-width: 600px) {
  .layout-dashboard > .top {
    display: flex; }
  .layout-dashboard > .layout-container {
    top: calc(2.5rem + 2px); }
    .layout-dashboard > .layout-container > .main {
      min-width: 0;
      border-start-start-radius: 0; }
  .layout-dashboard > .layout-container > .main > .content > header {
    flex-direction: column;
    margin-bottom: var(--sizing-space-medium); }
    .layout-dashboard > .layout-container > .main > .content > header > .title {
      flex: 0 0 100%; }
    .layout-dashboard > .layout-container > .main > .content > header > .header-menu {
      flex: 0 0 100%;
      flex-direction: column;
      padding: var(--sizing-space-medium) 0 0 0; }
      .layout-dashboard > .layout-container > .main > .content > header > .header-menu > * {
        flex: 0 0 100%; }
  .layout-dashboard > .layout-container > .main > .content {
    padding: 0.5rem; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .layout-dashboard > .top {
    display: flex; }
  .layout-dashboard > .layout-container {
    top: calc(2.5rem + 2px); }
    .layout-dashboard > .layout-container > .main {
      min-width: 0;
      border-start-start-radius: 0; } }

/**
 * Extension to provide an expand feature to display a block on all the browser screen.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-dashboard > .layout-container > .main.expand {
  height: 100%;
  display: flex; }
  .layout-dashboard > .layout-container > .main.expand > .content {
    flex: 1;
    width: 100%; }
    .layout-dashboard > .layout-container > .main.expand > .content > .page, .layout-dashboard > .layout-container > .main.expand > .content > .block {
      flex: 1;
      position: relative;
      overflow: hidden; }
    .layout-dashboard > .layout-container > .main.expand > .content .expand {
      height: 100%; }
    .layout-dashboard > .layout-container > .main.expand > .content .scrollable {
      overflow: auto; }

/**
 * Includes all front layout styling
 */
/**
 * Base layout for the front presentation.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
/**
 * Config of the front layout.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-front {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-wrap: break-word;
  min-height: 100vh;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .layout-front .main-nav {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 4.375rem; }
  .layout-front .mini-nav {
    position: fixed;
    z-index: 1;
    height: 2.625rem; }
  .layout-front .main-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 4.375rem;
    box-sizing: border-box;
    z-index: 0; }
    @media (min-width: 601px) and (max-width: 1280px) {
      .layout-front .main-container {
        padding-top: 2.625rem; } }
    @media (max-width: 600px) {
      .layout-front .main-container {
        padding-top: 2.625rem; } }
  .layout-front.fullscreen > .main-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

@media (min-width: 601px) and (max-width: 1280px) {
  .layout-front .layout-section {
    min-width: unset; }
    .layout-front .layout-section .layout-block {
      width: 100%; }
  .layout-front .layout-section.nav .layout-block.nav {
    overflow-x: auto;
    overflow-scrolling: touch; } }

/**
 * Base layout for the front presentation.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-front .layout-section {
  position: relative;
  min-width: 80rem; }
  @media (min-width: 601px) and (max-width: 1280px) {
    .layout-front .layout-section {
      min-width: initial; } }
  @media (max-width: 600px) {
    .layout-front .layout-section {
      min-width: initial; } }
  .layout-front .layout-section.top {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    height: 100%; }
  .layout-front .layout-section.nav {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    @media (min-width: 601px) and (max-width: 1280px) {
      .layout-front .layout-section.nav {
        overflow-y: visible; } }
    @media (max-width: 600px) {
      .layout-front .layout-section.nav {
        overflow-y: visible; } }
    @media (min-width: 1281px) {
      .layout-front .layout-section.nav {
        height: 3.75rem; } }
  .layout-front .layout-section.header {
    background-size: cover;
    background-position: center center; }
    .layout-front .layout-section.header > .overlay {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: 100%;
      background: black;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.9) 100%); }
    .layout-front .layout-section.header.highlight {
      height: 475px; }
      @media (min-width: 601px) and (max-width: 1280px) {
        .layout-front .layout-section.header.highlight {
          height: auto; } }
      @media (max-width: 600px) {
        .layout-front .layout-section.header.highlight {
          height: auto; } }
  .layout-front .layout-section.content {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    min-height: 30rem; }
    .layout-front .layout-section.content.compact, .layout-front .layout-section.content.small {
      min-height: 0; }
    .layout-front .layout-section.content.alternate {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
    .layout-front .layout-section.content.inverted {
      background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top)); }
    .layout-front .layout-section.content > .anchor-trigger {
      top: -8.125rem;
      width: 100%;
      display: block;
      position: relative;
      visibility: hidden; }
      @media (min-width: 601px) and (max-width: 1280px) {
        .layout-front .layout-section.content > .anchor-trigger {
          top: calc(-1 * 4.375rem); } }
      @media (max-width: 600px) {
        .layout-front .layout-section.content > .anchor-trigger {
          top: calc(-1 * 4.375rem); } }
  .layout-front .layout-section.footer {
    margin-top: auto;
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top)); }
  .layout-front .layout-section.title {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    border-bottom: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .layout-front .layout-section.bottom {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    border-top: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .layout-front .layout-section.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: hidden; }
  .layout-front .layout-section.expand {
    flex: 1;
    min-height: auto; }
    .layout-front .layout-section.expand .expand {
      height: 100%; }
  .layout-front .layout-section.scrollable {
    overflow-y: auto;
    overflow: overlay; }
  .layout-front .layout-section.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 4.375rem;
    left: 0;
    right: 0;
    z-index: 1; }
    @media (min-width: 601px) and (max-width: 1280px) {
      .layout-front .layout-section.sticky {
        position: initial;
        top: 0; } }
    @media (max-width: 600px) {
      .layout-front .layout-section.sticky {
        position: initial;
        top: 0; } }

/**
 * Core element of the front layout.
 *
 * A page flow is built, however some elements can fill 100% of the body.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-front .layout-block {
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 80rem; }
  .layout-front .layout-block.narrow {
    max-width: 54rem; }
  @media (min-width: 601px) and (max-width: 1280px) {
    .layout-front .layout-block {
      width: 100%; } }
  @media (max-width: 600px) {
    .layout-front .layout-block {
      width: 100%; } }
  .layout-front .layout-block.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    padding: 0 var(--sizing-space-huge); }
    .layout-front .layout-block.top > .logo {
      margin-inline-end: var(--sizing-space-huge); }
    .layout-front .layout-block.top > .primary-nav {
      flex: 1; }
  .layout-front .layout-block.header {
    width: 100%;
    padding: var(--sizing-space-large) var(--sizing-space-huge); }
    .layout-front .layout-block.header.down {
      margin-top: auto; }
  .layout-front .layout-block.nav {
    padding: 0 var(--sizing-space-huge);
    box-sizing: border-box; }
    .layout-front .layout-block.nav ul {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
    @media (min-width: 601px) and (max-width: 1280px) {
      .layout-front .layout-block.nav {
        overflow-x: auto;
        overflow-scrolling: touch; } }
    @media (max-width: 600px) {
      .layout-front .layout-block.nav {
        overflow-x: auto;
        overflow-scrolling: touch; } }
  .layout-front .layout-block.content {
    padding: var(--sizing-space-huge) var(--sizing-space-huge); }
    .layout-front .layout-block.content.last {
      padding-bottom: calc(var(--sizing-space-huge)*2); }
    .layout-front .layout-block.content.spaceless {
      padding: 0 var(--sizing-space-huge) var(--sizing-space-huge); }
  .layout-front .layout-block.separator {
    padding: 0 var(--sizing-space-huge); }
    .layout-front .layout-block.separator .separator {
      height: 1px;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high3)); }
  .layout-front .layout-block.footer {
    padding: 6rem var(--sizing-space-huge); }
    .layout-front .layout-block.footer.small {
      padding: 0.25rem var(--sizing-space-huge); }
  .layout-front .layout-block.context {
    padding: 0 var(--sizing-space-huge); }
  .layout-front .layout-block.title {
    padding: var(--sizing-space-huge); }
  .layout-front .layout-block.bottom {
    padding: var(--sizing-space-large) var(--sizing-space-huge); }
  .layout-front .layout-block img {
    max-width: 100%; }
  .layout-front .layout-block img.scrollable {
    max-width: initial;
    overflow: auto; }

/**
 * Extension to handle notice directly as a wide section.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-front .layout-section.notice {
  border-radius: 0;
  border-inline-start: 0;
  border-inline-end: 0;
  margin-bottom: 0;
  padding: var(--sizing-space-medium); }
  .layout-front .layout-section.notice button {
    margin-top: calc(-1 * var(--sizing-space-medium));
    margin-bottom: calc(-1 * var(--sizing-space-medium)); }
  .layout-front .layout-section.notice .layout-block.content {
    padding: 0; }
  .layout-front .layout-section.notice + .layout-section.bottom {
    border-top: 0; }

/**
 * Extension to handle the double-nav in a nav section.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
@media (min-width: 1281px) {
  .layout-front .layout-section.double-nav {
    background: linear-gradient(90deg, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)) 50%, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)) 50%);
    height: 3.75rem; }
    [dir="rtl"] .layout-front .layout-section.double-nav {
      background: linear-gradient(90deg, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)) 50%, hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)) 50%); }
    .layout-front .layout-section.double-nav .layout-block.double-nav {
      display: flex;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
      padding: 0 var(--sizing-space-huge); }
      .layout-front .layout-section.double-nav .layout-block.double-nav > :first-child > ul {
        background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
      .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child > ul {
        background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); }
      .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child {
        flex: 1;
        position: relative;
        margin-inline-start: calc(1.8 * calc(var(--sizing-space-large)*2)); }
        .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child::before {
          position: absolute;
          content: " ";
          width: calc(calc(var(--sizing-space-large)*2)*2);
          height: 100%;
          inset-inline-start: calc(-1 * calc(var(--sizing-space-large)*2));
          background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
          border-inline-start: 0.25rem solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high1));
          transform: skew(30deg); }
        .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child::after {
          position: absolute;
          content: " ";
          inset-block-start: 0;
          inset-inline-start: 100%;
          inline-size: var(--sizing-space-huge);
          block-size: 100%;
          background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); } }

@media (min-width: 601px) and (max-width: 1280px) {
  .layout-front .layout-section.double-nav .layout-block.double-nav > * {
    overflow-x: auto;
    overflow-scrolling: touch; }
  .layout-front .layout-section.double-nav .layout-block.double-nav > :first-child > ul {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child > ul {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); } }

@media (max-width: 600px) {
  .layout-front .layout-section.double-nav .layout-block.double-nav > * {
    overflow-x: auto;
    overflow-scrolling: touch; }
  .layout-front .layout-section.double-nav .layout-block.double-nav > :first-child > ul {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4)); }
  .layout-front .layout-section.double-nav .layout-block.double-nav > :last-child > ul {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2)); } }

/**
 * Extension to handle the presentation pages in the layout
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-front .layout-section.presentation.header {
  min-height: 32rem;
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)) url(https://www.lollfl.com/asset/logo/toornament/pattern-background-header.svg?800607295) no-repeat bottom center;
  background-blend-mode: initial;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }
  .layout-front .layout-section.presentation.header.small {
    min-height: 16rem; }

.layout-front .layout-section.presentation.content {
  min-height: inherit; }
  .layout-front .layout-section.presentation.content:nth-of-type(odd) {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .layout-front .layout-section.presentation.content:nth-of-type(even) {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top)); }
  .layout-front .layout-section.presentation.content.banner {
    min-height: auto; }

.layout-front .layout-section.presentation.footer {
  min-height: none;
  background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_high5)) url(https://www.lollfl.com/asset/logo/toornament/pattern-background-header.svg?800607295) no-repeat bottom center;
  color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-i_bottom)); }

.layout-front .layout-block.presentation.header {
  padding-top: 9rem;
  padding-bottom: 9rem; }
  .layout-front .layout-block.presentation.header.small {
    padding-top: 6rem;
    padding-bottom: 6rem; }
  .layout-front .layout-block.presentation.header .illustration {
    display: inline-block;
    position: relative;
    margin-bottom: calc(-1 * 4rem - 9rem);
    margin-top: 5rem;
    z-index: 1; }
    @media (max-width: 600px) {
      .layout-front .layout-block.presentation.header .illustration {
        max-width: 80%; } }

.layout-front .layout-block.presentation.content {
  padding-top: 9rem;
  padding-bottom: 9rem; }
  .layout-front .layout-block.presentation.content.banner {
    padding-top: var(--sizing-space-huge);
    padding-bottom: var(--sizing-space-huge); }
  .layout-front .layout-block.presentation.content.highlight {
    padding-bottom: 0; }

.layout-front .layout-block.presentation.footer {
  padding-top: 9rem;
  padding-bottom: 9rem; }

/**
 * Includes all custom-page layout styling
 */
/**
 * Core element of the custom-page layout.
 *
 * A page flow is built, however some elements can fill 100% of the body.
 *
 * @author Olivier Paradis <oparadis@oxent.net>
 */
.layout-custom-page > .tournament {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)) url(https://www.lollfl.com/asset/custom-page/background-default.png?800607295) no-repeat top center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 150px 35px 0; }
  .layout-custom-page > .tournament > iframe {
    padding-bottom: 10px; }
  .layout-custom-page > .tournament > a {
    display: block;
    padding: 10px;
    font: var(--typo-label-small);
    color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium)); }
    .layout-custom-page > .tournament > a:hover, .layout-custom-page > .tournament > a:focus {
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-low3)); }

/**
 * Includes all widget layout styling
 */
/**
 * the core widget layout.
 *
 * @author Vincent Barrault <vbarrault@oxent.net>
 */
.layout-widget.fixed {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  right: 0.125rem;
  bottom: 0.125rem;
  display: flex;
  flex-direction: column; }
  .layout-widget.fixed > header {
    position: relative;
    height: 4rem; }
  .layout-widget.fixed > .main {
    flex: 1; }
  .layout-widget.fixed > footer {
    height: 2rem; }

.layout-widget {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
  border-radius: 0.25rem;
  box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  border: 1px solid hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high2));
  overflow: hidden; }
  .layout-widget > header {
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
    box-sizing: content-box;
    padding: 0.25rem 1rem;
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
    .layout-widget > header > *:not(:last-child) {
      margin-inline-end: 1rem; }
    .layout-widget > header > a.link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50px;
      margin: 0; }
      .layout-widget > header > a.link.header {
        bottom: 0; }
    .layout-widget > header > .logo {
      flex: 0 0 auto;
      width: 2.75rem;
      height: 2.75rem; }
      .layout-widget > header > .logo > img {
        height: 2.75rem; }
    .layout-widget > header > .tournament {
      flex: 1 0 auto;
      width: 0; }
      .layout-widget > header > .tournament > .title {
        font-weight: bold;
        font: var(--typo-title-small);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; }
      .layout-widget > header > .tournament > .secondary {
        color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
        font: var(--typo-text-small);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; }
    .layout-widget > header > .info {
      flex: 0 0 auto;
      color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-medium));
      font: var(--typo-text-small);
      font-weight: 900; }
  .layout-widget > .main {
    position: relative;
    box-sizing: content-box;
    padding: 1rem;
    overflow: hidden; }
    .layout-widget > .main.scrollable {
      overflow: auto; }
    .layout-widget > .main > .ellipsis {
      overflow: hidden;
      position: relative;
      height: 100%; }
      .layout-widget > .main > .ellipsis:before {
        content: "";
        float: left;
        width: 1px;
        height: 100%; }
      .layout-widget > .main > .ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-inline-start: -1px; }
        [dir="rtl"] .layout-widget > .main > .ellipsis > *:first-child {
          float: left; }
      .layout-widget > .main > .ellipsis > .more {
        position: absolute;
        box-sizing: content-box;
        inset-inline-end: 0;
        inset-block-end: 0;
        inline-size: 8em;
        block-size: 1.5rem;
        padding-inline-end: 1px;
        text-align: end;
        background-size: 100% 100%;
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white); }
        [dir="rtl"] .layout-widget > .main > .ellipsis > .more {
          background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
          background: -moz-linear-gradient(to left, rgba(255, 255, 255, 0), white 15%, white);
          background: -o-linear-gradient(to left, rgba(255, 255, 255, 0), white 15%, white);
          background: -ms-linear-gradient(to left, rgba(255, 255, 255, 0), white 15%, white);
          background: linear-gradient(to left, rgba(255, 255, 255, 0), white 15%, white); }
  .layout-widget > footer {
    z-index: 999;
    height: 2rem;
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .layout-widget > footer > .apps {
      display: flex; }
      .layout-widget > footer > .apps > * {
        margin-inline-start: 1rem; }
    .layout-widget > footer > .copyrights {
      display: flex;
      align-items: center;
      height: 2rem;
      box-sizing: border-box;
      padding: 0;
      padding-inline-end: var(--sizing-space-small);
      background-position-x: 1px;
      background-repeat: no-repeat;
      background-size: 100% auto;
      font: var(--typo-text-tiny);
      font-size: 0.625rem;
      background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
      position: relative; }
      .layout-widget > footer > .copyrights > .logo {
        z-index: 1; }
      .layout-widget > footer > .copyrights:before {
        position: absolute;
        transform-origin: top right;
        transform: skew(-25deg);
        inset-inline-start: calc(-1 * var(--sizing-space-tiny)var(--sizing-space-small)-var(--sizing-space-tiny));
        border-start-start-radius: var(--sizing-space-tiny);
        content: " ";
        background-color: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high4));
        width: 3rem;
        height: 100%; }
        [dir="rtl"] .layout-widget > footer > .copyrights:before {
          transform: skew(25deg); }
    .layout-widget > footer > a.link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }

@media (max-width: 639px) {
  .layout-widget > header > .info, .layout-widget .layout-widget > header > .logo {
    display: none; }
  .layout-widget .grid-flex > .widget-small-size-content {
    flex: 0 0 auto;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-size-full {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-1 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-2 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-2 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-3 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-3 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-3 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-4 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-4 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-4 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-4 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-5 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-5 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-5 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-5 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-5 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-6 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-6 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-6 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-6 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-6 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-6 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-7 {
    flex: 0 0 14.28571%;
    min-inline-size: 14.28571%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-7 {
    flex: 0 0 28.57143%;
    min-inline-size: 28.57143%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-7 {
    flex: 0 0 42.85714%;
    min-inline-size: 42.85714%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-7 {
    flex: 0 0 57.14286%;
    min-inline-size: 57.14286%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-7 {
    flex: 0 0 71.42857%;
    min-inline-size: 71.42857%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-7 {
    flex: 0 0 85.71429%;
    min-inline-size: 85.71429%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-7 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-8 {
    flex: 0 0 12.5%;
    min-inline-size: 12.5%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-8 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-8 {
    flex: 0 0 37.5%;
    min-inline-size: 37.5%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-8 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-8 {
    flex: 0 0 62.5%;
    min-inline-size: 62.5%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-8 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-8 {
    flex: 0 0 87.5%;
    min-inline-size: 87.5%; }
  .layout-widget .grid-flex > .widget-small-size-8-of-8 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-9 {
    flex: 0 0 11.11111%;
    min-inline-size: 11.11111%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-9 {
    flex: 0 0 22.22222%;
    min-inline-size: 22.22222%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-9 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-9 {
    flex: 0 0 44.44444%;
    min-inline-size: 44.44444%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-9 {
    flex: 0 0 55.55556%;
    min-inline-size: 55.55556%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-9 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-9 {
    flex: 0 0 77.77778%;
    min-inline-size: 77.77778%; }
  .layout-widget .grid-flex > .widget-small-size-8-of-9 {
    flex: 0 0 88.88889%;
    min-inline-size: 88.88889%; }
  .layout-widget .grid-flex > .widget-small-size-9-of-9 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-10 {
    flex: 0 0 10%;
    min-inline-size: 10%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-10 {
    flex: 0 0 20%;
    min-inline-size: 20%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-10 {
    flex: 0 0 30%;
    min-inline-size: 30%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-10 {
    flex: 0 0 40%;
    min-inline-size: 40%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-10 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-10 {
    flex: 0 0 60%;
    min-inline-size: 60%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-10 {
    flex: 0 0 70%;
    min-inline-size: 70%; }
  .layout-widget .grid-flex > .widget-small-size-8-of-10 {
    flex: 0 0 80%;
    min-inline-size: 80%; }
  .layout-widget .grid-flex > .widget-small-size-9-of-10 {
    flex: 0 0 90%;
    min-inline-size: 90%; }
  .layout-widget .grid-flex > .widget-small-size-10-of-10 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-11 {
    flex: 0 0 9.09091%;
    min-inline-size: 9.09091%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-11 {
    flex: 0 0 18.18182%;
    min-inline-size: 18.18182%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-11 {
    flex: 0 0 27.27273%;
    min-inline-size: 27.27273%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-11 {
    flex: 0 0 36.36364%;
    min-inline-size: 36.36364%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-11 {
    flex: 0 0 45.45455%;
    min-inline-size: 45.45455%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-11 {
    flex: 0 0 54.54545%;
    min-inline-size: 54.54545%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-11 {
    flex: 0 0 63.63636%;
    min-inline-size: 63.63636%; }
  .layout-widget .grid-flex > .widget-small-size-8-of-11 {
    flex: 0 0 72.72727%;
    min-inline-size: 72.72727%; }
  .layout-widget .grid-flex > .widget-small-size-9-of-11 {
    flex: 0 0 81.81818%;
    min-inline-size: 81.81818%; }
  .layout-widget .grid-flex > .widget-small-size-10-of-11 {
    flex: 0 0 90.90909%;
    min-inline-size: 90.90909%; }
  .layout-widget .grid-flex > .widget-small-size-11-of-11 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-1-of-12 {
    flex: 0 0 8.33333%;
    min-inline-size: 8.33333%; }
  .layout-widget .grid-flex > .widget-small-size-2-of-12 {
    flex: 0 0 16.66667%;
    min-inline-size: 16.66667%; }
  .layout-widget .grid-flex > .widget-small-size-3-of-12 {
    flex: 0 0 25%;
    min-inline-size: 25%; }
  .layout-widget .grid-flex > .widget-small-size-4-of-12 {
    flex: 0 0 33.33333%;
    min-inline-size: 33.33333%; }
  .layout-widget .grid-flex > .widget-small-size-5-of-12 {
    flex: 0 0 41.66667%;
    min-inline-size: 41.66667%; }
  .layout-widget .grid-flex > .widget-small-size-6-of-12 {
    flex: 0 0 50%;
    min-inline-size: 50%; }
  .layout-widget .grid-flex > .widget-small-size-7-of-12 {
    flex: 0 0 58.33333%;
    min-inline-size: 58.33333%; }
  .layout-widget .grid-flex > .widget-small-size-8-of-12 {
    flex: 0 0 66.66667%;
    min-inline-size: 66.66667%; }
  .layout-widget .grid-flex > .widget-small-size-9-of-12 {
    flex: 0 0 75%;
    min-inline-size: 75%; }
  .layout-widget .grid-flex > .widget-small-size-10-of-12 {
    flex: 0 0 83.33333%;
    min-inline-size: 83.33333%; }
  .layout-widget .grid-flex > .widget-small-size-11-of-12 {
    flex: 0 0 91.66667%;
    min-inline-size: 91.66667%; }
  .layout-widget .grid-flex > .widget-small-size-12-of-12 {
    flex: 0 0 100%;
    min-inline-size: 100%; }
  .layout-widget .grid-flex > .widget-small-size-fixed-1 {
    flex: 0 0 1rem;
    min-inline-size: 1rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-2 {
    flex: 0 0 2rem;
    min-inline-size: 2rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-3 {
    flex: 0 0 3rem;
    min-inline-size: 3rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-4 {
    flex: 0 0 4rem;
    min-inline-size: 4rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-5 {
    flex: 0 0 5rem;
    min-inline-size: 5rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-6 {
    flex: 0 0 6rem;
    min-inline-size: 6rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-7 {
    flex: 0 0 7rem;
    min-inline-size: 7rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-8 {
    flex: 0 0 8rem;
    min-inline-size: 8rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-9 {
    flex: 0 0 9rem;
    min-inline-size: 9rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-10 {
    flex: 0 0 10rem;
    min-inline-size: 10rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-11 {
    flex: 0 0 11rem;
    min-inline-size: 11rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-12 {
    flex: 0 0 12rem;
    min-inline-size: 12rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-13 {
    flex: 0 0 13rem;
    min-inline-size: 13rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-14 {
    flex: 0 0 14rem;
    min-inline-size: 14rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-15 {
    flex: 0 0 15rem;
    min-inline-size: 15rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-16 {
    flex: 0 0 16rem;
    min-inline-size: 16rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-17 {
    flex: 0 0 17rem;
    min-inline-size: 17rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-18 {
    flex: 0 0 18rem;
    min-inline-size: 18rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-19 {
    flex: 0 0 19rem;
    min-inline-size: 19rem; }
  .layout-widget .grid-flex > .widget-small-size-fixed-20 {
    flex: 0 0 20rem;
    min-inline-size: 20rem; }
  .layout-widget .grid-flex > .widget-small-weight-1 {
    flex: 1;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-2 {
    flex: 2;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-3 {
    flex: 3;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-4 {
    flex: 4;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-5 {
    flex: 5;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-6 {
    flex: 6;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-7 {
    flex: 7;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-8 {
    flex: 8;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-9 {
    flex: 9;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-10 {
    flex: 10;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-11 {
    flex: 11;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-weight-12 {
    flex: 12;
    min-inline-size: 0; }
  .layout-widget .grid-flex > .widget-small-show {
    display: block; }
  .layout-widget .grid-flex > .widget-small-hide {
    display: none; } }

/**
 * Includes all editor layout styling
 */
/**
 * Main layout css of the editor layout.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
/**
 * Config of the editor layout.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
.layout-editor {
  display: grid;
  width: 100vw;
  height: 100vh;
  gap: 0; }
  .layout-editor.simple {
    grid-template-rows: 4.375rem 1fr;
    grid-template-areas: "top" "main"; }
  .layout-editor.toolbox {
    grid-template-columns: 25rem 1fr;
    grid-template-rows: 4.375rem 2.625rem 1fr;
    grid-template-areas: "top top" "side head" "side main"; }
  .layout-editor.tunnel {
    display: block;
    box-sizing: border-box;
    max-width: 87.5rem;
    height: auto;
    margin: 0 auto;
    padding: var(--sizing-space-huge); }
  .layout-editor .layout-area.top {
    grid-area: top;
    z-index: 2; }
  .layout-editor .layout-area.side {
    grid-area: side;
    overflow-y: auto;
    z-index: 2;
    position: relative; }
  .layout-editor .layout-area.head {
    grid-area: head;
    overflow: hidden;
    z-index: 1; }
  .layout-editor .layout-area.main {
    grid-area: main;
    overflow-y: auto;
    z-index: 0; }
  .layout-editor .layout-area.main {
    line-height: 0; }
  .layout-editor .layout-area .expand {
    height: 100%; }

/**
 * Main layout css of the editor layout.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
.layout-editor {
  background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }
  .layout-editor .layout-area.top {
    background: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-variant-i_top));
    padding: 0 var(--sizing-space-large); }
  .layout-editor .layout-area.side {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
    .layout-editor .layout-area.side .panel {
      display: block;
      position: absolute;
      inset: 0;
      background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
      z-index: 1; }
  .layout-editor .layout-area.head {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-top));
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
  .layout-editor .layout-area.main {
    background: hsl(var(--color-standard-h), var(--color-standard-s), var(--color-variant-high5)); }

/**
 * Handles the preview using in iframe to ensure it expands to the whole layout area
 */
.layout-editor .layout-area.main .preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto; }
  .layout-editor .layout-area.main .preview-container > iframe {
    border: 0;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
    width: inherit;
    height: inherit; }

/**
 * A core layout applied to all concerto layouts to define a basic color and background.
 */
body.layout-concerto {
  display: block;
  color: var(--body-color);
  background: var(--body-background-color); }

/**
 * Config of the editor layout.
 *
 * @author Olivier Paradis <olivier.paradis@toornament.com>
 */
.layout-concerto-basic {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh; }