body {
  touch-action: manipulation;
}
table {
  margin: auto;
  /* margin-top: 20px; */
  width: 88vw;
  /* height: 80vh; */
  border: 10px solid transparent;
  border-collapse: separate;
  /* border: 10px solid #FFF; */
}
td {
  position: relative;
  border: 10px solid transparent;
  text-align: center;
  vertical-align: middle;
  width: 8vw;
  height: 8vw;
  border-radius: 1vw;
  /* border: 1px solid #FFF; */
}
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.capsule {
  font-size: 3em;
}
td.classic {
  background-color: #f4e895;
}
td.valid {
  background-color: #65a3d0;
}
td.chariot {
  border-color: #65a3d0;
  border-left: 11px solid #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);; }  }


.c-buttons {
  display: flex;
  flex-direction: row;
  /* align-items: flex-start; */
  justify-content: space-around;
  width: 450px;
  margin: 3rem auto;
}
.o-btn {
  position: relative;
  display: block;
  margin: 0.5rem 0;
  padding: 0.6em 1.8em 0.9em;
  border: none;
  background-color: #FFBA57;
  font-family: monospace;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #222;
  box-shadow: inset 0.1em -0.2em 0 4px #FF5857, inset -0.1em -0.2em 0 4px #FF5857, inset 0.08em -0.18em 0 5px #bd0100, inset -0.08em -0.18em 0 5px #bd0100, 0 0.25em 0 0.15em rgba(0, 0, 0, 0.2);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: all 90ms ease-in-out;
}
.o-btn:active {
  padding: 0.7em 1.8em 0.8em;
  box-shadow: inset 0.05em -0.15em 0 4px #FF5857, inset -0.05em -0.15em 0 4px #FF5857, inset 0.03em -0.13em 0 5px #bd0100, inset -0.03em -0.13em 0 5px #bd0100, 0 0.25em 0 0.15em rgba(0, 0, 0, 0.2);
  outline: none;
}
.o-btn:focus {
  outline: none;
}