.TreeView {
    display: inline-block;
    /*   max-width:220px; */
}

.TreeView .NodeChilds {
    list-style: none;
    padding: 0px;
    margin: 0px;

    display: flex;
    flex-direction: column;
}

.TreeView .NodeChilds .NodeOuter {

}

.TreeView .NodeChilds .NodeChilds {
    margin-left: 21px;

}

.TreeView .Node {
    /*display: table;*/
    /*width: 100%;*/
    /*border-spacing: 3px;*/
    /*border-collapse: separate;*/
    display: flex;
    flex-direction: row;

    align-items: center;
    padding: 3px;
    gap:0.3em;
}

.TreeView .Node:hover {
    background-color: #f3f6fb;
}

.TreeView .Node .Handle {

    cursor: pointer;
    width: 32px;
    height: 32px;
}
.TreeView .Node .Icon {

    box-sizing: border-box;
    min-width:32px;
    height:32px;
    max-height:32px;
}
.TreeView .Node .Icon IMG {

    width:100%;
    height:100%;
    object-fit:cover;
}

.TreeView .Node .Handle .Button {
    /*border: 1px solid #cccccc;*/

    width: 32px;
    height: 32px;

    background-repeat: no-repeat;
    background-position: 50% 50%;

    background-size:50%;

    filter: invert(.5);
}

.TreeView .Node[branch_type='opened'] + .NodeChilds {
    display: auto;
}

.TreeView .Node[branch_type='closed'] + .NodeChilds {
    display: none;
}


.TreeView .Node[branch_type='opened'] .Handle .Button {
    background-image: url('../images/tree_node_close.svg');
}

.TreeView .Node[branch_type='closed'] .Handle .Button {
    background-image: url('../images/tree_node_open.svg');
}

.TreeView .Node[branch_type='leaf'] .Handle .Button {
    background-image: url('../images/tree_node_leaf.svg');
    background-size:12%;
}

.TreeView .Node .Action {


    text-decoration: none;
    color: black;

    text-align: left;

    flex-grow: 1;
}

.TreeView .Node[active="1"] .Action {

    text-decoration: underline;
    font-weight: bold;
}

.TreeView .Node .node_actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:0.3em;
    flex-wrap: nowrap;
}

.TreeView .Node .node_actions .Action {

    color: #50a9f9;
    text-decoration: none;

}


.TreeView .Node .Control {
    display: block;

    cursor: pointer;

    vertical-align: middle;
    text-align: left;
    float: left;

    width: 16px;
    height: 16px;
}

.TreeView .node_checkbox {
    display:inline-block;

}
.TreeView .node_checkbox INPUT {
    height:32px;
    width:auto;
}