.custom-node { border: 3px solid transparent; }

.custom-node.selected { border: 3px solid #00d6ff; }

.custom-node:hover .port { visibility: visible; }

.custom-node.selected .port { visibility: visible; }

.custom-node .port {
    background-color: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    visibility: hidden;
    width: 20px;
}


.custom-node-text {
    font-size: 16px;
    max-height: 120px;
    max-width: 150px;
}

.node-title-text {
    color: white;
    max-width: 100px;
}

.actionnode-title-text {
    color: white;
    max-width: 160px;
}

.start-end-node-text { padding: 1px 0; }

.action-node-hr {
    margin: 0px;
    margin-bottom: 5px;
    padding: 0px;
}

.action-node {
    border-radius: 10px;
    color: white;
    font-size: 0.8rem;
    height: 120px;
    overflow-wrap: break-word;
    overflow-y: auto;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    width: 150px;
    /* First dynamic port positions based on node size */
    /*min-height: 120px;
    min-width: 150px;*/
    /*max-width: 250px;*/
}

.action-node .port.bottom {
    left: 65px;
    position: absolute;
    top: 110px;
}

.action-node .port.top {
    left: 65px;
    position: absolute;
    top: -10px;
}

.action-node .port.right {
    left: 140px;
    position: absolute;
    top: 50px;
}

.action-node .port.left {
    left: -10px;
    position: absolute;
    top: 50px;
}

.nodeportproperties { background-color: var(--gray); }

.nodeportproperties .node {
    background-color: #f5f5f5;
    border-radius: 50%;
    height: 30px;
    position: absolute;
    width: 30px;
}

.nodeportproperties .unset { border: thin dashed black; }

.nodeportproperties .entrance { border: solid medium green; }

.nodeportproperties .exit { border: solid medium red; }

.nodeportproperties .portunset { border: thin dashed black; }

.nodeportproperties .portset { border: solid medium black; }

.nodeportproperties .top {
    left: 60px;
    top: -13px;
}

.nodeportproperties .right {
    left: 133px;
    top: 45px;
}

.nodeportproperties .bottom {
    left: 60px;
    top: 103px;
}

.nodeportproperties .left {
    left: -13px;
    top: 45px;
}

.action-node .port:hover, .node > .card .port.has-links {
    /*background-color: black;*/
    border: 2px solid #00d6ff;
    visibility: visible;
}

.node-icon { text-align: right; }

.start-node {
    /*background-color: #00A651;*/
    background-color: var(--start-color);
}

.end-node {
    /*background-color: #eb4a56;*/
    background-color: var(--end-color);
}

.wait-node {
    /*background-color: #6B6C6E;*/
    background-color: var(--wait-color);
}

.api-node {
    /*background-color: #1450B4;*/
    background-color: var(--api-color);
}

.human-node { background-color: #BC54B2; }

.mail-node { background-color: #F4BE50; }

.cancel-node { background-color: #E05230; }