:root {
    /* PHZH colors */
    --phzh-color-red: #ee3647;
    --phzh-color-pink: #f2726f;
    --phzh-color-pink-light: #f69892;
    --phzh-color-blue: #26bac7;
    --phzh-color-blue-light: #79cdd0;
    --phzh-color-greyblue: #d1ecec;
    --phzh-color-purple: #ed1c91;
    --phzh-color-ocher: #bebca6;
    --phzh-color-ocher-light: #e0e6dd;
    --phzh-color-yellow: #fec227;
    --phzh-color-green: #b1d270;
    --phzh-color-cool-grey: #f1ece2;
    --phzh-color-dark-grey: #666666;
    /* generic styles */
    --phzh-app-header-height: 61px;
    --phzh-app-header-border-color: var(--neutral-stroke-active);
    --phzh-splitter-opacity: 0.6;
    --phzh-highlight-background: #ffe7b2;
    --phzh-control-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    --phzh-favorite-color: var(--presence-away);
    --phzh-favorite-color-hover: color-mix(in srgb,var(--presence-away),#000 10%);
    /* badge colors */
    --badge-color-dark: #1a1a1a;
    --badge-color-light: #ffffff;
    --badge-fill-danger: color-mix(in srgb,var(--presence-busy),#fff 10%);
    --badge-color-danger: var(--badge-color-light);
    --badge-fill-warning: color-mix(in srgb,var(--presence-away),#fff 10%);
    --badge-color-warning: var(--badge-color-light);
    --badge-fill-success: color-mix(in srgb,var(--presence-available),#fff 10%);
    --badge-color-success: var(--badge-color-light);
    --badge-fill-info: color-mix(in srgb,#0e6db5,#fff 10%);
    --badge-color-info: var(--badge-color-light);
    --badge-fill-highlight: var(--phzh-highlight-background);
    --badge-color-highlight: var(--badge-color-dark);
    --badge-fill-projekt: #6466af;
    --badge-color-projekt: var(--badge-color-light);
    --badge-fill-auftrag: #8b8cab;
    --badge-color-auftrag: var(--badge-color-light);
    --badge-fill-arbeitsraum: #29a25f;
    --badge-color-arbeitsraum: var(--badge-color-light);
    --badge-fill-active: #acc7ee;
    --badge-color-active: var(--badge-color-dark);
    --badge-fill-completed: #98d393;
    --badge-color-completed: var(--badge-color-dark);
    --badge-fill-archived: #ffebcd;
    --badge-color-archived: var(--badge-color-dark);
    --badge-fill-offline: #ffa1a1;
    --badge-color-offline: var(--badge-color-dark);
}


* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fluent-design-container {
    width: 100%;
    height: 100%;
}

mark {
    background-color: var(--phzh-highlight-background);
}

/*pre,*/
div.error {
    background-color: #e5e5e5;
    padding: 1rem;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 1rem 0;
    max-height: 250px;
}

    /*pre.fixed,*/
    div.error.fixed {
        height: 200px;
    }

code {
    background-color: #e5e5e5;
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.json {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
}

    .json > pre {
        padding: 0.5rem;
        line-height: 1.25em;
        white-space: pre-wrap;
        margin: 0;
    }

    .json .jsonKey {
        color: #005e87;
    }

    .json .jsonString {
        color: #A52800;
    }

    .json .jsonConst {
        color: #009F8C;
    }

    .json .jsonNumber {
        color: #EB2F00;
    }

/* FluentUI override */
fluent-badge > span {
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.fluent-data-grid {
    --fluent-data-grid-resize-handle-color: var(--neutral-stroke-divider-rest) !important;
    --fluent-data-grid-resize-handle-width: 1px;
    --fluent-data-grid-header-opacity: 1 !important;
    flex-grow: 0 !important;
}

fluent-checkbox::part(label) {
    margin-inline-end: 0;
}

/* FluentTabs */
.phzh-fluent-tabs {
    --density: 0 !important;
}
    .phzh-fluent-tabs::part(start),
    .phzh-fluent-tabs::part(end) {
        --density: 0 !important; /* don't change this, it will scale controls up */
    }

    .phzh-fluent-tabs fluent-tab {
        padding: 0 5px !important;
    }

        .phzh-fluent-tabs fluent-tab:not(:last-of-type) {
            margin-right: 1rem;
        }

        /* fixes selection indicator of tabs, without indicator (set 'ShowActiveIndicator="false"' on FluentTabs) */
        .phzh-fluent-tabs fluent-tab[aria-selected="true"] {
            position: relative;
        }

            .phzh-fluent-tabs fluent-tab[aria-selected="true"]:after {
                content: "";
                display: block;
                position: absolute;
                margin-top: 28px;
                width: 100%;
                height: 3px;
                border-radius: calc(var(--control-corner-radius) * 1px);
                justify-self: center;
                background: var(--accent-fill-rest);
            }

/* FluentGrid */
.phzh-grid{}

    .phzh-grid th.phzh-column-header_no-title .col-sort-button::part(control) {
        padding-left: 3px;
        padding-right: 3px;
    }

/* Custom Components where we cannot use direct css because wrapping directly FluentUI components */
/* HoverButton */
.phzh-hover-button {
}

    .phzh-hover-button.phzh-hover-button_only-icon::part(control) {
        padding: 0px;
        line-height: 0;
        flex-grow: 0;
        min-width: var(--phzh-control-height);
    }

    .phzh-hover-button.phzh-hover-button_only-icon::part(start) {
        margin-inline-end: 0;
    }

    .phzh-hover-button.phzh-hover-button_only-icon::part(end) {
        margin-inline-start: 0;
    }

    .phzh-hover-button.phzh-hover-button_icon-start::part(start) {
        margin-inline-end: 5px;
        line-height: 1;
    }

    .phzh-hover-button.phzh-hover-button_icon-end::part(end) {
        margin-inline-start: 5px;
        line-height: 1;
    }

    .phzh-hover-button fluent-progress-ring {
        width: var(--progress-size) !important;
    }

    .phzh-hover-button.phzh-hover-button_invert-progress fluent-progress-ring {
        filter: none !important;
    }

        .phzh-hover-button.phzh-hover-button_invert-progress fluent-progress-ring::part(background) {
            stroke: var(--neutral-fill-rest);
        }

        .phzh-hover-button.phzh-hover-button_invert-progress fluent-progress-ring::part(indeterminate-indicator-1) {
            stroke: var(--progress-indeterminate-stroke);
        }

    .phzh-hover-button.phzh-hover-button_link {
        text-decoration: underline 1px;
        height: auto !important;
        vertical-align: text-top;
    }

        .phzh-hover-button.phzh-hover-button_link::part(control) {
            padding: 0;
            border: 0;
        }

            .phzh-hover-button.phzh-hover-button_link::part(control):not([disabled]):hover {
                opacity: 1 !important;
            }

        .phzh-hover-button.phzh-hover-button_link > fluent-button {
            text-decoration: underline 1px;
            height: auto !important;
            vertical-align: text-top;
        }

            .phzh-hover-button.phzh-hover-button_link > fluent-button::part(control) {
                padding: 0;
                border: 0;
            }

                .phzh-hover-button.phzh-hover-button_link > fluent-button::part(control):hover {
                    opacity: 1 !important;
                }

    .phzh-hover-button.phzh-hover-button_small {
        --base-height-multiplier: 6;
    }
        .phzh-hover-button.phzh-hover-button_small > p[typo='body'] {
            font-size: var(--type-ramp-minus-1-font-size);
            line-height: var(--type-ramp-minus-1-font-size);
        }
        .phzh-hover-button.phzh-hover-button_small::part(control) {
            padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
        }

/* CounterBadge */
.phzh-counter-badge {
    margin-left: 5px;
}
    .phzh-counter-badge > span {
        padding-left: 0.1em;
        padding-right: 0.1em;
        font-weight: 600;
    }

    .phzh-counter-badge::part(control) {
        font-size: var(--type-ramp-minus-2-font-size);
        line-height: var(--type-ramp-minus-2-line-height);
        font-variation-settings: var(--type-ramp-minus-2-font-variations);
    }

/* Badge */
.phzh-badge {
    font-size: var(--type-ramp-minus-1-font-size);
    font-variation-settings: var(--type-ramp-minus-1-font-variations);
    line-height: 1;
}

    .phzh-badge > span {
        line-height: 1;
        padding-block: 1px 2px;
        padding-left: 0.3em;
        padding-right: 0.3em;
    }

    .phzh-badge.phzh-badge_small {
        font-size: var(--type-ramp-minus-2-font-size);
        font-variation-settings: var(--type-ramp-minus-2-font-variations);
    }

        .phzh-badge.phzh-badge_small > span {
            padding-left: 0.2em;
            padding-right: 0.2em;
            font-weight: 600;
        }

    .phzh-badge.phzh-badge_large {
        font-size: var(--type-ramp-base-font-size);
        font-variation-settings: var(--type-ramp-base-font-variations);
    }

        .phzh-badge.phzh-badge_large > span {
            padding-left: 0.4em;
            padding-right: 0.4em;
        }




.dark {
    --accent-base-color: #6264a7;
    --direction: ltr;
    --neutral-layer-card-container: #1a1a1a;
    --neutral-layer-floating: #333333;
    --neutral-layer-1: #272727;
    --neutral-layer-2: #1a1a1a;
    --neutral-layer-3: #0b0b0b;
    --neutral-layer-4: #000000;
    --fill-color: #272727;
    --accent-fill-rest: #c0bfe0;
    --accent-fill-hover: #b7b5db;
    --accent-fill-active: #a6a5d2;
    --accent-fill-focus: #c0bfe0;
    --accent-foreground-rest: #d1cfe9;
    --accent-foreground-hover: #e2dff2;
    --accent-foreground-active: #ababd5;
    --accent-foreground-focus: #d1cfe9;
    --accent-stroke-control-rest: linear-gradient(#cdcce6 90%, #9c9bb5 100%);
    --accent-stroke-control-hover: linear-gradient(#c5c4e2 90%, #9493b1 100%);
    --accent-stroke-control-active: #b6b5da;
    --accent-stroke-control-focus: linear-gradient(#cdcce6 90%, #9c9bb5 100%);
    --neutral-fill-rest: #333333;
    --neutral-fill-hover: #383838;
    --neutral-fill-active: #2d2d2d;
    --neutral-fill-focus: #333333;
    --neutral-fill-input-rest: #333333;
    --neutral-fill-input-hover: #383838;
    --neutral-fill-input-active: #2d2d2d;
    --neutral-fill-input-focus: #272727;
    --neutral-fill-input-alt-rest: #1a1a1a;
    --neutral-fill-input-alt-hover: #333333;
    --neutral-fill-input-alt-active: #3d3d3d;
    --neutral-fill-input-alt-focus: #1a1a1a;
    --neutral-fill-layer-rest: #333333;
    --neutral-fill-layer-hover: #383838;
    --neutral-fill-layer-active: #383838;
    --neutral-fill-layer-alt-rest: #212121;
    --neutral-fill-secondary-rest: #383838;
    --neutral-fill-secondary-hover: #333333;
    --neutral-fill-secondary-active: #2d2d2d;
    --neutral-fill-secondary-focus: #383838;
    --neutral-fill-stealth-rest: #272727;
    --neutral-fill-stealth-hover: #383838;
    --neutral-fill-stealth-active: #333333;
    --neutral-fill-stealth-focus: #272727;
    --neutral-fill-strong-rest: #8e8e8e;
    --neutral-fill-strong-hover: #b3b3b3;
    --neutral-fill-strong-active: #7a7a7a;
    --neutral-fill-strong-focus: #8e8e8e;
    --neutral-foreground-rest: #ffffff;
    --neutral-foreground-hover: #a8a8a8;
    --neutral-foreground-active: #7a7a7a;
    --neutral-foreground-focus: #ffffff;
    --neutral-foreground-hint: #8e8e8e;
    --neutral-stroke-rest: #505050;
    --neutral-stroke-hover: #636363;
    --neutral-stroke-active: #464646;
    --neutral-stroke-focus: #505050;
    --neutral-stroke-control-rest: linear-gradient(#505050 0%, #383838 10%);
    --neutral-stroke-control-hover: linear-gradient(#595959 0%, #414141 10%);
    --neutral-stroke-control-active: #414141;
    --neutral-stroke-control-focus: linear-gradient(#595959 0%, #414141 10%);
    --neutral-stroke-divider-rest: #3d3d3d;
    --neutral-stroke-input-rest: linear-gradient(#383838 calc(100% - 1px), #929292 calc(100% - 1px), #929292);
    --neutral-stroke-input-hover: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a);
    --neutral-stroke-input-active: #414141;
    --neutral-stroke-input-focus: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a);
    --neutral-stroke-layer-rest: #383838;
    --neutral-stroke-layer-hover: #383838;
    --neutral-stroke-layer-active: #383838;
    --neutral-stroke-strong-rest: #9e9e9e;
    --neutral-stroke-strong-hover: #9e9e9e;
    --neutral-stroke-strong-active: #9e9e9e;
    --neutral-stroke-strong-focus: #9e9e9e;
    --neutral-fill-inverse-rest: #ffffff;
    --neutral-fill-inverse-hover: #fbfbfb;
    --neutral-fill-inverse-active: #ffffff;
    --neutral-fill-inverse-focus: #ffffff;
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #333333;
    --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #414141;
    --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #3d3d3d;
    --input-placeholder-rest: #9e9e9e;
    --input-placeholder-hover: #a2a2a2;
    --input-filled-placeholder-rest: #a2a2a2;
    --input-filled-placeholder-hover: #9e9e9e;
    --clear-button-hover: #383838;
    --clear-button-active: #333333;
    --tree-item-expand-collapse-hover: #464646;
    --tree-item-expand-collapse-selected-hover: #464646;
}

.light {
    --accent-base-color: #6264a7;
    --direction: ltr;
    --neutral-layer-card-container: #f3f3f3;
    --neutral-layer-floating: #ffffff;
    --neutral-layer-1: #fbfbfb;
    --neutral-layer-2: #f3f3f3;
    --neutral-layer-3: #ebebeb;
    --neutral-layer-4: #e0e0e0;
    --fill-color: #fbfbfb;
    --accent-fill-rest: #6466af;
    --accent-fill-hover: #6e6fb4;
    --accent-fill-active: #7a7bbb;
    --accent-fill-focus: #6466af;
    --accent-foreground-rest: #3a3a78;
    --accent-foreground-hover: #2d2d69;
    --accent-foreground-active: #5b5caa;
    --accent-foreground-focus: #3a3a78;
    --accent-stroke-control-rest: linear-gradient(#7475b7 90%, #454679 100%);
    --accent-stroke-control-hover: linear-gradient(#7b7cbb 90%, #4e4f80 100%);
    --accent-stroke-control-active: #8788c2;
    --accent-stroke-control-focus: linear-gradient(#7475b7 90%, #454679 100%);
    --neutral-fill-rest: #ffffff;
    --neutral-fill-hover: #f7f7f7;
    --neutral-fill-active: #fbfbfb;
    --neutral-fill-focus: #fbfbfb;
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #f7f7f7;
    --neutral-fill-input-active: #fbfbfb;
    --neutral-fill-input-focus: #ffffff;
    --neutral-fill-input-alt-rest: #f3f3f3;
    --neutral-fill-input-alt-hover: #ebebeb;
    --neutral-fill-input-alt-active: #e0e0e0;
    --neutral-fill-input-alt-focus: #f3f3f3;
    --neutral-fill-layer-rest: #ffffff;
    --neutral-fill-layer-hover: #ffffff;
    --neutral-fill-layer-active: #ffffff;
    --neutral-fill-layer-alt-rest: #ffffff;
    --neutral-fill-secondary-rest: #efefef;
    --neutral-fill-secondary-hover: #f3f3f3;
    --neutral-fill-secondary-active: #f7f7f7;
    --neutral-fill-secondary-focus: #efefef;
    --neutral-fill-stealth-rest: #fbfbfb;
    --neutral-fill-stealth-hover: #efefef;
    --neutral-fill-stealth-active: #f3f3f3;
    --neutral-fill-stealth-focus: #fbfbfb;
    --neutral-fill-strong-rest: #717171;
    --neutral-fill-strong-hover: #4b4b4b;
    --neutral-fill-strong-active: #868686;
    --neutral-fill-strong-focus: #717171;
    --neutral-foreground-rest: #1a1a1a;
    --neutral-foreground-hover: #7a7a7a;
    --neutral-foreground-active: #a8a8a8;
    --neutral-foreground-focus: #1a1a1a;
    --neutral-foreground-hint: #717171;
    --neutral-stroke-rest: #d6d6d6;
    --neutral-stroke-hover: #c6c6c6;
    --neutral-stroke-active: #e0e0e0;
    --neutral-stroke-focus: #d6d6d6;
    --neutral-stroke-control-rest: linear-gradient(#efefef 90%, #d6d6d6 100%);
    --neutral-stroke-control-hover: linear-gradient(#e5e5e5 90%, #cecece 100%);
    --neutral-stroke-control-active: #e5e5e5;
    --neutral-stroke-control-focus: linear-gradient(#e5e5e5 90%, #cecece 100%);
    --neutral-stroke-divider-rest: #ebebeb;
    --neutral-stroke-input-rest: linear-gradient(#efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292);
    --neutral-stroke-input-hover: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);
    --neutral-stroke-input-active: #e5e5e5;
    --neutral-stroke-input-focus: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);
    --neutral-stroke-layer-rest: #efefef;
    --neutral-stroke-layer-hover: #efefef;
    --neutral-stroke-layer-active: #efefef;
    --neutral-stroke-strong-rest: #636363;
    --neutral-stroke-strong-hover: #636363;
    --neutral-stroke-strong-active: #636363;
    --neutral-stroke-strong-focus: #636363;
    --neutral-fill-inverse-rest: #131313;
    --neutral-fill-inverse-hover: #272727;
    --neutral-fill-inverse-active: #000000;
    --neutral-fill-inverse-focus: #131313;
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #ffffff;
    --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #f3f3f3;
    --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #f7f7f7;
    --input-placeholder-rest: #767676;
    --input-placeholder-hover: #717171;
    --input-filled-placeholder-rest: #6c6c6c;
    --input-filled-placeholder-hover: #6c6c6c;
    --clear-button-hover: #f3f3f3;
    --clear-button-active: #f7f7f7;
    --tree-item-expand-collapse-hover: #e0e0e0;
    --tree-item-expand-collapse-selected-hover: #e0e0e0;
}