/*
This file is part of the MDLR atomic web component library.

For the full copyright and license information, please read the
LICENSE.txt file that was distributed with this source code.
*/


/*
# Customisation ###############################################################
*/

:root {

    /* Colours */

    --mdlr-color-primary-main: light-dark(#f3f6f9, #13181d);
    --mdlr-color-primary-main-text: light-dark(#000, #fff);
    --mdlr-color-primary-intense: light-dark(#fff, #000);
    --mdlr-color-primary-intense-text: light-dark(#5d5e5f, #9a9b9c);
    --mdlr-color-primary-more: light-dark(#f8fafc, #090d12);
    --mdlr-color-primary-less: light-dark(#d6e2ed, #373d43);
    --mdlr-color-primary-translucent: light-dark(rgba(255,255,255,0.75), rgba(0,0,0,0.65));
    --mdlr-color-primary-translucent-filter: blur(0.65rem) saturate(250%);
    --mdlr-color-primary-backdrop: light-dark(rgba(0,0,0,0.75), rgba(0,0,0,0.65));
    --mdlr-color-primary-backdrop-filter: blur(0.65rem);
    --mdlr-color-primary-backdrop-text: #fff;

    --mdlr-color-highlight-main: light-dark(#bc1528, #a11222);
    --mdlr-color-highlight-main-text: #fff;
    --mdlr-color-highlight-intense: light-dark(#a11222, #bc2234);
    --mdlr-color-highlight-light: light-dark(#f5adb5, #45090e);
    --mdlr-color-highlight-light-ultra: light-dark(#fad6da, #230507);
    --mdlr-color-highlight-light-text: light-dark(#000, #fff);
    --mdlr-color-highlight-dark: light-dark(#45090e, #f5adb5);
    --mdlr-color-highlight-dark-ultra: light-dark(#230507, #fad6da);
    --mdlr-color-highlight-dark-text: light-dark(#fff, #000);

    --mdlr-color-accent-main: light-dark(#be9e46, #997e36);
    --mdlr-color-accent-main-text: #000;
    --mdlr-color-accent-intense: light-dark(#997e36, #be9e46);
    --mdlr-color-accent-light: light-dark(#e0d0a7, #403418);
    --mdlr-color-accent-light-text: light-dark(#000, #fff);
    --mdlr-color-accent-dark: light-dark(#403418, #e0d0a7);
    --mdlr-color-accent-dark-text: light-dark(#fff, #000);

    --mdlr-color-attention-error: light-dark(#ff0114, #ff000e);

    /* Fonts */

    --mdlr-font-main: 'Inter Variable', system-ui, sans-serif;
    --mdlr-font-main-features: 'calt' 1, 'liga' 1, 'frac' 1, 'zero' 1, 'cv05' 1;
    --mdlr-font-main-size: 1rem; /* Use rem to scale according to user settings, 1rem commonly equals 16px */
    --mdlr-font-main-height: 1.5em; /* Use em to make line height relative to actual font size */
    --mdlr-font-main-weight: 400; /* 400 is the regular text weight */
    --mdlr-font-main-emphasis: 600; /* 700 is the average bold weight */
    --mdlr-font-main-heavy: 700;
    --mdlr-font-main-smaller: 0.8125em;
    --mdlr-font-main-larger: 1.125rem;
    --mdlr-font-main-offset: 0; /* Some fonts need a -1px offset */

    --mdlr-font-heading: var(--mdlr-font-main);
    --mdlr-font-heading-features: var(--mdlr-font-main-features);
    --mdlr-font-heading-size: 4.25rem;
    --mdlr-font-heading-size-below-900: 3rem;
    --mdlr-font-heading-size-below-600: 2.25rem;
    --mdlr-font-heading-height: 1.15em;
    --mdlr-font-heading-weight: 800;
    --mdlr-font-heading-color: var(--mdlr-color-highlight-intense);

    --mdlr-font-sectionheading: var(--mdlr-font-main);
    --mdlr-font-sectionheading-features: var(--mdlr-font-main-features);
    --mdlr-font-sectionheading-size: 2.25rem;
    --mdlr-font-sectionheading-size-below-600: 2rem;
    --mdlr-font-sectionheading-height: 1.15em;
    --mdlr-font-sectionheading-weight: 800;
    --mdlr-font-sectionheading-color: var(--mdlr-color-highlight-intense);

    --mdlr-font-subheading: var(--mdlr-font-main);
    --mdlr-font-subheading-features: var(--mdlr-font-main-features);
    --mdlr-font-subheading-size: 1.65rem;
    --mdlr-font-subheading-height: 1.15em;
    --mdlr-font-subheading-weight: 600;
    --mdlr-font-subheading-color: var(--mdlr-color-highlight-intense);

    /* Shadows */

    --mdlr-shadow-flat: 0 0 4px light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1)),
        0 2px 4px light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
    --mdlr-shadow-regular: 0 0 4px light-dark(rgba(0,0,0,0.125), rgba(255,255,255,0.125)),
        0 4px 8px light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    --mdlr-shadow-elevated: 0 0 4px light-dark(rgba(0,0,0,0.15), rgba(255,255,255,0.15)),
        0 8px 16px light-dark(rgba(0,0,0,0.15), rgba(255,255,255,0.15));

    /* Transitions */

    --mdlr-transition-resize: all 0.3s ease-in-out allow-discrete,
        inset 0s;
    --mdlr-transition-elevate: all 0.2s ease-out allow-discrete,
        inset 0s;
    --mdlr-transition-change: all 0.1s ease-out allow-discrete,
        inset 0s;
    --mdlr-transition-click: all 0.025s ease-out allow-discrete,
        inset 0s;

    /* Width */

    --mdlr-width-narrow: 160px;
    --mdlr-width-double: 320px;
    --mdlr-width-triple: 480px;
    --mdlr-width-text: 640px;
    --mdlr-width-full: 960px;
    --mdlr-width-wide: 1280px;
    --mdlr-width-ultrawide: 1600px;

    /* Spacing */

    --mdlr-spacing-radius: 10px;
    --mdlr-spacing-outlineradius: 7px;
    --mdlr-spacing-thin: 1px;
    --mdlr-spacing-medium: 2px;
    --mdlr-spacing-large: 3px;
    --mdlr-spacing-extralarge: 6px;
    --mdlr-spacing-margin: 2rem;
    --mdlr-spacing-padding-vertical: 10px;
    --mdlr-spacing-padding-horizontal: 15px;
    --mdlr-spacing-column: 6.35em;
}

/* Font files */

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-stretch: normal;
    font-weight: 100 900;
    src: url("../Fonts/inter-variable.woff2") format("woff2");
}

@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-display: swap;
    font-stretch: normal;
    font-weight: 100 900;
    src: url("../Fonts/inter-variable-italic.woff2") format("woff2");
}

/* Color scheme */

:root,
:root.mdlr-theme-light {
    color-scheme: light;
}

:root.mdlr-theme-dark {
    color-scheme: dark;
}

@media screen and (prefers-color-scheme: dark) {

    :root,
    :root.mdlr-theme-dark {
        color-scheme: dark;
    }

    :root.mdlr-theme-light {
        color-scheme: light;
    }
}


/*
## Quantum ####################################################################
*/

/* Basics */

* {
    transition: var(--mdlr-transition-resize);
    scrollbar-color: var(--mdlr-color-accent-intense) transparent;
    box-sizing: border-box;
}

html {
    font-family: var(--mdlr-font-main);
    font-feature-settings: var(--mdlr-font-main-features);
    font-size: var(--mdlr-font-main-size);
    font-weight: var(--mdlr-font-main-weight);
    line-height: var(--mdlr-font-main-height);
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-main);
    scroll-behavior: smooth;
    scroll-padding-top: calc(2.5 * var(--mdlr-spacing-margin));
}

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

    html {
        scroll-padding-top: var(--mdlr-spacing-margin);
    }
}

body,
p,
ul,
ol,
menu,
li,
dl,
dt,
dd,
table,
tr,
th,
td,
fieldset,
figure,
figcaption,
blockquote,
dialog {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

dialog {
    color: var(--mdlr-color-primary-main-text);
}

.typo3-adminPanel {
    margin-bottom: 0;
}

body {
    padding-top: calc(1.5 * var(--mdlr-spacing-margin));
}

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

    body {
        padding-top: 0;
        padding-bottom: calc(1.5 * var(--mdlr-spacing-margin));
    }
}

::selection {
    color: var(--mdlr-color-accent-main-text);
    background: var(--mdlr-color-accent-main);
}

::target-text {
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light);
}

@media (prefers-reduced-motion: reduce) {

    * {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

@view-transition {
    navigation: auto;
}

/* Inline */

strong {
    font-weight: var(--mdlr-font-main-emphasis);
}

cite {
    font-style: normal;
}

abbr {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: var(--mdlr-spacing-thin);
    text-decoration-color: var(--mdlr-color-accent-intense);
    text-underline-offset: var(--mdlr-spacing-large);
    cursor: help;
}

/* Link */

a {
    color: var(--mdlr-color-highlight-intense);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: var(--mdlr-spacing-thin);
    text-decoration-color: transparent;
    text-underline-offset: var(--mdlr-spacing-large);
    -webkit-tap-highlight-color: transparent;
    transition: var(--mdlr-transition-change);
}

.mdlr-attribution a,
h1.mdlr-variant-unobtrusive a,
h2.mdlr-variant-unobtrusive a,
h3.mdlr-variant-unobtrusive a,
h4.mdlr-variant-unobtrusive a,
h5.mdlr-variant-unobtrusive a,
h6.mdlr-variant-unobtrusive a {
    color: inherit;
}

a:hover,
.mdlr-attribution a:hover,
h1.mdlr-variant-unobtrusive a:hover,
h2.mdlr-variant-unobtrusive a:hover,
h3.mdlr-variant-unobtrusive a:hover,
h4.mdlr-variant-unobtrusive a:hover,
h5.mdlr-variant-unobtrusive a:hover,
h6.mdlr-variant-unobtrusive a:hover,
a.mdlr-variant-active {
    color: var(--mdlr-color-primary-main-text);
    text-decoration-color: var(--mdlr-color-accent-intense);
}

a:focus-visible,
.mdlr-attribution a:focus-visible,
h1.mdlr-variant-unobtrusive a:focus-visible,
h2.mdlr-variant-unobtrusive a:focus-visible,
h3.mdlr-variant-unobtrusive a:focus-visible,
h4.mdlr-variant-unobtrusive a:focus-visible,
h5.mdlr-variant-unobtrusive a:focus-visible,
h6.mdlr-variant-unobtrusive a:focus-visible,
a.mdlr-variant-active:focus-visible {
    border-radius: var(--mdlr-spacing-outlineradius);
    outline: var(--mdlr-color-accent-main) var(--mdlr-spacing-medium) solid;
    outline-offset: var(--mdlr-spacing-large);
}

a:active,
.mdlr-attribution a:active,
h1.mdlr-variant-unobtrusive a:active,
h2.mdlr-variant-unobtrusive a:active,
h3.mdlr-variant-unobtrusive a:active,
h4.mdlr-variant-unobtrusive a:active,
h5.mdlr-variant-unobtrusive a:active,
h6.mdlr-variant-unobtrusive a:active,
a.mdlr-variant-active:active {
    color: var(--mdlr-color-accent-intense);
    transition: var(--mdlr-transition-click);
}

a:active *,
a.mdlr-variant-active:active *,
a:active span,
a.mdlr-variant-active:active span {
    transition: var(--mdlr-transition-click);
}

/* Image */

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

/* Tacit */

.mdlr-variant-tacit {
    position: absolute !important;
    visibility: hidden !important;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
}

@media screen and (min-width: 901px) {

    .mdlr-variant-tacit-above-900 {
        position: absolute !important;
        visibility: hidden !important;
        display: block;
        overflow: hidden;
        width: 0;
        height: 0;
    }
}

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

    .mdlr-variant-tacit-below-900 {
        position: absolute !important;
        visibility: hidden !important;
        display: block;
        overflow: hidden;
        width: 0;
        height: 0;
    }
}

@media screen and (min-width: 601px) {

    .mdlr-variant-tacit-above-600 {
        position: absolute !important;
        visibility: hidden !important;
        display: block;
        overflow: hidden;
        width: 0;
        height: 0;
    }
}

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

    .mdlr-variant-tacit-below-600 {
        position: absolute !important;
        visibility: hidden !important;
        display: block;
        overflow: hidden;
        width: 0;
        height: 0;
    }
}


/*
## Atom #######################################################################
*/

/* Asset */

.mdlr-asset {
    display: none; /* Removed from DOM, also for screen readers */
}

/* Heading */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
    text-wrap: balance;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0;
}

h1,
h2 {
    font-family: var(--mdlr-font-heading);
    font-feature-settings: var(--mdlr-font-heading-features);
    font-size: var(--mdlr-font-heading-size);
    line-height: var(--mdlr-font-heading-height);
    font-weight: var(--mdlr-font-heading-weight);
    color: var(--mdlr-font-heading-color);
}

h3 {
    font-family: var(--mdlr-font-sectionheading);
    font-feature-settings: var(--mdlr-font-sectionheading-features);
    font-size: var(--mdlr-font-sectionheading-size);
    line-height: var(--mdlr-font-sectionheading-height);
    font-weight: var(--mdlr-font-sectionheading-weight);
    color: var(--mdlr-font-sectionheading-color);
}

h4,
h5,
h6 {
    font-family: var(--mdlr-font-subheading);
    font-feature-settings: var(--mdlr-font-subheading-features);
    font-size: var(--mdlr-font-subheading-size);
    line-height: var(--mdlr-font-subheading-height);
    font-weight: var(--mdlr-font-subheading-weight);
    color: var(--mdlr-font-subheading-color);
}

.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h1,
.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h2,
.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h3,
.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h4,
.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h5,
.mdlr-section:not(.mdlr-variant-headerbar):not(.mdlr-variant-title) h6 {
    margin-bottom: 0.85em;
}

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

    h1,
    h2 {
        font-size: var(--mdlr-font-heading-size-below-900);
        line-height: var(--mdlr-font-heading-height);
    }
}

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

    h1,
    h2 {
        font-size: var(--mdlr-font-heading-size-below-600);
        line-height: var(--mdlr-font-heading-height);
    }

    h3 {
        font-size: var(--mdlr-font-sectionheading-size-below-600);
        line-height: var(--mdlr-font-sectionheading-height);
    }
}

/* Image link */

a.mdlr-imagelink {
    display: flex;
    align-items: center;
    justify-content: center;
}

a.mdlr-imagelink.mdlr-variant-unobtrusive {
    filter: grayscale(1) opacity(0.65);
}

a.mdlr-imagelink:hover,
a.mdlr-imagelink.mdlr-variant-unobtrusive:hover {
    filter: none;
    transform: scale(1.05);
}

a.mdlr-imagelink:focus-visible,
a.mdlr-imagelink.mdlr-variant-unobtrusive:focus-visible {
    filter: none;
}

a.mdlr-imagelink:active,
a.mdlr-imagelink.mdlr-variant-unobtrusive:active {
    transform: scale(1.015);
}

a.mdlr-imagelink span,
a.mdlr-imagelink.mdlr-variant-unobtrusive span {
    position: absolute !important;
    visibility: hidden !important;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
}

/* Button, field, control */

label {
    display: block;
    cursor: pointer;
}

input,
textarea,
select,
button,
a.mdlr-button {
    font: inherit;
    text-decoration: none;
    text-align: left;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--mdlr-spacing-radius);
    box-sizing: content-box;
    box-shadow: var(--mdlr-shadow-regular);
    display: inline-block;
    vertical-align: middle;
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical)) calc(0.75 * var(--mdlr-spacing-padding-horizontal));
    transition: var(--mdlr-transition-elevate);
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
    filter: grayscale(0.95) opacity(0.75);
    cursor: auto;
}

input:disabled abbr,
textarea:disabled abbr,
select:disabled abbr,
button:disabled abbr {
    cursor: auto;
}

/* Button */

select,
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
a.mdlr-button {
    display: flex;
    color: var(--mdlr-color-highlight-main-text);
    background: var(--mdlr-color-highlight-main);
    border: none;
    cursor: pointer;
    overflow: hidden;
}

button.mdlr-variant-mini,
a.mdlr-button.mdlr-variant-mini {
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical)) calc(0.75 * var(--mdlr-spacing-padding-horizontal));
}

button.mdlr-variant-tiny,
a.mdlr-button.mdlr-variant-tiny {
    padding: calc(0.25 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

button.mdlr-variant-icon,
a.mdlr-button.mdlr-variant-icon {
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical));
}

button.mdlr-variant-miniicon,
a.mdlr-button.mdlr-variant-miniicon {
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical));
}

button.mdlr-variant-tinyicon,
a.mdlr-button.mdlr-variant-tinyicon {
    padding: calc(0.25 * var(--mdlr-spacing-padding-vertical));
}

button.mdlr-variant-texticon,
a.mdlr-button.mdlr-variant-texticon {
    display: flex;
}

select.mdlr-variant-light,
input[type="button"].mdlr-variant-light,
input[type="submit"].mdlr-variant-light,
input[type="reset"].mdlr-variant-light,
button.mdlr-variant-light,
a.mdlr-button.mdlr-variant-light {
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light);
    box-shadow: none;
}

select.mdlr-variant-overlay,
input[type="button"].mdlr-variant-overlay,
input[type="submit"].mdlr-variant-overlay,
input[type="reset"].mdlr-variant-overlay,
button.mdlr-variant-overlay,
a.mdlr-button.mdlr-variant-overlay {
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-translucent);
    -webkit-backdrop-filter: var(--mdlr-color-primary-translucent-filter);
    backdrop-filter: var(--mdlr-color-primary-translucent-filter);
    box-shadow: none;
}

select.mdlr-variant-transparent,
input[type="button"].mdlr-variant-transparent,
input[type="submit"].mdlr-variant-transparent,
input[type="reset"].mdlr-variant-transparent,
button.mdlr-variant-transparent,
a.mdlr-button.mdlr-variant-transparent {
    color: var(--mdlr-color-highlight-intense);
    background: transparent;
    box-shadow: none;
}

select.mdlr-variant-unobtrusive,
input[type="button"].mdlr-variant-unobtrusive,
input[type="submit"].mdlr-variant-unobtrusive,
input[type="reset"].mdlr-variant-unobtrusive,
button.mdlr-variant-unobtrusive,
a.mdlr-button.mdlr-variant-unobtrusive {
    color: inherit;
    background: transparent;
    box-shadow: none;
}

select.mdlr-variant-embedded,
input[type="button"].mdlr-variant-embedded,
input[type="submit"].mdlr-variant-embedded,
input[type="reset"].mdlr-variant-embedded,
button.mdlr-variant-embedded,
a.mdlr-button.mdlr-variant-embedded {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
    margin: -0.15em 0.1em 0 0.1em;
}

select.mdlr-variant-sidelined,
input[type="button"].mdlr-variant-sidelined,
input[type="submit"].mdlr-variant-sidelined,
input[type="reset"].mdlr-variant-sidelined,
button.mdlr-variant-sidelined,
a.mdlr-button.mdlr-variant-sidelined {
    float: right;
    margin: calc(0.75 * var(--mdlr-spacing-padding-vertical)) 0 0 calc(0.5 * var(--mdlr-spacing-padding-vertical));
}

select.mdlr-variant-tiny.mdlr-variant-sidelined,
select.mdlr-variant-tinyicon.mdlr-variant-sidelined,
input[type="button"].mdlr-variant-tiny.mdlr-variant-sidelined,
input[type="button"].mdlr-variant-tinyicon.mdlr-variant-sidelined,
input[type="submit"].mdlr-variant-tiny.mdlr-variant-sidelined,
input[type="submit"].mdlr-variant-tinyicon.mdlr-variant-sidelined,
input[type="reset"].mdlr-variant-tiny.mdlr-variant-sidelined,
input[type="reset"].mdlr-variant-tinyicon.mdlr-variant-sidelined,
button.mdlr-variant-tiny.mdlr-variant-sidelined,
button.mdlr-variant-tinyicon.mdlr-variant-sidelined,
a.mdlr-button.mdlr-variant-tiny.mdlr-variant-sidelined,
a.mdlr-button.mdlr-variant-tinyicon.mdlr-variant-sidelined {
    margin: calc(-0.25 * var(--mdlr-spacing-padding-vertical)) calc(-0.7 * var(--mdlr-spacing-padding-vertical)) calc(-0.3 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-vertical));
}

select:enabled:hover,
input[type="button"]:enabled:hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
button:enabled:hover,
a.mdlr-button:hover,
select.mdlr-variant-light:enabled:hover,
input[type="button"].mdlr-variant-light:enabled:hover,
input[type="submit"].mdlr-variant-light:enabled:hover,
input[type="reset"].mdlr-variant-light:enabled:hover,
button.mdlr-variant-light:enabled:hover,
a.mdlr-button.mdlr-variant-light:hover,
select.mdlr-variant-overlay:enabled:hover,
input[type="button"].mdlr-variant-overlay:enabled:hover,
input[type="submit"].mdlr-variant-overlay:enabled:hover,
input[type="reset"].mdlr-variant-overlay:enabled:hover,
button.mdlr-variant-overlay:enabled:hover,
a.mdlr-button.mdlr-variant-overlay:hover,
select.mdlr-variant-transparent:enabled:hover,
input[type="button"].mdlr-variant-transparent:enabled:hover,
input[type="submit"].mdlr-variant-transparent:enabled:hover,
input[type="reset"].mdlr-variant-transparent:enabled:hover,
button.mdlr-variant-transparent:enabled:hover,
a.mdlr-button.mdlr-variant-transparent:hover,
select.mdlr-variant-unobtrusive:enabled:hover,
input[type="button"].mdlr-variant-unobtrusive:enabled:hover,
input[type="submit"].mdlr-variant-unobtrusive:enabled:hover,
input[type="reset"].mdlr-variant-unobtrusive:enabled:hover,
button.mdlr-variant-unobtrusive:enabled:hover,
a.mdlr-button.mdlr-variant-unobtrusive:hover,
select.mdlr-variant-active:enabled:hover,
input[type="button"].mdlr-variant-active:enabled:hover,
input[type="submit"].mdlr-variant-active:enabled:hover,
input[type="reset"].mdlr-variant-active:enabled:hover,
button.mdlr-variant-active:enabled,
a.mdlr-button.mdlr-variant-active,
button.mdlr-variant-light.mdlr-variant-active:enabled,
a.mdlr-button.mdlr-variant-light.mdlr-variant-active {
    color: var(--mdlr-color-accent-main-text);
    background: var(--mdlr-color-accent-main);
    box-shadow: var(--mdlr-shadow-elevated);
}

select:enabled:focus-visible,
input[type="button"]:enabled:focus-visible,
input[type="submit"]:enabled:focus-visible,
input[type="reset"]:enabled:focus-visible,
button:enabled:focus-visible,
a.mdlr-button:focus-visible,
select.mdlr-variant-light:enabled:focus-visible,
input[type="button"].mdlr-variant-light:enabled:focus-visible,
input[type="submit"].mdlr-variant-light:enabled:focus-visible,
input[type="reset"].mdlr-variant-light:enabled:focus-visible,
button.mdlr-variant-light:enabled:focus-visible,
a.mdlr-button.mdlr-variant-light:focus-visible,
select.mdlr-variant-overlay:enabled:focus-visible,
input[type="button"].mdlr-variant-overlay:enabled:focus-visible,
input[type="submit"].mdlr-variant-overlay:enabled:focus-visible,
input[type="reset"].mdlr-variant-overlay:enabled:focus-visible,
button.mdlr-variant-overlay:enabled:focus-visible,
a.mdlr-button.mdlr-variant-overlay:focus-visible,
select.mdlr-variant-transparent:enabled:focus-visible,
input[type="button"].mdlr-variant-transparent:enabled:focus-visible,
input[type="submit"].mdlr-variant-transparent:enabled:focus-visible,
input[type="reset"].mdlr-variant-transparent:enabled:focus-visible,
button.mdlr-variant-transparent:enabled:focus-visible,
a.mdlr-button.mdlr-variant-transparent:focus-visible,
select.mdlr-variant-unobtrusive:enabled:focus-visible,
input[type="button"].mdlr-variant-unobtrusive:enabled:focus-visible,
input[type="submit"].mdlr-variant-unobtrusive:enabled:focus-visible,
input[type="reset"].mdlr-variant-unobtrusive:enabled:focus-visible,
button.mdlr-variant-unobtrusive:enabled:focus-visible,
a.mdlr-button.mdlr-variant-unobtrusive:focus-visible {
    border-radius: var(--mdlr-spacing-outlineradius);
    outline: var(--mdlr-color-accent-main) var(--mdlr-spacing-medium) solid;
    outline-offset: var(--mdlr-spacing-medium);
}

select:enabled:active,
input[type="button"]:enabled:active,
input[type="submit"]:enabled:active,
input[type="reset"]:enabled:active,
button:enabled:active,
a.mdlr-button:active,
select.mdlr-variant-light:enabled:active,
input[type="button"].mdlr-variant-light:enabled:active,
input[type="submit"].mdlr-variant-light:enabled:active,
input[type="reset"].mdlr-variant-light:enabled:active,
button.mdlr-variant-light:enabled:active,
a.mdlr-button.mdlr-variant-light:active,
select.mdlr-variant-overlay:enabled:active,
input[type="button"].mdlr-variant-overlay:enabled:active,
input[type="submit"].mdlr-variant-overlay:enabled:active,
input[type="reset"].mdlr-variant-overlay:enabled:active,
button.mdlr-variant-overlay:enabled:active,
a.mdlr-button.mdlr-variant-overlay:active,
select.mdlr-variant-transparent:enabled:active,
input[type="button"].mdlr-variant-transparent:enabled:active,
input[type="submit"].mdlr-variant-transparent:enabled:active,
input[type="reset"].mdlr-variant-transparent:enabled:active,
button.mdlr-variant-transparent:enabled:active,
a.mdlr-button.mdlr-variant-transparent:active,
select.mdlr-variant-unobtrusive:enabled:active,
input[type="button"].mdlr-variant-unobtrusive:enabled:active,
input[type="submit"].mdlr-variant-unobtrusive:enabled:active,
input[type="reset"].mdlr-variant-unobtrusive:enabled:active,
button.mdlr-variant-unobtrusive:enabled:active,
a.mdlr-button.mdlr-variant-unobtrusive:active {
    color: var(--mdlr-color-accent-dark-text);
    background: var(--mdlr-color-accent-dark);
    box-shadow: var(--mdlr-shadow-elevated);
    transition: var(--mdlr-transition-click);
}

button > span,
a.mdlr-button > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    transform: translateY(var(--mdlr-font-main-offset));
}

