:root {
    /* colors */
    --color-utils-red: #c00;
    --color-utils-blue: #00aecd;
    --color-utils-black: #0c0c0c;
    --color-utils-white: #fff;
    --color-utils-gray-dark: #2c2c2c;
    --color-utils-gray: #404040;
    --color-utils-gray-light: #6e6e6e;
    --color-utils-gray-lighter: #b1b1b1;
    --color-utils-offwhite: #e6e6e6;
    --color-utils-red-light: #f50000;
    --color-opacity-black-50: rgb(0 0 0 / 50%);
    --color-opacity-black-75: rgb(0 0 0 / 75%);
    --color-opacity-black-100: rgb(0 0 0 / 100%);

    /* layout */
    --border-radius-xsmall: 2px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-width-none: 0;
    --border-width-xsmall: 2px;
    --border-radius-50: 50%;
    --border-width-small: 1px;
    --border-width-medium: 2px;
    --border-width-large: 4px;
    --content-spacing-xsmall: 4px;
    --content-spacing-small: 8px;
    --content-spacing-medium: 12px;
    --content-spacing-large: 16px;
    --content-spacing-xlarge: 24px;
    --content-spacing-xxlarge: 32px;
    --content-spacing-xxxlarge: 40px;

    /* dimensions */
    --header-advertising-width: 970px;
    --header-advertising-height: 250px;
    --article-advertising-width: 300px;
    --article-advertising-height: 250px;
    --nav-height: 40px;
    --nav-button-height: 32px;
    --nav-button-height-mobile: 40px;
    --footer-height: 32px;
    --icon-size: 32px;
    --icon-size-medium: 28px;
    --icon-size-small: 24px;
    --icon-size-tiny: 16px;

    /* fonts */
    --font-size-small: 12px;
    --font-size-medium: 16px;
    --font-size-large: 20px;
    --font-size-xlarge: 24px;
    --font-size-xxlarge: 32px;
    --font-size-xxxlarge: 40px;
    --font-weight-less-bold: 400;
    --font-weight-bold: 500;
    --font-weight-more-bold: 600;
    --font-family-default: sans-serif;

    /* transitions */
    --transition-default: all 0.3s ease;

    /* z-index */
    --index-important: 1000;
    --index-advertisement: 400;
    --index-somewhatimportant: 600;
    --index-content: 80;
    --indxe-content-title: 90;
    --index-nav: 100;
    --index-nav-input: 101;
    --index-nav-label: 102;
    --index-nav-mobile: 500;
    --index-header: 100;
    --index-header-button: 101;
    --index-dropdown: 200;
    --index-dropdown-input: 201;
    --index-dropdown-label: 202;

    /* theme */
    --theme-rtl-toggle-switch-position: 0;
    --theme-border-width-small: 1px;
    --theme-border-width-medium: 2px;
    --theme-small-border: var(--theme-border-width-small) solid transparent;
    --theme-medium-border: var(--theme-border-width-medium) solid transparent;
    --theme-text-decoration: none;
    --theme-advertisement-copy: var(--color-utils-gray-lighter);
    --theme-advertisement-icon-fill: var(--color-utils-blue);
    --theme-advertisement-icon-background: var(--color-utils-white);
    --theme-ui-background: var(--color-utils-white);
    --theme-ui-foreground: var(--color-utils-black);
    --theme-dialog-background: var(--color-utils-white);
    --theme-toast-background: var(--color-opacity-black-75);
    --theme-message-background: var(--color-utils-red);
    --theme-modal-background: var(--color-opacity-black-50);
    --theme-toggle-switch: var(--color-utils-red);
    --theme-toggle-background: var(--color-utils-gray-lighter);
    --theme-toggle-foreground: var(--color-utils-gray);
    --theme-link-highlight: var(--color-utils-red);
    --theme-link-color: var(--color-utils-black);
    --theme-link-hover: var(--color-utils-gray-light);
    --theme-link-background: var(--color-utils-offwhite);
    --theme-text-highlight: var(--color-utils-red-light);
    --theme-text-lighter: var(--color-utils-white);
    --theme-text-light: var(--color-utils-offwhite);
    --theme-text-medium: var(--color-utils-gray-light);
    --theme-text-dark: var(--color-utils-black);
    --theme-image-placeholder: var(--color-utils-offwhite);
    --theme-tag-background-red: var(--color-utils-red);
    --theme-tag-background-gray: var(--color-utils-gray);
    --theme-icon-fill-lighter: var(--color-utils-white);
    --theme-icon-fill-light: var(--color-utils-offwhite);
    --theme-icon-fill-medium: var(--color-utils-gray-light);
    --theme-icon-fill-dark: var(--color-utils-black);
    --theme-button-light-text: var(--color-utils-black);
    --theme-button-light-text-hover: var(--color-utils-gray-light);
    --theme-button-light-background: var(--color-utils-offwhite);
    --theme-button-light-background-hover: var(--color-utils-white);
    --theme-button-dark-text: var(--color-utils-offwhite);
    --theme-button-dark-text-hover: var(--color-utils-white);
    --theme-button-dark-background: var(--color-utils-black);
    --theme-button-dark-background-hover: var(--color-utils-gray-light);
    --theme-navigation-text: var(--color-utils-offwhite);
    --theme-navigation-text-hover: var(--color-utils-white);
    --theme-navigation-background: transparent;
    --theme-navigation-background-hover: var(--color-utils-gray);
    --theme-navigation-background-active: var(--color-utils-gray-light);
}
/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

