@layer base {
    @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 400 900;
        src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.woff2") format("woff2 supports variations"), url("../fonts/Montserrat/Montserrat-VariableFont_wght.woff2") format("woff2-variations");
    }

    @font-face {
        font-display: swap;
        font-family: "Montserrat";
        font-style: italic;
        font-weight: 400 900;
        src: url("../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.woff2") format("woff2 supports variations"), url("../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.woff2") format("woff2-variations");
    }

    *,
    :before,
    :after {
        border-style: solid;
        border-width: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    * {
        font-size: inherit;
        line-height: inherit;
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100vb;
        text-rendering: optimizespeed;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    address,
    cite {
        font-style: inherit;
        font-weight: inherit;
    }

    a:not([class]) {
        -webkit-text-decoration-skip: ink;
        text-decoration-skip-ink: auto;
    }

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

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    hr {
        border: 0;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        font-family: inherit;
    }

    button {
        background-color: transparent;
    }

    [type=radio],
    [type=checkbox] {
        display: inline-block;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        border-radius: 0;
    }

    option {
        font-weight: 400;
    }

    textarea {
        display: block;
        overflow: auto;
        resize: vertical;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        :before,
        :after {
            -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
            -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    :root {
        --_padding: clamp(2rem, 1.3333333333rem + 2.962962963vw, 4rem);
        font-family: var(--mt-font-family-sans);
        font-size: 1rem;
        line-height: var(--mt-line-height-default);
    }

    body {
        font-size: clamp(1rem, 0.9583333333rem + 0.1851851852vw, 1.125rem);
    }

        body:has(main) {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        body:has(main), body:has(.template-options-page) {
            background-color: var(--mt-color-grey-050);
            padding-top: var(--mt-spacing-700);
            padding-left: var(--mt-spacing-500);
            padding-right: var(--mt-spacing-500);
        }

    div[class^=template] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    main {
        background-color: var(--mt-color-white-100);
        border-top-left-radius: var(--mt-border-radius-300);
        border-top-right-radius: var(--mt-border-radius-300);
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding: var(--_padding);
    }

    @media (width <= 75rem) {
        main {
            margin-left: calc(var(--mt-spacing-500) * -1);
            margin-right: calc(var(--mt-spacing-500) * -1);
        }
    }

    @media (width > 75rem) {
        main {
            border-top-left-radius: var(--mt-border-radius-500);
            border-top-right-radius: var(--mt-border-radius-500);
        }
    }

    :root {
        --outline-color: currentcolor;
        --outline-size: max(2px, 0.1em);
        --outline-style: solid;
    }

    :is(a, button, input, select, summary, textarea):focus, :is(a, button, input, select, summary, textarea):focus-visible {
        outline: var(--outline-size) var(--outline-style) var(--outline-color);
        outline-offset: var(--outline-offset, var(--outline-size));
    }

        :is(a, button, input, select, summary, textarea):focus:not(:focus-visible) {
            outline: none;
        }
}

@layer elements {
    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.1;
    }

    h1, .h1 {
        font-size: clamp(1.5rem, 1.1666666667rem + 1.4814814815vw, 2.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h2, .h2 {
        font-size: clamp(1.375rem, 1.3333333333rem + 0.1851851852vw, 1.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h3, .h3 {
        font-size: clamp(1.25rem, 1.1666666667rem + 0.3703703704vw, 1.5rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h4, .h4 {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h5, .h5 {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
    }

    h6, .h6 {
        font-size: clamp(1rem, 0.9583333333rem + 0.1851851852vw, 1.125rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    .small {
        font-size: clamp(0.875rem, 0.8333333333rem + 0.1851851852vw, 1rem);
    }
}

@layer objects {
    .column-layout {
        -webkit-column-gap: var(--mt-spacing-200);
        -moz-column-gap: var(--mt-spacing-200);
        column-gap: var(--mt-spacing-200);
        display: grid;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        grid-template-areas: "breadcrumb logo options" "heading heading heading" "content content content";
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, -webkit-min-content) minmax(0, 1fr);
        grid-template-rows: repeat(2, min-content) minmax(0, 1fr);
        row-gap: var(--mt-spacing-500);
    }

    [id=dialog] {
        height: 100vb;
        width: 100vi;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: none;
        max-width: none;
        position: fixed;
        z-index: var(--mt-z-index-dialog);
        padding-right: 10px;
    }

    .dialog__viewport {
        background-color: var(--mt-color-grey-050);
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: var(--mt-spacing-700);
        padding-left: var(--mt-spacing-500);
        padding-right: var(--mt-spacing-500);
    }

        .dialog__viewport > .column-layout {
            min-height: 100%;
        }

    .page-content {
        display: grid;
        grid-column: 1/-1;
        grid-row: 2/-1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

    @media (width > 75rem) {
        .sidebar-layout .page-content {
            grid-column-start: 2;
            grid-row-start: 1;
        }
    }

    .page-content__content,
    .page-content__heading {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--mt-size-900);
    }

    @media (width > 75rem) {
        .sidebar-layout .page-content__content,
        .sidebar-layout .page-content__heading {
            z-index: var(--mt-z-index-front);
        }
    }

    .page-content__content {
        grid-area: content;
    }

    .page-content__heading {
        align-self: center;
        grid-area: heading;
    }

    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.1;
    }

    h1, .h1 {
        font-size: clamp(1.5rem, 1.1666666667rem + 1.4814814815vw, 2.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h2, .h2 {
        font-size: clamp(1.375rem, 1.3333333333rem + 0.1851851852vw, 1.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h3, .h3 {
        font-size: clamp(1.25rem, 1.1666666667rem + 0.3703703704vw, 1.5rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h4, .h4 {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h5, .h5 {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
    }

    h6, .h6, .page-header__breadcrumb span {
        font-size: clamp(1rem, 0.9583333333rem + 0.1851851852vw, 1.125rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    .page-header {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        display: grid;
        grid-column: 1/-1;
        grid-row: 1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

    @media (width > 75rem) {
        .sidebar-layout .page-header {
            grid-row-end: -1;
            z-index: var(--mt-z-index-above);
        }
    }

    .page-header__breadcrumb,
    .page-header__icon-group {
        --icon-background-color: var(--mt-color-white-100);
    }

    @media (width > 75rem) {
        .sidebar-layout .page-header__breadcrumb,
        .sidebar-layout .page-header__icon-group {
            --icon-background-color: unset;
        }
    }

    .page-header__breadcrumb {
        -webkit-column-gap: var(--mt-spacing-200);
        -moz-column-gap: var(--mt-spacing-200);
        column-gap: var(--mt-spacing-200);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        grid-area: breadcrumb;
    }

        .page-header__breadcrumb .icon {
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }

        .page-header__breadcrumb span {
            -ms-flex-item-align: center;
            align-self: center;
        }

    @media (width > 75rem) {
        .sidebar-layout .page-header__breadcrumb {
            margin-left: var(--_padding);
        }
    }

    .page-header__icon-group {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        grid-area: options;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    @media (width > 75rem) {
        .sidebar-layout .page-header__icon-group {
            margin-right: var(--_padding);
        }
    }

    .page-header__logo {
        align-self: center;
        grid-area: logo;
        margin-left: auto;
        margin-right: auto;
    }

    @media (width > 75rem) {
        .sidebar-layout .page-header__logo {
            margin-left: 0;
            margin-right: 0;
        }
    }

    .page-header__menu {
        height: 100%;
        grid-area: menu;
    }

    .column-layout .page-header__menu {
        display: none;
    }

    @media (width <= 75rem) {
        .sidebar-layout .page-header__menu {
            display: none !important;
        }
    }

    .page-header__logo ~ .page-header__menu {
        padding-top: var(--mt-spacing-600);
    }

    .sidebar-grid {
        display: grid;
        row-gap: var(--mt-spacing-800);
    }

    @media (width > 60rem) {
        .sidebar-grid {
            height: 100%;
            -webkit-column-gap: var(--mt-spacing-400);
            -moz-column-gap: var(--mt-spacing-400);
            column-gap: var(--mt-spacing-400);
            grid-template-columns: var(--mt-size-100) minmax(0, 1fr);
        }
    }

    .sidebar-grid__sidebar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sidebar-grid__body {
        container-type: inline-size;
    }

    .sidebar-layout {
        -webkit-column-gap: var(--mt-spacing-200);
        -moz-column-gap: var(--mt-spacing-200);
        column-gap: var(--mt-spacing-200);
        display: grid;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        grid-template-areas: "breadcrumb logo options" "heading heading heading" "content content content";
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, minmax(0, -webkit-min-content)) minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, min-content)) minmax(0, 1fr);
        row-gap: var(--mt-spacing-500);
    }

    @media (width > 75rem) {
        .sidebar-layout {
            --_size: 10rem;
            -webkit-column-gap: var(--mt-spacing-600);
            -moz-column-gap: var(--mt-spacing-600);
            column-gap: var(--mt-spacing-600);
            grid-template-areas: "logo . . ." "menu breadcrumb heading options" "menu . content .";
            grid-template-columns: clamp(var(--_size) * 2, 15%, var(--_size) * 3) clamp(var(--_size), 10%, var(--_size) * 2) minmax(0, 1fr) clamp(var(--_size), 10%, var(--_size) * 2);
        }
    }

    .stack > * + * {
        margin-top: var(--mt-spacing-default);
    }
}

@layer components {
    .button {
        --outline-color: var(--mt-color-black-900);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: var(--mt-color-teal-500);
        border-radius: var(--mt-border-radius-300);
        color: var(--mt-color-white-100);
        -webkit-column-gap: var(--mt-spacing-300);
        -moz-column-gap: var(--mt-spacing-300);
        column-gap: var(--mt-spacing-300);
        cursor: pointer;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        width: 100%;
        max-width: var(--mt-size-button);
        padding: var(--mt-spacing-300);
        text-decoration: none;
    }

    .button__icon {
        --_size: 3rem;
        background-color: var(--mt-color-teal-100);
        height: var(--_size);
        border-radius: var(--mt-border-radius-round);
        color: var(--mt-color-black-900);
        display: block;
        fill: currentcolor;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--_size);
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        overflow: hidden;
    }

        .button__icon svg {
            height: 100%;
            display: block;
            fill: currentcolor;
            width: 100%;
        }

    .button-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        gap: var(--mt-spacing-400);
    }

    .button-group__button {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }

    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.1;
    }

    h1, .h1 {
        font-size: clamp(1.5rem, 1.1666666667rem + 1.4814814815vw, 2.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h2, .h2 {
        font-size: clamp(1.375rem, 1.3333333333rem + 0.1851851852vw, 1.5rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    h3, .h3 {
        font-size: clamp(1.25rem, 1.1666666667rem + 0.3703703704vw, 1.5rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h4, .h4, .card:has(.card__image) .card__heading {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
        font-weight: var(--mt-font-weight-medium);
    }

    h5, .h5 {
        font-size: clamp(1.125rem, 1.0833333333rem + 0.1851851852vw, 1.25rem);
    }

    h6, .h6 {
        font-size: clamp(1rem, 0.9583333333rem + 0.1851851852vw, 1.125rem);
        font-weight: var(--mt-font-weight-extrabold);
    }

    .small,
    .card__body p {
        font-size: clamp(0.875rem, 0.8333333333rem + 0.1851851852vw, 1rem);
    }

    .card {
        background-color: var(--mt-color-grey-050);
        border-radius: var(--mt-border-radius-300);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: var(--mt-size-700);
        overflow: hidden;
        padding: var(--mt-spacing-300);
        row-gap: var(--mt-spacing-200);
    }

    .card__header {
        -webkit-column-gap: var(--mt-spacing-200);
        -moz-column-gap: var(--mt-spacing-200);
        column-gap: var(--mt-spacing-200);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .card__heading {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .card__body {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-column-gap: var(--mt-spacing-300);
        -moz-column-gap: var(--mt-spacing-300);
        column-gap: var(--mt-spacing-300);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .card__body p[lang=ar], .card__body p[lang=fa] {
            direction: rtl;
            margin-left: auto;
        }

    .card__icon {
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .card__header .card__icon {
        --_size: 1.5rem;
        padding: 0;
    }

    .card__body .card__icon {
        background-color: var(--mt-color-teal-300);
        border-radius: var(--mt-border-radius-round);
        color: var(--mt-color-teal-700);
        padding: calc(var(--_size) / 6);
    }

    .card__image {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        aspect-ratio: 3/2;
        background-color: var(--mt-color-white-100);
        border-radius: var(--mt-border-radius-300);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: var(--mt-spacing-400);
        overflow: hidden;
        max-height: 12rem;
    }

        .card__image img {
            height: 100%;
            width: 100%;
            -o-object-fit: contain;
            object-fit: contain;
        }

    @container (width > 35rem) {
        .card:has(.card__image) {
            padding: var(--mt-spacing-800);
            row-gap: var(--mt-spacing-300);
        }

            .card:has(.card__image) .card__body .card__icon {
                --_size: 4rem;
            }

            .card:has(.card__image) .card__body + .card__image {
                margin-top: var(--mt-spacing-300);
            }
    }

    .card-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: var(--mt-spacing-400);
        list-style: none;
    }

    .icon {
        --_size: 2.5rem;
        background-color: var(--icon-background-color, var(--mt-color-grey-100));
        border-radius: var(--mt-border-radius-100);
        height: var(--_size);
        cursor: pointer;
        display: block;
        width: var(--_size);
        overflow: hidden;
        padding: calc(var(--_size) / 4);
    }

        .icon svg {
            height: 100%;
            display: block;
            fill: currentcolor;
            width: 100%;
        }

        .icon[data-icon-name=arrow-right] {
            -webkit-transform: scale(-1, -1);
            transform: scale(-1, -1);
        }

        .icon[data-icon-name=heart], .icon[data-icon-name=heart-solid] {
            background-color: transparent;
            border-radius: 0;
            color: var(--mt-color-brown-700);
        }

        .icon[data-icon-name=matchen] {
            background-color: var(--mt-color-white-100);
            border-radius: var(--mt-border-radius-round);
        }

    @media (width > 75rem) {
        .icon[data-icon-name=menu] {
            display: none;
        }
    }

    .icon[data-icon-name=play] {
        background-color: var(--mt-color-teal-300);
        border-radius: var(--mt-border-radius-round);
        color: var(--mt-color-teal-700);
    }

    .icon-button {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-column-gap: var(--mt-spacing-300);
        -moz-column-gap: var(--mt-spacing-300);
        column-gap: var(--mt-spacing-300);
        cursor: pointer;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        font-weight: var(--mt-font-weight-medium);
        width: 100%;
        max-width: var(--mt-size-button);
        text-align: left;
        text-decoration: none;
    }

    .icon-button__icon {
        --_size: 2.5rem;
        background-color: var(--mt-color-grey-500);
        height: var(--_size);
        border-radius: var(--mt-border-radius-100);
        color: var(--mt-color-white-100);
        display: block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--_size);
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        overflow: hidden;
        padding: calc(var(--_size) / 4);
    }

        .icon-button__icon svg {
            height: 100%;
            display: block;
            fill: currentcolor;
            width: 100%;
        }

    .icon-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        gap: var(--mt-spacing-100);
    }

    .language-menu {
        max-width: var(--mt-size-300);
    }

    .language-menu__menu {
        background-color: var(--mt-color-orange-100);
        border-radius: var(--mt-border-radius-300);
        list-style: none;
        overflow: hidden;
        padding-left: var(--mt-spacing-400);
        padding-right: var(--mt-spacing-400);
    }

    .language-menu__menu-item + .language-menu__menu-item {
        border-top: var(--mt-border-width-100) solid var(--mt-color-orange-300);
    }

    .language-menu__menu-item a {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-column-gap: var(--mt-spacing-400);
        -moz-column-gap: var(--mt-spacing-400);
        column-gap: var(--mt-spacing-400);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        padding-top: var(--mt-spacing-400);
        padding-bottom: var(--mt-spacing-400);
        text-decoration: none;
    }

        .language-menu__menu-item a span[lang=ar],
        .language-menu__menu-item a span[lang=fa] {
            direction: rtl;
        }

    .language-menu__menu-item__icon {
        --_size: 2rem;
        background-color: var(--mt-color-white-100);
        border-radius: var(--mt-border-radius-100);
        height: var(--_size);
        content: "";
        display: block;
        fill: currentcolor;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--_size);
        margin-left: auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        overflow: hidden;
        padding: calc(var(--_size) / 6);
    }

        .language-menu__menu-item__icon svg {
            height: 100%;
            display: block;
            fill: currentcolor;
            width: 100%;
        }

    .logo {
        display: block;
        width: 8.5rem;
        overflow: hidden;
    }

        .logo svg {
            height: 100%;
            display: block;
            max-width: 100%;
        }

    .navigation-menu {
        max-width: var(--mt-size-500);
    }

    .navigation-menu,
    .navigation-menu__menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        row-gap: var(--mt-spacing-300);
    }

    .navigation-menu__menu {
        list-style: none;
    }

    .navigation-menu__heading {
        font-size: 1rem;
        font-weight: inherit;
        text-transform: uppercase;
    }

    .options-menu {
        --_row-gap: var(--mt-spacing-600);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-bottom: var(--mt-spacing-700);
        row-gap: var(--_row-gap);
    }

    .options-menu__icon[data-icon-name=matchen] {
        margin-top: auto;
    }

    .options-menu__navigation-menu + .options-menu__navigation-menu {
        border-top: var(--mt-border-width-100) solid var(--mt-color-grey-100);
        padding-top: var(--_row-gap);
    }

    .visually-hidden,
    .search-bar__label {
        height: 1px;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        width: 1px;
        margin: 0;
        overflow: hidden;
        position: absolute !important;
        white-space: nowrap;
    }

    .search-bar {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: var(--mt-color-grey-050);
        border-radius: var(--mt-border-radius-300);
        -webkit-column-gap: var(--mt-spacing-400);
        -moz-column-gap: var(--mt-spacing-400);
        column-gap: var(--mt-spacing-400);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        /*max-width: var(--mt-size-500);*/
        overflow: hidden;
        padding-right: var(--mt-spacing-400);
    }

        .search-bar:has(.search-bar__input:focus, .search-bar__input:focus-visible) {
            outline: var(--outline-size) var(--outline-style) var(--outline-color);
            outline-offset: var(--outline-offset, var(--outline-size));
        }

    .search-bar__label {
        display: none;
    }

    .search-bar__input {
        background-color: transparent;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 100%;
        outline: none;
        padding: var(--mt-spacing-400);
        padding-right: 0;
    }

    .search-bar__button {
        background-color: transparent;
        border-radius: var(--mt-border-radius-100);
        cursor: pointer;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        overflow: hidden;
    }

    .search-bar__button__icon {
        --_size: 2rem;
        background-color: var(--mt-color-white-100);
        height: var(--_size);
        content: "";
        display: block;
        fill: currentcolor;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--_size);
        margin-left: auto;
        padding: calc(var(--_size) / 6);
    }

        .search-bar__button__icon svg {
            height: 100%;
            display: block;
            fill: currentcolor;
            width: 100%;
        }

    .tabs {
        max-width: var(--mt-size-700);
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .tabs__menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        font-size: clamp(0.875rem, 0.8333333333rem + 0.1851851852vw, 1rem);
        line-height: var(--mt-line-height-100);
        list-style: none;
        white-space: nowrap;
    }

    .tabs__menu-item a {
        --outline-offset: calc(var(--outline-size) * -1);
        border-bottom: var(--mt-border-width-100) solid var(--mt-color-grey-300);
        display: block;
        padding-top: var(--mt-spacing-100);
        padding-bottom: var(--mt-spacing-100);
        padding-left: var(--mt-spacing-300);
        padding-right: var(--mt-spacing-300);
        text-decoration: none;
    }

        .tabs__menu-item a[aria-current=page] {
            border-bottom-color: var(--mt-color-brown-700);
            font-weight: var(--mt-font-weight-medium);
        }

    .toggle {
        --_border-width: var(--mt-border-width-200);
        --_size: 1.25rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: transparent;
        -webkit-column-gap: var(--mt-spacing-200);
        -moz-column-gap: var(--mt-spacing-200);
        column-gap: var(--mt-spacing-200);
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        position: relative;
        text-align: left;
    }

        .toggle:before, .toggle:after {
            content: "";
            -webkit-transition-duration: var(--mt-transition-duration-medium);
            transition-duration: var(--mt-transition-duration-medium);
            -webkit-transition-timing-function: var(--mt-easing-function-cubic);
            transition-timing-function: var(--mt-easing-function-cubic);
        }

        .toggle:before {
            background-color: var(--mt-color-teal-300);
            height: var(--_size);
            border-color: transparent;
            border-radius: calc(var(--_size) + var(--_border-width));
            border-width: var(--_border-width);
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            width: calc(var(--_size) * 2);
            -webkit-transition-property: background-color;
            transition-property: background-color;
        }

        .toggle:after {
            background-color: var(--mt-color-white-100);
            height: var(--_size);
            border-radius: var(--mt-border-radius-round);
            width: var(--_size);
            left: 0;
            margin: var(--_border-width);
            position: absolute;
            -webkit-transition-property: -webkit-transform;
            transition-property: -webkit-transform;
            transition-property: transform;
            transition-property: transform, -webkit-transform;
        }

        .toggle[aria-pressed=true]:before {
            background-color: var(--mt-color-teal-500);
        }

        .toggle[aria-pressed=true]:after {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }

    .word-list,
    .word-list__words {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        row-gap: var(--mt-spacing-200);
    }

    .word-list {
        height: clamp(var(--mt-size-100), 90vb, var(--mt-size-200));
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        list-style-type: lower-alpha;
        /*max-width: var(--mt-size-500);*/
        overflow: auto;
        padding-bottom: var(--mt-spacing-200);
    }

    .word-list__letter span {
        --_size: calc((1em * var(--mt-line-height-default)) + (var(--mt-spacing-100) * 2));
        background-color: var(--mt-color-grey-500);
        border-radius: var(--mt-border-radius-100);
        height: var(--_size);
        color: var(--mt-color-white-100);
        display: block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--_size);
        line-height: var(--_size);
        margin-bottom: var(--mt-spacing-200);
        overflow: hidden;
        text-align: center;
        text-transform: uppercase;
    }

    @media (width > 60rem) {
        .word-list__letter {
            -webkit-column-gap: var(--mt-spacing-200);
            -moz-column-gap: var(--mt-spacing-200);
            column-gap: var(--mt-spacing-200);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
        }

            .word-list__letter span {
                top: 0;
                margin-bottom: 0;
                position: sticky;
            }

        .card__image {
            max-height: none;
        }
    }

    .word-list__words {
        width: 100%;
        list-style: none;
    }

    .word-list__word > a {
        background-color: var(--mt-color-grey-050);
        border-radius: var(--mt-border-radius-100);
        display: block;
        padding-top: var(--mt-spacing-100);
        padding-bottom: var(--mt-spacing-100);
        padding-left: var(--mt-spacing-300);
        padding-right: var(--mt-spacing-300);
        text-decoration: none;
    }

    @media (width <= 60rem) {
        .word-list__word > a {
            display: none;
        }
    }

    @media (width > 60rem) {
        .word-list__card {
            display: none;
        }
    }
}

@layer scope {
    @media (width <= 60rem) {
        .template-dictionary .page-content {
            padding-bottom: 0;
        }

        .template-dictionary .sidebar-grid {
            height: 100%;
        }

        .template-dictionary .sidebar-grid__body {
            display: none;
        }
    }

    .template-options-page main {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .template-options-page .column-layout {
        grid-template-areas: ". logo options" "menu menu menu";
        grid-template-rows: -webkit-min-content 1fr;
        grid-template-rows: min-content 1fr;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--mt-size-300);
    }

        .template-options-page .column-layout .page-header {
            grid-row: 1/-1;
        }

        .template-options-page .column-layout .page-header__menu {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
        }

    @media (width > 60rem) {
        .template-subtheme-selection .sidebar-layout .page-header__breadcrumb span,
        .template-theme .sidebar-layout .page-header__breadcrumb span {
            display: none;
        }
    }

    @media (width <= 60rem) {
        .template-subtheme-selection .sidebar-layout,
        .template-theme .sidebar-layout {
            grid-template-areas: "breadcrumb breadcrumb options" "heading heading heading" "content content content";
        }

            .template-subtheme-selection .sidebar-layout .page-header__logo,
            .template-theme .sidebar-layout .page-header__logo {
                display: none;
            }
    }

    @media (width <= 60rem) {
        .template-theme .sidebar-layout .page-content__heading {
            display: none;
        }
    }
}

@layer utilities {
    :root {
        --mt-easing-function-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    :root {
        --mt-transition-duration-fast: 150ms;
        --mt-transition-duration-medium: 300ms;
        --mt-transition-duration-slow: 600ms;
    }

    :root {
        --mt-border-radius-100: 0.625rem;
        --mt-border-radius-200: 1.25rem;
        --mt-border-radius-300: 1.526rem;
        --mt-border-radius-500: 3.125rem;
        --mt-border-radius-round: 100%;
    }

    :root {
        --mt-border-width-100: 1px;
        --mt-border-width-200: 2px;
    }

    :root {
        --mt-color-black-900: hsl(0, 0%, 0%);
        --mt-color-blue-100: hsl(186, 63%, 94%);
        --mt-color-blue-300: hsl(187, 62%, 81%);
        --mt-color-blue-500: hsl(187, 61%, 57%);
        --mt-color-blue-700: hsl(187, 100%, 38%);
        --mt-color-brown-100: hsl(25, 66%, 94%);
        --mt-color-brown-300: hsl(24, 67%, 83%);
        --mt-color-brown-500: hsl(24, 68%, 61%);
        --mt-color-brown-700: hsl(24, 85%, 44%);
        --mt-color-grey-050: hsl(240, 22%, 96%);
        --mt-color-grey-100: hsl(240, 9%, 93%);
        --mt-color-grey-300: hsl(0, 0%, 85%);
        --mt-color-grey-500: hsl(0, 0%, 47%);
        --mt-color-grey-700: hsl(0, 1%, 25%);
        --mt-color-orange-050: hsl(35, 86%, 97%);
        --mt-color-orange-100: hsl(36, 93%, 95%);
        --mt-color-orange-300: hsl(35, 90%, 84%);
        --mt-color-orange-500: hsl(35, 91%, 64%);
        --mt-color-orange-700: hsl(35, 100%, 48%);
        --mt-color-teal-100: hsl(214, 23%, 94%);
        --mt-color-teal-300: hsl(195, 22%, 82%);
        --mt-color-teal-500: hsl(194, 22%, 52%);
        --mt-color-teal-700: hsl(194, 32%, 40%);
        --mt-color-white-100: hsl(0, 0%, 100%);
    }

    .inline-size-050 {
        width: 15rem !important;
    }

    .inline-size-100 {
        width: 22.5rem !important;
    }

    .inline-size-200 {
        width: 25rem !important;
    }

    .inline-size-300 {
        width: 27.5rem !important;
    }

    .inline-size-400 {
        width: 30rem !important;
    }

    .inline-size-500 {
        width: 35rem !important;
    }

    .inline-size-600 {
        width: 40rem !important;
    }

    .inline-size-700 {
        width: 50rem !important;
    }

    .inline-size-800 {
        width: 60rem !important;
    }

    .inline-size-900 {
        width: 75rem !important;
    }

    .inline-size-button {
        width: 20rem !important;
    }

    .max-inline-size-050 {
        max-width: 15rem !important;
    }

    .max-inline-size-100 {
        max-width: 22.5rem !important;
    }

    .max-inline-size-200 {
        max-width: 25rem !important;
    }

    .max-inline-size-300 {
        max-width: 27.5rem !important;
    }

    .max-inline-size-400 {
        max-width: 30rem !important;
    }

    .max-inline-size-500 {
        max-width: 35rem !important;
    }

    .max-inline-size-600 {
        max-width: 40rem !important;
    }

    .max-inline-size-700 {
        max-width: 50rem !important;
    }

    .max-inline-size-800 {
        max-width: 60rem !important;
    }

    .max-inline-size-900 {
        max-width: 75rem !important;
    }

    .max-inline-size-button {
        max-width: 20rem !important;
    }

    :root {
        --mt-size-050: 15rem;
        --mt-size-100: 22.5rem;
        --mt-size-200: 25rem;
        --mt-size-300: 27.5rem;
        --mt-size-400: 30rem;
        --mt-size-500: 35rem;
        --mt-size-600: 40rem;
        --mt-size-700: 50rem;
        --mt-size-800: 60rem;
        --mt-size-900: 75rem;
        --mt-size-button: 20rem;
    }

    .margin-block-default {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .margin-block-100 {
        margin-top: 0.625rem !important;
        margin-bottom: 0.625rem !important;
    }

    .margin-block-200 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .margin-block-300 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    .margin-block-400 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .margin-block-500 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .margin-block-600 {
        margin-top: 2.5rem !important;
        margin-bottom: 2.5rem !important;
    }

    .margin-block-700 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .margin-block-800 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .margin-block-900 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .margin-block-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .margin-block-start-default {
        margin-top: 1rem !important;
    }

    .margin-block-start-100 {
        margin-top: 0.625rem !important;
    }

    .margin-block-start-200 {
        margin-top: 1rem !important;
    }

    .margin-block-start-300 {
        margin-top: 1.25rem !important;
    }

    .margin-block-start-400 {
        margin-top: 1.5rem !important;
    }

    .margin-block-start-500 {
        margin-top: 2rem;
    }

    .margin-block-start-600 {
        margin-top: 2.5rem;
    }

    .margin-block-start-700 {
        margin-top: 3rem !important;
    }

    .margin-block-start-800 {
        margin-top: 4rem !important;
    }

    .margin-block-start-900 {
        margin-top: 5rem !important;
    }

    .margin-block-start-0 {
        margin-top: 0 !important;
    }

    .margin-block-end-default {
        margin-bottom: 1rem !important;
    }

    .margin-block-end-100 {
        margin-bottom: 0.625rem !important;
    }

    .margin-block-end-200 {
        margin-bottom: 1rem !important;
    }

    .margin-block-end-300 {
        margin-bottom: 1.25rem !important;
    }

    .margin-block-end-400 {
        margin-bottom: 1.5rem !important;
    }

    .margin-block-end-500 {
        margin-bottom: 2rem !important;
    }

    .margin-block-end-600 {
        margin-bottom: 2.5rem !important;
    }

    .margin-block-end-700 {
        margin-bottom: 3rem !important;
    }

    .margin-block-end-800 {
        margin-bottom: 4rem !important;
    }

    .margin-block-end-900 {
        margin-bottom: 5rem !important;
    }

    .margin-block-end-0 {
        margin-bottom: 0 !important;
    }

    .margin-inline-default {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .margin-inline-100 {
        margin-left: 0.625rem !important;
        margin-right: 0.625rem !important;
    }

    .margin-inline-200 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .margin-inline-300 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important;
    }

    .margin-inline-400 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }

    .margin-inline-500 {
        margin-left: 2rem !important;
        margin-right: 2rem !important;
    }

    .margin-inline-600 {
        margin-left: 2.5rem !important;
        margin-right: 2.5rem !important;
    }

    .margin-inline-700 {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .margin-inline-800 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .margin-inline-900 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .margin-inline-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .margin-inline-start-default {
        margin-left: 1rem !important;
    }

    .margin-inline-start-100 {
        margin-left: 0.625rem !important;
    }

    .margin-inline-start-200 {
        margin-left: 1rem !important;
    }

    .margin-inline-start-300 {
        margin-left: 1.25rem !important;
    }

    .margin-inline-start-400 {
        margin-left: 1.5rem !important;
    }

    .margin-inline-start-500 {
        margin-left: 2rem !important;
    }

    .margin-inline-start-600 {
        margin-left: 2.5rem !important;
    }

    .margin-inline-start-700 {
        margin-left: 3rem !important;
    }

    .margin-inline-start-800 {
        margin-left: 4rem !important;
    }

    .margin-inline-start-900 {
        margin-left: 5rem !important;
    }

    .margin-inline-start-0 {
        margin-left: 0 !important;
    }

    .margin-inline-end-default {
        margin-right: 1rem !important;
    }

    .margin-inline-end-100 {
        margin-right: 0.625rem !important;
    }

    .margin-inline-end-200 {
        margin-right: 1rem !important;
    }

    .margin-inline-end-300 {
        margin-right: 1.25rem !important;
    }

    .margin-inline-end-400 {
        margin-right: 1.5rem !important;
    }

    .margin-inline-end-500 {
        margin-right: 2rem !important;
    }

    .margin-inline-end-600 {
        margin-right: 2.5rem !important;
    }

    .margin-inline-end-700 {
        margin-right: 3rem !important;
    }

    .margin-inline-end-800 {
        margin-right: 4rem !important;
    }

    .margin-inline-end-900 {
        margin-right: 5rem !important;
    }

    .margin-inline-end-0 {
        margin-right: 0 !important;
    }

    .padding-block-default {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .padding-block-100 {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    .padding-block-200 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .padding-block-300 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .padding-block-400 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .padding-block-500 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .padding-block-600 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .padding-block-700 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .padding-block-800 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .padding-block-900 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .padding-block-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .padding-block-start-default {
        padding-top: 1rem !important;
    }

    .padding-block-start-100 {
        padding-top: 0.625rem !important;
    }

    .padding-block-start-200 {
        padding-top: 1rem !important;
    }

    .padding-block-start-300 {
        padding-top: 1.25rem !important;
    }

    .padding-block-start-400 {
        padding-top: 1.5rem !important;
    }

    .padding-block-start-500 {
        padding-top: 2rem !important;
    }

    .padding-block-start-600 {
        padding-top: 2.5rem !important;
    }

    .padding-block-start-700 {
        padding-top: 3rem !important;
    }

    .padding-block-start-800 {
        padding-top: 4rem !important;
    }

    .padding-block-start-900 {
        padding-top: 5rem !important;
    }

    .padding-block-start-0 {
        padding-top: 0 !important;
    }

    .padding-block-end-default {
        padding-bottom: 1rem !important;
    }

    .padding-block-end-100 {
        padding-bottom: 0.625rem !important;
    }

    .padding-block-end-200 {
        padding-bottom: 1rem !important;
    }

    .padding-block-end-300 {
        padding-bottom: 1.25rem !important;
    }

    .padding-block-end-400 {
        padding-bottom: 1.5rem !important;
    }

    .padding-block-end-500 {
        padding-bottom: 2rem !important;
    }

    .padding-block-end-600 {
        padding-bottom: 2.5rem !important;
    }

    .padding-block-end-700 {
        padding-bottom: 3rem !important;
    }

    .padding-block-end-800 {
        padding-bottom: 4rem !important;
    }

    .padding-block-end-900 {
        padding-bottom: 5rem !important;
    }

    .padding-block-end-0 {
        padding-bottom: 0 !important;
    }

    .padding-inline-default {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .padding-inline-100 {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }

    .padding-inline-200 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .padding-inline-300 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .padding-inline-400 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .padding-inline-500 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .padding-inline-600 {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    .padding-inline-700 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .padding-inline-800 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .padding-inline-900 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .padding-inline-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .padding-inline-start-default {
        padding-left: 1rem !important;
    }

    .padding-inline-start-100 {
        padding-left: 0.625rem !important;
    }

    .padding-inline-start-200 {
        padding-left: 1rem !important;
    }

    .padding-inline-start-300 {
        padding-left: 1.25rem !important;
    }

    .padding-inline-start-400 {
        padding-left: 1.5rem !important;
    }

    .padding-inline-start-500 {
        padding-left: 2rem !important;
    }

    .padding-inline-start-600 {
        padding-left: 2.5rem !important;
    }

    .padding-inline-start-700 {
        padding-left: 3rem !important;
    }

    .padding-inline-start-800 {
        padding-left: 4rem !important;
    }

    .padding-inline-start-900 {
        padding-left: 5rem !important;
    }

    .padding-inline-start-0 {
        padding-left: 0 !important;
    }

    .padding-inline-end-default {
        padding-right: 1rem !important;
    }

    .padding-inline-end-100 {
        padding-right: 0.625rem !important;
    }

    .padding-inline-end-200 {
        padding-right: 1rem !important;
    }

    .padding-inline-end-300 {
        padding-right: 1.25rem !important;
    }

    .padding-inline-end-400 {
        padding-right: 1.5rem !important;
    }

    .padding-inline-end-500 {
        padding-right: 2rem !important;
    }

    .padding-inline-end-600 {
        padding-right: 2.5rem !important;
    }

    .padding-inline-end-700 {
        padding-right: 3rem !important;
    }

    .padding-inline-end-800 {
        padding-right: 4rem !important;
    }

    .padding-inline-end-900 {
        padding-right: 5rem !important;
    }

    .padding-inline-end-0 {
        padding-right: 0 !important;
    }

    :root {
        --mt-spacing-default: 1rem;
        --mt-spacing-100: 0.625rem;
        --mt-spacing-200: 1rem;
        --mt-spacing-300: 1.25rem;
        --mt-spacing-400: 1.5rem;
        --mt-spacing-500: 2rem;
        --mt-spacing-600: 2.5rem;
        --mt-spacing-700: 3rem;
        --mt-spacing-800: 4rem;
        --mt-spacing-900: 5rem;
    }

    :root {
        --mt-font-family-display: sans-serif;
        --mt-font-family-mono: monospace;
        --mt-font-family-sans: "Montserrat", "Helvetica", "Arial", sans-serif;
        --mt-font-family-serif: serif;
    }

    :root {
        --mt-font-weight-thin: 100;
        --mt-font-weight-extralight: 200;
        --mt-font-weight-light: 300;
        --mt-font-weight-regular: 400;
        --mt-font-weight-medium: 500;
        --mt-font-weight-semibold: 600;
        --mt-font-weight-bold: 700;
        --mt-font-weight-extrabold: 800;
        --mt-font-weight-black: 900;
    }

    :root {
        --mt-line-height-default: 1.5;
        --mt-line-height-100: 1.1;
        --mt-line-height-900: 1.5;
    }

    .visually-hidden {
        height: 1px;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        width: 1px;
        margin: 0;
        overflow: hidden;
        position: absolute !important;
        white-space: nowrap;
    }

    :root {
        --mt-z-index-back: -2;
        --mt-z-index-below: -1;
        --mt-z-index-root: 0;
        --mt-z-index-above: 1;
        --mt-z-index-front: 2;
        --mt-z-index-dialog: 9000;
    }
}

@layer base, elements, objects, components, scope, utilities;

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

body {
    overflow-y: scroll !important;
}

html:has(div[role=dialog]) {
    /* remove the main scrollbar when dialog is open */
    overflow: hidden;
}

/*.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mt-color-grey-050);
    display: flex;
    justify-content: top;
    align-items: top;
    z-index: 1050;
    padding-top: var(--mt-spacing-700);
    padding-left: var(--mt-spacing-500);
    padding-right: var(--mt-spacing-500);
}

.popup .page-content {
    overflow-y: auto;
    overflow-x: hidden;
}*/

.fade-in {
    animation: 200ms ease-out 0s ModalFadeIn;
}

.fade-out {
    animation: 200ms ease-out 0s ModalFadeOut;
    opacity: 0;
}

@keyframes ModalFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ModalFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

a {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
    /*background: red;*/
}

::-webkit-scrollbar-track {
    background: #c0c0c3;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

@media (width <= 75rem) {
    .card-list {
        gap: 1rem;
    }

    .page-content {
        padding-top: 1.5rem;
    }

    .margin-block-start-600 {
        margin-top: 1rem;
    }

    .margin-block-start-500 {
        margin-top: 1rem;
    }
}