/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.0.0.3.
 ** Copyright (c) 2000-2025 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{--header-bg-color: #343e49;--sidebar-bg-color: #e0edf0;--base-spacing: clamp(.5rem, 2vw, 1rem);--header-height: clamp(2.5rem, 5vw, 4rem);--sidebar-width: clamp(12rem, 25vw, 18em)}*{box-sizing:border-box}html,body{width:100%;height:100%;font-family:system-ui,sans-serif;font-size:clamp(14px,1vw + .5rem,16px)}body{padding:0;margin:0;display:grid;grid-template:"header header" min-content "sidebar main" 1fr / var(--sidebar-width) 1fr}@media (max-width: 768px){body{grid-template:none;display:flex;flex-direction:column;height:100vh;overflow:hidden}.demo-header{flex:0 0 auto}.demo-sidebar{flex:0 1 auto;max-height:calc(40vh - var(--header-height))}.demo-main{flex:1 0 60vh}}.demo-header{grid-area:header;margin:0;padding:var(--base-spacing);background:var(--header-bg-color);color:#fff;min-height:var(--header-height);display:flex;align-items:center}.demo-header h1{margin:0;font-size:clamp(1.2rem,3vw,2rem)}.demo-header a,.demo-header a:visited{color:inherit}.demo-sidebar{grid-area:sidebar;padding:var(--base-spacing);background:var(--sidebar-bg-color);border-inline-end:1px solid #bbb;line-height:1.4}.demo-sidebar h1,.demo-sidebar h2,.demo-sidebar h3,.demo-sidebar h4{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;margin:calc(var(--base-spacing) * .75) 0 calc(var(--base-spacing) * .5)}.demo-sidebar h1:first-child,.demo-sidebar h2:first-child,.demo-sidebar h3:first-child,.demo-sidebar h4:first-child{margin-top:0}@media (max-width: 768px){.demo-sidebar{border-inline-end:none;border-block-end:1px solid #bbb;overflow-y:auto;overflow-x:hidden}.demo-sidebar h1,.demo-sidebar h2,.demo-sidebar h3,.demo-sidebar h4{font-size:.95rem;margin:calc(var(--base-spacing) * .5) 0 calc(var(--base-spacing) * .25)}}#actionsArea button{margin:0 calc(var(--base-spacing) * .5);border:1px solid var(--header-bg-color);padding:calc(var(--base-spacing) * .25) calc(var(--base-spacing) * .75);border-radius:4px;cursor:pointer;font-size:clamp(.875rem,1vw + .5rem,1rem)}#actionsArea button:hover{filter:brightness(110%)}.demo-main{grid-area:main;display:flex;gap:4px}.demo-main>.yfiles-canvascomponent{flex:1;background:#fff}