/* defaults */
input,
button {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
}

input {
    appearance: initial;
}

svg {
    width: 100%;
    height: 100%;
}

/* next / nuxt specific */
/* stylelint-disable */
#__next,
#__nuxt {
    width: 100%;
    min-width: 300px;
    height: 100%;
}
/* stylelint-enable */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
/* stylelint-disable */
.animated-icon {
    --animated-icon-background: #333;
    --animated-icon-color: #ccc;
    --animated-icon-hover: #fff;
    --animated-icon-width: 32px;
    --animated-icon-height: 4px;
    --animated-icon-width-half: calc(var(--animated-icon-width) / 2);
    --animated-icon-height-half: calc(var(--animated-icon-height) / 2);
    --animated-icon-height-half-negative: calc(var(--animated-icon-height-half) * -1);
    --animated-icon-center: calc(var(--animated-icon-width-half) - var(--animated-icon-height-half));
    --animated-icon-center-negative: calc(var(--animated-icon-center) * -1);
    --animated-icon-bar-spacing: calc(((var(--animated-icon-width) - 3 * var(--animated-icon-height)) / 4) + var(--animated-icon-height));
    --animated-icon-bar-spacing-negative: calc(var(--animated-icon-bar-spacing) * -1);

    --language-direction-adjustment: 1;

    width: var(--animated-icon-width);
    height: var(--animated-icon-width);
    background-color: var(--animated-icon-background);
}

html[dir="rtl"] .animated-icon {
    --language-direction-adjustment: -1;
}

.animated-icon-inner {
    display: block;
    position: absolute;
    transform-origin: calc(var(--animated-icon-width-half) * var(--language-direction-adjustment)) var(--animated-icon-height-half);
    transform: translate(0, var(--animated-icon-center)) rotate(0deg);
    transition: all 0.3s ease;
}

.animated-icon-inner span {
    width: var(--animated-icon-width);
    height: var(--animated-icon-height);
    display: block;
    background-color: var(--animated-icon-color);
    position: absolute;
    transition: all 0.3s ease;
}

.animated-icon:hover .animated-icon-inner span {
    background-color: var(--animated-icon-hover);
}

/* close icon */
.close-icon .animated-icon-inner span:nth-child(1) {
    transform: rotate(45deg);
}

.close-icon .animated-icon-inner span:nth-child(2) {
    transform: rotate(-45deg);
}

.close-icon.hover:hover .animated-icon-inner {
    transform: translate(0, var(--animated-icon-center)) rotate(90deg);
}

/* hamburger icon */
.hamburger-icon .animated-icon-inner {
    transform: translate(calc(var(--animated-icon-center) * var(--language-direction-adjustment)), var(--animated-icon-center)) rotate(0deg);
}

.hamburger-icon .animated-icon-inner span {
    left: var(--animated-icon-center-negative);
}

.hamburger-icon .animated-icon-inner span:nth-child(1) {
    transform: translate(0, var(--animated-icon-bar-spacing-negative));
}

.hamburger-icon .animated-icon-inner span:nth-child(3) {
    transform: translate(0, var(--animated-icon-bar-spacing));
}

.hamburger-icon.hover:hover .animated-icon-inner span:nth-child(2) {
    transform: scale(0);
}

.hamburger-icon.hover:hover .animated-icon-inner span:nth-child(1) {
    transform: rotate(45deg);
}

.hamburger-icon.hover:hover .animated-icon-inner span:nth-child(3) {
    transform: rotate(-45deg);
}

/* arrow icon */
.arrow-icon .animated-icon-inner span {
    width: calc(var(--animated-icon-width) / 2);
}

.arrow-icon .animated-icon-inner span:nth-child(1) {
    transform: translate(calc(var(--animated-icon-height-half) * var(--language-direction-adjustment)), 0) rotate(35deg);
}

.arrow-icon .animated-icon-inner span:nth-child(2) {
    transform: translate(calc(var(--animated-icon-center) * var(--language-direction-adjustment)), 0) rotate(145deg);
}

.arrow-icon.hover:hover .animated-icon-inner span:nth-child(1) {
    transform: translate(calc(var(--animated-icon-height-half) * var(--language-direction-adjustment)), 0) rotate(-35deg);
}

.arrow-icon.hover:hover .animated-icon-inner span:nth-child(2) {
    transform: translate(calc(var(--animated-icon-center) * var(--language-direction-adjustment)), 0) rotate(215deg);
}
/* stylelint-enable */

.hamburger-icon .animated-icon-inner span {
    inset-inline-start: var(--animated-icon-center-negative);
}

/** RTL ICONS START **/
html[dir="rtl"] .arrow-icon {
    transform: rotate(180deg);
}
/** RTL ICONS END **/
.icons-group {
    display: flex;
}

.icons-group .icons-group-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.icons-group .icons-group-item {
    position: relative;
}

.icons-group .icons-group-item:not(:last-child) {
    margin-inline-end: var(--content-spacing-large);
}

.icons-group .icons-group-item button {
    cursor: pointer;
    display: flex;
    border-width: 0;
}

.group-icon {
    display: flex;
    position: relative;
}

.group-icon-small {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}

.group-icon-medium {
    width: var(--icon-size);
    height: var(--icon-size);
}

