html {
    box-sizing: border-box;
    position: relative;
    text-rendering: optimizeLegibility;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    font-size: 62.5%;
}

:root {
    --primary-10: #bae5ff;
    --primary-20: #0278d4;
    --primary-30: #7676c7;
    --primary-40: #000099;
    --creme-10: #eeeae7;
    --creme-20: #ede6e1;
    --creme-30: #c3bcb6;
    --creme-40: #7e7570;
    --neutral-10: #fff;
    --neutral-20: #f9f7f5;
    --neutral-30: #767676;
    --neutral-40: #2c2c2c;
    --green-10: #eef9e5;
    --green-40: #538327;
    --orange-10: #fcf8e5;
    --orange-40: #ca8a04;
    --red-10: #fdf3f2;
    --red-40: #e20e00;
    --impuls-orange: #fe8f11;

    --background-light-blue: var(--primary-10);
    --background-azur: var(--primary-20);
    --background-blue: var(--primary-30);
    --background-tiefenblau: var(--primary-40);
    --background-warm-grey-10: var(--creme-10);
    --background-warm-grey-20: var(--creme-20);
    --background-warm-grey-30: var(--creme-30);
    --background-white: var(--neutral-10);
    --background-light: var(--neutral-20);
    --background-success: var(--green-10);
    --background-warning: var(--orange-10);
    --background-error: var(--red-10);
    --outline-light-blue: var(--primary-10);
    --outline-azur: var(--primary-20);
    --outline-blue: var(--primary-30);
    --outline-tiefenblau: var(--primary-40);
    --outline-warm-grey-20: var(--creme-20);
    --outline-warm-grey-30: var(--creme-30);
    --outline-warm-grey-40: var(--creme-40);
    --outline-white: var(--neutral-10);
    --outline-grey-30: var(--neutral-30);
    --outline-success: var(--green-40);
    --outline-warning: var(--orange-40);
    --outline-error: var(--red-40);
    --text-light-blue: var(--primary-10);
    --text-azur: var(--primary-20);
    --text-blue: var(--primary-30);
    --text-tiefenblau: var(--primary-40);
    --text-warm-grey-20: var(--creme-20);
    --text-warm-grey-30: var(--creme-30);
    --text-warm-grey-40: var(--creme-40);
    --text-neutral-10: var(--neutral-10);
    --text-neutral-30: var(--neutral-30);
    --text-neutral-40: var(--neutral-40);
    --text-success: var(--green-40);
    --text-warning: var(--orange-40);
    --text-error: var(--red-40);

    --spacing-none: 0rem;
    --spacing-xxs: 0.4rem;
    --spacing-xs: 0.8rem;
    --spacing-sm: 1.2rem;
    --spacing-md: 1.6rem;
    --spacing-lg: 1.8rem;
    --spacing-xl: 2.4rem;
    --spacing-2xl: 2.8rem;
    --spacing-3xl: 3.2rem;
    --spacing-4xl: 4.8rem;
    --spacing-5xl: 6.4rem;
    --spacing-6xl: 8.0rem;
    --spacing-7xl: 9.6rem;
    --spacing-8xl: 12.8rem;
    --spacing-9xl: 16.0rem;

    --radius-none: 0rem;
    --radius-sm: 0.4rem;
    --radius-md: 1.2rem;
    --radius-lg: 4.8rem;
    --radius-full: 999.9rem;

    --toolbar-height: 56px;
}

.background-dark-blue {
    --loader-color: var(--background-blue);
    --background-color: var(--background);
    --color: var(--text);
    --background: var(--background-dark-blue);
    --text: var(--text-negative);
    --forms-text: var(--text-negative);
    --list-icon-color: var(--background-white);
    --text-input: var(--text-positive);
    --text-secondary-label: var(--text-negative);
    --text-highlight: var(--text-negative-highlight);
    --text-headline-hover: var(--text-negative-headline-hover);
    --interaction-default: var(--interaction-negative-default);
    --interaction-hover: var(--interaction-negative-hover);
    --interaction-disabled: var(--interaction-negative-disabled);
    --interaction-default-typo: var(--interaction-negative-default-typo);
    --interaction-focus: var(--interaction-negative-focus);
}