button.mdlr-variant-heavy > span,
a.mdlr-button.mdlr-variant-heavy > span {
    font-weight: var(--mdlr-font-main-heavy);
}

button:active > span,
a.mdlr-button:active > span {
    transition: var(--mdlr-transition-click);
}

button > span > strong,
a.mdlr-button > span > strong {
    margin-right: calc(0.35 * var(--mdlr-spacing-padding-horizontal));
}

button > span > span.mdlr-button-count,
a.mdlr-button > span > span.mdlr-button-count {
    margin-left: calc(0.25 * var(--mdlr-spacing-padding-horizontal));
    padding-left: 0.35em;
    padding-right: 0.35em;
    background: var(--mdlr-color-primary-main);
    color: var(--mdlr-color-primary-main-text);
    border-radius: var(--mdlr-spacing-radius);
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
}

button:hover > span > span.mdlr-button-count,
button:active > span > span.mdlr-button-count,
a.mdlr-button:hover > span > span.mdlr-button-count,
a.mdlr-button:active > span > span.mdlr-button-count {
    background: var(--mdlr-color-accent-light);
    color: var(--mdlr-color-accent-light-text);
}

button.mdlr-variant-icon > span,
a.mdlr-button.mdlr-variant-icon > span,
button.mdlr-variant-miniicon > span,
a.mdlr-button.mdlr-variant-miniicon > span,
button.mdlr-variant-tinyicon > span,
a.mdlr-button.mdlr-variant-tinyicon > span {
    position: absolute !important;
    visibility: hidden !important;
    width: 0;
    height: 0;
}

button:not(.mdlr-variant-light):not(.mdlr-variant-overlay):not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive) abbr,
a.mdlr-button:not(.mdlr-variant-light):not(.mdlr-variant-overlay):not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive) abbr {
    text-decoration-color: var(--mdlr-color-highlight-light);
}

button:enabled:hover abbr,
a.mdlr-button:hover abbr {
    text-decoration-color: var(--mdlr-color-accent-light) !important;
}

button:enabled:active abbr,
a.mdlr-button:active abbr {
    text-decoration-color: var(--mdlr-color-accent-dark) !important;
}

button svg,
a.mdlr-button svg {
    fill: currentColor;
    width: 1.5rem; /* 24px if root size is 16px */
    height: 1.5rem; /* 24px if root size is 16px */
    vertical-align: bottom;
    transition: var(--mdlr-transition-elevate);
}

button:enabled:active *,
a.mdlr-button:active * {
    transition: var(--mdlr-transition-click);
}

button:enabled.mdlr-variant-active svg,
a.mdlr-button.mdlr-variant-active svg {
    transform: rotate(180deg);
}

button.mdlr-variant-texticon svg:first-child,
a.mdlr-button.mdlr-variant-texticon svg:first-child {
    margin-left: -0.25em;
    margin-right: 0.25em;
}

button.mdlr-variant-texticon svg:last-child,
a.mdlr-button.mdlr-variant-texticon svg:last-child {
    margin-left: 0.25em;
    margin-right: -0.25em;
}

/* Field */

.mdlr-field > label:not(mdlr-variant-tacit) {
    transform: translateY(calc(-0.65 * var(--mdlr-spacing-padding-vertical)));
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
    width: 100%;
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-intense);
    border: none;
    border-bottom: var(--mdlr-spacing-medium) solid var(--mdlr-color-highlight-main);
    cursor: text;
    padding-top: calc(0.75 * var(--mdlr-spacing-padding-vertical) - 0.5 * var(--mdlr-spacing-medium));
    padding-bottom: calc(0.75 * var(--mdlr-spacing-padding-vertical) - 0.5 * var(--mdlr-spacing-medium));
}

textarea {
    height: 7.5em;
}

input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="month"]::placeholder,
input[type="week"]::placeholder,
textarea::placeholder {
    color: var(--mdlr-color-primary-intense-text);
    opacity: 1;
    transition: var(--mdlr-transition-elevate);
}

input[type="email"]:enabled:hover,
input[type="number"]:enabled:hover,
input[type="password"]:enabled:hover,
input[type="search"]:enabled:hover,
input[type="tel"]:enabled:hover,
input[type="text"]:enabled:hover,
input[type="url"]:enabled:hover,
input[type="date"]:enabled:hover,
input[type="time"]:enabled:hover,
input[type="datetime-local"]:enabled:hover,
input[type="month"]:enabled:hover,
input[type="week"]:enabled:hover,
textarea:enabled:hover {
    box-shadow: var(--mdlr-shadow-elevated);
}

input[type="email"]:enabled:focus-visible,
input[type="number"]:enabled:focus-visible,
input[type="password"]:enabled:focus-visible,
input[type="search"]:enabled:focus-visible,
input[type="tel"]:enabled:focus-visible,
input[type="text"]:enabled:focus-visible,
input[type="url"]:enabled:focus-visible,
input[type="date"]:enabled:focus-visible,
input[type="time"]:enabled:focus-visible,
input[type="datetime-local"]:enabled:focus-visible,
input[type="month"]:enabled:focus-visible,
input[type="week"]:enabled:focus-visible,
textarea:enabled:focus-visible {
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-intense);
    box-shadow: var(--mdlr-shadow-elevated);
    border-color: var(--mdlr-color-accent-main);
    outline: none;
    outline-offset: 0;
    padding-top: calc(0.75 * var(--mdlr-spacing-padding-vertical) - 0.5 * var(--mdlr-spacing-medium));
    padding-bottom: calc(0.75 * var(--mdlr-spacing-padding-vertical) - 0.5 * var(--mdlr-spacing-medium));
    transition: var(--mdlr-transition-click);
}

