#rank thead .btn{padding: 0px;}

.activecol .btn {border: 1px solid black;}
.krow{clear:both;text-align:center;}
.krow:nth-child(1){margin-left: 5px;}
.krow:nth-child(2){margin-left: 6px;}
.krow:nth-child(3){margin-left: 15px;}
.krow:nth-child(4){margin-left: 23px;}
.krow-uk{clear:both;text-align:center;}
.krow-uk:nth-child(1){margin-left: 0px;}
.krow-uk:nth-child(2){margin-left: 14px;}
.krow-uk:nth-child(3){margin-left: 22px;}
.btn-l{width:37px;height:36px;line-height:25px;font-size:1.3em;color: black}

#kb{
  margin: 0px auto;
  border:1px solid black;
  text-align: center;
  overflow:auto;
  font-family: Tahoma, sans-serif;
  background-color: #ccc;
}

#kb .key-letter {
  font-size:1.5em;
}

#kb .key {
  border: 2px solid #777;
  border-radius: 5px;
  outline: none;
  display: block;
  float: left;
  background-color: #fff;
  margin: 1px;
  color: #444;
  text-decoration: none;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 36px;
}
@media (max-width: 692px) {
  #kb .key {width:38px;height:38px;font-size:1.4em;line-height:35px;}
  .krow:nth-child(1){margin-left: 2px;}
  /*#kb{background-color: blue !important;}*/
}

@media (max-width: 476px) {
  #kb .key {width:25px;height:25px;font-size:1.1em;line-height:24px;}
  .krow:nth-child(1){margin-left: 2px;}
  .krow:nth-child(2){margin-left: 2px;}
  /*#kb{background-color: red !important;}*/
}

#kb .key:hover{background-color:#c3c3c3; cursor:pointer;}
#kb .key-back {width:35px ;background-color:#ee9999;}
#kb .key-enter {width:50px;margin-left:23px;background-color:#99ee99 ;}
#kb .key-back:hover{background-color:#ff5555 !important;}
#kb .key-enter:hover{background-color:lime !important;}

.state0 .btn{background-color: #c3c3c3;}
.state-1 .btn{background-color: orange;}
.state1 .btn{background-color: lime;}
.btn-state0{background-color: #c3c3c3 !important}
.btn-state-1{background-color: orange !important}
.btn-state1{background-color: lime !important}

#gameplan .panel-body{overflow: auto;}
#gameplan{margin:0px auto;padding:2px 3px;}
#gameplan table td{padding: 1px;}

@keyframes rotate {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
.a-rotate{animation-name: rotate;
  animation-duration: 0.6s;
  animation-direction: reverse; 
}

@-webkit-keyframes bounceIn {
  0%,
  25%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.4, 0.4, 0.4);
    transform: scale3d(0.4, 0.4, 0.4);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes bounceIn {
  0%,
  25%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.4, 0.4, 0.4);
    transform: scale3d(0.4, 0.4, 0.4);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.a-hop {
  --animate-duration: 2s;
  --animate-delay: 1s;

  -webkit-animation-duration: 1.2s;
  animation-duration: 5.2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.2);
  animation-duration: calc(var(--animate-duration) * 5.2);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}