/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.example-node-container {
  zoom: 0.8;
  margin: auto;
}
.example-node-container.highlight-first-prop .node-property-container:hover .node-button {
  opacity: 0 !important;
}
.example-node-container.highlight-first-prop .node-property-container {
  overflow: visible !important;
  position: relative;
}
.example-node-container.highlight-first-prop .node-property-container::before,
.example-node-container.highlight-first-prop .node-property-container::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}
.example-node-container.highlight-first-prop .node-property-container::after {
  inset: -12px -12px -8px -14px;
  border: solid var(--magenta-pink);
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-2deg);
}
.example-node-container.highlight-first-prop .node-property-container::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--magenta-pink);
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container {
  overflow: visible !important;
  position: relative;
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container .node-button {
  opacity: 1;
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container .node-stock {
  display: none;
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container::before,
.example-node-container.highlight-first-prop-and-show-button .node-property-container::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container::after {
  inset: -12px -12px -8px -14px;
  border: solid var(--yworks-orange);
  border-width: 5px 3px 4px 2px;
  border-radius: 6% 95% 2% 97%/95% 1% 92% 5%;
  transform: rotate(181deg);
}
.example-node-container.highlight-first-prop-and-show-button .node-property-container::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--yworks-orange);
}

.example-node-container.disable-hover {
  pointer-events: none;
}
.description-panel {
  & .node-properties {
    color: var(--color-text);
  }
}
.main-container {
  .description-panel {
    & .node-headline {
      color: var(--color-casper-blue-black);
    }
  }
}
/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
#snackbar {
  visibility: hidden;
  max-width: 250px;
  background-color: var(--magenta-pink);
  color: var(--white);
  text-align: center;
  border-radius: 5px;
  padding: 10px 16px;
  position: fixed;
  left: calc(50% - 125px);
  bottom: 30px;
  z-index: 1;
}

#snackbar.show {
  visibility: visible;
  animation:
    snackbar-fade-in 0.7s forwards,
    snackbar-fade-out 0.5s 5s forwards;
}

@keyframes snackbar-fade-in {
  0% {
    bottom: 0;
    opacity: 0;
  }
  40% {
    bottom: 30px;
    opacity: 1;
  }
  65% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.03);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes snackbar-fade-out {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #snackbar.show {
    animation: none;
  }
}
/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
:root {
  --white: #ffffff;
  --black: #000000;

  /* demo colors and pink contrast colors */
  --demo-blue-light: #e0edf0;
  --demo-blue: #bdd8e0;
  --demo-blue-dark: #29323c;
  --demo-blue-dark-80: #495968;
  --demo-blue-dark-70: #5e738aff;
  --demo-blue-dark-60: #7e97b3;

  --lavender-pink-light: #ffeef6;
  --lavender-pink: #f7accf;
  --lavender-pink-dark: #381927;

  /* highlighting colors */
  --saffron-yellow-light: #fffcec;
  --saffron-yellow: #f0c808;
  --saffron-yellow-semi-dark: #b59000;
  --saffron-yellow-dark: #3a320e;

  --magenta-pink-light: #fff0f6;
  --magenta-pink: #ff006e;
  --magenta-pink-semi-dark: #9e0b4a;
  --magenta-pink-dark: #520f2c;

  --yworks-orange-light: #fff6ef;
  --yworks-orange: #ff6c00;
  --yworks-orange-dark: #522b0e;

  /* secondary colors */
  --sage-green-light: #effff0;
  --sage-green: #9ebc9f;
  --sage-green-dark: #1d361e;

  --ash-blue-light: #eaffff;
  --ash-blue: #92bbbb;
  --ash-blue-dark: #0e3333;

  --baby-blue-light: #e6f6ff;
  --baby-blue: #86bbd8;
  --baby-blue-dark: #0b3349;

  --vista-blue-light: #eef5ff;
  --vista-blue: #768fb6;
  --vista-blue-dark: #0f2548;

  --ultra-violet-light: #f3f2ff;
  --ultra-violet: #666495;
  --ultra-violet-dark: #2c2a52;
}

