/* Sudoku colors for light and dark mode, see theme.js. */
:root {
  --sudoku-text: rgb(44,62,80);
  --sudoku-cell-bg: #fff;
  --sudoku-line: rgb(130,130,130);
  --sudoku-block-bg: rgb(236,238,240);
}

[data-bs-theme="dark"] {
  --sudoku-text: #dee2e6;
  --sudoku-cell-bg: #212529;
  --sudoku-line: #6c757d;
  --sudoku-block-bg: #2b3035;
}
html {
  -webkit-text-size-adjust: none;
}

#wrapper {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  padding: 1vw 0vw;
  width: 96vw;
  position: relative;
  overflow: hidden;
}

#sudoku {
  font-family: "Helvetica Neue", Helvetica, Arial, verdana, sans-serif;
  font-weight: 400;
  color: var(--sudoku-text);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  margin: 0 auto;
  padding: 12px 0px 0;
  position: relative;
  width: 100%;
}

#numberList {
  padding: 0;
  list-style-type: none;
  background-color: transparent;
  float: left;
  position: absolute;
  height: auto;
  right: 38vw;
  text-align: right;
  top: 5.5vw;
  width: 25vw;
}

  #numberList li {
    float: left;
    display: inline-block;
    padding: 0px 0px 0 0;
    border: none;
    z-index: 100;
    overflow: hidden;
    border-radius: 3vw;
    margin: 0.5vw 0.75vw;
    text-align: center;
  }

    #numberList li.btnNormal, #numberList li.btnDown {
      font-weight: 400;
      color: var(--sudoku-text);
      border: 1px solid var(--sudoku-text);
      cursor: pointer;
      font-size: 2vw;
      line-height: 5vw;
      height: 5vw;
      width: 5vw;
    }

table {
  border-spacing: 0;
  border: 0px solid var(--sudoku-text);
  padding: 0px;
  float: left;
  margin: 0 10px;
}

  table tr, table td {
    margin: 0;
    padding: 0;
  }

.outtbl {
  border-collapse: separate;
  border: none;
  -webkit-box-shadow: 0px 0px 0px 8px var(--bs-body-bg), 0px 0px 0px 9px var(--sudoku-text);
  -moz-box-shadow: 0px 0px 0px 8px var(--bs-body-bg), 0px 0px 0px 9px var(--sudoku-text);
  box-shadow: 0px 0px 0px 8px var(--bs-body-bg), 0px 0px 0px 9px var(--sudoku-text);
  font-family: "Helvetica Neue", Helvetica, Arial, verdana, sans-serif;
  font-weight: 500;
  empty-cells: show;
  padding: 0;
  position: relative;
  table-layout: fixed;
  text-align: center;
}

  .outtbl td {
    font-size: 1.8vw;
    position: relative;
  }

  .outtbl tr td:last-child {
    box-shadow: 0px 0px 0 var(--sudoku-line) inset, 0px -1px 0 var(--sudoku-line) inset;
    border-right: none;
  }

  .outtbl tr:last-child > td {
    box-shadow: -1px 0px 0 var(--sudoku-line) inset, 0px 0px 0 var(--sudoku-line) inset;
  }

    .outtbl tr:last-child > td:last-child {
      box-shadow: 0px 0px 0 var(--sudoku-line) inset, 0px 0px 0 var(--sudoku-line) inset;
    }

.CellBlocked, .CellInput, .CellHighlight, .CellError, .CellRight, .CellReset {
  margin: 0;
  padding: 0px;
  height: 3vw;
  width: 3vw;
  overflow: hidden;
  box-shadow: -1px 0px 0 var(--sudoku-line) inset, 0px -1px 0 var(--sudoku-line) inset;
}

.SeparatorVertical {
  width: 1px;
  border-right: 1px solid var(--sudoku-line);
}

.SeparatorHorizontal {
  height: 1px;
  box-shadow: 0px 0px 0 var(--sudoku-line) inset, 0px 1px 0 var(--sudoku-line) inset;
}

.CellInput {
  color: var(--sudoku-text);
  background-color: var(--sudoku-cell-bg);
}

.CellHighlight {
  background-color: rgba(41,128,185,.25) !important;
}

@keyframes error {
  8% {
    box-shadow: 0 0 0rem #ff0000;
    background-color: #ffc1c4;
  }

  16% {
    box-shadow: 0 0 0.6rem #ff0000;
    background-color: #ffc1c4;
  }

  24% {
    box-shadow: 0 0 -0.6rem #ff0000;
    background-color: #ffc1c4;
  }

  32% {
    box-shadow: 0 0 0rem #ff0000;
    background-color: #ffc1c4;
  }

  40% {
    box-shadow: 0 0 0.6rem #ff0000;
    background-color: #ffc1c4;
  }

  48% {
    box-shadow: 0 0 -0.6rem #ff0000;
    background-color: #ffc1c4;
  }

  56% {
    box-shadow: 0 0 0rem #ff0000;
    background-color: #ffc1c4;
  }

  60% {
    background-color: #ffc1c4
  }

  80% {
  }

  100% {
    background-color: #2980b940;
  }
}

.CellError {
  animation: error 0.9s ease-in-out 0s 1;
  background-color: #2980b940;
  z-index: 1;
}

.outtbl tr:nth-child(-n+3) td:nth-child(5), .outtbl tr:nth-child(-n+3) td:nth-child(6), .outtbl tr:nth-child(-n+3) td:nth-child(7), .outtbl tr:nth-child(5) td:nth-child(-n+3), .outtbl tr:nth-child(6) td:nth-child(-n+3), .outtbl tr:nth-child(7) td:nth-child(-n+3), .outtbl tr:nth-child(5) td:nth-child(n+8), .outtbl tr:nth-child(6) td:nth-child(n+8), .outtbl tr:nth-child(7) td:nth-child(n+8), .outtbl tr:nth-child(n+8) td:nth-child(5), .outtbl tr:nth-child(n+8) td:nth-child(6), .outtbl tr:nth-child(n+8) td:nth-child(7) {
  background-color: var(--sudoku-block-bg);
}

.col-md-10 {
  margin: 10px 0 10px 0;
}