/**
 * Negative Epsilon Design System
 * Version 2022-09-06T11:20:00+02:00
 */

*,
::before,
::after {
    box-sizing: border-box;
    /* Surfaces colors*/
    --color-primary-base: rgb(var(--color-primary-base-values));
    --color-primary-light: rgb(var(--color-primary-light-values));
    --color-primary-dark: rgb(var(--color-primary-dark-values));
    --color-secondary-base: rgb(var(--color-secondary-base-values));
    --color-secondary-light: rgb(var(--color-secondary-light-values));
    --color-secondary-dark: rgb(var(--color-secondary-dark-values));
    --color-accent-base: rgb(var(--color-accent-base-values));
    --color-accent-light: rgb(var(--color-accent-light-values));
    --color-accent-dark: rgb(var(--color-accent-dark-values));
    --color-success-base: rgb(var(--color-success-base-values));
    --color-success-light: rgb(var(--color-success-light-values));
    --color-success-dark: rgb(var(--color-success-dark-values));
    --color-warning-base: rgb(var(--color-warning-base-values));
    --color-warning-light: rgb(var(--color-warning-light-values));
    --color-warning-dark: rgb(var(--color-warning-dark-values));
    --color-error-base: rgb(var(--color-error-base-values));
    --color-error-light: rgb(var(--color-error-light-values));
    --color-error-dark: rgb(var(--color-error-dark-values));

    /* Neutral colors */
    --color-title: rgb(var(--color-title-values));
    --color-body: rgb(var(--color-body-values));
    --color-label: rgb(var(--color-label-values));
    --color-placeholder: rgb(var(--color-placeholder-values));
    --color-line: rgb(var(--color-line-values));
    --color-input-background: rgb(var(--color-input-background-values));
    --color-background: rgb(var(--color-background-values));
    --color-elevation: rgb(var(--color-elevation-values));

    /* Accesibility colors */
    --color-primary-on-background: rgb(var(--color-primary-on-background-values));
    --color-primary-on-background-contrast: rgb(var(--color-primary-on-background-contrast-values));
    --color-primary-on-transparent: rgb(var(--color-primary-on-transparent-values));
    --color-primary-on-transparent-contrast: rgb(var(--color-primary-on-transparent-contrast-values));
    --color-primary-in-light: rgb(var(--color-primary-in-light-values));
    --color-primary-in-light-contrast: rgb(var(--color-primary-in-light-contrast-values));
    --color-primary-in-base: rgb(var(--color-primary-in-base-values));
    --color-primary-in-base-contrast: rgb(var(--color-primary-in-base-contrast-values));
    --color-primary-in-dark: rgb(var(--color-primary-in-dark-values));
    --color-primary-in-dark-contrast: rgb(var(--color-primary-in-dark-contrast-values));
    --color-secondary-on-background: rgb(var(--color-secondary-on-background-values));
    --color-secondary-on-background-contrast: rgb(var(--color-secondary-on-background-contrast-values));
    --color-secondary-on-transparent: rgb(var(--color-secondary-on-transparent-values));
    --color-secondary-on-transparent-contrast: rgb(var(--color-secondary-on-transparent-contrast-values));
    --color-secondary-in-light: rgb(var(--color-secondary-in-light-values));
    --color-secondary-in-light-contrast: rgb(var(--color-secondary-in-light-contrast-values));
    --color-secondary-in-base: rgb(var(--color-secondary-in-base-values));
    --color-secondary-in-base-contrast: rgb(var(--color-secondary-in-base-contrast-values));
    --color-secondary-in-dark: rgb(var(--color-secondary-in-dark-values));
    --color-secondary-in-dark-contrast: rgb(var(--color-secondary-in-dark-contrast-values));
    --color-accent-on-background: rgb(var(--color-accent-on-background-values));
    --color-accent-on-background-contrast: rgb(var(--color-accent-on-background-contrast-values));
    --color-accent-on-transparent: rgb(var(--color-accent-on-transparent-values));
    --color-accent-on-transparent-contrast: rgb(var(--color-accent-on-transparent-contrast-values));
    --color-accent-in-light: rgb(var(--color-accent-in-light-values));
    --color-accent-in-light-contrast: rgb(var(--color-accent-in-light-contrast-values));
    --color-accent-in-base: rgb(var(--color-accent-in-base-values));
    --color-accent-in-base-contrast: rgb(var(--color-accent-in-base-contrast-values));
    --color-accent-in-dark: rgb(var(--color-accent-in-dark-values));
    --color-accent-in-dark-contrast: rgb(var(--color-accent-in-dark-contrast-values));
    --color-success-on-background: rgb(var(--color-success-on-background-values));
    --color-success-on-background-contrast: rgb(var(--color-success-on-background-contrast-values));
    --color-success-on-transparent: rgb(var(--color-success-on-transparent-values));
    --color-success-on-transparent-contrast: rgb(var(--color-success-on-transparent-contrast-values));
    --color-success-in-light: rgb(var(--color-success-in-light-values));
    --color-success-in-light-contrast: rgb(var(--color-success-in-light-contrast-values));
    --color-success-in-base: rgb(var(--color-success-in-base-values));
    --color-success-in-base-contrast: rgb(var(--color-success-in-base-contrast-values));
    --color-success-in-dark: rgb(var(--color-success-in-dark-values));
    --color-success-in-dark-contrast: rgb(var(--color-success-in-dark-contrast-values));
    --color-warning-on-background: rgb(var(--color-warning-on-background-values));
    --color-warning-on-background-contrast: rgb(var(--color-warning-on-background-contrast-values));
    --color-warning-on-transparent: rgb(var(--color-warning-on-transparent-values));
    --color-warning-on-transparent-contrast: rgb(var(--color-warning-on-transparent-contrast-values));
    --color-warning-in-light: rgb(var(--color-warning-in-light-values));
    --color-warning-in-light-contrast: rgb(var(--color-warning-in-light-contrast-values));
    --color-warning-in-base: rgb(var(--color-warning-in-base-values));
    --color-warning-in-base-contrast: rgb(var(--color-warning-in-base-contrast-values));
    --color-warning-in-dark: rgb(var(--color-warning-in-dark-values));
    --color-warning-in-dark-contrast: rgb(var(--color-warning-in-dark-contrast-values));
    --color-error-on-background: rgb(var(--color-error-on-background-values));
    --color-error-on-background-contrast: rgb(var(--color-error-on-background-contrast-values));
    --color-error-on-transparent: rgb(var(--color-error-on-transparent-values));
    --color-error-on-transparent-contrast: rgb(var(--color-error-on-transparent-contrast-values));
    --color-error-in-light: rgb(var(--color-error-in-light-values));
    --color-error-in-light-contrast: rgb(var(--color-error-in-light-contrast-values));
    --color-error-in-base: rgb(var(--color-error-in-base-values));
    --color-error-in-base-contrast: rgb(var(--color-error-in-base-contrast-values));
    --color-error-in-dark: rgb(var(--color-error-in-dark-values));
    --color-error-in-dark-contrast: rgb(var(--color-error-in-dark-contrast-values));

    /* SPACINGS */
    --space-s: calc(var(--density, 1) * .5rem);
    --space-m: calc(var(--density, 1) * 1rem);
    --space-l: calc(var(--density, 1) * 2rem);
    --space-xl: calc(var(--density, 1) * 4rem);
    --space: var(--space-m);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/** TYPESYSTEM **/
body {
    font-family: var(--font-family);
    font-size: var(--rem);
    line-height: var(--body-line-height, var(--rhythm));
    color: var(--color-body);
    background-color: var(--color-background);
    font-weight: var(--body-font-weight, 400);
    letter-spacing: var(--body-letter-spacing, normal);
}

::selection {
    color: var(--selection-color, var(--color-accent-in-base-contrast));
    background-color: var(--selection-background-color, var(--color-accent-base));
}

/* DISPLAY TEXTS */
.d1 {
    font-style: normal;
    font-weight: var(--d1-font-weight, 400);
    font-size: var(--d1-font-size, 4rem);
    line-height: var(--d1-line-height, var(--rhythm));
    letter-spacing: var(--d1-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d1-font-stretch, normal);
    font-family: var(--d1-font-family, var(--d-font-family, var(--font-family)));
}

.d2 {
    font-style: normal;
    font-weight: var(--d2-font-weight, 400);
    font-size: var(--d2-font-size, 3.5rem);
    line-height: var(--d2-line-height, var(--rhythm));
    letter-spacing: var(--d2-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d2-font-stretch, normal);
    font-family: var(--d2-font-family, var(--d-font-family, var(--font-family)));
}

.d3 {
    font-style: normal;
    font-weight: var(--d3-font-weight, 400);
    font-size: var(--d3-font-size, 2.75rem);
    line-height: var(--d3-line-height, var(--rhythm));
    letter-spacing: var(--d3-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d3-font-stretch, normal);
    font-family: var(--d3-font-family, var(--d-font-family, var(--font-family)));
}

.d4 {
    font-style: normal;
    font-weight: var(--d4-font-weight, 400);
    font-size: var(--d4-font-size, 2.375rem);
    line-height: var(--d4-line-height, var(--rhythm));
    letter-spacing: var(--d4-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d4-font-stretch, normal);
    font-family: var(--d4-font-family, var(--d-font-family, var(--font-family)));
}

.d5 {
    font-style: normal;
    font-weight: var(--d5-font-weight, 400);
    font-size: var(--d5-font-size, 2rem);
    line-height: var(--d5-line-height, var(--rhythm));
    letter-spacing: var(--d5-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d5-font-stretch, normal);
    font-family: var(--d5-font-family, var(--d-font-family, var(--font-family)));
}

.d6 {
    font-style: normal;
    font-weight: var(--d6-font-weight, 400);
    font-size: var(--d6-font-size, 1.5rem);
    line-height: var(--d6-line-height, var(--rhythm));
    letter-spacing: var(--d6-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    font-stretch: var(--d6-font-stretch, normal);
    font-family: var(--d6-font-family, var(--d-font-family, var(--font-family)));
}

h1,
.h1 {
    font-style: normal;
    font-weight: var(--h1-font-weight, 400);
    font-size: var(--h1-font-size, 2.25rem);
    line-height: var(--h1-line-height, var(--rhythm));
    letter-spacing: var(--h1-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h1-font-stretch, normal);
}

h2,
.h2 {
    font-style: normal;
    font-weight: var(--h2-font-weight, 400);
    font-size: var(--h2-font-size, 2rem);
    line-height: var(--h2-line-height, var(--rhythm));
    letter-spacing: var(--h2-letter-spacing, normal);
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h2-font-stretch, normal);
}

h3,
.h3 {
    font-style: normal;
    font-weight: var(--h3-font-weight, 400);
    font-size: var(--h3-font-size, 1.75rem);
    letter-spacing: var(--h3-letter-spacing, normal);
    line-height: var(--h3-line-height, var(--rhythm));
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h3-font-stretch, normal);
}

