/****************************************************************************
 ** @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.
 **
 ***************************************************************************/
.popup-content {
  display: block;
  border: 1px solid #c9c9c9;
  border-radius: 15px;
  padding: 5px;
  font-size: 14px;
  color: var(--color-casper-blue-black);
  background: rgba(255, 255, 255, 0.85);
  input {
    color: var(--color-casper-blue-black);
  }
}

.popup-content label {
  width: 65px;
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}

.popup-content button {
  border: none;
  cursor: pointer;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

#cost-minus {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='16px'%20height='16px'%20xml:space='preserve'%3e%3cg%3e%3ccircle%20cx='8'%20cy='8'%20r='8'%20fill='tomato'%20/%3e%3crect%20x='2'%20y='7'%20width='12'%20height='2'%20fill='%23ffffff'/%3e%3c/g%3e%3c/svg%3e") no-repeat;
}

#cost-plus {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='16px'%20height='16px'%20xml:space='preserve'%3e%3cg%3e%3ccircle%20cx='8'%20cy='8'%20r='8'%20fill='mediumseagreen'%20/%3e%3crect%20x='7'%20y='2'%20width='2'%20height='12'%20fill='%23ffffff'/%3e%3crect%20x='2'%20y='7'%20width='12'%20height='2'%20fill='%23ffffff'/%3e%3c/g%3e%3c/svg%3e") no-repeat;
}

#apply {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='16px'%20height='16px'%20xml:space='preserve'%3e%3cg%3e%3ccircle%20cx='8'%20cy='8'%20r='8'%20fill='dodgerblue'%20/%3e%3cpath%20d='m%202.3389831,9.6610169%201.2711864,-1.7288135%202.5254237,2%20L%2012,3%2013.474576,4.2711864%206.2711864,12.779661%20Z'%20fill='%23ffffff'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
}

.popup-separator {
  border: 1px inset;
  margin: 5px;
  vertical-align: middle;
}
.interaction-panel {
  img {
    vertical-align: middle;
    display: inline-block;
    padding: 5px;
  }
  p.material-symbols-outlined {
    margin: 0;
    vertical-align: middle;
    display: inline-block;
  }
}

#cost-form {
  border: none;
  width: 20px;
  background-color: transparent;
  vertical-align: middle;
  padding: 1.5px;
  text-align: center;
}

#flow-value {
  text-align: right;
  display: none;
  padding-right: 2px;
}

#flow-value {
  background-color: transparent;
  margin-right: 10px;
  &:focus {
    outline: none;
    box-shadow: none;
  }
}
#description {
  position: absolute;
  width: calc(100% - calc(2 * var(--dialog-padding)));
}