body {
    font-family: sans-serif;
    margin: 20px;
}

.controls {
    margin-bottom: 30px;
    position: relative;
}

.control-group {
    margin: 10px 0;
}

label {
    display: inline-block;
    width: 200px;
}

.label {
    font-size: 12px;
    fill: #333;
}

input[type=range] {
    width: 300px;
    vertical-align: middle;
}

.grid line {
    stroke: #ccc;
    stroke-dasharray: 2 2;
}

.circle {
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

.cap-limit {
    stroke: darkorange;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
}

select,
input {
    margin: 5px;
}

.chart {
    margin-bottom: 10px;
}

svg {
    border: 1px solid #ccc;
}

.axis path,
.axis line {
    fill: none;
    stroke: #333;
    shape-rendering: crispEdges;
}

/* Popover styling */
.popover {
    display: none;
    position: relative;
    /* top: 10%;
    left: 0; */
    z-index: 10;
    width: 320px;
    background: white;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.popover.show {
    display: block;
}

.popover h4 {
    margin-top: 0;
    font-size: 1em;
}


.op-point {
    fill: red;
    stroke: none;
}

.axis-label {
    font-size: 14px;
    fill: #333;
}

.metric-label {
    margin: 4px 0;
}

.bar-bg {
    fill: #eee;
}

.bar-fill {
    fill: steelblue;
}

main {
    padding: 20px;
  }
  /* The scroll-wrapper acts as a “window” for our horizontal carousel */
  .scroll-wrapper {
    width: 520px; /* 3 * 250px + 4 * 10px */
    margin: 40px auto; /* center the carousel and add top margin */
    overflow: hidden;
    border: 1px solid #ccc;
  }
  /* The inner container holds two copies of our 9 SVG items for a seamless loop */
  .scroll-content {
    display: flex;
    transition: transform 0.1s linear;
  }
  .svg-item {
    flex: none;
    width: 250px;
    height: 250px;
    margin: 0 10px; /* 10px left and right */
    background: #f8f8f8;
  }
  /* Remove extra margin on the very left and right ends if needed */
  .scroll-content > :first-child {
    margin-left: 10px;
  }
  .scroll-content > :last-child {
    margin-right: 10px;
  }