/* https://piccalil.li/blog/a-more-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

.material-symbols-rounded,
.material-symbols-outlined {
    font-size: 1em;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

div.svg-icon {
    display: inline-block;
}

.icon-wrapper .label {
    display: none;
}

.badge,
.badge.info,
.badge.warning,
.badge.error,
.badge.success,
.badge.offline,
.badge.online,
.icon-wrapper,
.icon-wrapper.info,
.icon-wrapper.warning,
.icon-wrapper.error,
.icon-wrapper.success,
.icon-wrapper.offline,
.icon-wrapper.online {
    background: transparent;
    vertical-align: top;
}

.badge {
    background: var(--color-lighten);
}

.badge.error,
.badge.offline,
.icon-wrapper.error,
.icon-wrapper.offline {
    color: var(--signal-error);
}

/* SVG icons */
.error svg.icon g,
.error svg.icon path,
.offline svg.icon g,
.offline svg.icon path {
    fill: var(--signal-error);
}
.error .svg-icon,
.offline .svg-icon {
    color: var(--signal-error);
}

.badge.success,
.badge.online,
.icon-wrapper.success,
.icon-wrapper.online {
    color: var(--signal-green);
}

/* SVG icons */
.success svg.icon g,
.success svg.icon path,
.online svg.icon g,
.online svg.icon path {
    fill: var(--signal-green);
}
.success .svg-icon,
.online .svg-icon {
    color: var(--signal-green);
}

td .icon-wrapper .material-symbols-rounded,
td .icon-wrapper .material-symbols-outlined  {
    font-size: 1.4em;
}

.button .material-symbols-rounded,
.button .material-symbols-outlined,
button .material-symbols-rounded,
button .material-symbols-outlined  {
    font-size: 1.4em;
    vertical-align: middle;
}

.organization-logo,
.badge,
.status-label {
    padding: 0.3rem;
    margin: 0 0.2rem;
    background-color: var(--color-layer);
    border-radius: var(--radius-medium);
}

.organization-logo {
    background: var(--button-background);
    color: var(--button-text);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-medium);
}

:is(h1, h2, h3, h4) .badge {
    display: inline-block;
    font-size: 1em;
    font-weight: normal;
    color: var(--color-text);
    background-color: var(--color-lighten);
    border-radius: var(--radius-medium);
    padding: 0.2rem 0.5rem;
    margin: 0 0.2rem;
}

.owned,
.badge.owned {
    background-color: var(--signal-green-transparent);
}

.non-owned,
.badge.non-owned {
    background-color: var(--signal-orange-transparent);
}

.clickable {
    cursor: pointer;
}

.dialog-icon .material-symbols-rounded {

}
:root {
    --brand: hsl(212, 0%, 100%); /* brand #ffffff; https://convertacolor.com/ */
    --brand-bg: hsl(212, 0%, 50%); /* #808080; https://convertacolor.com/ */
    --primary-contrast: hsl(from var(--brand) h 20 0);

    /* derived values */
    --light-contrast: hsl(from var(--primary-contrast) calc(h + 180) 5 95);
    --dark-contrast: hsl(from var(--primary-contrast) calc(h + 180) 5 10);

    --primary-color: hsl(from var(--brand) h s l);
    --primary-light: hsl(from var(--brand) h s calc(l + 10));
    --primary-dark: hsl(from var(--brand) h s calc(l - 10));
    --primary-hover: hsl(from var(--brand) h s calc(l + 3));
    --primary-pressed: hsl(from var(--brand) h s calc(l - 3));
    --primary-background: hsl(from var(--brand) h s 15);

    --dark1: hsl(from var(--brand) h 15 0);
    --dark2: hsl(from var(--brand) h 15 2);
    --dark3: hsl(from var(--brand) h 15 4);
    --dark4: hsl(from var(--brand) h 15 6);
    --dark5: hsl(from var(--brand) h 15 8);
    --dark6: hsl(from var(--brand) h 15 10);
    --dark7: hsl(from var(--brand) h 15 12);
    --dark8: hsl(from var(--brand) h 15 14);
    --dark9: hsl(from var(--brand) h 15 16);
    --dark10: hsl(from var(--brand) h 15 18);
    --dark11: hsl(from var(--brand) h 15 20);
    --dark12: hsl(from var(--brand) h 15 22);
    --dark13: hsl(from var(--brand) h 15 24);
    --dark14: hsl(from var(--brand) h 15 26);
    --dark15: hsl(from var(--brand) h 15 28);
    --dark16: hsl(from var(--brand) h 15 30);
    --dark17: hsl(from var(--brand) h 15 32);
    --dark18: hsl(from var(--brand) h 15 34);

    --light1: hsl(from var(--brand) h 15 100);
    --light2: hsl(from var(--brand) h 15 98);
    --light3: hsl(from var(--brand) h 15 96);
    --light4: hsl(from var(--brand) h 15 94);
    --light5: hsl(from var(--brand) h 15 92);
    --light6: hsl(from var(--brand) h 15 90);
    --light7: hsl(from var(--brand) h 15 88);
    --light8: hsl(from var(--brand) h 15 86);
    --light9: hsl(from var(--brand) h 15 84);
    --light10: hsl(from var(--brand) h 15 82);
    --light11: hsl(from var(--brand) h 15 80);
    --light12: hsl(from var(--brand) h 15 78);
    --light13: hsl(from var(--brand) h 15 76);
    --light14: hsl(from var(--brand) h 15 74);
    --light15: hsl(from var(--brand) h 15 72);
    --light16: hsl(from var(--brand) h 15 70);
    --light17: hsl(from var(--brand) h 15 68);
    --light18: hsl(from var(--brand) h 15 66);
}

/* customization presets */

/* convert rgb to hsl https://convertacolor.com/ */

/* for evos and meta the algorithm does not work correctly */
/* because hue 0 is reddish, so the colours will be brown instead of neutral gray */
/* brand: #ffffff; brand-bg: #808080 */

/*
[data-customization='evos'],
[data-customization='meta'] {
    --brand: hsl(200, 0%, 88%);
    --brand-bg: hsl(200, 0%, 100%);
    --primary-contrast: hsl(from var(--brand) h 20 0);
}
*/

[data-customization='witness'] {
    --brand: hsl(212, 65%,58%); /* brand #4E8ED9;*/
    --brand-bg: hsl(212, 56%, 52%); /* #407EC9; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='go'] {
    --brand: hsl(212, 65%, 58%); /* brand #D08358; */
    --brand-bg: hsl(212, 56%, 52%); /* #D08358; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='dark_blue'] {
    --brand: hsl(212, 65%, 58%); /* brand #2FA2DB; */
    --brand-bg: hsl(200, 70%, 52%); /* #2FA2DB;  */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='dark_green'] {
    --brand: hsl(77, 60%, 52%); /* brand #A5CE39; */
    --brand-bg: hsl(200, 70%, 52%); /* #2FA2DB; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='dark_orange'] {
    --brand: hsl(25, 100%, 50%); /* brand #FF6C00;  */
    --brand-bg: hsl(200, 70%, 52%); /* #2FA2DB; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='gray_orange'] {
    --brand: hsl(25, 100%, 50%); /* brand #FF6C00; */
    --brand-bg: hsl(0, 0%, 50%); /* #808080; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

[data-customization='gray_white'] {
    --brand: hsl(212, 0%, 100%); /* brand #ffffff; */
    --brand-bg: hsl(212, 0%, 50%); /* #808080; */
    --primary-contrast: hsl(from var(--brand) h 20 0);
}

