.file-tree-wrapper {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;

    > ul {
        margin-left: 20px;
    }
    .file-list, .file-list ul {
        list-style-type: none;
            font-size: 1em;
            line-height: 1.8em;
            margin-left: 10px;
            padding-left: 8px;
            border-left: 1px dotted var(--gray-dark);
    }
    .file-list {
        
        li {
            position: relative;
            padding-left: 12px;
            margin-top: 5px;
            margin-bottom: 5px;

            a {
                text-decoration: none;

                &.category-name {
                    &:before {
                        display: block;
                        content: " ";
                        width: 14px;
                        height: 1px;
                        position: absolute;
                        border-bottom: 1px dotted var(--gray-dark);
                        top: 13px;
                        left: -6px;
                    }
                    &.active {
                        font-weight: 700;

                        ~ .deleteDialog{
                            display: inline-block;
                        }
                    }

                    img {
                        width: 30px;
                        height: 30px;
                        object-fit: contain;
                    }
                }
            }
        }
        .folder-root {
            list-style-type: none;

            a {
                text-decoration: none;
            }
        }
    }
    li.folder-root ul {
        transition: all .3s ease-in-out;
    }
    li.folder-root.closed ~ ul,li.folder-root.closed>ul {
        opacity: 0;
        max-height: 0;
    }

    li.folder-root.open ~ ul,li.folder-root.open>ul {
        opacity: 1;
        display: block;
        max-height: 1000px;
    }

    .file-opener-i {
        position: absolute;
        left: -22px;
        top: 4px;
        z-index: 1;
        background: var(--white);
        margin: 2px;
        cursor: pointer;
        font-size: 1.2em;
    }

    .file-tree li, .file-tree a {
        white-space: nowrap;
    }

    .file-tree li,.file-tree a {
        white-space: nowrap;
    }

    .file-list .deleteDialog {
        padding: 0 7px;
        display: none;
    }
}

.tree-loading {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .3);
    z-index: 1005;
}

.tree-form-body {
    .widget {
        border-radius: 10px;
        border: 1px solid var(--gray);
    }
}