:root {
  --graph-bg: #f5f1ea;
  --graph-ink: #1b1b1b;
  --graph-muted: #7a7368;
  --graph-panel: #fff8ef;
  --graph-accent: #e4572e;
  --graph-node: #0f4c5c;
  --graph-edge: #6b6b6b;
  --graph-node-active: #e4572e;
  --graph-edge-incoming: #2a9d8f;
  --graph-edge-outgoing: #e4572e;
  --graph-edge-path: #4c6ef5;
  --graph-edge-hover-path: #7c3aed;
  --graph-node-outline: #1b1b1b;
  --graph-dim-node: #c7c3bb;
  --graph-dim-edge: #d1ccc4;
}

* {
  box-sizing: border-box;
}

.content-title {
    padding: 0 15px;
}

.graph-container {
    position: relative;
    height: 100%;
    padding: 4px;
    background: #fbf6ef;
    border: 0;
    border-top: 1px solid #ccc;

    .graph-viewer {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .graph-active-resource {
        top: 15px;
        right: 15px;
        position: absolute;
        width: 300px;
        height: auto;
        padding: 10px;
        border: 1px solid #ccc;
        background: #fff;
        max-width: 30%;
        max-height: 80%;
        overflow-y: scroll;
        overflow-x: hidden;

        .graph-active-resource-header {
            color: var(--graph-muted);

            span {
              color: black;
            }
        }

        .graph-active-resource-path {
            font-size: 0.9em;
        }
    }
}