@charset "UTF-8";
/** strip-Unit($number)
 * Retourne un nombre sans les unités. Par exemple 16px devient 16
 *
 * @scope  Public
 *
 * @param  $number [INT] : Nombre avec unité à convertir
 *
 * @return [INT]
 */
/* set-color-opacity($color, $opacity)
 * Modifie l'opacité d'une couleur RGB ou RGBA
 *
 * @scope  Public
 *
 * @param  $color   [STRING] : Couleur en hexadécimal, ou au format rgb(a)
 * @param  $opacity [INT]    : Pourcentage d'opacité compris entre 0 et 100 (0 = transparent, 100 = opaque)
 *
 * @return [STRING] : rgba(r, g, b, a)
 */
/* color-luminance($color)
 * Retourne la luminosité d'une couleur
 *
 * @scope  Public
 *
 * @param  $color   [STRING] : Couleur en hexadécimal, ou au format rgb(a)
 *
 * @return [FLOAT] : compris entre 0.0 et 1.0
 */
/* color-yiq($color, $threshold : 0.40)
 * Retourne la couleur contrasté en fonction de $color
 *
 * @scope  Public
 *
 * @param  $color   [STRING] : Couleur en hexadécimal, ou au format rgb(a)
 * @param  $threshold   [FLOAT] : Seuil de luminosité
 *
 *  * @return [STRING] : retourne la couleur en hexadécimale
 */
/* make-shadow($preset:"custom", $color:#000, $left:0, $top:1, $blur:1, $spead:0)
* Utile pour créer des ombres avec box-shadow et text-shadow
* Quelques modèle d'ombre cf https://brumm.af/shadows
* Autres ombres sous forme de mixins :
* - https://css-tricks.com/snippets/sass/material-shadows-mixin/
* - https://www.sitepoint.com/ultimate-long-shadow-sass-mixin/
* Exemple :
*
* @scope  Public
*
* @param
* @param
*
* @return []
*/
/* ------------------------------------------------------------------------------------------------------
  * _palette.scss : Liste de couleurs nominative couramment utilisées dans l"industrie informatique
  -------------------------------------------------------------------------------------------------------- */
/*  - - - - - - - - - - - - - - - - - -
 * Custom colors with a mix of FlatUI and Material
 *  Credits:
 *  http://designmodo.github.io/Flat-UI/
 *  https://www.google.com/design/spec/style/color.html
 *
 *  - - - - - - - - - - - - - - - - - -
 */
/* Taille 18.4px, basé sur la taille de la police du Body 16px  */
/* neutral light color */
/* neutral dark color */
/* primary light color */
/* primary dark color */
/* Secondary light color */
/* Secondary dark color */
/* Success color */
/* Info color */
/* Warning color */
/* Danger color */
/* misc colors */
*,
*:after,
*:before,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

html {
  -webkit-text-size-adjust: none; /*─ Debug font size on iphone when landscape orientation ─*/
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  cursor: default;
  scroll-behavior: smooth;
  tab-size: 4;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  position: relative;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

nav,
header,
footer,
div,
span,
h1,
h2,
h3,
h4,
h5,
p,
a,
img,
ul,
li,
table,
form,
label,
input,
textarea,
select,
button {
  font-size: 1em;
  font-family: inherit;
}

/* Preventing Text Overflow */
h1,
h2,
h3,
h4,
h5,
p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}

img,
video,
picture {
  display: block;
  max-width: 100%;
}

[role=img],
img,
video {
  width: 100%;
  height: auto;
}

svg {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

dl dl,
dl ol,
dl ul,
ol dl,
ul dl,
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}
ul[role=list] li ul:not([role=list]),
ul[role=list] li ol:not([role=list]),
ol[role=list] li ul:not([role=list]),
ol[role=list] li ol:not([role=list]) {
  list-style: initial;
}
ul[role=list] li ul,
ul[role=list] li ol,
ol[role=list] li ul,
ol[role=list] li ol {
  margin-left: var(--spacing);
}

em {
  font-weight: 300;
}

b,
strong {
  font-weight: 700;
}

small {
  font-size: 0.6em !important;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

[aria-hidden=false][hidden] {
  display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
*:before,
*:after,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
:root {
  --doc-height: 100%;
}

/* common layout settings */
:root {
  --font-content-line-height: 1.618;
  --line-height-ratio: 161.8033%;
  --font-family: Roboto, Noto, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-family-mono: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
  --font-family-alt: Georgia, Times, Times New Roman, serif;
  --font-content-weight: 400;
  --heading-font-size: 1em;
  --heading-font-weight: 500;
  --flow-space-ratio: 1.272;
  --heading-flow-space-ratio: 1.618;
  --spacing: 1.2rem;
  --flow-spacing: 1.5rem;
  --half-spacing: calc(var(--spacing) * 0.5);
  /* Resolving Margin Spacing For Zoom */
  --block-spacing: min(6.4rem, 8vh);
  --block-half-spacing: min(3.2rem, 4vh);
  --inner-spacing: calc(var(--spacing) * 2);
  --inner-v-spacing: var(--inner-spacing);
  --inner-h-spacing: var(--inner-spacing);
  --min-grid-col-width: 0;
  --elem-border-width: 1px;
  --elem-border-radius: 0.5rem;
  --elem-outline-width: 2px;
  --control-border-radius: 0.35rem;
  --control-border-width: 1px;
  --control-input-height: 2rem;
  --ratio-square: 1;
  --ratio-letterbox: 4/3;
  --ratio-portrait: 3/4;
  --ratio-wide: 16/9;
  --ratio-ultraWide: 18/5;
  --ratio-cinemaScope: 2.35/1;
  --ratio-golden: 1.618/1;
  --ratio-goldenSquare: 1.272/1;
  --ratio-tv: 14/9;
}

/* light theme schema settings */
[data-theme=light],
:root {
  color-scheme: light;
  --scrollbar-color-background: var(--neutral-color-variation-1);
  --scrollbar-color-thumb: var(--secondary-color);
  --scrollbar-color-thumb-border: var(--neutral-color);
  --color-h1: #1a1c1d;
  --color-h2: #262727;
  --color-h3: #313131;
  --color-h4: #3c3c3b;
  --color-h5: #474745;
  --color-h6: #525251;
  --neutral-color-h: 0deg;
  --neutral-color-s: 0%;
  --neutral-color-l: 98.8235294118%;
  --neutral-color: hsl(var(--neutral-color-h), var(--neutral-color-s), var(--neutral-color-l));
  --neutral-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.06),0 16px 16px rgba(0, 0, 0, 0.06);
  --neutral-shadow-alt: 0 5px 6px rgba(0, 0, 0, 0.15), 0 12px 16px rgba(0, 0, 0, 0.15);
  --on-neutral-color-s: 0%;
  --on-neutral-color-l: 10%;
  --on-neutral-color: hsl(var(--neutral-color-h), var(--on-neutral-color-s), var(--on-neutral-color-l));
  --neutral-color-variation-1-s: 0%;
  --neutral-color-variation-1-l: 97%;
  --neutral-color-variation-1: hsl(var(--neutral-color-h), var(--neutral-color-variation-1-s), var(--neutral-color-variation-1-l));
  --on-neutral-color-variation-1-s: 0%;
  --on-neutral-color-variation-1-l: 10%;
  --on-neutral-color-variation-1: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-1-s), var(--on-neutral-color-variation-1-l));
  --neutral-color-variation-2-s: 0%;
  --neutral-color-variation-2-l: 92%;
  --neutral-color-variation-2: hsl(var(--neutral-color-h), var(--neutral-color-variation-2-s), var(--neutral-color-variation-2-l));
  --on-neutral-color-variation-2-s: 0%;
  --on-neutral-color-variation-2-l: 15%;
  --on-neutral-color-variation-2: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-2-s), var(--on-neutral-color-variation-2-l));
  --neutral-color-variation-3-s: 0%;
  --neutral-color-variation-3-l: 75%;
  --neutral-color-variation-3: hsl(var(--neutral-color-h), var(--neutral-color-variation-3-s), var(--neutral-color-variation-3-l));
  --on-neutral-color-variation-3-s: 0%;
  --on-neutral-color-variation-3-l: 50%;
  --on-neutral-color-variation-3: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-3-s), var(--on-neutral-color-variation-3-l));
  /* Your main brand color */
  --primary-color-h: 199.6261682243deg;
  --primary-color-s: 60.4519774011%;
  --primary-color-l: 34.7058823529%;
  /* Primary (brand) color should be used at 10%, principally for your CTA, input elements, links */
  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
  --on-primary-color-s: 60.4519774011%;
  --on-primary-color-l: 96%;
  --on-primary-color: hsl(var(--primary-color-h), var(--on-primary-color-s), var(--on-primary-color-l));
  --primary-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.06),0 16px 16px rgba(0, 0, 0, 0.06);
  --primary-color-variation-1-s: 60.4519774011%;
  --primary-color-variation-1-l: 55%;
  --primary-color-variation-1: hsl(var(--primary-color-h), var(--primary-color-variation-1-s), var(--primary-color-variation-1-l));
  --primary-shadow-variation-1: none;
  --on-primary-color-variation-1-s: 60.4519774011%;
  --on-primary-color-variation-1-l: 98%;
  --on-primary-color-variation-1: hsl(var(--primary-color-h), var(--on-primary-color-variation-1-s), var(--on-primary-color-variation-1-l));
  --primary-color-variation-2-s: 100%;
  --primary-color-variation-2-l: 25%;
  --primary-color-variation-2: hsl(var(--primary-color-h), var(--primary-color-variation-2-s), var(--primary-color-variation-2-l));
  --primary-shadow-variation-2: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.16), 0 8px 8px rgba(0, 0, 0, 0.2);
  --on-primary-color-variation-2-s: 60.4519774011%;
  --on-primary-color-variation-2-l: 85%;
  --on-primary-color-variation-2: hsl(var(--primary-color-h), var(--on-primary-color-variation-2-s), var(--on-primary-color-variation-2-l));
  --primary-color-variation-3-s: 60.4519774011%;
  --primary-color-variation-3-l: 40%;
  --primary-color-variation-3: hsl(var(--primary-color-h), var(--primary-color-variation-3-s), var(--primary-color-variation-3-l));
  --primary-shadow-variation-3: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),0 16px 16px rgba(0, 0, 0, 0.12);
  --on-primary-color-variation-3-s: 60.4519774011%;
  --on-primary-color-variation-3-l: 80%;
  --on-primary-color-variation-3: hsl(var(--primary-color-h), var(--on-primary-color-variation-3-s), var(--on-primary-color-variation-3-l));
  /* Your secondary color */
  --secondary-color-h: 210deg;
  --secondary-color-s: 28.7671232877%;
  --secondary-color-l: 50%;
  /* Secondary color should be used at 30%  */
  --secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l));
  --on-secondary-color-s: 28.7671232877%;
  --on-secondary-color-l: 95%;
  --on-secondary-color: hsl(var(--secondary-color-h), var(--on-secondary-color-s), var(--on-secondary-color-l));
  --secondary-color-variation-1-s: 28.7671232877%;
  --secondary-color-variation-1-l: 40%;
  --secondary-color-variation-1: hsl(var(--secondary-color-h), var(--secondary-color-variation-1-s), var(--secondary-color-variation-1-l));
  --on-secondary-color-variation-1-s: 28.7671232877%;
  --on-secondary-color-variation-1-l: 95%;
  --on-secondary-color-variation-1: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-1-s), var(--on-secondary-color-variation-1-l));
  --secondary-color-variation-2-s: 28.7671232877%;
  --secondary-color-variation-2-l: 25%;
  --secondary-color-variation-2: hsl(var(--secondary-color-h), var(--secondary-color-variation-2-s), var(--secondary-color-variation-2-l));
  --on-secondary-color-variation-2-s: 28.7671232877%;
  --on-secondary-color-variation-2-l: 80%;
  --on-secondary-color-variation-2: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-2-s), var(--on-secondary-color-variation-2-l));
  --secondary-color-variation-3-s: 28.7671232877%;
  --secondary-color-variation-3-l: 35%;
  --secondary-color-variation-3: hsl(var(--secondary-color-h), var(--secondary-color-variation-3-s), var(--secondary-color-variation-3-l));
  --on-secondary-color-variation-3-s: 28.7671232877%;
  --on-secondary-color-variation-3-l: 85%;
  --on-secondary-color-variation-3: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-3-s), var(--on-secondary-color-variation-3-l));
  --divider-color: rgba(0, 0, 0, 0.25);
}

/* dark theme schema settings */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --color-h1: #fcfcfc;
    --color-h2: #f7f7f7;
    --color-h3: #f1f1f1;
    --color-h4: #d2d0d0;
    --color-h5: #b2afaf;
    --color-h6: #a2a1a3;
    --neutral-color-h: 200deg;
    --neutral-color-s: 5.4545454545%;
    --neutral-color-l: 13%;
    --neutral-color: hsl(var(--neutral-color-h), var(--neutral-color-s), var(--neutral-color-l));
    --on-neutral-color-s: 5.4545454545%;
    --on-neutral-color-l: 96%;
    --on-neutral-color: hsl(var(--neutral-color-h), var(--on-neutral-color-s), var(--on-neutral-color-l));
    --neutral-color-variation-1-s: 5.4545454545%;
    --neutral-color-variation-1-l: 14%;
    --neutral-color-variation-1: hsl(var(--neutral-color-h), var(--neutral-color-variation-1-s), var(--neutral-color-variation-1-l));
    --on-neutral-color-variation-1-s: 5.4545454545%;
    --on-neutral-color-variation-1-l: 96%;
    --on-neutral-color-variation-1: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-1-s), var(--on-neutral-color-variation-1-l));
    --neutral-color-variation-2-s: 5.4545454545%;
    --neutral-color-variation-2-l: 20%;
    --neutral-color-variation-2: hsl(var(--neutral-color-h), var(--neutral-color-variation-2-s), var(--neutral-color-variation-2-l));
    --on-neutral-color-variation-2-s: 5.4545454545%;
    --on-neutral-color-variation-2-l: 92%;
    --on-neutral-color-variation-2: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-2-s), var(--on-neutral-color-variation-2-l));
    --neutral-color-variation-3-s: 5.4545454545%;
    --neutral-color-variation-3-l: 25%;
    --neutral-color-variation-3: hsl(var(--neutral-color-h), var(--neutral-color-variation-3-s), var(--neutral-color-variation-3-l));
    --on-neutral-color-variation-3-s: 5.4545454545%;
    --on-neutral-color-variation-3-l: 50%;
    --on-neutral-color-variation-3: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-3-s), var(--on-neutral-color-variation-3-l));
    /* Your main brand color */
    --primary-color-s: 60.4519774011%;
    --primary-color-l: 50%;
    /* Primary (brand) color should be used at 10%, principally for your CTA, input elements, links */
    --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
    --on-primary-color-s: 70%;
    --on-primary-color-l: 95%;
    --on-primary-color: hsl(var(--primary-color-h), var(--on-primary-color-s), var(--on-primary-color-l));
    --primary-color-variation-1-s: 70%;
    --primary-color-variation-1-l: 60%;
    --primary-color-variation-1: hsl(var(--primary-color-h), var(--primary-color-variation-1-s), var(--primary-color-variation-1-l));
    --on-primary-color-variation-1-s: 60.4519774011%;
    --on-primary-color-variation-1-l: 98%;
    --on-primary-color-variation-1: hsl(var(--primary-color-h), var(--on-primary-color-variation-1-s), var(--on-primary-color-variation-1-l));
    --primary-color-variation-2-s: 60.4519774011%;
    --primary-color-variation-2-l: 70%;
    --primary-color-variation-2: hsl(var(--primary-color-h), var(--primary-color-variation-2-s), var(--primary-color-variation-2-l));
    --on-primary-color-variation-2-s: 60.4519774011%;
    --on-primary-color-variation-2-l: 9%;
    --on-primary-color-variation-2: hsl(var(--primary-color-h), var(--on-primary-color-variation-2-s), var(--on-primary-color-variation-2-l));
    --primary-color-variation-3-s: 60.4519774011%;
    --primary-color-variation-3-l: 65%;
    --primary-color-variation-3: hsl(var(--primary-color-h), var(--primary-color-variation-3-s), var(--primary-color-variation-3-l));
    --on-primary-color-variation-3-s: 60.4519774011%;
    --on-primary-color-variation-3-l: 80%;
    --on-primary-color-variation-3: hsl(var(--primary-color-h), var(--on-primary-color-variation-3-s), var(--on-primary-color-variation-3-l));
    /* Your secondary color */
    --secondary-color-s: 28.7671232877%;
    --secondary-color-l: 50%;
    /* Secondary color should be used at 30%  */
    --secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l));
    --on-secondary-color-s: 28.7671232877%;
    --on-secondary-color-l: 95%;
    --on-secondary-color: hsl(var(--secondary-color-h), var(--on-secondary-color-s), var(--on-secondary-color-l));
    --secondary-color-variation-1-s: 28.7671232877%;
    --secondary-color-variation-1-l: 60%;
    --secondary-color-variation-1: hsl(var(--secondary-color-h), var(--secondary-color-variation-1-s), var(--secondary-color-variation-1-l));
    --on-secondary-color-variation-1-s: 28.7671232877%;
    --on-secondary-color-variation-1-l: 95%;
    --on-secondary-color-variation-1: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-1-s), var(--on-secondary-color-variation-1-l));
    --secondary-color-variation-2-s: 28.7671232877%;
    --secondary-color-variation-2-l: 65%;
    --secondary-color-variation-2: hsl(var(--secondary-color-h), var(--secondary-color-variation-2-s), var(--secondary-color-variation-2-l));
    --on-secondary-color-variation-2-s: 28.7671232877%;
    --on-secondary-color-variation-2-l: 80%;
    --on-secondary-color-variation-2: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-2-s), var(--on-secondary-color-variation-2-l));
    --secondary-color-variation-3-s: 28.7671232877%;
    --secondary-color-variation-3-l: 65%;
    --secondary-color-variation-3: hsl(var(--secondary-color-h), var(--secondary-color-variation-3-s), var(--secondary-color-variation-3-l));
    --on-secondary-color-variation-3-s: 28.7671232877%;
    --on-secondary-color-variation-3-l: 40%;
    --on-secondary-color-variation-3: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-3-s), var(--on-secondary-color-variation-3-l));
    --divider-color: rgba(255, 255, 255, 0.25);
  }
}
[data-theme=dark] {
  color-scheme: dark;
  --color-h1: #fcfcfc;
  --color-h2: #f7f7f7;
  --color-h3: #f1f1f1;
  --color-h4: #d2d0d0;
  --color-h5: #b2afaf;
  --color-h6: #a2a1a3;
  --neutral-color-h: 200deg;
  --neutral-color-s: 5.4545454545%;
  --neutral-color-l: 13%;
  --neutral-color: hsl(var(--neutral-color-h), var(--neutral-color-s), var(--neutral-color-l));
  --on-neutral-color-s: 5.4545454545%;
  --on-neutral-color-l: 96%;
  --on-neutral-color: hsl(var(--neutral-color-h), var(--on-neutral-color-s), var(--on-neutral-color-l));
  --neutral-color-variation-1-s: 5.4545454545%;
  --neutral-color-variation-1-l: 14%;
  --neutral-color-variation-1: hsl(var(--neutral-color-h), var(--neutral-color-variation-1-s), var(--neutral-color-variation-1-l));
  --on-neutral-color-variation-1-s: 5.4545454545%;
  --on-neutral-color-variation-1-l: 96%;
  --on-neutral-color-variation-1: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-1-s), var(--on-neutral-color-variation-1-l));
  --neutral-color-variation-2-s: 5.4545454545%;
  --neutral-color-variation-2-l: 20%;
  --neutral-color-variation-2: hsl(var(--neutral-color-h), var(--neutral-color-variation-2-s), var(--neutral-color-variation-2-l));
  --on-neutral-color-variation-2-s: 5.4545454545%;
  --on-neutral-color-variation-2-l: 92%;
  --on-neutral-color-variation-2: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-2-s), var(--on-neutral-color-variation-2-l));
  --neutral-color-variation-3-s: 5.4545454545%;
  --neutral-color-variation-3-l: 25%;
  --neutral-color-variation-3: hsl(var(--neutral-color-h), var(--neutral-color-variation-3-s), var(--neutral-color-variation-3-l));
  --on-neutral-color-variation-3-s: 5.4545454545%;
  --on-neutral-color-variation-3-l: 50%;
  --on-neutral-color-variation-3: hsl(var(--neutral-color-h), var(--on-neutral-color-variation-3-s), var(--on-neutral-color-variation-3-l));
  /* Your main brand color */
  --primary-color-s: 60.4519774011%;
  --primary-color-l: 50%;
  /* Primary (brand) color should be used at 10%, principally for your CTA, input elements, links */
  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
  --on-primary-color-s: 70%;
  --on-primary-color-l: 95%;
  --on-primary-color: hsl(var(--primary-color-h), var(--on-primary-color-s), var(--on-primary-color-l));
  --primary-color-variation-1-s: 70%;
  --primary-color-variation-1-l: 60%;
  --primary-color-variation-1: hsl(var(--primary-color-h), var(--primary-color-variation-1-s), var(--primary-color-variation-1-l));
  --on-primary-color-variation-1-s: 60.4519774011%;
  --on-primary-color-variation-1-l: 98%;
  --on-primary-color-variation-1: hsl(var(--primary-color-h), var(--on-primary-color-variation-1-s), var(--on-primary-color-variation-1-l));
  --primary-color-variation-2-s: 60.4519774011%;
  --primary-color-variation-2-l: 70%;
  --primary-color-variation-2: hsl(var(--primary-color-h), var(--primary-color-variation-2-s), var(--primary-color-variation-2-l));
  --on-primary-color-variation-2-s: 60.4519774011%;
  --on-primary-color-variation-2-l: 9%;
  --on-primary-color-variation-2: hsl(var(--primary-color-h), var(--on-primary-color-variation-2-s), var(--on-primary-color-variation-2-l));
  --primary-color-variation-3-s: 60.4519774011%;
  --primary-color-variation-3-l: 65%;
  --primary-color-variation-3: hsl(var(--primary-color-h), var(--primary-color-variation-3-s), var(--primary-color-variation-3-l));
  --on-primary-color-variation-3-s: 60.4519774011%;
  --on-primary-color-variation-3-l: 80%;
  --on-primary-color-variation-3: hsl(var(--primary-color-h), var(--on-primary-color-variation-3-s), var(--on-primary-color-variation-3-l));
  /* Your secondary color */
  --secondary-color-s: 28.7671232877%;
  --secondary-color-l: 50%;
  /* Secondary color should be used at 30%  */
  --secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l));
  --on-secondary-color-s: 28.7671232877%;
  --on-secondary-color-l: 95%;
  --on-secondary-color: hsl(var(--secondary-color-h), var(--on-secondary-color-s), var(--on-secondary-color-l));
  --secondary-color-variation-1-s: 28.7671232877%;
  --secondary-color-variation-1-l: 60%;
  --secondary-color-variation-1: hsl(var(--secondary-color-h), var(--secondary-color-variation-1-s), var(--secondary-color-variation-1-l));
  --on-secondary-color-variation-1-s: 28.7671232877%;
  --on-secondary-color-variation-1-l: 95%;
  --on-secondary-color-variation-1: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-1-s), var(--on-secondary-color-variation-1-l));
  --secondary-color-variation-2-s: 28.7671232877%;
  --secondary-color-variation-2-l: 65%;
  --secondary-color-variation-2: hsl(var(--secondary-color-h), var(--secondary-color-variation-2-s), var(--secondary-color-variation-2-l));
  --on-secondary-color-variation-2-s: 28.7671232877%;
  --on-secondary-color-variation-2-l: 80%;
  --on-secondary-color-variation-2: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-2-s), var(--on-secondary-color-variation-2-l));
  --secondary-color-variation-3-s: 28.7671232877%;
  --secondary-color-variation-3-l: 65%;
  --secondary-color-variation-3: hsl(var(--secondary-color-h), var(--secondary-color-variation-3-s), var(--secondary-color-variation-3-l));
  --on-secondary-color-variation-3-s: 28.7671232877%;
  --on-secondary-color-variation-3-l: 40%;
  --on-secondary-color-variation-3: hsl(var(--secondary-color-h), var(--on-secondary-color-variation-3-s), var(--on-secondary-color-variation-3-l));
  --divider-color: rgba(255, 255, 255, 0.25);
}