/* Fallback colortheme for the evos / meta and the popup browser window */
[data-customization='evos'],
[data-customization='meta'],
[data-customization='default'] {
    --brand: #ffffff;
    --primary-contrast: #808080;

    --light-contrast: #ffffff;
    --dark-contrast: #181b1b;

    --primary-color: #ffffff;
    --primary-light: #ffffff;
    --primary-dark: #e6e6e6;
    --primary-hover: #ffffff;
    --primary-pressed: #f7f7f7;
    --primary-background: #262626;

    --dark1: #000000;
    --dark2: #050505;
    --dark3: #0A0A0A;
    --dark4: #0F0F0F;
    --dark5: #141414;
    --dark6: #191919;
    --dark7: #1E1E1E;
    --dark8: #232323;
    --dark9: #282828;
    --dark10: #2D2D2D;
    --dark11: #333333;
    --dark12: #383838;
    --dark13: #3D3D3D;
    --dark14: #424242;
    --dark15: #474747;
    --dark16: #4C4C4C;
    --dark17: #515151;
    --dark18: #565656;

    --light1: #FFFFFF;
    --light2: #FAFAFA;
    --light3: #F5F5F5;
    --light4: #F0F0F0;
    --light5: #EBEBEB;
    --light6: #E6E6E6;
    --light7: #E0E0E0;
    --light8: #DBDBDB;
    --light9: #D6D6D6;
    --light10: #D1D1D1;
    --light11: #CCCCCC;
    --light12: #C7C7C7;
    --light13: #C2C2C2;
    --light14: #BDBDBD;
    --light15: #B8B8B8;
    --light16: #B3B3B3;
    --light17: #ADADAD;
    --light18: #A8A8A8;
}
:root {
    --default-font-family: "Roboto Flex Variable", "Roboto Flex", Roboto, "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial;
    --font-heading-56: normal 500 56px/54px var(--default-font-family);
    --font-heading-24: normal 500 24px/30px var(--default-font-family);
    --font-heading-20: normal 500 20px/25px var(--default-font-family);
    --font-heading-18: normal 500 18px/22.5px var(--default-font-family);
    --font-text-16-medium: normal 500 16px/24px var(--default-font-family);
    --font-text-16-regular: normal 400 16px/24px var(--default-font-family);
    --font-text-14-medium: normal 500 14px/21px var(--default-font-family);
    --font-text-14-regular: normal 400 14px/21px var(--default-font-family);
    --font-text-12-medium: normal 500 12px/15.6px var(--default-font-family);
    --font-text-12-regular: normal 400 12px/15.6px var(--default-font-family);
    --font-text-extra-small: normal 400 10px/13px var(--default-font-family);
    --gap-default: 1.333rem;
    --gap-small: 0.666rem;
    --border-width: 1px;
    --max-content-width: 60rem;
    --max-table-width: 120rem;

    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-medium-inside: 6px;
    --radius-large: 10px;
    --radius-button: 6px;

    --signal-green: #0EBC8F;
    --signal-green-transparent: #0EBC8F4d;
    --signal-lime: #28EFBC;
    --signal-lime-transparent: #28EFBC4d;
    --signal-yellow: #fdf181;
    --signal-yellow-transparent: #fdf1814d;
    --signal-yellow2: #FFCA28;
    --signal-yellow2-transparent: #FFCA284d;
    --signal-orange: #E28456;
    --signal-orange-transparent: #E284564d;
    --signal-red: #D93C45;
    --signal-red-transparent: #D93C454d;
    --signal-purple: #7c31c3;
    --signal-purple-transparent: #7c31c34d;
    --signal-blue: #49A4EE; /* brand colour */
    --signal-blue-hsl: hsl(212,65%,58%);
    --signal-blue-transparent: #49A4EE4d;
    --signal-marine: #175cec;
    --signal-marine-transparent: #175cec4d;

    --signal-success: var(--signal-green);
    --signal-warning: var(--signal-orange);
    --signal-error: var(--signal-red);
    --signal-info: var(--signal-blue);

    --dark-min: var(--dark18);
    --dark-50:  var(--dark16);
    --dark-100: var(--dark14);
    --dark-200: var(--dark12);
    --dark-300: var(--dark11);
    --dark-400: var(--dark10);
    --dark-500: var(--dark9);
    --dark-600: var(--dark8);
    --dark-700: var(--dark7);
    --dark-800: var(--dark5);
    --dark-900: var(--dark3);
    --dark-max: var(--dark1);

    --gray-min: var(--light1);
    --gray-50:  var(--light3);
    --gray-100: var(--light5);
    --gray-200: var(--light7);
    --gray-300: var(--light8);
    --gray-400: var(--light9);
    --gray-500: var(--light10);
    --gray-600: var(--light11);
    --gray-700: var(--light12);
    --gray-800: var(--light14);
    --gray-900: var(--light16);
    --gray-max: var(--light18);

    --light-min: var(--light18);
    --light-50:  var(--light16);
    --light-100: var(--light14);
    --light-200: var(--light12);
    --light-300: var(--light11);
    --light-400: var(--light10);
    --light-500: var(--light9);
    --light-600: var(--light8);
    --light-700: var(--light6);
    --light-800: var(--light4);
    --light-900: var(--light2);
    --light-max: var(--light1);

    --color-background: var(--gray-min);
    --color-bg-50: var(--gray-50);
    --color-bg-100: var(--gray-100);
    --color-heading: var(--dark-800);
    --color-text: var(--dark-400);
    --color-code: var(--gray-max);
    --color-deemphasis: var(--dark-200);
    --color-muted: var(--dark-100);
    --color-border: var(--dark-50);

    --color-darken: #00000010;
    --color-lighten: #ffffff30;
    --color-dialog-container: #2f3335dd;
    --color-layer: #00000005;
    --color-shadow-min: #FFFFFF00;
    --color-shadow-step: #00000033;
    --color-shadow-max: #00000000;

    --logo-dark: #1d252d;
    --logo-light: #ffffff;
    --logo-brand: #407EC9;

    --color-inverted-background: var(--dark-500);
    --color-inverted-text: var(--light-contrast);

    --link: var(--primary-color);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-pressed);
    --link-visited: var(--primary-light);
    --link-disabled: var(--gray-100);

    --button-text: var(--dark-contrast);
    --button-inverted-text: var(--light-contrast);
    --button-background: var(--gray-200);
    --button-border: var(--gray-200);
    --button-hover: var(--gray-500);
    --button-active: var(--gray-400);
    --button-disabled: var(--gray-300);

    --button-primary-text: var(--primary-contrast);
    --button-primary-inverted-text: var(--gray-max);
    --button-primary-background: var(--primary-color);
    --button-primary-border: var(--primary-color);
    --button-primary-hover: var(--primary-hover);
    --button-primary-active: var(--primary-pressed);
    --button-primary-disabled: var(--gray-300);

    --button-dark-text: var(--light-contrast);
    --button-dark-inverted-text: var(--gray-max);
    --button-dark-background: var(--dark-200);
    --button-dark-border: var(--dark-200);
    --button-dark-hover: var(--dark-500);
    --button-dark-active: var(--dark-400);
    --button-dark-disabled: var(--dark-300);

    --input-background: var(--color-bg-100);
    --input-text: var(--color-text);
    --input-border: var(--gray-600);
    --input-active: var(--gray-400);
    --input-selected: var(--gray-300);
    --input-disabled: var(--gray-max);
    --input-checked: var(--gray-400);
    --input-track: var(--light-400);

    --nav-bg: var(--color-background);
    --nav-text: var(--primary-color);
    --nav-border: var(--dark-contrast);

    --nav-link: var(--gray-300);
    --nav-link-hover: var(--primary-hover);
    --nav-link-active: var(--primary-pressed);
    --nav-link-visited: var(--gray-300);
    --nav-link-disabled: var(--gray-100);

    --nav-button: var(--dark-600);
    --nav-button-hover: var(--dark-500);
    --nav-button-active: var(--dark-400);
    --nav-button-visited: var(--dark-300);
    --nav-button-disabled: var(--dark-300);

    --nav-button-current: var(--primary-color);
    --nav-button-current-hover: var(--primary-hover);
    --nav-button-current-active: var(--primary-pressed);
    --nav-button-current-visited: var(--primary-color);
    --nav-button-current-disabled: var(--dark-300);

    --icon-link: var(--gray-300);
    --icon-link-hover: var(--primary-hover);
    --icon-link-active: var(--primary-pressed);
    --icon-link-visited: var(--gray-300);
    --icon-link-disabled: var(--gray-100);

    --table-fg: var(--gray-400);
    --table-border: var(--dark-800);
    --table-bg-odd: var(--dark-100);
    --table-bg-even: var(--dark-contrast);
    --table-bg-other: var(--dark-200);

    --notification-text: var(--dark-400);
    --notification-background: var(--gray-50);
}

[data-theme='dark'] {
    /* inverted colors from light theme */
    --color-background: var(--dark-max);
    --color-bg-50: var(--dark-800);
    --color-bg-100: var(--dark-600);
    --color-heading: var(--light-800);
    --color-text: var(--light-400);
    --color-code: var(--light-max);
    --color-deemphasis: var(--light-200);
    --color-muted: var(--light-min);
    --color-border: var(--light-50);

    --button-text: var(--light-contrast);
    --button-inverted-text: var(--light-contrast);
    --button-background: var(--dark-200);
    --button-border: var(--dark-200);
    --button-hover: var(--dark-500);
    --button-active: var(--dark-400);
    --button-disabled: var(--dark-300);

    --button-dark-text: var(--gray-400);
    --button-dark-inverted-text: var(--light-contrast);
    --button-dark-background: var(--dark-600);
    --button-dark-border: var(--dark-600);
    --button-dark-hover: var(--dark-900);
    --button-dark-active: var(--dark-700);
    --button-dark-disabled: var(--gray-max);

    /* spot colors for layers and logo */
    --color-darken: #00000030;
    --color-lighten: #ffffff15;
    --color-dialog-container: #2f3335dd;
    --color-layer: #ffffff10;
    --color-shadow-min: #00000000;
    --color-shadow-step: #ffffff33;
    --color-shadow-max: #ffffff00;

    --logo-dark: #ffffff;
    --logo-light: #1d252d;
    --logo-brand: #1d252d;

    --notification-text: var(--light-400);
    --notification-background: var(--dark-600);
}

/* auto mode will use the same colors as the dark theme if the OS is in dark mode */
@media (prefers-color-scheme: dark) {
    [data-theme='auto'] {
        /* inverted colors from light theme */
        --color-background: var(--dark-max);
        --color-bg-50: var(--dark-800);
        --color-bg-100: var(--dark-600);
        --color-heading: var(--light-800);
        --color-text: var(--light-400);
        --color-code: var(--light-max);
        --color-deemphasis: var(--light-200);
        --color-muted: var(--light-min);
        --color-border: var(--light-50);

        --button-text: var(--light-contrast);
        --button-inverted-text: var(--light-contrast);
        --button-background: var(--dark-200);
        --button-border: var(--dark-200);
        --button-hover: var(--dark-500);
        --button-active: var(--dark-400);
        --button-disabled: var(--dark-300);

        --button-dark-text: var(--gray-400);
        --button-dark-inverted-text: var(--light-contrast);
        --button-dark-background: var(--dark-600);
        --button-dark-border: var(--dark-600);
        --button-dark-hover: var(--dark-900);
        --button-dark-active: var(--dark-700);
        --button-dark-disabled: var(--gray-max);

        /* spot colors for layers and logo */
        --color-darken: #00000030;
        --color-lighten: #ffffff15;
        --color-dialog-container: #2f3335dd;
        --color-layer: #ffffff10;
        --color-shadow-min: #00000000;
        --color-shadow-step: #ffffff33;
        --color-shadow-max: #ffffff00;

        --logo-dark: #ffffff;
        --logo-light: #1d252d;
        --logo-brand: #1d252d;

        --notification-text: var(--light-400);
        --notification-background: var(--dark-600);
    }
}