h4,
.h4 {
    font-style: normal;
    font-weight: var(--h4-font-weight, 400);
    font-size: var(--h4-font-size, 1.5rem);
    letter-spacing: var(--h4-letter-spacing, normal);
    line-height: var(--h4-line-height, var(--rhythm));
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h4-font-stretch, normal);
}

h5,
.h5 {
    font-style: normal;
    font-weight: var(--h5-font-weight, 400);
    font-size: var(--h5-font-size, 1.375rem);
    letter-spacing: var(--h5-letter-spacing, normal);
    line-height: var(--h5-line-height, var(--rhythm));
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h5-font-stretch, normal);
}

h6,
.h6 {
    font-style: normal;
    font-weight: var(--h6-font-weight, 400);
    font-size: var(--h6-font-size, 1.125rem);
    letter-spacing: var(--h6-letter-spacing, normal);
    line-height: var(--h6-line-height, var(--rhythm));
    color: var(--color-title);
    display: block;
    margin: 1.66em 0 .5em 0;
    font-stretch: var(--h6-font-stretch, normal);
}

.subtitle {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: var(--subtitle-font-weight, 400);
    font-size: var(--subtitle-font-size, 1.25rem);
    letter-spacing: var(--subtitle-letter-spacing, normal);
    line-height: var(--subtitle-line-height, calc(1.2 * var(--rhythm)));
    color: var(--color-title);
    display: block;
    font-stretch: var(--subtitle-font-stretch, normal);
}

