html, body{
  width: 100%;
  height: 100%;
  margin: auto;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
body {
  background-color: #fff;
  color: white;
}
.main {
  margin: auto;
  width: 960px;
}
a {
  color: inherit;
}
.st-diagram {
  width: 100%;
  height: 100%;
  display: block;
  float: left;
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  left: 0;
  z-index: 1;
}
.st-diagram .nodes {
  pointer-events: all;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  opacity: 1;
}
.currentState {
  fill: rgba(0, 0, 0, 0.4);
  stroke: none;
  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;
}
pre {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3;
}
.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;
}

.controls {
  position: absolute;
  top: 10px;
  left: 10px;
}

.matrixInput {
  display: block;
  height: 100%;
  width: 40%;
  right: 0;
  position: absolute;
}
.matrixInput textarea{
  border: none;
  background-color: transparent;
  color: red;
  width: 100%;
  height: 100%;
  font-size: 20px;
  outline: none;
}
.matrixInput textarea.valid {
  color: white;
}
.matrix table {
  width: 100%;
  height: 100%;
  text-align: center;
  table-layout: fixed;
}
.matrix table td {
  width: 33.33%;
}
.matrix table td input {
  pointer-events: all;
  width: 80%;
}