.ragNode { position: relative; box-shadow: -6px 0 12px 0 rgba(179, 177, 177, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0 16px 6px rgba(0, 0, 0, 0.05); padding: 5px; border-radius: 5px; background: white; width: 50px; height: 50px; border-radius: 50%; display: flex; // align-items: center; // justify-self: center; justify-content: center; .nodeName { font-size: 10px; color: black; } label { display: block; color: #777; font-size: 12px; } .type { // font-size: 12px; } .description { font-size: 10px; } .bottomBox { position: absolute; bottom: -34px; background: white; padding: 2px 5px; border-radius: 5px; box-shadow: -6px 0 12px 0 rgba(179, 177, 177, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0 16px 6px rgba(0, 0, 0, 0.05); } .categorizeAnchorPointText { position: absolute; top: -4px; left: 8px; white-space: nowrap; } } .selectedNode { border: 1px solid rgb(59, 118, 244); } .handle { display: inline-flex; text-align: center; // align-items: center; } .jsonView { word-wrap: break-word; overflow: auto; max-width: 300px; max-height: 500px; } .logicNode { position: relative; box-shadow: -6px 0 12px 0 rgba(179, 177, 177, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0 16px 6px rgba(0, 0, 0, 0.05); padding: 5px; border-radius: 5px; background: white; width: 100px; height: 100px; border-radius: 50%; display: flex; // align-items: center; // justify-self: center; justify-content: center; .nodeName { font-size: 10px; color: black; } label { display: block; color: #777; font-size: 12px; } .type { // font-size: 12px; } .description { font-size: 10px; } .bottomBox { position: absolute; bottom: -34px; background: white; padding: 2px 5px; border-radius: 5px; box-shadow: -6px 0 12px 0 rgba(179, 177, 177, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0 16px 6px rgba(0, 0, 0, 0.05); } .categorizeAnchorPointText { position: absolute; top: -4px; left: 8px; white-space: nowrap; } }