input[type="email"]:invalid,
input[type="number"]:invalid,
input[type="password"]:invalid,
input[type="search"]:invalid,
input[type="tel"]:invalid,
input[type="text"]:invalid,
input[type="url"]:invalid,
input[type="date"]:invalid,
input[type="time"]:invalid,
input[type="datetime-local"]:invalid,
input[type="month"]:invalid,
input[type="week"]:invalid,
textarea:invalid {
    border-color: var(--mdlr-color-attention-error) !important;
    outline: var(--mdlr-color-attention-error) var(--mdlr-spacing-medium) solid !important;
    outline-offset: var(--mdlr-spacing-medium) !important;
}

/* Control */

.mdlr-control {
    display: flex;
    justify-content: left;
    flex-direction: row-reverse;
    align-items: center;
    gap: calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

input[type="checkbox"],
input[type="radio"],
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    border-radius: 1.5em;
    box-shadow: none;
    line-height: 0;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--mdlr-color-accent-main) var(--mdlr-spacing-medium) solid;
    outline-offset: var(--mdlr-spacing-medium);
}

input[type="checkbox"]::after,
input[type="radio"]::after {
    clear: both;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.875em;
    height: 1.875em;
    background: var(--mdlr-color-highlight-light);
    border-radius: 1.5em;
    transition: var(--mdlr-transition-elevate);
}

input[type="checkbox"]:hover::after,
input[type="radio"]:hover::after {
    background: var(--mdlr-color-accent-main);
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
    background: var(--mdlr-color-highlight-main);
}

input[type="checkbox"]::before,
input[type="radio"]::before {
    content: '';
    display: block;
    position: absolute;
    width: 1.125em;
    height: 1.125em;
    left: 0.375em;
    top: 0.375em;
    background: var(--mdlr-color-highlight-main-text);
    box-shadow: var(--mdlr-shadow-flat);
    transition: var(--mdlr-transition-elevate);
    border-radius: 1.5em;
    transform: scale(0);
}

input[type="checkbox"]:hover::before,
input[type="radio"]:hover::before {
    background: var(--mdlr-color-accent-main-text);
    box-shadow: var(--mdlr-shadow-regular);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    transform: scale(1);
    background: var(--mdlr-color-highlight-main-text);
    box-shadow: var(--mdlr-shadow-regular);
}

/* Control: checkbox */

input[type="checkbox"]:not(.mdlr-variant-switch) {
    border-radius: var(--mdlr-spacing-radius);
}

input[type="checkbox"]:not(.mdlr-variant-switch)::after {
    border-radius: var(--mdlr-spacing-radius);
}

input[type="checkbox"]:not(.mdlr-variant-switch)::before {
    border-radius: 0;
    clip-path: polygon(14% 45%, 0% 65%, 50% 100%, 100% 12%, 81% 0, 42% 65%);
}

/* Control: switch */

input[type="checkbox"].mdlr-variant-switch::after {
    width: 3em;
}

input[type="checkbox"].mdlr-variant-switch::before {
    width: 1.25em;
    height: 1.25em;
    left: 0.3125em;
    top: 0.3125em;
    transform: none;
}

input[type="checkbox"].mdlr-variant-switch:checked::before {
    transform: translateX(1.125em);
}

/* Control: radio */

.mdlr-control:has(input[type="radio"]) + .mdlr-control:has(input[type="radio"]) {
    margin-top: calc(-0.5 * var(--mdlr-spacing-margin));
}

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

    .mdlr-control:has(input[type="radio"]) + .mdlr-control:has(input[type="radio"]) {
        margin-top: calc(-0.375 * var(--mdlr-spacing-margin));
    }
}

/* Control: color */

input[type="color"] {
    position: unset;
}

input[type="color"],
input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-webkit-color-swatch {
    padding: 0;
    width: 1.875em;
    height: 1.875em;
    border-radius: var(--mdlr-spacing-radius);
    border: none;
    background: transparent;
}

input[type="color"]::-moz-color-swatch {
    padding: 0;
    width: 1.875em;
    height: 1.875em;
    border-radius: var(--mdlr-spacing-radius);
    border: none;
}

input[type="color"]:focus-visible {
    outline: var(--mdlr-color-accent-main) var(--mdlr-spacing-medium) solid;
    outline-offset: var(--mdlr-spacing-medium);
}

/* Note */

p.mdlr-note {
    text-align: center;
    color: var(--mdlr-color-primary-intense-text);
    text-wrap: balance;
    margin-top: 1.15em;
}

/* Attribution */

p.mdlr-attribution {
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
    color: var(--mdlr-color-primary-intense-text);
    transition: var(--mdlr-transition-change);
    text-wrap: balance;
    -webkit-hyphens: auto;
    hyphens: auto;
}

p.mdlr-attribution.mdlr-variant-highlight {
    color: var(--mdlr-color-highlight-intense);
}

p.mdlr-attribution.mdlr-variant-emphasis {
    font-weight: var(--mdlr-font-main-emphasis);
}

p.mdlr-attribution.mdlr-variant-compact {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Count */

.mdlr-count {
    display: inline-block;
    padding: 0 0.35em;
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light);
    border-radius: var(--mdlr-spacing-radius);
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
}

/* Info button */

aside.mdlr-info[popover] {
    visibility: hidden;
    opacity: 0;
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical)) calc(0.75 * var(--mdlr-spacing-padding-horizontal));
    max-width: 20em;
    max-height: 30em;
    background: var(--mdlr-color-primary-intense);
    border: none;
    overflow-y: auto;
    border-radius: var(--mdlr-spacing-radius);
    box-shadow: var(--mdlr-shadow-regular);
    inset: auto;
    transition: var(--mdlr-transition-elevate);
    transform: translateY(calc(-0.5 * var(--mdlr-spacing-padding-vertical)));
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
}

aside.mdlr-info[popover]:popover-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(calc(0.5 * var(--mdlr-spacing-padding-vertical)));
}

@starting-style { /* Makes sure the transition is fired despite changing the display property */

    aside.mdlr-info[popover]:popover-open {
        visibility: hidden;
        opacity: 0;
        transform: translateY(calc(-0.5 * var(--mdlr-spacing-padding-vertical)));
    }
}

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

    aside.mdlr-info[popover],
    aside.mdlr-info.mdlr-variant-right[popover] {
        inset: 0 !important;
        transform: scale(0.9);
        max-width: 100%;
        max-height: calc(100% - var(--mdlr-spacing-padding-vertical) - 2 * var(--mdlr-spacing-margin)); /* Margin allows users to dismiss the popover without selecting an item */
        margin: auto;
    }

    aside.mdlr-info[popover]::backdrop,
    aside.mdlr-info.mdlr-variant-right[popover]::backdrop {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: none;
        transition: var(--mdlr-transition-click);
    }

    aside.mdlr-info[popover]:popover-open,
    aside.mdlr-info.mdlr-variant-right[popover]:popover-open {
        inset: 0 !important;
        transform: scale(1);
    }

    aside.mdlr-info[popover]:popover-open::backdrop,
    aside.mdlr-info.mdlr-variant-right[popover]:popover-open::backdrop {
        background: var(--mdlr-color-primary-translucent);
        -webkit-backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        backdrop-filter: var(--mdlr-color-primary-translucent-filter);
    }

    @starting-style { /* Makes sure the transition is fired despite changing the display property */

        aside.mdlr-info[popover]:popover-open,
        aside.mdlr-info.mdlr-variant-right[popover]:popover-open {
            inset: 0 !important;
            transform: scale(0.9);
        }

        aside.mdlr-info[popover]:popover-open::backdrop,
        aside.mdlr-info.mdlr-variant-right[popover]:popover-open::backdrop {
            background: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }
}


/*
## Molecule ###################################################################
*/

/* Empty state */

.mdlr-empty {
    margin: 0 auto;
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    max-width: calc(2.5 * var(--mdlr-width-narrow));
    text-align: center;
}

.mdlr-empty > svg {
    margin: 0 auto;
    max-width: var(--mdlr-width-narrow);
    fill: var(--mdlr-color-highlight-intense);
}

.mdlr-empty > p {
    margin-top: calc(1.5 * var(--mdlr-spacing-padding-vertical));
    color: var(--mdlr-color-primary-intense-text);
    text-align: inherit;
    text-wrap: balance;
}

/* Logo */

.mdlr-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

.mdlr-logo.mdlr-variant-back {
    flex-direction: row-reverse;
    gap: var(--mdlr-spacing-extralarge);
}

/* Title */

.mdlr-title {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
        'c'
        'a'
        'b';
}

p.mdlr-title-subheading,
p.mdlr-title-context {
    text-align: center;
    text-wrap: balance;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.mdlr-title > h2 {
    grid-area: a;
}

p.mdlr-title-subheading {
    grid-area: b;
    font-family: var(--mdlr-font-subheading);
    font-feature-settings: var(--mdlr-font-subheading-features);
    font-size: var(--mdlr-font-subheading-size);
    line-height: var(--mdlr-font-subheading-height);
    font-weight: var(--mdlr-font-subheading-weight);
    color: var(--mdlr-font-subheading-color);
    margin-top: var(--mdlr-spacing-padding-vertical);
}

p.mdlr-title-context {
    grid-area: c;
    font-weight: var(--mdlr-font-main-emphasis);
    color: var(--mdlr-color-primary-intense-text);
    margin-bottom: calc(1.25 * var(--mdlr-spacing-padding-vertical));
}

.mdlr-title h1,
.mdlr-title h2,
.mdlr-title h3,
.mdlr-title h4,
.mdlr-title h5,
.mdlr-title h6 {
    margin-bottom: 0 !important;
}

.mdlr-title + nav {
    margin-top: calc(0.85 * var(--mdlr-spacing-margin));
    margin-bottom: calc(-0.85 * var(--mdlr-spacing-margin));
}

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

    .mdlr-title + nav {
    margin-top: calc(0.65 * var(--mdlr-spacing-margin));
    margin-bottom: calc(-0.6 * var(--mdlr-spacing-margin));
    }
}

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

    .mdlr-title + nav {
        margin-top: calc(0.5 * var(--mdlr-spacing-margin));
    }
}

/* Link row, image row, button row */

menu.mdlr-linkrow,
ul.mdlr-imagerow,
menu.mdlr-buttonrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
}

/* Link row */

menu.mdlr-linkrow {
    gap: 0 var(--mdlr-spacing-padding-horizontal);
    justify-content: center;
}

/* Image row */

ul.mdlr-imagerow {
    gap: calc(0.55 * var(--mdlr-spacing-margin)) calc(1.15 * var(--mdlr-spacing-margin));
    justify-content: center;
}

/* Button row */

menu.mdlr-buttonrow {
    gap: calc(0.5 * var(--mdlr-spacing-padding-vertical)) var(--mdlr-spacing-thin);
    width: fit-content;
    max-width: 100%;
    margin: auto;

}

menu.mdlr-buttonrow[hidden] {
    display: none;
}

menu.mdlr-buttonrow.mdlr-variant-separate {
    gap: var(--mdlr-spacing-extralarge);
}

menu.mdlr-buttonrow.mdlr-variant-nowrap {
    flex-wrap: nowrap;
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate) > * > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive),
menu.mdlr-buttonrow:not(.mdlr-variant-separate) > * > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive) {
    border-radius: 0;
    box-shadow: none;
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate) > *:first-of-type > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive),
menu.mdlr-buttonrow:not(.mdlr-variant-separate) > *:first-of-type > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive) {
    border-top-left-radius: var(--mdlr-spacing-radius);
    border-bottom-left-radius: var(--mdlr-spacing-radius);
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate) > *:last-of-type > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive),
menu.mdlr-buttonrow:not(.mdlr-variant-separate) > *:last-of-type > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive) {
    border-top-right-radius: var(--mdlr-spacing-radius);
    border-bottom-right-radius: var(--mdlr-spacing-radius);
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)),
menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)) {
    box-shadow: var(--mdlr-shadow-regular);
    flex-wrap: nowrap;
    justify-content: start;
    overflow-x: auto;
    border-radius: var(--mdlr-spacing-radius);
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):focus-within,
menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):focus-within {
    overflow: visible;
}

menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):hover,
menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):hover,
menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > a.mdlr-button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):focus-within,
menu.mdlr-buttonrow:not(.mdlr-variant-separate):has(> * > button:not(.mdlr-variant-transparent):not(.mdlr-variant-unobtrusive):not(.mdlr-variant-light)):focus-within {
    box-shadow: var(--mdlr-shadow-elevated);
}

/* Viewswitcher */

menu.mdlr-viewswitcher {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

menu.mdlr-viewswitcher > li {
    overflow: hidden;
}

menu.mdlr-viewswitcher > li > a {
    position: relative;
    display: block;
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
    color: var(--mdlr-color-primary-main-text);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: '.';
    overflow: hidden;
}

menu.mdlr-viewswitcher > li > a:hover,
menu.mdlr-viewswitcher > li > a:active {
    color: var(--mdlr-color-primary-main-text);
}

menu.mdlr-viewswitcher > li > a.mdlr-variant-active {
    font-weight: var(--mdlr-font-main-emphasis);
}

menu.mdlr-viewswitcher > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.75em;
    width: 1.5em;
    border: calc(0.5 * var(--mdlr-spacing-large)) solid transparent;
    border-radius: calc(0.5 * var(--mdlr-spacing-large));
    transition: var(--mdlr-transition-change);
}

menu.mdlr-viewswitcher > li > a:hover::after {
    border-color: var(--mdlr-color-accent-main);
}

menu.mdlr-viewswitcher > li > a:active::after {
    border-color: var(--mdlr-color-accent-dark);
    transition: var(--mdlr-transition-click);
}

menu.mdlr-viewswitcher > li > a.mdlr-variant-active::after {
    border-color: var(--mdlr-color-highlight-main);
}

menu.mdlr-viewswitcher > li > a:focus-visible::after {
    border-color: var(--mdlr-color-highlight-dark);
}

menu.mdlr-viewswitcher > li > a > svg {
    fill: currentColor;
    width: 1.5rem; /* 24px if root size is 16px */
    height: 1.5rem; /* 24px if root size is 16px */
    vertical-align: bottom;
    transition: var(--mdlr-transition-change);
    margin: 0 auto;
    display: none;
}

menu.mdlr-viewswitcher > li > a:hover > svg {
    fill: var(--mdlr-color-accent-intense);
}

menu.mdlr-viewswitcher > li > a:active > svg {
    fill: var(--mdlr-color-accent-dark);
    transition: var(--mdlr-transition-click);
}

menu.mdlr-viewswitcher > li > a.mdlr-variant-active > svg {
    fill: var(--mdlr-color-highlight-intense);
}

menu.mdlr-viewswitcher > li > a:focus-visible > svg {
    fill: var(--mdlr-color-highlight-dark);
}

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

    menu.mdlr-viewswitcher {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: var(--mdlr-color-primary-translucent);
        -webkit-backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        box-shadow: var(--mdlr-shadow-flat);
        padding: calc(0.15 * var(--mdlr-spacing-padding-vertical)) calc(0.35 * var(--mdlr-spacing-padding-horizontal));
        justify-content: space-evenly;
        overflow-x: auto;
        transition: var(--mdlr-transition-elevate);
        z-index: 10000;
    }

    menu.mdlr-viewswitcher:hover {
        box-shadow: var(--mdlr-shadow-regular);
    }

    menu.mdlr-viewswitcher > li {
        display: inline-block;
    }

    menu.mdlr-viewswitcher > li > a::after {
        margin-top: 1.6em;
    }

    menu.mdlr-viewswitcher > li > a > svg {
        display: block;
    }
}

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

    menu.mdlr-viewswitcher {
        font-size: calc(0.65 * var(--mdlr-font-main-size));
        line-height: var(--mdlr-font-main-height);
    }

    menu.mdlr-viewswitcher > li > a::after {
        margin-top: 1.7em;
    }
}

