div.points{
	font-weight:bold;
	font-size:large;
}

div#board{
	width:100%;
	/*border: solid 1px #ccc;*/
	overflow: hidden;
	margin:auto;
   margin-bottom:20px;
}


#boardHeading{
   text-transform: capitalize;
}

.tile{
	overflow: hidden;
	cursor: pointer;
	float:left;
	position: relative;
	margin:1px;
	border-radius: 5px;
   background-color: var(--tileEmpty);
   padding:0px;
   width:100%;
   vertical-align: middle;
	text-align:center;

   font-weight:900;
   position:relative;
   z-index: 10;
}
.tile.populated.selected{
   background-color: var(--tileSelected);
   color:white;
}

.tile.populated:not(.selected){
   background-color: var(--tilePopulated);
   color:black;
}

.tile.empty.deleted{
   animation: removed var(--fadeOutDuration) linear;
   animation-fill-mode: both;
}

.tile.empty{
	background-color: var(--tileEmpty);
}

div.progress-counter{
   margin:auto;
   height:100px;
   width:100%;
   max-width:150px;
   text-align: center;
   border: solid 2px var(--parimaryColor);
   position:relative;
}
div.pg-label{
   line-height: 25px;
   height:25px;
   vertical-align: middle;
   text-align: center;
   font-size:12px;
   text-transform: uppercase;
   /* background-color: #355895; */
   background-color: var(--parimaryColor);
   color:white;
}
div.pg-value{
   height:75px;
   font-size:35px;
   font-weight:bold;
   line-height: 75px;
   vertical-align: middle;
   position: relative;
   overflow: hidden;
}
div.currentScore{
   height:75px;
   font-size:35px;
   font-weight:bold;
   line-height: 75px;
   vertical-align: middle;
   position: relative;
   /* top:-75px; */
}
div.currentScore.showing:not(.hiding){
   /* animation: slideIn 0.5s ease-in-out 0ms forwards step-end; */
   /* top:-75px; */
   animation: slideIn 0.5s ease-in-out;
   animation-fill-mode: both;
}
div.currentScore.hiding{
   animation: slideOut 0.5s ease-in-out;
   animation-fill-mode: both;
}


@keyframes removed {
   0% {
      background-color: var(--tileSelected);
      color:rgba(255,255,255,1);
   }

   100% {
      background-color: var(--tileEmpty);
      color: rgba(0,0,0,0);
   }
}

@keyframes slideIn {
   0% {
      top:-75px
   }
   100% {
      top:0px
   }
}

@keyframes slideOut {
   0% {
      top:-75px
   }
   100% {
      top:0px
   }
}