/****************************************************************************
 ** @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.
 **
 ***************************************************************************/
:root {
  --context-menu-button-radius: 5px;
  --interaction-width: 500px;
  --expanded-panel-width: min(60vw, 700px);
  --expanded-panel-height: min(60dvh, 600px);
}

.main-container .interaction-panel {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex: 0 1 100%;
}

.main-container .interaction-panel.expanded {
  box-sizing: border-box;
  width: calc(var(--interaction-width) + 100px);
  min-width: calc(var(--interaction-width) + 100px);
  flex: 0 0 calc(var(--interaction-width) + 100px);
  flex-basis: calc(var(--interaction-width) + 100px);
}

.main-container .interaction-panel.expanded .ontology-container,
.main-container .interaction-panel.expanded #ontology-graphComponent {
  box-sizing: border-box;
  width: 100%;
  height: var(--interaction-width);
  min-height: var(--interaction-width);
}

@media screen and (min-width: 40rem) {
  .main-container .interaction-panel {
    width: var(--interaction-width);
    min-width: 0;
    flex: 0 1 var(--interaction-width);
  }

  .main-container .interaction-panel.expanded {
    width: var(--expanded-panel-width);
    min-width: var(--expanded-panel-width);
    flex: 0 0 var(--expanded-panel-width);
    flex-basis: var(--expanded-panel-width);
  }

  .main-container .interaction-panel.expanded .ontology-container,
  .main-container .interaction-panel.expanded #ontology-graphComponent {
    height: var(--expanded-panel-height);
    min-height: var(--expanded-panel-height);
  }
}

@media screen and (min-width: 64rem) {
  .main-container .interaction-panel {
    width: 500px;
    min-width: 0;
    flex: 0 1 500px;
  }

  .main-container .interaction-panel.expanded {
    width: var(--expanded-panel-width);
    min-width: var(--expanded-panel-width);
    flex: 0 0 var(--expanded-panel-width);
    flex-basis: var(--expanded-panel-width);
  }
}

@media screen and (max-width: 400px) {
  .main-container .interaction-panel {
    width: 100%;
    min-width: 0;
    flex: 0 1 100%;
  }

  .main-container .interaction-panel.expanded {
    width: calc(var(--interaction-width) + 120px);
    min-width: calc(var(--interaction-width) + 120px);
    flex: 0 0 calc(var(--interaction-width) + 120px);
    flex-basis: calc(var(--interaction-width) + 120px);
  }

  .main-container .interaction-panel.expanded .ontology-container,
  .main-container .interaction-panel.expanded #ontology-graphComponent {
    height: var(--interaction-width);
    min-height: var(--interaction-width);
  }
}

.graph-overlay {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 2px solid rgb(209, 209, 209);
  border-radius: 5px;
}

.graph-overlay h3 {
  margin: 10px 0;
  font-weight: normal;
}

.graph-overlay .filter-dropdowns {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}

.graph-overlay .filter-dropdowns .down-arrow {
  margin: 5px 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.graph-overlay .filter-buttons {
  align-self: center;
  margin: 20px 0 5px;
}

.graph-overlay .filter-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.graph-overlay #subject-combo,
.graph-overlay #predicate-combo,
.graph-overlay #object-combo {
  width: 100%;
  padding: 5px 7px;
  border: 2px solid rgb(209, 209, 209);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313638' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 16px;
}

select option:disabled {
  color: #999;
  background-color: #eeeeee;
}

.footnote {
  font-size: 12px;
  opacity: 0.9;
}

.footnote.error {
  color: var(--color-orange);
}

p.footnote {
  margin: 0.3em;
}

.group-separator {
  display: flex;
  align-items: center;
  margin: 12px 12px 12px 0;
  pointer-events: none;
}

.group-separator::before,
.group-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--description-text);
  opacity: 0.2;
}

#toggle_highlighting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.main-interaction-button {
  display: inline-flex;
  align-items: center;
  border: none;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}

.main-interaction-button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  opacity: 0.8;
}

.main-interaction-button[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

#data-problems-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  cursor: pointer;
}

#data-problems-text .problem-text {
  display: flex;
  gap: 0.5em;
}

#data-problems-text .toggle-details {
  display: flex;
  align-items: center;
  cursor: pointer;
}

#data-problems-text .material-symbols-outlined {
  color: var(--rail-highlighted);
}

.error-panel {
  display: none;
  flex-direction: column;
  margin-top: 20px;
  padding: 10px;
  border: 2px solid rgb(209, 209, 209);
  border-radius: 5px;
}

.error-panel.visible {
  display: flex;
}

.error-panel #data-problems-list {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-bg) transparent;
}

