#editor-level-components-tab-view
  h3
    margin-top: 0
    @media screen and (max-width: 800px)
      display: none
      
  .toggle
    padding: 6px 8px
    z-index: 11
    margin-top: 1px
    margin-left: 2px

  .components-container
    position: absolute
    top: 0
    bottom: 0

    .editor-nano-container
      position: relative
      height: 90%
      width: 250px

      .treema-root
        position: absolute
        bottom: 0
        width: 250px
        overflow: scroll
        
        .treema-children .treema-row *
          cursor: pointer !important
      .nano-pane
        z-index: 12      
      #components-treema
        z-index: 11

  .edit-component-container
    margin-left: 290px
    position: absolute
    right: 0
    left: 0px
    top: 0
    bottom: 0
    @media screen and (max-width: 800px)
      margin-left: 0px
      
      .nav-tabs
        margin-left: 80px
        
        li
          z-index: 11
      
    .treema-root
      position: absolute
      top: 35px
      right: 0
      left: 0px
      bottom: 0
      overflow: scroll

    #create-new-component-button-no-select
      position: absolute
      top: 0
      right: 0
      left: auto
      @media screen and (max-width: 800px)
        left: 40px
        top: 1px
        bottom: auto
        padding: 8px 10px
      .text
        display: block
        @media screen and (max-width: 800px)
          display: none
      [class^='icon-']
        display: none
        @media screen and (max-width: 800px)
          display: block