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

#graph-explorer
  #toolbar
    display: flex
    flex-direction: column

    ul
      display: flex
      flex-direction: row
      margin: 0
      li
        display: flex
        max-width: 200px

  #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
    z-index: 999 // needs to appear above graph elements
    backdrop-filter: blur(4px)
    background: rgba(255,255,255,75%)
    overflow: auto
    left: 0
    right: 0
    top: 60px

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

  #graph-view
    height: 95%

  #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%

  #tree
    position: absolute
    z-index: 1

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