body {
    background-color: var(--background-warm-grey-20);
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
}

@font-face {
    font-family: EnBWDINWebPro;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/enbw_din_pro/EnBWDINWebPro.eot);
    src: url(../fonts/enbw_din_pro/EnBW-DIN-Pro.woff2) format("woff2"), url(../fonts/enbw_din_pro/EnBWDINWebPro.woff) format("woff");
}

@font-face {
    font-family: EnBWDINWebProBold;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/enbw_din_pro/EnBWDINWebPro-Bold.eot);
    src: url(../fonts/enbw_din_pro/EnBW-DIN-Pro-Bold.woff2) format("woff2"), url(../fonts/enbw_din_pro/EnBWDINWebPro-Bold.woff) format("woff");
}

@font-face {
    font-family: MarkOT;
    font-style: normal;
    font-weight: medium;
    src: url(../fonts/mark/MarkOT-Medium.otf);
}

h1, h2, h3, h4, h5, h6, p, a, li, li::marker, code {
    color: var(--text-neutral-40);
}

h1 {
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 120%;
    margin: 0;
    padding: 0;
}

h2 {
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 2.625rem;
    font-weight: 500;
    line-height: 120%;
    margin: 0;
    padding: 0;   
}

h3 {
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    margin: 2.8rem 0 0 0;
    padding: 0;
    line-height: 120%;
}

h4 {
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 120%;
    margin: 0;
    padding: 0;
}

p {
    font-family: EnBWDINWebPro, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: wrap;
    text-wrap: pretty;
    margin: calc(var(--spacing-md) / 2) 0;
}

button {
    height: 60px;
    width: fit-content;
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--background-tiefenblau);
    color: var(--text-neutral-10);
    svg {
        fill: var(--text-neutral-10) !important; 
    } svg:hover {
        fill: var(--text-azur) !important;
    }
}

button:hover {
    background-color: var(--background-azur);
    color: var(--text-neutral-10);
    cursor: pointer;
}

button:focus {
    background-color: var(--background-tiefenblau);
    color: var(--text-neutral-10);
    outline: 2px solid var(--background-azur);
}

a {
    color: var(--text-tiefenblau);
    display: inline-flex;
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    gap: .4rem;
    justify-content: normal;
    line-height: normal;
    max-width: 100%;
    text-underline-offset: .4em;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: var(--text-azur);
    text-decoration-color: var(--);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
}

li {
    font-family: EnBWDINWebPro, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: wrap;
    text-wrap: pretty;
}

li::marker {
    width: 6px;
    height: 6px;
    margin: 0 0.25rem 0 0;
}

ol {
    font-family: EnBWDINWebPro, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: wrap;
    text-wrap: pretty;
}

hr {
    height: 2px;
    width: 100%;
    background-color: var(--background-warm-grey-20);
    border: none;
    margin: 0;
}

svg {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

svg[class^="nbw-icon-"], svg[class*=" nbw-icon-"] {
    fill: var(--text-tiefenblau);
}

svg[class^="nbw-icon-"]:hover, svg[class*=" nbw-icon-"]:hover {
    fill: var(--text-azur);
}

a:hover svg[class^="nbw-icon-"], a:hover svg[class*=" nbw-icon-"] {
    fill: var(--text-azur);
}

svg[class="nbw-icon-home"] {
    fill: var(--text-neutral-10) !important;
}

a:hover svg[class="nbw-icon-home"] {
    fill: var(--text-azur) !important;
}

svg > use {
    pointer-events: none;
}

header {
    width: 100%;
    height: var(--toolbar-height);
    background-color: var(--background-white);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    box-shadow: 0 12px 40px #2b2b2b14;
    z-index: 99;
}

#header-home {
    width: var(--toolbar-height);
    height: var(--toolbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-tiefenblau);
}

/* ?????? */
#header-home .icon {
    color: var(--text-neutral-10);
}

#header-logo {
    height: var(--toolbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#header-logo img {
    margin-left: var(--spacing-xl);
    height: 30px;
}