/* Pills */

ul.mdlr-pills {
    display: flex;
    gap: var(--mdlr-spacing-extralarge);
    flex-wrap: wrap;
    justify-content: center;
}

ul.mdlr-pills > li {
    display: flex;
    flex-direction: row-reverse;
    max-width: 100%;
}

ul.mdlr-pills > li > a {
    display: block;
    padding: calc(0.3 * var(--mdlr-spacing-padding-vertical)) calc(0.6 * var(--mdlr-spacing-padding-horizontal));
    border-radius: var(--mdlr-spacing-radius);
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light);
    text-decoration: none;
    flex-shrink: 1;
    overflow: hidden;
}

ul.mdlr-pills > li > a:last-child:not(:first-child) { /* First item in chain */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: calc(0.85 * var(--mdlr-spacing-padding-horizontal));
}

ul.mdlr-pills > li > a:not(:first-child):not(:last-child) { /* Intermediate item in chain */
    border-radius: 0;
    padding-left: calc(0.85 * var(--mdlr-spacing-padding-horizontal));
    padding-right: calc(0.85 * var(--mdlr-spacing-padding-horizontal));
}

ul.mdlr-pills > li > a:first-child:not(:last-child) { /* Last item in chain */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: calc(0.85 * var(--mdlr-spacing-padding-horizontal));
}

ul.mdlr-pills > li > a:not(:first-child):not(:last-child)::before,
ul.mdlr-pills > li > a:first-child:not(:last-child)::before {
    content: '›';
    position: absolute;
    margin-left: calc(-0.85 * var(--mdlr-spacing-padding-horizontal) - 0.125em);
    margin-top: calc(-0.175em);
    transform: scale(1.75);
    color: var(--mdlr-color-highlight-intense);
}

ul.mdlr-pills.mdlr-variant-compact > li > a {
    max-width: 6.5em;
}

ul.mdlr-pills > li > a:hover {
    color: var(--mdlr-color-accent-main-text);
    background: var(--mdlr-color-accent-main);
}

ul.mdlr-pills > li > a:focus-visible {
    outline: var(--mdlr-color-accent-main) var(--mdlr-spacing-medium) solid;
    outline-offset: var(--mdlr-spacing-medium);
}

ul.mdlr-pills > li > a:active {
    color: var(--mdlr-color-accent-dark-text);
    background: var(--mdlr-color-accent-dark);
    transition: var(--mdlr-transition-click);
}

ul.mdlr-pills > li > a > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mdlr-content + ul.mdlr-pills {
    margin: var(--mdlr-spacing-margin) auto;
}

.mdlr-content + ul.mdlr-pills:last-child {
    margin-bottom: 0;
}

/* Boxed data and list */

dl.mdlr-boxeddata,
ul.mdlr-boxedlist {
    width: 100%;
    height: min-content;
    overflow: hidden;
    max-height: 100%;
    max-width: var(--mdlr-width-text);
    margin: 0 auto;
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-intense);
    border-radius: var(--mdlr-spacing-radius);
    border-bottom: var(--mdlr-color-highlight-main) solid var(--mdlr-spacing-medium);
    box-shadow: var(--mdlr-shadow-regular);
    transition: var(--mdlr-transition-elevate);
}

dl.mdlr-boxeddata:hover,
ul.mdlr-boxedlist:hover {
    box-shadow: var(--mdlr-shadow-elevated);
}

dl.mdlr-boxeddata {
    display: table;
}

dl.mdlr-boxeddata > div,
ul.mdlr-boxedlist > li {
    transition: var(--mdlr-transition-elevate);
}

dl.mdlr-boxeddata > div {
    display: table-row;
}

dl.mdlr-boxeddata > div:first-child,
ul.mdlr-boxedlist > li:first-child {
    border-top-left-radius: var(--mdlr-spacing-radius);
    border-top-right-radius: var(--mdlr-spacing-radius);
}

dl.mdlr-boxeddata > div:last-child,
ul.mdlr-boxedlist > li:last-child {
    border-bottom-left-radius: var(--mdlr-spacing-radius);
    border-bottom-right-radius: var(--mdlr-spacing-radius);
}

dl.mdlr-boxeddata > div:hover,
ul.mdlr-boxedlist > li:hover {
    background: var(--mdlr-color-primary-more);
}

dl.mdlr-boxeddata > div > dt,
dl.mdlr-boxeddata > div > dd,
ul.mdlr-boxedlist > li {
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal) var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    border-bottom: var(--mdlr-spacing-thin) solid var(--mdlr-color-primary-less);
    text-wrap: balance;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
}

dl.mdlr-boxeddata > div > dt,
dl.mdlr-boxeddata > div > dd {
    display: table-cell;
}

dl.mdlr-boxeddata > div > dt {
    padding-right: 0;
    width: var(--mdlr-spacing-column);
    font-weight: var(--mdlr-font-main-emphasis);
    text-align: right;
}

dl.mdlr-boxeddata > div > dd {
    width: calc(100% - var(--mdlr-spacing-column));
}

dl.mdlr-boxeddata.mdlr-variant-space > div > dt,
dl.mdlr-boxeddata.mdlr-variant-space > div > dd,
ul.mdlr-boxedlist.mdlr-variant-space > li {
    padding-top: calc(1.5 * var(--mdlr-spacing-padding-vertical));
    padding-bottom: calc(1.5 * var(--mdlr-spacing-padding-vertical));
}

dl.mdlr-boxeddata > div:last-child > dt,
dl.mdlr-boxeddata > div:last-child > dd,
ul.mdlr-boxedlist > li:last-child {
    border-bottom: none;
}

dl.mdlr-boxeddata > div > dd > span,
ul.mdlr-boxedlist > li > span {
    display: block;
}

dl.mdlr-boxeddata > div > dd > *:not(:first-child),
dl.mdlr-boxeddata > div > dd > ul > li:not(:first-child),
ul.mdlr-boxedlist > li > *:not(:first-child),
ul.mdlr-boxedlist > li > ul > li:not(:first-child) {
    margin-top: calc(0.5 * var(--mdlr-spacing-padding-vertical));
}

dl.mdlr-boxeddata.mdlr-variant-compact > div > dd > *:not(:first-child),
dl.mdlr-boxeddata.mdlr-variant-compact > div > dd > ul > li:not(:first-child) {
    margin-top: 0;
}

dl.mdlr-boxeddata > div > dd > .mdlr-boxeddata-detail,
ul.mdlr-boxedlist > li > .mdlr-boxedlist-detail {
    color: var(--mdlr-color-primary-intense-text);
}

dl.mdlr-boxeddata > div > dd > menu.mdlr-buttonrow {
    justify-content: left;
    margin: auto auto auto 0;
    margin-top: calc(-0.5 * var(--mdlr-spacing-padding-vertical));
    margin-bottom: calc(-0.5 * var(--mdlr-spacing-padding-vertical));
}

dl.mdlr-boxeddata > div.mdlr-boxeddata-addition {
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal) calc(var(--mdlr-spacing-padding-vertical) + 1px) var(--mdlr-spacing-padding-horizontal);
    border-top: var(--mdlr-spacing-thin) solid var(--mdlr-color-primary-less);
}

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

    dl.mdlr-boxeddata > div {
        display: flex;
        flex-wrap: wrap;
    }
    
    dl.mdlr-boxeddata > div > dt,
    dl.mdlr-boxeddata > div > dd {
        display: block;
        width: 100%;
    }
    
    dl.mdlr-boxeddata > div > dt {
        border-bottom: none;
        text-align: left;
        padding-bottom: 0;
    }

    dl.mdlr-boxeddata.mdlr-variant-space > div > dt {
        padding-top: var(--mdlr-spacing-padding-vertical);
    }

    dl.mdlr-boxeddata > div > dd,
    dl.mdlr-boxeddata.mdlr-variant-space > div > dd {
        padding-top: calc(0.5 * var(--mdlr-spacing-padding-vertical));
    }
}

/* Boxed record */

article.mdlr-boxedrecord {
    display: flex;
    overflow: hidden;
    text-decoration: none;
    max-height: 100%;
    max-width: var(--mdlr-width-text);
    margin: 0 auto;
    color: var(--mdlr-color-primary-main-text);
    background: var(--mdlr-color-primary-intense);
    border-radius: var(--mdlr-spacing-radius);
    border-bottom: var(--mdlr-color-highlight-main) solid var(--mdlr-spacing-medium);
    box-shadow: var(--mdlr-shadow-regular);
    transition: var(--mdlr-transition-elevate);
}

article.mdlr-boxedrecord:hover {
    background: var(--mdlr-color-primary-more);
    box-shadow: var(--mdlr-shadow-elevated);
}

article.mdlr-boxedrecord > img {
    width: auto;
    max-width: 7.75em;
    height: 7.75em;
    object-fit: cover;
    border-radius: var(--mdlr-spacing-radius);
}

article.mdlr-boxedrecord > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    gap: calc(0.5 * var(--mdlr-spacing-padding-vertical));
    min-width: 0; /* Fixes issues with text-overflow in child elements */
}

article.mdlr-boxedrecord > div > * {
    display: block;
    -webkit-hyphens: auto;
    hyphens: auto;
}

article.mdlr-boxedrecord > div > *.mdlr-boxedrecord-context {
    color: var(--mdlr-color-primary-intense-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

article.mdlr-boxedrecord > div > *.mdlr-boxedrecord-title {
    color: var(--mdlr-color-primary-main-text);
    font-weight: var(--mdlr-font-main-emphasis);
    overflow: hidden;
}

article.mdlr-boxedrecord:not(.mdlr-variant-title) > div > *.mdlr-boxedrecord-title {
    white-space: nowrap;
    text-overflow: ellipsis;
}

article.mdlr-boxedrecord.mdlr-variant-title > div > *.mdlr-boxedrecord-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

article.mdlr-boxedrecord > div > *.mdlr-boxedrecord-description {
    color: var(--mdlr-color-primary-main-text);
    overflow: hidden;
}

article.mdlr-boxedrecord:not(.mdlr-variant-title) > div > *.mdlr-boxedrecord-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

article.mdlr-boxedrecord.mdlr-variant-title > div > *.mdlr-boxedrecord-description {
    white-space: nowrap;
    text-overflow: ellipsis;
}

article.mdlr-boxedrecord + article.mdlr-boxedrecord {
    margin-top: var(--mdlr-spacing-padding-vertical);
}

/* Search */

.mdlr-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-form.mdlr-variant-compact .mdlr-search {
    gap: 0;
}

.mdlr-search > input[type="search"] {
    flex: 1 1;
}

/* Dropdown */

menu.mdlr-dropdown[popover] {
    visibility: hidden;
    opacity: 0;
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical)) 0;
    max-width: 20em;
    max-height: 30em;
    background: var(--mdlr-color-primary-intense);
    border: none;
    overflow-y: auto;
    border-radius: var(--mdlr-spacing-radius);
    box-shadow: var(--mdlr-shadow-elevated);
    inset: auto;
    transition: var(--mdlr-transition-elevate);
    transform: translateY(calc(-0.5 * var(--mdlr-spacing-padding-vertical)));
}

menu.mdlr-dropdown[popover]:popover-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(calc(0.5 * var(--mdlr-spacing-padding-vertical)));
}

menu.mdlr-dropdown.mdlr-variant-up[popover] {
    transform: translateY(calc(0.5 * var(--mdlr-spacing-padding-vertical)));
}

menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open {
    transform: translateY(calc(-0.5 * var(--mdlr-spacing-padding-vertical)));
}

@starting-style { /* Makes sure the transition is fired despite changing the display property */

    menu.mdlr-dropdown[popover]:popover-open {
        visibility: hidden;
        opacity: 0;
        transform: translateY(calc(-0.5 * var(--mdlr-spacing-padding-vertical)));
    }

    menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open {
        transform: translateY(calc(0.5 * var(--mdlr-spacing-padding-vertical)));
    }
}

menu.mdlr-dropdown:not(.mdlr-variant-hierarchy):not(.mdlr-variant-select) li,
menu.mdlr-dropdown.mdlr-variant-hierarchy li > div,
menu.mdlr-dropdown.mdlr-variant-select li > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

menu.mdlr-dropdown.mdlr-variant-hierarchy menu {
    padding-left: calc(0.5 * (var(--mdlr-spacing-padding-vertical) + var(--mdlr-font-main-height)));
}

menu.mdlr-dropdown li.mdlr-variant-separate {
    margin-top: calc(0.5 * var(--mdlr-spacing-padding-vertical));
    border-top: var(--mdlr-color-primary-less) solid var(--mdlr-spacing-thin);
    padding-top: calc(0.5 * var(--mdlr-spacing-padding-vertical));
}

menu.mdlr-dropdown li button,
menu.mdlr-dropdown li a.mdlr-button {
    box-shadow: none !important;
}

menu.mdlr-dropdown li button:not(.mdlr-variant-miniicon),
menu.mdlr-dropdown li a.mdlr-button:not(.mdlr-variant-miniicon) {
    flex: 1 1;
}

menu.mdlr-dropdown li button:first-child,
menu.mdlr-dropdown li a.mdlr-button:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

menu.mdlr-dropdown.mdlr-variant-hierarchy menu li button:first-child,
menu.mdlr-dropdown.mdlr-variant-hierarchy menu li a.mdlr-button:first-child {
    border-top-left-radius: var(--mdlr-spacing-radius);
    border-bottom-left-radius: var(--mdlr-spacing-radius);
}

menu.mdlr-dropdown li button:last-child,
menu.mdlr-dropdown li a.mdlr-button:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

menu.mdlr-dropdown.mdlr-variant-hierarchy li button.mdlr-variant-miniicon:disabled:first-child,
menu.mdlr-dropdown.mdlr-variant-select li button.mdlr-variant-miniicon:disabled:first-child {
    cursor: default;
}

menu.mdlr-dropdown.mdlr-variant-hierarchy li button:enabled.mdlr-variant-active svg {
    transform: rotate(90deg);
}

menu.mdlr-dropdown.mdlr-variant-select li button:not(.mdlr-variant-active) {
    color: transparent;
}

menu.mdlr-dropdown.mdlr-variant-toc li button.mdlr-variant-indent-1:first-child span,
menu.mdlr-dropdown.mdlr-variant-toc li a.mdlr-button.mdlr-variant-indent-1:first-child span {
    padding-left: calc(0.75 * var(--mdlr-spacing-padding-horizontal));
}

menu.mdlr-dropdown.mdlr-variant-toc li button.mdlr-variant-indent-2:first-child span,
menu.mdlr-dropdown.mdlr-variant-toc li a.mdlr-button.mdlr-variant-indent-2:first-child span {
    padding-left: calc(1.5 * var(--mdlr-spacing-padding-horizontal));
}

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

    menu.mdlr-dropdown[popover],
    menu.mdlr-dropdown.mdlr-variant-up[popover],
    menu.mdlr-dropdown.mdlr-variant-right[popover] {
        inset: 0 !important;
        transform: scale(0.9);
        max-width: 100%;
        max-height: calc(100% - var(--mdlr-spacing-padding-vertical) - 2 * var(--mdlr-spacing-margin)); /* Margin allows users to dismiss the popover without selecting an item */
        margin: auto;
    }

    menu.mdlr-dropdown[popover]::backdrop,
    menu.mdlr-dropdown.mdlr-variant-up[popover]::backdrop,
    menu.mdlr-dropdown.mdlr-variant-right[popover]::backdrop {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: none;
        transition: var(--mdlr-transition-click);
    }

    menu.mdlr-dropdown[popover]:popover-open,
    menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open,
    menu.mdlr-dropdown.mdlr-variant-right[popover]:popover-open {
        inset: 0 !important;
        transform: scale(1);
    }

    menu.mdlr-dropdown[popover]:popover-open::backdrop,
    menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open::backdrop,
    menu.mdlr-dropdown.mdlr-variant-right[popover]:popover-open::backdrop {
        background: var(--mdlr-color-primary-translucent);
        -webkit-backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        backdrop-filter: var(--mdlr-color-primary-translucent-filter);
    }

    @starting-style { /* Makes sure the transition is fired despite changing the display property */

        menu.mdlr-dropdown[popover]:popover-open,
        menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open,
        menu.mdlr-dropdown.mdlr-variant-right[popover]:popover-open {
            inset: 0 !important;
            transform: scale(0.9);
        }

        menu.mdlr-dropdown[popover]:popover-open::backdrop,
        menu.mdlr-dropdown.mdlr-variant-up[popover]:popover-open::backdrop,
        menu.mdlr-dropdown.mdlr-variant-right[popover]:popover-open::backdrop {
            background: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }
}

