@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.set__row {
  border-bottom: 2.5px solid black !important; /*  cadre ligne horizontal */
}

.set__col {
  border-right: 2.5px solid black !important;
}

.given /* case avec valeur */
{
  font-weight: 800;
  width:25px;
  height:25px;
  background-color: whitesmoke;
  color: black;
}

.emptyItem /* case vide */
{
  font-weight: 600;
  width:25px;
  height:25px;
  color: blue;
  background-color: #d1d8e0;
  cursor: pointer;
}

.emptyItem.selected /* case vide sélectionnée */
{
  background-color: #45aaf2;
  color: whitesmoke;
}

html {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


html body {
  height: 100%;
  width: 100%;
  /*background-image: url("images/softboy.jpg");*/
  background-repeat: no-repeat;
  /*background-size: cover;*/
  /* background-size: 100% 100%; */
}


html body #main__container 
{
	//margin-left:100px;	

	//margin-top:-80px;
	
	display: none;
	/* width: 60vh;
	height: 80vh;
	position: relative;*/
	}



#start
{
	margin-left: 500px;
	
	margin-top: 20px;	
	
	border: 0;
	font-family: "Comic Sans MS";
	width: 160px;

	line-height: 2;
	padding: 0 20px;
	font-size: 12px;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px black;
	border-radius: 5px;
	background-color: #005555;
	background-image: linear-gradient
		(
		to top left,
		rgb(0 0 0 / 0.2),
		rgb(0 0 0 / 0.2) 30%,
		transparent
		);
	box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

#restart
{
	margin-left:430px;
	
	margin-top: 50px;	
	
	border: 0;
	font-family: "Comic Sans MS";
	width: 200px;

	line-height: 2;
	padding: 0 20px;
	font-size: 12px;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px black;
	border-radius: 5px;
	background-color: #005555;
	background-image: linear-gradient
		(
		to top left,
		rgb(0 0 0 / 0.2),
		rgb(0 0 0 / 0.2) 30%,
		transparent
		);
	box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

#header__submit
{
	margin-left: -150px;
	
	margin-top: -60px;	
	
	border: 0;
	font-family: "Comic Sans MS";
	width: 140px;

	line-height: 2;
	padding: 0 20px;
	font-size: 12px;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px black;
	border-radius: 5px;
	background-color: #005555;
	background-image: linear-gradient
		(
		to top left,
		rgb(0 0 0 / 0.2),
		rgb(0 0 0 / 0.2) 30%,
		transparent
		);
	box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

html body #home #selection__level .options span:hover {
  background-color: #0097e6;
  color: white;
}

html body #home #selection__level .options span:active {
  background-color: #0097e6;
  color: white;
}

html body #home #selection__level .options span:first-child {
  color: white;
  background-color: #0097e6;
}

/*
html body #main__container #header__controls #header__submit {
  width: 33.3%;
  text-align: right;
  font-family: "Poppins";
}

html body #main__container #header__controls #header__submit span {
  border: 1px solid black;
  padding: 5px 8px;
}

html body #main__container #header__controls #header__submit span:hover {
  background-color: #27ae60;
  border-color: #27ae60;
  color: white;
  font-weight: 400;
  cursor: pointer;
}

html body #main__container #header__controls #header__submit span:active {
  padding: 4px 7px;
}
*/
html body #main__container #dotMenu {
  display: none;
  min-width: 30%;
  height: 20%;
  position: absolute;
  left: 0;
  top: 8vh;
}

html body #main__container #dotMenu > div {
  background-color: #f1f2f6;
  border: 1px solid #a4b0be;
  font-family: 'Poppins';
  font-size: 1.075rem;
  //margin-bottom: 1px;
  text-align: center;
  padding: 0.2rem 0;
  cursor: pointer;
}

html body #main__container #dotMenu > div:not(:last-child):hover {
  background-color: #a4b0be;
  color: white;
}

html body #main__container #dotMenu > div:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

html body #main__container #dotMenu #solver {
  position: relative;
  padding: 0;
}

html body #main__container #dotMenu #solver span {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.2rem 0;
}

html body #main__container #dotMenu #solver span:after {
  content: "Solver ▷";
}

html body #main__container #dotMenu #solver span:hover, html body #main__container #dotMenu #solver span:focus {
  background-color: #a4b0be;
  color: white;
}

html body #main__container #dotMenu #solver span:hover:after, html body #main__container #dotMenu #solver span:focus:after {
  content: "Solver ▶";
  color: black;
}

html body #main__container #dotMenu #solver #solverMenu {
  display: none;
  position: absolute;
  left: 102%;
  top: -1%;
  min-width: 100%;
}

html body #main__container #dotMenu #solver #solverMenu div {
  background-color: #f1f2f6;
  border: 1px solid #a4b0be;
  font-family: 'Poppins';
  font-size: 1.075rem;
  //margin-bottom: 1px;
  text-align: center;
  padding: 0.2rem 0;
  cursor: pointer;
}

html body #main__container #dotMenu #solver #solverMenu div:hover {
  background-color: #a4b0be;
  color: white;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox] + label {
  display: block;
  margin: 0.1rem;
  cursor: pointer;
  padding: 0.1rem;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox] {
  display: none;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2rem;
  display: inline-block;
  width: 0.7rem;
  height: 0.7em;
  padding-left: 0.3rem;
  padding-bottom: 0.6rem;
  padding-right: 0.2rem;
  //margin-right: 0.5rem;
  vertical-align: bottom;
  color: transparent;
  -webkit-transition: .2s;
  transition: .2s;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox] + label:active:before {
  -webkit-transform: scale(0);
          transform: scale(0);
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox]:disabled + label:before {
  -webkit-transform: scale(1);
          transform: scale(1);
  border-color: #aaa;
}

