/**
    * Generic empty page for class, common page, form validation page
    * @author F Spalter - June 2020
    * @version 1.0 	
	* ======================================================	
	* stylesheet class definition
    */	  

.redCircle	{
	display:inline-block;
	text-align:center;
	width: 25px;
	height: 25px;
	color: #fff;
	border-radius: 50%;
	background-color: red;
	padding-top:3px;
	margin :auto;
}
.orangeCircle	{
	display:inline-block;
	text-align:center;
	width: 25px;
	height: 25px;
	color: #fff;
	border-radius: 50%;
	background-color: orange;
	padding-top:3px;
	margin :auto;
}
.greenCircle	{
	display:inline-block;
	text-align:center;
	width: 25px;
	height: 25px;
	color: #fff;
	border-radius: 50%;
	background-color: green;
	padding-top:3px;
	margin :auto;
}
.blueCircle	{
	display:inline-block;
	text-align:center;
	width: 25px;
	height: 25px;
	color: #fff;
	border-radius: 50%;
	background-color: blue;
	padding-top:3px;
	margin :auto;
}
.greyCircle	{
	display:inline-block;
	text-align:center;
	width: 23px;
	height: 23px;
	color: #fff;
	border-radius: 50%;
	background-color: grey;
	padding-top:3px;
	margin :auto;
}
.blackCircle	{
	display:inline-block;
	text-align:center;
	width: 25px;
	height: 25px;
	color: #fff;
	border-radius: 50%;
	background-color: black;
	padding-top:3px;
	margin :auto;
}
.blackSquare {
	display: inline-block;
	text-align:center;
	border-style: solid;
	border-color: black;	
	width: 25px;
	height: 25px;	
	margin :auto;	
}
.strike-square {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #353935;
  position: relative;
  text-align: center;
  line-height: 25px;
  font-family: sans-serif;
}
.square-number {
  color: red;
  font-size: 25px;
  text-shadow: 0 0 4px white, 0 0 8px white;
  z-index: 2;
  position: relative;
}
.strike-square::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, transparent 45%, rgba(255,255,255,0.5) 50%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.rond {
  height: 25px;
  width: 25px;
  background-color: #ff0000;
  color: #ffff00;
  border-radius: 50%;
  display: inline-block;
}
.circle{
  background-color:blue;
  display:block;
  height:50px;
  width:50px;
  border-radius:50%;
  border:5px solid #000;
  margin:auto;
  color:#fff;
  line-height:50px;
  text-align:center