/* Bibliography */

ul.mdlr-bibliography {
    font-size: var(--mdlr-font-main-larger);
    line-height: var(--mdlr-font-main-height);
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: var(--mdlr-width-text);
    margin: 0 auto;
}

ul.mdlr-bibliography > li {
    margin-left: 1em;
    text-indent: -1em;
    break-inside: avoid;
}

ul.mdlr-bibliography > li:not(:first-child) {
    margin-top: var(--mdlr-spacing-padding-vertical);
}


/*
## Organism ###################################################################
*/

/* Toolbar */

.mdlr-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    width: fit-content;
    margin: 0 auto;
}

.mdlr-toolbar > * {
    flex-shrink: 0 !important;
}

/* Toast */

dialog.mdlr-toast[popover] {
    --mdlr-component-toast: 0;
    visibility: hidden;
    opacity: 0;
    border: none;
    width: var(--mdlr-component-toast);
    max-width: calc(100% - 2 * var(--mdlr-spacing-margin));
    justify-content: center;
    align-items: center;
    color: var(--mdlr-color-primary-backdrop-text);
    background: var(--mdlr-color-primary-backdrop);
    -webkit-backdrop-filter: var(--mdlr-color-primary-backdrop-filter);
    backdrop-filter: var(--mdlr-color-primary-backdrop-filter);
    border-radius: var(--mdlr-spacing-radius);
    box-shadow: var(--mdlr-shadow-regular);
    overflow: hidden;
    transition: var(--mdlr-transition-elevate);
    margin: auto auto calc(0.5 * var(--mdlr-spacing-margin)) auto;
}

dialog.mdlr-toast[popover]:hover {
    box-shadow: var(--mdlr-shadow-elevated);
}

dialog.mdlr-toast[popover]:popover-open {
    --mdlr-component-toast: 380px;
    display: flex;
    transform: translateY(calc(-0.5 * var(--mdlr-spacing-margin)));
    visibility: visible;
    opacity: 1;
}

@starting-style { /* Makes sure the transition is fired despite changing the display property */

    dialog.mdlr-toast[popover]:popover-open {
        --mdlr-component-toast: 0;
        transform: none;
        visibility: hidden;
        opacity: 0;
    }
}

dialog.mdlr-toast[popover]::backdrop {
    background: transparent;
}

dialog.mdlr-toast > p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical)) calc(0.75 * var(--mdlr-spacing-padding-horizontal));
    flex: 1 1;
}

dialog.mdlr-toast > button {
    box-shadow: none !important;
}

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

    dialog.mdlr-toast[popover] {
        margin-bottom: calc(0.25 * var(--mdlr-spacing-margin));
    }

    dialog.mdlr-toast[popover]:popover-open {
        transform: translateY(calc(-0.25 * var(--mdlr-spacing-margin)));
    }

    @starting-style { /* Makes sure the transition is fired despite changing the display property */

        dialog.mdlr-toast[popover]:popover-open {
            margin-bottom: calc(0.25 * var(--mdlr-spacing-margin));
        }
    }
}

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

    dialog.mdlr-toast[popover] {
        max-width: calc(100% - var(--mdlr-spacing-margin));
    }
}

/* Form */

.mdlr-form {
    display: flex;
    flex-direction: column;
    gap: calc(0.75 * var(--mdlr-spacing-margin));
    margin: auto;
}

.mdlr-form-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(0.75 * var(--mdlr-spacing-margin));
}

.mdlr-form-split > *:first-child {
    justify-content: left;
}

.mdlr-form-split > *:last-child {
    justify-content: right;
}

.mdlr-form-split > *:first-child:last-child {
    flex: 1 1;
    justify-content: center;
}

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

    .mdlr-form {
        gap: calc(0.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-form-split {
        flex-direction: column;
        gap: calc(0.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-form-split > *:first-child,
    .mdlr-form-split > *:last-child {
        flex: 1 1;
        justify-content: center;
    }
}

/* Tiles */

.mdlr-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--mdlr-spacing-margin));
    justify-content: center;
}

.mdlr-tiles > article {
    width: 100%;
    transition: var(--mdlr-transition-elevate);
    border-radius: var(--mdlr-spacing-radius);
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    background: var(--mdlr-color-highlight-light-ultra);
    color: var(--mdlr-color-highlight-light-text);
    cursor: pointer;
    overflow: hidden;
}

.mdlr-tiles > article:hover {
    background: var(--mdlr-color-highlight-light);
    color: var(--mdlr-color-highlight-light-text);
}

.mdlr-tiles > article > figure {
    background: var(--mdlr-color-highlight-main);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mdlr-tiles.mdlr-variant-top > article > figure {
    height: 11.5em;
    width: calc(100% + 2 * var(--mdlr-spacing-padding-horizontal));
    margin: calc(-1 * var(--mdlr-spacing-padding-vertical)) calc(-1 * var(--mdlr-spacing-padding-horizontal)) var(--mdlr-spacing-padding-vertical) calc(-1 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-tiles.mdlr-variant-side > article > figure {
    float: left;
    height: calc(100% + 2 * var(--mdlr-spacing-padding-vertical));
    width: calc((100% + 2 * var(--mdlr-spacing-padding-horizontal)) / 3);
    margin: calc(-1 * var(--mdlr-spacing-padding-vertical)) var(--mdlr-spacing-padding-horizontal) calc(-1 * var(--mdlr-spacing-padding-vertical)) calc(-1 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-tiles > article > figure > img {
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    backdrop-filter: var(--mdlr-color-primary-translucent-filter);
    opacity: 0;
}

.mdlr-tiles > article:hover > figure > img {
    opacity: 1;
}

.mdlr-tiles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(0.5 * var(--mdlr-spacing-padding-vertical));
    margin-right: calc(var(--mdlr-spacing-padding-vertical) - var(--mdlr-spacing-padding-horizontal));
}

.mdlr-tiles-header > .mdlr-attribution {
    padding-right: var(--mdlr-spacing-padding-horizontal);
}

.mdlr-tiles-header > hr {
    flex: 1 1;
    border: none;
    border-bottom: var(--mdlr-spacing-medium) solid var(--mdlr-color-highlight-main);
}

.mdlr-tiles-header > .mdlr-buttonrow{
    padding-left: calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-tiles > article > h4 {
    margin-bottom: var(--mdlr-spacing-padding-vertical) !important;
    text-align: left;
}

.mdlr-tiles > article > .mdlr-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.mdlr-tiles > article > .mdlr-attribution {
    margin-top: calc(0.75 * var(--mdlr-spacing-padding-vertical));
}

@media screen and (min-width: 361px) {
    
    .mdlr-tiles {
        gap: calc(0.75 * var(--mdlr-spacing-margin));
    }
}

@media screen and (min-width: 601px) {
    
    .mdlr-tiles {
        gap: var(--mdlr-spacing-margin);
    }
}

@media screen and (min-width: 735px) {

    .mdlr-tiles > article {
        width: calc((100% - var(--mdlr-spacing-margin)) / 2);
    }
}

@media screen and (min-width: 1201px) {

    .mdlr-tiles > article {
        width: calc((100% - 2 * var(--mdlr-spacing-margin)) / 3);
    }
}

/* Details */

table.mdlr-details {
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
    border-collapse: separate;
    -webkit-hyphens: auto;
    hyphens: auto;
    width: 100%;
}

table.mdlr-details th,
table.mdlr-details td {
    text-align: left;
    vertical-align: middle;
    padding: calc(0.75 * var(--mdlr-spacing-padding-vertical)) calc(0.75 * var(--mdlr-spacing-padding-horizontal));
    white-space: nowrap;
    max-width: 15em;
}

table.mdlr-details th:nth-child(2),
table.mdlr-details td:nth-child(2) {
    padding: 0;
    width: 2.35em;
}

table.mdlr-details th:not(:nth-child(2)),
table.mdlr-details td:not(:nth-child(2)) {
    overflow: hidden;
}

table.mdlr-details th:nth-child(2) > *,
table.mdlr-details td:nth-child(2) > * {
    margin-right: calc(0.25 * var(--mdlr-spacing-padding-horizontal));
}

table.mdlr-details th,
table.mdlr-details td {
    transition: var(--mdlr-transition-elevate);
}

table.mdlr-details thead tr:first-child th:first-child,
table.mdlr-details thead tr:first-child td:first-child {
    border-top-left-radius: var(--mdlr-spacing-radius);
}

table.mdlr-details thead tr:first-child th:last-child,
table.mdlr-details thead tr:first-child td:last-child {
    border-top-right-radius: var(--mdlr-spacing-radius);
}

table.mdlr-details tbody tr:last-child th:first-child,
table.mdlr-details tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--mdlr-spacing-radius);
}

table.mdlr-details tbody tr:last-child th:last-child,
table.mdlr-details tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--mdlr-spacing-radius);
}

table.mdlr-details thead th:not(:first-child),
table.mdlr-details thead td:not(:first-child) {
    border-right: var(--mdlr-color-highlight-light) solid var(--mdlr-spacing-thin);
}

table.mdlr-details thead th:first-child,
table.mdlr-details thead td:first-child {
    border-left: var(--mdlr-color-highlight-light) solid var(--mdlr-spacing-thin);
}

table.mdlr-details tbody th:not(:first-child),
table.mdlr-details tbody td:not(:first-child) {
    border-right: var(--mdlr-color-primary-less) solid var(--mdlr-spacing-thin);
}

table.mdlr-details tbody th:first-child,
table.mdlr-details tbody td:first-child {
    border-left: var(--mdlr-color-primary-less) solid var(--mdlr-spacing-thin);
}

table.mdlr-details tbody tr:nth-child(even) th,
table.mdlr-details tbody tr:nth-child(even) td {
    background: var(--mdlr-color-primary-main);
}

table.mdlr-details tbody tr:hover th,
table.mdlr-details tbody tr:hover td {
    background: var(--mdlr-color-primary-more);
}

table.mdlr-details thead tr:first-child th,
table.mdlr-details thead tr:first-child td {
    border-top: var(--mdlr-color-highlight-light) solid var(--mdlr-spacing-thin);
}

table.mdlr-details tbody tr:last-child th,
table.mdlr-details tbody tr:last-child td {
    border-bottom: var(--mdlr-color-primary-less) solid var(--mdlr-spacing-thin);
}

table.mdlr-details tbody tr th,
table.mdlr-details tbody tr td {
    cursor: pointer;
}

table.mdlr-details thead th,
table.mdlr-details thead td {
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light-ultra);
    font-weight: var(--mdlr-font-main-emphasis);
}

table.mdlr-details thead tr:hover th,
table.mdlr-details thead tr:hover td {
    background: var(--mdlr-color-highlight-light);
}

table.mdlr-details th {
    font-weight: var(--mdlr-font-main-emphasis);
}

/* Definitions */

.mdlr-definitions > article {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-margin);
    margin: 0 auto;
    max-width: var(--mdlr-width-text);
    align-items: end;
    grid-template-areas:
        'a d'
        'b b'
        'c c';
}

.mdlr-definitions > article:not(:first-of-type) {
    margin-top: calc(0.75 * var(--mdlr-spacing-margin));
}

.mdlr-definitions > article > h4,
.mdlr-definitions > article > .mdlr-content p,
.mdlr-definitions > article > .mdlr-content ol,
.mdlr-definitions > article > .mdlr-content ul,
.mdlr-definitions > article > .mdlr-content dl,
.mdlr-definitions > article > .mdlr-content blockquote,
.mdlr-definitions > article > .mdlr-content pre {
    font-family: var(--mdlr-font-main);
    font-size: var(--mdlr-font-main-larger);
    line-height: var(--mdlr-font-main-height);
}

.mdlr-definitions > article > h4 {
    text-align: left;
    font-weight: var(--mdlr-font-main-heavy);
    margin-bottom: 0 !important;
    grid-area: a;
}

.mdlr-definitions > article > .mdlr-content {
    grid-area: b;
}

.mdlr-definitions > article > .mdlr-definitions-addition {
    display: flex;
    gap: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    justify-content: space-between;
    align-items: center;
    grid-area: c;
    margin-top: -0.24em;
    margin-bottom: -0.24em;
}

.mdlr-definitions > article > .mdlr-definitions-addition > button {
    flex-shrink: 0 !important;
}

.mdlr-definitions > article > .mdlr-pills {
    justify-content: right;
    grid-area: d;
}

@media screen and (min-width: 601px) {

    .mdlr-definitions > article:not(:first-of-type) {
        margin-top: var(--mdlr-spacing-margin);
    }
}

@media screen and (min-width: 901px) {

    .mdlr-definitions > article:not(:first-of-type) {
        margin-top: calc(1.25 * var(--mdlr-spacing-margin));
    }
}

@media screen and (min-width: 1201px) {

    .mdlr-definitions > article {
        max-width: none;
        grid-template-columns: minmax(0, calc((100% - var(--mdlr-width-text)) / 2 - var(--mdlr-spacing-margin))) var(--mdlr-width-text) minmax(0, calc((100% - var(--mdlr-width-text)) / 2 - var(--mdlr-spacing-margin)));
        grid-template-areas:
            'a b d'
            'a c d';
        align-items: start;
    }

    .mdlr-definitions > article > h4 {
        text-align: right;
        position: sticky;
        top: calc(2.25 * var(--mdlr-spacing-margin));
        margin-bottom: -0.075em !important;
    }

    .mdlr-definitions > article > .mdlr-pills {
        justify-content: left;
    }
}

/* Frame */

.mdlr-frame {
    border-radius: var(--mdlr-spacing-radius);
    min-height: 500px;
}