.body {
    font-style: normal;
    font-weight: var(--body-font-weight, 400);
    font-size: var(--rem);
    line-height: var(--body-line-height, var(--rhythm));
    color: var(--color-title);
    letter-spacing: var(--body-letter-spacing, normal);
    font-stretch: var(--body-font-stretch, normal);
}

caption,
.caption {
    font-style: italic;
    font-weight: var(--caption-font-weight, 400);
    font-size: var(--caption-font-size, .75rem);
    letter-spacing: var(--caption-letter-spacing, .1px);
    line-height: var(--caption-line-height, calc(1.2 * var(--rhythm)));
    color: var(--color-body);
    font-stretch: var(--caption-font-stretch, normal);
}

.overline {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: var(--overline-font-weight, 500);
    font-size: var(--overline-font-size, .75rem);
    letter-spacing: var(--overline-letter-spacing, 1px);
    line-height: var(--overline-line-height, calc(1.2 * var(--rhythm)));
    text-transform: uppercase;
    color: var(--color-title);
    font-stretch: var(--overline-font-stretch, normal);
}

strong,
b {
    font-style: normal;
    font-weight: var(--strong-font-weight, bold);
    color: var(--strong-color, --color-title);
}

a,
.a {
    font-style: normal;
    line-height: inherit;
    text-decoration-line: underline;
    color: var(--a-color, var(--color-primary-on-background-contrast));
    cursor: pointer;
}

a>strong {
    color: inherit;
}

a:hover,
a.hover,
.a:hover,
.a.hover,
a:hover:visited,
a:visited.hover,
.a.visited:hover,
.a:visited:hover,
.a:visited.hover {
    background-color: var(--a-hover-background-color, var(--color-secondary-base));
    color: var(--a-hover-color, var(--color-secondary-in-base-contrast));
}

a:visited,
a.visited,
.a:visited,
.a.visited {
    color: var(--a-visited-color, var(--color-secondary-on-background-contrast));
}

a:focus,
a.focus,
.a:focus,
.a.focus {
    background-color: var(--a-focus-background-color, var(--color-accent-base));
    color: var(--a-focus-color, var(--color-accent-in-base-contrast));
    outline: none;
}

a.no-style,
.a.no-style,
a.no-style:hover {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 .a,
h2 .a,
h3 .a,
h4 .a,
h5 .a,
h6 .a,
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a,
.h1 .a,
.h2 .a,
.h3 .a,
.h4 .a,
.h5 .a,
.h6 .a {
    color: var(--color-title) !important;
    text-decoration: none;
    font-weight: inherit;
}

abbr {
    text-decoration: underline dotted;
}

code {
    font-weight: var(--code-font-weight, 700);
    font-family: monospace;
}

i,
cite {
    font-style: italic;
}

em {
    font-family: var(--em-font-family);
    font-weight: var(--em-font-weight);
    line-height: var(--em-line-height);
    letter-spacing: var(--em-letter-spacing);
    font-stretch: var(--em-font-stretch);
    font-style: var(--em-font-style, italic);
}

s {
    text-decoration: line-through;
}

u {
    text-decoration: underline;
}

small,
.small {
    font-size: var(--small-font-size, .875rem);
    letter-spacing: var(--small-letter-spacing, normal);
    font-weight: var(--small-font-weight, 400);
    letter-spacing: var(--small-letter-spacing, normal);
    font-stretch: var(--small-font-stretch, normal);
}

.small.interactive {
    font-weight: var(--small-interactive-font-weight, 500);
    letter-spacing: var(--small-interactive-letter-spacing, .15px);
    font-stretch: var(--small-interactive-font-stretch, normal);
}

/** BLOCK STYLES & LISTS **/

hr {
    border: .5px solid var(--hr-color, var(--color-line));
}

p {
    margin-top: 1.125rem;
    margin-bottom: 1.125rem;
    line-height: var(--p-line-height, var(--rhythm));
}

blockquote {
    margin: 0;
    padding: calc(var(--density, 1) * 1.125rem) calc(var(--density, 1) * 2.5rem);
    background-color: var(--blockquote-background-color, rgba(var(--color-primary-base-values), .25));
    color: var(--blockquote-color, var(--color-title));
    font-style: italic;
    line-height: var(--blockquote-line-height, calc(1.2 * var(--rhythm)));
}

blockquote~figcaption {
    margin-top: 1rem;
}

ul {}

ol {}

ul li::marker {
    color: var(--ul-marker-color, var(--color-primary-dark));
    font-size: 1.3em;
}

ol li {}

dl {}

dl dt {
    font-style: normal;
    font-weight: var(--dt-font-weight, bold);
    color: var(--dt-color, var(--color-primary-on-background));
    line-height: var(--dt-line-height, calc(1.2 * var(--rhythm)));
    text-transform: var(--dt-text-transform, none);
    letter-spacing: var(--dt-letter-spacing, 0);
    font-stretch: var(--dt-font-stretch, normal);
}

dl dd {
    margin: 0;
}

/** FIGURES **/

figure {
    max-width: 100%;
    overflow-x: auto;
    margin: 0;
}

img {
    max-width: 100%;
}

figcaption:last-child {
    font-style: italic;
    font-weight: var(--figcaption-font-weight, 400);
    font-size: var(--figcaption-font-size, .75rem);
    letter-spacing: var(--figcaption-letter-spacing, .1px);
    line-height: var(--figcaption-line-height, calc(1.2 * var(--rhythm)));
    color: var(--color-body);
}

/** SUMMARY / DETAILS **/

summary {
    cursor: pointer;
}

/** TABLES **/

table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    font-weight: var(--th-font-weight, bold);
    text-align: left;
}

