/****************************************************************************
 ** @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.
 **
 ***************************************************************************/
.freeform-selection-path {
  fill: #67b7dc;
  stroke: #67b7dc;
  stroke-width: 3px;
  fill-opacity: 0.04;
}

.demo-handles {
  stroke: rgba(255, 255, 255, 0.7);
  vector-effect: non-scaling-stroke;
}

.demo-handles [data-handle-type='default'] {
  fill: rgba(0, 0, 0, 0.9);
}
.demo-handles [data-handle-type='move'] {
  fill: #ab2346;
}
.demo-handles [data-handle-type='resize'] {
  fill: #0b7189;
}

.demo-dial-menu {
  opacity: 0;
  animation: fadein 0.3s linear forwards;
}

.demo-dial-menu-item > path {
  fill: #67b7dc;
  stroke: #fff;
}

.demo-dial-menu-item.disabled > path {
  fill: #c1e1f1;
}

.demo-dial-menu-item.disabled > .demo-dial-icon {
  opacity: 0.5;
}

.demo-dial-menu-item:hover:not(.disabled) > path {
  fill: #617984;
}

.demo-dial-menu-item > .demo-dial-icon {
  width: 32px;
}

.demo-dial-menu-item > .demo-dial-title > text {
  fill: #2d4a59;
}

.demo-dial-menu-item > .demo-dial-title > rect {
  fill: #a8b5bb;
  rx: 4;
  ry: 4;
}

.demo-dial-menu-item > .demo-dial-title {
  opacity: 0;
  animation: fadein 0.3s linear 1s forwards;
}
.yfiles-popover__container {
  width: auto;
}
.yfiles-context-menu {
  background: initial;
  border: none;
  box-shadow: none;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.yfiles-cursor-dragdrop-copy {
  cursor: copy;
}

.yfiles-cursor-dragdrop-move {
  cursor: move;
}

.yfiles-cursor-dragdrop-link {
  cursor: alias;
}

.yfiles-cursor-dragdrop-scroll {
  cursor: move;
}

.yfiles-cursor-dragdrop-all {
  cursor: copy;
}

.yfiles-cursor-dragdrop-no-drop {
  cursor: no-drop;
}

.yfiles-drag {
  z-index: 15;
  opacity: 0.35;
  transition: opacity 0.2s ease-in-out;
}

.yfiles-drag.hidden {
  opacity: 0;
}

.demo-main__graph-component {
  position: relative;
}

#cancel-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #5a1225;
  background-color: #f3a2b8;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 1.5em;
  min-width: 100px;
  user-select: none;
  cursor: pointer;
  z-index: 2;
}

.demo-button-invisible {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s linear 0.3s,
    opacity 0.3s ease-in-out;
}

.demo-button-visible {
  visibility: visible;
  opacity: 0.9;
  transition: opacity 0.3s ease-in-out;
}

.demo-button-visible:hover {
  opacity: 1;
}

#panning-options-div {
  padding: 20px 5px;
}

.panning-options-box {
  overflow: hidden;
  margin: auto;
  display: flex;
  justify-content: center;
}

.panning-options-box option {
  color: #000;
}

.panning-label {
  margin: 10px 0 10px 0;
  text-align: center;
  color: var(--color-text);
}