.maplibregl-map {
    font: inherit !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

.maplibregl-ctrl {
    margin: calc(0.5 * var(--mdlr-spacing-padding-vertical)) !important;
}

.maplibregl-ctrl + .maplibregl-ctrl {
    margin-top: 0 !important;
}

.maplibregl-ctrl-attrib a {
    color: var(--mdlr-color-highlight-intense) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: var(--mdlr-spacing-thin) !important;
    text-decoration-color: transparent !important;
}

.maplibregl-ctrl-attrib a:hover {
    color: var(--mdlr-color-primary-main-text) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: var(--mdlr-spacing-thin) !important;
    text-decoration-color: var(--mdlr-color-accent-intense) !important;
}

.maplibregl-ctrl-group {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Content */

.mdlr-content {
    overflow-wrap: break-word;
}

.mdlr-content > div:last-child::after {
    display: block;
    content: '';
    clear: both;
}

/* Content: paragraph and list */

.mdlr-content p,
.mdlr-content ol,
.mdlr-content ul,
.mdlr-content dl,
.mdlr-content blockquote,
.mdlr-content pre {
    margin: 0 auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.mdlr-content:not(.mdlr-variant-plain) p,
.mdlr-content:not(.mdlr-variant-plain) ol,
.mdlr-content:not(.mdlr-variant-plain) ul,
.mdlr-content:not(.mdlr-variant-plain) dl,
.mdlr-content:not(.mdlr-variant-plain) blockquote,
.mdlr-content:not(.mdlr-variant-plain) pre {
    font-size: var(--mdlr-font-main-larger);
    line-height: var(--mdlr-font-main-height);
}

.mdlr-content p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content ol,
.mdlr-content ul,
.mdlr-content dl,
.mdlr-content blockquote {
    max-width: var(--mdlr-width-text);
}

.mdlr-content .frame-indent p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content .frame-indent ol,
.mdlr-content .frame-indent ul,
.mdlr-content .frame-indent dl,
.mdlr-content .frame-indent blockquote,
.mdlr-content .frame-indent-left p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content .frame-indent-left ol,
.mdlr-content .frame-indent-left ul,
.mdlr-content .frame-indent-left blockquote,
.mdlr-content .frame-indent-right p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content .frame-indent-right ol,
.mdlr-content .frame-indent-right ul,
.mdlr-content .frame-indent-right blockquote {
    max-width: calc(var(--mdlr-width-text) - 3.5em);
}

.mdlr-content .frame-indent-left p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content .frame-indent-left ol,
.mdlr-content .frame-indent-left ul,
.mdlr-content .frame-indent-left dl,
.mdlr-content .frame-indent-left blockquote {
    padding-left: 3.5em;
}

.mdlr-content .frame-indent-right p:not(.ce-headline-right):not(.ce-headline-left),
.mdlr-content .frame-indent-right ol,
.mdlr-content .frame-indent-right ul,
.mdlr-content .frame-indent-right dl,
.mdlr-content .frame-indent-right blockquote {
    padding-right: 3.5em;
}

.mdlr-content > p:not(:first-child),
.mdlr-content > ol:not(:first-child),
.mdlr-content > ul:not(:first-child),
.mdlr-content > dl:not(:first-child),
.mdlr-content > blockquote:not(:first-child),
.mdlr-content > pre:not(:first-child),
.mdlr-content > div:first-child p:not(:first-child),
.mdlr-content > div:first-child ol:not(:first-child),
.mdlr-content > div:first-child ul:not(:first-child),
.mdlr-content > div:first-child dl:not(:first-child),
.mdlr-content > div:first-child blockquote:not(:first-child),
.mdlr-content > div:first-child pre:not(:first-child),
.mdlr-content > div:not(:first-child) p,
.mdlr-content > div:not(:first-child) ol,
.mdlr-content > div:not(:first-child) ul,
.mdlr-content > div:not(:first-child) dl,
.mdlr-content > div:not(:first-child) blockquote,
.mdlr-content > div:not(:first-child) pre {
    margin-top: 0.85em;
}

.mdlr-content blockquote > p:first-child,
.mdlr-content > div:first-child header:first-child + p,
.mdlr-content > div:first-child header:first-child + ol,
.mdlr-content > div:first-child header:first-child + ul,
.mdlr-content > div:first-child header:first-child + dl,
.mdlr-content > div:first-child header:first-child + blockquote,
.mdlr-content > div:first-child header:first-child + pre {
    margin-top: 0;
}

.mdlr-content p,
.mdlr-content p.text-start {
    text-align: left;
}

.mdlr-content p.text-justify {
    text-align: justify;
}

.mdlr-content p.text-center {
    text-align: center;
}

.mdlr-content p.text-end {
    text-align: right;
}

.mdlr-content > div.frame-layout-1 > p:first-of-type::first-letter,
.mdlr-content > div.frame-layout-1 > *:not(blockquote) p:first-of-type::first-letter {
    -webkit-initial-letter: 3 3;
    initial-letter: 3 3;
    line-height: 1em;
    font-weight: var(--mdlr-font-main-emphasis);
    color: var(--mdlr-color-highlight-main);
    margin-right: 0.5lh;
}

@supports (not (-webkit-initial-letter: 3 3)) and (not (initial-letter: 3 3)) {

    .mdlr-content > div.frame-layout-1 > p:first-of-type::first-letter,
    .mdlr-content > div.frame-layout-1 > *:not(blockquote) p:first-of-type::first-letter {
        font-size: 3.6lh;
        float: left;
        margin: 0.1lh 0.05lh 0 -0.075lh;
    }
}

.mdlr-content ol ol,
.mdlr-content ol ul,
.mdlr-content ul ol,
.mdlr-content ul ul {
    margin-top: 0.25em !important;
}

.mdlr-content ol li:not(:first-child),
.mdlr-content ul li:not(:first-child) {
    margin-top: 0.25em !important;
}

.mdlr-content ol li,
.mdlr-content ul li {
    margin-left: 1.5em;
    padding-left: 0.25em;
}

.mdlr-content ol li {
    list-style: decimal;
}

.mdlr-content ul li {
    list-style: disc;
}

.mdlr-content ol li::marker,
.mdlr-content ul li::marker {
    color: var(--mdlr-color-highlight-intense);
    font-weight: var(--mdlr-font-main-emphasis);
}

.mdlr-content ul li::marker {
    content: '— ';
}

.mdlr-content dl > div:not(:first-child) {
    margin-top: 0.85em;
}

.mdlr-content dl dt {
    font-weight: var(--mdlr-font-main-emphasis);
}

.mdlr-content dl dd {
    padding-left: 0.5em;
}

.mdlr-content blockquote {
    padding-left: calc(1.75em - var(--mdlr-spacing-extralarge));
    max-width: calc(var(--mdlr-width-text) - 1.75em);
    border-left: var(--mdlr-spacing-extralarge) solid var(--mdlr-color-highlight-light);
}

.mdlr-content pre {
    font-family: monospace;
    font-size: var(--mdlr-font-main);
    line-height: var(--mdlr-font-main-height);
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    width: fit-content;
    min-width: var(--mdlr-width-text);
    background: var(--mdlr-color-primary-main);
    border-radius: var(--mdlr-spacing-radius);
    overflow-x: auto;
}

.mdlr-content pre:hover {
    background: var(--mdlr-color-primary-more);
}

.mdlr-content p code {
    font-family: monospace;
    font-size: var(--mdlr-font-main);
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
    background: var(--mdlr-color-primary-main);
    border-radius: var(--mdlr-spacing-radius);
}

.mdlr-content p code:hover {
    background: var(--mdlr-color-primary-more);
}

.mdlr-content figcaption {
    font-size: var(--mdlr-font-main-smaller);
    line-height: var(--mdlr-font-main-height);
    color: var(--mdlr-color-primary-intense-text);
    margin: var(--mdlr-spacing-padding-vertical) auto 0 auto;
    max-width: var(--mdlr-width-text);
    text-align: center;
    text-wrap: balance;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Content: heading */

.mdlr-content h1,
.mdlr-content h2,
.mdlr-content h3,
.mdlr-content h4,
.mdlr-content h5,
.mdlr-content h6 {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--mdlr-width-wide) - 2 * var(--mdlr-spacing-margin));
}

.mdlr-content h5,
.mdlr-content h6 {
    font-size: var(--mdlr-font-main-size);
    font-weight: var(--mdlr-font-main-emphasis);
    line-height: var(--mdlr-font-main-height);
}

.mdlr-content h6 {
    font-style: italic;
    color: var(--mdlr-color-primary-intense-text);
}

.mdlr-content h1 + h1,
.mdlr-content h1 + h2,
.mdlr-content h1 + h3,
.mdlr-content h1 + h4,
.mdlr-content h1 + h5,
.mdlr-content h1 + h6,
.mdlr-content h2 + h1,
.mdlr-content h2 + h2,
.mdlr-content h2 + h3,
.mdlr-content h2 + h4,
.mdlr-content h2 + h5,
.mdlr-content h2 + h6,
.mdlr-content h3 + h1,
.mdlr-content h3 + h2,
.mdlr-content h3 + h3,
.mdlr-content h3 + h4,
.mdlr-content h3 + h5,
.mdlr-content h3 + h6,
.mdlr-content h4 + h1,
.mdlr-content h4 + h2,
.mdlr-content h4 + h3,
.mdlr-content h4 + h4,
.mdlr-content h4 + h5,
.mdlr-content h4 + h6,
.mdlr-content h5 + h1,
.mdlr-content h5 + h2,
.mdlr-content h5 + h3,
.mdlr-content h5 + h4,
.mdlr-content h5 + h5,
.mdlr-content h5 + h6,
.mdlr-content h6 + h1,
.mdlr-content h6 + h2,
.mdlr-content h6 + h3,
.mdlr-content h6 + h4,
.mdlr-content h6 + h5,
.mdlr-content h6 + h6 {
    margin-top: calc(0.5 * var(--mdlr-spacing-margin)) !important;
}

.mdlr-content header {
    margin-bottom: calc(0.5 * var(--mdlr-spacing-margin));
}

.mdlr-content header h1,
.mdlr-content header h2,
.mdlr-content header h3,
.mdlr-content header h4,
.mdlr-content header h5,
.mdlr-content header h6,
.mdlr-content header p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center;
}

.mdlr-content header h1.ce-headline-center,
.mdlr-content header h2.ce-headline-center,
.mdlr-content header h3.ce-headline-center,
.mdlr-content header h4.ce-headline-center,
.mdlr-content header h5.ce-headline-center,
.mdlr-content header h6.ce-headline-center,
.mdlr-content header p.ce-headline-center {
    text-align: center;
}

.mdlr-content header h1.ce-headline-left,
.mdlr-content header h2.ce-headline-left,
.mdlr-content header h3.ce-headline-left,
.mdlr-content header h4.ce-headline-left,
.mdlr-content header h5.ce-headline-left,
.mdlr-content header h6.ce-headline-left,
.mdlr-content header p.ce-headline-left {
    text-align: left;
}

.mdlr-content header h1.ce-headline-right,
.mdlr-content header h2.ce-headline-right,
.mdlr-content header h3.ce-headline-right,
.mdlr-content header h4.ce-headline-right,
.mdlr-content header h5.ce-headline-right,
.mdlr-content header h6.ce-headline-right,
.mdlr-content header p.ce-headline-right {
    text-align: right;
}

.mdlr-content header h1 + p,
.mdlr-content header h1 + h2,
.mdlr-content header h1 + h3,
.mdlr-content header h1 + h4,
.mdlr-content header h1 + h5,
.mdlr-content header h1 + h6,
.mdlr-content header h2 + p,
.mdlr-content header h2 + h3,
.mdlr-content header h2 + h4,
.mdlr-content header h2 + h5,
.mdlr-content header h2 + h6,
.mdlr-content header h3 + p,
.mdlr-content header h3 + h4,
.mdlr-content header h3 + h5,
.mdlr-content header h3 + h6,
.mdlr-content header h4 + p,
.mdlr-content header h4 + h5,
.mdlr-content header h4 + h6,
.mdlr-content header h5 + p,
.mdlr-content header h5 + h6,
.mdlr-content header h6 + p {
    margin-top: calc(0.5 * var(--mdlr-spacing-margin)) !important;
}

.mdlr-content header p {
    color: var(--mdlr-color-primary-intense-text);
}

.mdlr-content > div:not(:first-child) header:first-child {
    margin-top: calc(0.75 * var(--mdlr-spacing-margin));
}

@media screen and (min-width: 601px) {

    .mdlr-content header {
        margin-bottom: calc(0.75 * var(--mdlr-spacing-margin));
    }

    .mdlr-content > div:not(:first-child) header:first-child {
        margin-top: var(--mdlr-spacing-margin);
    }
}

@media screen and (min-width: 901px) {

    .mdlr-content header {
        margin-bottom: var(--mdlr-spacing-margin);
    }

    .mdlr-content > div:not(:first-child) header:first-child {
        margin-top: calc(1.25 * var(--mdlr-spacing-margin));
    }
}

@media screen and (min-width: 1201px) {

    .mdlr-content header {
        width: calc((100% - var(--mdlr-width-text)) / 2 - var(--mdlr-spacing-margin));
        margin-bottom: unset;
        float: left;
        position: sticky;
        top: calc(2.25 * var(--mdlr-spacing-margin));
        text-shadow: 0 0 var(--mdlr-spacing-thin) var(--mdlr-color-primary-intense),
            0 0 var(--mdlr-spacing-medium) var(--mdlr-color-primary-intense),
            0 0 var(--mdlr-spacing-large) var(--mdlr-color-primary-intense),
            0 0 var(--mdlr-spacing-extralarge) var(--mdlr-color-primary-intense),
            0 0 var(--mdlr-spacing-margin) var(--mdlr-color-primary-intense),
            0 0 var(--mdlr-spacing-margin) var(--mdlr-color-primary-intense);
    }

    .mdlr-content .frame-ruler-after header {
        margin-bottom: calc(1.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-content header h1,
    .mdlr-content header h2,
    .mdlr-content header h3,
    .mdlr-content header h4,
    .mdlr-content header h5,
    .mdlr-content header h6 {
        text-align: right;
    }

    .mdlr-content header p {
        text-align: left;
    }

    .mdlr-content > div:not(:first-child) header:first-child {
        margin-top: unset;
    }

    .mdlr-content > div:not(:first-child) header:first-child + p,
    .mdlr-content > div:not(:first-child) header:first-child + ol,
    .mdlr-content > div:not(:first-child) header:first-child + ul,
    .mdlr-content > div:not(:first-child) header:first-child + blockquote {
        margin-top: calc(1.5 * var(--mdlr-spacing-margin));
    }
}

/* Content: line */

.mdlr-content hr,
.frame-ruler-before::before,
.frame-ruler-after::after {
    border: none;
    border-bottom: var(--mdlr-spacing-medium) solid var(--mdlr-color-highlight-main);
    margin: calc(1.5 * var(--mdlr-spacing-margin)) 0;
    display: block;
}

.frame-ruler-before::before,
.frame-ruler-after::after {
    content: '';
}

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

    .mdlr-content hr,
    .frame-ruler-before::before,
    .frame-ruler-after::after {
        margin-top: calc(1.25 * var(--mdlr-spacing-margin));
        margin-bottom: calc(1.25 * var(--mdlr-spacing-margin));
    }
}

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

    .mdlr-content hr,
    .frame-ruler-before::before,
    .frame-ruler-after::after {
        margin-top: var(--mdlr-spacing-margin);
        margin-bottom: var(--mdlr-spacing-margin);
    }
}

/* Content: table */

.mdlr-content figure.table {
    overflow-x: auto;
    margin: 1.65em auto;
}

.mdlr-content > div:first-child figure.table:first-child {
    margin-top: 0.65em;
}

.mdlr-content table {
    border-collapse: separate;
    border-radius: var(--mdlr-spacing-radius);
    border: var(--mdlr-color-highlight-main) solid var(--mdlr-spacing-medium);
    min-width: var(--mdlr-width-text);
    margin: 0 auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
}

.mdlr-content table th,
.mdlr-content table td {
    text-align: left;
    vertical-align: top;
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal)) calc(0.5 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-content table th {
    font-weight: var(--mdlr-font-main-emphasis);
}

.mdlr-content table tr th,
.mdlr-content table tr td {
    transition: var(--mdlr-transition-elevate);
}

.mdlr-content table tbody th:not(:first-child),
.mdlr-content table tbody td:not(:first-child) {
    border-left: var(--mdlr-color-primary-less) solid var(--mdlr-spacing-thin);
}

.mdlr-content table tr:nth-child(even) th,
.mdlr-content table tr:nth-child(even) td {
    background: var(--mdlr-color-primary-main);
}

.mdlr-content table tr:hover th,
.mdlr-content table tr:hover td {
    background: var(--mdlr-color-primary-more);
}

.mdlr-content table thead th,
.mdlr-content table thead tr:hover th,
.mdlr-content table thead td {
    color: var(--mdlr-color-highlight-main-text);
    background: var(--mdlr-color-highlight-main);
    font-weight: var(--mdlr-font-main-emphasis);
    padding-top: calc((0.5 * var(--mdlr-spacing-padding-vertical)) - var(--mdlr-spacing-medium));
}

.mdlr-content table thead:first-child th:first-child {
    border-top-left-radius: calc(var(--mdlr-spacing-radius) - var(--mdlr-spacing-medium));
}

.mdlr-content table thead:first-child th:last-child {
    border-top-right-radius: calc(var(--mdlr-spacing-radius) - var(--mdlr-spacing-medium));
}

.mdlr-content table thead:last-child th:first-child {
    border-bottom-left-radius: calc(var(--mdlr-spacing-radius) - var(--mdlr-spacing-medium));
}

.mdlr-content table thead:last-child th:last-child {
    border-bottom-right-radius: calc(var(--mdlr-spacing-radius) - var(--mdlr-spacing-medium));
}

.mdlr-content table p {
    font-size: var(--mdlr-font-main-size);
    line-height: var(--mdlr-font-main-height);
    text-align: inherit;
}

.mdlr-content table p:first-child {
    margin-top: 0 !important;
}

/* Content: gallery */

.mdlr-content .mdlr-gallery {
    overflow-x: auto;
    margin: 1.65em auto;
    display: flex;
    flex-direction: column;
    gap: var(--mdlr-spacing-padding-horizontal);
    overflow: visible;
}

.mdlr-content > div:first-child .mdlr-gallery:first-child {
    margin-top: 0.65em;
}

.mdlr-content .mdlr-gallery-row { /* Possibly replace with CSS grid masonry when supported */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: var(--mdlr-spacing-padding-horizontal);
}

.mdlr-content .mdlr-gallery.mdlr-variant-text {
    max-width: var(--mdlr-width-text);
}

.mdlr-content .mdlr-gallery.mdlr-variant-left {
    justify-content: left;
}

.mdlr-content .mdlr-gallery.mdlr-variant-right {
    justify-content: right;
}

.mdlr-content .mdlr-gallery figure {
    flex: 1 1; /* Flex-grow given as aspect ratio inline */
    min-width: 75px;
}

.mdlr-content .mdlr-gallery[data-columns = '1'] figure {
    flex-grow: 1 !important;
}

.mdlr-content .mdlr-gallery figure:fullscreen {
    overflow: auto;
}

.mdlr-content .mdlr-gallery img,
.mdlr-content .mdlr-gallery video,
.mdlr-content .mdlr-gallery audio {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--mdlr-spacing-radius);
}

