@mixin sidePanelCommon
  position: absolute
  max-height: 600px
  //overflow-y: scroll
  top: 170px
  //z-index: 1

#graph-explorer
  margin-left: 20rem
  margin-right: 20rem
  padding-top: 0px

.graph-container
  #sp-container
    @include sidePanelCommon
    border: 1px white solid
    background-color: white
    width: 28%
    z-index: 15

    #myTab
      marginBottom: 18px
      marginTop: 18px

    #myTabContent
      borderBottom: 1px solid black
      paddingBottom : 19px

    #horizontal-checkbox
      ul
        display: inline
        float : left
  .lefthanded #sp-container
    left: 0%
  .righthanded #sp-container
    left: 70%

  .graph-tree
    @include sidePanelCommon
    background-color: #fff
    z-index: 1
  .lefthanded .graph-tree
    left: 80%
  .righthanded .graph-tree
    left: 0%

  /* #toggle-container
  /*   position: fixed
  /*   z-index: 999 // needs to appear above solid menu bar
  /*   right: 25%
  /*   top: 10px
  /*   width: 50%
  /*   .container-fluid
  /*     padding-top: 90px

  #controls-container
    // position: fixed
    position: absolute
    // needs to appear above graph elements
    z-index: 900
    backdrop-filter: blur(4px)
    background: rgba(255,255,255,75%)
    // overflow: auto
    left: 0
    right: 0
    top: 60px

    .nav-item
      padding-left: 0.8rem

  .graph-row
    height: 100vh

    #graph-view
      height: 95vh

  #tree
    position: absolute
    z-index: 1

.input-with-autocomplete
  .completions
    position: fixed
    max-height: 300px
    overflow-y: scroll
    width: 300px
    top: 50px

.graph-topbar
  @include aside-topbar