#header-title {
    height: var(--toolbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#header-title h1 {
    margin-left: var(--spacing-xl);
}

#mkdocs_search_modal {
    position: fixed;
    z-index: 99;
    background: #00000000 !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#search-modal {
    height: calc(100% - var(--toolbar-height) * 2);
    background-color: var(--background-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--outline-warm-grey-30);
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#search-modal-header {
    background-color: var(--background-warm-grey-20);
    padding: 3.2rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

#search-modal-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.2rem;
}

#mkdocs-search-results {
    padding: 3.2rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    article h3 {
        margin: 0;
    }
}

#no-search-results {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.nbw-icon-flash-off {
    transform: scale(3);
    use {
        fill: var(--text-neutral-40);
    }
}

#no-search-results div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.close-modal {
    color: var(--text-tiefenblau);
    display: inline-flex;
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
}

.flex-spacer {
    flex: 1;
}

.card {
    background-color: var(--background-white);
    /* border-radius: var(--radius-md); */
    box-shadow: 0 12px 24px rgb(43 43 43 / 8%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-none);
    justify-content: flex-start;
}

.card-title-container {
    display: flex;
    padding: 1.5rem 3.2rem 1.5rem 3.2rem;
    justify-content: space-between;
    align-items: center;
}

.hidden {
    display: none;
}

.page-nav-card {
    height: calc(100vh - var(--toolbar-height) - 2 * var(--spacing-xl));
    position: sticky;
    top: calc(var(--toolbar-height) + var(--spacing-xl));
}

.document-nav-card {
    height: 100%;
}

.page-nav, .document-nav {
    overflow-y: auto;
    height: 100%;
}

.page-nav ul, .document-nav ul {
    height: fit-content;
    padding: 0;
    margin: 0;
}

.page-nav ul li, .document-nav ul li {
    width: 100%;
    list-style-type: none;
    margin: 0;
    cursor: pointer;
}

.page-nav ul li a, .document-nav ul li a {
    border-left: solid var(--background-white) 6px;
    width: calc(100% - 6.4rem - 6px);
    padding: 1.6rem calc(3.2rem + 6px) 1.6rem calc(3.2rem - 6px);
    text-wrap: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-nav ul li a:hover, .document-nav ul li a:hover {
    border-color: var(--background-warm-grey-20);
    background-color: var(--background-warm-grey-20);
    color: var(--text-azur);
    text-decoration-color: var(--text-azur);
}

.page-nav ul li.active a, .document-nav ul li.active a {
    border-color: var(--text-azur);
    background-color: var(--background-azur);
    color: var(--text-neutral-10);
}

#page-content {
    padding: 3.2rem;
    display: flex;
    justify-content: left;
    flex-direction: column;
    flex: 1;
}

#page-content h1 {
    display: none;
}

#page-content h2 {
    font-family: MarkOT, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    margin: 2.8rem 0 0 0;
    padding: 0;
    line-height: 120%;
    color: var(--text-positive);
}

#page-content p:has(img) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

#page-content img {
    border-radius: var(--radius-md);
    border: solid 1px var(--outline-warm-grey-20);
    max-width: 80%;
    min-width: 200px;
    min-height: 50px;
}

.next-previous {
    padding: 3.2rem;
    background-color: var(--background-warm-grey-20);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.next-previous:has(.prev:only-child) {
    justify-content: flex-start;
}

.next-previous:has(.next:only-child) {
    justify-content: flex-end;
}

.prev, .next {
    height: 24px;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.next {
    text-align: right;
}

#main-content {
    padding: calc(var(--spacing-xl) + var(--toolbar-height)) var(--toolbar-height) var(--spacing-xl) var(--toolbar-height);
    display: grid;
    gap: var(--spacing-5xl);
    grid-template-columns: 360px 1fr;
    grid-template-rows: 1fr;
}

#nav-column {
    height: calc(100vh - var(--toolbar-height) - 2 * var(--spacing-xl));
    position: sticky;
    top: calc(var(--toolbar-height) + var(--spacing-xl));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    grid-area: 1 / 1 / 2 / 2;
}

