@charset "utf-8";


#grid-container {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row {
  display: flex;
}

.cell {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell.filled {
  background-color: #efefef;
}

.cell.selected {
  background-color: #aaf;
}

#grid-container1 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row1 {
  display: flex;
}

.cell1 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell1.filled1 {
  background-color: #efefef;
}

.cell1.selected1 {
  background-color: #aaf;
}

#grid-container2 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row2 {
  display: flex;
}

.cell2 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell2.filled2 {
  background-color: #efefef;
}

.cell2.selected2 {
  background-color: #aaf;
}

#grid-container3 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row3 {
  display: flex;
}

.cell3 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell3.filled3 {
  background-color: #efefef;
}

.cell3.selected3 {
  background-color: #aaf;
}

#grid-container4 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row4 {
  display: flex;
}

.cell4 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell4.filled4 {
  background-color: #efefef;
}

.cell4.selected4 {
  background-color: #aaf;
}

#grid-container5 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row5 {
  display: flex;
}

.cell5 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell5.filled5 {
  background-color: #efefef;
}

.cell5.selected5 {
  background-color: #aaf;
}

#grid-container6 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row6 {
  display: flex;
}

.cell6 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell6.filled6 {
  background-color: #efefef;
}

.cell6.selected6 {
  background-color: #aaf;
}

#grid-container7 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row7 {
  display: flex;
}

.cell7 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell7.filled7 {
  background-color: #efefef;
}

.cell7.selected7 {
  background-color: #aaf;
}

#grid-container8 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row8 {
  display: flex;
}

.cell8 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell8.filled8 {
  background-color: #efefef;
}

.cell8.selected8 {
  background-color: #aaf;
}

#grid-container9 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row9 {
  display: flex;
}

.cell9 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell9.filled9 {
  background-color: #efefef;
}

.cell9.selected9 {
  background-color: #aaf;
}

#grid-container10 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row10 {
  display: flex;
}

.cell10 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell10.filled10 {
  background-color: #efefef;
}

.cell10.selected10 {
  background-color: #aaf;
}

#grid-container11 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row11 {
  display: flex;
}

.cell11 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell11.filled11 {
  background-color: #efefef;
}

.cell11.selected11 {
  background-color: #aaf;
}

#grid-container12 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row12 {
  display: flex;
}

.cell12 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell12.filled12 {
  background-color: #efefef;
}

.cell12.selected12 {
  background-color: #aaf;
}

#grid-container13 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row13 {
  display: flex;
}

.cell13 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell13.filled13 {
  background-color: #efefef;
}

.cell13.selected13 {
  background-color: #aaf;
}

#grid-container14 {
  display: block;
  grid-template-columns: repeat(4, 1fr);
}

.row14 {
  display: flex;
}

.cell14 {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.cell14.filled14 {
  background-color: #efefef;
}

.cell14.selected14 {
  background-color: #aaf;
}

.jiacu_top {
  border-top: 3px solid;
}
.jiacu_left {
  border-left: 3px solid;
}
.jiacu_right {
  border-right: 3px solid;
}
.jiacu_bottom {
  border-bottom: 3px solid;
}