.group-icon svg path {
    fill: var(--theme-icon-fill-light);
    transition: fill 0.3s ease;
}

/* stylelint-disable */
.icons-group li:hover .group-icon svg path {
    fill: var(--theme-icon-fill-lighter);
}
/* stylelint-enable */
.button {
    display: flex;
    text-decoration: none;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border-radius: var(--border-radius-small);
    height: var(--nav-button-height);
    padding: 0 var(--content-spacing-small);
    transition-property: color, background-color, border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.primary-button {
    border: 1px solid var(--theme-button-light-background);
    background-color: var(--theme-button-light-background);
    color: var(--theme-button-light-text);
}

.primary-button:hover {
    border-color: var(--theme-button-light-background-hover);
    background-color: var(--theme-button-light-background-hover);
    color: var(--theme-button-light-text-hover);
}

.secondary-button {
    border: 1px solid var(--theme-button-light-background);
    background-color: transparent;
    color: var(--theme-button-light-background);
}

.secondary-button:hover {
    border-color: var(--theme-button-light-background-hover);
    color: var(--theme-button-light-background-hover);
}

.primary-button.dark {
    border: 1px solid var(--theme-button-dark-background);
    background-color: var(--theme-button-dark-background);
    color: var(--theme-button-dark-text);
}

.primary-button.dark:hover {
    border-color: var(--theme-button-dark-background-hover);
    background-color: var(--theme-button-dark-background-hover);
    color: var(--theme-button-dark-text-hover);
}

.secondary-button.dark {
    border: 1px solid var(--theme-button-dark-background);
    background-color: transparent;
    color: var(--theme-button-dark-background);
}

.secondary-button.dark:hover {
    border-color: var(--theme-button-dark-background-hover);
    color: var(--theme-button-dark-background-hover);
}
/* used for things that should be hidden in the ui,
but useful for people who use screen readers */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* Reduced Motion:
  Apply reduced-motion class to body tag
  to manually envoke reduced-motion on child elements.
*/
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Skip Link */
.skip-link {
    background: var(--color-utils-red);
    color: var(--color-utils-white);
    font-weight: var(--font-weight-more-bold);
    font-family: var(--font-family-default);
    left: 50%;
    padding: var(--content-spacing-medium);
    border-radius: var(--border-radius-small);
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: var(--index-somewhatimportant);
    text-decoration: none;
}

.skip-link:focus {
    transform: translate(-50%, 0%);
    transition: transform 0.3s ease;
}

/* Broken Image */
img {
    display: block;
}

img::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-utils-gray);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
}

img::after {
    content: "\2639"" " attr(alt);
    font-size: var(--font-size-medium);
    color: var(--color-utils-white);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-container {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-default);
    max-width: 400px;
    position: relative;
    height: 40px;
}

.input-container .label {
    font-size: var(--font-size-small);
    padding: var(--content-spacing-medium);
}

.input-container .input {
    outline: 0;
    padding: 0 var(--content-spacing-medium);
    border-radius: var(--border-radius-small);
    border: var(--border-width-small) solid var(--color-utils-gray-light);
    color: var(--color-utils-gray-light);
    transition: var(--transition-default);
    width: 100%;
    height: 100%;
}

.input-container .input[type="submit"] {
    cursor: pointer;
    border-color: var(--theme-button-dark-background);
    background-color: var(--theme-button-dark-background);
    color: var(--theme-button-dark-text);
}

.input-container .input[type="submit"]:hover,
.input-container .input[type="submit"]:focus {
    border-color: var(--theme-button-dark-background-hover);
    background-color: var(--theme-button-dark-background-hover);
    color: var(--theme-button-dark-text-hover);
}

.input-container .input[type="date"] {
    /* hide default calendar icon */
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%43000" fill-opacity="1" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.input-container .input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.input-container .input-type-password {
    padding-right: calc(24px + var(--content-spacing-medium) * 2);
}

.input-container .input:hover {
    border-color: var(--color-utils-gray-dark);
    color: var(--color-utils-gray-dark);
}

.input-container .input:focus {
    border-color: var(--color-utils-gray-darker);
    color: var(--color-utils-gray-darker);
}

.input-container .input::placeholder {
    color: var(--color-utils-gray);
    opacity: 0.5;
}

.input-container .toggle {
    margin: 0;
    padding: 0;
    background-color: transparent;
    position: absolute;
    right: var(--content-spacing-medium);
    bottom: calc((40px - 24px) / 2);
}
.form-container {
    display: flex;
    flex-direction: column;
    background: var(--color-utils-offwhite);
    width: 100%;
    max-width: 400px;
    font-family: var(--font-family-default);
}

.form-content {
    max-width: 400px;
    width: 100%;
    background: var(--color-utils-white);
    border-radius: var(--border-radius-small);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.form-container form {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
}

.form-item:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: var(--content-spacing-medium);
}

.form-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.form-actions .form-actions-item {
    height: 40px;
    width: 50%;
}

.form-actions .form-actions-item:not(:last-child) {
    margin-inline-end: var(--content-spacing-medium);
}
/* Layout visualization */
.preview {
    min-height: 100px;
    background: orange;
}

/* menu */
.no-scroll {
    position: fixed;
}

.page {
    width: 100%;
    min-width: 300px;
    height: 100%;
    overflow-x: hidden;
    font-size: var(--font-size-medium);
    font-family: var(--font-family-default);
    background-color: var(--theme-ui-background);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
}

