/* markov style */
.st-diagram {
  width: 100%;
  height: 100%;
  display: block;
  float: left;
  box-sizing: border-box;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  opacity: 1;
}
.currentState {
  fill: rgba(0, 0, 0, 0.4);
  stroke: #ffffff;
  pointer-events: none;
}
.node text {
  text-anchor: middle;
}
.links {
  fill: none;
}
.link {
  opacity: 0.4;
  -webkit-transition: .25s opacity;
  transition: .25s opacity;
}
.link.active {
  opacity: 0.8;
}
.link.inactive {
  opacity: 0.1;
}
.stateTable {
  color: white;
}
.stateTable tr {
  box-sizing: border-box;
  padding: none;
}
.stateTable td {
  text-align: center;
  box-sizing: border-box;
  width: 25%;
  height: 25%;
  padding: none;
}
.grid {
  width: 100%;
  height: 100%;
}
.sequence {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  margin: auto;
  vertical-align: center;
}
.matrix {
  width: 30%;
  height: 100%;
  right: 0;
  position: absolute;
  color: white;
}
.matrix .cell {
  position: relative;
  float: left;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #f3f3f3;
}
.matrix .cell .desc {
  position: relative;
}
.matrix .cell .control input {
  text-align: center;
  width: 70%;
}