:root {
    --design-unit: 0 !important;
    --stroke-width: 0 !important;
    --elevation-shadow-dialog: none !important;
    --accent-fill-rest: var(--sax-color-common-background-default) !important;
    --accent-fill-hover: var(--sax-color-common-background-default) !important;
    --accent-fill-active: var(--sax-color-common-background-default) !important;
    --accent-fill-focus: var(--sax-color-common-background-default) !important;
    --fill-color: var(--dds-color-common-text-primary) !important;
    --neutral-layer-floating: var(--sax-color-common-background-default) !important;
    --neutral-stroke-rest: transparent !important;
    --sax-font-family-base: var(--dds-font-family-base, monospace), "Segoe UI";
    --sax-color-common-text-primary: var(--dds-color-common-text-primary, red);
    --sax-color-common-text-secondary: var(--dds-color-common-text-secondary, red);
    --sax-color-common-background-default: var(--dds-color-common-background-default, red); /*#F6F6F6;*/
    --sax-color-component-background-default: var(--dds-color-common-background-default);
    --sax-color-common-neutral-default: var(--dds-color-common-neutral-default, red);
    --sax-color-brand-primary: var(--dds-color-blue-70, red);
    --sax-color-brand-secondary: var(--dds-color-blue-50, red);
    --sax-color-brand-tertiary: #1B1A18;
    --sax-color-brand-stroke-secondary: var(--dds-color-blue-50, red);
    --sax-color-brand-stroke-tertiary: #1B1A18;
    --sax-color-card-background: var(--dds-color-white, red);
    --sax-color-card-border: var(--dds-color-common-border-empty, red);
    --sax-color-feedback-hover: var(--sax-color-common-background-default, red);
    --sax-space-100: var(--dds-space-100, 100px);
    --sax-space-200: var(--dds-space-200, 100px);
    --sax-space-400: var(--dds-space-400, 100px);
    --sax-space-800: var(--dds-space-800, 100px);
    --sax-color-divider: var(--dds-color-divider, red);
    --sax-font-size-300: var(--dds-font-size-300, 30px);
    --sax-font-size-350: var(--dds-font-size-350, 30px);
    --sax-font-size-400: var(--dds-font-size-400, 30px);
    --sax-card-shadow: 0 0 4px 0.1px rgba(0, 0, 0, 0.2);
    --sax-border-radius-100: var(--dds-border-radius-100, 80px);
    --sax-color-common-border-focus: var(--dds-color-common-border-focus, red);
    --sax-font-weight-bold: var(--dds-font-weight-bold, 900);
    --sax-font-weight-regular: var(--dds-font-weight-regular, 900);
    --sax-icon-color-background-neutral: var(--dds-color-common-neutral-default, red);
    --sax-color-feedback-information: var(--dds-color-common-information, red);
    --sax-color-feedback-success: var(--dds-color-common-success, red);
    --sax-color-feedback-negative: var(--dds-color-common-danger-default, red);
    --sax-color-feedback-warning: var(--dds-color-common-warning, red);
    --sax-color-common-text-inverse: var(--dds-color-common-text-inverse, red);
    --sax-color-common-text-highlight: var(--dds-color-common-brand-default, red);
    --sax-color-common-neutral-hover: var(--dds-color-common-neutral-hover, red);
    --sax-icon-color-loadgrid-floor: #AA6031;
    --sax-icon-color-loadgrid-plus: var(--dds-color-common-brand-default, red);
    --sax-icon-color-loadgrid-delete: #A8252E;
    --sax-icon-color-loadgrid-hide: var(--dds-color-common-brand-default, red);
    --sax-color-common-disabled: var(--dds-color-common-disabled, red);
    --sax-color-common-surface-selected-default: var(--dds-color-common-surface-selected-default, red);
    --sax-color-common-surface-selected-hover: var(--dds-color-common-surface-selected-hover, red);
    --sax-color-common-surface-hover: var(--dds-color-common-surface-hover, red);
    --sax-modal-width-default: 100%;
    --sax-modal-height-default: 100%;
    --sax-color-link-text-default: var(--dds-color-link-text-default, red);
    --sax-color-link-text-hover: var(--dds-color-link-text-hover, red);
    --sax-color-link-text-press: var(--dds-color-link-text-press, red);
    --sax-color-link-text-visited-default: var(--dds-color-link-text-visited-default, red);
    --sax-color-link-text-visited-hover: var(--dds-color-link-text-visited-hover, red);
    --sax-color-link-text-visited-press: var(--dds-color-link-text-visited-press, red);
    --sax-scrollbar-color: var(--sax-color-card-border);
    --sax-scrollbar-fill-color: var(--sax-color-card-background);
    --sax-color-column-load-cooling: var(--dds-color-blue-90, red);
    --sax-color-column-load-heating: var(--dds-color-red-70, red);
    --sax-color-column-load-red: rgba(255,54,53,1);
    --sax-color-column-load-yellow: rgba(255,242,64,1);
    --sax-color-column-load-green: rgba(29,223,72,1);
    /*GoJs*/
    /*Defaults*/
    --sax-gojs-default-stroke-color: var(--dds-color-gray-60, red);
    --sax-gojs-default-stroke-color-hover: var(--dds-color-blue-20, red);
    --sax-gojs-default-stroke-color-selected: var(--dds-color-blue-70, red);
    --sax-gojs-default-stroke-color-highlighted: var(--dds-color-red-70, red);
    --sax-gojs-default-stroke-color-error: var(--dds-color-red-70, red);
    --sax-gojs-default-link-color-criticalpath: var(--sax-color-column-load-yellow, red);
    --sax-gojs-default-stroke-color-bmspoint: var(--dds-color-yellow-40, red);
    --sax-gojs-default-text-color: var(--dds-color-gray-100, red);
    --sax-gojs-default-text-color-disabled: var(--dds-color-gray-80, red);
    --sax-gojs-default-fill-color: var(--dds-color-white, red);
    --sax-gojs-default-link-color-complete: var(--dds-color-green-70, red);
    --sax-gojs-default-link-color-error: var(--dds-color-red-70, red);
    --sax-gojs-default-link-color-hover: var(--dds-color-blue-20, red);
    --sax-gojs-default-link-color-disabled: var(--dds-color-gray-50, red);
    --sax-gojs-default-link-color-selected: var(--dds-color-blue-70, red);
    --sax-gojs-default-link-color-wirings: var(--dds-color-green-70, red);
    --sax-gojs-default-link-color-infos: var(--dds-color-gray-100, red);
    --sax-gojs-default-link-color-infos-separator: var(--dds-color-blue-80, red);
    --sax-gojs-default-report-link-color-pipeid: #000000;
    --sax-gojs-default-report-link-color-flow: var(--dds-color-blue-70, red);
    --sax-gojs-default-report-link-color-diameter: var(--dds-color-red-70, red);
    /**/
    --sax-gojs-stroke-color: var(--sax-gojs-default-stroke-color, red);
    --sax-gojs-stroke-color-hover: var(--sax-gojs-default-stroke-color-hover, red);
    --sax-gojs-stroke-color-selected: var(--sax-gojs-default-stroke-color-selected, red);
    --sax-gojs-stroke-color-highlighted: var(--sax-gojs-default-stroke-color-highlighted, red);
    --sax-gojs-stroke-color-bmspoint: var(--sax-gojs-default-stroke-color-bmspoint, red);
    --sax-gojs-stroke-color-error: var(--sax-gojs-default-stroke-color-error, red);
    --sax-gojs-link-color-criticalpath: var(--sax-gojs-default-link-color-criticalpath, red);
    --sax-gojs-text-color: var(--sax-gojs-default-text-color, red);
    --sax-gojs-text-color-disabled: var(--sax-gojs-default-text-color-disabled, red);
    --sax-gojs-fill-color: var(--sax-gojs-default-fill-color, red);
    --sax-gojs-link-color-complete: var(--sax-gojs-default-link-color-complete, red);
    --sax-gojs-link-color-error: var(--sax-gojs-default-link-color-error, red);
    --sax-gojs-link-color-hover: var(--sax-gojs-default-link-color-hover, red);
    --sax-gojs-link-color-disabled: var(--sax-gojs-default-link-color-disabled, red);
    --sax-gojs-link-color-selected: var(--sax-gojs-default-link-color-selected, red);
    --sax-gojs-link-color-wirings: var(--sax-gojs-default-link-color-wirings, red);
    --sax-gojs-link-color-infos: var(--sax-gojs-default-link-color-infos, red);
    --sax-gojs-link-color-infos-separator: var(--sax-gojs-default-link-color-infos-separator, red);
    --sax-gojs-report-link-color-pipeid: var(--sax-gojs-default-report-link-color-pipeid, red);
    --sax-gojs-report-link-color-length: var(--sax-gojs-default-report-link-color-length, red);
    --sax-gojs-report-link-color-diameter: var(--sax-gojs-default-report-link-color-diameter, red);
}

    :root[data-theme=dark] {
        --sax-card-shadow: 0 0 4px 0.1px rgba(255, 255, 255, 0.2);
        --sax-color-brand-primary: var(--dds-color-white, red);
        --sax-color-brand-secondary: var(--dds-color-white, red);
        --sax-color-brand-tertiary: var(--dds-color-white, red);
        --sax-color-brand-stroke-secondary: var(--sax-color-common-background-default);
        --sax-color-brand-stroke-tertiary: var(--sax-color-common-background-default);
        --sax-color-card-background: var(--dds-color-blue-gray-120, red);
        --sax-color-column-load-cooling: var(--dds-color-blue-60, red);
        --sax-color-column-load-heating: var(--dds-color-orange-60, red);
        --sax-color-column-load-red: rgba(159,27,27,1);
        --sax-color-column-load-yellow: rgba(189, 179, 46,1);
        --sax-color-column-load-green: rgba(27, 151, 55,1);
        /*GoJs*/
        /*--sax-gojs-stroke-color: var(--dds-color-black, red);*/
        --sax-gojs-stroke-color-selected: var(--dds-color-blue-60, red);
        --sax-gojs-stroke-color-highlighted: var(--dds-color-red-80, red);
        --sax-gojs-stroke-color-bmspoint: var(--dds-color-yellow-40, red);
        --sax-gojs-text-color: var(--sax-color-common-text-primary, red);
        --sax-gojs-text-color-disabled: var(--sax-color-common-text-secondary, red);
        --sax-gojs-fill-color: var(--sax-color-common-background-default, red);
        --sax-gojs-link-color-complete: var(--dds-color-green-80, red);
        --sax-gojs-link-color-error: var(--dds-color-red-80, red);
        --sax-gojs-link-color-disabled: var(--sax-color-common-disabled, red);
        --sax-gojs-link-color-selected: var(--dds-color-blue-60, red);
        --sax-gojs-link-color-wirings: var(--dds-color-green-80, red);
        --sax-gojs-link-color-infos: var(--sax-color-common-text-primary, red);
        --sax-gojs-link-color-infos-separator: var(--sax-color-common-border-focus, red);
    }

