* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font: 12px sans-serif;
  height: 100vh;
  width: 100vw;
}

#graph {
  margin-left: 50px;
  width: calc(100% - 150px);
}

.rules line, .rules path {
  shape-rendering: crispEdges;
}

.rules .tick {}

.rules .minor {
  stroke: #BBB;
}

.rules .domain {
  fill: none;
}

.grid .tick {
  stroke: #CCC;
}

.series path {
  fill: none;
  stroke: #AE81FF;
  stroke-width: 3px;
}

.x_axis {
  stroke: #000;
  stroke-width: 2;
}

.lower-sum {
  fill: #1a69b580;
  stroke: #1a69b5;
  stroke-width: 1.5px;
}

.upper-sum {
  fill: #FF000080;
  stroke: #A52117;
  stroke-width: 1.5px;
}

.midpoint-sum {
  fill: #1BBB6880;
  stroke: #1BBB68;
  stroke-width: 1.5px;
}

.left-sum {
  fill: #FF800080;
  stroke: #FF8000;
  stroke-width: 1.5px;
}

.right-sum {
  fill: #AAAAFF80;
  stroke: #AAAAFF;
  stroke-width: 1.5px;
}

form {
  padding: 1em;
}

table {
  background: #E6E6E6;
  border-collapse: collapse;
  border-radius: 2px;
  font-size: 1.5em;
  margin: 0 auto;
}

thead th {
  background-color: #138684;
  color: #FFF;
  padding: .3em;
}

thead th:first-child {
  border-top-left-radius: 2px;
}

thead th:last-child {
  border-top-right-radius: 2px;
}

th {
  padding: .5em;
  text-align: left;
}

td {
  padding: .5em;
}

input[type="number"] {
  font-size: inherit;
  width: 5ch;
}

input[type="range"] {
  width: 20vw;
}

#cell-lower, #cell-midpoint, #cell-upper, #cell-left, #cell-right {
  box-sizing: content-box;
  font-family: monospace;
  width: 10ch;
}