/* common theme schema settings */
:root {
  --code-color-background: #2d2d2d;
  --code-color-lang-background: transparent;
  --code-color-lang-text: #1e9ca8;
  --code-color-text: #d4d4d4;
  --code-color-tag: #569cd6;
  --code-color-value: #ce9178;
  --code-color-property: #9cdcfe;
  --code-color-comment: #6a9955;
  --code-color-var: #9cdcfe;
  --kbd-color-background: #b2afaf;
  --kbd-color-text: #313131;
  --ins-color-background: transparent;
  --ins-color-text: #388e3c;
  --del-color-background: transparent;
  --del-color-text: #b91c1c;
  --mark-color-background: var(--primary-color);
  --mark-color-text: var(--on-primary-color);
  --selection-color-background: var(--primary-color-variation-2);
  --selection-color-text: var(--on-primary-color-variation-2);
  --success-color-h: 145.2380952381deg;
  --success-color-s: 60.5769230769%;
  --success-color-l: 59.2156862745%;
  --success-color: hsl(var(--success-color-h), var(--success-color-s), var(--success-color-l));
  --on-success-color-s: 60.5769230769%;
  --on-success-color-l: 15%;
  --on-success-color: hsl(var(--success-color-h), var(--on-success-color-s), var(--on-success-color-l));
  --success-color-variation-1-s: 60.5769230769%;
  --success-color-variation-1-l: 80%;
  --success-color-variation-1: hsl(var(--success-color-h), var(--success-color-variation-1-s), var(--success-color-variation-1-l));
  --on-success-color-variation-1-s: 60.5769230769%;
  --on-success-color-variation-1-l: 20%;
  --on-success-color-variation-1: hsl(var(--success-color-h), var(--on-success-color-variation-1-s), var(--on-success-color-variation-1-l));
  --success-color-variation-2-s: 35%;
  --success-color-variation-2-l: 30%;
  --success-color-variation-2: hsl(var(--success-color-h), var(--success-color-variation-2-s), var(--success-color-variation-2-l));
  --on-success-color-variation-2-s: 60.5769230769%;
  --on-success-color-variation-2-l: 90%;
  --on-success-color-variation-2: hsl(var(--success-color-h), var(--on-success-color-variation-2-s), var(--on-success-color-variation-2-l));
  --info-color-h: 198.7317073171deg;
  --info-color-s: 91.9282511211%;
  --info-color-l: 56.2745098039%;
  --info-color: hsl(var(--info-color-h), var(--info-color-s), var(--info-color-l));
  --on-info-color-s: 91.9282511211%;
  --on-info-color-l: 95%;
  --on-info-color: hsl(var(--info-color-h), var(--on-info-color-s), var(--on-info-color-l));
  --info-color-variation-1-s: 91.9282511211%;
  --info-color-variation-1-l: 80%;
  --info-color-variation-1: hsl(var(--info-color-h), var(--info-color-variation-1-s), var(--info-color-variation-1-l));
  --on-info-color-variation-1-s: 91.9282511211%;
  --on-info-color-variation-1-l: 20%;
  --on-info-color-variation-1: hsl(var(--info-color-h), var(--on-info-color-variation-1-s), var(--on-info-color-variation-1-l));
  --info-color-variation-2-s: 35%;
  --info-color-variation-2-l: 30%;
  --info-color-variation-2: hsl(var(--info-color-h), var(--info-color-variation-2-s), var(--info-color-variation-2-l));
  --on-info-color-variation-2-s: 91.9282511211%;
  --on-info-color-variation-2-l: 90%;
  --on-info-color-variation-2: hsl(var(--info-color-h), var(--on-info-color-variation-2-s), var(--on-info-color-variation-2-l));
  --warning-color-h: 37deg;
  --warning-color-s: 90%;
  --warning-color-l: 60.7843137255%;
  --warning-color: hsl(var(--warning-color-h), var(--warning-color-s), var(--warning-color-l));
  --on-warning-color-s: 90%;
  --on-warning-color-l: 15%;
  --on-warning-color: hsl(var(--warning-color-h), var(--on-warning-color-s), var(--on-warning-color-l));
  --warning-color-variation-1-s: 90%;
  --warning-color-variation-1-l: 80%;
  --warning-color-variation-1: hsl(var(--warning-color-h), var(--warning-color-variation-1-s), var(--warning-color-variation-1-l));
  --on-warning-color-variation-1-s: 90%;
  --on-warning-color-variation-1-l: 20%;
  --on-warning-color-variation-1: hsl(var(--warning-color-h), var(--on-warning-color-variation-1-s), var(--on-warning-color-variation-1-l));
  --warning-color-variation-2-s: 35%;
  --warning-color-variation-2-l: 30%;
  --warning-color-variation-2: hsl(var(--warning-color-h), var(--warning-color-variation-2-s), var(--warning-color-variation-2-l));
  --on-warning-color-variation-2-s: 90%;
  --on-warning-color-variation-2-l: 90%;
  --on-warning-color-variation-2: hsl(var(--warning-color-h), var(--on-warning-color-variation-2-s), var(--on-warning-color-variation-2-l));
  --danger-color-h: 5.6375838926deg;
  --danger-color-s: 63.4042553191%;
  --danger-color-l: 46.0784313725%;
  --danger-color: hsl(var(--danger-color-h), var(--danger-color-s), var(--danger-color-l));
  --on-danger-color-s: 63.4042553191%;
  --on-danger-color-l: 95%;
  --on-danger-color: hsl(var(--danger-color-h), var(--on-danger-color-s), var(--on-danger-color-l));
  --danger-color-variation-1-s: 63.4042553191%;
  --danger-color-variation-1-l: 80%;
  --danger-color-variation-1: hsl(var(--danger-color-h), var(--danger-color-variation-1-s), var(--danger-color-variation-1-l));
  --on-danger-color-variation-1-s: 63.4042553191%;
  --on-danger-color-variation-1-l: 10%;
  --on-danger-color-variation-1: hsl(var(--danger-color-h), var(--on-danger-color-variation-1-s), var(--on-danger-color-variation-1-l));
  --danger-color-variation-2-s: 35%;
  --danger-color-variation-2-l: 30%;
  --danger-color-variation-2: hsl(var(--danger-color-h), var(--danger-color-variation-2-s), var(--danger-color-variation-2-l));
  --on-danger-color-variation-2-s: 63.4042553191%;
  --on-danger-color-variation-2-l: 95%;
  --on-danger-color-variation-2: hsl(var(--danger-color-h), var(--on-danger-color-variation-2-s), var(--on-danger-color-variation-2-l));
  --icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.7 12.7'%3E%3Cg fill='none' stroke='rgba(88, 214, 141, 0.75)' stroke-linecap='round' stroke-linejoin='round' transform='translate(-70.46 -85.11)'%3E%3Cpath stroke-width='1.016' d='M73.699 91.713l2.57 2.158 4.082-4.57'/%3E%3Ccircle cx='76.81' cy='91.46' r='6.096' stroke-width='.508' paint-order='stroke fill markers'/%3E%3C/g%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.7 12.7'%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='rgba(245, 176, 65, 0.75)' stroke='rgba(245, 176, 65, 0.75)' stroke-width='1.016' d='M6.444 8.621l-.062-5.03'/%3E%3Cpath fill='none' stroke='rgba(245, 176, 65, 0.75)' stroke-width='.508' d='M12.415 12.394L.317 12.363 6.444.317z' paint-order='stroke fill markers'/%3E%3Cpath d='M7.2 10.635a.787.732 0 01-.787.732.787.732 0 01-.788-.732.787.732 0 01.788-.732.787.732 0 01.787.732z' fill='rgba(245, 176, 65, 0.75)' stroke='none' paint-order='stroke fill markers'/%3E%3C/g%3E%3C/svg%3E");
  --icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.7 12.7'%3E%3Cg fill='none' stroke='rgba(192, 57, 43, 0.75)' stroke-linecap='round' stroke-linejoin='round' transform='translate(-70.46 -85.11)'%3E%3Cpath stroke-width='1.016' d='M79.238 93.844l-4.857-4.768'/%3E%3Ccircle cx='76.81' cy='91.46' r='6.096' stroke-width='.508' paint-order='stroke fill markers'/%3E%3Cpath stroke-width='1.016' d='M74.425 93.889l4.77-4.857'/%3E%3C/g%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.7 12.7'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' transform='translate(-70.46 -85.11)'%3E%3Cpath fill='rgba(41, 182, 246, 0.75)' stroke='rgba(41, 182, 246, 0.75)' stroke-width='1.016' d='M76.841 93.087l-.062-5.03'/%3E%3Ccircle cx='76.81' cy='91.46' r='6.096' fill='none' stroke='rgba(41, 182, 246, 0.75)' stroke-width='.508' paint-order='stroke fill markers'/%3E%3Cpath d='M77.597 95.101a.787.732 0 01-.787.732.787.732 0 01-.788-.732.787.732 0 01.788-.732.787.732 0 01.787.732z' fill='rgba(41, 182, 246, 0.75)' stroke='none' paint-order='stroke fill markers'/%3E%3C/g%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8'%3E%3C/circle%3E%3Cline x1='23' y1='23' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

html {
  font-weight: var(--font-weight);
  font-size: 62.5%;
  line-height: var(--line-height);
  font-family: var(--font-family);
}

html,
body {
  min-height: 100vh;
  min-height: var(--doc-height);
}

body {
  --background-color: var(--neutral-color);
  --color: var(--on-neutral-color);
  overflow-x: hidden;
  background-color: var(--background-color);
  color: var(--color);
  font-size: clamp(1.5rem, 0.5vw + 1.4rem, 1.7rem);
  line-height: var(--font-content-line-height);
}
body > header,
body > main,
body > footer {
  display: block;
  position: relative;
}
body > footer {
  margin-top: var(--block-spacing);
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
}
body > main > header {
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
  /* + * {
     margin-top: var(--block-spacing);
   }*/
}
body > main > footer {
  margin-top: var(--block-spacing);
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
}

ul li ul,
ul li ol {
  margin-left: var(--spacing);
}

ol,
ul {
  padding-left: var(--spacing);
  margin-left: 1rem;
}

ul[role=list],
ol[role=list] {
  padding-right: 0;
  padding-left: 0;
  margin-left: 0;
}

ol + :is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)),
ul + :is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)) {
  margin-top: calc(var(--flow-space-ratio) * 1em);
}

body,
table,
article,
section,
pre > code,
select[multiple],
.custom-scrollbar {
  scrollbar-gutter: auto;
  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-background);
  scrollbar-width: thin;
}

body::-webkit-scrollbar,
article::-webkit-scrollbar,
section::-webkit-scrollbar,
table::-webkit-scrollbar,
pre > code::-webkit-scrollbar,
select::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track,
article::-webkit-scrollbar-track,
section::-webkit-scrollbar-track,
table::-webkit-scrollbar-track,
pre > code::-webkit-scrollbar-track,
select::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-color-background);
  border-radius: 6px;
}

body::-webkit-scrollbar-thumb,
article::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb,
pre > code::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid var(--scrollbar-color-thumb-border);
  border-radius: 6px;
  background-clip: content-box;
  background-color: var(--scrollbar-color-thumb);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

*:focus-visible {
  outline: 2px dotted var(--on-neutral-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon > svg {
  width: 1em;
  aspect-ratio: 1;
  stroke: var(--stroke, currentColor);
  fill: var(--fill, none);
}

/* pour cacher un élément de manière accessible */
.sr-only {
  font-size: 0;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  opacity: 0;
}

/* réglée sur la racine carré du 'nombre d'or' */
/* =====[ Utilitaires responsive ]============================================================================ */
.flow-container {
  width: 100%;
  max-width: var(--flow-container-char-width, 85ch);
}
.flow-container > * + * {
  margin-block-start: var(--flow-spacing);
}

.container {
  --container-padding: 1em;
  --container-margin: 0;
  margin-right: var(--container-margin) !important;
  margin-left: var(--container-margin) !important;
  padding-right: var(--container-padding);
  padding-left: var(--container-padding);
  max-width: 100vw;
}

.container-fluid {
  --container-padding: 1em;
  --container-margin: 0;
  max-width: 100vw;
  padding-right: calc(var(--container-margin) + var(--container-padding)) !important;
  padding-left: calc(var(--container-margin) + var(--container-padding)) !important;
}

@media only screen and (min-width: 37.5em) {
  .container,
.container-fluid {
    --container-margin: 2vw;
  }
}
@media only screen and (min-width: 56.25em) {
  .container,
.container-fluid {
    --container-padding: 1em;
    --container-margin: 5vw;
  }
}
@media only screen and (min-width: 75em) {
  .container,
.container-fluid {
    --container-padding: 1.5em;
    --container-margin: 7vw;
  }
}
@media only screen and (min-width: 100em) {
  .container,
.container-fluid {
    --container-padding: 2em;
    --container-margin: 10vw;
  }
}
@media only screen and (min-width: 112.5em) {
  .container,
.container-fluid {
    --container-margin: 15vw;
  }
}
[data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

[data-responsive=auto] body > main {
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
}

@media only screen and (min-width: 25em) {
  [data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
    max-width: 570px;
  }
}
@media only screen and (min-width: 37.5em) {
  [data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
    max-width: 760px;
  }
}
@media only screen and (min-width: 56.25em) {
  [data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
    max-width: 840px;
    padding-right: 0;
    padding-left: 0;
  }
}
@media only screen and (min-width: 75em) {
  [data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
    max-width: 960px;
  }
}
@media only screen and (min-width: 90em) {
  [data-responsive=auto] body > footer,
[data-responsive=auto] body > header,
[data-responsive=auto] body > main {
    max-width: 1200px;
  }
}
.group {
  display: inline-flex;
  justify-self: flex-start;
  margin: 0.5rem 1rem 0.5rem 0;
}
.group > * {
  margin: 0 !important;
}
.group--vertical {
  flex-direction: column;
}
.group--vertical > * + * {
  margin-block-start: -1px;
}
.group--vertical > *:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.group--vertical > *:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.group--vertical > * {
  margin-top: -1px !important;
}
.group:not(.group--vertical) > * + * {
  margin-top: -1px !important;
}
.group:not(.group--vertical) > *:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.group:not(.group--vertical) > *:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.section,
section {
  --background-color: var(--neutral-color);
  --color: var(--on-neutral-color);
  background-color: var(--background-color);
  color: var(--color);
  margin-top: var(--block-spacing);
}
.section:first-child,
section:first-child {
  margin-top: 0;
}
.section:not(:last-child) + *:is(:not(h1, h2, h3, h4, h5, h6)),
section:not(:last-child) + *:is(:not(h1, h2, h3, h4, h5, h6)) {
  margin-top: var(--block-spacing);
}
.section .article, .section article,
section .article,
section article {
  margin-top: var(--block-half-spacing) !important;
}
.section .article:first-child, .section article:first-child,
section .article:first-child,
section article:first-child {
  margin-top: 0;
}

.article,
article {
  --background-color: var(--neutral-color);
  --color: var(--on-neutral-color);
  background-color: var(--background-color);
  color: var(--color);
  width: 100%;
  margin-top: var(--block-spacing);
}
.article:first-child,
article:first-child {
  margin-top: 0;
}
.article:not(:last-child) + *:is(:not(h1, h2, h3, h4, h5, h6)),
article:not(:last-child) + *:is(:not(h1, h2, h3, h4, h5, h6)) {
  margin-top: var(--block-half-spacing);
}
.article .section, .article section,
article .section,
article section {
  margin-top: var(--block-half-spacing) !important;
}
.article .section:first-child, .article section:first-child,
article .section:first-child,
article section:first-child {
  margin-top: 0;
}

.grid {
  display: grid !important;
  grid-template-columns: 1fr;
  margin: 0;
}
.grid > * {
  min-width: 0;
  margin-top: 0;
}
.grid + *:is(footer) {
  margin-top: var(--block-half-spacing) !important;
}
.grid > .justify--right {
  justify-self: end;
}
.grid > .justify--center {
  justify-self: center;
}
.grid > .justify--left {
  justify-self: start;
}
.grid > .justify--stretch {
  justify-self: stretch;
}
.grid > .align--top {
  align-self: start;
}
.grid > .align--center {
  align-self: center;
}
.grid > .align--bottom {
  align-self: start;
}
.grid > .align--stretch {
  align-self: stretch;
}

.grid-stacked {
  --aspect-ratio: 4/1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.grid-stacked > * {
  grid-column: 1/2;
  grid-row: 1/2;
}
.grid-stacked > img,
.grid-stacked > video,
.grid-stacked > picture,
.grid-stacked > .media {
  aspect-ratio: var(--aspect-ratio);
  object-fit: cover;
  object-position: center;
  z-index: -1;
  transition: all 0.6s;
}

.subgrid {
  display: grid;
  grid-template-rows: subgrid;
}

.cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
}

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

.grid-items-center {
  align-items: center;
  justify-items: center;
}

/* grid-template-columns classes */
.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

@media only screen and (min-width: 25em) {
  .m\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .m\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .m\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .m\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .m\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .m\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .m\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .m\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .m\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 37.5em) {
  .t\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .t\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .t\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .t\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .t\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .t\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .t\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .t\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 56.25em) {
  .md\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .md\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 75em) {
  .d\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .d\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .d\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .d\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .d\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .d\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .d\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .d\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .d\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 90em) {
  .dm\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .dm\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .dm\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dm\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dm\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dm\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .dm\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dm\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .dm\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 100em) {
  .lg\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .lg\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 112.5em) {
  .xl\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .xl\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 160em) {
  .xxl\:cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-col-width), 1fr));
  }
  .xxl\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xxl\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xxl\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xxl\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xxl\:cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xxl\:cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xxl\:cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xxl\:cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
/* gap classes */
.gap-1 {
  gap: 0.5em;
}

.col-gap-1 {
  column-gap: 0.5em;
}

.row-gap-1 {
  row-gap: 0.5em;
}

.gap-2 {
  gap: 1em;
}

.col-gap-2 {
  column-gap: 1em;
}

.row-gap-2 {
  row-gap: 1em;
}

.gap-3 {
  gap: 1.5em;
}

.col-gap-3 {
  column-gap: 1.5em;
}

.row-gap-3 {
  row-gap: 1.5em;
}

.gap-4 {
  gap: 2em;
}

.col-gap-4 {
  column-gap: 2em;
}

.row-gap-4 {
  row-gap: 2em;
}

.gap-5 {
  gap: 4em;
}

.col-gap-5 {
  column-gap: 4em;
}

.row-gap-5 {
  row-gap: 4em;
}

.gap-6 {
  gap: 8em;
}

.col-gap-6 {
  column-gap: 8em;
}

.row-gap-6 {
  row-gap: 8em;
}