/* popup mode will use the spot color of the nx application regardless of color mode */
[data-popup='xpopup'][data-theme='light'],
[data-popup='xpopup'][data-theme='auto'],
[data-popup='xpopup'][data-theme='dark'] {
    /* spot colors from nx meta application */
    /* and inverted colors from light theme */
    --color-background: #1f1f1f;
    --color-bg-50: #242424;
    --color-bg-100: #282828;
    --color-text: #d8deda;

    --color-darken: #00000030;
    --color-lighten: #ffffff05;
    --color-dialog-container: #2f3335dd;
    --color-layer: #ffffff05;
    --color-shadow-min: #00000000;
    --color-shadow-step: #ffffff33;
    --color-shadow-max: #ffffff00;

    --link: #e8eeea;
    --link-hover: var(--gray-600);
    --link-active: var(--gray-800);
    --link-visited: #e8eeea;
    --link-disabled: var(--gray-100);

    --button-text: #e5e6e5;
    --button-background: #333333;
    --button-border: #333333;
    --button-hover: #404040;
    --button-active: #606060;
    --button-visited: #333333;
    --button-disabled: #222222;

    --input-background: #333333;
    --input-text: #e5e6e5;
    --input-border: var(--gray-600);
    --input-active: #3d3d3d;
    --input-selected: #333333;
    --input-disabled: var(--gray-900);
}
html,
body {
    background: var(--color-background);
    color: var(--color-text);
    font: var(--font-text-16-regular);
    font-optical-sizing: auto;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
}

a, a:not([class]), a:link, a.link {
    color: var(--link);
    text-decoration: none;
}

a:visited, a.visited {
    color: var(--link-visited);
}

a:focus, a.focus,
a:hover, a.hover {
    color: var(--link-hover);
}

a:active, a.active {
    color: var(--link-active);
}

a[disabled], a.disabled {
    color: var(--link-disabled);
    opacity: 0.3;
}

.heading-56 {
    font: var(--font-heading-56);
}

h1,
.heading-24 {
    font: var(--font-heading-24);
}

h2,
.heading-20 {
    font: var(--font-heading-20);
}

h3,
h4,
h5,
h6,
.heading-18 {
    font: var(--font-heading-18);
    margin-block: 0;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.button:link,
p,
span,
.text-16-regular {
    font: var(--font-text-16-regular);
}

label, legend,
ul, ol, li, dl, dd, dt,
.text-14-medium {
    font: var(--font-text-14-medium);
}

.text-14-regular {
    font: var(--font-text-14-regular);
}

.help,
small,
.text-12-medium {
    font: var(--font-text-12-medium);
}

.text-12-regular {
    font: var(--font-text-12-regular);
}

footer small,
p.text-extra-small,
.text-extra-small {
    font: var(--font-text-extra-small);
    text-transform: uppercase;
}

.heading-56 {
    color: var(--color-heading);
}

.heading-24 {
    color: var(--color-heading);
}

.heading-20 {
    color: var(--color-heading);
}

.heading-18 {
    color: var(--color-heading);
}

.text-16-regular {
    color: var(--color-text);
}

.text-14-medium {
    color: var(--color-text);
}

.text-14-regular {
    color: var(--color-text);
}

.help,
.text-12-medium {
    color: var(--color-deemphasis);
}

.text-12-regular {
    color: var(--color-muted);
}

.text-extra-small {
    color: var(--color-muted);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
    max-width: var(--max-content-width);
}

header :is(p, h1, h2, h3, h4, h5, h6),
footer :is(p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

main ul,
main ol {
    margin-left: 2.4rem;
}

main ul li,
main ol li,
main dl,
main dl dt,
main dl dd {
    max-width: calc(var(--max-content-width) - 2.4rem);
}

/* Code in text */
pre,
code {
    overflow-x: scroll;
    font-family: monospace;
    font-size: inherit;
    color: var(--color-code);
    background-color: var(--color-bg-50);
}

label > code,
p > code,
li > code,
dd > code,
td > code {
    display: inline;
    word-wrap: break-word;
    box-decoration-break: clone;
    padding: .1rem .3rem .2rem;
    border-radius: var(--radius-small);
}

code {
    display: block;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    min-width: 10rem;
    padding: 1rem;
    margin: 0.5rem 0;
}

pre code {
    display: block;
    border-radius: var(--radius-medium);
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    min-width: 10rem;
    padding: 0 0.5rem;
    margin: 0.5rem 0;
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    display: inline;
    min-width: auto;
    padding: initial;
    word-wrap: break-word;
    box-decoration-break: clone;
    font-size: 1em;
    line-height: 1;
    overflow: hidden;
}

blockquote {
    border-left: 0.2rem solid var(--color-border);
}

hr {
    border: 0;
    border-bottom: 0.2rem solid var(--color-bg-50);
}

kbd {
    font-size: 90%;
    border: 0.2rem outset var(--color-bg-100);
    border-radius: var(--radius-small);
    padding: 0.1rem 0.4rem;
    background-color: var(--color-bg-100);
}

mark {
    background-color: var(--signal-yellow);
    color: var(--dark-max);
}
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap-default);
    margin: 1rem 0 0 0;
    padding: 0 1rem;
}

.card {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc(25% - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--radius-medium);
    padding: 1rem;
    background-color: var(--color-bg-50);
}

.cards-wide {
    margin: 1rem 0;
    padding: 0;
}

.cards-wide .card {
    flex-basis: calc(33% - 1rem);
    min-width: 25rem;
}

.profile-block .card {
    flex-basis: calc(50% - 1rem);
}

.card-header {
    margin: 0 0 1rem 0;
}

.card-body {
    aspect-ratio: 1.8;
    overflow: hidden;
    overflow-y: auto;
}

.card-body > :first-child {
    margin-top: 0;
}

.card > :is(h1,h2,h3,h4) {
    margin: 0 0 1rem 0;
    overflow-y: hidden;
}

.card > :is(h1,h2,h3,h4) .badge {
    margin-right: 0.3rem;
}

.card :is(ul, ol) {
    list-style: none;
    margin: 0.5rem;
    padding: 0;
}

.card li {
    list-style: none;
    margin: 0.2rem 0;
}

.systems-devices .card > :is(h1,h2,h3,h4) a {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
    line-break: anywhere;
    text-wrap: pretty;
}

.card .actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none;
}

.card .actions .badge {
    text-align: start;
}

.card .actions .accesslevels {
    text-align: right;
}

.choose-owner {
    max-height: 80vh;
    overflow: hidden;
    overflow-y: auto;
}

.choose-owner > :is(p, h1, h2, h3, h4, h5, h6) {
    width: 100%;
    text-align: left;
}

.dialog .choose-owner {
    max-height: 60vh;
}


.select-act-as {
    padding: 0.5rem;
    border-radius: var(--radius-medium);
    background-color: var(--color-lighten);
}

.select-act-as .card {
    flex-basis: calc(33% - 1rem);
}

.select-act-as .card > :is(h1,h2,h3,h4) {
    margin-block-start: 0;
}

.dialog .select-act-as .card {
    flex-basis: calc(50% - 1rem);
}

.select-act-as .card .roles {
}

@media screen and (max-width: 600px) {
    .card,
    .cards-wide .card {
        min-width: 100%;
    }

    .card > :is(h1,h2,h3,h4) {
        font: var(--font-heading-20);
    }

    .card > h2 {
        max-width: 100%;
    }
}

@media screen and (min-width: 601px) and (max-width: 800px) {
    .card {
        flex-basis: calc(50% - 1rem);
    }

    .cards-wide .card {
        min-width: 100%;
    }

    .select-act-as .card {
        flex-basis: calc(50% - 1rem);
    }

    .card > :is(h1,h2,h3,h4) {
        font: var(--font-heading-20);
    }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
    .card {
        flex-basis: calc(33% - 1rem);
    }

    .dialog .card {
        flex-basis: calc(50% - 1rem);
    }

    .select-act-as .card {
        flex-basis: calc(50% - 1rem);
    }

    .cards-wide .card {
        flex-basis: calc(50% - 1rem);
    }

    .card > :is(h1,h2,h3,h4) {
        font: var(--font-heading-24);
    }
}

@media screen and (min-width: 1001px) and (max-width: 1700px) {
    .card {
        flex-basis: calc(33% - 1rem);
    }

    .dialog .card {
        flex-basis: calc(50% - 1rem);
    }

    .select-act-as .card {
        flex-basis: calc(50% - 1rem);
    }

    .cards-wide .card {
        flex-basis: calc(50% - 1rem);
    }
}


@media screen and (min-width: 1701px) {
    .dialog .card {
        flex-basis: calc(50% - 1rem);
    }

    .select-act-as .card {
        flex-basis: calc(33% - 1rem);
    }
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button),
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button):link {
    color: var(--button-text);
    background-color: var(--button-background);
    border: var(--border-width) solid var(--button-border);
    border-radius: var(--radius-button);
    cursor: pointer;
    text-decoration: none;
    inline-size: fit-content;
    margin: 0 0.3rem;
    padding: 0.2rem 0.5rem 0.3rem;
    white-space: nowrap;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button):visited {
    color: var(--button-text);
    background-color: var(--button-background);
    border-color: var(--button-border);
    cursor: pointer;
    text-decoration: none;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).focus,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button):focus {
    color: var(--color-inverted-text);
    background-color: var(--button-hover);
    border-color: var(--button-hover);
    cursor: pointer;
    text-decoration: none;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button):hover {
    color: var(--color-inverted-text);
    background-color: var(--button-hover);
    border-color: var(--button-hover);
    cursor: pointer;
    text-decoration: none;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).router-link-active,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).router-link-exact-active,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).active,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button):active {
    color: var(--button-inverted-text);
    background-color: var(--button-active);
    border-color: var(--button-active);
    cursor: pointer;
    text-decoration: none;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button)[readonly],
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).readonly,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button)[readonly]:hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).readonly:hover {
    background-color: var(--button-disabled);
    border-color: var(--button-disabled);
    color: var(--link-disabled);
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button)[disabled],
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).disabled,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button)[disabled]:hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).disabled:hover {
    background-color: var(--button-disabled);
    border-color: var(--button-disabled);
    color: var(--link-disabled);
    opacity: 0.3;
    cursor: not-allowed;
}

