/* Tree */
    .TreeContainer { 
        --color-primary: #3457DC;
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;
        border: var(--color-tree-border) 1px solid;
        user-select: none;
    }
    .TreeContainer, .TreeContainer * { box-sizing: border-box; }
    .TreeWrapper {
        height: 100%;
        /* border: green 1px solid; */
        overflow: hidden;
    }
    .Tree {
        display: block;
    }
    .Node {padding-top: 20px;position: relative; display:inline-block; vertical-align: top;;}
    
    .Node__header {display: flex;justify-content: center;position: relative;padding-bottom: 20px;}
    
    .Node__before,
    .Node__after { flex-basis: 40px; min-width: 40px; max-height: 50px; flex-grow: 0;}

    .Node__before.dragging-over,
    .Node__after.dragging-over { background: #ccc; }
    .Node__box {border: var(--color-primary) 1px solid;border-radius: 2px;width: 150px;position: relative;}
    .Node__box.dragging-over { opacity: 0.5; }
    .Node__path {font-size: 0.6em;position: absolute;bottom: 0;left: 0;background: #ddd;padding: 0 2px;}
    .Node__children {position: relative; display: inline-block;
        vertical-align: top; white-space: nowrap;;}
    .Node__prev,
    .Node__next { display: inline-flex;  width: 30px; height: 30px; align-items: center; justify-content: center; margin-top: 30px;
        font-size: 30px;
        font-weight: bold; color: var(--color-primary);}
    .Node__prev {}
    .Node__next {}
    
    .Node__branchLine {display:block; position:absolute;top: 0;height: 1px;background: var(--color-primary);width: 100%;}
    .Node--isFirst > .Node__branchLine {width: 50%;left: 50%;}
    .Node--isLast > .Node__branchLine {width: 50%;}
    .Node--isUnique > .Node__branchLine { display:none; }

    .Node__parentLine {position: absolute;width: 1px;top: 0;height: 20px;left: 50%;background: var(--color-primary);}
    .Node__childrenLine {position: absolute;width: 1px;height: 20px;z-index: 2;bottom: 0;left: 50%;background: var(--color-primary);}

    .Node__image {max-height: 60px;overflow: auto; padding: 0 5px; margin-bottom: 5px; display:block; }
    .Node__image img {max-width: 100%;pointer-events: none;}
    .Node__imagepending { height: 60px; background: #eee; display: flex; justify-content: center; align-items: center; font-size: 10px; line-height: 150%; padding: 10px; color: #555; text-decoration: none;     border: 0 none; width: 100%;  } 
    .Node__topbar {background: var(--color-primary);/* margin-bottom: 0px; *//* height: 6px; *//* display: flex; */height: 17px;/* border: red 1px solid; */justify-content: space-between;/* padding: 0 3px; */position: relative;}
    .Node__topbar__right {/* margin-left: auto; *//* vertical-align: middle; *//* height: 21px; */height: 100%;position: absolute;top: 0;right: 0;/* border: red 1px solid; */padding-right: 3px;}
    .Node__topbar__link {/* display: inline-block; */font-size: 10px;color: white;/* padding-right: 5px; */vertical-align: middle;display: inline-block;line-height: 100%;height: 100%;}
    .Node__topbar__link .fa-solid {/* vertical-align: middle; */}
    /* .Node__url {background: var(--color-primary);margin-bottom: 0px;}
    .Node__url input { border: 0 none; background: transparent; color:white; font-size: 0.7em; padding: 2px; display:block; width: 100%; height: 20px; line-height: 20px;; overflow: hidden;text-overflow: ellipsis; cursor:pointer; } */
    .Node__title { padding: 5px; }
    .Node__title textarea {
        background: transparent;
        outline: 0 none;
        padding: 0;
        line-height: 16px;
        border: 0 none; color: #2b2a2a; 
        width: 100%;
        font-size: 12px;font-weight: 600; font-family: inherit;
        resize:none;
    }
    
    .Node__actions {position: absolute;bottom: 0;transform: translateY(50%);text-align: center;width: 100%;z-index: 3;}
    .Node__pagination {font-size: 10px;position: absolute;bottom: -27px;left: 50%;transform: translateX(-50%);background: white;padding: 2px;z-index: 4;}
    .Node__box:hover .Node__actions { display: block; }
    .Node__actions button {color: white;background: var(--color-primary);border: none;appearance: none;border-radius: 50%;width: 18px;height: 18px;padding-top: 1px;font-size: 10px;text-decoration: none;display: inline-flex;align-content: center;justify-content: center;align-items: center;margin: 0 2px;cursor: pointer;position: relative;}
    .Node__actions button.closed {
        border: var(--color-primary) 1px solid;
        background: white;
        color: var(--color-primary);
        font-size: 9px;
        /* font-family: courier new; */
    }



    .Controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; }
    .Controls button {color: #666;background: #ccc;border: none;appearance: none;border-radius: 50%;width: 25px;height: 25px;padding-top: 0px;font-size: 10px;text-decoration: none;display: inline-flex;align-content: center;justify-content: center;align-items: center;margin: 2px 2px; cursor:pointer;}