/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.7.1_webpack@5.74.0/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/sass-loader@13.0.2_ec905701baee84a2da731e202f6b9201/node_modules/sass-loader/dist/cjs.js!./src/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.gameBoard {
  margin: 20px;
  width: max-content;
  padding: 10px;
}
.gameBoard__row {
  margin: 20px 0;
  display: flex;
}

.gameBoard__cell {
  margin: 0 10px;
}

.gameBoardCell {
  position: relative;
  width: 45px;
  height: 45px;
  background-color: #eeece9;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.gameBoardCell:hover {
  cursor: pointer;
}

.gameBoardMark {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  text-align: center;
}

.mark-x {
  color: black;
}
.mark-o {
  color: red;
}

.move_gamer_X .gameBoardCell:hover .mark-x,
.move_gamer_O .gameBoardCell:hover .mark-o {
  display: flex;
}

.gameBoard .cell-mark:hover {
  cursor: default !important;
}

.disable .gameBoardCell:hover {
  cursor: default !important;
}

.hidden {
  display: none;
}

.move_gamer_X {
  border-top: 8px solid black;
}

.move_gamer_O {
  border-top: 8px solid red;
}

.draw {
  border-left: 8px solid black;
  border-right: 8px solid red;
}

.cell-victory-line:before, .cell-victory-line:after {
  content: "";
  position: absolute;
  width: 3px;
}

.winner_gamer_X .cell-victory-line:after, .winner_gamer_X .cell-victory-line:before {
  background-color: black;
}

.winner_gamer_O .cell-victory-line:after, .winner_gamer_O .cell-victory-line:before {
  background-color: red;
}

.direction-vertical:before, .direction-vertical:after {
  height: calc(50% + 10px);
  transform: rotate(0deg);
  left: 50%;
}

.direction-vertical:before {
  top: 50%;
}

.direction-vertical:after {
  bottom: 50%;
}

.direction-horizontal:before, .direction-horizontal:after {
  width: calc(50% + 10px);
  height: 3px;
  top: 50%;
}

.direction-horizontal:before {
  right: 50%;
}

.direction-horizontal:after {
  left: 50%;
}

.direction-diagonal-right:before,
.direction-diagonal-right:after,
.direction-diagonal-left:before,
.direction-diagonal-left:after {
  height: 60px;
}

.direction-diagonal-right:before, .direction-diagonal-right:after {
  transform: rotate(45deg);
}

.direction-diagonal-right:before {
  left: 0;
  bottom: calc(-28.5px);
}

.direction-diagonal-right:after {
  right: 0;
  top: calc(-28.5px);
}

.direction-diagonal-left:before, .direction-diagonal-left:after {
  transform: rotate(-45deg);
}

.direction-diagonal-left:before {
  left: 0;
  top: calc(-28.5px);
}

.direction-diagonal-left:after {
  right: 0;
  bottom: calc(-28.5px);
}

.settings {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.settings__sectionWithFields {
  margin-bottom: 5px;
}
.settings__sectionWithControlButtons {
  margin-top: 5px;
}

.sectionWithFields {
  width: 88%;
  display: flex;
  flex-direction: column;
}
.sectionWithFields__subsection {
  margin-bottom: 8px;
}

.sectionWithControlButtons {
  display: flex;
  justify-content: space-between;
  height: 25px;
  width: 100%;
}

.subsectionWithFields__field {
  margin-right: 10px;
}

.buttonStartGame,
.buttonRestartGame {
  padding: 4px 0;
  width: 48%;
}
.buttonStartGame:hover,
.buttonRestartGame:hover {
  cursor: pointer;
}

.field {
  width: 35px;
  padding: 2px 4px;
}

.sectionWithChoice {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sectionWithChoice__header {
  margin-bottom: 5px;
}
.sectionWithChoice__subsection {
  margin-top: 2px;
}

.subsectionWithChoice:hover {
  cursor: pointer;
}

.descriptionForRadioButton-player-o {
  color: red;
}
.descriptionForRadioButton-player-x {
  color: black;
}

.symbol-x,
.symbol-o {
  font-weight: bold;
  text-transform: capitalize;
}

.wrapperForStatisticsAndSettings {
  margin: 10px;
  width: 220px;
}

.statistics-info {
  margin-bottom: 20px;
}

.statisticInfoSectionInfo {
  margin-bottom: 5px;
}

.statisticInfoHeaderSymbol-x {
  color: black;
}
.statisticInfoHeaderSymbol-o {
  color: red;
}
.statisticInfoHeaderSymbol-o, .statisticInfoHeaderSymbol-x {
  text-transform: uppercase;
  font-weight: bold;
}

.statisticInfoHeader,
.statisticInfoValue {
  font-size: 18px;
}

.statisticInfoSectionButtons {
  padding: 5px;
  display: flex;
  justify-content: center;
}

.buttonResetStatistics {
  width: 100%;
}
.buttonResetStatistics:hover {
  cursor: pointer;
}

.statisticInfoPlayer-o {
  color: red;
}

.root {
  display: flex;
}

/*# sourceMappingURL=main.css.map*/