.error-panel #data-problems-list .data-problem-container {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
  padding: 3px;
  font-size: 13px;
}

.error-panel #data-problems-list .data-problem-container p {
  margin: 0 !important;
}

.error-panel #data-problems-list .data-problem-container button {
  display: inline;
  font-size: 11px;
}

.error-panel #data-problems-list .data-problem-container .main-interaction-button {
  margin: 10px 10px 0 0;
}

.error-panel #data-problems-list .data-problem-container.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.error-panel #data-problems-list .data-problem-container.selected {
  border-radius: 5px;
  animation: highlight-fade 2s ease-in-out forwards;
}

.error-panel #data-problems-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.error-panel #data-problems-list::-webkit-scrollbar-track {
  background-color: transparent;
}

.error-panel #data-problems-list::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--scrollbar-bg) r g b / 0.6);
  border-radius: 6px;
}

.error-panel #data-problems-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg);
}

#error-beacon-animation.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.yfiles-context-menu {
  background-color: var(--toolbar-bg);
  border: none;
}

.yfiles-context-menu .yfiles-context-menu__item {
  border-radius: var(--context-menu-button-radius);
}

.yfiles-context-menu button:hover {
  background-color: var(--toolbar-bg-hover) !important;
  border-radius: var(--context-menu-button-radius);
}
/****************************************************************************
 ** @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.
 **
 ***************************************************************************/
#neighborhood-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  z-index: 200000;
  background: var(--toolbar-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in;
  display: flex;
  flex-direction: column;
  user-select: none;

  &.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  #title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem;
  }

  #neighborhood-title-text {
    font-weight: 600;
    color: var(--toolbar-button-text, #fff);
  }
}

#neighborhood-graphComponent {
  flex: 1 1 auto;
  overflow: hidden;
}

#neighborhood-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199999;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  transition: background 0.3s ease;

  &.open {
    display: block;
  }
}

#neighborhood-close {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  transition:
    background 0.1s,
    color 0.2s;

  &:hover {
    background: var(--toolbar-bg-hover);
    color: #fff;
  }
}

#navigation {
  --navigation-bg: transparent;
  --navigation-text: var(--color-text);
  --navigation-wrap: wrap;
  --navigation-selection: var(--color-gold-dark);
  position: absolute;
  left: 20px;
  padding: 4px;
  overflow: hidden;
  white-space: nowrap;
  display: none;
  z-index: 2;
  margin-top: 10px;
  text-align: center;

  #navigation-container.navigation-label {
    display: none !important;
  }
}
/****************************************************************************
 ** @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.
 **
 ***************************************************************************/
#ontology-graphComponent {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--border-radius);
}

button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ontology-container {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
}

.ontology-container > .collapse.icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background-color: transparent;
  &:hover {
    background-color: var(--color-bg-hover);
  }
}

.popup-button {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  border-radius: 2px !important;

  button {
    cursor: pointer;
  }
}

.ontology-popover {
  background-color: var(--toolbar-bg);
  border-radius: var(--border-radius);
}

.ontology-edge-tooltip {
  max-width: 250px;
  text-align: left;
  vertical-align: center;
}

.element-hidden {
  opacity: 0.3;
}

.element-visible {
  opacity: 1;
}

:root {
  --color-orange: var(--rail-highlighted);
}

:root[data-theme='light'] {
  --gc-color-background: radial-gradient(var(--color-bluish-white), var(--color-casper-blue-light));
  --gc-title-background: var(--color-casper-blue-light);
}

:root[data-theme='dark'] {
  --gc-color-background: radial-gradient(#39434f, #1e232b);
  --gc-title-background: black;
}

.graph-splash::before {
  /* override default indicator background-color because of dark graphComponent */
  background-color: var(--toolbar-bg) !important;
}

.main-container #graphComponent {
  background-color: var(--gc-color-background) !important;
}

.yfiles-rendertreepanel,
.graph-panel {
  background: var(--gc-color-background);
}

.yfiles-tooltip {
  background-color: var(--toolbar-bg);
  color: var(--color-text);
  border: none;
  border-radius: var(--border-radius);

  .edge-tooltip {
    text-align: center;
  }
}

.yfiles-rendertreepanel {
  &.blur {
    opacity: 0.65;
  }
}

.material-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 2rem;
  margin-right: 10px;
  height: 30px;
  width: 30px;
  color: var(--color-orange);
  display: inline-block;
  line-height: 1;

  &.small {
    font-size: 20px;
    width: 10px;
    vertical-align: sub;
  }
}

.icon-text {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 1.2rem;
  vertical-align: sub;
}

.toggle-text {
  margin-left: 10px;
}