body {
  touch-action: manipulation;
}
.progression {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vmin;
}
.progression .fas, .progression .far {
  font-size: 4vw;
}
.consigne {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 20vmin;
  /* background-color: rgba(255, 0, 0, 0.5); */
}
.figure {
  width: 126px;
  height: 126px;
  margin: auto;
}
.waitFig1 {
  background: url('../img/fig1bad.svg');
  background-size: 126px 126px;
}
.okFig1 {
  background: url('../img/fig1ok.svg');
  background-size: 126px 126px;
}
.waitFig2 {
  background: url('../img/fig2bad.svg');
  background-size: 126px 126px;
}
.okFig2 {
  background: url('../img/fig2ok.svg');
  background-size: 126px 126px;
}
.waitFig3 {
  background: url('../img/fig3bad.svg');
  background-size: 126px 126px;
}
.okFig3 {
  background: url('../img/fig3ok.svg');
  background-size: 126px 126px;
}
.figure img {
  width: 10vw;
}
table {
  margin: auto;
  /* margin-top: 20px; */
  /* height: 80vh; */
  border: 10px solid transparent;
}
td {
  position: relative;
  border: 10px solid transparent;
}
th {
  text-align: center;
  vertical-align: middle;
  color: #eee;
}
td:after {
}
td .content {
  width: 5vh;
  height: 5vh;
}
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: 1.5vw;
}
td .classic {
  background-color: #888888;
}
td .valid {
  background-color: #a9d065;
}

td .flashYellow {
  /* background-color: #f4e895; */
  animation: 1s linear 0s flashYel;
}
td .flashGreen {
  /* background-color: #f4e895; */
  animation: 1s linear 0s flashGre;
}
.checkOk {
  color: rgba(160, 244, 149, 1);
}

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;
}
.currentStep {
  display: block;
  text-align: center;
  color: #999;
  text-transform: uppercase;
}


@-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);; }  }