.page-main {
    min-width: 300px;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: var(--content-spacing-xlarge);
    padding-left: var(--content-spacing-xlarge);
    padding-right: var(--content-spacing-xlarge);
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: var(--index-content);

    /* expand height if content is empty */
    flex: 1;
    background-color: var(--theme-ui-background);
    color: var(--theme-text-dark);
}

.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.column {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--content-spacing-xlarge);
    width: 100%;
}

.columns-1 {
    width: 100%;
}

.columns-2-balanced {
    width: calc(50% - ((var(--content-spacing-xlarge) * 2) / 3));
}

.columns-3-balanced {
    width: calc(33.33% - ((var(--content-spacing-xlarge) * 2) / 3));
}

.columns-4-balanced {
    width: calc(25% - ((var(--content-spacing-xlarge) * 2) / 3));
}

.columns-3-wide {
    width: calc(50% - ((var(--content-spacing-xlarge) * 2) / 3));
}

.columns-3-narrow {
    width: calc(25% - ((var(--content-spacing-xlarge) * 2) / 3));
}

.columns-wrap {
    width: calc(33.33% - ((var(--content-spacing-xlarge) * 2) / 3));
    flex-wrap: wrap;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--content-spacing-xlarge);
    row-gap: var(--content-spacing-xlarge);
}

.grid-container.grid-wrap {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-item {
    display: flex;
    flex-direction: column;
}

.row-header {
    font-size: var(--font-size-large);
    font-weight: bold;
    margin-bottom: var(--content-spacing-xlarge);
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .columns-2-balanced,
    .columns-3-balanced,
    .columns-3-wide,
    .columns-3-narrow,
    .columns-wrap {
        width: 100%;
    }

    .columns-3-wide {
        order: 1;
    }

    .columns-3-narrow {
        order: 2;
    }

    .columns-4-balanced {
        width: calc(50% - (var(--content-spacing-xlarge) / 2));
    }

    .grid-container.grid-wrap {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .columns-wrap {
        width: calc(50% - (var(--content-spacing-xlarge) / 2));
    }

    .grid-container.grid-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
.advertisement-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    z-index: var(--index-advertisement);
    overflow: hidden;
}

.advertisement-container-header {
    background-color: var(--theme-ui-foreground);
    color: var(--color-utils-gray-lighter);
}

.advertisement-container-article {
    margin-bottom: var(--content-spacing-xlarge);
    color: var(--color-utils-gray-dark);
}

.advertisement-iframe {
    display: flex;
    margin: var(--content-spacing-xsmall) 0;
    position: relative;
    justify-content: center;
}

.advertisement-300x250 {
    width: var(--article-advertising-width);
    height: var(--article-advertising-height);
}

.advertisement-970x250 {
    width: var(--header-advertising-width);
    height: var(--header-advertising-height);
}

.advertisement-content {
    display: flex;
    position: relative;
}

.advertisement-notice {
    display: flex;
    justify-content: center;
    font-size: var(--font-size-small);
    width: var(--header-advertising-width);
    height: var(--font-size-small);
}

.advertisement-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 31px;
    height: 15px;
    position: absolute;
    inset-inline-end: 1px;
    top: 1px;
}

.advertisement-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15px;
    width: 15px;
    z-index: var(--index-advertisement);
    background-color: var(--theme-advertisement-icon-background);
    position: relative;
}

.advertisement-icon svg {
    position: absolute;
    top: 0;
    right: 0;
    height: 15px;
    width: 15px;
    stroke: var(--theme-advertisement-icon-fill);
    fill: var(--theme-advertisement-icon-fill);
}
.page-header {
    display: flex;
    width: 100%;
    font-size: var(--font-size-xxxlarge);
    font-weight: bold;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--theme-text-light);
    background-color: var(--theme-ui-foreground);
    z-index: var(--indxe-content-title);
    padding: var(--content-spacing-xlarge) var(--content-spacing-xlarge) var(--content-spacing-xsmall) var(--content-spacing-xlarge);
}

.page-header .page-header-title {
    display: flex;
    flex-shrink: 1;
    padding-bottom: var(--content-spacing-small);
    border-bottom: 1px solid var(--color-utils-gray);
}

/* stylelint-disable */
.page-header-title svg path {
    fill: var(--theme-icon-fill-light);
    transition: var(--transition-default);
}

.page-header-title:hover svg path {
    fill: var(--theme-icon-fill-lighter);
}
/* stylelint-enable */
.page-navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--nav-height);
    position: sticky;
    top: 0;
    background-color: var(--theme-ui-foreground);
    z-index: var(--index-header);
}

.page-navigation::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    width: calc(100% - (var(--content-spacing-xlarge) * 2));
    margin: auto;
    border-bottom: var(--theme-small-border);
}

.page-navigation-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 300px;
    max-width: 1440px;
    width: 100%;
    height: inherit;
    padding-left: var(--content-spacing-xlarge);
    padding-right: var(--content-spacing-xlarge);
    position: relative;
}

