@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

:root {
   /* Global Variables */
   --parimaryColor: #355895;


   /* Game Screen Variables */
   --tileSelected: var(--parimaryColor);
   --tileEmpty: #eee;
   --tilePopulated: #d9d9d9;
   --fadeOutDuration: 0.3s;
}

body{
   background-image: url('../img/bg-body.png');
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   padding: 0px;
   margin: 0px;
}
.tile-number{
   display: inline-block;
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   vertical-align: middle;
   font-size: small;
   background: var(--parimaryColor);
   color: white;
   margin: 0px 3px;
   border-radius: 4px;
}
.bg-striped{
   background-image: url('../img/bg-body.png') !important;
}
.text-app-brand{
   color:var(--parimaryColor);
}
section#app{
   height: 100vh;
   margin: 0px;
}

div.screen{
	position:relative;
	width:100%;
	padding:0px;
	margin:0px;
	overflow: hidden;
	display:none;
}

div.screen > div.title{
   background-color: var(--parimaryColor);
	text-align:center;
	font-variant: small-caps;
	letter-spacing: 2pt;
	font-size:large;
	color:#fff;
   height:50px;
   line-height: 50px;
   vertical-align: middle;
}

a.screenChange, a.replay, div.title > * > a, a.screenChange:active, a.replay:active, div.title > * > a:active{
   color:white;
}

div.screen > div.title > div.back{
	position:absolute;
	left:10px;
	top:0px;
   color:white;
}
div.screen > div.title > div.forward{
	position:absolute;
	right:10px;
	top:0px;
   color:white;
}

div.container{
	/* width:91%; */
	max-width:800px;
	padding:10px;
	min-height:90vh;
}

.row-fluid{
	overflow: hidden;
}



span.elem{
	font-size:large;
	letter-spacing: 3pt;	
};



div.help{
	margin-top: 10px;
	padding:10px;
	font-size:small;
	min-height:200px;
	border-radius: 20px;
	background-color:#ffeedd;
}


div.action{
	margin-top:10px;
	text-align:center;
}

.dimension-selector > .row-fluid{
   margin-bottom:15px;
}

.gameStart{
	text-align:center;
	/*width: 75%;*/
	padding:15px 15px;
	/*height:50px;*/
	vertical-align: middle;
	border-radius: 10px;
}
#game_feedback{
	background-color:#333;
	color:#eee;
	position:absolute;
	padding:30px;
	text-align:center;
	/*top:40px;*/
	top:20%;
	left:20%;
	/*background-color:#fff;*/
	width:60%;
	display: none;
	z-index:100;
}

div.counters{
	margin:0px;
	padding:0px;
	text-align:center;
	border: solid 3px #ff0000;
	background-color:#00ff00;
	border-radius:10px;
}
div.counters > h5{
	margin:0px;
	padding:5px;
	font-size: 10pt;
	font-weight:normal;
	font-variant: small-caps;
	background-color:#333;
	color:#eee;
}
div.counters > div {
	font-size:x-large;
	font-weight: bold;
	margin:15px 5px;
}




div.inline-instructions{
   padding:20px 10px;
   /* border: solid 1px #888; */
   font-size:small;
   color:#555;
   text-align: justify;
}

#notify{
   display:none;
   position:absolute;
   bottom:-125px;
   height:125px;
   width: 100%;
   background-color: rgba(0,0,0,0.9);
   color: white;
   font-size: small;
   padding: 10px;
   text-align:center;
   overflow:hidden;
}