body, html{
  margin:0;
  padding:0;
}


canvas {
 /* padding: 10;
*/
 /*padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
 */
 display: grid;

 margin-top: 0;
 margin-bottom: 20;


}
canvas > * {
  grid-column-start: 1;
  grid-row-start: 1;
  justify-self:center;
}

canvas > *:last-child {
  justify-self: right;
}


#textCanvas {
  background-color: #2F4F4F;
  color: white;
  margin-left: 10;
  margin-right: 10;
  margin-bottom: 0%;
  margin-top: 0%;
  padding-top: 20;
 /* padding-bottom: 20;*/
  font-weight: lighter;
  text-align: center;}






/*
#canvas {
  transform-origin: bottom;


  align-self: flex-end;

  margin-bottom: 75 ;

*/

  /*flex: none;
  display: flex;
  margin-left: 10;
*/
/*display:inline-block;
height: 0%;
position: relative;
bottom: 0;*/
/*height: 0%;
width: auto;*/
/*align-self: center;*/

/*}*/


html   {
  font-family: Arial, Helvetica, sans-serif;
  color:dimgrey;
 /* font-weight: lighter;*/
}


#canvas{
clip-path: inset(20px 0px 0px 0px);
}


.cardImages {
  margin-left: 10;
  margin-right: 10;
  display: flex;
  justify-content:center;
  background-color: #2F4F4F  ;
}


.page-footer {
  overflow: visible; 
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  padding-bottom: 15px;
  background-color: #ea484e;
}






.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}



.disabledSlider:hover {
  opacity: .25;
  cursor: default;
}


.disabledSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: red;
  outline: none;
  opacity: 0.25;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: default;

}


.disabledSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: gray;
  cursor: default;

}


.disabledSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: gray;
  cursor: default;

}

.chart {
  max-width: 400px;
  max-height: 400px;
/*
  margin-left: 0;
  margin-right: 0;
  display: flex;*/
  justify-content: right;


  right: 0 ;
  align-self: center;
 /* padding-bottom: 0;
  margin-left: 0;
  padding-right: 0;*/
}


#checkboxParent {

  position: absolute;
  left: 40%;
  margin-left: 20;
  color: #33b5e5;


}


#checkboxText {
  color: #33b5e5;
}



.disabledCheckbox {
  opacity: .25;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: default;
}

.checkboxParent {
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: pointer ;
}





#checkboxSoundParent {
position: absolute;
right: 0 ;
margin-right: 25;


}

/*
#checkboxSoundText {
}
*/