.page-navigation-column-left,
.page-navigation-column-right {
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.page-navigation-logo {
    display: flex;
    width: var(--icon-size);
    height: var(--icon-size);
    z-index: var(--index-header-button);
    cursor: pointer;
}

/* stylelint-disable */
.page-navigation-logo svg path {
    fill: var(--theme-icon-fill-light);
    transition: var(--transition-default);
}

.page-navigation-logo:hover svg path {
    fill: var(--theme-icon-fill-lighter);
}
/* stylelint-enable */

.page-navigation-button {
    border: 1px solid var(--color-utils-offwhite);
    color: var(--theme-navigation-text);
    border-radius: var(--border-radius-small);
    height: var(--nav-button-height);
    background-color: transparent;
    transition: var(--transition-default);
    cursor: pointer;
}

.page-navigation-button:hover {
    color: var(--theme-navigation-text-hover);
}

.nav-button {
    z-index: var(--index-header-button);
}

@media (max-width: 767px) {
    .page-navigation-logo {
        margin-inline-start: var(--content-spacing-small);
    }
}
.navbar {
    display: flex;
    align-items: center;
    z-index: var(--index-nav);
}

#navbar-toggle {
    display: none;
    border: 0;
    position: absolute;
    margin: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    inset-inline-start: 24px;
    top: 4px;
    z-index: var(--index-nav-input);
}

.navbar-label {
    display: none;
    justify-content: center;
    align-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    cursor: pointer;
    background-color: var(--theme-ui-foreground);
    transition: var(--transition-default);
    border: 1px solid var(--color-utils-offwhite);
    border-radius: var(--border-radius-small);
    z-index: var(--index-nav-label);
}

.navbar-label-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-navigation-text);
    --animated-icon-hover: var(--theme-navigation-text-hover);
}

/* stylelint-disable */
#navbar-toggle:checked ~ .navbar-label div span span:nth-child(2) {
    transform: scale(0);
}

#navbar-toggle:checked ~ .navbar-label div span span:nth-child(1) {
    transform: rotate(45deg);
}

#navbar-toggle:checked ~ .navbar-label div span span:nth-child(3) {
    transform: rotate(-45deg);
}
/* stylelint-enable */

.navbar-content {
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--content-spacing-large);
}

.navbar-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: fit-content;
    width: 100%;
}

.navbar-item:not(:last-child) {
    margin-inline-end: var(--content-spacing-large);
}

.navbar-dropdown-item {
    margin-bottom: var(--content-spacing-small);
}

.navbar-dropdown-item:not(:last-child) {
    margin-inline-end: 0;
}

.navbar-item a {
    text-decoration: none;
    color: var(--theme-navigation-text);
    background-color: var(--theme-navigation-background);
    position: relative;
    line-height: var(--nav-button-height);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: var(--border-radius-small);
    padding: 0 8px;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.navbar-item a:hover {
    color: var(--theme-navigation-text-hover);
    background-color: var(--theme-navigation-background-hover);
    text-decoration: var(--theme-text-decoration);
}

.navbar-item a.active {
    color: var(--theme-navigation-text-hover);
    background-color: var(--theme-navigation-background-active);
    border: var(--theme-small-border);
}

/** new style **/
.navbar-active-path {
    display: none;
}

.navbar-icons {
    display: none;
}

@media (max-width: 767px) {
    #navbar-toggle,
    .navbar-label {
        display: flex;
    }

    .navbar-content {
        display: none;
    }

    .navbar-list {
        flex-direction: column;
        overflow-y: auto;
        margin-top: 41px;
        border-top: 1px solid var(--color-utils-gray);
        border-bottom: 1px solid var(--color-utils-gray);
    }

    .navbar-item {
        line-height: var(--nav-button-height-mobile);
        margin: var(--content-spacing-small) 0;
        align-items: center;
        padding: 0;
    }

    .navbar-item:not(:last-child) {
        margin-right: 0;
    }

    .navbar-item a {
        align-items: center;
    }

    #navbar-toggle:checked ~ .navbar-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: 0;
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        background-color: var(--theme-ui-foreground);
        width: 100%;
        height: 100vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 100); /* --vh is set in Navbar.jsx */
        padding: 0 var(--content-spacing-xlarge);
        overflow: hidden;
    }

    /** display current page in navbar **/
    .navbar-active-path {
        display: flex;
        margin: 0 var(--content-spacing-small);
        color: var(--theme-navigation-text-hover);
        background-color: var(--theme-navigation-background-active);
        line-height: var(--nav-button-height);
        border-radius: var(--border-radius-small);
        padding: 0 8px;
        text-transform: capitalize;
        z-index: var(--index-header-button);
        pointer-events: none;
    }

    .navbar-icons {
        display: flex;
        width: 100%;
        justify-content: center;
        margin: var(--content-spacing-xlarge) 0;
    }
}
.page-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    min-height: var(--footer-height);
    padding: var(--content-spacing-small) 0;
    font-size: var(--font-size-small);
    background-color: var(--theme-ui-foreground);
    color: var(--theme-text-medium);
    position: relative;
}

.page-footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: calc(100% - (var(--content-spacing-xlarge) * 2));
    margin: auto;
    border-top: var(--theme-small-border);
}

.footer-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 300px;
    max-width: 1440px;
    width: 100%;
    min-height: var(--content-spacing-xxlarge);
    padding-left: var(--content-spacing-xlarge);
    padding-right: var(--content-spacing-xlarge);
    position: relative;
}

.footer-row:not(:last-child) {
    margin-bottom: var(--content-spacing-large);
}

