* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --borderColor--: #6e7c8c;
  --borderInsideColor--: #18010c;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttons,
#buttonNum {
  display: flex;
  justify-content: space-around;
  width: 457px;
  max-width: 457px;
}
button {
  border: 2px solid var(--borderInsideColor--);
  border-radius: 15px !important;
  background-color: inherit;
  color: #18010c;
  cursor: pointer;
  display: flex;
}
#buttonNum button {
  padding: 5px 15px;
  font-weight: 800;
  font-size: 20px;
}
button span {
  font-weight: 1000;
  font-size: 13px;
  padding: 5px 10px;
}
#sudoko {
  width: 600px;
  height: 550px;
  display: grid;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
  justify-items: center;
}
#table {
  border: 4px solid #18010c;
  width: 457px;
  height: 457px;
}

tr {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  justify-content: start;
}
th {
  border: 0.5px solid var(--borderColor--);
  width: 50px;
  height: 50px;
  font-size: 25px;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
input {
  width: 50px;
  height: 50px;
  max-width: 50px !important;
  max-height: 50px !important;
  border: 0;
  text-align: center;
  font-weight: 900;
  background-color: initial;
  cursor: pointer;
}
input[type="text"]:focus {
  outline: none;
  caret-color: transparent;
}

#hoverTh0,
#hoverTh1,
#hoverTh2,
#hoverTh3,
#hoverTh4,
#hoverTh5,
#hoverTh6,
#hoverTh7,
#hoverTh8 {
  background-color: rgba(0, 169, 255, 0.3);
}

.hoverTr0,
.hoverTr1,
.hoverTr2,
.hoverTr3,
.hoverTr4,
.hoverTr5,
.hoverTr6,
.hoverTr7,
.hoverTr8 {
  background-color: rgba(0, 169, 255, 0.3);
}

.rowTr3,
.rowTr6,
.hoverTr3,
.hoverTr6 {
  position: relative;
}
.rowTr3::before,
.rowTr6::before,
.hoverTr3::before,
.hoverTr6::before {
  position: absolute;
  content: "";
  z-index: 1;
  width: 456px;
  height: 4px;
  background-color: var(--borderInsideColor--);
  bottom: 46.98px;
  right: -3px;
}

#colTh2:nth-last-child(7),
#colTh5:nth-last-child(4),
#hoverTh2,
#hoverTh5 {
  position: relative;
}
#colTh2:nth-last-child(7)::before,
#colTh5:nth-last-child(4)::before,
#hoverTh2::before,
#hoverTh5::before {
  position: absolute;
  z-index: 1;
  content: " ";
  width: 4px;
  height: 52px;
  background-color: var(--borderInsideColor--);
  right: -3px;
  top: -2px;
}