@media (min-width: 25em) {
  .m\:gap-1 {
    gap: 0.5em;
  }
  .m\:col-gap-1 {
    column-gap: 0.5em;
  }
  .m\:row-gap-1 {
    row-gap: 0.5em;
  }
  .m\:gap-2 {
    gap: 1em;
  }
  .m\:col-gap-2 {
    column-gap: 1em;
  }
  .m\:row-gap-2 {
    row-gap: 1em;
  }
  .m\:gap-3 {
    gap: 1.5em;
  }
  .m\:col-gap-3 {
    column-gap: 1.5em;
  }
  .m\:row-gap-3 {
    row-gap: 1.5em;
  }
  .m\:gap-4 {
    gap: 2em;
  }
  .m\:col-gap-4 {
    column-gap: 2em;
  }
  .m\:row-gap-4 {
    row-gap: 2em;
  }
  .m\:gap-5 {
    gap: 4em;
  }
  .m\:col-gap-5 {
    column-gap: 4em;
  }
  .m\:row-gap-5 {
    row-gap: 4em;
  }
  .m\:gap-6 {
    gap: 8em;
  }
  .m\:col-gap-6 {
    column-gap: 8em;
  }
  .m\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 37.5em) {
  .t\:gap-1 {
    gap: 0.5em;
  }
  .t\:col-gap-1 {
    column-gap: 0.5em;
  }
  .t\:row-gap-1 {
    row-gap: 0.5em;
  }
  .t\:gap-2 {
    gap: 1em;
  }
  .t\:col-gap-2 {
    column-gap: 1em;
  }
  .t\:row-gap-2 {
    row-gap: 1em;
  }
  .t\:gap-3 {
    gap: 1.5em;
  }
  .t\:col-gap-3 {
    column-gap: 1.5em;
  }
  .t\:row-gap-3 {
    row-gap: 1.5em;
  }
  .t\:gap-4 {
    gap: 2em;
  }
  .t\:col-gap-4 {
    column-gap: 2em;
  }
  .t\:row-gap-4 {
    row-gap: 2em;
  }
  .t\:gap-5 {
    gap: 4em;
  }
  .t\:col-gap-5 {
    column-gap: 4em;
  }
  .t\:row-gap-5 {
    row-gap: 4em;
  }
  .t\:gap-6 {
    gap: 8em;
  }
  .t\:col-gap-6 {
    column-gap: 8em;
  }
  .t\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 56.25em) {
  .md\:gap-1 {
    gap: 0.5em;
  }
  .md\:col-gap-1 {
    column-gap: 0.5em;
  }
  .md\:row-gap-1 {
    row-gap: 0.5em;
  }
  .md\:gap-2 {
    gap: 1em;
  }
  .md\:col-gap-2 {
    column-gap: 1em;
  }
  .md\:row-gap-2 {
    row-gap: 1em;
  }
  .md\:gap-3 {
    gap: 1.5em;
  }
  .md\:col-gap-3 {
    column-gap: 1.5em;
  }
  .md\:row-gap-3 {
    row-gap: 1.5em;
  }
  .md\:gap-4 {
    gap: 2em;
  }
  .md\:col-gap-4 {
    column-gap: 2em;
  }
  .md\:row-gap-4 {
    row-gap: 2em;
  }
  .md\:gap-5 {
    gap: 4em;
  }
  .md\:col-gap-5 {
    column-gap: 4em;
  }
  .md\:row-gap-5 {
    row-gap: 4em;
  }
  .md\:gap-6 {
    gap: 8em;
  }
  .md\:col-gap-6 {
    column-gap: 8em;
  }
  .md\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 75em) {
  .d\:gap-1 {
    gap: 0.5em;
  }
  .d\:col-gap-1 {
    column-gap: 0.5em;
  }
  .d\:row-gap-1 {
    row-gap: 0.5em;
  }
  .d\:gap-2 {
    gap: 1em;
  }
  .d\:col-gap-2 {
    column-gap: 1em;
  }
  .d\:row-gap-2 {
    row-gap: 1em;
  }
  .d\:gap-3 {
    gap: 1.5em;
  }
  .d\:col-gap-3 {
    column-gap: 1.5em;
  }
  .d\:row-gap-3 {
    row-gap: 1.5em;
  }
  .d\:gap-4 {
    gap: 2em;
  }
  .d\:col-gap-4 {
    column-gap: 2em;
  }
  .d\:row-gap-4 {
    row-gap: 2em;
  }
  .d\:gap-5 {
    gap: 4em;
  }
  .d\:col-gap-5 {
    column-gap: 4em;
  }
  .d\:row-gap-5 {
    row-gap: 4em;
  }
  .d\:gap-6 {
    gap: 8em;
  }
  .d\:col-gap-6 {
    column-gap: 8em;
  }
  .d\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 90em) {
  .dm\:gap-1 {
    gap: 0.5em;
  }
  .dm\:col-gap-1 {
    column-gap: 0.5em;
  }
  .dm\:row-gap-1 {
    row-gap: 0.5em;
  }
  .dm\:gap-2 {
    gap: 1em;
  }
  .dm\:col-gap-2 {
    column-gap: 1em;
  }
  .dm\:row-gap-2 {
    row-gap: 1em;
  }
  .dm\:gap-3 {
    gap: 1.5em;
  }
  .dm\:col-gap-3 {
    column-gap: 1.5em;
  }
  .dm\:row-gap-3 {
    row-gap: 1.5em;
  }
  .dm\:gap-4 {
    gap: 2em;
  }
  .dm\:col-gap-4 {
    column-gap: 2em;
  }
  .dm\:row-gap-4 {
    row-gap: 2em;
  }
  .dm\:gap-5 {
    gap: 4em;
  }
  .dm\:col-gap-5 {
    column-gap: 4em;
  }
  .dm\:row-gap-5 {
    row-gap: 4em;
  }
  .dm\:gap-6 {
    gap: 8em;
  }
  .dm\:col-gap-6 {
    column-gap: 8em;
  }
  .dm\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 100em) {
  .lg\:gap-1 {
    gap: 0.5em;
  }
  .lg\:col-gap-1 {
    column-gap: 0.5em;
  }
  .lg\:row-gap-1 {
    row-gap: 0.5em;
  }
  .lg\:gap-2 {
    gap: 1em;
  }
  .lg\:col-gap-2 {
    column-gap: 1em;
  }
  .lg\:row-gap-2 {
    row-gap: 1em;
  }
  .lg\:gap-3 {
    gap: 1.5em;
  }
  .lg\:col-gap-3 {
    column-gap: 1.5em;
  }
  .lg\:row-gap-3 {
    row-gap: 1.5em;
  }
  .lg\:gap-4 {
    gap: 2em;
  }
  .lg\:col-gap-4 {
    column-gap: 2em;
  }
  .lg\:row-gap-4 {
    row-gap: 2em;
  }
  .lg\:gap-5 {
    gap: 4em;
  }
  .lg\:col-gap-5 {
    column-gap: 4em;
  }
  .lg\:row-gap-5 {
    row-gap: 4em;
  }
  .lg\:gap-6 {
    gap: 8em;
  }
  .lg\:col-gap-6 {
    column-gap: 8em;
  }
  .lg\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 112.5em) {
  .xl\:gap-1 {
    gap: 0.5em;
  }
  .xl\:col-gap-1 {
    column-gap: 0.5em;
  }
  .xl\:row-gap-1 {
    row-gap: 0.5em;
  }
  .xl\:gap-2 {
    gap: 1em;
  }
  .xl\:col-gap-2 {
    column-gap: 1em;
  }
  .xl\:row-gap-2 {
    row-gap: 1em;
  }
  .xl\:gap-3 {
    gap: 1.5em;
  }
  .xl\:col-gap-3 {
    column-gap: 1.5em;
  }
  .xl\:row-gap-3 {
    row-gap: 1.5em;
  }
  .xl\:gap-4 {
    gap: 2em;
  }
  .xl\:col-gap-4 {
    column-gap: 2em;
  }
  .xl\:row-gap-4 {
    row-gap: 2em;
  }
  .xl\:gap-5 {
    gap: 4em;
  }
  .xl\:col-gap-5 {
    column-gap: 4em;
  }
  .xl\:row-gap-5 {
    row-gap: 4em;
  }
  .xl\:gap-6 {
    gap: 8em;
  }
  .xl\:col-gap-6 {
    column-gap: 8em;
  }
  .xl\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 160em) {
  .xxl\:gap-1 {
    gap: 0.5em;
  }
  .xxl\:col-gap-1 {
    column-gap: 0.5em;
  }
  .xxl\:row-gap-1 {
    row-gap: 0.5em;
  }
  .xxl\:gap-2 {
    gap: 1em;
  }
  .xxl\:col-gap-2 {
    column-gap: 1em;
  }
  .xxl\:row-gap-2 {
    row-gap: 1em;
  }
  .xxl\:gap-3 {
    gap: 1.5em;
  }
  .xxl\:col-gap-3 {
    column-gap: 1.5em;
  }
  .xxl\:row-gap-3 {
    row-gap: 1.5em;
  }
  .xxl\:gap-4 {
    gap: 2em;
  }
  .xxl\:col-gap-4 {
    column-gap: 2em;
  }
  .xxl\:row-gap-4 {
    row-gap: 2em;
  }
  .xxl\:gap-5 {
    gap: 4em;
  }
  .xxl\:col-gap-5 {
    column-gap: 4em;
  }
  .xxl\:row-gap-5 {
    row-gap: 4em;
  }
  .xxl\:gap-6 {
    gap: 8em;
  }
  .xxl\:col-gap-6 {
    column-gap: 8em;
  }
  .xxl\:row-gap-6 {
    row-gap: 8em;
  }
}
@media (min-width: 25em) {
  .grid > .m\:justify--left {
    justify-self: start;
  }
  .grid > .m\:align--top {
    align-self: start;
  }
  .grid > .m\:justify--right {
    justify-self: end;
  }
  .grid > .m\:align--bottom {
    align-self: end;
  }
  .grid > .m\:justify--center {
    justify-self: center;
  }
  .grid > .m\:align--center {
    align-self: center;
  }
  .grid > .m\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .m\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 37.5em) {
  .grid > .t\:justify--left {
    justify-self: start;
  }
  .grid > .t\:align--top {
    align-self: start;
  }
  .grid > .t\:justify--right {
    justify-self: end;
  }
  .grid > .t\:align--bottom {
    align-self: end;
  }
  .grid > .t\:justify--center {
    justify-self: center;
  }
  .grid > .t\:align--center {
    align-self: center;
  }
  .grid > .t\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .t\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 56.25em) {
  .grid > .md\:justify--left {
    justify-self: start;
  }
  .grid > .md\:align--top {
    align-self: start;
  }
  .grid > .md\:justify--right {
    justify-self: end;
  }
  .grid > .md\:align--bottom {
    align-self: end;
  }
  .grid > .md\:justify--center {
    justify-self: center;
  }
  .grid > .md\:align--center {
    align-self: center;
  }
  .grid > .md\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .md\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 75em) {
  .grid > .d\:justify--left {
    justify-self: start;
  }
  .grid > .d\:align--top {
    align-self: start;
  }
  .grid > .d\:justify--right {
    justify-self: end;
  }
  .grid > .d\:align--bottom {
    align-self: end;
  }
  .grid > .d\:justify--center {
    justify-self: center;
  }
  .grid > .d\:align--center {
    align-self: center;
  }
  .grid > .d\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .d\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 90em) {
  .grid > .dm\:justify--left {
    justify-self: start;
  }
  .grid > .dm\:align--top {
    align-self: start;
  }
  .grid > .dm\:justify--right {
    justify-self: end;
  }
  .grid > .dm\:align--bottom {
    align-self: end;
  }
  .grid > .dm\:justify--center {
    justify-self: center;
  }
  .grid > .dm\:align--center {
    align-self: center;
  }
  .grid > .dm\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .dm\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 100em) {
  .grid > .lg\:justify--left {
    justify-self: start;
  }
  .grid > .lg\:align--top {
    align-self: start;
  }
  .grid > .lg\:justify--right {
    justify-self: end;
  }
  .grid > .lg\:align--bottom {
    align-self: end;
  }
  .grid > .lg\:justify--center {
    justify-self: center;
  }
  .grid > .lg\:align--center {
    align-self: center;
  }
  .grid > .lg\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .lg\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 112.5em) {
  .grid > .xl\:justify--left {
    justify-self: start;
  }
  .grid > .xl\:align--top {
    align-self: start;
  }
  .grid > .xl\:justify--right {
    justify-self: end;
  }
  .grid > .xl\:align--bottom {
    align-self: end;
  }
  .grid > .xl\:justify--center {
    justify-self: center;
  }
  .grid > .xl\:align--center {
    align-self: center;
  }
  .grid > .xl\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .xl\:align--stretch {
    align-self: stretch;
  }
}
@media (min-width: 160em) {
  .grid > .xxl\:justify--left {
    justify-self: start;
  }
  .grid > .xxl\:align--top {
    align-self: start;
  }
  .grid > .xxl\:justify--right {
    justify-self: end;
  }
  .grid > .xxl\:align--bottom {
    align-self: end;
  }
  .grid > .xxl\:justify--center {
    justify-self: center;
  }
  .grid > .xxl\:align--center {
    align-self: center;
  }
  .grid > .xxl\:justify--stretch {
    justify-self: stretch;
  }
  .grid > .xxl\:align--stretch {
    align-self: stretch;
  }
}
/* grid-items classes */
.col-start-1 {
  grid-column-start: 1;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-end-8 {
  grid-row-end: 8;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

@media only screen and (min-width: 25em) {
  .m\:col-start-1 {
    grid-column-start: 1;
  }
  .m\:col-end-1 {
    grid-column-end: 1;
  }
  .m\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-1 {
    grid-row-start: 1;
  }
  .m\:row-end-1 {
    grid-row-end: 1;
  }
  .m\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .m\:col-start-2 {
    grid-column-start: 2;
  }
  .m\:col-end-2 {
    grid-column-end: 2;
  }
  .m\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-2 {
    grid-row-start: 2;
  }
  .m\:row-end-2 {
    grid-row-end: 2;
  }
  .m\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .m\:col-start-3 {
    grid-column-start: 3;
  }
  .m\:col-end-3 {
    grid-column-end: 3;
  }
  .m\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-3 {
    grid-row-start: 3;
  }
  .m\:row-end-3 {
    grid-row-end: 3;
  }
  .m\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .m\:col-start-4 {
    grid-column-start: 4;
  }
  .m\:col-end-4 {
    grid-column-end: 4;
  }
  .m\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-4 {
    grid-row-start: 4;
  }
  .m\:row-end-4 {
    grid-row-end: 4;
  }
  .m\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .m\:col-start-5 {
    grid-column-start: 5;
  }
  .m\:col-end-5 {
    grid-column-end: 5;
  }
  .m\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-5 {
    grid-row-start: 5;
  }
  .m\:row-end-5 {
    grid-row-end: 5;
  }
  .m\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .m\:col-start-6 {
    grid-column-start: 6;
  }
  .m\:col-end-6 {
    grid-column-end: 6;
  }
  .m\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-6 {
    grid-row-start: 6;
  }
  .m\:row-end-6 {
    grid-row-end: 6;
  }
  .m\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .m\:col-start-7 {
    grid-column-start: 7;
  }
  .m\:col-end-7 {
    grid-column-end: 7;
  }
  .m\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-7 {
    grid-row-start: 7;
  }
  .m\:row-end-7 {
    grid-row-end: 7;
  }
  .m\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .m\:col-start-8 {
    grid-column-start: 8;
  }
  .m\:col-end-8 {
    grid-column-end: 8;
  }
  .m\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .m\:col-span-full {
    grid-column: 1/-1;
  }
  .m\:row-start-8 {
    grid-row-start: 8;
  }
  .m\:row-end-8 {
    grid-row-end: 8;
  }
  .m\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 37.5em) {
  .t\:col-start-1 {
    grid-column-start: 1;
  }
  .t\:col-end-1 {
    grid-column-end: 1;
  }
  .t\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-1 {
    grid-row-start: 1;
  }
  .t\:row-end-1 {
    grid-row-end: 1;
  }
  .t\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .t\:col-start-2 {
    grid-column-start: 2;
  }
  .t\:col-end-2 {
    grid-column-end: 2;
  }
  .t\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-2 {
    grid-row-start: 2;
  }
  .t\:row-end-2 {
    grid-row-end: 2;
  }
  .t\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .t\:col-start-3 {
    grid-column-start: 3;
  }
  .t\:col-end-3 {
    grid-column-end: 3;
  }
  .t\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-3 {
    grid-row-start: 3;
  }
  .t\:row-end-3 {
    grid-row-end: 3;
  }
  .t\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .t\:col-start-4 {
    grid-column-start: 4;
  }
  .t\:col-end-4 {
    grid-column-end: 4;
  }
  .t\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-4 {
    grid-row-start: 4;
  }
  .t\:row-end-4 {
    grid-row-end: 4;
  }
  .t\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .t\:col-start-5 {
    grid-column-start: 5;
  }
  .t\:col-end-5 {
    grid-column-end: 5;
  }
  .t\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-5 {
    grid-row-start: 5;
  }
  .t\:row-end-5 {
    grid-row-end: 5;
  }
  .t\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .t\:col-start-6 {
    grid-column-start: 6;
  }
  .t\:col-end-6 {
    grid-column-end: 6;
  }
  .t\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-6 {
    grid-row-start: 6;
  }
  .t\:row-end-6 {
    grid-row-end: 6;
  }
  .t\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .t\:col-start-7 {
    grid-column-start: 7;
  }
  .t\:col-end-7 {
    grid-column-end: 7;
  }
  .t\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-7 {
    grid-row-start: 7;
  }
  .t\:row-end-7 {
    grid-row-end: 7;
  }
  .t\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .t\:col-start-8 {
    grid-column-start: 8;
  }
  .t\:col-end-8 {
    grid-column-end: 8;
  }
  .t\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .t\:col-span-full {
    grid-column: 1/-1;
  }
  .t\:row-start-8 {
    grid-row-start: 8;
  }
  .t\:row-end-8 {
    grid-row-end: 8;
  }
  .t\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 56.25em) {
  .md\:col-start-1 {
    grid-column-start: 1;
  }
  .md\:col-end-1 {
    grid-column-end: 1;
  }
  .md\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-1 {
    grid-row-start: 1;
  }
  .md\:row-end-1 {
    grid-row-end: 1;
  }
  .md\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .md\:col-start-2 {
    grid-column-start: 2;
  }
  .md\:col-end-2 {
    grid-column-end: 2;
  }
  .md\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-2 {
    grid-row-start: 2;
  }
  .md\:row-end-2 {
    grid-row-end: 2;
  }
  .md\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .md\:col-start-3 {
    grid-column-start: 3;
  }
  .md\:col-end-3 {
    grid-column-end: 3;
  }
  .md\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-3 {
    grid-row-start: 3;
  }
  .md\:row-end-3 {
    grid-row-end: 3;
  }
  .md\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .md\:col-start-4 {
    grid-column-start: 4;
  }
  .md\:col-end-4 {
    grid-column-end: 4;
  }
  .md\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-4 {
    grid-row-start: 4;
  }
  .md\:row-end-4 {
    grid-row-end: 4;
  }
  .md\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .md\:col-start-5 {
    grid-column-start: 5;
  }
  .md\:col-end-5 {
    grid-column-end: 5;
  }
  .md\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-5 {
    grid-row-start: 5;
  }
  .md\:row-end-5 {
    grid-row-end: 5;
  }
  .md\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .md\:col-start-6 {
    grid-column-start: 6;
  }
  .md\:col-end-6 {
    grid-column-end: 6;
  }
  .md\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-6 {
    grid-row-start: 6;
  }
  .md\:row-end-6 {
    grid-row-end: 6;
  }
  .md\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .md\:col-start-7 {
    grid-column-start: 7;
  }
  .md\:col-end-7 {
    grid-column-end: 7;
  }
  .md\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-7 {
    grid-row-start: 7;
  }
  .md\:row-end-7 {
    grid-row-end: 7;
  }
  .md\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .md\:col-start-8 {
    grid-column-start: 8;
  }
  .md\:col-end-8 {
    grid-column-end: 8;
  }
  .md\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
  .md\:row-start-8 {
    grid-row-start: 8;
  }
  .md\:row-end-8 {
    grid-row-end: 8;
  }
  .md\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 75em) {
  .d\:col-start-1 {
    grid-column-start: 1;
  }
  .d\:col-end-1 {
    grid-column-end: 1;
  }
  .d\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-1 {
    grid-row-start: 1;
  }
  .d\:row-end-1 {
    grid-row-end: 1;
  }
  .d\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .d\:col-start-2 {
    grid-column-start: 2;
  }
  .d\:col-end-2 {
    grid-column-end: 2;
  }
  .d\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-2 {
    grid-row-start: 2;
  }
  .d\:row-end-2 {
    grid-row-end: 2;
  }
  .d\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .d\:col-start-3 {
    grid-column-start: 3;
  }
  .d\:col-end-3 {
    grid-column-end: 3;
  }
  .d\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-3 {
    grid-row-start: 3;
  }
  .d\:row-end-3 {
    grid-row-end: 3;
  }
  .d\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .d\:col-start-4 {
    grid-column-start: 4;
  }
  .d\:col-end-4 {
    grid-column-end: 4;
  }
  .d\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-4 {
    grid-row-start: 4;
  }
  .d\:row-end-4 {
    grid-row-end: 4;
  }
  .d\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .d\:col-start-5 {
    grid-column-start: 5;
  }
  .d\:col-end-5 {
    grid-column-end: 5;
  }
  .d\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-5 {
    grid-row-start: 5;
  }
  .d\:row-end-5 {
    grid-row-end: 5;
  }
  .d\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .d\:col-start-6 {
    grid-column-start: 6;
  }
  .d\:col-end-6 {
    grid-column-end: 6;
  }
  .d\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-6 {
    grid-row-start: 6;
  }
  .d\:row-end-6 {
    grid-row-end: 6;
  }
  .d\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .d\:col-start-7 {
    grid-column-start: 7;
  }
  .d\:col-end-7 {
    grid-column-end: 7;
  }
  .d\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-7 {
    grid-row-start: 7;
  }
  .d\:row-end-7 {
    grid-row-end: 7;
  }
  .d\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .d\:col-start-8 {
    grid-column-start: 8;
  }
  .d\:col-end-8 {
    grid-column-end: 8;
  }
  .d\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .d\:col-span-full {
    grid-column: 1/-1;
  }
  .d\:row-start-8 {
    grid-row-start: 8;
  }
  .d\:row-end-8 {
    grid-row-end: 8;
  }
  .d\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 90em) {
  .dm\:col-start-1 {
    grid-column-start: 1;
  }
  .dm\:col-end-1 {
    grid-column-end: 1;
  }
  .dm\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-1 {
    grid-row-start: 1;
  }
  .dm\:row-end-1 {
    grid-row-end: 1;
  }
  .dm\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .dm\:col-start-2 {
    grid-column-start: 2;
  }
  .dm\:col-end-2 {
    grid-column-end: 2;
  }
  .dm\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-2 {
    grid-row-start: 2;
  }
  .dm\:row-end-2 {
    grid-row-end: 2;
  }
  .dm\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .dm\:col-start-3 {
    grid-column-start: 3;
  }
  .dm\:col-end-3 {
    grid-column-end: 3;
  }
  .dm\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-3 {
    grid-row-start: 3;
  }
  .dm\:row-end-3 {
    grid-row-end: 3;
  }
  .dm\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .dm\:col-start-4 {
    grid-column-start: 4;
  }
  .dm\:col-end-4 {
    grid-column-end: 4;
  }
  .dm\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-4 {
    grid-row-start: 4;
  }
  .dm\:row-end-4 {
    grid-row-end: 4;
  }
  .dm\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .dm\:col-start-5 {
    grid-column-start: 5;
  }
  .dm\:col-end-5 {
    grid-column-end: 5;
  }
  .dm\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-5 {
    grid-row-start: 5;
  }
  .dm\:row-end-5 {
    grid-row-end: 5;
  }
  .dm\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .dm\:col-start-6 {
    grid-column-start: 6;
  }
  .dm\:col-end-6 {
    grid-column-end: 6;
  }
  .dm\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-6 {
    grid-row-start: 6;
  }
  .dm\:row-end-6 {
    grid-row-end: 6;
  }
  .dm\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .dm\:col-start-7 {
    grid-column-start: 7;
  }
  .dm\:col-end-7 {
    grid-column-end: 7;
  }
  .dm\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-7 {
    grid-row-start: 7;
  }
  .dm\:row-end-7 {
    grid-row-end: 7;
  }
  .dm\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .dm\:col-start-8 {
    grid-column-start: 8;
  }
  .dm\:col-end-8 {
    grid-column-end: 8;
  }
  .dm\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .dm\:col-span-full {
    grid-column: 1/-1;
  }
  .dm\:row-start-8 {
    grid-row-start: 8;
  }
  .dm\:row-end-8 {
    grid-row-end: 8;
  }
  .dm\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 100em) {
  .lg\:col-start-1 {
    grid-column-start: 1;
  }
  .lg\:col-end-1 {
    grid-column-end: 1;
  }
  .lg\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-1 {
    grid-row-start: 1;
  }
  .lg\:row-end-1 {
    grid-row-end: 1;
  }
  .lg\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .lg\:col-start-2 {
    grid-column-start: 2;
  }
  .lg\:col-end-2 {
    grid-column-end: 2;
  }
  .lg\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-2 {
    grid-row-start: 2;
  }
  .lg\:row-end-2 {
    grid-row-end: 2;
  }
  .lg\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .lg\:col-start-3 {
    grid-column-start: 3;
  }
  .lg\:col-end-3 {
    grid-column-end: 3;
  }
  .lg\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-3 {
    grid-row-start: 3;
  }
  .lg\:row-end-3 {
    grid-row-end: 3;
  }
  .lg\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .lg\:col-start-4 {
    grid-column-start: 4;
  }
  .lg\:col-end-4 {
    grid-column-end: 4;
  }
  .lg\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-4 {
    grid-row-start: 4;
  }
  .lg\:row-end-4 {
    grid-row-end: 4;
  }
  .lg\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .lg\:col-start-5 {
    grid-column-start: 5;
  }
  .lg\:col-end-5 {
    grid-column-end: 5;
  }
  .lg\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-5 {
    grid-row-start: 5;
  }
  .lg\:row-end-5 {
    grid-row-end: 5;
  }
  .lg\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .lg\:col-start-6 {
    grid-column-start: 6;
  }
  .lg\:col-end-6 {
    grid-column-end: 6;
  }
  .lg\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-6 {
    grid-row-start: 6;
  }
  .lg\:row-end-6 {
    grid-row-end: 6;
  }
  .lg\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .lg\:col-start-7 {
    grid-column-start: 7;
  }
  .lg\:col-end-7 {
    grid-column-end: 7;
  }
  .lg\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-7 {
    grid-row-start: 7;
  }
  .lg\:row-end-7 {
    grid-row-end: 7;
  }
  .lg\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .lg\:col-start-8 {
    grid-column-start: 8;
  }
  .lg\:col-end-8 {
    grid-column-end: 8;
  }
  .lg\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
  .lg\:row-start-8 {
    grid-row-start: 8;
  }
  .lg\:row-end-8 {
    grid-row-end: 8;
  }
  .lg\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 112.5em) {
  .xl\:col-start-1 {
    grid-column-start: 1;
  }
  .xl\:col-end-1 {
    grid-column-end: 1;
  }
  .xl\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-1 {
    grid-row-start: 1;
  }
  .xl\:row-end-1 {
    grid-row-end: 1;
  }
  .xl\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .xl\:col-start-2 {
    grid-column-start: 2;
  }
  .xl\:col-end-2 {
    grid-column-end: 2;
  }
  .xl\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-2 {
    grid-row-start: 2;
  }
  .xl\:row-end-2 {
    grid-row-end: 2;
  }
  .xl\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .xl\:col-start-3 {
    grid-column-start: 3;
  }
  .xl\:col-end-3 {
    grid-column-end: 3;
  }
  .xl\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-3 {
    grid-row-start: 3;
  }
  .xl\:row-end-3 {
    grid-row-end: 3;
  }
  .xl\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .xl\:col-start-4 {
    grid-column-start: 4;
  }
  .xl\:col-end-4 {
    grid-column-end: 4;
  }
  .xl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-4 {
    grid-row-start: 4;
  }
  .xl\:row-end-4 {
    grid-row-end: 4;
  }
  .xl\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .xl\:col-start-5 {
    grid-column-start: 5;
  }
  .xl\:col-end-5 {
    grid-column-end: 5;
  }
  .xl\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-5 {
    grid-row-start: 5;
  }
  .xl\:row-end-5 {
    grid-row-end: 5;
  }
  .xl\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .xl\:col-start-6 {
    grid-column-start: 6;
  }
  .xl\:col-end-6 {
    grid-column-end: 6;
  }
  .xl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-6 {
    grid-row-start: 6;
  }
  .xl\:row-end-6 {
    grid-row-end: 6;
  }
  .xl\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .xl\:col-start-7 {
    grid-column-start: 7;
  }
  .xl\:col-end-7 {
    grid-column-end: 7;
  }
  .xl\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-7 {
    grid-row-start: 7;
  }
  .xl\:row-end-7 {
    grid-row-end: 7;
  }
  .xl\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .xl\:col-start-8 {
    grid-column-start: 8;
  }
  .xl\:col-end-8 {
    grid-column-end: 8;
  }
  .xl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
  .xl\:row-start-8 {
    grid-row-start: 8;
  }
  .xl\:row-end-8 {
    grid-row-end: 8;
  }
  .xl\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
@media only screen and (min-width: 160em) {
  .xxl\:col-start-1 {
    grid-column-start: 1;
  }
  .xxl\:col-end-1 {
    grid-column-end: 1;
  }
  .xxl\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-1 {
    grid-row-start: 1;
  }
  .xxl\:row-end-1 {
    grid-row-end: 1;
  }
  .xxl\:row-span-1 {
    grid-row: span 1/span 1;
  }
  .xxl\:col-start-2 {
    grid-column-start: 2;
  }
  .xxl\:col-end-2 {
    grid-column-end: 2;
  }
  .xxl\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-2 {
    grid-row-start: 2;
  }
  .xxl\:row-end-2 {
    grid-row-end: 2;
  }
  .xxl\:row-span-2 {
    grid-row: span 2/span 2;
  }
  .xxl\:col-start-3 {
    grid-column-start: 3;
  }
  .xxl\:col-end-3 {
    grid-column-end: 3;
  }
  .xxl\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-3 {
    grid-row-start: 3;
  }
  .xxl\:row-end-3 {
    grid-row-end: 3;
  }
  .xxl\:row-span-3 {
    grid-row: span 3/span 3;
  }
  .xxl\:col-start-4 {
    grid-column-start: 4;
  }
  .xxl\:col-end-4 {
    grid-column-end: 4;
  }
  .xxl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-4 {
    grid-row-start: 4;
  }
  .xxl\:row-end-4 {
    grid-row-end: 4;
  }
  .xxl\:row-span-4 {
    grid-row: span 4/span 4;
  }
  .xxl\:col-start-5 {
    grid-column-start: 5;
  }
  .xxl\:col-end-5 {
    grid-column-end: 5;
  }
  .xxl\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-5 {
    grid-row-start: 5;
  }
  .xxl\:row-end-5 {
    grid-row-end: 5;
  }
  .xxl\:row-span-5 {
    grid-row: span 5/span 5;
  }
  .xxl\:col-start-6 {
    grid-column-start: 6;
  }
  .xxl\:col-end-6 {
    grid-column-end: 6;
  }
  .xxl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-6 {
    grid-row-start: 6;
  }
  .xxl\:row-end-6 {
    grid-row-end: 6;
  }
  .xxl\:row-span-6 {
    grid-row: span 6/span 6;
  }
  .xxl\:col-start-7 {
    grid-column-start: 7;
  }
  .xxl\:col-end-7 {
    grid-column-end: 7;
  }
  .xxl\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-7 {
    grid-row-start: 7;
  }
  .xxl\:row-end-7 {
    grid-row-end: 7;
  }
  .xxl\:row-span-7 {
    grid-row: span 7/span 7;
  }
  .xxl\:col-start-8 {
    grid-column-start: 8;
  }
  .xxl\:col-end-8 {
    grid-column-end: 8;
  }
  .xxl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xxl\:col-span-full {
    grid-column: 1/-1;
  }
  .xxl\:row-start-8 {
    grid-row-start: 8;
  }
  .xxl\:row-end-8 {
    grid-row-end: 8;
  }
  .xxl\:row-span-8 {
    grid-row: span 8/span 8;
  }
}
h1,
.like-h1,
h2,
.like-h2,
h3,
.like-h3,
h4,
.like-h4,
h5,
.like-h5,
h6,
.like-h6 {
  display: block;
  width: auto;
  --font-weight: var(--heading-font-weight);
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
}
h1 + *,
.like-h1 + *,
h2 + *,
.like-h2 + *,
h3 + *,
.like-h3 + *,
h4 + *,
.like-h4 + *,
h5 + *,
.like-h5 + *,
h6 + *,
.like-h6 + * {
  margin-top: 0;
}
h1:first-child,
.like-h1:first-child,
h2:first-child,
.like-h2:first-child,
h3:first-child,
.like-h3:first-child,
h4:first-child,
.like-h4:first-child,
h5:first-child,
.like-h5:first-child,
h6:first-child,
.like-h6:first-child {
  margin-top: 0 !important;
}

:where(.flex--row) h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
}

:where(.flow-container) h1,
.like-h1 {
  max-width: 40ch;
}

:where(.flow-container) h2,
.like-h2 {
  max-width: 45ch;
}

:where(.flow-container) h3,
.like-h3 {
  max-width: 60ch;
}

:where(.flow-container) h4,
.like-h4 {
  max-width: 75ch;
}

:where(.flow-container) h5,
.like-h5,
h6,
.like-h6 {
  max-width: 80ch;
}

h4,
.like-h4 {
  --color: var(--color-h4, var(--on-neutral-color));
  color: var(--color);
  font-size: 1.2em;
  margin-top: calc((var(--heading-flow-space-ratio) * 0.6) * 1em);
  /*    &:first-child {
        margin-top:0;
      }

      &:only-child {
        margin-bottom:0 !important;
      }*/
}

h3,
.like-h3 {
  --color: var(--color-h3, var(--on-neutral-color));
  color: var(--color);
  font-size: 1.44em;
  margin-top: calc((var(--heading-flow-space-ratio) * 0.72) * 1em);
  /*    &:first-child {
        margin-top:0;
      }

      &:only-child {
        margin-bottom:0 !important;
      }*/
}

h2,
.like-h2 {
  --color: var(--color-h2, var(--on-neutral-color));
  color: var(--color);
  font-size: 1.728em;
  margin-top: calc((var(--heading-flow-space-ratio) * 0.864) * 1em);
  /*    &:first-child {
        margin-top:0;
      }

      &:only-child {
        margin-bottom:0 !important;
      }*/
}

h1,
.like-h1 {
  --color: var(--color-h1, var(--on-neutral-color));
  color: var(--color);
  font-size: 2.0736em;
  margin-top: calc((var(--heading-flow-space-ratio) * 1.0368) * 1em);
  /*    &:first-child {
        margin-top:0;
      }

      &:only-child {
        margin-bottom:0 !important;
      }*/
}

h5,
.like-h5 {
  color: var(--color-h5, inherit);
  font-size: var(--heading-font-size);
}

h6,
.like-h6 {
  color: var(--color-h6, inherit);
  font-size: var(--heading-font-size);
}

h5,
h6 {
  margin-top: calc(var(--heading-flow-space-ratio) * 1em);
}
h5:only-child,
h6:only-child {
  margin-bottom: 0 !important;
}

.like-h1,
.like-h2,
.like-h3,
.like-h4,
.like-h5,
.like-h6 {
  margin-top: unset;
}
.like-h1:only-child,
.like-h2:only-child,
.like-h3:only-child,
.like-h4:only-child,
.like-h5:only-child,
.like-h6:only-child {
  margin-bottom: 0 !important;
}

p {
  font-size: 1em;
  margin-top: calc(var(--flow-space-ratio) * 1em);
  line-height: calc(var(--font-content-line-height) * 1em);
}
p + *:is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)) {
  margin-top: calc(var(--flow-space-ratio) * 1em);
}
p:first-child {
  margin-top: 0;
}