.mdlr-content .mdlr-gallery.mdlr-variant-border img,
.mdlr-content .mdlr-gallery.mdlr-variant-border video,
.mdlr-content .mdlr-gallery.mdlr-variant-border audio {
    width: 100% !important;
    border: var(--mdlr-color-primary-main-text) solid var(--mdlr-spacing-medium);
}

.mdlr-content .mdlr-gallery figure:fullscreen img,
.mdlr-content .mdlr-gallery figure:fullscreen video,
.mdlr-content .mdlr-gallery figure:fullscreen audio,
.mdlr-content .mdlr-gallery.mdlr-variant-border figure:fullscreen img,
.mdlr-content .mdlr-gallery.mdlr-variant-border figure:fullscreen video,
.mdlr-content .mdlr-gallery.mdlr-variant-border figure:fullscreen audio {
    width: 100% !important;
    height: 100% !important;
    border: none;
    object-fit: contain;
    margin: auto;
}

.mdlr-content .mdlr-gallery a:focus-visible {
    border-radius: var(--mdlr-spacing-outlineradius);
}

.mdlr-content .mdlr-gallery a:hover img,
.mdlr-content .mdlr-gallery a:active img {
    box-shadow: var(--mdlr-shadow-elevated);
}

.mdlr-content .mdlr-gallery-tools {
    display: flex;
    justify-content: end;
    margin-top: calc(-1.5rem - var(--mdlr-spacing-padding-vertical));
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical));
    padding-top: 0;
}

.mdlr-content .mdlr-gallery.mdlr-variant-left[data-columns = '1']:not(.mdlr-variant-text) figcaption {
    text-align: left;
}

.mdlr-content .mdlr-gallery.mdlr-variant-right[data-columns = '1'] figcaption {
    text-align: right;
}

.mdlr-content .mdlr-gallery figure:fullscreen figcaption {
    display: none;
}

@media screen and (min-width: 1201px) {

    .mdlr-content .mdlr-gallery.mdlr-variant-aside,
    .mdlr-content > div:first-child .mdlr-gallery.mdlr-variant-aside:first-child {
        width: calc((100% - var(--mdlr-width-text)) / 2 - var(--mdlr-spacing-margin));
        margin-top: 0.5em;
        margin-bottom: 0;
        float: right;
    }

    .mdlr-content .mdlr-gallery.mdlr-variant-aside.mdlr-variant-left,
    .mdlr-content > div:first-child .mdlr-gallery.mdlr-variant-aside.mdlr-variant-left:first-child {
        float: left;
    }
}


/*
## Template ###################################################################
*/

/* Area */

.mdlr-area-slot-a {
    grid-area: a;
}

.mdlr-area-slot-b {
    grid-area: b;
}

.mdlr-area-slot-c {
    grid-area: c;
}

.mdlr-area-slot-d {
    grid-area: d;
}

.mdlr-area-align-left,
.mdlr-area-align-left-above-900,
.mdlr-area-align-left-below-900,
.mdlr-area-align-left-above-600,
.mdlr-area-align-left-below-600,
.mdlr-area-align-center,
.mdlr-area-align-center-above-900,
.mdlr-area-align-center-below-900,
.mdlr-area-align-center-above-600,
.mdlr-area-align-center-below-600,
.mdlr-area-align-right,
.mdlr-area-align-right-above-900,
.mdlr-area-align-right-below-900,
.mdlr-area-align-right-above-600,
.mdlr-area-align-right-below-600,
.mdlr-area-align-top,
.mdlr-area-align-middle,
.mdlr-area-align-bottom {
    display: flex;
    justify-content: center !important;
}

.mdlr-area-align-left {
    justify-content: start !important;
}

.mdlr-area-align-left > menu.mdlr-buttonrow,
menu.mdlr-buttonrow.mdlr-area-align-left {
    margin: auto auto auto 0 !important;
}

.mdlr-area-align-center {
    justify-content: center !important;
}

.mdlr-area-align-center > menu.mdlr-buttonrow,
menu.mdlr-buttonrow.mdlr-area-align-center {
    margin: auto !important;
}

.mdlr-area-align-right {
    justify-content: end !important;
}

.mdlr-area-align-right > menu.mdlr-buttonrow,
menu.mdlr-buttonrow.mdlr-area-align-right {
    margin: auto 0 auto auto !important;
}

.mdlr-area-align-top {
    align-items: start !important;
}

.mdlr-area-align-middle {
    align-items: center !important;
}

.mdlr-area-align-bottom {
    align-items: end !important;
}

@media screen and (min-width: 901px) {

    .mdlr-area-align-left-above-900 {
        justify-content: start !important;
    }

    .mdlr-area-align-left-above-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-left-above-900 {
        margin: auto auto auto 0 !important;
    }

    .mdlr-area-align-center-above-900 {
        justify-content: center !important;
    }

    .mdlr-area-align-center-above-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-center-above-900 {
        margin: auto !important;
    }

    .mdlr-area-align-right-above-900 {
        justify-content: end !important;
    }

    .mdlr-area-align-right-above-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-right-above-900 {
        margin: auto 0 auto auto !important;
    }
}

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

    .mdlr-area-align-left-below-900 {
        justify-content: start !important;
    }

    .mdlr-area-align-left-below-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-left-below-900 {
        margin: auto auto auto 0 !important;
    }

    .mdlr-area-align-center-below-900 {
        justify-content: center !important;
    }

    .mdlr-area-align-center-below-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-center-below-900 {
        margin: auto !important;
    }

    .mdlr-area-align-right-below-900 {
        justify-content: end !important;
    }

    .mdlr-area-align-right-below-900 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-right-below-900 {
        margin: auto 0 auto auto !important;
    }
}

@media screen and (min-width: 601px) {

    .mdlr-area-align-left-above-600 {
        justify-content: start !important;
    }

    .mdlr-area-align-left-above-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-left-above-600 {
        margin: auto auto auto 0 !important;
    }

    .mdlr-area-align-center-above-600 {
        justify-content: center !important;
    }

    .mdlr-area-align-center-above-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-center-above-600 {
        margin: auto !important;
    }

    .mdlr-area-align-right-above-600 {
        justify-content: end !important;
    }

    .mdlr-area-align-right-above-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-right-above-600 {
        margin: auto 0 auto auto !important;
    }
}

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

    .mdlr-area-align-left-below-600 {
        justify-content: start !important;
    }

    .mdlr-area-align-left-below-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-left-below-600 {
        margin: auto auto auto 0 !important;
    }

    .mdlr-area-align-center-below-600 {
        justify-content: center !important;
    }

    .mdlr-area-align-center-below-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-center-below-600 {
        margin: auto !important;
    }

    .mdlr-area-align-right-below-600 {
        justify-content: end !important;
    }

    .mdlr-area-align-right-below-600 > menu.mdlr-buttonrow,
    menu.mdlr-buttonrow.mdlr-area-align-right-below-600 {
        margin: auto 0 auto auto !important;
    }
}

/* Pattern */

.mdlr-pattern.mdlr-variant-diptych {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mdlr-spacing-margin);
}

.mdlr-pattern.mdlr-variant-triptych {
    display: grid;
    grid-template-columns: minmax(0, 215px) minmax(auto, 1fr) minmax(0, 215px);
    grid-template-areas:
        'a b c';
    gap: var(--mdlr-spacing-margin);
}

.mdlr-pattern.mdlr-variant-triangle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        'a a b b'
        '. c c .';
    gap: var(--mdlr-spacing-margin);
}

.mdlr-pattern.mdlr-variant-triangle.mdlr-variant-triangle-missing-c {
    grid-template-areas:
        'a a b b';
}

.mdlr-pattern.mdlr-variant-clasped {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        'a b b'
        'c c d';
    gap: var(--mdlr-spacing-margin);
}

.mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b {
    grid-template-areas:
        'a . d'
        'c c c';
}

.mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-c {
    grid-template-areas:
        'a b b'
        'a . d';
}

.mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b.mdlr-variant-clasped-missing-c {
    grid-template-areas:
        'a . d';
}