* {
    scrollbar-color: var(--sax-scrollbar-color) var(--sax-scrollbar-fill-color);
}

*[role=button]:not(:disabled) {
    cursor: pointer;
}

@keyframes spinner {
    to {
        transform: rotate(1turn);
    }
}

html, body {
    margin: 0px;
    padding: 0px;
    background-color: var(--sax-color-common-background-default);
    font-family: var(--sax-font-family-base);
    color: var(--sax-color-common-text-primary);
    height: 100%;
    transition: all linear 0.2s;
}

header, body, footer {
    min-width: 976px;
    width: 100%;
}

.header-container {
    padding: var(--sax-space-200);
    padding-bottom: 0px;
}

.header-user-menu {
    color: red !important;
    width: 100px;
}

.topbar-container {
    padding: var(--sax-space-200);
    height: 50px;
    color: var(--sax-color-common-text-primary);
}

.body-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    overflow-y: auto;
}

.footer-container {
    padding: var(--sax-space-200);
}

footer > div {
    font-size: 10px;
}

hr {
    color: var(--sax-color-divider);
}

label {
    font-family: var(--sax-font-family-base);
    font-size: var(--sax-font-size-300);
    color: var(--sax-color-common-text-primary);
}

    label[disabled="disabled"] {
        color: var(--sax-color-common-text-secondary);
        opacity: 0.5;
    }

