@property --yfiles-biofabric-demo-edge-color-value{syntax: "<percentage>"; inherits: true; initial-value: 100%;}@property --yfiles-biofabric-demo-background-color-value{syntax: "<percentage>"; inherits: true; initial-value: 0%;}.demo-page__main,.example-graph-visualization{--fade-opacity: 1;--yfiles-biofabric-demo-group-color-01: #8dd3c7;--yfiles-biofabric-demo-group-color-02: #fdb462;--yfiles-biofabric-demo-group-color-03: #80b1d3;--yfiles-biofabric-demo-group-color-04: #fb8072;--yfiles-biofabric-demo-group-color-05: #bebada;--yfiles-biofabric-demo-group-color-06: #ffffb3;--yfiles-biofabric-demo-group-color-07: #b3de69;--yfiles-biofabric-demo-group-color-08: #fccde5;--yfiles-biofabric-demo-group-color-09: #d9d9d9;--yfiles-biofabric-demo-group-color-10: #bc80bd;--yfiles-biofabric-demo-background-color: #29323c;--yfiles-biofabric-demo-edge-color: #dfdee3;--yfiles-biofabric-demo-node-color: #89919c;--yfiles-biofabric-demo-highlight-color: #d9bb7d;--yfiles-biofabric-demo-adjacency-highlight-color: #dfdee3;--yfiles-biofabric-demo-edge-color-value: 100%;--yfiles-biofabric-demo-background-color-value: 0%;transition:--yfiles-biofabric-demo-edge-color-value .6s ease,--yfiles-biofabric-demo-background-color-value .6s ease;&:has(.highlight,.highlight-adjacency){--fade-opacity: .1;--yfiles-biofabric-demo-edge-color: #89919c;--yfiles-biofabric-demo-edge-color-value: 10%;--yfiles-biofabric-demo-background-color-value: 90%}}[data-theme=light] .demo-page__main,[data-theme=light] .example-graph-visualization{--yfiles-biofabric-demo-group-color-01: #008080;--yfiles-biofabric-demo-group-color-02: #e67e22;--yfiles-biofabric-demo-group-color-03: #2980b9;--yfiles-biofabric-demo-group-color-04: #c0392b;--yfiles-biofabric-demo-group-color-05: #673ab7;--yfiles-biofabric-demo-group-color-06: #f1c40f;--yfiles-biofabric-demo-group-color-07: #27ae60;--yfiles-biofabric-demo-group-color-08: #d81b60;--yfiles-biofabric-demo-group-color-09: #7f8c8d;--yfiles-biofabric-demo-group-color-10: #8e44ad;--yfiles-biofabric-demo-background-color: #ffffff;--yfiles-biofabric-demo-edge-color: #29323c;--yfiles-biofabric-demo-node-color: #bbbfc4;--yfiles-biofabric-demo-highlight-color: #d9bb7d;--yfiles-biofabric-demo-adjacency-highlight-color: #29323c;&:has(.highlight,.highlight-adjacency){--yfiles-biofabric-demo-edge-color: #89919c}}.example-graph-visualization{height:200px;border-radius:25px;margin:25px 0}.things-to-try{margin:25px 0;text-align:justify;text-justify:inter-word;hyphens:auto}#graph-description-container{background-color:#c8dce1;border-radius:8px;padding:16px;margin:0 -8px;text-align:justify;text-justify:inter-word;hyphens:auto;:first-child{margin-block-start:0}:last-child{margin-block-end:0}#data-description :is(ul,ol){padding:0 16px}}.highlight-description{animation:highlight-animation 3s forwards}@keyframes highlight-animation{0%,to{background-color:#c8dce1}20%{background-color:#ff9800}}#graph-components{display:flex;flex-direction:column;gap:4px}#graphComponent-biofabric{width:100%;height:60%}#graphComponent-circular{width:100%;height:40%}.yfiles-canvascomponent{background-color:var(--yfiles-biofabric-demo-background-color)}.highlight{fill:var(--yfiles-biofabric-demo-highlight-color);stroke:var(--yfiles-biofabric-demo-highlight-color);opacity:1!important}.highlight-adjacency{stroke-width:0;opacity:1!important}.highlight-adjacency text{fill:var(--yfiles-biofabric-demo-background-color)!important;stroke-width:0}:is(.biofabric-node,.node-link-node,.group-rectangle,.group-circle,.group-text,.group-path){transition:opacity .6s}.biofabric-node{stroke:var(--yfiles-biofabric-demo-node-color);fill:var(--yfiles-biofabric-demo-node-color);stroke-width:1px;opacity:var(--fade-opacity);&.highlight-adjacency{stroke:var(--yfiles-biofabric-demo-adjacency-highlight-color);fill:var(--yfiles-biofabric-demo-adjacency-highlight-color)}&.highlight{stroke:var(--yfiles-biofabric-demo-highlight-color);fill:var(--yfiles-biofabric-demo-highlight-color)}}.node-link-node{stroke:var(--yfiles-biofabric-demo-background-color);stroke-width:4px;fill-opacity:var(--fade-opacity);transition:fill-opacity .6s ease;&[fill=none]{fill:#89919c}&.highlight-adjacency{fill:var(--yfiles-biofabric-demo-adjacency-highlight-color);fill-opacity:1!important}&.highlight{fill:var(--yfiles-biofabric-demo-highlight-color);fill-opacity:1!important}}.biofabric-edge{&.highlight{& circle{fill:var(--yfiles-biofabric-demo-highlight-color)!important}:is(path,line){stroke:var(--yfiles-biofabric-demo-highlight-color)!important;opacity:1!important}}}.node-link-edge{stroke:var(--yfiles-biofabric-demo-edge-color);fill:var(--yfiles-biofabric-demo-edge-color);stroke-width:2px;stroke-linecap:round;transition:stroke .6s ease;&.highlight :is(path,line){stroke:var(--yfiles-biofabric-demo-highlight-color)!important;fill:none!important}}.node-edge-label{&.collapsed{opacity:0!important;transition:opacity .6s linear}& text,rect{paint-order:stroke;stroke-width:0;transition:opacity .6s;opacity:var(--fade-opacity)}& text{fill:var(--yfiles-biofabric-demo-edge-color)}& rect{fill:var(--yfiles-biofabric-demo-background-color)}&.highlight{& text{fill:var(--yfiles-biofabric-demo-background-color);opacity:1!important}& rect{fill:var(--yfiles-biofabric-demo-highlight-color);opacity:1!important}}&.highlight-adjacency{>text{fill:var(--yfiles-biofabric-demo-background-color)!important;opacity:1!important}>rect{fill:var(--yfiles-biofabric-demo-adjacency-highlight-color)!important;opacity:1!important}}}.group-rectangle,.group-path,.group-circle{stroke:var(--yfiles-biofabric-demo-edge-color);opacity:var(--fade-opacity)}.group-rectangle{fill:var(--yfiles-biofabric-demo-edge-color);stroke-width:1px}.group-circle{fill:var(--yfiles-biofabric-demo-background-color);&.collapsed{fill:var(--yfiles-biofabric-demo-edge-color)}}.group-text{fill:var(--yfiles-biofabric-demo-edge-color);paint-order:stroke;opacity:var(--fade-opacity)}.group-padding{fill:var(--yfiles-biofabric-demo-background-color);stroke-width:0}.highlight{& text.group-text{fill:var(--yfiles-biofabric-demo-highlight-color)!important;opacity:1!important}.group-path{stroke:var(--yfiles-biofabric-demo-highlight-color)!important;opacity:1!important}&:not(.collapsed) .group-rectangle,.group-circle{stroke:var(--yfiles-biofabric-demo-highlight-color)!important;fill:var(--yfiles-biofabric-demo-highlight-color)!important;opacity:1!important}}select{margin-top:5px;margin-bottom:5px}