[data-theme='light']:root {
  --background-color: var(--white);
  --text-color: var(--demo-blue-dark);
  --edge-color: var(--demo-blue);
  --group-node-color: var(--demo-blue-dark);
  --main-highlight-color: var(--saffron-yellow);
}

[data-theme='dark']:root {
  --background-color: var(--demo-blue-dark);
  --text-color: var(--white);
  --edge-color: var(--demo-blue-dark-70);
  --group-node-color: var(--demo-blue-dark-60);
  --main-highlight-color: var(--saffron-yellow-semi-dark);
}
/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.edge-highlighted {
  color: var(--main-highlight-color);
}
.edge-highlighted > * {
  stroke-width: 5px;
}

.highlight-node-property {
  background-color: var(--main-highlight-color);
}

.alert-node-property {
  color: var(--white);
  background-color: var(--magenta-pink);
}
.alert-node-property .node-property {
  text-decoration: line-through;
}

.flash-node-property {
  animation: flash-background 1.5s ease-out;
}

@keyframes flash-background {
  0% {
    background: var(--main-highlight-color);
  }
  30% {
    transform: scale(1.05);
    background: var(--yworks-orange);
    box-shadow: 0 0 8px 0 rgb(from var(--yworks-orange-dark) r g b / 0.6);
  }
}

.flash-alert-node-property {
  animation: pulse 0.7s ease-in-out 1;
}

@keyframes pulse {
  40% {
    transform: scale(1.05);
  }
  55% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.03);
  }
  80% {
    transform: scale(0.97);
  }
  90% {
    transform: scale(1.01);
  }
  95% {
    transform: scale(0.99);
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flash-node-property {
    animation: none;
  }
  .flash-alert-node-property {
    animation: none;
  }
}
/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.node-container.demo-blue {
  border: 2px solid var(--demo-blue);
  box-shadow: 2px 2px 10px 0 rgb(from var(--demo-blue-dark) r g b / 0.3);
}
.node-container.ultra-violet {
  border: 2px solid var(--ultra-violet);
  box-shadow: 2px 2px 10px 0 rgb(from var(--ultra-violet-dark) r g b / 0.3);
}
.node-container.vista-blue {
  border: 2px solid var(--vista-blue);
  box-shadow: 2px 2px 10px 0 rgb(from var(--vista-blue-dark) r g b / 0.3);
}
.node-container.baby-blue {
  border: 2px solid var(--baby-blue);
  box-shadow: 2px 2px 10px 0 rgb(from var(--baby-blue-dark) r g b / 0.3);
}
.node-container.ash-blue {
  border: 2px solid var(--ash-blue);
  box-shadow: 2px 2px 10px 0 rgb(from var(--ash-blue-dark) r g b / 0.3);
}
.node-container.sage-green {
  border: 2px solid var(--sage-green);
  box-shadow: 2px 2px 10px 0 rgb(from var(--sage-green-dark) r g b / 0.3);
}