table thead th {
    vertical-align: bottom;
}

table th,
table td {
    padding: calc(var(--density, 1) * .25em);
}

table thead tr {
    border-bottom: 2px solid var(--color-line);
}

table tbody tr {
    border-bottom: 1px solid var(--color-line);
}

table tr:nth-child(2n) {
    background-color: var(--color-input-background);
}

/** FORMS **/

input,
textarea,
select {
    font-size: calc(var(--rem) - 1);
    background-color: var(--color-input-background);
    font-family: var(--font-family);
    padding: calc(var(--density, 1) * .6875em) calc(var(--density, 1) * 1em);
    height: calc(1.375em + 2*.6875em*var(--density, 1));
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

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

input:hover:not([disabled]),
textarea:hover:not([disabled]),
select:hover:not([disabled]),
input.hover,
textarea.hover,
select.hover {
    box-shadow: 0 0 2px var(--color-primary-base);
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    background-color: var(--color-line);
    color: var(--color-body);
}

input::placeholder:disabled,
select::placeholder:disabled,
textarea::placeholder:disabled {
    color: var(--color-label);
}

input:focus,
input.focus,
textarea:focus,
textarea.focus,
select:focus,
select.focus {
    outline: none;
    outline: 2px solid var(--input-focus-outline-color, var(--color-primary-base));
}

input::placeholder {
    color: var(--color-placeholder);
}

.form-group label {
    display: block;
    margin-left: var(--border-radius);
    margin-right: var(--border-radius);

    color: var(--label-color, var(--color-label));
    font-size: var(--label-font-size, inherit);
    font-weight: var(--label-font-weight, inherit);

    font-size: var(--label-font-size, inherit);
    letter-spacing: var(--label-letter-spacing, inherit);
    line-height: var(--label-line-height, inherit);
    text-transform: var(--label-text-transform, inherit);
    font-stretch: var(--label-font-stretch, inherit);
}

.form-group.checkbox-group label {
    display: inline;
    margin: 0;

    font-size: var(--label-checkbox-font-size, inherit);
    letter-spacing: var(--label-checkbox-letter-spacing, inherit);
    line-height: var(--label-checkbox-line-height, inherit);
    text-transform: var(--label-checkbox-text-transform, inherit);
    font-stretch: var(--label-checkbox-font-stretch, inherit);
}

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

.form-group.required label {
    font-weight: var(--form-group-label-required-font-weight, bold);
}

.form-group.required label::after {
    content: ' *';
    font-size: .85em;
    color: var(--color-error-on-background-contrast);
}

.form-group.invalid label,
.form-group.invalid .help-text,
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
    color: var(--color-error-on-background-contrast);
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
    border-color: var(--color-error-base);
}

.form-group .help-text {
    margin-top: var(--border-radius);
    margin-left: var(--border-radius);
    font-size: 0.85em;
}

fieldset,
.fieldset {
    border-radius: var(--border-radius);
    margin-top: 1rem;
    padding: calc(var(--density, 1) * 1rem) calc(var(--density, 1) * 1.5rem) calc(var(--density, 1) * 1.5rem);
    border: 1px solid var(--color-line);
    box-shadow: 0px 17px 48px rgba(var(--color-title-values), 0.04), 0px 3.79717px 10.7214px rgba(var(--color-title-values), 0.0213603), 0px 1.13052px 3.19205px rgba(var(--color-title-values), 0.0174121);
}


legend,
.legend {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: var(--legend-font-weight, 400);
    font-size: var(--legend-font-size, .75rem);
    letter-spacing: var(--fieldset-legend-letter-spacing, .5px);
    line-height: var(--legend-line-height, calc(1.2 * var(--rhythm)));
    text-transform: uppercase;
    color: var(--legend-color, var(--color-title));
}

fieldset>legend,
fieldset>.legend,
.fieldset>legend,
.fieldset>.legend {
    font-size: var(--fieldset-legend-font-size, .75rem);
    letter-spacing: var(--fieldset-legend-letter-spacing, .5px);
    color: var(--fieldset-legend-color, var(--color-primary-on-background));
    font-weight: var(--fieldset-legend-font-weight, 700);
}



/** Input affix groups **/
.input-affix-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-affix {
    font-size: calc(var(--rem) - 1);
    background-color: var(--color-input-background);
    font-family: var(--font-family);
    padding: calc(var(--density, 1) * .6875em) calc(var(--density, 1) * 1em);
    height: calc(1.375em + 2*.6875em*var(--density, 1));
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    line-height: var(--body-line-height, var(--rhythm));
}

.input-affix-group input {
    position: inherit;
}

.prefix .input-affix,
.suffix input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.suffix .input-affix,
.prefix input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/** LAYOUT **/
.container {
    margin: 0 auto;
    max-width: var(--container-width);
}

.readable-container {
    margin: 0 auto;
    max-width: var(--readable-container-width);
    font-size: var(--readable-container-font-size);
}

.padded-container,
.scrollable-container {
    padding-left: calc(calc(100vw - var(--container-width))/2);
    padding-right: calc(calc(100vw - var(--container-width))/2);
}

.scrollable-container {
    overflow-x: auto;
}

@media screen and (max-width: 1024px) {

    .container,
    .readable-container,
    .padded-container,
    .scrollable-container {
        padding: 0 calc(var(--density, 1) * 1rem);
    }
}

@media screen and (max-width: 768px) {

    .container,
    .readable-container {
        padding: 0 calc(var(--density, 1) * 1rem);
        font-size: var(--readable-container-font-size-small);
    }
}

.absolute-fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/**
 * GRID
 */
.grid {
    display: grid;
}

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

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

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

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

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

