.@{eppre}-editor{
  background-color: @ep-editor-bg;
  position: relative;
  height: 100%;
  /* for other panel when header display none */
  .@{eppre}-panel-top0{
    top: 0;
  }
}
.@{eppre}-panel{
  &-title{
    font-size: 12px;
    font-weight: bold;
    padding: 4px 6px;
    background: #dbdbdb;
  }
  &-content{
    &:after{
      content: '';
      height: 0;
      display: block;
      clear: both;
    }
  }
}
.@{eppre}-layout{
  display: flex;
  flex-flow: column;
  &-header{
    height: 40px;
  }
  &-body{
    display: flex;
    flex:1;
    overflow: auto;
  }
  &-left{
    position: relative;
    z-index: 1;
    width: @ep-tool-width;
  }
  &-center{
    flex: 1;
  }
  &-right{
    position: relative;
    width: @ep-setting-width;
  }
  &-footer{
    border-top: 1px solid #ddd;
    height: 20px;
  }
}

.@{eppre}-layout-left{
  display: flex;
  width: @ep-tool-width;
  overflow: visible;
  background-color: @ep-panel-bg;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
  &-nav{
    position: relative;
    width: 39px;
    text-align: center;
    border-right: 1px solid #ddd;
    &-item{
      transition: .1s ease background-color;
      cursor: default;
      padding: 10px 0;
      font-weight: bold;
    }
    &-active{
      background-color:#dbdbdb;
    }
  }
  &-content{
    flex: 1;
    position: relative;
    // margin-left: 40px;
    height: 100%;
    overflow: auto;
  }
}
.@{eppre}-side-right{
  flex: 1;
  overflow: visible;
  background-color: @ep-panel-bg;
}
