body {
  touch-action: manipulation;
}
table {
  margin: auto;
  /* margin-top: 20px; */
  width: 85vmin;
  /* height: 80vh; */
  border: 10px solid transparent;
}
td {
  width: 12.5%;
  position: relative;
  border: 10px solid transparent;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
td .classic {
  background-color: #888888;
}
td .valid {
  background-color: #65a3d0;
}

td .flashYellow {
  /* background-color: #f4e895; */
  animation: 1s linear 0s flashYel;
}
td .flashGreen {
  /* background-color: #f4e895; */
  animation: 1s linear 0s flashGre;
}

td .interactive {

}
td .interactive:hover {
  background-color: #999999;
}
td .standYellow {
  background-color: #f4e895;
}
td .error {
  background-color: #d74444;
}


@-webkit-keyframes flashYel { from { background-color: #f4e895; } to { background-color: #888888; }  }
        @keyframes flashYel { from { background-color: #f4e895; } to { background-color: #888888; }  }
@-webkit-keyframes flashGre { from { background-color: rgba(160, 244, 149, 1); } to { background-color: rgba(160, 244, 149, 0); }  }
        @keyframes flashGre { from { background-color: rgba(160, 244, 149, 1); } to { background-color: rgba(160, 244, 149, 0);; }  }