.tree-top {
    position: relative;
    overflow: auto;
    padding: .25em;
    border: 0;
    background-color: #eef0ff;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
.tree-line {
    overflow: hidden;
}
.tree-item {
    display: block;
    width: 100%;
    border: thin solid transparent;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
}
.tree-spacer {
    display: inline-block;
    width: 1.25em;
}
.tree-mouseover{
    background: linear-gradient(#ddeeff, #bbccdd);
    border: thin solid #99aabb;
}
.tree-selected{
    background: linear-gradient(#bbeeff, #99aaee);
    border: thin solid #88aabb;
}
.tree-droptarget{
    border: thin solid red;
}
.tree-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tree-top >.tree-list {
    position: relative;
    padding: 0;
}
.tree-top >.tree-list:focus {
    outline: none;
}
.tree-line >.tree-list {
    display: none;
}
.tree-open >.tree-list {
    display: inherit;
}
.tree-image {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}
.tree-branch >.tree-item >.tree-image:before {
    font: var(--font-fa-solid);
    content: "\f0da";
}
.tree-open >.tree-item >.tree-image:before {
    font: var(--font-fa-solid);
    content: "\f0d7";
}
.tree-content {
    padding-left: 1.25em;
    overflow: hidden;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
.tree-icon-project, .tree-icon-folder, .tree-icon-document {
    margin-right: .5em;
}
.tree-icon-project:before {
    font: var(--font-fa-solid);
    font-size: .9em;
    margin-right: .5em;
    content: "\f00a";
    color: teal;
}
.tree-icon-folder:before {
    font: var(--font-fa-solid);
    font-size: .9em;
    margin-right: .5em;
    content: "\f07b";
    color: yellow;
    -webkit-text-stroke: 1px black;
}
.tree-icon-document:before {
    font: var(--font-fa-solid);
    font-size: .9em;
    margin-right: .5em;
    content: "\f15b";
    color: pink;
    -webkit-text-stroke: 1px black;
}
.tree-text {
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tree-rename {
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    box-sizing: border-box;
}
.tree-rename >input {
    display: block;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;    /* without this, narrowing the container eventually produces horizontal scroll bars (???) */
    /* REVISIT: hardcoding px's makes it pixel perfect, at least on my browser */
    margin: -2px -1px -1px -1px;
}
.tree-drag-insert {
    position: absolute;
    display: none;
    box-sizing: border-box;
    pointer-events: none;
}