{ margin:0; padding:0; } /* to remove the top and left whitespace */

html,body { width:100%; height:80%; } /* just to be sure these are full screen*/ 

.container{
	height:100%;
}

canvas {
  border: 1px solid black;
  display:block;
  /* width: 560px;
  height: 100%;*/
}
td {
width:10%;
}
th {
width:20px;
}
.rounded-circle{
  height: 20px;
  width: 20px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
.thick1{
	height: 20px;
 	 width: 20px;
	margin-top:-7px;
	display:inline-block;
	
}
.thick2{
	height: 15px;
 	 width: 15px;
	margin-top:-0px;
	display:inline-block;
	
}
.thick3{
	height: 10px;
  	width: 10px;
	margin-top:-1px;
	display:inline-block;
	
}
.thickness-circle
{
  background-color: #000;
  border-radius: 50%;
  display: inline-block;	
}

.table{
	width:90%;
}
.pink{
	background-color:pink;
	border: 1px solid black;
}
.blue{
	background-color:blue;
	border: 1px solid black;
}
.red{
	background-color:red;
	border: 1px solid black;
}
.black{
	background-color:black;
	border: 1px solid black;
}
.orange{
	background-color:orange;
	border: 1px solid black;
}
.purple{
	background-color:purple;
	border: 1px solid black;
}
.white{
	background-color:white;
	border: 1px solid black;
	
}
.gray{
	background-color:gray;
	border: 1px solid black;
}
.erasor{
	height: 30px;
  	width: 25px;
	background-color:#fff8f9;
	border: 1px solid black;
	border-radius:15%;
  	display: inline-block;
}