#svg-layer g.clickable {
    pointer-events: all;
}

#svg-layer g.node .node-background {
    /*fill: #e6ebda;*/
    stroke: #666;
    stroke-width: 1px;
}

#svg-layer g.node .node-selection-border {
    fill: var(--selection-shadow-color);
    opacity: 0;
    transition: background-color 0.2s, opacity 0.2s;
}

#svg-layer g.node.selected .node-selection-border {
    fill: var(--selection-shadow-color);
    opacity: 1;
}

#svg-layer g.node.focused .node-selection-border {
    fill: var(--focus-shadow-color);
    opacity: 1;
}
 
#svg-layer g.node.selected .node-background {
    stroke: var(--selection-border-color);
    stroke-width: 1px;
}

/*#svg-layer g.node.selected .node-background::after {
    stroke: var(--selection-border-color);
    stroke-width: 4px;
}*/

#svg-layer g.node .dividers path {
    stroke: #666;
    stroke-width: 1px;
}

#svg-layer g.node .connectors {
    opacity: 0;
    transition: background-color 0.2s, opacity 0.2s;
}

#svg-layer g.node .connectors .circle {
    fill: #666;
    stroke: #fff;
    stroke-width: 2px;
    cursor: crosshair;
}

#svg-layer g.node .connectors .hitarea {
    fill: transparent;
    stroke: transparent;
}

#svg-layer g.node.show-connectors .connectors {
    opacity: 1;
}

#svg-layer g.node:hover .connectors {
    opacity: 1;
}

#svg-layer g.node .connectors .connector:hover .circle {
    fill: #2d3748;
}

#svg-layer g.node .text {
    font-family: Inter;
    font-size: 1rem;
    fill: #333;
}

#svg-layer g.node.editing .text {
    font-family: Inter;
    font-size: 1rem;
    fill: transparent;
}

#svg-layer g.node:not(.editing) .text .placeholder {
    fill: var(--color-text-placeholder);
}

#svg-layer g.node .nodeTag, #svg-layer g.node .nodeTitle {
    font-weight: 600;
}

#svg-layer g.node .nodeDescription {
    white-space: pre-wrap;
}

#svg-layer g.node .calculation-icon {
    display: none;
}
#svg-layer g.node .calculation-icon.fx {
    display: block;
}
#svg-layer g.node .calculation-icon.fx .calculation-icon-nfx {
    display: none;
}
#svg-layer g.node .calculation-icon.nfx {
    display: block;
}
#svg-layer g.node .calculation-icon.nfx .calculation-icon-nfx {
    display: block;
}

.node-edit-overlay {
    position: relative;
    border-radius: 0.5rem;
    touch-action: manipulation;
}

.node-edit-overlay .text {
    box-sizing: border-box;
    font-family: Inter;
    font-size: 1rem;
    color: #333;
    border: 0px solid #00000033;
    touch-action: manipulation;
}

.node-edit-overlay .text:focus {
    /*outline: 1px solid #3b82f6;*/
    outline: none;
    background-color: rgba(0, 0, 0, 0.04);
}

.node-edit-overlay .nodeTag, .node-edit-overlay .nodeTitle {
    font-weight: 600;
    padding-bottom: 2px;
}

.node-edit-overlay .nodeTag {
    text-align: center;
    border-top-left-radius: 0.5rem;
    width: 60px;
    height: 32px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.node-edit-overlay .nodeTitle {
    border-top-right-radius: 0.5rem;
    padding-left: 8px;
    width: 228px;
    height: 32px;
    position: absolute;
    top: 0px;
    left: 60px;
}

.node-edit-overlay .nodeDescription {
    padding: 4px 2px 2px 8px;
    width: 288px;
    height: 96px;
    position: absolute;
    top: 32px;
    left: 0px;
    resize: none;
    line-height: 130%;
    overflow: hidden;
}

.node-edit-overlay .nodeType {
    border-bottom-left-radius: 0.5rem;
    text-align: center;
    width: 144px;
    height: 32px;
    position: absolute;
    top: 128px;
    left: 0px;
    padding-bottom: 2px;
}

.node-edit-overlay .nodeValue {
    border-bottom-right-radius: 0.5rem;
    text-align: center;
    width: 144px;
    height: 32px;
    position: absolute;
    top: 128px;
    left: 144px;
    padding-bottom: 2px;
}