:root{--node-target-width: 220px;--node-target-height: 80px;--node-sub-multiplier: 10;--node-sub-width: calc(var(--node-target-width) / 100 * var(--node-sub-multiplier));--node-sub-height: calc(var(--node-target-height) / 100 * var(--node-sub-multiplier));--node-subgrid-units: 10;--node-width: calc(var(--node-sub-width) * var(--node-subgrid-units));--node-height: calc(var(--node-sub-height) * var(--node-subgrid-units));--node-label-size: calc(var(--node-height) * .15);--node-frame-height: calc(var(--node-height) * .5);--node-frame-width: calc(var(--node-width) * .8);--node-frame-text-size: calc(var(--node-frame-height) * .27);--node-frame-description-size: calc(var(--node-frame-height) * .23);--node-icon-size: calc(var(--node-frame-height) * .65);--node-extend-size: calc(var(--node-frame-height) * .4);--connection-color: #000000;--node-border-color: #000000;--node-extend-color: #cacaca;--tree-padding: 15px;--ruler-thickness: 15px;--max-nodes: 100;--connection-triangle-size: calc(var(--node-frame-height) * .24)}.absolute-space{position:relative;width:100%;height:100%;background-color:var(--white);padding:var(--ruler-thickness) 0 0 var(--ruler-thickness);z-index:1;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAhSURBVHgBxc4xAQAADMIw/FutiM0A8JKzVwWcjNS32u0D8x4PAZ8Z0z4AAAAASUVORK5CYII=)}.absolute-tree{position:relative;width:calc(var(--node-width) * 200);height:calc(var(--node-height) * 200);padding:var(--tree-padding);z-index:1;-webkit-user-select:none;user-select:none}.subgrid-sample{position:absolute;width:var(--node-sub-width);height:var(--node-sub-height);top:-200px;left:-200px;z-index:-1;opacity:0}.ruler-x,.ruler-y{position:absolute;display:flex;top:0;left:0;z-index:2;background-color:var(--white)}.ruler-x{padding-left:calc(var(--ruler-thickness) + var(--tree-padding));height:var(--ruler-thickness);width:100%;transform:translate(calc(var(--node-width) * var(--max-nodes) * -1))}.ruler-y{flex-direction:column;padding-top:calc(var(--ruler-thickness) + var(--tree-padding));width:var(--ruler-thickness);height:100%;transform:translateY(calc(var(--node-height) * var(--max-nodes) * -1))}.ruler-x:before{content:"";position:absolute;top:var(--ruler-thickness);left:var(--ruler-thickness);height:1px;width:100%;background-color:var(--borderLight)}.ruler-y:before{content:"";position:absolute;top:var(--ruler-thickness);left:var(--ruler-thickness);height:100%;width:1px;background-color:var(--borderLight)}.ruler-x div{border-left:1px solid var(--borderLight);border-bottom:1px solid var(--borderLight);min-width:var(--node-width)}.ruler-y div{border-top:1px solid var(--borderLight);border-right:1px solid var(--borderLight);min-height:var(--node-height)}.ruler-x div,.ruler-y div{position:relative;display:flex;justify-content:center;align-items:center;white-space:nowrap;font-size:8px;color:var(--textLight);background-color:var(--white);z-index:4}.ruler-visibility-true .ruler-x,.ruler-visibility-true .ruler-y,.ruler-visibility-true .ruler-intersection{visibility:visible}.ruler-visibility-false .ruler-x,.ruler-visibility-false .ruler-y,.ruler-visibility-false .ruler-intersection{visibility:hidden}.ruler-intersection{position:absolute;top:0;left:0;z-index:3}.ruler-intersection div{position:inherit;top:0;left:0;background-color:var(--white)}.ruler-intersection div:nth-child(1){width:calc(var(--ruler-thickness) - 1px);height:calc(var(--node-height) * .3)}.ruler-intersection div:nth-child(2){width:calc(var(--node-width) * .3);height:calc(var(--ruler-thickness) - 1px)}.absolute-controls{position:absolute;bottom:0;right:0;z-index:2;padding:var(--ruler-thickness)}.absolute-controls svg{width:24px;height:24px;fill:var(--textLight);cursor:pointer}.absolute-node{display:flex;position:absolute;width:var(--node-width);height:var(--node-height);transition:left .3s,top .3s}.absolute-node-label{position:absolute;left:0;top:calc(var(--node-label-size) * -1);height:var(--node-label-size);font-size:var(--node-label-size);color:var(--textLight);background-color:var(--white9);text-transform:uppercase}.absolute-node-frame{position:absolute;top:0;left:0;width:var(--node-frame-width);height:var(--node-frame-height);background-color:transparent}.absolute-node-frame-inner{position:relative;display:flex;align-items:center;gap:10px;padding:3%;width:var(--node-frame-width);height:var(--node-frame-height);background-color:var(--white);border-radius:calc(var(--node-frame-height) * .15);border:1px solid var(--node-border-color);box-shadow:#32325d40 0 6px 12px -2px,#0000004d 0 3px 7px -3px;z-index:3}.absolute-node-frame-icon{width:var(--node-icon-size);height:var(--node-icon-size);border:1px solid #ebebeb;border-radius:calc(var(--node-icon-size) * .25)}.absolute-node-frame-content{display:flex;flex-direction:column}.absolute-node-frame-text{font-size:var(--node-frame-text-size);color:var(--text);font-weight:500;opacity:.92;letter-spacing:.1px}.absolute-node-frame-text:empty{display:none}.absolute-node-frame-description{font-size:var(--node-frame-description-size);color:var(--textLight)}.absolute-node-frame-description:empty{display:none}.absolute-node-frame-text,.absolute-node-frame-description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--node-frame-width) * .7)}.absolute-node-frame:hover{cursor:pointer}.absolute-node-frame-inner:hover,.absolute-node-active .absolute-node-frame-inner{box-shadow:#26394d 0 20px 30px -10px;border-width:2px}.absolute-node-active{--node-extend-color: var(--connection-color)}.absolute-node-x-connection,.absolute-node-y-connection{position:absolute;top:unset;left:unset;border:1px solid var(--connection-color);pointer-events:none;transition:left .3s,top .3s,right .3s,bottom .3s}.absolute-node-x-connection{right:100%;top:50%}.absolute-node-x-connection:before{content:"";position:absolute;top:50%;left:-1px;transform:translateY(-50%);width:0;height:0;border-top:calc(var(--connection-triangle-size) / 2) solid transparent;border-bottom:calc(var(--connection-triangle-size) / 2) solid transparent;border-left:var(--connection-triangle-size) solid var(--connection-color)}.absolute-node-y-connection{bottom:100%;left:50%}.absolute-node-y-connection:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-left:calc(var(--connection-triangle-size) / 2) solid transparent;border-right:calc(var(--connection-triangle-size) / 2) solid transparent;border-top:var(--connection-triangle-size) solid var(--connection-color)}.absolute-node-x-extend,.absolute-node-y-extend{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--node-extend-size);height:var(--node-extend-size);font-size:calc(var(--node-extend-size) * .95);font-weight:700;border-radius:25%;color:var(--white);background-color:var(--node-extend-color);cursor:pointer}.absolute-node-x-extend{top:50%;right:calc(var(--node-extend-size) * -2);transform:translateY(-50%)}.absolute-node-y-extend{left:50%;bottom:calc(var(--node-extend-size) * -2);transform:translate(-50%)}.absolute-node-x-extend:before,.absolute-node-y-extend:before{content:"";position:absolute;width:0px;height:0px;border:1px solid var(--node-extend-color)}.absolute-node-x-extend:before{left:calc(var(--node-extend-size) * -1);width:var(--node-extend-size)}.absolute-node-y-extend:before{top:calc(var(--node-extend-size) * -1);height:var(--node-extend-size)}.absolute-node-x-extend:hover,.absolute-node-y-extend:hover,.absolute-node-x-extend:hover:before,.absolute-node-y-extend:hover:before{background-color:var(--connection-color);border:1px solid var(--connection-color)}.absolute-node-toolkit{position:absolute;top:calc(var(--node-extend-size) * -1 + -2px);right:calc(var(--node-width) - var(--node-frame-width) + 2px);display:flex;gap:5px;z-index:5;animation:genericFadeIn .2s}.absolute-node-toolkit .absolute-node-toolkit-drag-div{display:flex}.absolute-node-toolkit svg{width:var(--node-extend-size);height:var(--node-extend-size);fill:var(--connection-color);cursor:pointer}@keyframes genericFadeIn{0%{opacity:0}to{opacity:1}}.absolute-node-toolkit-drag:hover{cursor:grab}.absolute-node-highlight-once .absolute-node-frame{animation:absoluteNodeHighlightOnce 1s}@keyframes absoluteNodeHighlightOnce{0%{box-shadow:var(--primary) 0 20px 30px 0!important}to{box-shadow:none!important}}