uccser/cs-field-guide

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  line-height:30px;
}

.flex-item {
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 auto;
  height:auto;
}

.flex-item:before {
  content:'';
  float:left;
  padding-top:100%;
}

.parity-card {
  border: 2px solid #929292;
  background: white;
  margin: 1px;
  border-radius: 6px;
}

.black {
  background: black;
}

.parity-bit {
  border-color: #2196F3;
}

.correct-bit {
  border-color: #4CAF50 !important;
}

#interactive-parity-feedback {
  margin: 0;
  padding: 10px 0;
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: #4CAF50;
  font-weight: 500;
}

#interactive-parity-feedback.error {
  color: red;
}

select {
  border: 1px solid #929292;
}

$grid-label-size: 2rem;
#interactive-parity-grid-container{
  display: grid;
  grid-template-columns: $grid-label-size 1fr;
  grid-template-rows: $grid-label-size 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "interactive-parity-grid-axis-intersection interactive-parity-grid-x-labels"
    "interactive-parity-grid-y-labels interactive-parity-grid";
}
#interactive-parity-grid-axis-intersection {
    grid-area: interactive-parity-grid-axis-intersection;
}
#interactive-parity-grid-x-labels {
    grid-area: interactive-parity-grid-x-labels;
    flex-direction: row;
}
#interactive-parity-grid-y-labels {
    grid-area: interactive-parity-grid-y-labels;
    flex-direction: column;
}
.interactive-parity-grid-labels {
    display: flex;

    & > div {
        cursor: pointer;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.interactive-parity-grid-labels-text {
        font-size: 1.5rem;
        font-family: monospace;
        font-weight: bold;
        color: #aaa;
        line-height: 0;
        visibility: hidden;
        user-select: none;
    }
    &.text-visible div.interactive-parity-grid-labels-text {
        visibility: visible;
    }
}


#interactive-parity-grid {
  grid-area: interactive-parity-grid;
  cursor: cell;
  position: relative;
  z-index: 60;

  .circler {
    position: absolute;
    margin: -3px;
    border: 6px solid red;
    border-radius: 6px;
    pointer-events: none;
    visibility: hidden;
    z-index: 80;
  }
}

#interactive-parity-grid-confusation {
  grid-area: interactive-parity-grid;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#interactive-parity-grid-confusation-text {
  text-align: center;
  flex: none;
  color: white;
  font-size: 2rem;
}

.interactive-parity-controls p,
.interactive-parity-text,
#interactive-parity h4 {
  text-align: left;
}

input,
.form-check-label {
    cursor: pointer;
    user-select: none;
}

#interactive-parity.hide-text {
    h4,
    .interactive-parity-text {
        display: none;
    }
}