:where(.flow-container) p {
  max-width: 85ch;
}

mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-color-background);
  color: var(--mark-color-text);
  vertical-align: middle;
}

ins {
  background-color: var(--ins-color-background);
  color: var(--ins-color-text);
  text-decoration: none;
}

del {
  background-color: var(--del-color-background);
  color: var(--del-color-text);
  vertical-align: middle;
}

s {
  vertical-align: middle;
}

u {
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: inherit;
}

i {
  font-weight: 300;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

blockquote {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-color: var(--primary-color);
  --box-shadow: var(--neutral-shadow);
  --glyph-color: var(--primary-color);
  --glyph-opacity: 0.25;
  --cite-color: var(--on-neutral-color-variation-3);
  margin: 1.5em 1rem;
  padding: 0.5em 1rem;
  background: var(--background-color);
  border-left: 10px solid var(--border-color);
  box-shadow: var(--box-shadow);
  font-family: var(--font-family-alt);
  max-width: 85ch;
}
blockquote:before {
  position: relative;
  top: 0.15em;
  left: 0.15em;
  margin-right: 0.25em;
  content: "”";
  color: hsla(var(--glyph-color), var(--glyph-opacity));
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
  z-index: 500;
}
blockquote p {
  display: inline;
}
blockquote cite {
  color: var(--cite-color);
}
blockquote footer {
  margin-right: 0.25em;
  padding: 0.5em 1em;
  text-align: right;
}

.blockquote--hide-glyph::before {
  display: none;
}

hr {
  position: relative;
  width: 100%;
  height: 1px;
  margin: var(--block-half-spacing) 0;
  background: var(--divider-color);
  border: 0;
  overflow: visible;
}
hr + *:is(h1, h2, h3, h4, h5, h6) {
  margin-top: calc(var(--flow-space-ratio) * 1em);
}
hr + table {
  margin-top: 0;
}

time {
  font-weight: 700;
}

strong,
b {
  font-size: 1.1em;
}

pre,
code,
kbd,
samp,
var,
output {
  font-size: 0.875em;
  font-family: var(--font-family-mono);
}

output {
  font-weight: 700;
}

pre,
code,
kbd {
  border-radius: var(--elem-border-radius);
  font-family: var(--font-family-mono);
  font-size: 1.4rem;
  font-weight: var(--font-weight);
  line-height: initial;
}

code,
kbd {
  display: inline-block;
  background: var(--code-color-background);
  color: var(--code-color-text);
  padding: 0.275em 0.5em;
}

kbd {
  background-color: var(--kbd-color-background);
  color: var(--kbd-color-text);
}

samp > kbd {
  border-radius: 0;
  color: initial;
  font-weight: 700;
  background: initial;
}

pre {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  margin: calc(var(--block-spacing) * 0.5) 0;
  margin-bottom: 0;
  padding: 0;
  box-shadow: var(--neutral-shadow-alt);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  word-break: normal;
  hyphens: none;
  tab-size: 2;
  width: 100%;
}
pre > code {
  display: block;
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
  background: var(--code-color-background);
  line-height: normal;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}
pre:first-child {
  margin-top: 0;
}
pre:last-child {
  margin-bottom: calc(var(--block-spacing) * 0.5);
}
pre + :is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)) {
  margin-top: var(--block-half-spacing);
}

pre[data-lang]:not([data-lang=""]):before {
  position: absolute;
  content: attr(data-lang);
  top: -0.2rem;
  right: 0.4rem;
  padding: 0.4rem;
  background-color: var(--code-color-lang-background);
  color: var(--code-color-lang-text);
  text-transform: uppercase;
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 700;
  font-size: 0.6em;
  border-radius: var(--elem-border-radius);
}

code b {
  font-size: 1em;
  color: var(--code-color-tag);
  font-weight: var(--font-weight);
}
code i {
  color: var(--code-color-property);
  font-style: normal;
}
code u {
  color: var(--code-color-value);
  text-decoration: none;
  border: none;
}
code em {
  color: var(--code-color-comment);
  font-style: normal;
}
code var {
  color: var(--code-color-var);
  font-style: normal;
  font-weight: 700;
}

a, a:visited,
.link,
.link:visited {
  --background-color: transparent;
  --color: var(--primary-color);
  --decoration-color: var(--primary-color);
  --hover-background-color: transparent;
  --hover-color: var(--primary-color-variation-1);
  --hover-decoration-color: var(--primary-color-variation-1);
  background-color: var(--background-color);
  color: var(--color);
  font-size: 1.1em;
  text-decoration-color: var(--decoration-color);
  transition: all 0.2s ease;
  cursor: pointer;
}
a:hover, a:focus,
.link:hover,
.link:focus {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
  text-decoration-color: var(--hover-decoration-color);
}
a[aria-current],
.link[aria-current] {
  color: var(--hover-color);
  font-weight: 500;
  pointer-events: none;
}
a.link--mark,
.link.link--mark {
  --background-color: var(--primary-color);
  --color: var(--on-primary-color);
  --hover-background-color: var(--primary-color-variation-1);
  --hover-color: var(--on-primary-color-variation-1);
  padding: 0 0.4rem;
}

a.link--secondary {
  --color: var(--secondary-color);
  --decoration-color: var(--secondary-color);
  --hover-color: var(--secondary-color-variation-1);
  --hover-decoration-color: var(--secondary-color-variation-1);
}
a.link--secondary.link--mark {
  --background-color: var(--secondary-color);
  --color: var(--on-secondary-color);
  --hover-background-color: var(--secondary-color-variation-1);
  --hover-color: var(--on-secondary-color-variation-1);
  padding: 0 0.4rem;
}

.link-underline {
  text-decoration: underline;
}
.link-underline:hover {
  text-decoration: underline;
}
.link-underline--dashed {
  text-decoration-style: dashed;
}
.link-underline--dashed:hover {
  text-decoration-style: dashed;
}
.link-underline--dotted {
  text-decoration-style: dotted;
}
.link-underline--dotted:hover {
  text-decoration-style: dotted;
}
.link-underline--double {
  text-decoration-style: double;
}
.link-underline--double:hover {
  text-decoration-style: double;
}
.link-underline--wavy {
  text-decoration-style: wavy;
}
.link-underline--wavy:hover {
  text-decoration-style: wavy;
}
.link-underline--lineThrough {
  text-decoration-line: line-through;
}
.link-underline--lineThrough:hover {
  text-decoration-line: line-through;
}
.link-underline--overline {
  text-decoration-line: overline;
}
.link-underline--overline:hover {
  text-decoration-line: overline;
}
.link-underline--around {
  text-decoration-line: underline overline;
}
.link-underline--around:hover {
  text-decoration-line: underline overline;
}

button,
[role*=button],
input[type=button],
input[type=submit],
input[type=reset],
.btn {
  display: inline-flex;
  position: relative;
  width: fit-content;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--half-spacing);
  padding: 0.5rem 1.2rem;
  background-clip: padding-box !important;
  font-size: 1em;
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
  /*  &:last-child {
      margin-bottom: 0;
    }*/
}
button[disabled], button[aria-disabled], button:disabled,
[role*=button][disabled],
[role*=button][aria-disabled],
[role*=button]:disabled,
input[type=button][disabled],
input[type=button][aria-disabled],
input[type=button]:disabled,
input[type=submit][disabled],
input[type=submit][aria-disabled],
input[type=submit]:disabled,
input[type=reset][disabled],
input[type=reset][aria-disabled],
input[type=reset]:disabled,
.btn[disabled],
.btn[aria-disabled],
.btn:disabled {
  box-shadow: none;
  opacity: 0.15;
  pointer-events: none;
}
button svg,
[role*=button] svg,
input[type=button] svg,
input[type=submit] svg,
input[type=reset] svg,
.btn svg {
  width: 0.8em;
  height: 0.8em;
}

button,
[role*=button],
input[type=button],
input[type=submit],
input[type=reset],
.btn,
.btn--primary {
  --background-color: var(--primary-color);
  --color: var(--on-primary-color);
  --border-color: var(--primary-color-variation-2);
  --border-width: var(--control-border-width);
  --border-radius: var(--control-border-radius);
  --box-shadow: var(--primary-shadow);
  --hover-background-color: var(--primary-color-variation-1);
  --hover-color: var(--on-primary-color-variation-1);
  --hover-border-color: var(--primary-color-variation-3);
  --hover-box-shadow: var(--primary-shadow-variation-1);
  --active-background-color: var(--primary-color-variation-2);
  --active-color: var(--on-primary-color-variation-2);
  --active-border-color: var(--primary-color-variation-1);
  --active-box-shadow: var(--primary-shadow-variation-2);
  --focus-outline-width: calc(var(--border-width) * 3);
  --focus-outline-color: var(--on-primary-color-variation-1);
  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
button:active, button:focus,
[role*=button]:active,
[role*=button]:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=submit]:active,
input[type=submit]:focus,
input[type=reset]:active,
input[type=reset]:focus,
.btn:active,
.btn:focus,
.btn--primary:active,
.btn--primary:focus {
  background-color: var(--active-background-color);
  color: var(--active-color);
  outline: dotted var(--focus-outline-color) var(--focus-outline-width);
  outline-offset: -0.35em;
  box-shadow: var(--active-box-shadow, initial);
}
button:hover,
[role*=button]:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.btn:hover,
.btn--primary:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
  border: var(--border-width) solid var(--hover-border-color);
  box-shadow: var(--hover-box-shadow, initial);
}

input[type=reset],
button[type=reset],
.btn--secondary {
  --background-color: var(--secondary-color);
  --color: var(--on-secondary-color);
  --border-color: var(--secondary-color-variation-2);
  --hover-background-color: var(--secondary-color-variation-1);
  --hover-color: var(--on-secondary-color-variation-1);
  --hover-border-color: var(--secondary-color-variation-3);
  --active-background-color: var(--secondary-color-variation-2);
  --active-color: var(--on-secondary-color-variation-2);
  --active-border-color: var(--secondary-color-variation-1);
  --focus-outline-color: var(--on-secondary-color-variation-1);
}

.btn--outline {
  --border-color: var(--background-color) !important;
  --color: var(--background-color) !important;
  --hover-color: var(--hover-background-color) !important;
  --hover-border-color: var(--hover-background-color) !important;
  background: transparent !important;
}

.btn--pills {
  --border-radius: 2em;
}

.btn--noshadow {
  box-shadow: none !important;
}

.btn--noborder {
  border-style: none !important;
}

.btn--norounded {
  --border-radius: 0;
}

.btn--circle {
  --border-radius: 50%;
}

.btn--block {
  width: 100% !important;
  margin-bottom: var(--half-spacing);
  margin-right: 0 !important;
}

.btn--big {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  font-size: 1.6em !important;
}

.btn--small {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.8em !important;
}

.btn--info {
  --background-color: var(--info-color);
  --color: var(--on-info-color);
  --border-color: var(--info-color-variation-2);
  --hover-background-color: var(--info-color-variation-1);
  --hover-color: var(--on-info-color-variation-1);
  --hover-border-color: var(--info-color);
  --active-background-color: var(--info-color-variation-2);
  --active-color: var(--on-info-color-variation-2);
  --active-border-color: var(--info-color-variation-1);
  --focus-outline-color: var(--info-color-variation-1);
}

.btn--success {
  --background-color: var(--success-color);
  --color: var(--on-success-color);
  --border-color: var(--success-color-variation-2);
  --hover-background-color: var(--success-color-variation-1);
  --hover-color: var(--on-success-color-variation-1);
  --hover-border-color: var(--success-color);
  --active-background-color: var(--success-color-variation-2);
  --active-color: var(--on-success-color-variation-2);
  --active-border-color: var(--success-color-variation-1);
  --focus-outline-color: var(--success-color-variation-1);
}

.btn--warning {
  --background-color: var(--warning-color);
  --color: var(--on-warning-color);
  --border-color: var(--warning-color-variation-2);
  --hover-background-color: var(--warning-color-variation-1);
  --hover-color: var(--on-warning-color-variation-1);
  --hover-border-color: var(--warning-color);
  --active-background-color: var(--warning-color-variation-2);
  --active-color: var(--on-warning-color-variation-2);
  --active-border-color: var(--warning-color-variation-1);
  --focus-outline-color: var(--warning-color-variation-1);
}

.btn--danger {
  --background-color: var(--danger-color);
  --color: var(--on-danger-color);
  --border-color: var(--danger-color-variation-2);
  --hover-background-color: var(--danger-color-variation-1);
  --hover-color: var(--on-danger-color-variation-1);
  --hover-border-color: var(--danger-color);
  --active-background-color: var(--danger-color-variation-2);
  --active-color: var(--on-danger-color-variation-2);
  --active-border-color: var(--danger-color-variation-1);
  --focus-outline-color: var(--danger-color-variation-1);
}

form {
  --border-width: var(--control-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --box-shadow: var(--primary-shadow);
  position: relative;
  padding: var(--padding, var(--inner-spacing));
  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
form > footer {
  display: flex;
  flex-flow: row wrap;
  column-gap: 0.25em;
  padding: var(--spacing);
  padding-right: 0;
  align-items: center;
  justify-content: flex-end;
}
form > [class*=grid]:not(:first-child) {
  margin-top: var(--spacing);
}

.form-inline {
  flex-direction: column;
  align-items: stretch;
}

@media only screen and (min-width: 56.25em) {
  .form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;
  }
  .form-inline label,
.form-inline input {
    margin-top: 0;
    margin-right: 0.5em;
    width: unset !important;
  }
}
fieldset {
  position: relative;
  margin: var(--spacing) 0 0;
  padding: 0;
  border: 0;
}
fieldset:first-child {
  margin-top: 0;
}
fieldset.is-groupbox {
  --border-width: var(--control-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--inner-v-spacing) var(--half-spacing);
}
fieldset.is-groupbox > legend {
  --border-width: var(--control-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  --color: var(--on-neutral-color-variation-1);
  padding: 0.35em 0.5em;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--color);
}
fieldset.is-groupbox + *:is(:not(h1, h2, h3, h4, h5, section, article)) {
  margin-top: var(--block-half-spacing);
}

@media only screen and (min-width: 25em) {
  fieldset.is-groupbox {
    padding: var(--inner-v-spacing) var(--spacing);
  }
}
@media only screen and (min-width: 37.5em) {
  fieldset.is-groupbox {
    padding: var(--inner-v-spacing) var(--inner-h-spacing);
  }
}
fieldset legend {
  display: block;
}

label {
  display: block;
  margin-top: var(--spacing);
  max-width: 100%;
}
label > input, label + input {
  margin-top: 0 !important;
}

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
select,
textarea {
  width: 100%;
  margin-top: var(--spacing);
}

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[aria-disabled=false],
select,
select[aria-disabled=false],
textarea,
textarea[aria-disabled=false] {
  --spacing-v: 0.75rem;
  --spacing-h: 1rem;
  --background-color: var(--neutral-color);
  --color: var(--on-neutral-color-variation-1);
  --border-width: var(--control-border-width);
  --border-color: var(--primary-color-variation-2);
  --border-radius: calc(var(--elem-border-radius) * 0.5);
  --border: var(--border-width) solid var(--border-color);
  --box-shadow: none;
  --focus-box-shadow: var(--neutral-shadow);
  --hover-background-color: var(--neutral-color-variation-2);
  --hover-color: var(--primary-color);
  --hover-border-color: var(--primary-color-variation-1);
  --placeholder-color: var(--on-neutral-color-variation-3);
  --focus-outline-width: var(--elem-outline-width);
  --focus-border-color: var(--primary-color-variation-1);
  appearance: none;
  padding: var(--spacing-v) var(--spacing-h);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: 0;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  transition: all 0.3s ease-in-out;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[aria-disabled=false]:focus,
select:focus,
select[aria-disabled=false]:focus,
textarea:focus,
textarea[aria-disabled=false]:focus {
  background-color: var(--focus-background-color);
  color: var(--focus-color);
  border: var(--border-width) solid var(--focus-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[aria-disabled=false]:focus,
select:focus,
select[aria-disabled=false]:focus,
textarea:focus,
textarea[aria-disabled=false]:focus {
  box-shadow: var(--focus-box-shadow), 0 0 0 var(--focus-outline-width) var(--focus-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[aria-disabled=false]:hover,
select:hover,
select[aria-disabled=false]:hover,
textarea:hover,
textarea[aria-disabled=false]:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
  border: var(--border-width) solid var(--hover-border-color);
  box-shadow: var(--hover-box-shadow);
}

input:not([type=submit]):not([type=button]):not([type=reset])[aria-disabled=true], input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[aria-disabled=true],
select[disabled],
textarea[aria-disabled=true],
textarea[disabled] {
  --background-color: var(--neutral-color-variation-3) !important;
  --border-color: var(--neutral-color-variation-2) !important;
  --color: var(--on-primary-color-variation-3) !important;
  --opacity: 0.5;
  opacity: var(--opacity);
}
input:not([type=submit]):not([type=button]):not([type=reset])[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
  --focus-border-color: var(--danger-color) !important;
  --border-color: var(--danger-color) !important;
  --color: var(--danger-color-text) !important;
  padding-right: 2.5em !important;
  background-position: center right 0.75rem;
  background-size: 1em auto;
  background-repeat: no-repeat;
  background-image: var(--icon-danger);
}
input:not([type=submit]):not([type=button]):not([type=reset])[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
  --focus-border-color: var(--success-color) !important;
  --border-color: var(--success-color) !important;
  --color: var(--success-color-text) !important;
  padding-right: 2.5em !important;
  background-position: center right 0.75rem;
  background-size: 1em auto;
  background-repeat: no-repeat;
  background-image: var(--icon-success);
}

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file])[readonly] {
  cursor: not-allowed !important;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file])[readonly]:active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file])[readonly]:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
  color: var(--placeholder-color);
  opacity: 1;
}

select {
  --arrow-background-color: var(--primary-color);
  --arrow-color: var(--on-primary-color);
  --arrow-hover-background-color: var(--primary-color-variation-1);
  --arrow-hover-color: var(--on-primary-color-variation-1);
}
select:not([multiple]):not([size]) {
  max-height: 2.25em;
  padding-right: var(--half-spacing);
  padding-left: var(--half-spacing);
  background-image: linear-gradient(var(--arrow-color) 0%, var(--arrow-color) 100%), linear-gradient(-135deg, transparent 50%, var(--arrow-background-color) 50%), linear-gradient(-225deg, transparent 50%, var(--arrow-background-color) 50%), linear-gradient(var(--arrow-background-color) 42%, var(--arrow-color) 42%);
  background-position: right 20px center, right bottom, right bottom, right bottom;
  background-size: 0 100%, 20px 30px, 20px 30px, 20px 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-color: var(--background-color);
  cursor: pointer;
}
select:not([multiple]):not([size]):active, select:not([multiple]):not([size]):hover {
  background-image: linear-gradient(var(--arrow-hover-color) 0%, var(--arrow-hover-color) 100%), linear-gradient(-135deg, transparent 50%, var(--arrow-hover-background-color) 50%), linear-gradient(-225deg, transparent 50%, var(--arrow-hover-background-color) 50%), linear-gradient(var(--arrow-hover-background-color) 42%, var(--arrow-hover-color) 42%);
}
select option {
  background-color: var(--background-color);
  color: var(--color);
}
select option:hover {
  background-color: var(--primary-color-variation-1);
  color: var(--on-primary-color-variation-1);
}
select option:checked {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
}

input[type=checkbox],
input[type=radio] {
  clip: rect(0 0 0 0);
  appearance: none;
  width: 0;
  height: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  cursor: pointer;
  opacity: 0;
}
input[type=checkbox] + label,
input[type=radio] + label {
  --background-color: var(--primary-color);
  --color: var(--primary-color);
  --border-width: var(--control-border-width);
  --border-color: var(--primary-color-variation-2);
  --hover-border-color: var(--primary-color-variation-1);
  --outline-width: var(--elem-outline-width);
  --focus-border-color: var(--primary-color-variation-1);
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-top: 0;
  margin-right: 0.5em;
  margin-bottom: 0;
  padding-left: 1.6em;
  cursor: pointer;
  min-height: 1em;
  min-width: 1em;
  transition: all 0.2s ease-in-out;
  width: unset;
}
input[type=checkbox] + label::before, input[type=checkbox] + label::after,
input[type=radio] + label::before,
input[type=radio] + label::after {
  display: inline-block;
  position: absolute;
  content: "";
}
input[type=checkbox] + label::before,
input[type=radio] + label::before {
  top: 50%;
  left: 0;
  width: 1.2em;
  height: 1.2em;
  transform: translate(0, -50%);
  border: var(--border-width) solid var(--border-color);
  border-radius: 50%;
}
input[type=checkbox]:hover + label::before, input[type=checkbox]:focus + label::before, input[type=checkbox]:checked + label::before,
input[type=radio]:hover + label::before,
input[type=radio]:focus + label::before,
input[type=radio]:checked + label::before {
  top: 50%;
  left: 0;
  width: 1.2em;
  height: 1.2em;
  border: var(--border-width) solid var(--hover-border-color);
}
input[type=checkbox]:checked + label::after,
input[type=radio]:checked + label::after {
  content: "";
}
input[type=checkbox]:focus + label::before,
input[type=radio]:focus + label::before {
  box-shadow: 0 0 0 var(--outline-width) var(--focus-border-color);
}