daikin-toggle {
    transform: scale(0.55);
}

fluent-menu {
    background-color: var(--sax-color-common-background-default) !important;
}

.searchText-Highlight {
    font-weight: bold !important;
    color: var(--sax-color-common-text-highlight);
}

.hide-splitter-overflow {
    width: 100%;
    height: 100%;
    overflow: hidden
}

    .hide-splitter-overflow > div {
        height: 100%;
        overflow: hidden;
        display: flex;
    }

    .hide-splitter-overflow .position-relative > div {
        position: relative;
    }

    .hide-splitter-overflow .display-inline > div {
        display: inline;
    }

.properties-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column
}

.properties-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px 0px 0px 0px;
}

.properties-row-label {
    font-size: var(--sax-font-size-350);
    padding: 10px;
    font-weight: var(--sax-font-weight-bold);
}

.properties-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin: 0 10px;
    min-height:30px;
}

.user-select-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

.selectimage-image {
    height: 50px;
    width: 80px;
    outline: 1px solid;
    padding: 10px 5px;
    margin-top: 15px;
}

.selectimage-image-selected {
    height: 50px;
    width: 80px;
    outline: 3px solid;
    padding: 10px 5px;
    margin-top: 15px;
}

.selectimage-image-disabled {
    opacity: 0.6;
}

.selectimage-image-selected-disabled {
    opacity: 0.6;
}

a {
    cursor: pointer;
    color: var(--sax-color-link-text-default);
}

    a:hover {
        color: var(--sax-color-link-text-hover);
    }

    a:active {
        color: var(--sax-color-link-text-press);
    }

    a:visited {
        color: var(--sax-color-link-text-visited-default);
    }

        a:visited:hover {
            color: var(--sax-color-link-text-visited-hover);
        }

        a:visited:active {
            color: var(--dds-color-link-text-visited-press);
        }

*[role=treeitem] {
    padding:0px !important;
}