#nav-column svg {
    display: none;
}

#page-column {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: 360px 1fr;
    grid-template-rows: 1fr;
    grid-area: 1 / 2 / 2 / 3;
}

#content-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-none);
    min-height: 100%;
}

blockquote {
    margin: var(--spacing-md);
    padding: 24px;
    border: solid 1px var(--outline-warm-grey-30);
    background-color: var(--background-warm-grey-20);
    border-radius: var(--radius-md);
}

label:has(.searchbox) {
    display: block;
    width: 100%;
    cursor: text;
}

label:hover .searchbox {
    background-color: var(--background-white);
}

.searchbox {
    width: auto;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--background-white);
    border: solid 2px var(--outline-grey-30);
    border-radius: var(--radius-md);
    gap: var(--spacing-xs);
    padding: calc(var(--spacing-lg) - 2px) var(--spacing-md);
}

.searchbox input {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    border: none;
    gap: var(--spacing-xs);
    font-family: EnBWDINWebPro, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 150;
    font-size: 1.6rem;
    color: var(--text-neutral-40);
    outline: none;
    background-color: transparent;
}

.modal-button {
    cursor: pointer;
}

.searchbox input::placeholder {
    color: var(--text-neutral-30);
}

.searchbox:has(input:focus) {
    background-color: var(--background-white);
    border: solid 2px var(--outline-azur);
}

.searchbox:has(input:active) {
    background-color: var(--background-white);
    border: solid 2px var(--outline-tiefenblau);
}

#main-content.main-404 {
    display: flex; 
    flex-direction: column;
    height: calc(100vh - var(--toolbar-height) - var(--gap-xl));
    justify-content: flex-start;
    position: relative;
    width: 1440px;
    transform: translateX(-50%);
    left: 50%;
}

#main-content.main-404 h1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--text-positive);
    margin-top: var(--toolbar-height);
}

#error-message-container button {
    margin: var(--gap-l) 0 0 0;
}

#error-img-container {
    position: absolute;
    bottom: var(--toolbar-height);
    left: 0;
}

.tablet-only {
    display: none;
}

#menu-small-tablet, #mobile-menu, #mobile-menu-pill {
    display: none;
}

.img-overlay {
    position: fixed;
    height: calc(100% - 2* var(--spacing-md));
    width: calc(100% - 2 * var(--spacing-md));
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    backdrop-filter: blur(10px);
    -webkit-background-filer: blur(10px);
    z-index: 101;
    img {
        max-width: 100%;
        border-radius: var(--radius-md);
        border: solid 1px var(--outline-warm-grey-30);
        max-height: 100%;
    } button {
        position: fixed;
        border: none;
        background-color: var(--background-tiefenblau);
        width: calc(24px + 2 * var(--spacing-sm));
        height: fit-content;
        bottom: var(--spacing-2xl);
        padding: var(--spacing-sm);
        border-radius: var(--radius-full);
    }
}

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

    .tablet-only {
        display: block;
    }

    #page-column {
        display: block;
    }
}