input[type=radio] + label::after {
  top: 50%;
  left: 0.15em;
  width: 0.9em;
  height: 0.9em;
  transform: translate(0, -50%);
  border-radius: 50%;
  background-color: var(--background-color);
  content: none;
}
input[type=radio]:checked + label {
  color: var(--color);
}

input[type=checkbox] + label {
  --border-color: var(--primary-color);
}
input[type=checkbox] + label::before {
  left: -0.25em;
  border-radius: 0.4rem;
}
input[type=checkbox]:hover + label::before, input[type=checkbox]:focus + label::before, input[type=checkbox]:checked + label::before {
  left: -0.25em;
}
input[type=checkbox] + label::after {
  top: 0.45em;
  left: 0;
  width: 0.8em;
  height: 0.45em;
  transform: rotate(-45deg);
  border-bottom: 3px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  content: none;
}

input[type=checkbox][role=switch] {
  --radius-size: calc(1.25em - (var(--border-width) * 4));
  --background-color: var(--neutral-color-variation-1);
  --switch-color-checked: var(--primary-color-variation-1);
  --switch-color: var(--primary-color);
  --color: var(--primary-color);
  --label-on-color: var(--on-primary-color-variation-1);
  --label-off-color: var(--on-neutral-color-variation-1);
  --border-width: var(--control-border-width);
  --border-color: var(--primary-color-variation-2);
  --hover-border-color: var(--primary-color-variation-1);
  --inner-border-color: var(--primary-color-variation-3);
  --outline-width: var(--elem-outline-width);
  --focus-border-color: var(--primary-color-variation-1);
  clip: unset;
  position: relative;
  width: 3.25em;
  height: 1.25em;
  border: var(--border-width) solid var(--border-color);
  border-radius: 1.25em;
  background-color: var(--background-color);
  font-size: inherit;
  line-height: 1.25em;
  vertical-align: text-bottom;
  opacity: 1;
  transition: all 0.2s ease-in-out;
}
input[type=checkbox][role=switch]:before {
  content: "";
  display: block;
  width: var(--radius-size);
  height: var(--radius-size);
  margin-top: var(--border-width);
  margin-left: calc(var(--border-width) * 2);
  border: var(--border-width) solid var(--inner-border-color);
  border-radius: 50%;
  background-color: var(--switch-color);
  transition: all 0.2s ease-in-out;
}
input[type=checkbox][role=switch]:after {
  content: attr(data-off-label);
  display: flex;
  position: absolute;
  top: 0;
  right: calc(var(--border-width) * 2);
  align-items: center;
  justify-content: center;
  width: 3.25em;
  color: var(--label-off-color);
  font-size: 0.6em;
  transition: all 0.2s ease-in-out;
}
input[type=checkbox][role=switch]:hover {
  border: var(--border-width) solid var(--hover-border-color);
}
input[type=checkbox][role=switch]:focus {
  box-shadow: 0 0 0 var(--outline-width) var(--focus-border-color);
}
input[type=checkbox][role=switch]:checked {
  border: var(--border-width) solid var(--inner-border-color);
  background-color: var(--switch-color);
}
input[type=checkbox][role=switch]:checked:before {
  margin-left: calc(1.9em + var(--border-width) * 2);
  background-color: var(--switch-color-checked);
}
input[type=checkbox][role=switch]:checked:after {
  right: unset;
  left: calc(var(--border-width) * 2);
  /*justify-content: flex-start;
  padding-right:0;
  padding-left: calc((var(--spacing) * .25) + (var(--input-switch-border-width) * 2));*/
  content: attr(data-on-label);
  color: var(--label-on-color);
  font-weight: 700;
}

input[type=range] {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-width: var(--control-border-width);
  --border-color: var(--primary-color-variation-1);
  --border-radius: calc(var(--elem-border-radius) * 0.5);
  --border: var(--border-width) solid var(--border-color);
  --box-shadow: var(--primary-shadow);
  --thumb-color: var(--primary-color);
  --thumb-border: var(--border-width) solid var(--primary-color-variation-3);
  --track-border-color: var(--neutral-color-variation-2);
  appearance: none;
  position: relative;
  width: 100%;
  height: 0.25em;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25em;
  border-radius: var(--border-radius);
  background-color: var(--track-border-color);
  transition: all 0.2s ease-in-out;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.25em;
  border-radius: var(--border-radius);
  background-color: var(--track-border-color);
  transition: all 0.2s ease-in-out;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 0.25em;
  border-radius: var(--border-radius);
  background-color: var(--track-border-color);
  transition: all 0.2s ease-in-out;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.5em;
  border: var(--thumb-border);
  border-radius: 50%;
  background-color: var(--thumb-color);
  cursor: ew-resize;
  transition: all 0.2s ease-in-out;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.5em;
  border: var(--thumb-border);
  border-radius: 50%;
  background-color: var(--thumb-color);
  cursor: ew-resize;
  transition: all 0.2s ease-in-out;
}
input[type=range]::-ms-thumb {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.5em;
  border: var(--thumb-border);
  border-radius: 50%;
  background-color: var(--thumb-color);
  cursor: ew-resize;
  transition: all 0.2s ease-in-out;
}
input[type=range]:hover, input[type=range]:focus {
  --track-border-color: var(--primary-color-variation-1);
  --thumb-color: var(--primary-color-variation-1);
  --thumb-border: calc(var(--border-width) * 2) solid var(--primary-color);
}
input[type=range]:active {
  --track-border-color: var(--primary-color-variation-1);
  --thumb-color: var(--primary-color);
  --thumb-border: calc(var(--outline-width) * 2) solid var(--primary-color-variation-1);
}
input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.25);
}
input[type=range]:active::-moz-range-thumb {
  transform: scale(1.25);
}
input[type=range]:active::-ms-thumb {
  transform: scale(1.25);
}

.input-group-focus-within {
  padding: 1px;
  border: var(--elem-border-width) solid transparent;
}
.input-group-focus-within:focus-within {
  background-color: var(--neutral-color-variation-2);
  border: var(--elem-border-width) solid var(--neutral-color-variation-2);
}

.input-group-inline {
  display: flex;
  flex-flow: row wrap;
  margin-top: var(--spacing);
}
.input-group-inline > *:nth-child(1), .input-group-inline > *:nth-child(2), .input-group-inline > *:nth-child(3) {
  flex: 0 1 100%;
}
.input-group-inline > *:nth-child(1) {
  display: flex;
  justify-content: flex-start;
  margin-top: 0;
}
.input-group-inline > *:nth-child(3) {
  margin-bottom: 0;
}

@media only screen and (min-width: 37.5em) {
  .input-group-inline > *:nth-child(1) {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 0.5em;
    justify-content: flex-end;
    align-items: center;
  }
  .input-group-inline > *:nth-child(2) {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .input-group-inline > *:nth-child(3) {
    margin-left: 25.5%;
  }
}
input[type=color] {
  --height: calc(var(--control-input-height) * 2);
  height: var(--height);
}
input[type=color]::-moz-focus-inner, input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-moz-color-swatch, input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: var(--border-radius);
}

