/* braille keyboard */
section.key {
  text-align: center;
}

section.key>div {
  transition: .25s;
  max-height: 0;
  padding: 0 1em;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
}

/* .key .braille { */
body.analyze.braille .key .braille {
  border-top: 1px solid #ddd;
  display: block;
  padding: 1em 1em;
  max-height: 1000px;
  max-height: inherit;
  visibility: visible;
  opacity: 1;
}

.key .braille table {
  margin: auto;
}

.key .braille input[type="checkbox"]:checked+label, input[type="radio"]:checked+label {
  padding: 0;
  border: 0;
  background: none;
}

.key .braille input[type="checkbox"]+label::before, input[type="radio"]+label::before {
  content: "radio_button_unchecked";
  line-height: 24px;
  margin: 0;
}

.key .braille input[type="checkbox"]:checked+label::before, .key .braille input[type="radio"]:checked+label::before {
  content: "radio_button_checked";
  color: #f44336;
}

.key .braille button,
.key .braille input[type="button"] {
  background: #f44336;
}

.key .braille button:hover,
.key .braille input[type="button"]:hover {
  background: #e57373;
}

@media handheld, only screen and (max-width: 600px) {
  body.analyze footer {
    margin-bottom: 150px;
  }

  section.key {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #fff;
    box-shadow: 0 -2px 6px 0 rgba(60, 64, 67, .15);
    z-index: 31;
  }
}