.custom-node.selected, .custom-node.selected .diagram-diagram-port {
  border: 3px solid #FFF;
}

.custom-node:has(div.rhombic-node) {
  transform: rotate(-45deg);
}
.custom-node:has(div.circle-node) {
  border-radius: 50%;
}
.custom-node:has(div.rectangular-node) {
  border-radius: 3px;
}


.custom-node:hover .diagram-port {
  visibility: hidden;
}


.diagram-port {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: #f5f5f5;
  border: 1px solid #d4d4d4;
  cursor: pointer;

}

.custom-node .diagram-port, .pc-editor-node .diagram-port {
  visibility: hidden;
}

.pc-editor-node:hover .diagram-port {
  visibility: visible;
}


.custom-node .diagram-port:hover, .node > .card .diagram-port.has-links {
  visibility: visible;
  background-color: black;
}


.diagram-port.top {
  position: absolute;
  bottom: calc(100% - 6px);
  left: calc(50% - 6px)
}


.diagram-port.bottom {
  position: absolute;
  top: calc(100% - 6px);
  left: calc(50% - 6px);
}

.diagram-port.left {
  position: absolute;
  right: calc(100% - 9.5px);
  top: calc(50% - 9.5px);
}

.diagram-port.right {
  position: absolute;
  left: calc(100% - 9.5px);
  top: calc(50% - 9.5px);
}

.custom-node:has(div.rhombic-node) .diagram-port.bottom {
  position: absolute;
  top: calc(100% + 0px);
  left: calc(50% - 6px);
}

.custom-node:has(div.rhombic-node) .diagram-port.top {
  position: absolute;
  bottom: calc(100% + 0px);
  left: calc(50% - 6px)
}

.custom-node:has(div.rhombic-node) .diagram-port.left {
  position: absolute;
  right: calc(100% - 0px);
  top: calc(50% - 6px);
}

.custom-node:has(div.rhombic-node) .diagram-port.right {
  position: absolute;
  left: calc(100% - 0px);
  top: calc(50% - 6px)
}


.rectangular-node {
  width: 135px;
  height: 50px;
  border-radius: 3px;
}

.attack-node {
  background-color: #20203d;
}


.attack-node,
.critical-node,
.overlay-node {
  border: 3px solid #ecffe0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.attack-node .node-info,
.critical-node .node-info,
.overlay-node .node-info {

  font-size: 10px;
  color: #fff;
  font-weight: bold;
}


.circle-node {
  width: 49px;
  height: 33px;
  border-radius: 95%;
}


.rhombic-node {
  width: 90px;
  height: 90px;
}

/* .rotate {

width: fit-content;

transform: rotate(-45deg);

} */


.rhombic-node .node-info {
  transform: rotate(45deg);
}

.critical-node,
.overlay-node {
  border: 1px solid #f6f1ef;
}

.orange-node {
  background-color: #c44a16;
}

.yellow-node {
  background-color: #c4b31b;
}

.red-node {
  background-color: #a70000;
}

.opacity {
  opacity: 0.1;
}

.topology-node.cloud-node .node-img {
  width: 50px;
  height: 50px;
}

.topology-node.pc-node .node-img {
  width: 67px;
  height: 64px;
}

.topology-node.server-node .node-img {
  width: 64px;
  height: 65px;
}

.rectangular-node.overlay-node {
  width: 50px;
  height: 25px;
}

.overlay-node {
  position: relative;
}

.overlay-node .node-img {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -15px;
}


.topology-node-new {
  position: relative;
  background-color: #ffffff;
  width: 123px;
  height: 120px;
}

.topology-node-new:before, .topology-node-new:after {
  position: absolute;
  content: '';
}

.topology-node-new:before {
  top: 1px; /* border width */
  left: 1px; /* border width */
  height: calc(100% - 2px); /* 100% - (2 * border width) */
  width: calc(100% - 2px); /* 100% - (2 * border width) */
  background: #212124;
}

.topology-node-new, .topology-node-new:before, .topology-node-new:after {
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

.remediation-part ul{
    list-style : unset;
}

/*.subnet-editor {
width: 424px;
height: 226px;
position: relative;
border-radius: 10px;
border: dashed 1px #515159;
background-color: #1a1a39;
margin-top: 80px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.subnet-editor .access-toggle {
    width: 150px;
    height: 28px;
    padding: 4px 8px 4px 12px;
    border-radius: 14px;
    background-color: #dcddef;
    position: absolute;
    bottom: -14px;
    left: calc(50% - 75px);
}*/