/* primary buttons */
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:link {
    color: var(--button-primary-text);
    background-color: var(--button-primary-background);
    border-color: var(--button-primary-border);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary.focus,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:focus {
    border-color: var(--button-primary-hover);
    background-color: var(--button-primary-hover);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary.hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:hover {
    border-color: var(--button-primary-hover);
    background-color: var(--button-primary-hover);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary.active,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:active {
    border-color: var(--button-primary-active);
    background-color: var(--button-primary-active);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary.readonly,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary[readonly] {
    color: var(--button-primary-inverted-text);
    background-color: var(--button-primary-disabled);
    border-color: var(--button-primary-disabled);
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary.disabled,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary[disabled] {
    color: var(--button-primary-inverted-text);
    background-color: var(--button-primary-disabled);
    border-color: var(--button-primary-disabled);
}

/* secondary buttons */
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary:link {
    color: var(--button-dark-text);
    background-color: var(--button-dark-background);
    border-color: var(--button-dark-border);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary.focus,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary:focus {
    color: var(--button-dark-text);
    border-color: var(--button-dark-hover);
    background-color: var(--button-dark-hover);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary.hover,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary:hover {
    color: var(--button-dark-text);
    border-color: var(--button-dark-hover);
    background-color: var(--button-dark-hover);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary.active,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary:active {
    color: var(--button-dark-text);
    border-color: var(--button-dark-active);
    background-color: var(--button-dark-active);
    cursor: pointer;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary.readonly,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary[readonly] {
    color: var(--button-dark-inverted-text);
    background-color: var(--button-dark-disabled);
    border-color: var(--button-dark-disabled);
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary.disabled,
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).secondary[disabled] {
    color: var(--button-dark-inverted-text);
    background-color: var(--button-dark-disabled);
    border-color: var(--button-dark-disabled);
}

.success :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary,
.success :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:link {
    color: var(--button-primary-text);
    background-color: var(--signal-success);
    border-color: var(--signal-success);
    cursor: pointer;
}

.warning :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary,
.warning :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:link {
    color: var(--button-primary-text);
    background-color: var(--signal-warning);
    border-color: var(--signal-warning);
    cursor: pointer;
}

.error :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary,
.error :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button).primary:link {
    color: var(--button-primary-text);
    background-color: var(--signal-error);
    border-color: var(--signal-error);
    cursor: pointer;
}


/* collapsed buttons */
.button-collapsed {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.2rem;
    align-items: center;
    align-content: stretch;
    height: 100%;
    padding: 0;
}

.button-collapsed :is(button, .button) {
    margin: 0;
    border-radius: 0;
    padding-inline: 0;
}

.button-collapsed :is(button, .button):first-child {
    border-top-left-radius: var(--radius-button);
    border-bottom-left-radius: var(--radius-button);
    padding-left: 0.5rem;
    padding-right: 0.2rem;
}

.button-collapsed :is(button, .button):last-child {
    border-top-right-radius: var(--radius-button);
    border-bottom-right-radius: var(--radius-button);
    padding-left: 0.2rem;
    padding-right: 0.5rem;
}

/* light / auto / dark mode toggle buttons */
.toggle-group {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-medium);
    inline-size: fit-content;
    padding: 0.3rem;
    margin: var(--gap-default) 0;
}

.toggle-group label {
    border-radius: var(--radius-medium-inside);
    cursor: pointer;
    display: inline-flex;
    padding: 0.5rem 1rem;
    text-align: center;
    user-select: none;
}

.toggle-group label:has(input:checked) {
    background-color: var(--color-text);
   color: var(--color-background);
}

[data-sr] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 0.1rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 0.1rem;
}

form.mini,
.mini .toggle-group {
    border: 0;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    background: transparent;
}

.mini .toggle-group:before {
    content: "Theme:";
    display: inline-flex;
    padding: 0.3rem 1rem 0 0;
    text-align: center;
}

/* picture buttons */
.picture-buttons {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: stretch;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.picture-buttons a.picture-button {
    text-decoration: none;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0 0;
    min-height: 4rem;
    min-width: 5rem;
    background: var(--color-bg-100);
    /* width: calc((100% - 2rem) / 3); */
    border-radius: var(--radius-button);
    border: var(--border-width) solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.picture-buttons a.picture-button .button-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    align-content: stretch;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}

.picture-buttons a.picture-button .button-card :is(svg, img) {
    display: block;
    width: 80%;
    max-width: 15rem;
    height: auto;
    margin: 1rem 0.5rem;
    min-width: 5rem;
    min-height: 3rem;
    padding: 0 0.5rem;
}

.picture-buttons a.picture-button .button-card span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    color: var(--button-text);
    background: var(--color-bg-50);
    border-bottom-left-radius: var(--radius-button);
    border-bottom-right-radius: var(--radius-button);
}

/* SVG icons */
svg.icon g,
svg.icon path {
    fill: var(--icon-link);
}

:visited > svg.icon path {
    fill: var(--icon-link-visited);
}

.test-hover svg.icon path,
:hover > svg.icon path,
:focus > svg.icon path {
    fill: var(--icon-link-hover);
}

.test-active svg.icon path,
.router-link-active > svg.icon path,
.router-link-exact-active > svg.icon path,
:active > svg.icon path {
    fill: var(--icon-link-active);
}

[disabled] svg.icon path,
.disabled svg.icon path {
    fill: var(--icon-link-disabled);
    opacity: 0.3;
}

/* Icon icons */
.svg-icon {
    color: var(--icon-link);
}

:visited > .svg-icon {
    color: var(--icon-link-visited);
}

.test-hover .svg-icon,
:hover > .svg-icon,
:focus > .svg-icon {
    color: var(--icon-link-hover);
}

.test-active .svg-icon,
.router-link-active > .svg-icon,
.router-link-exact-active > .svg-icon,
:active > .svg-icon {
    color: var(--icon-link-active);
}

[disabled] .svg-icon,
.disabled .svg-icon {
    color: var(--icon-link-disabled);
    opacity: 0.3;
}

/* Primary button icons */
.primary .svg-icon {
    color: var(--button-primary-text);
}

.primary:visited > .svg-icon {
    color: var(--button-primary-text);
}

.primary.test-hover .svg-icon,
.primary:hover > .svg-icon,
.primary:focus > .svg-icon {
    color: var(--button-primary-text);
}

.primary.test-active .svg-icon,
.primary.router-link-active > .svg-icon,
.primary.router-link-exact-active > .svg-icon,
.primary:active > .svg-icon {
    color: var(--button-primary-text);
}

[readonly].primary .svg-icon,
[disabled].primary .svg-icon,
.primary.disabled .svg-icon,
.primary [disabled] .svg-icon,
.primary .disabled .svg-icon,
[disabled] .primary .svg-icon,
.disabled .primary .svg-icon {
    color: var(--button-primary-text);
    opacity: 0.3;
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button, .badge) > .svg-icon {
    font-size: 1.4em;
    vertical-align: middle;
}

/* header buttons */
:is(h1, h2, h3, h4, h5, h6) :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button) {
    font-size: 0.9em;
}

:is(h1, h2, h3, h4, h5, h6) :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .button) .label {
    display: none;
}
form {
    background-color: var(--color-bg-50);
    margin: 1rem;
    padding: 1rem;
    border-radius: var(--radius-large);

    max-width: var(--max-content-width);
}

main > form {
    padding: 1rem;
}

form :is(h1, h2, h3) {
    margin: 0 0 1rem 0;
}

form :is(input, select, textarea) {
    font: var(--font-text-16-regular);
    padding: 0.2rem 0.3rem;
    border: var(--border-width) solid var(--input-border);
    border-radius: var(--radius-small);
    color: var(--input-text);
    background-color: var(--input-background);
}

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

/* ** select fields ** */
select option {
    padding: 0.2rem 0.3rem;
    margin: 0 0 0.1rem;
}

select option:checked {
    background-color: var(--input-text);
    color: var(--input-selected);
    border-radius: var(--radius-medium);
}

select option:active,
select option:hover {
    background-color: var(--input-active);
    color: var(--primary-color);
}

/* ** checkboxes and radios ** */
input[type="checkbox"],
input[type="radio"],
.fake-checkbox {
    align-self: flex-start;
    font-size: 1.2rem;
    height: 1.4rem;
    width: 1.4rem;
    aspect-ratio: 1/1;
    accent-color: var(--brand);
    border: var(--border-width) solid var(--input-border);
    border-radius: var(--radius-small);
}

.fake-checkbox {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--input-background);
}

/* ** color swatch ** */
input[type="color"] {
    height: 2rem;
    width: 4rem;
    max-width: 4rem;
    padding: 0;
    margin: 0;
    border: 0;
}

/* ** fieldsets ** */
fieldset {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--radius-large);
    border: none;
    background-color: var(--color-layer);
    width: 100%;
}

form > fieldset {
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

fieldset > legend {
    color: var(--color-text);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-small);
    margin: 0 0.5rem 0 -0.5rem;
}

fieldset > ul {
    margin-left: 0;
}

.help {
    display: block;
    flex-grow: 1;
    width: 100%;
    padding: 0 1rem;
    margin: 0.5rem 0 1rem 0;
}

.help > p {
    margin-top: 0;
}

/* Normal input div grouping */
form .panels,
form fieldset > div,
form > div  {
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

form fieldset > div label,
form > div label {
    max-width: 30rem;
}

form fieldset > div label:first-child,
form > div label:first-child {
    width: 23%;
}

form fieldset > div input,
form > div input {
    flex: 1;
}

form fieldset > div .inline,
form > div .inline,
form fieldset > div .checkboxes,
form > div .checkboxes,
form fieldset > div .radios,
form > div .radios,
form fieldset > div textarea,
form > div textarea,
form fieldset > div select,
form > div select,
form fieldset > div .help,
form > div .help {
    flex: 1;
    width: 100%;
}

form fieldset > div textarea,
form > div textarea {
    min-width: 100%;
    resize: vertical;
}

form fieldset > div .inline,
form > div .inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gap-small);
    padding: 0;
    margin: 0;
}

form fieldset > div .inline div,
form > div .inline div {
    flex-basis: 20%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    gap: var(--gap-small);
    padding: 0;
    margin: 0;
}

form fieldset > div .help,
form > div .help {
    padding: 0.4rem 1rem;
    min-width: 75%;
    color: var(--color-muted);
    background-color: var(--color-layer);
    border-radius: var(--radius-medium);
}

[type=password] {
    color: var(--signal-info);
}

/* special grouping */
form div:has(button):last-child,
form div:has(input[type=submit]):last-child,
form div:has(input[type=submit]):last-child {
    justify-content: flex-end;
    text-align: right;
}

header form {
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    border-radius: 0;
}

td:has(fieldset) {
    padding: 1rem 0;
}

table .button {
    margin: 0.5rem;
    padding: 0.4rem 0.6rem;
}


/* pipelines specific */
.pipelines-group {
    width: 100%;
    max-width: var(--max-content-width);
}

.pipeline-clone-button {
    margin: 0 0.5rem;
    padding: 0.4rem 0.6rem;
    width: 100%;
    text-align: right;
}

.pipeline-group + .pipeline-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-deemphasis);
}