.mdlr-pattern > h1:not(:first-child),
.mdlr-pattern > h2:not(:first-child),
.mdlr-pattern > h3:not(:first-child),
.mdlr-pattern > h4:not(:first-child),
.mdlr-pattern > h5:not(:first-child),
.mdlr-pattern > h6:not(:first-child),
.mdlr-pattern > div:not([class]) > h1:not(:first-child),
.mdlr-pattern > div:not([class]) > h2:not(:first-child),
.mdlr-pattern > div:not([class]) > h3:not(:first-child),
.mdlr-pattern > div:not([class]) > h4:not(:first-child),
.mdlr-pattern > div:not([class]) > h5:not(:first-child),
.mdlr-pattern > div:not([class]) > h6:not(:first-child) {
    margin-top: var(--mdlr-spacing-margin);
}

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

    .mdlr-pattern.mdlr-variant-diptych {
        grid-template-columns: minmax(0, 1fr);
    }

    .mdlr-pattern.mdlr-variant-triptych {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'a c'
            'b';
        gap: 0 calc(0.25 * var(--mdlr-spacing-margin));
    }

    .mdlr-pattern.mdlr-variant-triangle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'a b'
            'c c';
    }

    .mdlr-pattern.mdlr-variant-triangle.mdlr-variant-triangle-missing-c {
        grid-template-areas:
            'a b';
    }

    .mdlr-pattern.mdlr-variant-clasped {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'a d'
            'b b'
            'c c';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b {
        grid-template-areas:
            'a d'
            'c c';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-c {
        grid-template-areas:
            'a d'
            'b b';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b.mdlr-variant-clasped-missing-c {
        grid-template-areas:
            'a d';
    }
}

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

    .mdlr-pattern.mdlr-variant-diptych {
        gap: calc(0.75 * var(--mdlr-spacing-margin));
    }

    .mdlr-pattern.mdlr-variant-triptych {
        grid-template-columns: auto;
        gap: 0 calc(0.5 * var(--mdlr-spacing-padding-vertical));
    }

    .mdlr-pattern.mdlr-variant-triangle {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'a'
            'b'
            'c';
        gap: calc(0.75 * var(--mdlr-spacing-margin));
    }

    .mdlr-pattern.mdlr-variant-triangle.mdlr-variant-triangle-missing-c {
        grid-template-areas:
            'a'
            'b';
    }

    .mdlr-pattern.mdlr-variant-clasped {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'a'
            'b'
            'c'
            'd';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b {
        grid-template-areas:
            'a'
            'c'
            'd';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-c {
        grid-template-areas:
            'a'
            'b'
            'd';
    }

    .mdlr-pattern.mdlr-variant-clasped.mdlr-variant-clasped-missing-b.mdlr-variant-clasped-missing-c {
        grid-template-areas:
            'a'
            'd';
    }

    .mdlr-pattern > h1:not(:first-child),
    .mdlr-pattern > h2:not(:first-child),
    .mdlr-pattern > h3:not(:first-child),
    .mdlr-pattern > h4:not(:first-child),
    .mdlr-pattern > h5:not(:first-child),
    .mdlr-pattern > h6:not(:first-child),
    .mdlr-pattern > div:not([class]) > h1:not(:first-child),
    .mdlr-pattern > div:not([class]) > h2:not(:first-child),
    .mdlr-pattern > div:not([class]) > h3:not(:first-child),
    .mdlr-pattern > div:not([class]) > h4:not(:first-child),
    .mdlr-pattern > div:not([class]) > h5:not(:first-child),
    .mdlr-pattern > div:not([class]) > h6:not(:first-child) {
        margin-top: calc(0.75 * var(--mdlr-spacing-margin));
    }
}


/*
## Page #######################################################################
*/

/* Section */

.mdlr-section {
    clear: both;
    padding: calc(1.5 * var(--mdlr-spacing-margin)) 0;
    background: var(--mdlr-color-primary-intense);
}

.mdlr-section.mdlr-variant-headerbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: calc(0.5 * var(--mdlr-spacing-padding-vertical)) 0;
    background: transparent;
    transition: var(--mdlr-transition-elevate);
    z-index: 10000;
}

.mdlr-section.mdlr-variant-title {
    padding-bottom: calc(1.85 * var(--mdlr-spacing-margin));
}

.mdlr-section.mdlr-variant-topbar,
.mdlr-section.mdlr-variant-bottombar {
    padding: 0;
    overflow-x: auto;
}

.mdlr-section.mdlr-variant-topbar {
    padding-top: var(--mdlr-spacing-padding-vertical);
    padding-bottom: calc(1 * var(--mdlr-spacing-margin));
    margin-bottom: calc(-1 * var(--mdlr-spacing-margin));
}

.mdlr-section.mdlr-variant-bottombar {
    padding-bottom: var(--mdlr-spacing-padding-vertical);
}

.mdlr-section.mdlr-variant-highlightbar,
.mdlr-section.mdlr-variant-highlightbar-empty {
    padding: var(--mdlr-spacing-padding-vertical) 0;
    background: linear-gradient(75deg, var(--mdlr-color-highlight-intense), var(--mdlr-color-highlight-main));
    overflow-x: auto;
}

.mdlr-section.mdlr-variant-highlightbar-empty {
    padding: 0;
    height: var(--mdlr-spacing-medium);
}

.mdlr-section.mdlr-variant-list {
    overflow-x: auto;
}

.mdlr-section.mdlr-variant-even {
    background: var(--mdlr-color-primary-intense);
}

.mdlr-section.mdlr-variant-odd {
    background: transparent;
}

.mdlr-section > * {
    margin: 0 auto;
    padding: 0 var(--mdlr-spacing-margin);
}

.mdlr-section.mdlr-variant-text > * {
    max-width: calc(var(--mdlr-width-text) + 2 * var(--mdlr-spacing-margin));
}

.mdlr-section.mdlr-variant-wide > * {
    max-width: calc(var(--mdlr-width-wide) + 2 * var(--mdlr-spacing-margin));
}

.mdlr-section.mdlr-variant-ultrawide > * {
    max-width: calc(var(--mdlr-width-ultrawide) + 2 * var(--mdlr-spacing-margin));
}

@media screen and (min-width: 901px) {

    .mdlr-section.mdlr-variant-headerbar.mdlr-variant-scrolled {
        background: var(--mdlr-color-primary-translucent);
        -webkit-backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        backdrop-filter: var(--mdlr-color-primary-translucent-filter);
        box-shadow: var(--mdlr-shadow-flat);
    }
    
    .mdlr-section.mdlr-variant-headerbar.mdlr-variant-scrolled:hover {
        box-shadow: var(--mdlr-shadow-regular);
    }
}

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

    .mdlr-section {
        padding-top: calc(1.25 * var(--mdlr-spacing-margin));
        padding-bottom: calc(1.25 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-headerbar {
        position: static;
    }

    .mdlr-section.mdlr-variant-title {
        padding-top: var(--mdlr-spacing-margin);
        padding-bottom: calc(1.5 * var(--mdlr-spacing-margin));
    }
}

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

    .mdlr-section {
        padding-top: var(--mdlr-spacing-margin);
        padding-bottom: var(--mdlr-spacing-margin);
    }
    
    .mdlr-section > * {
        padding-left: calc(0.75 * var(--mdlr-spacing-margin));
        padding-right: calc(0.75 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-text > * {
        max-width: calc(var(--mdlr-width-text) + 1.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-wide > * {
        max-width: calc(var(--mdlr-width-wide) + 1.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-ultrawide > * {
        max-width: calc(var(--mdlr-width-ultrawide) + 1.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-title {
        padding-top: calc(0.75 * var(--mdlr-spacing-margin));
        padding-bottom: calc(1.25 * var(--mdlr-spacing-margin));
    }
}

@media screen and (max-width: 360px) {
    
    .mdlr-section > * {
        padding-left: calc(0.5 * var(--mdlr-spacing-margin));
        padding-right: calc(0.5 * var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-text > * {
        max-width: calc(var(--mdlr-width-text) + var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-wide > * {
        max-width: calc(var(--mdlr-width-wide) + var(--mdlr-spacing-margin));
    }

    .mdlr-section.mdlr-variant-ultrawide > * {
        max-width: calc(var(--mdlr-width-ultrawide) + var(--mdlr-spacing-margin));
    }
}

/* Modal */

body:has(dialog.mdlr-modal[open]) {
    overflow: hidden;
}

dialog.mdlr-modal {
    visibility: hidden;
    opacity: 0;
    background: var(--mdlr-color-primary-main);
    border-radius: var(--mdlr-spacing-radius);
    padding: calc(var(--mdlr-spacing-margin) - (0.5 * var(--mdlr-spacing-padding-vertical))) var(--mdlr-spacing-margin);
    box-shadow: var(--mdlr-shadow-regular);
    margin: auto;
    transform: scale(0.9);
    width: var(--mdlr-width-triple);
    max-width: 100%;
    transition: var(--mdlr-transition-elevate);
    overflow: auto;
}

dialog.mdlr-modal.mdlr-variant-wide {
    width: var(--mdlr-width-text);
}

dialog.mdlr-modal:hover {
    box-shadow: var(--mdlr-shadow-elevated);
}

dialog.mdlr-modal:open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

@starting-style { /* Makes sure the transition is fired despite changing the display property */

    dialog.mdlr-modal:open {
        visibility: hidden;
        opacity: 0;
        transform: scale(0.9);
    }
}

dialog.mdlr-modal::backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    transition: var(--mdlr-transition-click);
}

dialog.mdlr-modal:open::backdrop {
    background: var(--mdlr-color-primary-backdrop);
    -webkit-backdrop-filter: var(--mdlr-color-primary-backdrop-filter);
    backdrop-filter: var(--mdlr-color-primary-backdrop-filter);
}

@starting-style { /* Makes sure the transition is fired despite changing the display property */

    dialog.mdlr-modal:open::backdrop {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.mdlr-modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(0.75 * var(--mdlr-spacing-margin));
}

.mdlr-modal h1,
.mdlr-modal h2,
.mdlr-modal h3,
.mdlr-modal h4,
.mdlr-modal h5,
.mdlr-modal h6 {
    font-family: var(--mdlr-font-main);
    font-feature-settings: var(--mdlr-font-main-features);
    font-size: var(--mdlr-font-main-size);
    line-height: var(--mdlr-font-main-height);
    font-weight: var(--mdlr-font-main-emphasis);
    color: var(--mdlr-color-primary-main-text);
    margin-top: calc(0.75 * var(--mdlr-spacing-margin));
    margin-bottom: calc(0.65 * var(--mdlr-spacing-margin));
}

.mdlr-modal h3,
.mdlr-modal h4,
.mdlr-modal h5,
.mdlr-modal h6 {
    margin-bottom: calc(0.5 * var(--mdlr-spacing-margin));
}

.mdlr-modal-title + h1,
.mdlr-modal-title + h2,
.mdlr-modal-title + h3,
.mdlr-modal-title + h4,
.mdlr-modal-title + h5,
.mdlr-modal-title + h6 {
    margin-top: 0;
}

.mdlr-modal-title > h2 {
    font-family: var(--mdlr-font-subheading);
    font-feature-settings: var(--mdlr-font-subheading-features);
    font-size: var(--mdlr-font-subheading-size);
    line-height: var(--mdlr-font-subheading-height);
    font-weight: var(--mdlr-font-subheading-weight);
    color: var(--mdlr-font-subheading-color);
    margin: 0;
}

@media screen and (max-width: 600px) {
    
    dialog.mdlr-modal {
        padding: calc((0.75 * var(--mdlr-spacing-margin)) - (0.5 * var(--mdlr-spacing-padding-vertical))) calc(0.75 * var(--mdlr-spacing-margin));
        width: var(--mdlr-width-triple);
        max-width: 100%;
    }

    .mdlr-modal-title {
        margin-bottom: calc(0.5 * var(--mdlr-spacing-margin));
    }
}













/*
## Basics #####################################################################
*/

/* Leaflet adjustments */

/*.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url(images/icon-regular-layers.svg); *//* replaces the original layers icon *//*
}*/

/*.leaflet-tile-pane {
    filter: grayscale(1) contrast(1.15);
}

.leaflet-attribution-flag {
    display: none !important;
}

.leaflet-container .leaflet-control-attribution {
    padding: 2px 5px;
    border-top-left-radius: var(--mdlr-spacing-radius);
}*/

/* More Leaflet styles below */


/*
## Atoms ######################################################################
*/

/* Timeline */
/* TODO */

/*.mdlr-timeline {
    border-top: var(--mdlr-color-highlight-light) solid var(--mdlr-spacing-medium);
    display: flex;
    padding: 0 var(--mdlr-spacing-padding-horizontal);
    margin-top: calc((0.5 * var(--mdlr-spacing-margin)) + (1.5 * var(--mdlr-spacing-extralarge)));
    margin-bottom: calc(var(--mdlr-spacing-extralarge) + var(--mdlr-spacing-padding-vertical));
    --mdlr-element-timeline-number: 1;
    --mdlr-element-timeline-range: 1;
    --mdlr-element-timeline-total: calc((100% - (var(--mdlr-element-timeline-number) * 2 * var(--mdlr-spacing-extralarge))) / var(--mdlr-element-timeline-range));
}

.mdlr-timeline li {
    cursor: default;
    width: calc(2 * var(--mdlr-spacing-extralarge));
    height: calc(2 * var(--mdlr-spacing-extralarge));
    background: var(--mdlr-color-highlight-main);
    border-radius: var(--mdlr-spacing-extralarge);
    margin-top: calc(-1 * var(--mdlr-spacing-extralarge) - (0.5 * var(--mdlr-spacing-medium)));
    transition: var(--mdlr-transition-elevate);
}

.mdlr-timeline li.mdlr-variant-active,
.mdlr-timeline li:hover {
    background: var(--mdlr-color-accent-main);
}

.mdlr-timeline li span {
    position: absolute !important;
    visibility: hidden !important;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
}*/


/*
## Molecules ##################################################################
*/

/* Boxed cover */
/* TODO */

/*.mdlr-boxedcover {
    display: block;
}

.mdlr-boxedcover:hover {
    background: var(--mdlr-color-primary-more);
}

.mdlr-boxedcover figure {
    display: flex;
    align-items: center;
}

.mdlr-boxedcover img {
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
    margin: 0 auto;
    border-top-left-radius: calc(0.95 * var(--mdlr-spacing-radius));
    border-bottom-left-radius: calc(0.95 * var(--mdlr-spacing-radius));
}

.mdlr-boxedcover figcaption {
    flex: 1 1 calc(100% - 7.5rem);
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    transition: var(--mdlr-transition-elevate);
}

.mdlr-boxedcover .mdlr-variant-emphasis {
    font-weight: var(--mdlr-font-main-emphasis);
}*/

/* Boxed location */
/* TODO */

/*.mdlr-boxedlocation {
    display: flex;
    align-items: center;
}

.mdlr-boxedlocation-map {
    width: 50%;
    height: 17.5rem;
    z-index: 0; / Webkit fix for rounded corners /
    background: #000;
}

.mdlr-boxedlocation-address {
    width: calc(50% - (2 * var(--mdlr-spacing-padding-horizontal)));
    padding: var(--mdlr-spacing-padding-vertical) var(--mdlr-spacing-padding-horizontal);
    text-align: center;
}

.mdlr-boxedlocation-address address {
    display: block;
    font-style: normal;
}

.mdlr-boxedlocation-address ul {
    margin-top: var(--mdlr-spacing-padding-vertical);
}*/

/* Boxed avatars */
/* TODO */

/*.mdlr-boxedavatars {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0 calc(0.5 * var(--mdlr-spacing-padding-horizontal)) calc(0.5 * var(--mdlr-spacing-padding-vertical)) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
}

.mdlr-boxedavatars li {
    flex: 0 0 10.5rem;
    margin: 0 auto;
    padding: 0 calc(0.5 * var(--mdlr-spacing-padding-horizontal)) var(--mdlr-spacing-padding-vertical) calc(0.5 * var(--mdlr-spacing-padding-horizontal));
    text-align: center;
}

.mdlr-boxedavatars li a {
    display: block;
    border-radius: var(--mdlr-spacing-radius);
}

.mdlr-boxedavatars li a svg {
    display: block;
    fill: var(--mdlr-color-primary-main-text);
    margin: 0 auto var(--mdlr-spacing-padding-vertical) auto;
    padding: var(--mdlr-spacing-padding-vertical);
    background: var(--mdlr-color-primary-main);
    border-radius: 2em;
}

.mdlr-boxedavatars li a span {
    display: block;
}

.mdlr-boxedavatars li a span.mdlr-variant-emphasis {
    font-weight: var(--mdlr-font-main-emphasis);
}*/

/* Event list */
/* TODO */

/*.mdlr-eventlist {
    border-collapse: collapse;
    margin: 0 calc(var(--mdlr-spacing-padding-horizontal) - (0.25 * var(--mdlr-spacing-padding-vertical))) calc(var(--mdlr-spacing-padding-horizontal) - (0.25 * var(--mdlr-spacing-padding-vertical))) calc(var(--mdlr-spacing-padding-horizontal) - (0.25 * var(--mdlr-spacing-padding-vertical)));
    width: calc(100% - (2 * var(--mdlr-spacing-padding-horizontal)) + (0.5 * var(--mdlr-spacing-padding-vertical)));
}

.mdlr-eventlist th,
.mdlr-eventlist td {
    cursor: default;
    padding: calc(0.25 * var(--mdlr-spacing-padding-vertical));
    vertical-align: top;
    transition: var(--mdlr-transition-elevate);
}

.mdlr-eventlist th {
    font-weight: var(--mdlr-font-main-emphasis);
    text-align: right;
    min-width: var(--mdlr-spacing-column);
}

.mdlr-eventlist th:not(:first-child),
.mdlr-eventlist td:not(:first-child) {
    padding-left: calc(var(--mdlr-spacing-padding-horizontal) - (0.25 * var(--mdlr-spacing-padding-vertical)));
}

.mdlr-eventlist th:first-child,
.mdlr-eventlist td:first-child {
    border-top-left-radius: var(--mdlr-spacing-radius);
    border-bottom-left-radius: var(--mdlr-spacing-radius);
}

.mdlr-eventlist tr:last-child,
.mdlr-eventlist td:last-child {
    border-top-right-radius: var(--mdlr-spacing-radius);
    border-bottom-right-radius: var(--mdlr-spacing-radius);
}

.mdlr-eventlist tr:hover th,
.mdlr-eventlist tr:hover td,
.mdlr-eventlist tr.mdlr-variant-active th,
.mdlr-eventlist tr.mdlr-variant-active td {
    color: var(--mdlr-color-highlight-light-text);
    background: var(--mdlr-color-highlight-light);
}

.mdlr-eventlist .mdlr-variant-type {
    text-align: center;
}*/


/*
## Organisms ##################################################################
*/

/* Stage */
/* TODO */

/* TODO: possibly include caption, overlay controls to resize and fullscreen, small version with scroll/background-size variants, possibly simplify stage in wall */

/*.mdlr-stage {
    background-position: center; / The property 'background-image' is set dynamically /
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--mdlr-spacing-radius);
    box-shadow: var(--mdlr-shadow-regular);
    transition: var(--mdlr-transition-elevate);
    max-height: 100%;
    overflow: hidden;
}

.mdlr-stage:hover {
    box-shadow: var(--mdlr-shadow-elevated);
}

.mdlr-stage h1,
.mdlr-stage h2,
.mdlr-stage h3,
.mdlr-stage h4,
.mdlr-stage h5,
.mdlr-stage h6 {
    position: absolute !important;
    visibility: hidden !important;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
}

.mdlr-stage figure {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    border-radius: var(--mdlr-spacing-radius);
}

.mdlr-stage figure img {
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    transition: var(--mdlr-transition-elevate);
}

.mdlr-stage:hover figure img {
    transform: scale(1.01);
}

.mdlr-gridlist .mdlr-stage:hover figure img {
    transform: scale(1.03);
}*/


/*
## Templates ##################################################################
*/

/* Grid list */
/* TODO */

/*.mdlr-gridlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 calc(0.5 * var(--mdlr-spacing-margin));
    margin: 0 auto;
    max-width: calc(105rem - var(--mdlr-spacing-margin));
}

.mdlr-gridlist li {
    margin: var(--mdlr-spacing-margin) calc(0.5 * var(--mdlr-spacing-margin)) 0 calc(0.5 * var(--mdlr-spacing-margin));
    width: calc((100% - (7 * var(--mdlr-spacing-margin))) / 7);
    height: 15rem;
}

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

    .mdlr-gridlist li {
        height: 14rem;
    }
}*/

/* Wall */
/* TODO */

/*.mdlr-wall > div {
    display: flex;
    margin: 0 auto;
    max-width: 105rem;
}

.mdlr-wall.mdlr-variant-height > div {
    height: 42rem;
}

.mdlr-wall-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 calc(25% - (1.25 * var(--mdlr-spacing-margin)));
    margin-left: calc(0.5 * var(--mdlr-spacing-margin));
    margin-right: calc(0.5 * var(--mdlr-spacing-margin));
}

.mdlr-wall-column:first-of-type {
    margin-left: var(--mdlr-spacing-margin);
}

.mdlr-wall-column:last-of-type {
    margin-right: var(--mdlr-spacing-margin);
}

.mdlr-wall-column.mdlr-variant-wide {
    flex-basis: calc(50% + var(--mdlr-spacing-margin) - (2.5 * var(--mdlr-spacing-margin)));
}

.mdlr-wall-column > *:not(:first-child) {
    margin-top: var(--mdlr-spacing-margin);
}

.mdlr-wall > div > * {
    margin-top: var(--mdlr-spacing-margin);
}

.mdlr-section-alt.mdlr-wall.mdlr-variant-primary > div > * {
    margin-top: calc(-1 * var(--mdlr-spacing-margin));
}*/