.footer-column-left,
.footer-column-center,
.footer-column-right {
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

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

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

.footer-column-center {
    flex: 1;
}

.footer-links .footer-links-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footer-links .footer-links-item {
    position: relative;
}

.footer-links .footer-links-item:not(:last-child) {
    margin-inline-end: var(--content-spacing-large);
}

.footer-links .footer-links-item a {
    color: var(--theme-navigation-text);
    transition: var(--transition-default);
    text-decoration: none;
}

.footer-links .footer-links-item a:hover {
    color: var(--theme-navigation-text-hover);
}

@media (max-width: 767px) {
    .page-footer {
        padding: var(--content-spacing-large) 0 0 0;
    }

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

    .footer-row:not(:last-child) {
        margin-bottom: 0;
    }

    .footer-column-center,
    .footer-column-left,
    .footer-column-right {
        padding-bottom: var(--content-spacing-large);
        margin-bottom: var(--content-spacing-large);
        border-bottom: 1px solid var(--color-utils-gray);
        width: 100%;
        justify-content: center;
        line-height: 24px;
    }

    .footer-links .footer-links-list {
        flex-direction: column;
    }

    .footer-links .footer-links-item:not(:last-child) {
        margin-right: 0;
        margin-bottom: var(--content-spacing-large);
    }
}
.dialog {
    position: fixed;
    min-width: 300px;
    max-width: 400px;
    width: 100%;
    height: 240px;
    bottom: 40px;
    inset-inline-start: 40px;
    background-color: var(--theme-dialog-background);
    z-index: var(--index-important);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 10px 18px var(--color-utils-gray);
    display: none;
    font-family: var(--font-family-default);
    color: var(--theme-text-dark);
    padding: var(--content-spacing-xlarge);
    border: var(--theme-medium-border);
}

.dialog:target,
.dialog.open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dialog-close-button {
    position: absolute;
    top: var(--content-spacing-medium);
    inset-inline-end: var(--content-spacing-medium);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.dialog-close-button-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-icon-fill-dark);
    --animated-icon-hover: var(--theme-icon-fill-medium);
}

.dialog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    margin-bottom: var(--content-spacing-large);
    width: 100%;
}

.dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dialog-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dialog-item:not(:last-child) {
    margin-bottom: var(--content-spacing-large);
}

@media (max-width: 767px) {
    .dialog {
        width: calc(100% - var(--content-spacing-xxxlarge) * 2);
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}
.dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.dropdown-toggle {
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(var(--nav-button-height) - 2px);
    inset-inline-start: 0;
    top: 1px;
    z-index: var(--index-dropdown-input);
    transition: none;
}

.dropdown-label {
    background-color: var(--theme-ui-foreground);
    color: var(--theme-navigation-text);
    height: var(--nav-button-height);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 var(--content-spacing-small);
    border-radius: var(--border-radius-small);
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    z-index: var(--index-dropdown-label);
}

.dropdown-label:hover {
    color: var(--theme-navigation-text-hover);
    background-color: var(--theme-navigation-background-hover);
    text-decoration: var(--theme-text-decoration);
}

.dropdown-label-text {
    margin-inline-end: 8px;
}

/* stylelint-disable */
.dropdown-toggle:checked ~ .dropdown-label div span span:nth-child(1) {
    transform: translate(calc(var(--animated-icon-height-half) * var(--language-direction-adjustment)), 0) rotate(-35deg);
}

.dropdown-toggle:checked ~ .dropdown-label div span span:nth-child(2) {
    transform: translate(calc(var(--animated-icon-center) * var(--language-direction-adjustment)), 0) rotate(215deg);
}
/* stylelint-enable */

.dropdown-content {
    list-style-type: none;
    padding: 0 var(--content-spacing-small);
    margin: 0;
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: calc(var(--content-spacing-small) * -1);
    min-width: 200px;
    background-color: var(--theme-ui-foreground);
    z-index: var(--index-dropdown);
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
}

.dropdown-toggle:checked ~ .dropdown-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 767px) {
    .dropdown-toggle {
        top: 0;
    }

    .dropdown-label {
        /* offset right arrow to center text */
        padding: 0 0 0 16px;
    }

    .dropdown-content {
        width: 100%;
        box-shadow: none;
        position: relative;
        left: auto;
        top: auto;
        padding: 0;
        margin-top: var(--content-spacing-small);
    }
}
.article-header {
    font-weight: bold;
    font-size: var(--font-size-small);
    text-transform: uppercase;
    position: relative;
    padding-top: var(--content-spacing-small);
    padding-bottom: var(--content-spacing-large);
    pointer-events: none;
}

.article-header::before,
.article-header::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-start: 0;
    top: 0;
}

.article-header::before {
    background-color: var(--theme-link-highlight);
    width: var(--content-spacing-large);
    height: 4px;
    transition: var(--transition-default);
}

.article-header:hover::before {
    width: 100%;
}

.article-header::after {
    border-top: 1px solid var(--color-utils-offwhite);
    right: 0;
    width: 100%;
}

/* stylelint-disable */
.article-header a {
    display: flex;
    text-decoration: none;
    color: var(--theme-text-dark);
    pointer-events: auto;
}
/* stylelint-enable */

.article-body {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* stylelint-disable */
.article-body a {
    text-decoration: none;
    color: var(--theme-link-color);
    transition: var(--transition-default);
    display: flex;
}

.article-body a:hover {
    color: var(--theme-link-hover);
    text-decoration: underline;
}
/* stylelint-enable */

.article-image-container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    background-color: var(--theme-image-placeholder);
}

.article-image {
    display: flex;
    width: 100%;
    height: auto;
    line-height: 0;
}