@media screen and (max-width: 1400px) {
    #main-content {
        grid-template-columns: 70px 1fr;
    }

    #nav-column {
        width: 70px;
    }

    .document-nav-card, .page-nav-card, #nav-column label:has(.searchbox) {
        display: none;
    }

    #menu-small-tablet {
        display: grid;
        height: 100%;
        grid-template-columns: 70px 1fr;
        grid-template-rows: 70px 1fr;
        row-gap: var(--spacing-md);
    }

    #menu-small-tablet svg {
        display: block;
    }

    #menu-small-tablet .search-icon-container {
        grid-area: 1 / 1 / 2 / 2;
        background-color: var(--background-white);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 12px 24px rgb(43 43 43 / 8%);
    }

    #menu-small-tablet .navigation-bar {
        grid-area: 2 / 1 / 3 / 2;
        background-color: var(--background-white);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-shadow: 0 12px 24px rgb(43 43 43 / 8%);
    }

    #menu-small-tablet .search-icon-container svg, #menu-small-tablet .navigation-bar svg {
        width: 24px;
        height: 24px;
        padding: calc((70px - 24px) / 2) calc((70px - 24px) / 2);
        cursor: pointer;
    }

    #menu-small-tablet .flyout {
        position: absolute;
        bottom: 0;
        left: 0;
        grid-area: 1 / 2 / 3 / 3;
        width: 360px;
        height: calc(100% - 70px - var(--spacing-md));
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
        box-shadow: none;
        background-color: var(--background-light);
    }

    #menu-small-tablet .flyout-header {
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #menu-small-tablet .flyout-header svg {
        padding: calc((70px - 24px) / 2) calc((70px - 24px) / 2);
        cursor: pointer;
    }

    #menu-small-tablet .flyout-nav {
        flex: 1;
        padding: 0 calc((70px - 24px) / 2) calc((70px - 24px) / 2) calc((70px - 24px) / 2);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        ul {
            padding: 0;
        } li {
            list-style-type: none;
            padding: var(--spacing-xs) 0;
            a {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            :hover a {
                color: var(--text-azur);
            } :hover svg {
                fill: var(--text-azur);
            }
        } li.active a {
            color: var(--text-azur);
        } li.active svg {
            fill: var(--text-azur);
        } hr {
            margin: var(--spacing-md) 0;
        }
    }
}

@media screen and (max-width: 900px) {
    #header-home {
        display: none;
    }

    #main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: calc(var(--toolbar-height) + var(--spacing-md)) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    }

    #nav-column {
        display: none;
    }

    #page-column {
        width: 100%;
    }

    #mobile-menu {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        justify-content: center;
        align-items: flex-end;
    }

    #mobile-menu-pill {
        position: fixed;
        bottom: var(--spacing-xl);
        left: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
        background-color: var(--text-tiefenblau);
        border-radius: var(--radius-full);
        transform: translateX(-50%);
        padding: var(--spacing-xs) var(--spacing-xl);
        z-index: 101;
        transition: bottom .1s ease-in-out;
    }

    #mobile-menu-pill.out-of-screen {
        bottom: -56px;
    }

    #mobile-menu-pill svg {
        width: 24px;
        height: 24px;
        background-color: var(--background-azur);
        border-radius: var(--radius-full);
        fill: var(--text-neutral-10);
        padding: var(--spacing-xs);
    }

    #mobile-menu-modal {
        display: flex;
        flex-direction: column;
        background-color: var(--background-white);
        border: solid 1px var(--outline-warm-grey-30);
        border-radius: var(--radius-sm);
        padding: var(--spacing-md); 
        flex: 1;
        position: relative;
        bottom: calc(2 * var(--spacing-xl) + 56px);
        margin: 0 var(--spacing-md);
        max-height: calc(100% - 2 * var(--spacing-xl) - 56px - 2px - 2 * var(--spacing-md) - var(--spacing-md));
        overflow-y: auto;
        gap: var(--spacing-md);
    }

    #mobile-menu-modal ul {
        padding: 0;
        margin: var(--spacing-xs) 0 0 0;
    }

    #mobile-menu-modal li {
        list-style-type: none;
        padding: var(--spacing-xs) 0;
        height: 24px;
    }

    #mobile-menu-modal li.active a {
        color: var(--text-azur);
    }

    #mobile-menu-modal li.active svg {
        fill: var(--text-azur);
    }

    #mobile-menu-modal li a {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 24px;
    }

    #mobile-menu-header {
        background-color: var(--background-white);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    #mkdocs_search_modal {
        justify-content: center;
        align-items: flex-end;
    }

    #search-modal {
        position: relative;
        bottom: calc(2 * var(--spacing-xl) + 56px);
        width: calc(100% - 2* var(--spacing-md));
        height: calc(100% - var(--spacing-md) - 56px - 2* var(--spacing-xl));
    }

    header {
        width: calc(100% - 2 * var(--spacing-md));
        padding: 0 var(--spacing-md);
    }

    #header-logo img {
        margin: 0;
    }

    #header-title h1 {
        font-size: 2.5rem;
        line-height: 110%;
    }
}