/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 2.6.
 ** Copyright (c) 2000-2024 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;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
}

body {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template: 'header header' min-content 'sidebar main' 1fr / 18em 1fr;
}

.demo-header {
  grid-area: header;
  margin: 0;
  padding: 16px;
  background: var(--header-bg-color);
  color: white;
}

.demo-header h1 {
  margin: 0;
}

.demo-header a,
.demo-header a:visited {
  color: inherit;
}

.demo-sidebar {
  grid-area: sidebar;
  padding: 16px;
  background: var(--sidebar-bg-color);
  border-inline-end: 1px solid #bbb;
  line-height: 140%;
}

#actionsArea button {
  margin: 0 8px;
  border: 1px solid var(--header-bg-color);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
}

#actionsArea button:hover {
  filter: brightness(110%);
}

.demo-main {
  grid-area: main;
  display: flex;
  gap: 4px;
}

.demo-main > .yfiles-canvascomponent {
  /* Make sure the graph component gets a non-zero size */
  flex: 1;
  background: #fff;
}
