

body {
  margin: 0;
  padding: 0;
  overflow:hidden;

  #layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    .nav-tabs {
      float: left;
      border-bottom: 0;
      li {
        float: none;
        margin: 0;

        a {
          margin-right: 0;
          border: 0;

          &:hover {
          }
        }
      }

      .active .glyphicon {
      }
    }

    #leftTabStrip {
      height: 100%;
      position:absolute;
      width: @tabSize;
      padding-top: @tabSize;
      overflow:hidden;
      .leftTab {
        border-radius: 0 !important;
        width:@tabSize;
        height:@tabSize;
      }
    }

    .tab-content {
      position: relative;
      margin-left: @tabSize;
      height: 100%;

      .tab-pane {
        display: none;
        padding: 0;
        height:100%;
        position:relative;

        .workspace {

          .paletteContainer {
            position:absolute;
            height: 100%;
            width: @leftPaneWidth;
            padding: 0;


            #paletteHeader {
              position: relative;
              margin: 0;
              padding: 0;
              top: 0;
              bottom: 0;
              #paletteFilter{
                box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.26);
                padding: 10px;
                overflow-x: hidden;
                position: absolute;
                top: 64px;
                bottom: 0;
                left: 0;
                right: 0;
                overflow-y: scroll;

                &::-webkit-scrollbar {
                  width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                  background: #666;
                }

                .tree-leaf {
                  font-weight: 200;
                  .tree-expando {
                    line-height: 10px;
                    width: 12px;
                    height: 12px;
                    &.hidden{
                      display: block !important;
                      visibility: hidden !important;
                    }
                  }
                  .tree-leaf-content{
                    cursor: pointer;
                    transition: all 0.7s;
                    &.tree-child-leaves{
                      transition: all 0.7s;
                    }
                    &:hover{
                      background-color: rgba(243, 245, 246, 0.69);
                      transition: all 0.7s;
                    }
                    &.selected{
                      transition: all 0.4s;
                      background-color: #f3f5f6;
                    }
                  }
                }
              }
            }
            #paletteElementsScroll {
              position: relative;
              width: @leftPaneWidth - 2px;
              margin: 0;
              padding: 0;
              top: 0;
              bottom: 0;
              overflow: auto;
              box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.26);
              &::-webkit-scrollbar {
                width: 5px;
              }
              &::-webkit-scrollbar-thumb {
                background: #666;
              }
              #paletteElements {
                position: absolute;
                width: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
              }
            }
          }
          .content {
            position:absolute;
            right: 0;
            top:@toolbarHeight;
            bottom:0;
            left: @leftPaneWidth;
            overflow: scroll;
            .canvas {
                width:6000px;
                height:6000px;
            }
          }
        }
      }
      .active {
        display: block;
      }
    }
  }
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  border:0;
}