input[type=search] {
  padding-left: calc(var(--spacing-h) + 1.25em) !important;
  border-radius: 5em !important;
  background-image: var(--icon-search);
  background-position: center left 0.75em;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

label input[type=file][hidden],
label input[type=file][aria-hidden] {
  clip: rect(0, 0, 0, 0);
  z-index: -1;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  opacity: 0;
}

input[type=file]:not([hidden]) {
  --background-color: var(--primary-color);
  --color: var(--on-primary-color);
  --border-color: var(--primary-color-variation-2);
  --border-width: var(--control-border-width);
  --border-radius: var(--control-border-radius);
  --hover-background-color: var(--primary-color-variation-1);
  --hover-color: var(--on-primary-color-variation-1);
  --hover-border-color: var(--primary-color-variation-3);
}
input[type=file]:not([hidden])::file-selector-button {
  display: inline-flex;
  z-index: 1000;
  position: relative;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.5rem 1.2rem;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-clip: padding-box !important;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-size: 1em;
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s;
}
input[type=file]:not([hidden])::file-selector-button:active, input[type=file]:not([hidden])::file-selector-button:focus {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
input[type=file]:not([hidden])::file-selector-button:hover {
  border: var(--border-width) solid var(--hover-border-color);
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
input[type=file]:not([hidden])::-webkit-file-upload-button {
  display: inline-flex;
  z-index: 1000;
  position: relative;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.5rem 1.2rem;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-clip: padding-box !important;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-size: 1em;
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s;
}
input[type=file]:not([hidden])::-webkit-file-upload-button:active, input[type=file]:not([hidden])::-webkit-file-upload-button:focus {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
input[type=file]:not([hidden])::-webkit-file-upload-button:hover {
  border: var(--border-width) solid var(--hover-border-color);
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
input[type=file]:not([hidden])::-ms-browse {
  display: inline-flex;
  z-index: 1000;
  position: relative;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.5rem 1.2rem;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-clip: padding-box !important;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-size: 1em;
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s;
}
input[type=file]:not([hidden])::-ms-browse:active, input[type=file]:not([hidden])::-ms-browse:focus {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
input[type=file]:not([hidden])::-ms-browse:hover {
  border: var(--border-width) solid var(--hover-border-color);
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}

input + p,
select + p,
textarea + p,
input + span,
select + span,
textarea + span,
input + small,
select + small,
textarea + small {
  display: block;
  width: 100%;
  margin: calc(var(--spacing) * 0.5) 0.4rem;
  margin-bottom: var(--spacing);
  color: var(--on-neutral-color-variation-3);
}

:where(.flex--row) :where(input, select, textarea) {
  margin-top: 0;
  margin-bottom: 0;
}

table {
  --background-color: hsla(var(--neutral-color-h), var(--neutral-color-variation-1-s), var(--neutral-color-variation-1-l) 0.5);
  --color: var(--on-neutral-color-variation-1);
  --header-background-color: var(--neutral-color-variation-3);
  --header-color: var(--on-neutral-color-variation-3);
  --border-width: var(--elem-border-width);
  --border-color: var(--on-neutral-color-variation-1);
  /*
  --cell-hover-background-color
  --cell-hover-color
  --col-hover-background-color
  --col-hover-color
  --row-hover-background-color
  --row-hover-color
   */
  display: block;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  caption-side: bottom;
  border-collapse: collapse;
  white-space: nowrap;
  max-width: 100%;
  font-size: 0.875em;
  margin-top: var(--block-half-spacing);
  z-index: 1;
}
table thead {
  background-color: var(--header-background-color);
  color: var(--header-color);
  border-bottom: 2px solid currentColor;
}
table thead th {
  padding: 0.5em 0.8em;
  text-align: left;
  font-weight: 700;
}
table thead th:not(:last-child) {
  padding-right: 1.5em;
}
table tbody {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: var(--background-color);
  color: var(--color);
  white-space: nowrap;
}
table tfoot {
  background-color: var(--header-background-color);
  color: var(--header-color);
}
table tr {
  margin: 0;
  vertical-align: top;
}
table tr > th {
  background-color: var(--header-background-color);
  color: var(--header-color);
}
table tbody > tr > td {
  display: table-cell;
  padding: 0.5em 0.8em;
  border-bottom: var(--border-width) dotted var(--border-color);
}
table tbody > tr > td:not(:last-child) {
  padding-right: 1.5em;
}
table td,
table th {
  position: relative;
}

.table--sticky-header {
  display: table;
}
.table--sticky-header th {
  z-index: 1;
  position: sticky;
  top: 0;
}

.table--row-hover tbody tr {
  transition: all 0.2s ease-in-out;
}
.table--row-hover tbody tr:hover {
  background-color: hsla(var(--primary-color-h), var(--primary-color-variation-1-s), var(--primary-color-variation-1-l), 0.5);
}

.table--col-hover {
  --col-hover-color: hsla(var(--primary-color-h), var(--primary-color-variation-1-s), var(--primary-color-variation-1-l), 0.5);
  overflow-y: hidden;
  /* Focus stuff for mobile */
}
.table--col-hover td:hover::after,
.table--col-hover thead th:not(:empty):hover::after,
.table--col-hover td:focus::after,
.table--col-hover thead th:not(:empty):focus::after {
  z-index: -1;
  position: absolute;
  top: -5000px;
  left: 0;
  width: 100%;
  height: 10000px;
  content: "";
}
.table--col-hover th,
.table--col-hover td {
  transition: all 0.2s ease-in-out;
}
.table--col-hover td:hover::after,
.table--col-hover th:hover::after {
  background-color: var(--col-hover-color);
}
.table--col-hover td:focus::after,
.table--col-hover th:focus::after {
  background-color: var(--col-hover-color);
}
.table--col-hover td:focus::before,
.table--col-hover tbody th:focus::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: -5000px;
  width: 10000px;
  height: 100%;
  background-color: var(--col-hover-color);
}

.table--cell-hover tbody tr td:hover {
  background-color: var(--primary-color-variation-2);
  color: var(--on-primary-color-variation-2);
  cursor: pointer;
}

.table--bordered {
  --_table-border: var(--border-width) solid var(--border-color);
}
.table--bordered thead,
.table--bordered tbody,
.table--bordered tfoot {
  border: var(--_table-border);
}
.table--bordered tr {
  border-bottom: var(--_table-border);
}
.table--bordered tr:last-of-type {
  border-bottom: none;
}
.table--bordered th,
.table--bordered td {
  border-right: var(--_table-border);
}

.table--responsive {
  display: block;
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  border-spacing: 0;
  white-space: nowrap;
}
.table--responsive thead {
  clip: rect(1px 1px 1px 1px);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
}
.table--responsive tbody,
.table--responsive tr,
.table--responsive th,
.table--responsive td {
  display: block;
}
.table--responsive tbody tr:last-of-type {
  margin-bottom: 0;
}
.table--responsive th,
.table--responsive td {
  padding: 0.5em;
  vertical-align: middle;
}
.table--responsive td {
  position: relative;
}
.table--responsive td:before {
  display: inline-block;
  min-width: 16ch;
  padding-right: 1.6rem;
  content: attr(data-label);
  font-weight: bold;
  text-align: right;
  text-transform: uppercase;
}
.table--responsive.table--bordered {
  --_table-border: var(--border-width) solid var(--border-color);
}
.table--responsive.table--bordered thead,
.table--responsive.table--bordered tbody {
  border-right: none;
}
.table--responsive.table--bordered td:last-of-type {
  border-right: var(--_table-border);
}

/* Background-color of the odd rows */
/* Background-color of the even rows */
@media only screen and (min-width: 56.25em) {
  .table--responsive {
    width: auto;
  }
  .table--responsive thead {
    clip: initial;
    display: table-header-group;
    position: initial;
    width: initial;
    height: initial;
    overflow: initial;
  }
  .table--responsive tr {
    display: table-row;
    margin: 0;
    vertical-align: top;
  }
  .table--responsive td,
.table--responsive th {
    display: table-cell;
    padding: 0.4rem 0.8rem;
  }
  .table--responsive td:before {
    display: none;
    content: none;
  }
  .table--responsive tbody {
    display: table-row-group;
  }
  .table--responsive tfoot {
    display: table-footer-group;
  }
  .table--responsive.table--bordered th:last-of-type {
    border-right: var(--_table-border);
  }
}
progress {
  --background-color: var(--neutral-color-variation-2);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-3);
  --border-radius: var(--elem-border-radius);
  --progress-color: var(--primary-color);
  display: inline-block;
  appearance: none;
  width: 100%;
  height: var(--height, 1em);
  margin-top: var(--half-spacing);
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  color: var(--progress-color);
}
progress::-webkit-progress-bar {
  background: transparent;
  border-radius: var(--border-radius);
}
progress[value]::-webkit-progress-value {
  background-color: var(--progress-color);
  border-radius: var(--border-radius);
}
progress::-moz-progress-bar {
  background-color: var(--progress-color);
  border-radius: var(--border-radius);
}
progress:indeterminate, progress[indeterminate=true], progress:not([value]) {
  background: linear-gradient(to right, var(--progress-color) 30%, var(--background-color) 30%) top left/150% 150% no-repeat;
  animation: progressIndeterminate 2.5s linear infinite alternate;
}
progress:indeterminate[value]::-webkit-progress-value, progress[indeterminate=true][value]::-webkit-progress-value, progress:not([value])[value]::-webkit-progress-value {
  background-color: transparent;
}
progress:indeterminate::-moz-progress-bar, progress[indeterminate=true]::-moz-progress-bar, progress:not([value])::-moz-progress-bar {
  background-color: transparent;
}
progress:first-child {
  margin-top: 0;
}

@keyframes progressIndeterminate {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
figure {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
}

figcaption {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  padding: var(--half-spacing) var(--spacing);
}

figcaption.figcaption--top-left,
figcaption.figcaption--top-center,
figcaption.figcaption--top-right {
  position: absolute;
  left: 0;
  top: 0;
}

figcaption.figcaption--center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
}

figcaption.figcaption--bottom-left,
figcaption.figcaption--bottom-right,
figcaption.figcaption--bottom-center {
  position: absolute;
  left: 0;
  bottom: 0;
}

figcaption.figcaption--top-center,
figcaption.figcaption--bottom-center {
  justify-content: center;
}

figcaption.figcaption--top-right,
figcaption.figcaption--bottom-right {
  justify-content: flex-end;
}

video.fit,
img.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

video.contain,
img.contain {
  object-fit: contain;
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navbar,
.navbar ul,
nav,
nav ul {
  display: flex;
}

.navigation {
  display: flex;
  z-index: 5000;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.navigation--fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.navigation--fixed + * {
  margin-top: 5.8rem;
}
.navigation--sticky {
  position: sticky;
  top: 0;
  left: 0;
}

.navbar,
nav {
  --background-color: var(--neutral-color-variation-1);
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--background-color);
  padding: 0.5em;
}
.navbar ul,
nav ul {
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  list-style: none;
}
.navbar li,
nav li {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: var(--half-spacing);
  cursor: pointer;
  /* &:hover {
     & > .dropdown__menu,
     & > ul {
       visibility: visible;
       max-height: 50em;
       height: auto;
       opacity:1;
     }
   }*/
}
.navbar li.dropdown,
nav li.dropdown {
  flex-direction: column;
  justify-content: inherit;
  align-items: inherit;
}
.navbar li.dropdown > .dropdown__menu, .navbar li.dropdown > ul,
nav li.dropdown > .dropdown__menu,
nav li.dropdown > ul {
  position: relative;
  visibility: collapse;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
  align-items: inherit;
  min-width: max-content;
  max-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  z-index: 5500;
  background-color: transparent;
  opacity: 0;
  transition: all 0.25s ease-in;
  width: 100%;
  box-shadow: none;
}
.navbar li > ul li.dropdown > ul, .navbar li > ul li.dropdown > .dropdown__menu,
nav li > ul li.dropdown > ul,
nav li > ul li.dropdown > .dropdown__menu {
  left: 0;
}
.navbar li > ul li.dropdown > ul.dropdown__menu--left, .navbar li > ul li.dropdown > .dropdown__menu.dropdown__menu--left,
nav li > ul li.dropdown > ul.dropdown__menu--left,
nav li > ul li.dropdown > .dropdown__menu.dropdown__menu--left {
  left: 0;
}
.navbar a,
nav a {
  display: block;
}
.navbar > input[type=checkbox],
nav > input[type=checkbox] {
  display: none;
}

.navbar--align-left {
  justify-content: flex-start;
}
.navbar__item-push-right {
  margin-left: auto;
}
.navbar__menu-right {
  display: flex;
  flex-flow: row wrap;
  flex-grow: 1;
  justify-content: flex-end;
  margin-right: 0.5em;
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label:not(.navbar__toggler),
.navbar__toggler {
  z-index: 2500;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  text-align: center;
  cursor: pointer;
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon),
.navbar__toggler__icon {
  --background-color: var(--primary-color);
  --hover-background-color: var(--primary-color-variation-1);
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 2px;
  border: none;
  background-color: var(--background-color);
  transition: all 0.2s ease-in-out;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):before, nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):after,
.navbar__toggler__icon:before,
.navbar__toggler__icon:after {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--background-color);
  content: "";
  transition: all 0.2s ease-in-out;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):before,
.navbar__toggler__icon:before {
  top: -0.8rem;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):after,
.navbar__toggler__icon:after {
  top: 0.8rem;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover span:first-child, nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover .navbar__toggler__icon,
.navbar__toggler__icon:hover span:first-child,
.navbar__toggler__icon:hover .navbar__toggler__icon {
  background-color: var(--hover-background-color);
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover span:first-child:before, nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover span:first-child:after, nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover .navbar__toggler__icon:before, nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon):hover .navbar__toggler__icon:after,
.navbar__toggler__icon:hover span:first-child:before,
.navbar__toggler__icon:hover span:first-child:after,
.navbar__toggler__icon:hover .navbar__toggler__icon:before,
.navbar__toggler__icon:hover .navbar__toggler__icon:after {
  background-color: var(--hover-background-color);
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type,
.navbar__menu {
  --background-color: transparent;
  --box-shadow: var(--neutral-shadow-alt);
  display: flex;
  position: absolute;
  margin: 0;
  top: 100%;
  left: 0;
  width: 100%;
  padding: calc(var(--inner-v-spacing) * 0.5) 0;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type ul,
.navbar__menu ul {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type li:not(:first-child),
.navbar__menu li:not(:first-child) {
  margin-top: var(--half-spacing);
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type ul li,
.navbar__menu__item {
  display: flex;
  position: relative;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /*  &:hover + a {
        background-color: var(--navbar-menu-item-background-hover);
      }*/
}

.navigation > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon,
.navbar > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type=checkbox]:checked ~ label span:first-child,
nav > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon {
  background: transparent;
}

.navigation > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:before,
.navbar > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:before,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type=checkbox]:checked ~ label span:first-child:before,
nav > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:before {
  top: 0;
  height: 3px;
  transform: rotate(135deg);
}

.navigation > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:after,
.navbar > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:after,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type=checkbox]:checked ~ label span:first-child:after,
nav > input[type=checkbox]:checked ~ .navbar__toggler .navbar__toggler__icon:after {
  top: 0;
  height: 3px;
  transform: rotate(-135deg);
}

.navigation > input[type=checkbox]:checked ~ .navbar .navbar__menu,
.navigation > input[type=checkbox]:checked ~ nav .navbar__menu,
.navbar > input[type=checkbox]:checked ~ .navbar__menu,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type=checkbox]:checked ~ div:first-of-type,
nav > input[type=checkbox]:checked ~ .navbar__menu {
  --background-color: var(--neutral-color-variation-1);
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 37.5em) {
  .t\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .t\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .t\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .t\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 56.25em) {
  nav.md\:navigation-toggle .navbar__toggler,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) label {
    display: none !important;
  }
  .md\:navigation-toggle nav li.dropdown, .md\:navigation-toggle .navbar li.dropdown {
    width: auto;
  }
  .md\:navigation-toggle nav li.dropdown li, .md\:navigation-toggle .navbar li.dropdown li {
    margin-top: 0;
  }
  .md\:navigation-toggle nav li.dropdown > .dropdown__menu, .md\:navigation-toggle nav li.dropdown > ul, .md\:navigation-toggle .navbar li.dropdown > .dropdown__menu, .md\:navigation-toggle .navbar li.dropdown > ul {
    --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l));
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    left: 0;
    padding: var(--half-spacing) 0;
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
  }
  .md\:navigation-toggle nav li.dropdown > .dropdown__menu li, .md\:navigation-toggle nav li.dropdown > ul li, .md\:navigation-toggle .navbar li.dropdown > .dropdown__menu li, .md\:navigation-toggle .navbar li.dropdown > ul li {
    width: auto;
  }
  .md\:navigation-toggle nav li.dropdown > ul li.dropdown > ul, .md\:navigation-toggle .navbar li.dropdown > ul li.dropdown > ul {
    top: 0;
    left: 100%;
  }
  .md\:navigation-toggle nav li.dropdown > .dropdown__menu--left, .md\:navigation-toggle .navbar li.dropdown > .dropdown__menu--left {
    left: calc(-100% - var(--spacing)) !important;
  }
  nav:not(.md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) div:first-of-type,
.md\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  nav:not(.md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) div:first-of-type ul,
.md\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  nav:not(.md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) div:first-of-type li:not(:first-child),
.md\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 75em) {
  .d\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .d\:navigation-toggle nav .dropdown ul, .d\:navigation-toggle nav .dropdown ul li ul, .d\:navigation-toggle .navbar .dropdown ul, .d\:navigation-toggle .navbar .dropdown ul li ul {
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    width: max-content;
    box-shadow: var(--box-shadow);
  }
  .d\:navigation-toggle nav .dropdown ul li > ul, .d\:navigation-toggle .navbar .dropdown ul li > ul {
    left: 100%;
  }
  .d\:navigation-toggle nav .dropdown__menu--left, .d\:navigation-toggle .navbar .dropdown__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
  .d\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .d\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .d\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 90em) {
  .dm\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .dm\:navigation-toggle nav .dropdown ul, .dm\:navigation-toggle nav .dropdown ul li ul, .dm\:navigation-toggle .navbar .dropdown ul, .dm\:navigation-toggle .navbar .dropdown ul li ul {
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    width: max-content;
    box-shadow: var(--box-shadow);
  }
  .dm\:navigation-toggle nav .dropdown ul li > ul, .dm\:navigation-toggle .navbar .dropdown ul li > ul {
    left: 100%;
  }
  .dm\:navigation-toggle nav .dropdown__menu--left, .dm\:navigation-toggle .navbar .dropdown__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
  .dm\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .dm\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .dm\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 100em) {
  .lg\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .lg\:navigation-toggle nav .dropdown ul, .lg\:navigation-toggle nav .dropdown ul li ul, .lg\:navigation-toggle .navbar .dropdown ul, .lg\:navigation-toggle .navbar .dropdown ul li ul {
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    width: max-content;
    box-shadow: var(--box-shadow);
  }
  .lg\:navigation-toggle nav .dropdown ul li > ul, .lg\:navigation-toggle .navbar .dropdown ul li > ul {
    left: 100%;
  }
  .lg\:navigation-toggle nav .dropdown__menu--left, .lg\:navigation-toggle .navbar .dropdown__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
  .lg\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .lg\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .lg\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 112.5em) {
  .xlg\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .xlg\:navigation-toggle nav .dropdown ul, .xlg\:navigation-toggle nav .dropdown ul li ul, .xlg\:navigation-toggle .navbar .dropdown ul, .xlg\:navigation-toggle .navbar .dropdown ul li ul {
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    width: max-content;
    box-shadow: var(--box-shadow);
  }
  .xlg\:navigation-toggle nav .dropdown ul li > ul, .xlg\:navigation-toggle .navbar .dropdown ul li > ul {
    left: 100%;
  }
  .xlg\:navigation-toggle nav .dropdown__menu--left, .xlg\:navigation-toggle .navbar .dropdown__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
  .xlg\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .xlg\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .xlg\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 160em) {
  .xxlg\:navigation-toggle .navbar__toggler {
    display: none;
  }
  .xxlg\:navigation-toggle nav .dropdown ul, .xxlg\:navigation-toggle nav .dropdown ul li ul, .xxlg\:navigation-toggle .navbar .dropdown ul, .xxlg\:navigation-toggle .navbar .dropdown ul li ul {
    --box-shadow: var(--neutral-shadow-alt);
    position: absolute;
    top: 100%;
    width: max-content;
    box-shadow: var(--box-shadow);
  }
  .xxlg\:navigation-toggle nav .dropdown ul li > ul, .xxlg\:navigation-toggle .navbar .dropdown ul li > ul {
    left: 100%;
  }
  .xxlg\:navigation-toggle nav .dropdown__menu--left, .xxlg\:navigation-toggle .navbar .dropdown__menu--left {
    left: calc(-100% - var(--half-spacing));
  }
  .xxlg\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;
    width: auto;
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;
  }
  .xxlg\:navigation-toggle .navbar__menu ul {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .xxlg\:navigation-toggle .navbar__menu li:not(:first-child) {
    margin-top: 0;
  }
}
.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  line-height: 1;
}
.heading > *:not(:first-child) {
  margin-bottom: var(--half-spacing);
  color: var(--on-neutral-color-variation-3);
  font-weight: 300;
}
.heading > *:last-child {
  margin-bottom: 0;
}
.heading > *:first-child {
  margin-bottom: var(--spacing);
}
.heading + *:not(:is(p)) {
  margin-top: calc(var(--heading-flow-space-ratio) * 1em) !important;
}
.heading + p {
  margin-top: var(--block-spacing) !important;
}
.heading > *:is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
}
.heading--inline {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.heading--align-center {
  align-items: center;
  justify-content: center;
}
.heading--align-right {
  align-items: flex-end;
  justify-content: center;
}
.heading__block {
  display: flex;
  flex-direction: column;
}
.heading__sub {
  display: block;
  font-weight: normal;
  font-size: 0.4em;
}
.heading:first-child {
  margin-top: var(--block-spacing);
}

.heading--inline.heading--align-right {
  align-items: center;
  justify-content: flex-end;
}

.heading--inline .heading__icon {
  margin-right: 0.8rem;
}

details {
  --border-width: var(--elem-border-width);
  display: block;
  margin-top: var(--spacing);
  padding-bottom: var(--spacing);
  border-bottom: var(--border-width) solid var(--primary-color);
}
details summary {
  display: block;
  position: relative;
  outline: none;
  color: var(--primary-color);
  list-style: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  display: none;
}
details summary::-moz-list-bullet {
  list-style-type: none;
}
details summary::after {
  --_border: 3px solid var(--primary-color-variation-2);
  display: block;
  width: 0.7em;
  height: 0.7em;
  content: "";
  margin: 0 0.5em;
  float: right;
  transform-origin: center;
  transform: translateY(0.35em) rotate(-45deg);
  border-right: var(--_border);
  border-bottom: var(--_border);
  transition: all 0.2s ease-in-out;
}
details summary:hover {
  color: var(--primary-color-variation-1);
}
details summary:hover::after {
  --_border: 3px solid var(--primary-color-variation-1);
  border-right: var(--_border);
  border-bottom: var(--_border);
}
details summary[role*=button] {
  width: 100%;
  justify-content: left;
}
details summary[role*=button]::after {
  transform: translateY(0) rotate(-45deg);
  border-color: var(--border-color);
}
details summary[role*=button]:hover::after {
  transform: translatey(-0.175em) rotate(45deg);
  border-color: var(--hover-border-color);
}
details summary > * {
  display: inline;
}
details summary ~ * {
  margin-top: var(--spacing);
}
details[open] summary {
  --_border: 3px solid var(--primary-color-variation-2);
  color: var(--primary-color);
}
details[open] summary::after {
  transform: translatey(0.175em) rotate(45deg);
  border-right: var(--_border);
  border-bottom: var(--_border);
}
details[open] summary[role*=button] {
  color: var(--on-primary-color);
}
details[open] summary[role*=button]::after {
  border-color: var(--_border);
  transform: translatey(-0.175em) rotate(45deg);
}
details:first-child {
  margin-top: 0;
}

@media only screen and (min-width: 37.5em) {
  details summary ~ * {
    margin-left: var(--block-half-spacing);
    margin-right: var(--block-half-spacing);
  }
  details summary::after {
    display: block;
  }
}
/* details as dropdown in a nav */
nav details[role=group],
details[role=listbox] {
  --background-color: var(--neutral-color-variation-2);
  --border-color: var(--neutral-color-variation-3);
  --border-radius: var(--elem-border-radius);
  --border-width: var(--elem-border-width);
  --box-shadow: var(--neutral-shadow);
  display: inline-block;
  position: relative;
  padding: 0;
  border-bottom: none;
}
nav details[role=group] summary[role*=button],
details[role=listbox] summary[role*=button] {
  width: auto;
}
nav details[role=group] summary,
details[role=listbox] summary {
  list-style: none;
}
nav details[role=group] summary::-webkit-details-marker,
details[role=listbox] summary::-webkit-details-marker {
  display: none;
}
nav details[role=group] summary::marker,
details[role=listbox] summary::marker {
  display: none;
}
nav details[role=group] summary::-moz-list-bullet,
details[role=listbox] summary::-moz-list-bullet {
  list-style-type: none;
}
nav details[role=group] summary + ul[role=menu],
nav details[role=group] summary + ul[role=listbox],
nav details[role=group] summary + ul[role=list],
details[role=listbox] summary + ul[role=menu],
details[role=listbox] summary + ul[role=listbox],
details[role=listbox] summary + ul[role=list] {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% - var(--half-spacing));
  right: 0;
  left: 0;
  height: auto;
  min-width: fit-content;
  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  margin: 0;
  padding: 0;
  box-shadow: var(--box-shadow);
  z-index: 900;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
nav details[role=group] summary + ul[role=menu] li,
nav details[role=group] summary + ul[role=menu] li[role=option],
nav details[role=group] summary + ul[role=menu] li[role=presentation],
nav details[role=group] summary + ul[role=menu] li[role=menuitem],
nav details[role=group] summary + ul[role=listbox] li,
nav details[role=group] summary + ul[role=listbox] li[role=option],
nav details[role=group] summary + ul[role=listbox] li[role=presentation],
nav details[role=group] summary + ul[role=listbox] li[role=menuitem],
nav details[role=group] summary + ul[role=list] li,
nav details[role=group] summary + ul[role=list] li[role=option],
nav details[role=group] summary + ul[role=list] li[role=presentation],
nav details[role=group] summary + ul[role=list] li[role=menuitem],
details[role=listbox] summary + ul[role=menu] li,
details[role=listbox] summary + ul[role=menu] li[role=option],
details[role=listbox] summary + ul[role=menu] li[role=presentation],
details[role=listbox] summary + ul[role=menu] li[role=menuitem],
details[role=listbox] summary + ul[role=listbox] li,
details[role=listbox] summary + ul[role=listbox] li[role=option],
details[role=listbox] summary + ul[role=listbox] li[role=presentation],
details[role=listbox] summary + ul[role=listbox] li[role=menuitem],
details[role=listbox] summary + ul[role=list] li,
details[role=listbox] summary + ul[role=list] li[role=option],
details[role=listbox] summary + ul[role=list] li[role=presentation],
details[role=listbox] summary + ul[role=list] li[role=menuitem] {
  padding: 0;
  width: 100%;
}
nav details[role=group] summary + ul[role=menu] li a,
nav details[role=group] summary + ul[role=menu] li a[role=menuitem],
nav details[role=group] summary + ul[role=menu] li[role=option] a,
nav details[role=group] summary + ul[role=menu] li[role=option] a[role=menuitem],
nav details[role=group] summary + ul[role=menu] li[role=presentation] a,
nav details[role=group] summary + ul[role=menu] li[role=presentation] a[role=menuitem],
nav details[role=group] summary + ul[role=menu] li[role=menuitem] a,
nav details[role=group] summary + ul[role=menu] li[role=menuitem] a[role=menuitem],
nav details[role=group] summary + ul[role=listbox] li a,
nav details[role=group] summary + ul[role=listbox] li a[role=menuitem],
nav details[role=group] summary + ul[role=listbox] li[role=option] a,
nav details[role=group] summary + ul[role=listbox] li[role=option] a[role=menuitem],
nav details[role=group] summary + ul[role=listbox] li[role=presentation] a,
nav details[role=group] summary + ul[role=listbox] li[role=presentation] a[role=menuitem],
nav details[role=group] summary + ul[role=listbox] li[role=menuitem] a,
nav details[role=group] summary + ul[role=listbox] li[role=menuitem] a[role=menuitem],
nav details[role=group] summary + ul[role=list] li a,
nav details[role=group] summary + ul[role=list] li a[role=menuitem],
nav details[role=group] summary + ul[role=list] li[role=option] a,
nav details[role=group] summary + ul[role=list] li[role=option] a[role=menuitem],
nav details[role=group] summary + ul[role=list] li[role=presentation] a,
nav details[role=group] summary + ul[role=list] li[role=presentation] a[role=menuitem],
nav details[role=group] summary + ul[role=list] li[role=menuitem] a,
nav details[role=group] summary + ul[role=list] li[role=menuitem] a[role=menuitem],
details[role=listbox] summary + ul[role=menu] li a,
details[role=listbox] summary + ul[role=menu] li a[role=menuitem],
details[role=listbox] summary + ul[role=menu] li[role=option] a,
details[role=listbox] summary + ul[role=menu] li[role=option] a[role=menuitem],
details[role=listbox] summary + ul[role=menu] li[role=presentation] a,
details[role=listbox] summary + ul[role=menu] li[role=presentation] a[role=menuitem],
details[role=listbox] summary + ul[role=menu] li[role=menuitem] a,
details[role=listbox] summary + ul[role=menu] li[role=menuitem] a[role=menuitem],
details[role=listbox] summary + ul[role=listbox] li a,
details[role=listbox] summary + ul[role=listbox] li a[role=menuitem],
details[role=listbox] summary + ul[role=listbox] li[role=option] a,
details[role=listbox] summary + ul[role=listbox] li[role=option] a[role=menuitem],
details[role=listbox] summary + ul[role=listbox] li[role=presentation] a,
details[role=listbox] summary + ul[role=listbox] li[role=presentation] a[role=menuitem],
details[role=listbox] summary + ul[role=listbox] li[role=menuitem] a,
details[role=listbox] summary + ul[role=listbox] li[role=menuitem] a[role=menuitem],
details[role=listbox] summary + ul[role=list] li a,
details[role=listbox] summary + ul[role=list] li a[role=menuitem],
details[role=listbox] summary + ul[role=list] li[role=option] a,
details[role=listbox] summary + ul[role=list] li[role=option] a[role=menuitem],
details[role=listbox] summary + ul[role=list] li[role=presentation] a,
details[role=listbox] summary + ul[role=list] li[role=presentation] a[role=menuitem],
details[role=listbox] summary + ul[role=list] li[role=menuitem] a,
details[role=listbox] summary + ul[role=list] li[role=menuitem] a[role=menuitem] {
  --color: var(--primary-color);
  --hover-background-color: var(--primary-color);
  --hover-color: var(--on-primary-color);
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  color: var(--color);
  text-overflow: ellipsis;
  padding: 0.5em;
}
nav details[role=group] summary + ul[role=menu] li a:hover,
nav details[role=group] summary + ul[role=menu] li a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=menu] li[role=option] a:hover,
nav details[role=group] summary + ul[role=menu] li[role=option] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=menu] li[role=presentation] a:hover,
nav details[role=group] summary + ul[role=menu] li[role=presentation] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=menu] li[role=menuitem] a:hover,
nav details[role=group] summary + ul[role=menu] li[role=menuitem] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=listbox] li a:hover,
nav details[role=group] summary + ul[role=listbox] li a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=listbox] li[role=option] a:hover,
nav details[role=group] summary + ul[role=listbox] li[role=option] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=listbox] li[role=presentation] a:hover,
nav details[role=group] summary + ul[role=listbox] li[role=presentation] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=listbox] li[role=menuitem] a:hover,
nav details[role=group] summary + ul[role=listbox] li[role=menuitem] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=list] li a:hover,
nav details[role=group] summary + ul[role=list] li a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=list] li[role=option] a:hover,
nav details[role=group] summary + ul[role=list] li[role=option] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=list] li[role=presentation] a:hover,
nav details[role=group] summary + ul[role=list] li[role=presentation] a[role=menuitem]:hover,
nav details[role=group] summary + ul[role=list] li[role=menuitem] a:hover,
nav details[role=group] summary + ul[role=list] li[role=menuitem] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=menu] li a:hover,
details[role=listbox] summary + ul[role=menu] li a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=menu] li[role=option] a:hover,
details[role=listbox] summary + ul[role=menu] li[role=option] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=menu] li[role=presentation] a:hover,
details[role=listbox] summary + ul[role=menu] li[role=presentation] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=menu] li[role=menuitem] a:hover,
details[role=listbox] summary + ul[role=menu] li[role=menuitem] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=listbox] li a:hover,
details[role=listbox] summary + ul[role=listbox] li a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=listbox] li[role=option] a:hover,
details[role=listbox] summary + ul[role=listbox] li[role=option] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=listbox] li[role=presentation] a:hover,
details[role=listbox] summary + ul[role=listbox] li[role=presentation] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=listbox] li[role=menuitem] a:hover,
details[role=listbox] summary + ul[role=listbox] li[role=menuitem] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=list] li a:hover,
details[role=listbox] summary + ul[role=list] li a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=list] li[role=option] a:hover,
details[role=listbox] summary + ul[role=list] li[role=option] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=list] li[role=presentation] a:hover,
details[role=listbox] summary + ul[role=list] li[role=presentation] a[role=menuitem]:hover,
details[role=listbox] summary + ul[role=list] li[role=menuitem] a:hover,
details[role=listbox] summary + ul[role=list] li[role=menuitem] a[role=menuitem]:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
nav details[role=group] summary + ul[role=menu] li:first-of-type,
nav details[role=group] summary + ul[role=menu] li[role=option]:first-of-type,
nav details[role=group] summary + ul[role=menu] li[role=presentation]:first-of-type,
nav details[role=group] summary + ul[role=menu] li[role=menuitem]:first-of-type,
nav details[role=group] summary + ul[role=listbox] li:first-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=option]:first-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=presentation]:first-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=menuitem]:first-of-type,
nav details[role=group] summary + ul[role=list] li:first-of-type,
nav details[role=group] summary + ul[role=list] li[role=option]:first-of-type,
nav details[role=group] summary + ul[role=list] li[role=presentation]:first-of-type,
nav details[role=group] summary + ul[role=list] li[role=menuitem]:first-of-type,
details[role=listbox] summary + ul[role=menu] li:first-of-type,
details[role=listbox] summary + ul[role=menu] li[role=option]:first-of-type,
details[role=listbox] summary + ul[role=menu] li[role=presentation]:first-of-type,
details[role=listbox] summary + ul[role=menu] li[role=menuitem]:first-of-type,
details[role=listbox] summary + ul[role=listbox] li:first-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=option]:first-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=presentation]:first-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=menuitem]:first-of-type,
details[role=listbox] summary + ul[role=list] li:first-of-type,
details[role=listbox] summary + ul[role=list] li[role=option]:first-of-type,
details[role=listbox] summary + ul[role=list] li[role=presentation]:first-of-type,
details[role=listbox] summary + ul[role=list] li[role=menuitem]:first-of-type {
  margin-top: var(--half-spacing);
}
nav details[role=group] summary + ul[role=menu] li:last-of-type,
nav details[role=group] summary + ul[role=menu] li[role=option]:last-of-type,
nav details[role=group] summary + ul[role=menu] li[role=presentation]:last-of-type,
nav details[role=group] summary + ul[role=menu] li[role=menuitem]:last-of-type,
nav details[role=group] summary + ul[role=listbox] li:last-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=option]:last-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=presentation]:last-of-type,
nav details[role=group] summary + ul[role=listbox] li[role=menuitem]:last-of-type,
nav details[role=group] summary + ul[role=list] li:last-of-type,
nav details[role=group] summary + ul[role=list] li[role=option]:last-of-type,
nav details[role=group] summary + ul[role=list] li[role=presentation]:last-of-type,
nav details[role=group] summary + ul[role=list] li[role=menuitem]:last-of-type,
details[role=listbox] summary + ul[role=menu] li:last-of-type,
details[role=listbox] summary + ul[role=menu] li[role=option]:last-of-type,
details[role=listbox] summary + ul[role=menu] li[role=presentation]:last-of-type,
details[role=listbox] summary + ul[role=menu] li[role=menuitem]:last-of-type,
details[role=listbox] summary + ul[role=listbox] li:last-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=option]:last-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=presentation]:last-of-type,
details[role=listbox] summary + ul[role=listbox] li[role=menuitem]:last-of-type,
details[role=listbox] summary + ul[role=list] li:last-of-type,
details[role=listbox] summary + ul[role=list] li[role=option]:last-of-type,
details[role=listbox] summary + ul[role=list] li[role=presentation]:last-of-type,
details[role=listbox] summary + ul[role=list] li[role=menuitem]:last-of-type {
  margin-bottom: var(--half-spacing);
}
nav details[role=group][open] summary::before,
details[role=listbox][open] summary::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  cursor: default;
  z-index: 1;
}
nav details[role=group][open] summary + ul[role=menu],
nav details[role=group][open] summary + ul[role=listbox],
nav details[role=group][open] summary + ul[role=list],
details[role=listbox][open] summary + ul[role=menu],
details[role=listbox][open] summary + ul[role=listbox],
details[role=listbox][open] summary + ul[role=list] {
  opacity: 1;
}

.card,
.panel {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-color: var(--neutral-color-variation-3);
  --border-width: var(--elem-border-width);
  --border-radius: var(--elem-border-radius);
  --box-shadow: var(--neutral-shadow);
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-clip: border-box;
  box-shadow: var(--box-shadow);
}
.card:first-child,
.panel:first-child {
  margin-top: 0;
}
.card + *:is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article, .card, footer)),
.panel + *:is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article, .card, footer)) {
  margin-top: var(--block-half-spacing);
}
.card__header, .card__footer,
.card > header,
.card > footer,
.panel__header,
.panel__footer,
.panel > header,
.panel > footer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.card__header,
.card > header,
.panel__header,
.panel > header {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}
.card__footer,
.card > footer,
.panel__footer,
.panel > footer {
  margin-top: auto;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
.card > figure:first-child,
.card > figure:first-child img, .card__header img:first-child,
.card > header img:first-child, .card__header figure:first-child, .card__header figure:first-child img,
.card > header figure:first-child,
.card > header figure:first-child img,
.card > img:first-child,
.panel > figure:first-child,
.panel > figure:first-child img,
.panel__header img:first-child,
.panel > header img:first-child,
.panel__header figure:first-child,
.panel__header figure:first-child img,
.panel > header figure:first-child,
.panel > header figure:first-child img,
.panel > img:first-child {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}
.card > figure:last-child,
.card > figure:last-child img, .card__footer img:last-child, .card__footer figure:last-child, .card__footer figure:last-child img,
.card > footer img:last-child,
.card > footer figure:last-child,
.card > footer figure:last-child img,
.card > img:last-child,
.panel > figure:last-child,
.panel > figure:last-child img,
.panel__footer img:last-child,
.panel__footer figure:last-child,
.panel__footer figure:last-child img,
.panel > footer img:last-child,
.panel > footer figure:last-child,
.panel > footer figure:last-child img,
.panel > img:last-child {
  margin-top: 0;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
.card--collapsable,
.panel--collapsable {
  transition: max-height 0.25s ease-out, opacity 0.25s ease;
}
.card--collapsable, .card--collapsable[hidden], .card--collapsable[aria-hidden=true],
.panel--collapsable,
.panel--collapsable[hidden],
.panel--collapsable[aria-hidden=true] {
  visibility: collapse;
  height: 0;
  max-height: 0;
  opacity: 0;
}
.card--collapsable:not([hidden]), .card--collapsable[aria-hidden=false], .card--collapsable.expanded,
.panel--collapsable:not([hidden]),
.panel--collapsable[aria-hidden=false],
.panel--collapsable.expanded {
  visibility: visible;
  height: auto;
  max-height: 100rem;
  opacity: 1;
}

.panel {
  display: block;
  padding: var(--inner-v-spacing) var(--half-spacing);
  border: none;
  background-color: unset;
  box-shadow: none;
  color: unset;
}

@media only screen and (min-width: 25em) {
  .panel {
    padding: var(--inner-v-spacing) var(--spacing);
  }
}
@media only screen and (min-width: 37.5em) {
  .panel {
    padding: var(--inner-v-spacing) var(--inner-h-spacing);
  }
}
dialog,
.modal {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  display: block !important;
  position: fixed;
  inset: 0;
  max-width: min(90vw, 85ch);
  max-height: min(80vh, 100%);
  margin: auto;
  z-index: 5000;
  padding: 0;
  overflow: hidden;
  background: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.35);
  transition: opacity 0.5s ease-in-out;
}
dialog:not([open]),
.modal:not([open]) {
  pointer-events: none;
  opacity: 0;
}
dialog .close,
.modal .close {
  align-items: center;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  height: 2em;
  justify-content: center;
  padding: 0;
  width: 2em;
}
dialog[open],
.modal[open] {
  opacity: 1;
}
dialog[loading],
.modal[loading] {
  visibility: hidden;
}
dialog[modal-mode=simple]::backdrop,
.modal[modal-mode=simple]::backdrop {
  backdrop-filter: none;
  background: unset;
}
dialog::backdrop,
.modal::backdrop {
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  backdrop-filter: blur(5px);
  transition: backdrop-filter 0.5s ease;
}
dialog header, dialog footer,
.modal header,
.modal footer {
  --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-2-s), var(--neutral-color-variation-2-l) / 0.15);
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--background-color);
  padding: var(--inner-h-spacing) var(--inner-v-spacing);
  /*& > *:first-child {
    margin-top: 0;
  }*/
}
dialog header + footer,
.modal header + footer {
  margin-top: 0 !important;
}
dialog footer,
.modal footer {
  column-gap: 0.25em;
  justify-content: flex-end;
}
dialog > form,
.modal > form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  max-height: 60vh;
  max-block-size: 60vh;
  padding: 0;
}
dialog > form + footer,
.modal > form + footer {
  margin-top: 0 !important;
}
dialog article,
.modal article {
  margin-top: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--inner-h-spacing) var(--inner-v-spacing);
  max-height: 60vh;
  max-block-size: 60vh;
}
dialog article > header,
.modal article > header {
  padding: 0;
}
dialog article + footer,
.modal article + footer {
  margin-top: 0 !important;
}