.node-container {
  color: var(--text-color);
  box-sizing: border-box;
  border-radius: 7px;
}
.node-container .node-content {
  box-sizing: border-box;
  padding-bottom: 2px;
  width: 100%;
}
.node-container .node-header {
  color: var(--demo-blue-dark);
  border-radius: 5px 5px 0 0;
  margin: -1px;
  display: flex;
  align-items: flex-start;
}
.node-container .node-header.demo-blue {
  background-color: var(--demo-blue);
}
.node-container .node-header.ultra-violet {
  background-color: var(--ultra-violet);
}
.node-container .node-header.vista-blue {
  background-color: var(--vista-blue);
}
.node-container .node-header.baby-blue {
  background-color: var(--baby-blue);
}
.node-container .node-header.ash-blue {
  background-color: var(--ash-blue);
}
.node-container .node-header.sage-green {
  background-color: var(--sage-green);
}
.node-container .node-icon {
  height: 50px;
  width: 55px;
  padding: 15px 0 0 15px;
  color: white;
  font-size: 40px;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
.node-container .node-content .node-header-details {
  width: 100%;
  margin: 10px 1px 10px 10px;
  border-radius: 4px 0 0 4px;
}
.node-container .node-header-details .node-headline {
  margin: 0;
  padding: 8px 8px 0 8px;
  font-size: 16px;
  line-height: 1.1;
}
.node-container .node-header-details .node-location {
  padding: 8px;
  font-size: 12px;
  margin: 0;
}
.node-container .node-header-details.demo-blue {
  background-color: var(--demo-blue-light);
}
.node-container .node-header-details.ultra-violet {
  background-color: var(--ultra-violet-light);
}
.node-container .node-header-details.vista-blue {
  background-color: var(--vista-blue-light);
}
.node-container .node-header-details.baby-blue {
  background-color: var(--baby-blue-light);
}
.node-container .node-header-details.ash-blue {
  background-color: var(--ash-blue-light);
}
.node-container .node-header-details.sage-green {
  background-color: var(--sage-green-light);
}
.node-container .node-properties {
  margin: 10px 0;
}
.node-container .node-properties .node-property-container {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin: 5px 0;
  padding: 0 10px;
  overflow: hidden;
}
.node-container .node-properties .node-property-container:hover {
  background-color: var(--saffron-yellow);
  color: var(--demo-blue-dark);
}
.node-container .node-properties .node-property-container:hover .node-button {
  opacity: 1;
}
.node-container .node-properties .node-property-container .node-property {
  font-size: 14px;
  line-height: normal;
  margin: 0 3px 0 0;
}
.node-container .node-properties .node-property-container .node-stock-container {
  display: flex;
  align-items: center;
}
.node-container .node-properties .node-property-container .node-stock-container .node-stock {
  margin-left: 7px;
  font-weight: bold;
}
.node-container .node-button {
  opacity: 0;
  margin-right: 3px;
  padding: 1px;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.node-container .node-button > span {
  display: inline-block;
  pointer-events: none;
  font-size: 18px;
}
.node-container .node-button.demo-blue {
  color: var(--demo-blue-dark);
  background-color: var(--demo-blue-light);
  border: 1px solid var(--demo-blue-dark);
}
.node-container .node-button.ultra-violet {
  color: var(--ultra-violet-dark);
  background-color: var(--ultra-violet-light);
  border: 1px solid var(--ultra-violet-dark);
}
.node-container .node-button.vista-blue {
  color: var(--vista-blue-dark);
  background-color: var(--vista-blue-light);
  border: 1px solid var(--vista-blue-dark);
}
.node-container .node-button.baby-blue {
  color: var(--baby-blue-dark);
  background-color: var(--baby-blue-light);
  border: 1px solid var(--baby-blue-dark);
}
.node-container .node-button.ash-blue {
  color: var(--ash-blue-dark);
  background-color: var(--ash-blue-light);
  border: 1px solid var(--ash-blue-dark);
}
.node-container .node-button.sage-green {
  color: var(--sage-green-dark);
  background-color: var(--sage-green-light);
  border: 1px solid var(--sage-green-dark);
}
.node-container .node-button:hover {
  background-color: var(--saffron-yellow-dark);
  color: var(--white);
  border: 1px solid var(--saffron-yellow-dark);
  box-shadow: 0 0 8px 0 rgb(from var(--demo-blue-dark) r g b / 0.6);
}

.main-container .graph-panel #graphComponent {
  background: var(--background-color);
}

.group-style {
  .yfiles-group-node-tab-background {
    color: var(--group-node-color);
  }
  .yfiles-group-node-tab {
    color: var(--background-color);
  }
  .yfiles-group-node-stroke {
    color: var(--group-node-color);
  }
  .yfiles-group-node-content {
    color: var(--background-color);
  }
  .yfiles-group-node-icon {
    color: var(--background-color);
  }
}

.group-label-style {
  color: var(--white);
}

.bold-edge {
  color: var(--edge-color);
}
.bold-edge > * {
  stroke-width: 3px;
}
.bold-edge.edge-hovering {
  color: var(--saffron-yellow);
}
.bold-edge.edge-hovering > * {
  stroke-width: 5px;
}