@media screen and (min-width: 769px) {
    .desktop-hidden {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .tablet-responsive-to-1,
    .tablet-responsive {
        grid-template-columns: 1fr;
    }

    .tablet-responsive-to-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tablet-responsive-to-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .tablet-responsive-to-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 480px) {

    .mobile-responsive-to-1,
    .mobile-responsive {
        grid-template-columns: 1fr;
    }

    .mobile-responsive-to-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-responsive-to-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .mobile-responsive-to-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/**
 * Flex
 */
.flex {
    display: flex;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

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

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

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

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

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

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

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

.flex-grow {
    flex-grow: 1;
}

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


/**
 * Spacing
 */
.dense {
    --density: .5;
}

.gap-s {
    gap: var(--space-s);
}

.gap,
.gap-m {
    gap: var(--space-m);
}

.gap-l {
    gap: var(--space-l);
}

.gap-xl {
    gap: var(--space-xl);
}

.row-gap-s {
    row-gap: var(--space-s);
}

.row-gap,
.row-gap-m {
    row-gap: var(--space-m);
}

.row-gap-l {
    row-gap: var(--space-l);
}

.row-gap-xl {
    row-gap: var(--space-xl);
}

.col-gap-s {
    column-gap: var(--space-s);
}

.col-gap,
.col-gap-m {
    column-gap: var(--space-m);
}

.col-gap-l {
    column-gap: var(--space-l);
}

.col-gap-xl {
    row-gap: var(--space-xl);
}

/* Margin */
.t-margin,
.t-margin-m {
    margin-top: var(--space);
}

.b-margin,
.b-margin-m {
    margin-bottom: var(--space);
}

.l-margin,
.l-margin-m {
    margin-left: var(--space);
}

.r-margin,
.r-margin-m {
    margin-right: var(--space);
}

.t-margin-s {
    margin-top: var(--space-s);
}

.b-margin-s {
    margin-bottom: var(--space-s);
}

.l-margin-s {
    margin-left: var(--space-s);
}

.r-margin-s {
    margin-right: var(--space-s);
}

.t-margin-l {
    margin-top: var(--space-l);
}

.b-margin-l {
    margin-bottom: var(--space-l);
}

.l-margin-l {
    margin-left: var(--space-l);
}

.r-margin-l {
    margin-right: var(--space-l);
}

.v-margin-s {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}

.v-margin,
.v-margin-m {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
}

.v-margin-l {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
}

.h-margin-s {
    margin-left: var(--space-s);
    margin-right: var(--space-s);
}

.h-margin,
.h-margin-m {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
}

.h-margin-l {
    margin-left: var(--space-l);
    margin-right: var(--space-m);
}

.margin-s {
    margin: var(--space-s);
}

.margin-m,
.margin {
    margin: var(--space-m);
}

.margin-l {
    margin: var(--space-l);
}

/* Padding */
.v-padding-s {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}

.v-padding,
.v-padding-m {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}

.v-padding-l {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}

.h-padding-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

.h-padding,
.h-padding-m {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.h-padding-l {
    padding-left: var(--space-l);
    padding-right: var(--space-m);
}

.padding-s {
    padding: var(--space-s);
}

.padding-m,
.padding {
    padding: var(--space-m);
}

.padding-l {
    padding: var(--space-l);
}



/* BUTTONS */

button.no-style,
.dense button.no-style,
button.dense.no-style {
    font-weight: normal;
    font-size: inherit;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline;
    color: inherit;
    padding: 0;
    margin: 0;
    height: auto;
    transition: none;
}

button.no-style:hover,
button.no-style:active,
button.no-style:focus,
button.no-style:focus-visible {
    box-shadow: none;
    background: none;
}

/* Base button */
button,
.button,
a.button {
    font-family: var(--font-family);
    --box-shadow-color: rgba(var(--color-title-values), 0.2);
    --box-shadow-size: 0px 0px 8px;
    --box-shadow-color-hover: rgba(var(--color-title-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-title-values), 0.5);
    --background-color: var(--color-body);
    --background-color-light: var(--color-label);
    --color: var(--color-background);
    --color-in-light: var(--color-background);
    font-style: normal;
    font-weight: var(--button-font-weight, 500);
    font-size: var(--button-font-size, 1rem);
    line-height: 1;
    padding: calc(0.8rem * var(--density, 1)) calc(2rem * var(--density, 1));
    border-radius: var(--button-border-radius, var(--border-radius));
    background-color: var(--background-color);
    border: 0;
    box-shadow: var(--box-shadow-size) var(--box-shadow-color);
    transition: box-shadow 200ms, background-color 200ms;
    color: var(--color);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-around
}

button.dense,
.button.dense,
.dense button,
.dense .button,
.button-s {
    /* --density: .5; */
    font-size: var(--button-dense-font-size, 1rem);
}

.button-l {
    font-size: 2rem;
    --density: 2;
}

button:hover,
.button:hover,
button.hover,
.button.hover,
a.button:hover,
a.button.hover {
    box-shadow: 0px 0px 16px var(--box-shadow-color-hover);
    background-color: var(--background-color-light);
    color: var(--color-in-light);
}

button:active,
.button:active,
button.active,
.button.active,
a.button:active,
a.button.active {
    box-shadow: inset 0px 4px 8px var(--box-shadow-color-active);
}

button:focus,
.button:focus button.focus,
.button.focus,
a.button:focus,
a.button.focus {
    background-color: var(--background-color-light);
    color: var(--color-in-light);
}

button:focus-visible,
.button:focus-visible,
button.focus-visible,
.button.focus-visible,
a.button:focus-visible,
a.button.focus-visible {
    outline: 2px solid var(--color-accent-base) !important;
}

button:disabled,
.button:disabled,
button.disabled,
.button.disabled,
a.button:disabled,
a.button.disabled {
    background-color: var(--color-placeholder) !important;
    color: var(--color-line) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Text button - Kind of an <a> tag */

button.text-style,
.button.text-style {
    font-weight: var(--button-font-weight, 500);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline;
    color: var(--color-primary-on-background);
    padding: 0;
    margin: 0;
    height: auto;
    transition: none;
    border-radius: 0;
}

button.text-style:active,
.button.text-style:active,
button.text-style.active,
.button.button.text-style.active {
    color: var(--color-primary-on-background-contrast);
}

button.text-style:hover,
.button.text-style:hover,
button.text-style.hover,
.button.button.text-style.hover {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-in-dark);
}

button.text-style:focus,
button.text-style:focus-visible,
.button.text-style:focus,
.button.text-style:focus-visible,
button.text-style.focus,
button.text-style.focus-visible,
.button.text-style.focus,
.button.text-style.focus-visible {
    background-color: var(--color-accent-base);
    color: var(--color-accent-in-base);
}

button.text-style:disabled,
.button.text-style:disabled,
button.text-style.disabled,
.button.button.text-style.disabled {
    background: none !important;
    color: var(--color-placeholder) !important;
}

/* Base transparent button */

button.transparent,
.button.transparent,
a.button.transparent {
    box-shadow: none;
    --text-color-transparent: var(--color-body);
    --text-color-transparent-dark: var(--color-title);
    --background-color-transparent: rgba(var(--color-body-values), 0.2);
    --background-color-light-transparent: rgba(var(--color-label-values), 0.2);
    --background-color-dark-transparent: rgba(var(--color-title-values), 0.25);
    color: var(--text-color-transparent);
    background-color: var(--background-color-transparent);
}

button.transparent:hover,
.button.transparent:hover,
button.transparent.hover,
.button.transparent.hover,
a.button.transparent.hover,
a.button.transparent:hover {
    background-color: var(--background-color-light-transparent);
}

button.transparent:active,
.button.transparent:active,
button.transparent.active,
.button.transparent.active,
a.button.transparent.active,
a.button.transparent:active {
    background-color: var(--background-color-dark-transparent);
    color: var(--text-color-transparent-dark)
}

button.transparent:focus,
.button.transparent:focus,
button.transparent.focus,
.button.transparent.focus,
a.button.transparent.focus,
a.button.transparent:focus {
    background-color: var(--background-color-light-transparent);
    outline: 1px solid var(--background-color);
}

button.transparent:disabled,
.button.transparent:disabled,
button.transparent.disabled,
.button.transparent.disabled,
a.button.transparent.disabled,
a.button.transparent:disabled {
    background-color: var(--color-placeholder) !important;
    color: var(--color-line) !important;
    box-shadow: none !important;
}

/* Base outline button */
button.outline,
.button.outline,
a.button.outline {
    box-shadow: none;
    --text-color-outline: var(--color-title);
    --text-color-outline-hover: var(--color-background);
    --border-color-outline: var(--color-body);
    color: var(--text-color-outline);
    border: 2px solid var(--border-color-outline);
    background-color: transparent;
}

button.outline:hover,
.button.outline:hover,
button.outline.hover,
.button.outline.hover,
a.button.outline.hover,
a.button.outline:hover {
    background-color: var(--border-color-outline);
    color: var(--text-color-outline-hover);
}

button.outline:active,
.button.outline:active,
button.outline.active,
.button.outline.active,
a.button.outline.active,
a.button.outline:active {
    background-color: var(--border-color-outline);
    color: var(--text-color-outline);
}

button.outline:focus,
.button.outline:focus,
button.outline.focus,
.button.outline.focus,
a.button.outline.focus,
a.button.outline:focus {
    background-color: var(--border-color-outline);
    color: inherit;
}

button.outline:disabled,
.button.outline:disabled,
button.outline.disabled,
.button.outline.disabled,
a.button.outline.disabled,
a.button.outline:disabled {
    background-color: var(--color-placeholder) !important;
    color: var(--color-line) !important;
    box-shadow: none !important;
}

/* Primary button */

button.primary,
.button.primary,
a.button.primary {
    --box-shadow-color: rgba(var(--color-primary-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-primary-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-primary-dark-values), 0.5);
    --background-color-light: var(--color-primary-light);
    --background-color: var(--color-primary-base);
    --text-color-transparent: var(--color-primary-on-transparent);
    --text-color-transparent-dark: var(--color-primary-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-primary-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-primary-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-primary-dark-values), 0.25);
    --color: var(--color-primary-text, var(--color-primary-in-base));
    --color-in-light: var(--color-primary-text-hover, var(--color-primary-in-light));
    --text-color-outline: var(--color-primary-on-background);
    --text-color-outline-hover: var(--color-primary-in-base);
    --border-color-outline: var(--color-primary-base);
}

/* Secondary button */

button.secondary,
.button.secondary,
a.button.secondary {
    --box-shadow-color: rgba(var(--color-secondary-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-secondary-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-secondary-dark-values), 0.5);
    --background-color-light: var(--color-secondary-light);
    --background-color: var(--color-secondary-base);
    --text-color-transparent: var(--color-secondary-on-transparent);
    --text-color-transparent-dark: var(--color-secondary-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-secondary-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-secondary-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-secondary-dark-values), 0.25);
    --color: var(--color-secondary-text, var(--color-secondary-in-base));
    --color-in-light: var(--color-secondary-text-hover, var(--color-secondary-in-light));
    --text-color-outline: var(--color-secondary-on-background);
    --text-color-outline-hover: var(--color-secondary-in-base);
    --border-color-outline: var(--color-secondary-base);
}

/* Accent button */

button.accent,
.button.accent,
a.button.accent {
    --box-shadow-color: rgba(var(--color-accent-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-accent-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-accent-dark-values), 0.5);
    --background-color-light: var(--color-accent-light);
    --background-color: var(--color-accent-base);
    --text-color-transparent: var(--color-accent-on-transparent);
    --text-color-transparent-dark: var(--color-accent-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-accent-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-accent-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-accent-dark-values), 0.25);
    --color: var(--color-accent-text, var(--color-accent-in-base));
    --color-in-light: var(--color-accent-text-hover, var(--color-accent-in-light));
    --text-color-outline: var(--color-accent-on-background);
    --text-color-outline-hover: var(--color-accent-in-base);
    --border-color-outline: var(--color-accent-base);
}

/* Success button */

button.success,
.button.success,
a.button.success {
    --box-shadow-color: rgba(var(--color-success-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-success-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-success-dark-values), 0.5);
    --background-color-light: var(--color-success-light);
    --background-color: var(--color-success-base);
    --text-color-transparent: var(--color-success-on-transparent);
    --text-color-transparent-dark: var(--color-success-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-success-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-success-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-success-dark-values), 0.25);
    --color: var(--color-success-text, var(--color-success-in-base));
    --color-in-light: var(--color-success-text-hover, var(--color-success-in-light));
    --text-color-outline: var(--color-success-on-background);
    --text-color-outline-hover: var(--color-success-in-base);
    --border-color-outline: var(--color-success-base);
}