.article-image img {
    height: auto;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.article-image-captions {
    font-size: var(--font-size-small);
    margin-top: var(--content-spacing-xsmall);
}

.article-image-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    font-size: var(--font-size-small);
    background-color: var(--theme-tag-background-gray);
    color: var(--theme-text-lighter);
    padding: var(--content-spacing-xsmall) var(--content-spacing-small);
    text-transform: uppercase;
    border: var(--theme-small-border);
}

.article-image-tag.breaking {
    background-color: var(--theme-tag-background-red);
}

.article-image-tag.watch {
    background-color: var(--theme-tag-background-gray);
}

.article-image-tag svg {
    width: var(--icon-size-tiny);
    height: var(--icon-size-tiny);
    margin-inline-end: var(--content-spacing-small);
}

/* stylelint-disable */
.article-image-tag svg path {
    fill: var(--theme-icon-fill-light);
}
/* stylelint-enable */

.article-title {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    line-height: var(--font-size-xlarge);
    margin-top: var(--content-spacing-large);
    font-size: var(--font-size-large);
}

.article-content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-medium);
    line-height: var(--font-size-xlarge);
    margin-top: var(--content-spacing-large);
    white-space: pre-wrap;
}

/* remove margin-top from first element */
.article-content:first-child {
    margin-top: 0;
}

.article-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.article-list-item {
    display: flex;
    position: relative;
}

.horizontal .article-list-item {
    flex-direction: row;
}

.vertical .article-list-item {
    flex-direction: column;
}

.article-list-item:not(:last-child) {
    margin-bottom: var(--content-spacing-medium);
    padding-bottom: var(--content-spacing-medium);
    border-bottom: 1px solid var(--color-utils-offwhite);
}

.article-list.bullets {
    list-style-type: disc;
    padding-inline-start: 1em;
}

.article-list.bullets .article-list-item {
    display: list-item;
}

.article-list.bullets .article-list-item:not(:last-child) {
    padding-bottom: 0;
    border-bottom: none;
}

/* excerpt start */
.article-list-item .article-hero {
    display: flex;
    width: 33.33%;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 130px;
    position: relative;
}

.article-list-item .article-content {
    margin-top: 0;
    margin-inline-start: var(--content-spacing-large);
    width: 66.66%;
}

/* excerpt end */

/* article-list start */
.article-list-content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-medium);
    line-height: var(--font-size-xlarge);
}

.article-list-content .article-title {
    margin-top: 0;
    margin-bottom: var(--content-spacing-large);
}

/* article-list end */
.truncate-singleline {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
}

.truncate-multiline {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
}

.truncate-multiline-3 {
    -webkit-line-clamp: 3;
}
.toggle-outer {
    display: flex;
    justify-content: space-between;
    padding: var(--content-spacing-small);
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--color-utils-gray-light);
    color: var(--theme-text-dark);
    width: 100%;
    height: 40px;
    align-items: center;
}

.toggle-description {
    margin-right: 16px;
}

.toggle-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 42px;
    height: 22px;
    position: relative;
}

.toggle-container .label {
    width: 42px;
    height: 16px;
    display: flex;
    background-color: var(--theme-toggle-background);
    border-radius: 22px;
    cursor: pointer;
    border: var(--theme-medium-border);
}

.toggle-container .switch {
    position: absolute;
    inset-inline-start: 0;
    top: 3px;
    background-color: var(--theme-toggle-foreground);
    border-radius: 22px;
    transition: var(--transition-default);
    width: 45%;
    height: 16px;
    pointer-events: none;
    border: var(--theme-medium-border);
}

.toggle-container .switch::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    top: calc(50% - 11px);
    inset-inline-start: calc(var(--theme-border-width-medium) * -1);
    background-color: var(--theme-toggle-switch);
    border-radius: var(--border-radius-50);
    transition: var(--transition-default);
}

.toggle-container .label input[type="checkbox"] {
    width: 44px;
    height: 16px;
    z-index: -1;
    position: absolute;
    inset-inline-start: -6px;
    top: 0;
}

.toggle-container .label input[type="checkbox"]:checked + .switch::before {
    inset-inline-start: calc(100% - 22px + var(--theme-border-width-medium));
}

.toggle-container .label input[type="checkbox"]:checked + .switch {
    width: 100%;
}
.toast {
    position: fixed;
    left: 0;
    bottom: 0;
    display: none;
    width: 100%;
    min-height: 100px;
    color: var(--theme-text-light);
    background-color: var(--theme-toast-background);
    font-family: var(--font-family-default);
    z-index: var(--index-important);
    padding: var(--content-spacing-xlarge);
    border-top: var(--theme-medium-border);
}

.toast:target,
.toast.open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.toast-close-button {
    position: absolute;
    top: var(--content-spacing-medium);
    inset-inline-end: var(--content-spacing-medium);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.toast-close-button-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-icon-fill-light);
    --animated-icon-hover: var(--theme-icon-fill-lighter);
}

.toast-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    margin-bottom: var(--content-spacing-large);
    width: 100%;
}

.toast-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.toast-description {
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    display: inline-block;
    text-align: center;
}

/* stylelint-disable */
.toast-description a {
    color: var(--theme-navigation-text);
    transition: var(--transition-default);
}

.toast-description a:hover {
    color: var(--theme-navigation-text-hover);
}
/* stylelint-enable */