.pipeline-group fieldset {
    margin: 0;
    padding: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-100);
}

.pipeline-group > form {
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
}

.pipeline-group div.chain-selector {
    display: flex;
    gap: var(--gap-small);
    flex-direction: row;
    margin: 0 1rem 1rem 1rem;
    padding: 0;
}

.pipeline-group div.chain-selector > div {
    flex: 1;
    flex-basis: calc(50% - 1rem);
    display: flex;
    flex-direction: column;
}

.pipeline-group div.chain-selector > div label,
.pipeline-group div.chain-selector > div select {
    min-width: 15rem;
}

.pipeline-group fieldset form > div {
    margin: 0;
}

.pipeline-model {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-small);
    margin: 1rem;
}

.pipeline-chain-selection legend {
    margin: 0 auto;
    width: auto;
}

.pipeline-chain-selection legend .svg-icon {
    margin-top: 0.5rem;
    padding: 0.2rem;
    background: var(--color-bg-50);
    border-radius: 100%;
}

.pipeline-child {
    margin: 1rem;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pipeline-footer {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 0 0;
    padding: -0.2rem 0 0 0;
}

.pipeline-footer :is(form, div) {
    margin: 0.5rem 0;
    padding: 0;
}

.pipeline-group .button {
    margin: 0.5rem;
    padding: 0.4rem 0.6rem;
}

.pipeline-group form a.button {
    margin: 0;
}

.pipeline-group form.pipeline-subform > div {
    margin: 0;
}

.pipeline-model-processing .pipeline-subform {
    border-radius: 0;
}

.pipeline-subform + .pipeline-subform {
    margin-top: -1rem;
    border-top: 1px solid var(--color-bg-50);
}

.pipeline-model-processing .pipeline-subform:first-child {
    border-top-left-radius: var(--radius-large);
    border-top-right-radius: var(--radius-large);
}

.pipeline-model-processing .pipeline-subform:last-child {
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
    margin-bottom: 0;
}

.pipeline-group form.pipeline-aspect .checkboxes-label {
    min-width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: center;
    padding: 0;
}

.pipeline-group form.pipeline-aspect .checkboxes,
.pipeline-group form.pipeline-aspect .checkboxes label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: center;
    padding: 0 0.5rem;
}

.pipeline-group form.pipeline-aspect .checkboxes label {
    flex-wrap: nowrap;
}

.pipeline-aspect label:first-child {
    width: initial;
}

/* upload form specific */
#upload-forms-wrapper form fieldset {
    margin: 0;
    padding: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
}

#upload-forms-wrapper form fieldset > div,
#upload-forms-wrapper form fieldset > p {
    width: calc(100% - 2rem);
    padding: 0 1rem;
}

.dropzone {
    width: 100%;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
}

.dropzone label,
.dropzone .uploader-area,
.dropzone .help,
.dropzone .inline,
.dropzone > div {
    flex: 1;
    margin: 1rem 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.dropzone .uploader-area {
    display: flex;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-100);
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

/* search forms */
form[role=search] {
    display: flex;
    margin: 1rem 0;
    padding: 0;
}

form[role=search] label {
    display: none;
    width: 0;
}

form[role=search] input[type=search] {
    border-radius: var(--radius-medium);
    border: var(--border-width) solid var(--button-border);
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.2rem 0.5rem;
    max-width: 10rem;
    height: 2.05rem;
}

form[role=search] button[type=submit] {
    font-family: 'Material Symbols Outlined', system-ui;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "\e8b6";
    display: block;
    min-width: initial;
    width: 2rem;
    height: 2.05rem;
    margin: 0;
    font-size: 1em;
    line-height: 1.25;
    padding: 0.2rem;
    border-width: var(--border-width);
    border-style: solid;
    border-color: var(--button-border);
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

form[role=search] button[type=reset] {
    display: none;
    font-family: 'Material Symbols Outlined', system-ui;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "\e8b6";
    /*display: block;*/
    min-width: initial;
    width: 2rem;
    height: 2.05rem;
    margin: 0 0 0 0.2rem;
    font-size: 1em;
    line-height: 1.25;
    padding: 0.2rem;
    border-width: var(--border-width);
    border-style: solid;
    border-color: var(--button-border);
}

@media screen and (min-width: 1001px) and (max-width: 1700px){
    form[role=search] {
        margin: 1.3rem 0;
    }
}

/* range element */
/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    border: none;
    border-radius: 0;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--input-track);
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -0.28rem; /* Centers thumb on the track */
    background-color: var(--brand);
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
    outline: 0.1rem solid var(--input-border);
    outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: var(--input-track);
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    background-color: var(--input-checked);
    border: none; /* Removes extra border that FF applies */
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb{
    outline: 0.1rem solid var(--input-border);
    outline-offset: 0.125rem;
}

/* ** model search sidebar */
.sidebar-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    max-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
}

.sidebar-actions form {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    margin: 0;
}

.fullwidth,
.fullwidth div {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.model-filter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
}

.model-filter label {
    max-width: 100%;
    overflow-x: hidden;
    word-break: break-all;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 0.5rem 0;
}

.logfile-output textarea {
    width: 100%;
}

.progress-container {
    width: 100%;
    background-color: var(--color-bg-100);
    border-radius: 4px;
    margin-top: 15px;
    position: relative;
    height: 20px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--signal-success);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-weight: bold;
}
#notifications {
    position: fixed;
    top: 0;
    left: calc(50% - 40vw);
    z-index: 3000;
    margin: 0;
    padding: 0;
}

#notifications:has(*) {
    margin-top: 1rem;
}

#notifications:not(:has(.messages .message)) {
    display: none;
}

.messages {
    width: 80%;
    max-width: 100%;
    margin: 1rem auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-default);

    justify-content: center;
    align-items: center;
}

.notification-banner {
    width: calc(100% - 2rem);
    margin: 1rem auto 0;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: var(--gap-default);

    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-medium);
    color: var(--color-text);
}

.notification,
.message,
div.message {
    flex-grow: 1;
    width: 100%;
    display: block;
    padding: 1rem;
    margin: 0;
    border-radius: var(--radius-medium);
    color: var(--color-text);
}

.notification + .notification {
    margin-top: 1rem;
}

.notification + .notification:last-of-type {
    margin-bottom: 1rem;
}

.notification-banner p,
.notification p,
.message p,
div.message p {
    margin-top: 0;
}

main > .message {
    display: block;
    width: calc(100% - 2rem);
    margin: 1rem;
    padding: 1rem;
}

.notification-content {
    padding: 0;
}

.notification-content > * {
    margin-top: 0.2rem;
}

.notification-actions {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 0.5rem;
}

.message-header {
    font: var(--font-heading-18);
    margin: 0 0 1rem 0;
}

.message-body {
    margin: 1rem 0 0 0;
}

.notification-banner,
.message.online,
.info,
.message.info {
    background-color: var(--signal-blue-transparent);
    color: var(--signal-info);
}

.warning,
.message.warning,
.invalid-upload {
    background-color: var(--signal-orange-transparent);
    color: var(--signal-warning);
}

.offline,
.error,
.critical,
.message.error {
    background-color: var(--signal-red-transparent);
    color: var(--signal-error);
}

.success,
.message.success,
.ok {
    background-color: var(--signal-green-transparent);
    color: var(--color-text);
}

.divider.info {
    background-color: transparent;
    border: var(--border-width) solid var(--signal-blue);
}

.current-device-banner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

/**
 * notification toasts
 * @kyvg/vue3-notification
 */
.toasts {
    color: var(--notification-text);
    background-color: var(--notification-background);
    border: 0;
    border-bottom: 5px solid var(--signal-info);
    border-radius: var(--radius-small);
    margin: 1rem;
    padding: 0.5rem;
}

.toasts .notification-title {
    margin-left: 34px;
}

.toasts .notification-content {
    margin-left: 34px;
}