.breadcrumb-nav {
  padding: 0.5em 1em;
  background-color: unset;
}
.breadcrumb-nav ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 1.5em;
  font-size: 0.8em;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  list-style-type: none;
}
.breadcrumb-nav ol > * {
  flex: none;
}
.breadcrumb-nav ol a {
  display: inline-block;
}
.breadcrumb-nav ol span {
  white-space: nowrap;
}
.breadcrumb-nav ol li {
  padding: 0;
}
.breadcrumb-nav ol li:first-child {
  padding-left: 0;
}
.breadcrumb-nav ol li[aria-current] {
  font-weight: 700;
  font-style: italic;
  cursor: none;
}
.breadcrumb-nav ol li + li:before {
  color: var(--on-neutral-color-variation-3);
  content: var(--divider, "» ");
  margin-left: 0.5em;
  margin-right: 0.25em;
}

.pagination-nav {
  display: grid;
  place-content: center;
  background-color: unset;
}
.pagination-nav ul {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.pagination-nav li {
  padding: 0;
  display: grid;
  place-content: center;
  cursor: unset;
  margin: 0 1px;
}
.pagination-nav li > a {
  --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-2-s) var(--neutral-color-variation-2-l) / 0.7);
  --color: var(--on-neutral-color-variation-3);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-1);
  --hover-background-color: var(--background-color);
  --border-radius: var(--control-border-radius);
  width: 100%;
  height: 100%;
  line-height: 1;
  padding: 0.25em;
  border: var(--border-width) solid var(--border-color);
  border-radius: 0.25em;
  transition: all 0.2s ease-in-out;
}
.pagination-nav li > a:not([aria-current]):hover {
  --border-color: var(--on-neutral-color-variation-3);
  transform: scale(1.05);
}
.pagination-nav li > a[disabled] {
  --background-color: transparent;
  width: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}
.pagination-nav li > a[disabled] > * {
  display: none;
}
.pagination-nav li.divider {
  border: none;
  pointer-events: none;
  margin-inline: var(--half-spacing);
}
.pagination-nav li.divider span {
  --color: var(--on-neutral-color-variation-3);
  color: var(--color);
}
.pagination-nav [aria-current] {
  --border-color: var(--on-neutral-color-variation-2);
  --background-color: var(--neutral-color);
  cursor: none;
  pointer-events: none;
  font-weight: 700;
}

.collapsable-toggler {
  display: none;
}
.collapsable-toggler:not(:checked) + .collapsable {
  visibility: collapse;
  height: 0;
  max-height: 0;
  opacity: 0;
}
.collapsable-toggler:checked + .collapsable {
  visibility: visible;
  height: auto;
  max-height: 1000em;
  opacity: 1;
  z-index: 0;
}

.theme-switcher {
  display: block;
  position: relative;
  width: 2em;
  height: 2em;
  margin: 0;
  border: none !important;
  background-color: #333 !important;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.35s ease-in-out;
}
.theme-switcher:before, .theme-switcher:after {
  position: absolute;
  content: "";
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition: all 0.35s ease-in-out;
}
.theme-switcher:before {
  --s: 1.5em; /* length */
  --o: 0.625em; /* offset */
  --w: 6deg; /* thickness */
  --n: 8; /* numbers*/
  --c: #fff; /* color */
  background-image: radial-gradient(circle at center center, #fff 0%, #fff 40%, #333 50%, transparent 55%), repeating-conic-gradient(from calc(-1 * var(--w) / 2), var(--c) 0 calc(var(--w) - 2deg), transparent calc(var(--w)) calc(360deg / var(--n) - 2deg), var(--c) calc(360deg / var(--n)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--s)), #fff calc(100% - var(--s)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--s)), #fff calc(100% - var(--s)));
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
.theme-switcher:after {
  background-color: transparent;
  box-shadow: inset -0.35em -0.35em 0 0 #fff, 2px 2px 3px 0 rgba(0, 0, 0, 0.75);
  transform: scale(0) translate(-40%, -40%);
  opacity: 0;
}
.theme-switcher:hover {
  transform: scale(1.1);
  background-color: #333 !important;
}
.theme-switcher:hover:before {
  transform: scale(0) translate(-40%, -40%);
  opacity: 0;
}
.theme-switcher:hover:after {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .theme-switcher:before {
    transform: scale(0) translate(-40%, -40%);
    opacity: 0;
  }
  :root:not([data-theme=light]) .theme-switcher:after {
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
  }
  :root:not([data-theme=light]) .theme-switcher:hover:before {
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
  }
  :root:not([data-theme=light]) .theme-switcher:hover:after {
    transform: scale(0) translate(-40%, -40%);
    opacity: 0;
  }
}
[data-theme=dark] .theme-switcher:before {
  transform: scale(0) translate(-40%, -40%);
  opacity: 0;
}
[data-theme=dark] .theme-switcher:after {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
[data-theme=dark] .theme-switcher:hover:before {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
[data-theme=dark] .theme-switcher:hover:after {
  transform: scale(0) translate(-40%, -40%);
  opacity: 0;
}

[aria-busy=false],
[aria-busy=true] {
  --loader-color: var(--primary-color);
  position: relative;
  z-index: 9999;
}
[aria-busy=false]::before,
[aria-busy=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--neutral-color-variation-2), var(--neutral-color-variation-1));
  opacity: 0;
  transition: opacity 0.25s ease;
}
[aria-busy=false]::after,
[aria-busy=true]::after {
  --width: 0.5em;
  content: "";
  position: absolute;
  width: 2.5em;
  padding: 0.3em;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  background: conic-gradient(rgba(0, 0, 0, 0) 10%, var(--loader-color)) content-box;
  border-radius: 50%;
  --_mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg), radial-gradient(farthest-side, #0000 calc(100% - var(--width) - 1px), #000 calc(100% - var(--width)));
  -webkit-mask: var(--_mask);
  mask: var(--_mask);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
}

[aria-busy=true] {
  cursor: progress;
}
[aria-busy=true]::before {
  opacity: 0.98;
}
[aria-busy=true]::after {
  opacity: 1;
  animation: aria-loader-anim 1s infinite steps(10);
}

[aria-busy=false] {
  z-index: 0;
}
[aria-busy=false]::after, [aria-busy=false]::before {
  display: none;
}

@keyframes aria-loader-anim {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}
.badge {
  --background-color: var(--neutral-color-variation-2);
  --color: var(--on-neutral-color-variation-3);
  --hover-background-color: var(--on-neutral-color-variation-3);
  --hover-color: var(--neutral-color-variation-2);
  display: inline-grid;
  place-content: center;
  position: relative;
  padding: 0.35em 0.35em 0.25em 0.35em;
  background-color: var(--background-color);
  color: var(--color);
  border: none !important;
  border-radius: 0.25rem;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.badge:not(:last-child) {
  margin-right: 0.5em;
}
.badge[href]:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
.badge--pill {
  border-radius: 2em;
  padding-left: 0.6em;
  padding-right: 0.6em;
}
.badge--circle {
  border-radius: 50%;
  padding: 0.5em;
  min-width: 2em;
  min-height: 2em;
  aspect-ratio: 1/1;
}
.badge--floating {
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  z-index: 5000;
}

[aria-label][data-tooltip],
.tooltip {
  --border-radius: var(--elem-border-radius);
  --tooltip-background-color: var(--neutral-color-variation-2);
  --tooltip-color: var(--on-neutral-color-variation-2);
  --tooltip-size-small: 6em;
  --tooltip-size-medium: 10em;
  --tooltip-size-large: 16em;
  position: relative;
}
[aria-label][data-tooltip]:not(a, button, input, textarea),
.tooltip:not(a, button, input, textarea) {
  text-decoration: none;
  border-bottom: 1px dotted;
  cursor: help;
}

[aria-label][data-tooltip]::before,
[aria-label][data-tooltip]::after,
.tooltip > [role=tooltip],
.tooltip::after {
  display: block;
  position: absolute;
  content: "";
  visibility: hidden;
  overflow: hidden;
  z-index: 500;
  left: 50%;
  top: 50%;
  background-color: transparent;
  border-style: solid;
  box-shadow: 0 0.5em 1.5em -0.25em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: all 0.25s ease;
  transform: translate(-50%, -50%) scale(0.5);
  transition-delay: var(--tooltip-delay, 0.2s);
  pointer-events: none;
}

[aria-label][data-tooltip]::after,
.tooltip::after {
  z-index: 450;
}

[aria-label][data-tooltip]::before,
.tooltip > [role=tooltip] {
  content: attr(aria-label);
  width: fit-content;
  max-width: var(--tooltip-size-large);
  padding: 0.25em 0.5em;
  border-radius: var(--border-radius);
  background: var(--tooltip-background-color);
  color: var(--tooltip-color);
  font-style: normal;
  font-size: 0.875em;
  text-decoration: none;
  white-space: nowrap;
  word-break: break-word;
  word-wrap: break-word;
  text-overflow: ellipsis;
  border-style: none;
}

[aria-label][data-tooltip][data-tooltip-visible]::before,
[aria-label][data-tooltip][data-tooltip-visible]::after,
[aria-label][data-tooltip]:focus::before,
[aria-label][data-tooltip]:focus::after,
[aria-label][data-tooltip]:hover::before,
[aria-label][data-tooltip]:hover::after,
.tooltip[data-tooltip-visible] > [role=tooltip],
.tooltip[data-tooltip-visible]::after,
.tooltip:focus > [role=tooltip],
.tooltip:hover > [role=tooltip],
.tooltip:focus::after,
.tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}

[aria-label][data-tooltip=top]::before,
[aria-label][data-tooltip=top]::after,
.tooltip--top > [role=tooltip],
.tooltip--top::after {
  top: 0;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.5);
}

[aria-label][data-tooltip=top]::after,
.tooltip--top::after {
  margin-bottom: 1em;
  border-style: solid;
  border-width: 0.5em 0.5em 0 0.5em; /* CSS triangle */
  border-color: var(--tooltip-background-color) transparent transparent transparent;
}

[aria-label][data-tooltip=top][data-tooltip-visible]::before,
[aria-label][data-tooltip=top]:focus::before,
[aria-label][data-tooltip=top]:hover::before,
.tooltip--top:focus > [role=tooltip],
.tooltip--top:hover > [role=tooltip] {
  --offset: calc(-100% - 0.75em);
  transform: translate(-50%, var(--offset)) scale(1);
}

[aria-label][data-tooltip=top][data-tooltip-visible]::after,
[aria-label][data-tooltip=top]:focus::after,
[aria-label][data-tooltip=top]:hover::after,
.tooltip--top:focus::after,
.tooltip--top:hover::after {
  --offset: calc(-100% - 0.25em);
  transform: translate(-50%, var(--offset)) scale(1);
}

[aria-label][data-tooltip=bottom]::before,
[aria-label][data-tooltip=bottom]::after,
.tooltip--bottom > [role=tooltip],
.tooltip--bottom::after {
  top: calc(100% - 0.5em);
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.5);
}

[aria-label][data-tooltip=bottom]::after,
.tooltip--bottom::after {
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent var(--tooltip-background-color) transparent;
}

[aria-label][data-tooltip=bottom][data-tooltip-visible]::before,
[aria-label][data-tooltip=bottom]:focus::before,
[aria-label][data-tooltip=bottom]:hover::before,
.tooltip--bottom:focus > [role=tooltip],
.tooltip--bottom:hover > [role=tooltip] {
  --offset: 1.25em;
  transform: translate(-50%, var(--offset)) scale(1);
}

[aria-label][data-tooltip=bottom][data-tooltip-visible]::after,
[aria-label][data-tooltip=bottom]:focus::after,
[aria-label][data-tooltip=bottom]:hover::after,
.tooltip--bottom:focus::after,
.tooltip--bottom:hover::after {
  --offset: 0.75em;
  transform: translate(-50%, var(--offset)) scale(1);
}

[aria-label][data-tooltip=left]::before,
[aria-label][data-tooltip=left]::after,
.tooltip--left::after,
.tooltip--left > [role=tooltip] {
  left: 0;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.5);
}

[aria-label][data-tooltip=left]::after,
.tooltip--left::after {
  margin-right: 1em;
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent var(--tooltip-background-color);
}

[aria-label][data-tooltip=left][data-tooltip-visible]::before,
[aria-label][data-tooltip=left]:focus::before,
[aria-label][data-tooltip=left]:hover::before,
.tooltip--left:focus > [role=tooltip],
.tooltip--left:hover > [role=tooltip] {
  --offset: calc(-100% - 0.75em);
  transform: translate(var(--offset), -50%) scale(1);
}

[aria-label][data-tooltip=left][data-tooltip-visible]::after,
[aria-label][data-tooltip=left]:focus::after,
[aria-label][data-tooltip=left]:hover::after,
.tooltip--left:focus::after,
.tooltip--left:hover::after {
  --offset: calc(-100% - 0.25em);
  transform: translate(var(--offset), -50%) scale(1);
}

[aria-label][data-tooltip=right]::before,
.tooltip--right > [role=tooltip],
[aria-label][data-tooltip=right]::after,
.tooltip--right::after {
  left: calc(100% - 0.5em);
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.5);
}

[aria-label][data-tooltip=right]::after,
.tooltip--right::after {
  border-width: 0.5em 0.5em 0.5em 0;
  border-color: transparent var(--tooltip-background-color) transparent transparent;
}

[aria-label][data-tooltip=right][data-tooltip-visible]::before,
[aria-label][data-tooltip=right]:focus::before,
[aria-label][data-tooltip=right]:hover::before,
.tooltip--right[data-tooltip-visible] > [role=tooltip],
.tooltip--right:focus > [role=tooltip],
.tooltip--right:hover > [role=tooltip] {
  --offset: 1.25em;
  transform: translate(var(--offset), -50%) scale(1);
}