.toast-actions {
    display: flex;
    margin: var(--content-spacing-large) 0;
}

.toast-actions .toast-actions-button {
    padding: 0 var(--content-spacing-large);
}

.toast-actions .toast-actions-button:not(:last-child) {
    margin-inline-end: var(--content-spacing-large);
}
.sitemap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* stylelint-disable */
.sitemap a {
    color: var(--theme-navigation-text);
    transition: var(--transition-default);
    font-size: 14px;
    text-decoration: none;
}

.sitemap a:hover {
    color: var(--theme-navigation-text-hover);
    text-decoration: underline;
}
/* stylelint-enable */

.sitemap a.active,
.sitemap a.active:hover {
    color: var(--theme-text-highlight);
    text-decoration: var(--theme-text-decoration);
}

.sitemap-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sitemap-item {
    margin-bottom: var(--content-spacing-large);
    width: calc(100% / 6);
}

.sitemap-header {
    font-size: var(--font-size-large);
    margin-bottom: var(--content-spacing-medium);
    font-weight: var(--font-weight-bold);
}

.sitemap-sublist {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sitemap-subitem {
    line-height: var(--font-size-xlarge);
}

@media (max-width: 767px) {
    .sitemap-item {
        width: calc(100% / 2);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .sitemap-item {
        width: calc(100% / 4);
    }
}
.message {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--theme-message-background);
    color: var(--theme-text-lighter);
    font-family: var(--font-family-default);
    padding: var(--content-spacing-large);
    position: relative;
}

.message::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: calc(100% - (var(--content-spacing-xlarge) * 2));
    margin: auto;
    border-bottom: var(--theme-small-border);
}

.message:target,
.message.open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.message-close-button {
    position: absolute;
    top: var(--content-spacing-medium);
    inset-inline-end: var(--content-spacing-medium);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.message-close-button-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-icon-fill-light);
    --animated-icon-hover: var(--theme-icon-fill-lighter);
}

.message-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    margin-bottom: var(--content-spacing-large);
    width: 100%;
}

.message-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.message-description {
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    display: inline-block;
    text-align: center;
}
.sidebar {
    position: fixed;
    max-width: 300px;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    background-color: var(--theme-dialog-background);
    z-index: var(--index-important);
    border-start-end-radius: var(--border-radius-medium);
    border-end-end-radius: var(--border-radius-medium);
    border-inline-end: var(--theme-medium-border);
    box-shadow: 0 10px 18px var(--color-utils-gray);
    display: none;
    font-family: var(--font-family-default);
    color: var(--theme-text-dark);
}

.sidebar:target,
.sidebar.open {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--content-spacing-xlarge);
}

.sidebar-close-button {
    position: absolute;
    top: var(--content-spacing-medium);
    inset-inline-end: var(--content-spacing-medium);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.sidebar-close-button-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-icon-fill-dark);
    --animated-icon-hover: var(--theme-icon-fill-medium);
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    margin-bottom: var(--content-spacing-large);
    width: 100%;
}

.sidebar-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    overflow-y: auto;
}

.sidebar-group {
    width: 100%;
}

.sidebar-group:not(:last-child) {
    margin-bottom: var(--content-spacing-medium);
    padding-bottom: var(--content-spacing-medium);
    border-bottom: 1px solid var(--color-utils-offwhite);
}

.sidebar-list {
    list-style: none;
}

.sidebar-list-item {
    width: 100%;
    margin-top: var(--content-spacing-small);
}

.sidebar-list-item a {
    width: 100%;
    display: flex;
    padding: var(--content-spacing-xsmall) var(--content-spacing-medium);
    text-decoration: none;
    color: var(--theme-link-color);
    transition: var(--transition-default);
}

.sidebar-list-item a:hover,
.sidebar-list-item a:focus {
    background-color: var(--theme-link-background);
    text-decoration: var(--theme-text-decoration);
}

.sidebar summary {
    cursor: pointer;
    color: var(--theme-link-color);
}

@media (max-width: 419px) {
    .sidebar {
        max-width: unset;
        border-radius: 0;
    }
}
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--theme-modal-background);
    z-index: var(--index-important);
    display: none;
}

.modal:target,
.modal.open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: absolute;
    min-width: 300px;
    max-width: 400px;
    width: 100%;
    min-height: 240px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--theme-dialog-background);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 10px 18px var(--color-utils-gray);
    font-family: var(--font-family-default);
    color: var(--theme-text-dark);
    padding: var(--content-spacing-xlarge);
    border: var(--theme-medium-border);
}

.modal-close-button {
    position: absolute;
    top: var(--content-spacing-medium);
    inset-inline-end: var(--content-spacing-medium);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal-close-button-icon {
    --animated-icon-width: 24px;
    --animated-icon-background: transparent;
    --animated-icon-color: var(--theme-icon-fill-dark);
    --animated-icon-hover: var(--theme-icon-fill-medium);
}

.modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    margin-bottom: var(--content-spacing-large);
    width: 100%;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-actions {
    display: flex;
    margin: var(--content-spacing-large) 0;
}

.modal-actions .modal-actions-button {
    padding: 0 var(--content-spacing-large);
}

.modal-actions .modal-actions-button:not(:last-child) {
    margin-inline-end: var(--content-spacing-large);
}

@media (max-width: 419px) {
    .modal-content {
        width: calc(100% - var(--content-spacing-xxxlarge) * 2);
    }
}