.toasts.info {
    color: var(--notification-text);
    background-color: var(--notification-background);
    border-bottom-color: var(--signal-blue-transparent);
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%3e%3cg%20class='24x24/Solid/info'%3e%3cpath%20fill='%2342A5F5'%20d='M12%2017.375c.39%200%20.716-.132.98-.395a1.33%201.33%200%200%200%20.395-.98v-3.625c0-.39-.132-.716-.395-.98A1.33%201.33%200%200%200%2012%2011c-.39%200-.716.132-.98.395a1.33%201.33%200%200%200-.395.98V16c0%20.39.132.716.395.98.264.263.59.395.98.395ZM12%209.5c.425%200%20.781-.144%201.069-.431.287-.288.431-.644.431-1.069%200-.425-.144-.781-.431-1.069A1.451%201.451%200%200%200%2012%206.5c-.425%200-.781.144-1.069.431A1.451%201.451%200%200%200%2010.5%208c0%20.425.144.781.431%201.069.288.287.644.431%201.069.431Zm0%2013.35c-1.517%200-2.933-.284-4.25-.852a10.926%2010.926%200%200%201-3.435-2.313%2010.926%2010.926%200%200%201-2.313-3.435c-.568-1.317-.852-2.733-.852-4.25s.284-2.933.852-4.25a10.927%2010.927%200%200%201%202.313-3.435A10.927%2010.927%200%200%201%207.75%202.002c1.317-.568%202.733-.852%204.25-.852s2.933.284%204.25.852a10.927%2010.927%200%200%201%203.435%202.313%2010.928%2010.928%200%200%201%202.313%203.435c.568%201.317.852%202.733.852%204.25s-.284%202.933-.852%204.25a10.927%2010.927%200%200%201-2.313%203.435%2010.926%2010.926%200%200%201-3.435%202.313c-1.317.568-2.733.852-4.25.852Z'%20class='Primary'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 24px;
}

.toasts.success {
    color: var(--notification-text);
    background-color: var(--notification-background);
    border-bottom-color: var(--signal-green-transparent);
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%3e%3cg%20class='24x24/Solid/success'%3e%3cpath%20fill='%234CAF50'%20d='m10.525%2012.925-1.5-1.5A1.427%201.427%200%200%200%207.975%2011c-.417%200-.767.142-1.05.425a1.39%201.39%200%200%200-.413%201.05c.009.417.155.767.438%201.05l2.45%202.45c.323.317.7.475%201.13.475.43%200%20.803-.158%201.12-.475l5.275-5.275c.283-.283.425-.63.425-1.037%200-.409-.142-.755-.425-1.038a1.426%201.426%200%200%200-1.05-.425c-.417%200-.767.142-1.05.425l-4.3%204.3ZM12%2022.85c-1.517%200-2.933-.284-4.25-.852a10.926%2010.926%200%200%201-3.435-2.313%2010.926%2010.926%200%200%201-2.313-3.435c-.568-1.317-.852-2.733-.852-4.25s.284-2.933.852-4.25a10.927%2010.927%200%200%201%202.313-3.435A10.927%2010.927%200%200%201%207.75%202.002c1.317-.568%202.733-.852%204.25-.852s2.933.284%204.25.852a10.927%2010.927%200%200%201%203.435%202.313%2010.928%2010.928%200%200%201%202.313%203.435c.568%201.317.852%202.733.852%204.25s-.284%202.933-.852%204.25a10.927%2010.927%200%200%201-2.313%203.435%2010.926%2010.926%200%200%201-3.435%202.313c-1.317.568-2.733.852-4.25.852Z'%20class='Primary'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 24px;
}

.toasts.warn {
    color: var(--signal-yellow2);
    background-color: var(--notification-background);
    border-bottom-color: var(--signal-yellow2-transparent);
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%3e%3cg%20class='24x24/Solid/warning'%3e%3cpath%20fill='%23FFCA28'%20d='M12%2022.75c-.4%200-.792-.08-1.175-.241a3.557%203.557%200%200%201-1.05-.684l-7.6-7.6a3.556%203.556%200%200%201-.684-1.05A3.008%203.008%200%200%201%201.25%2012c0-.4.08-.796.238-1.188a3.09%203.09%200%200%201%20.687-1.037l7.6-7.6a2.968%202.968%200%200%201%201.05-.704%203.245%203.245%200%200%201%202.363.004c.391.15.737.383%201.037.7l7.6%207.6c.317.3.55.646.7%201.037a3.244%203.244%200%200%201%20.004%202.362%202.969%202.969%200%200%201-.704%201.051l-7.6%207.6c-.3.3-.646.53-1.037.688A3.145%203.145%200%200%201%2012%2022.75Zm0-9.55c.39%200%20.716-.132.98-.395a1.33%201.33%200%200%200%20.395-.98v-3.25c0-.39-.132-.716-.395-.98A1.33%201.33%200%200%200%2012%207.2c-.39%200-.716.132-.98.395a1.33%201.33%200%200%200-.395.98v3.25c0%20.39.132.716.395.98.264.263.59.395.98.395Zm0%203.75c.39%200%20.716-.132.98-.395a1.33%201.33%200%200%200%20.395-.98c0-.39-.132-.716-.395-.98A1.33%201.33%200%200%200%2012%2014.2c-.39%200-.716.132-.98.395a1.33%201.33%200%200%200-.395.98c0%20.39.132.716.395.98.264.263.59.395.98.395Z'%20class='Primary'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 24px;
}

.toasts.error {
    color: var(--signal-error);
    background-color: var(--notification-background);
    border-bottom-color: var(--signal-red-transparent);
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%3e%3cg%20class='24x24/Solid/error'%3e%3cpath%20fill='%23EF5350'%20d='M9.05%2021.7a3.114%203.114%200%200%201-2.225-.925l-3.9-3.9A3.126%203.126%200%200%201%202%2014.65v-5.6a3.113%203.113%200%200%201%20.925-2.225l3.9-3.9A3.125%203.125%200%200%201%209.05%202h5.6a3.113%203.113%200%200%201%202.225.925l3.9%203.9A3.125%203.125%200%200%201%2021.7%209.05v5.6a3.114%203.114%200%200%201-.925%202.225l-3.9%203.9a3.125%203.125%200%200%201-2.225.925h-5.6Zm2.8-8.175%201.9%201.9a1.1%201.1%200%200%200%20.838.337c.325-.008.604-.129.837-.362.233-.233.35-.513.35-.838%200-.324-.117-.604-.35-.837l-1.9-1.875%201.9-1.9c.233-.233.35-.512.35-.837%200-.325-.117-.605-.35-.838a1.143%201.143%200%200%200-.838-.35c-.325%200-.604.117-.837.35l-1.9%201.9-1.9-1.9a1.129%201.129%200%200%200-.825-.35c-.317%200-.592.117-.825.35-.233.233-.35.512-.35.838%200%20.325.117.604.35.837l1.875%201.9-1.9%201.9a1.085%201.085%200%200%200-.338.825c.009.317.13.592.363.825.233.233.512.35.837.35.325%200%20.605-.117.838-.35l1.875-1.875Z'%20class='Primary'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 24px;
}
/* collapsible forms */
details {
    margin: 0.5rem 1rem 1rem;
    padding: 0;
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-medium);
}

summary {
    top: 0;
    font: var(--font-heading-20);
    min-height: 3rem;
    color: var(--color-text);
    background: var(--color-bg-50);
    margin: 0;
    padding: 1rem;
    cursor: pointer;
    border-radius: var(--radius-medium-inside);
}

summary > * {
    margin: 0;
}

details[open] {
    margin: 0.5rem 1rem 1rem 0;
    padding: 0 0 1rem 0;
}

