.disable {
  cursor:not-allowed !important;
}
.disable tr {
  pointer-events: none;
}
.Menu {
  min-height:100vh;
  margin:0;
  border-right:1px solid #ccc;
}
.Body {
  overflow-y:scroll;
  height:100vh;
}
.matrixWrap {
  width:100%;
  margin:30px 0;
  cursor:pointer;
}
.matrixColumn {
  position:relative;
  text-align:center;
  background-color:#BDBDBD;
  padding:20px 0 !important;
  color:transparent;
}
.piece {
    position: absolute;
    height: 30px;
    top: calc(50% - 15px);
    width: 30px;
    left: calc(50% - 15px);
    background-color: black;
    border-radius: 60%;
    box-shadow:1px 1px 1px black;
}
.piece-alt {
  background-color:white;
}
.Row::after {
  content: '';
  background: linear-gradient(to top,
  rgba(189, 189, 189, 0) 0%,
  rgba(189, 189, 189, 0) calc(50% - 2px),
  rgb(255, 0, 0) 50%,
  rgba(189, 189, 189, 0) calc(50% + 2px),
  rgba(189, 189, 189, 0) 100%);
  width: 110%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.Col::after {
  content: '';
  background: linear-gradient(to left,
  rgba(189, 189, 189, 0) 0%,
  rgba(189, 189, 189, 0) calc(50% - 2px),
  rgb(255, 0, 0) 50%,
  rgba(189, 189, 189, 0) calc(50% + 2px),
  rgba(189, 189, 189, 0) 100%);
  width: 100%;
  height: 110%;
  position: absolute;
  top: 0;
  left: 0;
}
.DR::after {
  content: '';
  background: linear-gradient(to top right,
  rgba(189, 189, 189, 0) 0%,
  rgba(189, 189, 189, 0) calc(50% - 2px),
  rgb(255, 0, 0) 50%,
  rgba(189, 189, 189, 0) calc(50% + 2px),
  rgba(189, 189, 189, 0) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.DL::after {
  content: '';
  background: linear-gradient(to top left,
  rgba(189, 189, 189, 0) 0%,
  rgba(189, 189, 189, 0) calc(50% - 2px),
  rgb(255, 0, 0) 50%,
  rgba(189, 189, 189, 0) calc(50% + 2px),
  rgba(189, 189, 189, 0) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.hoverB:hover::after {
    height: 30px;
    top: calc(50% - 15px);
    width: 30px;
    left: calc(50% - 15px);
    background-color: black;
    border-radius: 60%;
    position: absolute;
    z-index: 5;
    content: "";
}
.hoverW:hover::after {
    height: 30px;
    top: calc(50% - 15px);
    width: 30px;
    left: calc(50% - 15px);
    background-color: white;
    border-radius: 60%;
    position: absolute;
    z-index: 5;
    content: "";
}