/* CSS for styling */
.diagram-container {
  flex:      auto 1 1;
  max-width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}

svg.diagram {
  width:            100%;
  height:           100%;
  box-shadow:       rgba(0, 0, 0, 0.1) 0px 4px 12px;
  margin-left:      auto;
  margin-right:     auto;
}

.hyperplane {
  stroke:       var(--color-opposite);
  stroke-width: 1pt;
}

.mark {
  fill: var(--color-opposite);
}

.function-graph {
  stroke: var(--color-typography, #fdfdfd);
  fill:   none;
}

.relaxation-continuous {
  stroke: var(--color-attention);
  fill:   none;
}

.relaxation-dual {
  stroke:       var(--color-attention);
  stroke-width: 2pt;
  fill:         none;
}

.epigraph {
  fill: var(--color-crystal, hsl(147 42% 64%));
}

.epigraph-component {
  fill: var(--color-attention, hsl(180 43% 51%));
}

.Missing {
  text-align: center;
  width:  100%;
  height: 300px;
  background-color: gray;
  border: black 1px;
}