details[open] > :not(summary) {
    margin: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* Get rid of the marker pseudo-element from all browser for good */
details > summary {
    position: relative;
    list-style: none;
}

details > summary:after {
    font-family: 'Material Symbols Outlined', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 2rem;
    line-height: 0.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
    content: "\e313";
    position: absolute;
    top: 1rem;
    right: 0;
    padding-right: 1rem;
}

details[open] > summary:after {
    content: "\e316";
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] > summary {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

[data-theme="dark"] details {
    border-color: var(--color-text);
}

[data-theme="dark"] summary {
    background: transparent;
    color: var(--color-text);
}
table {
    width: 100%;
    max-width: var(--max-table-width);
    border-collapse: collapse;
}

tr:not(:last-of-type) {
    border-bottom: var(--border-width) solid var(--table-border);
}

tr:nth-child(even) {
    background-color: var(--table-bg-even);
}

th {
    font: var(--font-heading-18);
    text-align: left;
}

td,
th {
    padding: 0.8rem 0.5rem;
}

th.checkboxes,
td.checkboxes {
    min-width: 3rem;
    text-align: center;
}

td a .material-symbols-rounded,
td a .material-symbols-outlined,
th a .material-symbols-rounded,
th a .material-symbols-outlined {
    vertical-align: text-bottom;
}

thead tr {
    border-bottom: calc(var(--border-width) * 2) solid var(--table-border);
}

thead th {
    font: var(--font-heading-18);
}

tfoot {
    font: var(--font-text-12-medium);
}

.systemlist a {
    font: var(--font-text-16-regular);
}

.serverlist,
.serversettings,
.systemlist,
.device-info,
.device-selection-table,
.model-detail-properties {
    margin: 1rem 0 2rem;
    padding: 1rem;
    border-radius: var(--radius-medium);
    background: var(--color-lighten);
    max-width: var(--max-content-width);
}
.tabs-component-tabs {

}

.tabs-component-tabs:focus,
.tabs-component-tabs:active,
.tabs-component-tabs.is-active {
    background: var(--button-active);
    color: var(--button-text);
}

.tabs-component-tabs:hover{
    background: var(--button-hover);
    color: var(--button-background);
}

.tabs-component {
    margin: 1rem 0;
    padding: 0;
}

.tabs-component .tabs-component-tabs {
    list-style: none;
    background: var(--color-background);
    display: flex;
    align-items: flex-end;
    align-content: stretch;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0;
    margin: 0.5rem 0 0;
    border: 0.1rem solid var(--color-border);
    border-bottom: 0;
    border-top-right-radius: var(--radius-medium);
    border-top-left-radius: var(--radius-medium);
}

.tabs-component .tabs-component-tabs li {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.tabs-component .tabs-component-tabs .tabs-component-tab-a {
    border: 0.1rem solid var(--color-border);
    border-bottom: 0;
    border-top-right-radius: var(--radius-medium);
    border-top-left-radius: var(--radius-medium);
    padding: 0.3rem 0.5rem 0.2rem;
    margin: 0;
    text-decoration: none;
}

.tabs-component-tab-a:link {
    background: var(--color-bg-50);
    color: var(--color-text);
}

.tabs-component-tab-a:focus,
.tabs-component-tab-a:active,
.tabs-component-tab-a.is-active,
.tabs-component-tab-a:hover {
    background: var(--color-bg-100);
    color: var(--color-text);
}

.tabs-component .tabs-component-panels > section {
    margin-top: 0;
    padding: 0.5rem 0.5rem 1rem;
    border: 0.1rem solid var(--color-border);
    border-top: 0;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
}
.model .outline {
    border-radius: var(--radius-medium);
    color: var(--color-text);
    background: var(--color-lighten);
    border: 0;
    margin: 1rem 0 2rem 0;
    padding: 1rem;
    position: relative;
}

.models-listing {
    max-width: var(--max-content-width);
}

.model-compact {
    border-radius: var(--radius-medium);
    color: var(--color-text);
    background: var(--color-background);
    border: 0;
    margin: 1rem 0 0.5rem 0;
    padding: 0.5rem 1rem;
    position: relative;
}

.models-listing .model-compact:nth-of-type( 2n + 1 ) {
    background: var(--color-layer);
}

.models-listing .invalid-upload {
    background-color: var(--signal-orange-transparent);
}

.models-listing .invalid-upload:nth-of-type( 2n + 1 ) {
    background: var(--signal-red-transparent);
}

.model-compact + .model-compact {
    margin-top: 0;
}

.model-compact a {
    text-decoration: none;
}

.model-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.model-header :is(h1, h2, h3) {
    margin: 0.5rem 0;
    padding: 0;
    width: 100%;
}

.model-header .serial {
}

.model-header .action {
    margin: 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    text-align: end;
    max-width: 100%;
}

.model-header .action .button {
    margin: 0 0.3rem 0 0;
    cursor: pointer;
}

.model-header .action .button.disabled {
    cursor: not-allowed;
}

.header-actions :is(a, span) .small-label,
.model-header :is(a, span) .small-label {
    display: none;
}

.model-footer {
    color: var(--color-text);
    background: var(--color-background);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0.5rem 0.25rem;
    margin: 0;
}

.models-listing .model-compact:nth-of-type( 2n ) .model-footer {
    background: var(--color-lighten);
}

.model-footer div {
    display: inline-block;
    padding: 0 0.5rem;
}

.model-footer span {
    display: block;
    padding: 0.25rem 0;
}

.model-stats {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.model-stats div {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem;
}

.model-stats .label {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.model-stats span.value {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.model-detail-downloads h3,
.model-detail-input h3,
.model-detail-output h3,
.model-features h3 {
    margin: 0 0 0.5rem;
}

.model-detail-input ul,
.model-detail-output ul,
.model-features {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.25rem -0.25rem;
}

.model-detail-input ul li,
.model-detail-output ul li,
.model-features li {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    margin: 0 0 0.25rem 0.25rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.model-runtimes li {
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--radius-medium);
}

.model-link {
    font-weight: bold;
    text-decoration: none;
}

.model-link .material-symbols-rounded,
.model-link .material-symbols-outlined {
    vertical-align: text-bottom;
}

.model-detail {
}

.model-detail form {
    margin: 0.5rem 0;
    padding: 0.5rem;
}

.model-detail form fieldset {
    display: block;
    position: relative;
    border: 0;
    margin: 0;
    padding: 3rem 0 0 0;
    background: var(--color-layer);
}

.model-detail form legend {
    font: var(--font-heading-18);
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    margin: 0;
    padding: 0.5rem;
    color: var(--color-muted);
}

ul.downloads {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.downloads li {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    border-bottom: 0.1rem solid var(--color-border);
}

ul.downloads p {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

ul.downloads p span {
    display: inline-block;
    height: 1.5rem;
    line-height: 1;
    padding: 0.5rem 0;
}

ul.downloads br {
    display: none;
}

ul.downloads :is(.button, input[type=button], button) {
    color: var(--color-text);
}

.head-container {
    display: flex;
    padding: 1rem 0 2rem 0;
    justify-content: space-between;
    align-items: start;
    max-width: var(--max-content-width);
}

.head-container h2 {
    margin: 0;
}

.head-container a {

}

.catalogues-listing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin: 0.5rem 0;
    padding: 0.5rem;
    gap: var(--gap-small);
    background: var(--color-darken);
    border-radius: var(--radius-medium);
}

.catalogues-listing h2,
.catalogues-listing h3 {
    margin-top: 0;
    width: 100%;
    max-width: initial;
}

/* medium screen width */
@media screen and (max-width: 600px) {
    .model-header a .label {
        display: none;
    }

    .model-header span .small-label,
    .model-header a .small-label {
        display: inline;
    }
}

.device-selection-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    background-color: var(--color-background);
}
.device-selection-actions,
.device {
    display: flex;
    flex-direction: row;
    gap: var(--gap-default);
    padding: var(--gap-small);
    margin: 0 0 5px;
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-50);
}
.device:nth-child(even) {
    background-color: var(--color-background);
}
.device-details {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    flex-grow: 1;
}
.device-details > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
.device-details > .device-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-default);
}
.device-details > .device-footer > * {
    min-width: 20%;
    max-width: 33%;
    flex-grow: 0;
}
.device-footer :is(span, .label):not(.material-symbols-outlined) {
    font: var(--font-text-12-regular);
}
.device-footer .material-symbols-outlined {
    font-size: 12px;
    line-height: 15.6px;
}
.device-pipelines {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    column-gap: var(--gap-small);
    row-gap: 5px;
}
.device-pipelines .pipeline-summary {
    flex-grow: 1;
    background: var(--color-bg-100);
    border-radius: var(--radius-medium);
    margin: 0;
    padding: var(--gap-small);
}
.device-pipelines .button-collapsed {
    margin: 0;
    flex-grow: 1;
    height: initial;
    justify-content: flex-end;
}
html,
body {
    margin: 0;
    padding: 0;
    color-scheme: light dark;
    box-sizing: border-box;
    height: 100%;
}

#app {
    display: flex;
}

/* Content container layout */
.content-container {
    flex: 1; /* Takes up the remaining space beside the sidebar */
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: calc(100% - 14rem);
    overflow: hidden; /* Prevent content overflow */
    position: relative;
    border-left: 0.2rem solid var(--nav-border);
}

body:has(nav.collapsed) .content-container {
    width: calc(100% - 4rem);
}

/* Sticky Headers */
header {
    width: 100%; /* Always span the full width of the content area */
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    z-index: 10;
}

/* Main content area */
main {
    flex: 1; /* Fills the available vertical space */
    overflow-y: auto; /* Enable vertical scrolling for content overflow */
    padding: 0 0 2rem 0;
}

/* Footer styles */
footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    width: 100%; /* Always span the full width of the content area */
}

header > *,
main > *,
footer > * {
    padding: 0 1rem;
}

header form,
header form[role=search] {
    margin: 0;
}

footer > * {
    color: var(--color-muted);
}

.header-actions,
.header-actions div,
.header-actions form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-actions,
.footer-actions div,
.footer-actions form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.header-actions,
.footer-actions {
    margin-top: 0.2rem;
}

.sidebar-actions {
    position: absolute;
    display: block;
    padding: 0.5rem;
    z-index: 100;
    width: 30%;
    min-width: 15rem;
    max-width: 50rem;
    top: 0;
    bottom: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
    background: var(--color-bg-100);
}

.sidebar-actions.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    transition: all 0.3s ease-in-out;
}

.sidebar-actions.collapsed .sidebar-content {
    display: none;
}

.sidebar-actions:not(.collapsed) .sidebar-content {
    display: block;
}

.sidebar-actions .menu-tab {
    position: absolute;
    bottom: 45%;
    right: -1rem;
    display: inline-block;
    width: 1rem;
    min-width: 1rem;
    padding: 0;
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--radius-medium);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sidebar-actions .menu-tab span {
    position: relative;
    left: -0.5rem;
    font-size: 2rem;
    line-height: 1.6rem;
    width: 1rem;
    margin: 0;
    padding: 0.6rem 0 0 0;
    display: inline-block;
}

.sidebar-actions:not(.collapsed) .open {
    display: none;
}

.sidebar-actions.collapsed .closed {
    display: none;
}

.breadcrumbs {
    margin: 0;
}

.breadcrumbs > * {
    display: inline-block;
    margin: 0 0.5rem 0 0;
}

.breadcrumbs > *:not(:last-child):after {
    content: ">";
    margin: 0 0 0 0.5rem;
    color: var(--color-muted);
}

hr {
    border: var(--border-width) solid var(--color-border);
    border-top: 0;
    margin: 1rem 0;
}

table {
    width: 100%;
}

table th {
    text-align: left;
}

table tr {
    vertical-align: top;
}

/* pagination collapsed buttons */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 80rem;
}