/* Warning button */

button.warning,
.button.warning,
a.button.warning {
    --box-shadow-color: rgba(var(--color-warning-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-warning-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-warning-dark-values), 0.5);
    --background-color-light: var(--color-warning-light);
    --background-color: var(--color-warning-base);
    --text-color-transparent: var(--color-warning-on-transparent);
    --text-color-transparent-dark: var(--color-warning-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-warning-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-warning-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-warning-dark-values), 0.25);
    --color: var(--color-warning-text, var(--color-warning-in-base));
    --color-in-light: var(--color-warning-text-hover, var(--color-warning-in-light));
    --text-color-outline: var(--color-warning-on-background);
    --text-color-outline-hover: var(--color-warning-in-base);
    --border-color-outline: var(--color-warning-base);
}

/* Error button */

button.error,
.button.error,
a.button.error {
    --box-shadow-color: rgba(var(--color-error-dark-values), 0.2);
    --box-shadow-color-hover: rgba(var(--color-error-dark-values), 0.25);
    --box-shadow-color-active: rgba(var(--color-error-dark-values), 0.5);
    --background-color-light: var(--color-error-light);
    --background-color: var(--color-error-base);
    --text-color-transparent: var(--color-error-on-transparent);
    --text-color-transparent-dark: var(--color-error-on-transparent-contrast);
    --background-color-transparent: rgba(var(--color-error-base-values), 0.25);
    --background-color-light-transparent: rgba(var(--color-error-light-values), 0.25);
    --background-color-dark-transparent: rgba(var(--color-error-dark-values), 0.25);
    --color: var(--color-error-text, var(--color-error-in-base));
    --color-in-light: var(--color-error-text-hover, var(--color-error-in-light));
    --text-color-outline: var(--color-error-on-background);
    --text-color-outline-hover: var(--color-error-in-base);
    --border-color-outline: var(--color-error-base);
}

