body {
  touch-action: manipulation;
}
table {
  margin: auto;
  /* margin-top: 20px; */
  width: 90vmin;
  /* height: 80vh; */
  border: 10px solid transparent;
}
td {
  width: 14.286%;
  height: 14.286%;
  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 .bouton {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  color: #f4e895;
  text-align: center;
  vertical-align: middle;
}
td .btn {
  position: absolute;
  top: 20%;
  right: 20%;
  bottom: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  font-size: 2vw;
}
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 .standGreen {
  background-color: rgba(160, 244, 149, 1);
}
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);; }  }