.pagination .button-collapsed {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1px;
    align-items: center;
    align-content: stretch;
    height: 100%;
    padding: 0;
}

.pagination .button-collapsed :is(button, .button) {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-inline: 0;
    min-width: 2rem;
    text-align: center;
}

.pagination .button-collapsed :is(button, .button):first-child {
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
}

.pagination .button-collapsed :is(button, .button):last-child {
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
}

.pagination .button-collapsed :is(button, .button) span {
    font-size: 0.95rem;
}

.simple-group {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--radius-large);
    border: none;
    background-color: var(--color-bg-50);
}

.simple-group:has(.modified) {
    background-color: var(--signal-blue-transparent);
}

.simple-group form {
    background-color: var(--color-layer);
}

.simple-group p {
    margin-block-start: 0;
}

/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/* * {
  scrollbar-width: thin;
  scrollbar-color: var(--main-muted) var(--main-bg);
} */

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.6rem;
}

section::-webkit-scrollbar,
form::-webkit-scrollbar,
div::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.6rem;
}

*::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: transparent;
    border: 0.1rem solid transparent;
}

*::-webkit-scrollbar-track:hover {
    background-color: var(--color-darken);
}

* .main-menu::-webkit-scrollbar-track:hover {
    background-color: var(--color-lighten);
}

*::-webkit-scrollbar-track:active {
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--radius-small);
    background-color: var(--color-muted);
    border: 0.1rem solid var(--color-muted);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-muted);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--color-muted);
}
@media screen and (max-width: 600px) {

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

}
@media screen and (min-width: 1001px) and (max-width: 1700px) {
    .header-actions {
        margin-top: 0.5rem;
    }
}

@media screen and (min-width: 1701px) {
    .header-actions {
        margin-top: 0.5rem;
    }
}

/* Sidebar styles */
.menu-toggle-container,
.menu-toggle {
    display: none;
}

.main-menu {
    width: 14rem; /* Expanded width for icons + labels */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    padding: 0 1rem 1rem 1rem;
    border: 0;
    transition: width 0.3s ease-in-out;
    background: var(--nav-bg);
    color: var(--nav-text);
    overflow: hidden;
    overflow-y: auto;
    height: 100vh;
}

.main-menu .nav-container {
    width: 100%;
    min-width: 3rem;
}

.main-menu.collapsed {
    width: 5rem; /* Minimal width for icons only */
}

.main-menu .spacer {
    min-height: 5rem;
}

.main-menu .logo,
.main-menu a {
    min-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease-in-out;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
    overflow: hidden;
}

.main-menu .logo img {
    max-height: 3rem;
    transition: all 0.3s ease-in-out;
}

.main-menu a,
.main-menu a:link,
.main-menu a:visited {
    padding: 0.5rem;
    background: var(--nav-button);
    color: var(--nav-link);
    border-radius: var(--radius-medium);
}

.main-menu a:focus,
.main-menu a:hover {
    background: var(--nav-button-hover);
    color: var(--nav-link-hover);
    transition: all 0.3s ease-in-out;
}

:is(.main-menu a:focus, .main-menu a:hover):not(.logo) svg * {
    fill: var(--nav-link-hover);
    transition: all 0.3s ease-in-out;
}

.main-menu a:active,
.main-menu a.active,
.main-menu a.router-link-active,
.main-menu a.router-link-exact-active {
    background: var(--nav-button-active);
    color: var(--nav-link-active);
    transition: all 0.3s ease-in-out;
}

:is(.main-menu a:active, .main-menu a.active, .main-menu a.router-link-active, .main-menu a.router-link-exact-active):not(.logo) svg * {
    fill: var(--nav-link-active);
    transition: all 0.3s ease-in-out;
}

.main-menu a.disabled,
.main-menu a[disabled],
.main-menu a[readonly] {
    background: var(--nav-button-disabled);
    color: var(--nav-link-disabled);
    transition: all 0.3s ease-in-out;
}

.main-menu a .material-symbols-outlined {
    font-size: 2rem;
}

.main-menu a .label {
    margin-left: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.main-menu.collapsed a .label {
    display: none;
    transition: all 0.3s ease-in-out;
}

.main-menu.show a .label {
    display: block;
    transition: all 0.3s ease-in-out;
}

.main-menu .logo img {
    display: none;
    transition: all 0.3s ease-in-out;
}

.main-menu .logo img.logo-dark {
    display: block;
}

.main-menu.collapsed .logo img.logo-dark {
    display: none;
}

.main-menu.collapsed .logo img.icon-dark {
    display: block;
}

[data-theme='dark'] {
    .main-menu .logo img.logo-dark {
        display: none;
    }

    .main-menu.collapsed .logo img.logo-dark {
        display: none;
    }

    .main-menu.collapsed .logo img.icon-dark {
        display: none;
    }

    .main-menu .logo img.logo-white {
        display: block;
    }

    .main-menu.collapsed .logo img.logo-white {
        display: none;
    }

    .main-menu.collapsed .logo img.icon-white {
        display: block;
    }
}

.menu-tab {
    cursor: pointer;
}

.main-menu:not(.collapsed) .menu-tab {
    display: inline-block;
    width: 2rem;
    min-width: 2rem;
    padding: 0.3rem 0 0;
    align-self: flex-end;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.main-menu:not(.collapsed) .open {
    display: none;
}

.main-menu.collapsed .closed {
    display: none;
}

.version-number {
    display: block;
    color: var(--nav-link-disabled);
    text-align: center;
}
.modal,
.dialog-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-dialog-container);
    z-index: 100;
    overflow: hidden;
}

.dialog-container-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 15rem;
    min-width: 65vw;
    background: var(--color-layer);
    overflow: hidden;
}

.dialog {
    position: relative;
    margin: 0;
    padding: 1rem 1rem 2rem;
    min-width: 15rem;
    width: 60%;
    max-width: var(--max-content-width);
    min-height: 10rem;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    background: var(--color-background);
    border-radius: var(--radius-medium);
}

.dialog h3 {
    text-align: center;
}

.dialog p {

}

.dialog .dialog-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.dialog .dialog-header .dialog-title {
    margin: 0;
    padding: 0;
}

.dialog .dialog-header .close {
    top: 0;
    right: 0;
}

.dialog :is(.dialog-content, .dialog-body) {
    width: 100%;
    flex-grow: 1;
}

.dialog-body :is(h1,h2,h3,h4,h5,h6,p) {
    max-width: 100%;
    width: 100%;
}

.dialog .dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 4rem;
}

.loading-message,
.not-found {
    text-align: center;
}

:is(.not-found, .loading-message) :is(.material-symbols-outlined, .material-symbols-rounded) {
    font-size: 4rem;
}

.dialog .dialog-footer,
.dialog .dialog-buttons {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dialog form {
    background: var(--color-layer);
}

.dialog .inline {
    display: flex;
}

.dialog fieldset div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.dialog fieldset label,
.dialog fieldset span {
    flex-grow: 1;
    margin: 0 0.5rem 0;
    padding: 0;
}

.remaining-label {
    display: block;
    width: 5rem;
    text-align: center;
}

.dialog.loader {
    animation: 1s ease-in-out infinite alternate psychedelic;
}

.close-button {
    position: absolute;
    right: 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.dialog-inline-selection {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 80vh;
    overflow: hidden;
    overflow-y: auto;
}
.scroll-shadows {
    background:
        /* Shadow Cover TOP */
        linear-gradient(
            var(--color-background) 30%,
            var(--color-shadow-min)
        ) center top,

        /* Shadow Cover BOTTOM */
        linear-gradient(
            var(--color-shadow-min),
            var(--color-background) 70%
        ) center bottom,

        /* Shadow TOP */
        radial-gradient(
            farthest-side at 50% 0,
            var(--color-shadow-step),
            var(--color-shadow-max)
        ) center top,

        /* Shadow BOTTOM */
        radial-gradient(
            farthest-side at 50% 100%,
            var(--color-shadow-step),
            var(--color-shadow-max)
        ) center bottom;

    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}

.invisible {
    display: none;
}

.rotate {
    /* Animation properties */
    animation: rotate-animation 4s linear infinite;

    /* Ensures rotation occurs around the center (default behavior) */
    transform-origin: center;

    /* Optional: If the element you are rotating has no size, ensure it has width/height */
    display: inline-block;
}

/* Define the keyframes for the rotation */
@keyframes rotate-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.vmspopup .not-in-app,
.vmspopup .model-compact .serial {
    display: none;
}

.vmspopup .pipeline-subform div label {
    width: auto;
    margin-right: 0.2rem;
}

.only-in-app {
    display: none;
}

.vmspopup .only-in-app {
    display: initial;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/material-symbols-outlined-BDRtoJUL.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/material-symbols-rounded-tWfxpDEp.woff2") format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/material-symbols-sharp-D4Ln1FD1.woff2") format("woff2");
}
.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* roboto-flex-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-cyrillic-ext-wght-normal-CVcCQn0y.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-flex-cyrillic-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-cyrillic-wght-normal-BJ-nQEdz.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-flex-greek-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-greek-wght-normal-DeN4rzfy.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-flex-vietnamese-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-vietnamese-wght-normal-AVFfiTln.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-flex-latin-ext-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-latin-ext-wght-normal-gysdOMcS.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-flex-latin-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-latin-wght-normal-n-dP9qr2.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
svg.svg-icon[data-v-a8f80b1e] * {
  fill: var(--nav-link);
}

svg.svg-icon[data-v-d98d970a] * {
  fill: var(--nav-link);
}

.menu-logo[data-v-dfd10cac],
.menu-logo svg[data-v-dfd10cac] {
  height: 26px;
}
.collapsed .expanded-menu-logo[data-v-dfd10cac] {
  display: none;
}
.expanded .collapsed-menu-logo[data-v-dfd10cac] {
  display: none;
}
.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}