* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 13px Helvetica, Arial;
}
form {
  background: #000;
  padding: 3px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
form input {
  border: 0;
  padding: 10px;
  width: 90%;
  margin-right: 0.5%;
}
form button {
  width: 9%;
  background: rgb(130, 224, 255);
  border: none;
  padding: 10px;
}
#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#messages li {
  padding: 5px 10px;
}
#messages li:nth-child(odd) {
  background: #eee;
}
.matrix {
  font-size: 0;
  margin-bottom: 20px;
}
.row {
  font-size: 1rem;
  width: 1000px;
  height: 40px;
  margin: 5px 0;
  display: block;
}
.col {
  height: 40px;
  width: 150px;
  margin: 0;
  display: inline-block;
  padding-top: 10px;
  vertical-align: middle;
  text-align: center;
}
.selectable {
  text-align: center;
}
.selectable:hover {
  background: lightblue;
  cursor: pointer;
}
.header-row .col {
  text-align: center;
}
.vp0 {
  background: lightcoral;
}
.vp1 {
  background: pink;
}
.vp2 {
  background: lightgoldenrodyellow;
}
.vp3 {
  background: lightgreen;
}
.vp4 {
  background: mediumseagreen;
}
.selected {
  background: lightblue;
}
.selectable.selected {
  background: lightblue;
  border: solid 2px black;
  padding-top: 8px;
}
body {
  padding: 10px;
}