/* SVG baseline */

.svg-content-responsive {
    width: 100%;
    height: auto;
    display: block;
}
svg {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 12px;
}

/* Axes */
.axis path,
.axis line {
    fill: none;
    stroke: #888;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #555;
}

/* Grid lines */
.grid line {
    stroke: #e0e0e0;
    stroke-opacity: 0.7;
}

/* Data shapes */
.bar {
    fill: steelblue;
}

.area {
    fill-opacity: 0.7;
}

.line {
    fill: none;
    stroke-width: 2px;
}

/* Interaction */
.hover {
    stroke: #000;
    stroke-width: 2px;
}

.tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Make the visualization container fill the page. */
#container {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

/* Style the nodes of the graph. */
.node {
    stroke: black;
    stroke-width: 1.5;
}

.nodeLabel {
    font-size: 2em;
    /* Center text horizontally */
    text-anchor: middle;
}

/* Style the links of the graph. */
.link {
    stroke: black;
}

/* Set the arrowhead size. */
.arrow {
    stroke-width: 1.5px;
}

.slice .main-arc {
    stroke: black;
    stroke-width: 1px;
    cursor: pointer;
    font-family: "Arial Narrow", sans-serif;
    font-size: small;
}

.slice .hidden-arc {
    fill: none;
    font-family: "Arial Narrow", sans-serif;
    font-size: small;
}

.slice text {
    dominant-baseline: middle;
    text-anchor: middle;
    pointer-events: none;
    font-family: "Arial Narrow", sans-serif;
    font-size: small;
}

.scrapGroup {
    font-size:16px;
    border: 2px solid red;
    padding:12px;
    width:25%;
}

.scrapGroup section {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.scrapGroup section div {
    padding:4px;
}