html body #main__container #dotMenu #solver #solverMenu div input[type=checkbox]:checked:disabled + label:before {
  -webkit-transform: scale(1);
          transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

html body #main__container #board /* pourtour  haut et gauche*/
{
  width: 60vh;
  height: 60vh;
  font-family: "Ubuntu";
  /*border-top: 2.5px solid black;
  border-left: 2.5px solid black;*/
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto auto auto auto auto auto auto;
      grid-template-columns: auto auto auto auto auto auto auto auto auto;
  -ms-grid-rows: auto auto auto auto auto auto auto auto auto;
      grid-template-rows: auto auto auto auto auto auto auto auto auto;
}

html body #main__container #board .grid__item /* grille */
{
  border-right: 1px solid rgba(0, 0, 0, 0.7); /* ligne vertical */
  border-bottom: 1px solid rgba(0, 0, 0, 0.7); / * ligne horizontal */
}

html body #main__container #keypad 
{
  width: 80%;
  height: 4vh;
  //margin-top: -100px;
  //margin-left:-50px;
  font-family: "Red Rose";
  font-weight: bold;
    text-align: center;
}

html body #main__container #keypad .keypad__item /* rond en bas */
{
  height: 80%;
  width: 8%;
  //margin-right: 1%;
  //margin-left: 1%;
  border: 3px solid #FF8844;
  border-radius: 50%;
  text-align: center;
  background-color: #CCCCFF;
  cursor: pointer;
}

html body #main__container #keypad .keypad__item:hover {
  border: 3px solid #FF8844;
  background-color: #45aaf2;
  font-weight: 600;
}

html body #main__container #keypad .keypad__item:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
  outline: none;
}

html body #home {
  display: block;
  position: relative;
  width: 60vh;
  height: 60vh;
  //border-radius: 0.25rem;
}

html body #home #header {
  height: 30%;
  font-size: 4rem;
  //margin-top:-80px;
  text-align: center;
  font-family: 'Recursive';
  
}

html body #home .selection {
  font-size: 1rem;
  width: 200px;
  height: 200px;

  vertical-align: middle;
}

html body #home .selection .title {
	//margin-top:-220px;
		//margin-left:50px;
  width: 400px;

  	font-family: "Comic Sans MS";	
	font-weight: bold;
	text-align: left;
		
	font-size: 18px;

	color: #0;		
	text-shadow: 1px 1px 1px #00CCCC;
}

html body #home .selection .options {
//margin-top:-100px;
	//margin-left:-200px;
	
  width: 70%;
}

html body #home #selection__size .options {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

html body #home #selection__size .options svg:hover {
  cursor: pointer;
  color: #047cbd;

}

html body #home #selection__size .options span:first-child {
	
  color: #0097e6;
}

html body #home #selection__level .options span 
{
  //border: 3px solid black;
    //border-radius: 0.25rem;
  //padding: 0.3rem 0.5rem;

	line-height: 2.2;
	padding: 4px 40px;
	font-size: 12px;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px black;
	border-radius: 5px;
	background-color: #005555;
	background-image: linear-gradient
		(
		to top left,
		rgb(0 0 0 / 0.2),
		rgb(0 0 0 / 0.2) 30%,
		transparent
		);
	box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);

  //cursor: pointer;

}



h1 
{
	font-family: "Comic Sans MS";
	font-style: italic;	
	text-align: left;
	margin-left: 50px;		
	margin-top: 0px;	
	//margin-bottom: 5px;
	font-weight: bold;
	font-size: 30px;
	color: white;	
}
h2
{
	font-family: "Comic Sans MS";	
	font-weight: bold;
	text-align: left;
	font-size: 22px;
	margin-top: 0px;	
	margin-left: 400px;		
	color: #0;	
	text-shadow: 1px 1px 1px #00CCCC;	
}
h3
{
	font-family: "Comic Sans MS";	
	font-weight: bold;
	text-align: left;
	margin-left: 80px;		
	font-size: 18px;
	margin-top: 0px;	
	color: #0;		
	text-shadow: 1px 1px 1px #00CCCC;	
}

td
{
	width:28px;
	height:28px;
}

/* agrandissement si petite fenetre
@media only screen and (max-width: 600px) 
{
  html body {
    height: 100vh;
    background-size: 100vw 100vh;
  }
  html body #main__container {
    width: 100vw;
  }
  html body #main__container #header__controls {
    width: 100vw;
    padding: 0 2vw;
  }
  html body #main__container #board {
    //margin-left: auto;
    //margin-right: auto;
    width: 96vw;
    height: 100vw;
  }
  html body #main__container #keypad {
    //margin-left: auto;
    //margin-right: auto;
    width: 96vw;
  }
  html body #main__container #keypad .keypad__item {
    height: 8vw;
    width: 8vw;
  }
  html body #home {
    width: 90vw;
  }
  html body #home .selection .options {
    width: 100%;
  }
  html body #home #header #start {
    //margin-bottom: 1.5rem;
  }
}
*/

.d-block {
  display: block !important;
}

.green {
  color: purple;
}

.solverHover {
  background-color: #a4b0be;
  color: white;
}