.graph-wrapper {
  position: relative;
}

.graph-d3 {
  border: 1px solid #cccccc;
  margin: 0 1rem;
}

#graph-selector {
  border: 1px dotted #000;
  position: fixed;
  background: rgba(202, 32, 94, 0.5);
}

#nodes-selection {
  display: none;
  max-width: 600px;
  margin: auto;
  box-shadow: 0px 5px 15px rgb(0 0 0 / 5%);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 1;
  max-height: 600px;
  overflow: auto;
}

#nodes-selection .ro-icon-close {
  position: absolute;
  right: 0;
  margin: 10px;
}

#nodes-selection form {
  margin: 72px;
}

.graph-overlay {
  background: white;
  border: 1px solid #cccccc;
  bottom: 10px;
  height: auto;
  min-height: 50%;
  padding: 0.5rem;
  position: absolute;
  right: 10px;
  width: 320px;
  word-wrap: break-word;
}

.graph-overlay--centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.node {
  cursor: pointer;
}

.node text {
  max-width: 50px;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