button.disabled,
.button.disabled,
a.button.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/** Close buttons **/
[data-close] {
    width: 0;
    visibility: hidden;
}

[data-close]:before {
    content: '\2716';
    visibility: visible;
    color: var(--color-title);
}

/** CARDS **/

.card {
    --card-paddings: var(--space-l);
    border-radius: var(--border-radius);
    background-color: var(--color-elevation);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--card-paddings);
}

.card-media {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    flex: 1;
}

.card-media>img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.card-info {
    padding: var(--card-paddings) var(--card-paddings) 0 var(--card-paddings);
}

.card-info .title {
    margin: 0;
    font-weight: var(--card-title-font-weight, 500);
    font-size: var(--card-title-font-size, 1.25rem);
    color: var(--color-title);
    display: block;
}

.card-info .description {
    margin: var(--space-s) 0;
    font-size: var(--rem);
    font-weight: var(--card-body-font-weight, 400);
}

.card-actions {
    padding: var(--card-paddings) var(--card-paddings) 0 var(--card-paddings);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-s);
}

.card-actions .button,
.card-actions button {
    font-size: var(--card-title-font-size, 1rem);
}

/** Alerts **/
.alert {
    --main-color-values: var(--color-line-values);
    --main-color-text: var(--color-title);
    --main-color-title: var(--color-title);
    --main-a-color: var(--color-primary-on-background-contrast);
    --main-a-color-hover: var(--color-primary-in-base-contrast);

    padding: var(--space-m) var(--space-l);
    border-radius: var(--border-radius);
    background-color: rgba(var(--main-color-values), 1);
    color: var(--main-color-text);
}

.alert.transparent {
    background-color: rgba(var(--main-color-values), .25);
}

.alert h2 {
    color: var(--alert-color-title, --main-color-title);
}

.alert a:not(.button) {
    color: var(--main-a-color);
}

.alert a:hover:not(.button) {
    color: var(--main-a-color-hover);
    background-color: var(--main-a-color);
}

.alert>*:first-child {
    margin-top: 0;
}

.alert>*:last-child {
    margin-bottom: 0;
}

.alert.primary {
    --main-color-values: var(--color-primary-base-values);
    --main-color-text: var(--alert-primary-color, var(--color-primary-in-base-contrast));
    --main-a-color: var(--alert-primary-a-color, var(--color-accent-base));
    --main-a-color-hover: var(--alert-primary-a-hover-color, var(--color-accent-in-base-contrast));
}

.alert.primary.transparent {
    --main-color-text: var(--alert-primary-transparent-color, var(--color-primary-on-transparent-contrast));
    --main-color-title: var(--alert-primary-transparent-color, var(--color-primary-on-transparent));
}

.alert.secondary {
    --main-color-values: var(--color-secondary-base-values);
    --main-color-text: var(--alert-secondary-color, var(--color-secondary-in-base-contrast));
    --main-a-color: var(--alert-secondary-a-color, var(--color-primary-base));
    --main-a-color-hover: var(--alert-secondary-a-hover-color, var(--color-primary-in-base-contrast));
}

.alert.secondary.transparent {
    --main-color-text: var(--alert-secondary-transparent-color, var(--color-secondary-on-transparent-contrast));
    --main-color-title: var(--alert-secondary-transparent-color, var(--color-secondary-on-transparent));
}

.alert.accent {
    --main-color-values: var(--color-accent-base-values);
    --main-color-text: var(--alert-accent-color, var(--color-accent-in-base-contrast));
    --main-a-color: var(--alert-accent-a-color, var(--color-primary-base));
    --main-a-color-hover: var(--alert-accent-a-hover-color, var(--color-primary-in-base-contrast));
}

