[v-cloak] {
  display: none;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

.tree-content-holder {
  border: 1px solid $border-color;
  border-radius: $border-radius-default;
  color: $almost-black;

header {
  background: $gray-light;
  padding: 10px 15px;
}

.panel-right{
  display: inline-block;
  width: 85%;
  #tabs {
    height: 41px;
    border-bottom: 1px solid #f0f0f0;
    padding-left: 0;
    margin-bottom: 0;
    background: $gray-light;

    li {
      list-style-type: none;
      background: $gray-normal;
      display: inline-block;
      padding: 10px 18px;
      border-right: 1px solid $border-color;

      &.active {
        background: $white-light;
      }

      a {
        color: black;
      }

      i.fa.fa-times {
        float: right;
        margin-top: 3px;
        margin-left: 15px;
      }
    }
  }
  #ide {
    height: 70vh;
  }  
}


#sidebar {
  &.sidebar-mini {
    display: inline-block;
    vertical-align: top;
    width: 15%;
    border-right: 1px solid $white-normal;
    height: 75vh;
    overflow: auto;
  }

  a {
    color: $almost-black;
  }

  ul {
    list-style-type: none;
    padding: 0;
    li {
      border-bottom: 1px solid $border-gray-normal;
      padding: 10px 20px;

      a {
        color: $almost-black;
      }
      .fa {
        font-size: $code_font_size;
        margin-right: 5px;
      }
    }
  }
}
  
}