[aria-label][data-tooltip=right][data-tooltip-visible]::after,
[aria-label][data-tooltip=right]:focus::after,
[aria-label][data-tooltip=right]:hover::after,
.tooltip--right[data-tooltip-visible]::after,
.tooltip--right:focus::after,
.tooltip--right:hover::after {
  --offset: 0.75em;
  transform: translate(var(--offset), -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [aria-label][data-tooltip]::before,
[aria-label][data-tooltip]::after,
.tooltip > [role=tooltip],
.tooltip > [role=tooltip]::after {
    transition: none;
  }
}
[aria-label][data-tooltip][data-tooltip-size=fit]::before,
.tooltip--fit > [role=tooltip] {
  width: 100%;
  white-space: normal;
  text-overflow: unset;
}

[aria-label][data-tooltip][data-tooltip-size=small]::before,
.tooltip--small > [role=tooltip] {
  width: var(--tooltip-size-small);
  white-space: normal;
  text-overflow: unset;
}

[aria-label][data-tooltip][data-tooltip-size=medium]::before,
.tooltip--medium > [role=tooltip] {
  width: var(--tooltip-size-medium);
  white-space: normal;
  text-overflow: unset;
}

[aria-label][data-tooltip][data-tooltip-size=large]::before,
.tooltip--large > [role=tooltip] {
  width: var(--tooltip-size-large);
  white-space: normal;
  text-overflow: unset;
}

.tabs {
  --box-shadow: var(--neutral-shadow);
  --border-radius: var(--elem-border-radius);
  position: relative;
  margin-top: var(--spacing);
  width: 100%;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
}
.tabs:first-child {
  margin-top: 0;
}
.tabs section {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  position: relative;
  margin-top: 0 !important;
  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

[role=tablist] {
  --background-color: var(--neutral-color-variation-1);
  --border-radius: var(--elem-border-radius);
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

[role=tab] {
  --background-color: var(--neutral-color-variation-2);
  --color: var(--on-neutral-color-variation-2);
  --hover-background-color: var(--primary-color);
  --hover-color: var(--on-primary-color);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);
  --selected-background-color: var(--primary-color-variation-1);
  --selected-color: var(--on-primary-color-variation-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  background-clip: padding-box !important;
  background-color: var(--background-color);
  color: var(--color) !important;
  border: var(--border-width) solid var(--border-color);
  border-bottom: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  font-size: 0.9em;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
[role=tab]:hover, [role=tab]:focus, [role=tab]:active {
  background-color: var(--hover-background-color);
  color: var(--hover-color);
}
[role=tab]:focus, [role=tab]:active {
  cursor: none;
}
[role=tab][aria-selected=true] {
  background-color: var(--selected-background-color);
  color: var(--selected-color) !important;
}

[role=tabpanel] {
  --border-radius: var(--elem-border-radius);
  display: none;
  width: 100%;
  position: relative;
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
  /* visibility: collapse;
   height:0;
   max-height: 0;
   padding:0;
   opacity:0;
   clip: rect(0 0 0 0);
   overflow: hidden;*/
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
[role=tabpanel][aria-expanded=true], [role=tabpanel][aria-hidden=false] {
  display: block;
  /* visibility: visible;
   height:auto;
   max-height: 5000em;

   opacity:1;
   clip:unset;
   overflow: visible;*/
}
.slider {
  --slider-max-height: initial;
  --slider-horizontal-padding: 2.5em;
  --slides-per-page: 1;
  --slide-gap: 5px;
  --slide-width: calc(100% / var(--slides-per-page));
  --justify-indicators: center;
  position: relative;
  height: var(--slider-height);
}
.slider__slides-wrapper {
  display: block;
  position: relative;
  width: 100%;
  padding: 0 var(--slider-horizontal-padding);
}
.slider__slides-inner {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.slider__slides {
  --translate-slide-width: var(--slide-width);
  --translate-offset: calc(var(--slide-index, 0) / var(--slides-count, 1) * (var(--translate-slide-width) * -1));
  display: flex;
  flex-grow: 1;
  list-style: none;
  transition: transform 0.6s ease-out;
  transform: translateX(var(--translate-offset));
}
.slider__controls-prev, .slider__controls-next {
  position: absolute;
  top: 50%;
  left: var(--slide-gap);
  transform: translateY(-50%);
  z-index: 700;
  margin: 0 !important;
}
.slider__controls-next {
  left: unset;
  right: var(--slide-gap);
}
.slider--showControlsOnHover :where(.slider__controls-next, .slider__controls-prev) {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.slider--showControlsOnHover:hover :where(.slider__controls-next, .slider__controls-prev) {
  opacity: 1;
}
.slider__indicators {
  display: flex;
  margin: 0.5em 0;
  padding: 0 var(--slide-gap);
  width: 100%;
  gap: var(--half-spacing);
  align-items: center;
  justify-content: var(--justify-indicators);
  list-style: none;
}
.slider__indicators button {
  display: grid;
  place-content: center;
  width: var(--dots-size, 0.7em);
  height: var(--dots-size, 0.7em);
  padding: 0;
  border-radius: 50%;
}
.slider__indicators button[aria-current=true] {
  transform: scale(1.25);
  background-color: var(--primary-color-variation-3);
  border: var(--border-width) solid var(--primary-color);
}
.slider__indicators button[data-action] {
  min-width: 1.5em;
  min-height: 1.5em;
}
.slider__slide {
  --auto-width: calc(var(--slide-width) - (var(--slide-gap) * 2));
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 var(--auto-width);
  max-width: var(--auto-width);
  height: auto;
  max-height: var(--slider-max-height);
  margin: 0 var(--slide-gap);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: grab;
}
.slider__slide.grabbing {
  cursor: grabbing;
  user-select: none;
}
.slider__slide.grabbing > * + * {
  user-select: none;
}
.slider__slide__content {
  display: grid;
  place-items: center;
  position: relative;
  height: 100%;
  width: 100%;
}
.slider__slide__content > * {
  grid-column: 1/2;
  grid-row: 1/2;
}
.slider__slide__content > img {
  object-fit: cover;
  max-height: var(--slider-max-height);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.slider__slide__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.slider__slide:hover .slider__slide__overlay {
  opacity: 1;
}

.notifications {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.5rem;
  max-width: 90vmin;
  min-width: var(--notification-min-width);
  width: auto;
  padding: 1em 1em 1em 2em;
  z-index: 9999;
}
.notifications--top-right {
  top: 1rem;
  right: 1rem;
  align-items: flex-end;
}
.notifications--top-left {
  left: 1rem;
  top: 1rem;
  align-items: flex-start;
}
.notifications--bottom-left {
  left: 1rem;
  bottom: 1rem;
  align-items: flex-start;
}
.notifications--bottom-right {
  bottom: 1rem;
  right: 1rem;
  align-items: flex-end;
}
.notifications--top-center {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.notifications--bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.notifications--mid-left {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-start;
}
.notifications--mid-right {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-end;
}
.notifications--mid-center {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: auto;
}

.notification {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-color: var(--neutral-color-variation-2);
  --hover-border-color: var(--neutral-color-variation-3);
  --box-shadow: var(--neutral-shadow);
  --ntf-w: fit-content;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--ntf-w);
  max-width: 100%;
  min-width: 240px;
  z-index: 9999;
  pointer-events: all;
  border-radius: 0.5rem;
  padding: 1.2rem;
  gap: 1rem;
  opacity: 0;
  background: var(--background-color);
  color: var(--color);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
}
.notification__close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0.5em;
  right: 0.5em;
  cursor: pointer;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  color: var(--color);
  border: 1px solid var(--color);
  transition: all 0.15s ease;
}
.notification__close:hover {
  border: 1px solid var(--hover-border-color);
  background-color: var(--neutral-color-variation-3);
}
.notification__close:hover:before, .notification__close:hover:after {
  background-color: var(--neutral-color);
}
.notification__close:before, .notification__close:after {
  position: absolute;
  content: "";
  height: 0.5em;
  width: 1px;
  transform-origin: center;
  background-color: var(--color);
}
.notification__close:before {
  transform: rotate(45deg);
}
.notification__close:after {
  transform: rotate(-45deg);
}
.notification__icon, .notification > span:first-of-type, .notification > span:last-of-type {
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
}
.notification.ui--primary .notification__close {
  color: var(--on-primary-color-variation-3);
  border-color: var(--on-primary-color-variation-3);
}
.notification.ui--primary .notification__close:before, .notification.ui--primary .notification__close:after {
  background-color: var(--on-primary-color-variation-1);
}
.notification.ui--primary .notification__close:hover {
  border-color: var(--on-primary-color-variation-2);
  background-color: var(--on-primary-color-variation-2);
}
.notification.ui--primary .notification__close:hover:before, .notification.ui--primary .notification__close:hover:after {
  background-color: var(--primary-color);
}
.notification.ui--secondary .notification__close {
  color: var(--on-secondary-color-variation-3);
  border-color: var(--on-secondary-color-variation-3);
}
.notification.ui--secondary .notification__close:before, .notification.ui--secondary .notification__close:after {
  background-color: var(--on-secondary-color-variation-1);
}
.notification.ui--secondary .notification__close:hover {
  border-color: var(--on-secondary-color-variation-2);
  background-color: var(--on-secondary-color-variation-2);
}
.notification.ui--secondary .notification__close:hover:before, .notification.ui--secondary .notification__close:hover:after {
  background-color: var(--secondary-color);
}
.notification.ui--success > .notification__icon, .notification.ui--success > span:first-of-type, .notification.ui--success > span:last-of-type {
  background-image: var(--icon-success);
}
.notification.ui--success .notification__close {
  color: var(--on-success-color-variation-3);
  border-color: var(--success-color-variation-3);
}
.notification.ui--success .notification__close:before, .notification.ui--success .notification__close:after {
  background-color: var(--on-success-color-variation-1);
}
.notification.ui--success .notification__close:hover {
  border-color: var(--success-color-variation-2);
  background-color: var(--success-color);
}
.notification.ui--warning > .notification__icon, .notification.ui--warning > span:first-of-type, .notification.ui--warning > span:last-of-type {
  background-image: var(--icon-warning);
}
.notification.ui--warning .notification__close {
  color: var(--on-warning-color-variation-3);
  border-color: var(--warning-color-variation-3);
}
.notification.ui--warning .notification__close:before, .notification.ui--warning .notification__close:after {
  background-color: var(--on-warning-color-variation-1);
}
.notification.ui--warning .notification__close:hover {
  border-color: var(--warning-color-variation-2);
  background-color: var(--warning-color);
}
.notification.ui--danger > .notification__icon, .notification.ui--danger > span:first-of-type, .notification.ui--danger > span:last-of-type {
  stroke: var(--danger-color-variation-3);
  background-image: var(--icon-danger);
}
.notification.ui--danger .notification__close {
  color: var(--on-danger-color-variation-3);
  border-color: var(--danger-color-variation-3);
}
.notification.ui--danger .notification__close:before, .notification.ui--danger .notification__close:after {
  background-color: var(--on-danger-color-variation-1);
}
.notification.ui--danger .notification__close:hover {
  border-color: var(--danger-color-variation-2);
  background-color: var(--danger-color);
}
.notification.ui--danger .notification__close:hover:before, .notification.ui--danger .notification__close:hover:after {
  background-color: var(--on-danger-color);
}
.notification.ui--info > .notification__icon, .notification.ui--info > span:first-of-type, .notification.ui--info > span:last-of-type {
  stroke: var(--info-color-variation-3);
  background-image: var(--icon-info);
}
.notification.ui--info .notification__close {
  color: var(--on-info-color-variation-3);
  border-color: var(--info-color-variation-3);
}
.notification.ui--info .notification__close:before, .notification.ui--info .notification__close:after {
  background-color: var(--on-info-color-variation-1);
}
.notification.ui--info .notification__close:hover {
  border-color: var(--info-color-variation-2);
  background-color: var(--info-color);
}
.notification *:is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
}
.notification *:is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0 !important;
}
.notification__content {
  font-size: 1em;
  line-height: 1;
  flex-grow: 1;
}
.notification__content p, .notification__content span {
  line-height: 1;
}

.notification-animIn--fade {
  animation: 0.4s ease notification-animation-fadeIn forwards;
}

.notification-animIn--slide-top {
  animation: 0.4s ease notification-animation-slideTopIn forwards;
}

.notification-animIn--slide-bottom {
  animation: 0.4s ease notification-animation-slideBottomIn forwards;
}

.notification-animIn--slide-left {
  animation: 0.4s ease notification-animation-slideLeftIn forwards;
}

.notification-animIn--slide-right {
  animation: 0.4s ease notification-animation-slideRightIn forwards;
}

.notification-animOut--fade {
  animation: 0.4s ease notification-animation-fadeOut forwards;
}

.notification-animOut--slide-top {
  animation: 0.4s ease notification-animation-slideTopOut forwards;
}

.notification-animOut--slide-bottom {
  animation: 0.4s ease notification-animation-slideBottomOut forwards;
}

.notification-animOut--slide-left {
  animation: 0.4s ease notification-animation-slideLeftOut forwards;
}

.notification-animOut--slide-right {
  animation: 0.4s ease notification-animation-slideRightOut forwards;
}

.notification--auto-close--fade {
  animation-duration: 7s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: notification-animation-autoCloseFade;
}

.notification--auto-close--slide-left {
  animation-duration: 7s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: notification-animation-autoCloseSlideLeft;
}

.notification--auto-close--slide-right {
  animation-duration: 7s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: notification-animation-autoCloseSlideRight;
}

.notification--auto-close--slide-top {
  animation-duration: 7s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: notification-animation-autoCloseSlideTop;
}

.notification--auto-close--slide-bottom {
  animation-duration: 7s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: notification-animation-autoCloseSlideBottom;
}

@keyframes notification-animation-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes notification-animation-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes notification-animation-autoCloseFade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes notification-animation-slideLeftIn {
  from {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes notification-animation-slideLeftOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-autoCloseSlideLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  10% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-slideRightIn {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes notification-animation-slideRightOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-autoCloseSlideRight {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  10% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-slideTopIn {
  from {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes notification-animation-slideTopOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-autoCloseSlideTop {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  10% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-slideBottomIn {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes notification-animation-slideBottomOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}
@keyframes notification-animation-autoCloseSlideBottom {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  10% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  90% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}
.dropdown {
  position: relative;
  display: inline-flex;
}
.dropdown ul {
  list-style: none;
}
.dropdown > .dropdown__menu, .dropdown > ul {
  --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l) / 0.7);
  --box-shadow: var(--neutral-shadow-alt);
  display: flex;
  position: absolute;
  flex-direction: column !important;
  justify-content: inherit;
  align-items: inherit;
  visibility: collapse;
  top: 100%;
  left: 0;
  min-width: max-content;
  width: 100%;
  max-height: 0;
  height: 0;
  margin: 0;
  padding: var(--half-spacing) 0;
  z-index: 5500;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  opacity: 0;
  transition: all 0.25s ease-in;
}
.dropdown > .dropdown__menu > .dropdown__item, .dropdown > .dropdown__menu li, .dropdown > ul > .dropdown__item, .dropdown > ul li {
  display: flex;
  align-items: center;
  justify-content: inherit;
  width: 100%;
  padding: 0 var(--half-spacing);
}
.dropdown > .dropdown__menu > .dropdown__item .dropdown__menu, .dropdown > .dropdown__menu li ul, .dropdown > ul > .dropdown__item .dropdown__menu, .dropdown > ul li ul {
  top: 0;
  left: 100%;
  width: max-content;
}
.dropdown > .dropdown__menu.expanded, .dropdown > ul.expanded {
  visibility: visible;
  max-height: 50em;
  height: auto;
  opacity: 1;
}
.dropdown:not([data-js-dropdown]):hover > .dropdown__menu, .dropdown:not([data-js-dropdown]):hover > ul {
  visibility: visible;
  max-height: 50em;
  height: auto;
  opacity: 1;
}
.dropdown__menu--left {
  left: calc(-100% - var(--half-spacing));
}

.reveal--fade-in {
  opacity: 0;
  transition: all 0.5s ease-in;
}

.reveal--fade-in.reveal {
  opacity: 1;
}

.reveal--slide-left,
.reveal--slide-right {
  transition: opacity 0.5s ease-in, transform 1s ease-in;
  opacity: 0;
}

.reveal--light-left {
  transform: translate3d(-100%, 0, 0) skewX(30deg);
  opacity: 0;
}

.reveal--light-left.reveal {
  animation: 1s ease-out forwards running anim-reveal-light-left;
}

.reveal--light-right {
  transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
}

.reveal--light-right.reveal {
  animation: 1s ease-out forwards running anim-reveal-light-right;
}

.reveal--flip-x {
  backface-visibility: visible !important;
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  opacity: 0;
}

.reveal--flip-x.reveal {
  animation: 1s linear forwards running anim-reveal-vertical-flip;
}

.reveal--slide-left {
  transform: translateX(-100%);
}

.reveal--slide-right {
  transform: translateX(100%);
}

.reveal--slide-left.reveal,
.reveal--slide-right.reveal {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.2s ease;
}

.reveal--slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
}

.reveal--slide-up.reveal {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.2s;
}

.reveal--slide-down {
  opacity: 0;
  transform: translateY(-30px);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
}

.reveal--slide-down.reveal {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.2s;
}

.reveal--scale-up {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease-in, transform 0.5s ease-in-out;
}

.reveal--scale-up.reveal {
  opacity: 1;
  transform: scale(1);
  transition-delay: revert !important;
}

.reveal-delay-1 {
  transition-delay: 0.25s !important;
}

.reveal-delay-2 {
  transition-delay: 0.5s !important;
}

.reveal-delay-3 {
  transition-delay: 0.75s !important;
}

.reveal-delay-4 {
  transition-delay: 1s !important;
}

.reveal-delay-5 {
  transition-delay: 1.25s !important;
}

.reveal-delay-6 {
  transition-delay: 1.5s !important;
}

.reveal-delay-7 {
  transition-delay: 2s !important;
}

@keyframes anim-reveal-light-left {
  0% {
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) skewX(0);
    opacity: 1;
  }
}
@keyframes anim-reveal-light-right {
  0% {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) skewX(0);
    opacity: 1;
  }
}
@keyframes anim-reveal-vertical-flip {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    transform: perspective(400px) rotate3d(1, 0, 0, 0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  [class*=reveal-] {
    opacity: 1 !important;
    animation: none !important;
    transition: 0s !important;
  }
}
.flex {
  display: flex;
  flex-direction: column;
}

.iflex {
  display: inline-flex;
}

.flex--column {
  flex-direction: column;
}

.flex--autosize {
  flex: 1 1 100%;
}

.flex:where(:not(.flex--row)).flex--top,
.flex--column:where(:not(.flex--row)).flex--top {
  justify-content: flex-start;
}
.flex:where(:not(.flex--row)).flex--bottom,
.flex--column:where(:not(.flex--row)).flex--bottom {
  justify-content: flex-end;
}
.flex:where(:not(.flex--row)).flex--left,
.flex--column:where(:not(.flex--row)).flex--left {
  align-items: flex-start;
}
.flex:where(:not(.flex--row)).flex--right,
.flex--column:where(:not(.flex--row)).flex--right {
  align-items: flex-end;
}
.flex:where(:not(.flex--row)).flex--v-center,
.flex--column:where(:not(.flex--row)).flex--v-center {
  justify-content: center;
}
.flex:where(:not(.flex--row)).flex--center,
.flex--column:where(:not(.flex--row)).flex--center {
  align-items: center;
}

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

.iflex,
.flex--row {
  flex-flow: row wrap;
}
.iflex.flex--top,
.flex--row.flex--top {
  align-items: flex-start;
}
.iflex.flex--bottom,
.flex--row.flex--bottom {
  align-items: flex-end;
}
.iflex.flex--left,
.flex--row.flex--left {
  justify-content: flex-start;
}
.iflex.flex--right,
.flex--row.flex--right {
  justify-content: flex-end;
}
.iflex.flex--center,
.flex--row.flex--center {
  justify-content: center;
}
.iflex.flex--v-center,
.flex--row.flex--v-center {
  align-items: center;
}

.flex--left {
  justify-content: flex-start;
}

.flex--right {
  justify-content: flex-end;
}

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

.flex--center-all {
  align-items: center;
  justify-content: center;
}

.flex--space-evenly {
  justify-content: space-evenly;
}

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

.flex--space-between {
  justify-content: space-between;
}

.iblock {
  display: inline-block;
}

.hidden {
  display: none;
}

@media only screen and (min-width: 25em) {
  .m\:hidden {
    display: none;
  }
  .m\:flex {
    display: flex;
    flex-direction: column;
  }
  .m\:flex--row {
    flex-flow: row wrap;
  }
  .m\:flex--row.flex--top {
    align-items: flex-start;
  }
  .m\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .m\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .m\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .m\:flex--row.flex--center {
    justify-content: center;
  }
  .m\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 37.5em) {
  .t\:hidden {
    display: none;
  }
  .t\:flex {
    display: flex;
    flex-direction: column;
  }
  .t\:flex--row {
    flex-flow: row wrap;
  }
  .t\:flex--row.flex--top {
    align-items: flex-start;
  }
  .t\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .t\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .t\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .t\:flex--row.flex--center {
    justify-content: center;
  }
  .t\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 56.25em) {
  .md\:hidden {
    display: none;
  }
  .md\:flex {
    display: flex;
    flex-direction: column;
  }
  .md\:flex--row {
    flex-flow: row wrap;
  }
  .md\:flex--row.flex--top {
    align-items: flex-start;
  }
  .md\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .md\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .md\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .md\:flex--row.flex--center {
    justify-content: center;
  }
  .md\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 75em) {
  .d\:hidden {
    display: none;
  }
  .d\:flex {
    display: flex;
    flex-direction: column;
  }
  .d\:flex--row {
    flex-flow: row wrap;
  }
  .d\:flex--row.flex--top {
    align-items: flex-start;
  }
  .d\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .d\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .d\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .d\:flex--row.flex--center {
    justify-content: center;
  }
  .d\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 90em) {
  .dm\:hidden {
    display: none;
  }
  .dm\:flex {
    display: flex;
    flex-direction: column;
  }
  .dm\:flex--row {
    flex-flow: row wrap;
  }
  .dm\:flex--row.flex--top {
    align-items: flex-start;
  }
  .dm\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .dm\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .dm\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .dm\:flex--row.flex--center {
    justify-content: center;
  }
  .dm\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 100em) {
  .lg\:hidden {
    display: none;
  }
  .lg\:flex {
    display: flex;
    flex-direction: column;
  }
  .lg\:flex--row {
    flex-flow: row wrap;
  }
  .lg\:flex--row.flex--top {
    align-items: flex-start;
  }
  .lg\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .lg\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .lg\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .lg\:flex--row.flex--center {
    justify-content: center;
  }
  .lg\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 112.5em) {
  .xl\:hidden {
    display: none;
  }
  .xl\:flex {
    display: flex;
    flex-direction: column;
  }
  .xl\:flex--row {
    flex-flow: row wrap;
  }
  .xl\:flex--row.flex--top {
    align-items: flex-start;
  }
  .xl\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .xl\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .xl\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .xl\:flex--row.flex--center {
    justify-content: center;
  }
  .xl\:flex--row.flex--v-center {
    align-items: center;
  }
}
@media only screen and (min-width: 160em) {
  .xxl\:hidden {
    display: none;
  }
  .xxl\:flex {
    display: flex;
    flex-direction: column;
  }
  .xxl\:flex--row {
    flex-flow: row wrap;
  }
  .xxl\:flex--row.flex--top {
    align-items: flex-start;
  }
  .xxl\:flex--row.flex--bottom {
    align-items: flex-end;
  }
  .xxl\:flex--row.flex--left {
    justify-content: flex-start;
  }
  .xxl\:flex--row.flex--right {
    justify-content: flex-end;
  }
  .xxl\:flex--row.flex--center {
    justify-content: center;
  }
  .xxl\:flex--row.flex--v-center {
    align-items: center;
  }
}
.full-screen {
  width: 100%;
  min-height: 100vh;
}

[style*="--w:"] {
  width: var(--w) !important;
}

[style*="--mw:"] {
  max-width: var(--mw) !important;
}

[style*="--minw:"] {
  min-width: var(--minw) !important;
}

[style*="--h:"] {
  height: var(--h) !important;
}

[style*="--minh:"] {
  min-height: var(--minh) !important;
}

[style*="--mh:"] {
  max-height: var(--mh) !important;
}

[style*="--gap:"] {
  gap: var(--gap) !important;
}

[style*="--cg:"] {
  column-gap: var(--cg) !important;
}

[style*="--rg:"] {
  row-gap: var(--rg) !important;
}

[style*="--zi:"] {
  z-index: var(--zi) !important;
}

/*[style*="--idx:"] {
  order: var(--idx) !important;
}*/
/*[style*="--gtc:"] {
  grid-template-columns: var(--gtc) !important;
}*/
[style*="--lc:"] {
  display: -webkit-box;
  -webkit-line-clamp: var(--lc);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[style*="--cc:"] {
  column-count: var(--cc);
}

[style*="--ta:"] {
  text-align: var(--ta) !important;
}

[style*="--lh:"] {
  line-height: var(--lh) !important;
}

[style*="--of:"] {
  object-fit: var(--of) !important;
}

[style*="--ar:"] {
  aspect-ratio: var(--ar) !important;
}

.disabled-scroll {
  overflow: hidden;
}

.full-size {
  display: block;
  width: 100%;
  height: 100%;
}

[style*="--m:"] {
  margin: var(--m) !important;
}

[style*="--mt:"] {
  /*margin-block-start: var(--mt) !important;*/
  margin-top: var(--mt) !important;
}

[style*="--mb:"] {
  /*margin-block-end: var(--mb) !important;*/
  margin-bottom: var(--mb) !important;
}

[style*="--ml:"] {
  /*margin-inline-start: var(--ml) !important;*/
  margin-left: var(--ml) !important;
}

[style*="--mr:"] {
  /*margin-inline-end: var(--mr) !important;*/
  margin-right: var(--mr) !important;
}

[style*="--mx:"] {
  /*  margin-inline-start: var(--mx) !important;
    margin-inline-end: var(--mx) !important;*/
  margin-left: var(--mx) !important;
  margin-right: var(--mx) !important;
}

[style*="--my:"] {
  /*  margin-block-start: var(--my) !important;
    margin-block-end: var(--my) !important;*/
  margin-top: var(--my) !important;
  margin-bottom: var(--my) !important;
}

[style*="--p:"] {
  padding: var(--p) !important;
}

[style*="--pt:"] {
  /*padding-block-start: var(--pt) !important;*/
  padding-top: var(--pt) !important;
}

[style*="--pb:"] {
  /*padding-block-end: var(--pb) !important;*/
  padding-bottom: var(--pb) !important;
}

[style*="--pl:"] {
  /*padding-inline-start: var(--pl) !important;*/
  padding-left: var(--pl) !important;
}

[style*="--pr:"] {
  /*padding-inline-end: var(--pr) !important;*/
  padding-right: var(--pr) !important;
}

[style*="--px:"] {
  /*padding-inline-start: var(--px) !important;
  padding-inline-end: var(--px) !important;*/
  padding-left: var(--px) !important;
  padding-right: var(--px) !important;
}

[style*="--py:"] {
  /*padding-block-start: var(--py) !important;
  padding-block-end: var(--py) !important;*/
  padding-top: var(--py) !important;
  padding-bottom: var(--py) !important;
}

.ui--primary {
  --border-width: var(--elem-border-width);
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  border: var(--border-width) solid var(--primary-color-variation-2);
}
.ui--primary > *,
.ui--primary > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-primary-color);
}
.ui--primary-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--primary-color-variation-3);
  background-color: var(--primary-color-variation-1);
  color: var(--on-primary-color-variation-1);
}
.ui--primary-alt > *,
.ui--primary-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-primary-color-variation-1);
}
.ui--secondary {
  --border-width: var(--elem-border-width);
  background-color: var(--secondary-color);
  color: var(--on-secondary-color);
  border: var(--border-width) solid var(--secondary-color-variation-2);
}
.ui--secondary > *,
.ui--secondary > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-secondary-color);
}
.ui--secondary-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--secondary-color-variation-3);
  background-color: var(--secondary-color-variation-1);
  color: var(--on-secondary-color-variation-1);
}
.ui--secondary-alt > *,
.ui--secondary-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-secondary-color-variation-1);
}
.ui--info {
  --border-width: var(--elem-border-width);
  background-color: var(--info-color-variation-1);
  color: var(--on-info-color-variation-1);
  border: var(--border-width) solid var(--info-color);
}
.ui--info > *,
.ui--info > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-info-color-variation-1);
}
.ui--info-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--info-color-variation-2);
  background-color: var(--info-color);
  color: var(--on-info-color);
}
.ui--info-alt > *,
.ui--info-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-info-color);
}
.ui--success {
  --border-width: var(--elem-border-width);
  background-color: var(--success-color-variation-1);
  color: var(--on-success-color-variation-1);
  border: var(--border-width) solid var(--success-color);
}
.ui--success > *,
.ui--success > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-succes-color-variation-1);
}
.ui--success-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--success-color-variation-2);
  background-color: var(--success-color);
  color: var(--on-success-color);
}
.ui--success-alt > *,
.ui--success-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-success-color);
}
.ui--warning {
  --border-width: var(--elem-border-width);
  background-color: var(--warning-color-variation-1);
  color: var(--on-warning-color-variation-1);
  border: var(--border-width) solid var(--warning-color);
}
.ui--warning > *,
.ui--warning > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-warning-color-variation-1);
}
.ui--warning-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--warning-color-variation-2);
  background-color: var(--warning-color);
  color: var(--on-warning-color);
}
.ui--warning-alt > *,
.ui--warning-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-warning-color);
}
.ui--danger {
  --border-width: var(--elem-border-width);
  background-color: var(--danger-color-variation-1);
  color: var(--on-danger-color-variation-1);
  border: var(--border-width) solid var(--danger-color);
}
.ui--danger > *,
.ui--danger > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-danger-color-variation-1);
}
.ui--danger-alt {
  --border-width: var(--elem-border-width);
  border: var(--border-width) solid var(--danger-color-variation-2);
  background-color: var(--danger-color);
  color: var(--on-danger-color);
}
.ui--danger-alt > *,
.ui--danger-alt > * *:is(h1, h2, h3, h4, h5) {
  color: var(--on-danger-color);
}
.ui--noborder {
  border: none;
}
.ui--noshadow {
  box-shadow: none;
}

[style*="--bdr:"] {
  border: var(--bdr) !important;
}

[style*="--bdrt:"] {
  border-top: var(--bdrt) !important;
}

[style*="--bdrb:"] {
  border-bottom: var(--bdrb) !important;
}

[style*="--bdrl:"] {
  border-left: var(--bdrl) !important;
}

[style*="--bdrr:"] {
  border-right: var(--bdrr) !important;
}

[style*="--bdrw:"] {
  border-width: var(--bdrw) !important;
}

[style*="--bdrs:"] {
  border-style: var(--bdrs) !important;
}

[style*="--bdrc:"] {
  border-color: var(--bdrc) !important;
}

[style*="--br:"] {
  border-radius: var(--br) !important;
}

[style*="--btlr:"] {
  border-top-left-radius: var(--btlr) !important;
}

[style*="--btrr:"] {
  border-top-right-radius: var(--btlr) !important;
}

[style*="--bblr:"] {
  border-bottom-left-radius: var(--btlr) !important;
}

[style*="--bbrr:"] {
  border-bottom-right-radius: var(--btlr) !important;
}

[style*="--bgc:"] {
  background-color: var(--bgc) !important;
}

[style*="--bgi:"] {
  background-image: var(--bgi) !important;
}

[style*="--clr:"] {
  color: var(--clr) !important;
}

[style*="--fs:"] {
  font-size: var(--fs) !important;
}

[style*="--lh:"] {
  line-height: var(--lh) !important;
}

[style*="--fw:"] {
  font-weight: var(--fw) !important;
}

[style*="--op:"] {
  opacity: var(--op) !important;
}

[style*="--crs:"] {
  cursor: var(--crs) !important;
}

.shadow {
  box-shadow: var(--ho, 0) var(--vo, 0) var(--blur, 1rem) var(--spread, 0) var(--clr, rgb(0 0 0/var(--op, 0.25)));
}

[style*="--translate:"],
[style*="--translateX:"],
[style*="--translateY:"],
[style*="--scale:"],
[style*="--scaleX:"],
[style*="--scaleY:"],
[style*="--rotate:"],
[style*="--skew:"],
[style*="--skewX:"],
[style*="--skewY:"] {
  transform: translate(var(--translate, 0)) translateX(var(--translateX, 0)) translateY(var(--translateY, 0)) rotate(var(--rotate, 0)) scale(var(--scale, 1)) scaleX(var(--scaleX, 1)) scaleY(var(--scaleY, 1)) skew(var(--skew, 0)) skewX(var(--skewX, 0)) skewY(var(--skewY, 0));
}

[style*="--translate-hvr:"],
[style*="--translateX-hvr:"],
[style*="--translateY-hvr:"],
[style*="--scale-hvr:"],
[style*="--scaleX-hvr:"],
[style*="--scaleY-hvr:"],
[style*="--rotate-hvr:"],
[style*="--skew-hvr:"],
[style*="--skewX-hvr:"],
[style*="--skewY-hvr:"] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
}
[style*="--translate-hvr:"]:hover,
[style*="--translateX-hvr:"]:hover,
[style*="--translateY-hvr:"]:hover,
[style*="--scale-hvr:"]:hover,
[style*="--scaleX-hvr:"]:hover,
[style*="--scaleY-hvr:"]:hover,
[style*="--rotate-hvr:"]:hover,
[style*="--skew-hvr:"]:hover,
[style*="--skewX-hvr:"]:hover,
[style*="--skewY-hvr:"]:hover {
  transition: var(--transition);
  transform: translate(var(--translate-hvr, 0)) translateX(var(--translateX-hvr, 0)) translateY(var(--translateY-hvr, 0)) rotate(var(--rotate-hvr, 0)) scale(var(--scale-hvr, 1)) scaleX(var(--scaleX-hvr, 1)) scaleY(var(--scaleY-hvr, 1)) skew(var(--skew-hvr, 0)) skewX(var(--skewX-hvr, 0)) skewY(var(--skewY-hvr, 0));
}

[style*="--op-hvr:"] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
}
[style*="--op-hvr:"]:hover {
  transition: var(--transition);
  opacity: var(--op-hvr) !important;
}

[style*="--bgc-hvr:"] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
}
[style*="--bgc-hvr:"]:hover {
  transition: var(--transition);
  background-color: var(--bgc-hvr) !important;
}

[style*="--clr-hvr:"] {
  --transition: all 0.3s ease-in-out;
  transition: var(--transition);
}
[style*="--clr-hvr:"]:hover {
  transition: var(--transition);
  color: var(--clr-hvr) !important;
}

[style*="--t-delay:"] {
  transition-delay: var(--t-delay) !important;
}

[style*="--origin:"] {
  transform-origin: var(--origin) !important;
}

[style*="--t-duration:"] {
  transition-duration: var(--t-duration) !important;
}

[style*="--t-func:"] {
  transition-timing-function: var(--t-func) !important;
}

[style*="--a-delay:"] {
  animation-delay: var(--a-delay) !important;
}

[style*="--a-duration:"] {
  animation-duration: var(--a-duration) !important;
}

[style*="--a-func:"] {
  animation-timing-function: var(--a-func) !important;
}

[style*="--a-dir:"] {
  animation-direction: var(--a-dir) !important;
}

[style*="--a-mode:"] {
  animation-fill-mode: var(--a-mode) !important;
}

[style*="--a-name:"] {
  animation-name: var(--a-name) !important;
}

/* addons :
  https://open-props.style
  https://github.com/argyleink/open-props
  https://animate.style
  https://github.com/animate-css
*/