.alert.accent.transparent {
    --main-color-text: var(--alert-accent-transparent-color, var(--color-accent-on-transparent-contrast));
    --main-color-title: var(--alert-accent-transparent-color, var(--color-accent-on-transparent));
}

.alert.success {
    --main-color-values: var(--color-success-base-values);
    --main-color-text: var(--alert-success-color, var(--color-success-in-base-contrast));
    --main-a-color: var(--alert-success-a-color, var(--color-primary-base));
    --main-a-color-hover: var(--alert-success-a-hover-color, var(--color-primary-in-base-contrast));
}

.alert.success.transparent {
    --main-color-text: var(--alert-success-transparent-color, var(--color-success-on-transparent-contrast));
    --main-color-title: var(--alert-success-transparent-color, var(--color-success-on-transparent));
}

.alert.warning {
    --main-color-values: var(--color-warning-base-values);
    --main-color-text: var(--alert-warning-color, var(--color-warning-in-base-contrast));
    --main-a-color: var(--alert-warning-a-color, var(--color-primary-base));
    --main-a-color-hover: var(--alert-warning-a-hover-color, var(--color-primary-in-base-contrast));
}

.alert.warning.transparent {
    --main-color-text: var(--alert-warning-transparent-color, var(--color-warning-on-transparent-contrast));
    --main-color-title: var(--alert-warning-transparent-color, var(--color-warning-on-transparent));
}

.alert.error {
    --main-color-values: var(--color-error-base-values);
    --main-color-text: var(--alert-error-color, var(--color-error-in-base-contrast));
    --main-a-color: var(--alert-error-a-color, var(--color-primary-base));
    --main-a-color-hover: var(--alert-error-a-hover-color, var(--color-primary-in-base-contrast));
}

.alert.error.transparent {
    --main-color-text: var(--alert-error-transparent-color, var(--color-error-on-transparent-contrast));
    --main-color-title: var(--alert-error-transparent-color, var(--color-error-on-transparent));
}

/** Modals **/
.modal-wrapper {
    transform: translate(0, 100%);
    transform: translate3d(0, 100%, 0);

    position: fixed;
    inset: 0;
    z-index: 1;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.modal-wrapper:target,
.modal-wrapper.active {
    transform: translate(0, 0);
    width: auto;
    height: auto;
    opacity: 1;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 20;
    overflow-x: hidden;

    width: 60vw;
    max-height: 80vh;
    background-color: var(--color-elevation);
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 1.5rem rgba(var(--color-body), 0.3);

    display: flex;
    flex-direction: column;
}

.modal.large {
    width: 80vw;
    max-height: 90vh;
}

.modal.small {
    width: max(1024px, 40vw);
    max-height: 60vh;
    max-width: 90vw;
}

.modal-backdrop,
.modal-backdrop:hover {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.modal header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-line);
}

.modal header>* {
    margin: 0;
}

.modal>* {
    padding-left: 1rem;
    padding-right: 1rem;
}

.modal footer {
    padding: 1rem;
    border-top: 1px solid var(--color-line);
}

.modal main {
    overflow: scroll;
    flex: 1
}


/** Utilities **/
.no-margin {
    margin: 0;
}

.no-margin-top {
    margin-top: 0;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

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

/** Images **/
.photo-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.photo-background-contain {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/** NEW CLASsES **/

.tag {
    padding: calc(.5em * var(--density, 1)) calc(1em * var(--density, 1));
    border-radius: calc(var(--border-radius) / 2);

    color: var(--tag-color, var(--color-primary-on-transparent));
    background-color: rgba(var(--tag-background-color-values, var(--color-primary-base-values)), .25);
}

.tag.filled {
    color: var(--tag-filled-color, --color-primary-in-base);
    background-color: rgb(var(--tag-background-color-values, --color-primary-base-values));
}

.tag.dense {
    --density: .5;
}

.tag.secondary {
    --tag-color: var(--color-secondary-on-transparent);
    --tag-filled-color: var(--color-secondary-in-base);
    --tag-background-color-values: var(--color-secondary-base-values);
}

.tag.accent {
    --tag-color: var(--color-accent-on-transparent);
    --tag-filled-color: var(--color-accent-in-base);
    --tag-background-color-values: var(--color-accent-base-values);
}

.tag.success {
    --tag-color: var(--color-success-on-transparent);
    --tag-filled-color: var(--color-success-in-base);
    --tag-background-color-values: var(--color-success-base-values);
}

.tag.warning {
    --tag-color: var(--color-warning-on-transparent);
    --tag-filled-color: var(--color-warning-in-base);
    --tag-background-color-values: var(--color-warning-base-values);
}

.tag.error {
    --tag-color: var(--color-error-on-transparent);
    --tag-filled-color: var(--color-error-in-base);
    --tag-background-color-values: var(--color-error-base-values);
}

/* EXPERIMENTAL - Might change */
.fluid-text {
    font-size: clamp(calc(1rem * var(--min-font-scale, 1)),
            calc((var(--max-font-scale, 1) - var(--min-font-scale, 1)) * (100vw - calc(1px * var(--fluid-text-min-vw))) / (var(--fluid-text-max-vw) - var(--fluid-text-min-vw)) * var(--font-size-base) + calc(1rem * var(--min-font-scale, 1))),
            calc(1rem * var(--max-font-scale, 1)));
}

h1.fluid-text,
.h1.fluid-text {
    --min-font-scale: 2;
    --max-font-scale: 3.75;
}

h2.fluid-text,
.h2.fluid-text {
    --min-font-scale: 1.5;
    --max-font-scale: 3;
}

h3.fluid-text,
.h3.fluid-text {
    --min-font-scale: 1.375;
    --max-font-scale: 2.3;
}

h4.fluid-text,
.h4.fluid-text {
    --min-font-scale: 1.1875;
    --max-font-scale: 1.625;
}