#flexboard {
  display: flex;
  min-height: var(--size-3xl);
  max-height: var(--size-3xl);
  width: 100%;
  min-width: 100%;
  flex: 1;
  background-color: var(--background-color-primary);
  overflow: hidden;
}
#flexboard div,
.flex-label div {
  width: 48px;
  min-height: 48px;
  line-height: 100%;

  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-text-color);
  background-color: var(--theme-color-opposite);
  font-weight: var(--text-bold);
  font-size: var(--text-s);
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
}

.flex-label div.uneven:nth-child(1) {
  min-height: 30px;
  padding-top: 10px;
}
.flex-label div.uneven:nth-child(2) {
  min-height: 22px;
}
.flex-label div.uneven:nth-child(3) {
  min-height: 30px;
  padding-bottom: 10px;
}

.flex-label {
  display: block;
  width: 68px;
  height: 68px;
  border: 2px solid var(--border-color);
  cursor: pointer;

  overflow: hidden;
}
input[type="radio"]:focus + label,
input[type="radio"]:checked + label {
  outline: solid var(--theme-color);
  outline-offset: 2px;
  outline-width: 3px;
}
.flex-label div {
  width: 16px;
  min-height: 16px;
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
  font-weight: normal;
  font-size: 0.75rem;
}
h2 {
  font-size: var(--text-l);
}