body {
	min-width: 1200px ;
    font-family: Calibri;
    background-color: rgb(60, 60, 60);
    font-size: 12pt;
    color: rgb(180,180,180);
}

fieldset{
    border-color: rgb(120,120,120) ;
    border-style: solid ;
    border-width: 1pt ;
    padding-left: 6pt;
    float: left;
    margin-right: 12pt ;
}

legend {
    color: white;
}

.output {
}




canvas {
    background-color: white;
    border-style: solid;
    border-width: 1pt;
    border-color: 100,100,100;
}

input[type=text] {
    background-color: rgb(100,100,100);
    border-style: solid;
    border-width: 1pt ;
    border-color: rgb(120,120,120);
    color: white;
    padding: 3pt;
}



.bouton {
    float: left;
    margin-right: 0 ;
    padding: 6pt ;
    background-color: rgb(80,80,80);
    color: white;
    cursor: pointer;
}

.PetitBouton {
    float: left;
    margin-right: 0 ;
    padding: 6pt ;
    color: white;
    cursor: pointer;
}

.grandeur {
    
}

.boite {
    margin-left: 20%;
    padding: 12pt;
    width: 60%;
    background-color: rgb(80,80,80);
    border-style: solid;
    border-width: 1pt;
    border-color: 100,100,100;
    display: block;
}


input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  	background-color: transparent ;

}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2pt;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgb(100,100,100);
  border-radius: 0;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 12pt;
  width: 6pt;
  border-radius: 0;
  background: rgb(0,150,200);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6pt;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(100,100,100);
}
input[type=range]::-moz-range-track {
  height: 2pt;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgb(100,100,100);
  border-radius: 0;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 12pt;
  width: 6pt;
  border-radius: 0;
  background: rgb(0,150,200);
  cursor: pointer  ;
}
input[type=range]::-ms-track {
  height: 2pt;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgb(100,100,100);
  border: 0px solid #000101;
  border-radius: 0;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgb(100,100,100);
  border: 0px solid #000101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 12pt;
  width: 6pt;
  border-radius: 0px;
  background: rgb(0,150,200);
  cursor: pointer;
  margin-top: -6pt;
}

input[type=range]:focus::-ms-fill-lower {
  background: rgb(100,100,100);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgb(100,100,100);
}