#target {
  /* Needed for border-width related properties */
  border-style: solid;
  /* Needed for column-rule-width */
  column-rule-style: solid;
  /* Needed for border-radius related properties */
  width: 100%;
  height: 100%;
}

#target-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.property {
  width: 22em;
}

.testcase {
  width: 20em;
}

.state0,
.state50,
.state100 {
  width: 10em;
}

.error-result {
  width: calc(30em + 2px); /* 2px is border of other one */
}

.result.animated dd {
  background: none;
}

.result.discrete dd {
  background: none;
}

.result.error dd {
  background: none;
}

#legend dd:nth-child(n + 3) {
  margin-top: 0;
}

#animation-switcher {
  width: 14em;
  padding: 0.5em;
  text-align: center;
  border: 1px solid black;
  margin-bottom: 1em;
  background: linear-gradient(to bottom, #eee 0%,#e0e0e0 100%);
}

#animation-switcher div {
  border: 1px solid black;
  margin-top: 0.5em;
  cursor: pointer;
  background-color: white;
  padding: 0.5em 0;
}

#animation-switcher div.on {
  background: linear-gradient(to bottom, #ff8700 0%,#e17b08 100%);
  color: white;
}

#result-as-json {
  display: block;
  color: black;
  text-decoration: none;
  width: 14em;
  margin: 0.5em auto 0.5em auto;
  text-align: center;
  border: 1px solid black;
  padding: 0.5em 0 0.5em 0;
  cursor: pointer;
}