html {
	font-size:10px;
}

body
	{
		background-image:url("../img/loadingbg.jpg");
		background-size:cover;
		background-repeat:no-repeat;
		/*background-color:gray;*/
	}	
/*	
#game-table {
	display:block;
	height:81vh;
	width: 100vw;
}
*/
/* Settings page*/
#header-set
	{
		display:block;
		text-align:center;
		font-size:2.5rem;
		padding:1rem 0rem 1rem;
		height: 5vh;
		width: 100vw;
		background-color:gray;
		color:blue;
	}

#setari
	{
		display:block;
		height:89vh;
		width: 100vw;	
		background-color:#C0E0EE;			
	}
#setari ul
	{
		list-style-type:none;
		padding:2% 0;

	}
	
.stanga
	{
		display:inline-block;
		text-align:center;
		font-size:2rem;
		width:100vw;
		padding:5% 0;
	}
.stanga li{
	font-size: 3rem;
	line-height: 5rem;
}

#incepe
	{
		display:none;
		margin:auto;
		font-family:serif;
		font-size:3rem;	
	}	
.incepebtn
	{
		height: 10rem;
		width: 30rem;
		font-family:serif;
		font-size:4rem;
	}	
.dreapta
	{
		display:inline-block;		
	/*	float:right;	*/	
	
		font-size:2rem;
		width:100vw;
		padding:5% 0;
	}	
.centru{
	padding:5%;
	margin:0 2%;
}	
.dreapta p
	{
		font-family:serif;
		font-size:3rem;
		text-align:center;	
		padding:2% 0;		
	}	
.dreapta ul
	{
		font-family:serif;
		font-size:2rem;	
		padding:1% 2%;
	}	
.dreapta li
	{
		padding:1% 0;	
	}	
	
#nrjc
	{
		display:block;
	}
#tipjc
	{
		display:none;
	}
#difjc	
	{
		display:none;
	}
/*Settings page*/

/*Game table*/	
#tabla
	{
		display: block;
		height:72vh;
		width: 100vw;
	}

#my_bete 
	{
		display:block;
	/*	float:left; */
		height:35vh;
		width:100vw;
		background-color:#C0E0EE;
	}

#my_tabela 
	{	
		display:block;
	/*	float:right; */
		height:35vh;
		width:100vw;
		background-color:aqua;
		padding: 0.5rem 0rem 0.5rem;
		color:blue;
	}
	
/*.tabela
	{
		font-size: 1.5rem;
		text-align: center;
		line-height: 1.7rem;
		margin:0;
	}
*/
.button_jc
	{
		visibility:hidden;
		height:2rem;
		width:1rem;
	/*	height:8rem;
		width:4rem;*/
		text-align:center;
		background-color:gray;
		color:transparent;
		font-size: 0;
		margin: 0.5rem;		
	}
	


table, td, th
	{
		
		border:0.5rem;
		border-style:solid;
		border-color:#FFFFFF;
		color:blue;
		font-size: 1rem;
		border-collapse:collapse;
		padding:0.5rem;
		margin:2rem;
		margin-left:auto;
		margin-right:auto;
		text-align: center;	
		line-height: 1.2rem;			
	}

#centered
	{
		/*padding-top:3rem;*/
		display:none;
		overflow:hidden;
		text-align:center;		
	}
#forms2{
	text-align:center;	
}

#forms4{
	text-align:center;	
}

#button_go
	{
		/*height:10rem;
		width:50rem;*/
		height: 5rem;
		width: 25rem;
		text-align:center;
		font-size: 2rem;
		/*font-size:4rem;*/		
	}

#send{
	visibility: hidden;
	height:5rem;
	width:25rem;
	text-align:center;
	font-size:2rem;
}
	

#my_comunication
	{
		display: block;
		height:5vh;	
		width:100vw;
		text-align:center;
		/*margin-top: 1rem;*/
		padding:1rem 0rem 0rem;
		font-family:serif;
		font-size:1.2rem;
		background-color:burlywood;
		color:blue;	
	}
/*pentru login*/
#popup
	{
		display:none;
		padding:10px;
		background-color:darkcyan;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		position: fixed;
		font-size: 2rem;
		z-index:9;
		border-style:solid;
		border-color:blue;
		border-width:3px;
	}
/*Game table*/



#footer-set
	{
		display:block;	
		height:4vh;
		width: 100vw;
		background-color:black;
		text-align:center;
		position: fixed;
		bottom: 0;
		padding:2rem 0 1rem;
	}
#footer-set p
	{		
		list-style-type:none;
		color:antiquewhite;
		font-size:1.5rem;
	}		
.choises{
	min-height: 2rem;
	max-height: 2rem;
	min-width: 2rem;
	max-width: 2rem;
}
/* media queries */

@media (max-width:576px),(orientation:portrait) {
	#header-set{height: 3vh;font-size: 2rem;}
	#setari{overflow-y: scroll;}
	.dreapta{overflow-y: hidden;}
	.centru{margin:0 0 7rem 0;}
	#my_bete{height:50vh;}
	.button_jc{height:4rem;width:2rem;margin: 1rem;}
	#my_tabela{height:21vh;}
	table{margin:0 auto;line-height: 1rem;width: 50vw;}
	#send{margin:0.5rem 0;height: 4rem; width:20rem;}
	#button_go{margin:0.5rem 0;height: 4rem; width:20rem;}
	#my_comunication{height:7vh;padding:0.5rem 0;font-size: 2rem;}
	#footer-set{height:4vh; padding:1rem 0 0;}
}

@media (min-width:576px) and (orientation:landscape){
	#header-set{font-size:2rem;height:8vh;padding:0.1rem 0;}
	#setari{height:90vh; width: 100vw;}
	.stanga{position:absolute;left:0;height: 50vh; width:30vw;overflow-y: scroll;}
	.choises{min-height: 1.6rem;max-height: 1.6rem;min-width: 1.6rem;max-width: 1.6rem;}
	.stanga li{font-size:2rem;line-height: 4rem;}
	.incepebtn{height:7rem;width:15rem;font-size:2rem;margin: 1rem;}
	.dreapta{position:absolute;right:0;height: 50vh; width:70vw;overflow-y: scroll;}
	
	.button_jc{height:2rem;width:1rem;margin: 0.1rem 1rem;}
	#send{height:5rem;width:20rem;margin:1rem 0}
	#button_go{height:5rem;width:20rem;margin:1rem 0}	
	/*#tabela{height:20vh;font-size: 1rem;line-height: 1.2rem;}	*/
	#my_bete{position: absolute; left:0;height:47vh;width:50vw;}
	#my_tabela{position: absolute; right:0; height:44vh;width:50vw;}
	table{margin:0 auto;line-height: 1rem;width: 30vw;}
	#my_comunication{position: absolute;top:19rem;height:7vh;font-size:1.7rem;margin-top: 1rem;padding-top:1rem;}
	#footer-set{height:5vh;}
	
}

@media (min-width:768px) and (orientation:portrait){
	#header-set{font-size:1.5rem;height:2vh;}
	#setari{height:90vh;}
	.centru{margin:1rem;}	
	/*.stanga{display:block;width:100%;}
	.dreapta{display:block;width:100%;overflow-y:;}*/
	.button_jc{height:5rem;width:2.5rem;}
	table,td,th{line-height: 3rem; font-size: 2rem;}
	#send{height:5rem;width:25rem;}
	#button_go{height:5rem;width:25rem;}

	/*#tabela{height:90vh; overflow-y: scroll;}*/
	#my_bete{height:60vh;}
	#my_tabela{height:60vh;}
    #my_comunication{font-size:2rem;margin-top: 1.5rem;padding-top:1.5rem;}

/*#footer-set{height:3vh;background-color: blueviolet;}*/
}



@media (min-width:768px) and (orientation:landscape){
	#header-set{font-size:1.5rem;height:2vh;}
	#setari{height:90vh;}
	.dreapta{padding: 0;height: 70vh;}
	/*.stanga{display:block;width:100%;}
	.dreapta{display:block;width:100%;overflow-y:;}*/
	.button_jc{height:5rem;width:2.5rem;}
	table,td,th{line-height: 3rem; font-size: 2rem;}
	#send{height:5rem;width:25rem;}
	#button_go{height:5rem;width:25rem;}

	/*#tabela{height:90vh; overflow-y: scroll;}*/
	#my_bete{height:60vh;}
	#my_tabela{height:60vh;}
    #my_comunication{font-size:2rem;margin-top: 1.5rem;padding-top:1.5rem;}
	.choises{min-height:2rem;max-height:2rem;min-width:2rem;max-width:2rem;}
	/*#footer-set{height:3vh;}*/
	
}

@media (min-width:992px){
	#header-set{font-size:2rem;height:5vh;}
	#setari{height:75vh;}
	/*.stanga{display:block;width:100%;}
	.dreapta{overflow-y:hidden;}*/
	.button_jc{height:6rem;width:3rem;}
	#send{height:10rem;width:35rem;font-size:3rem;margin: 3rem 0;}
	#button_go{height:10rem;width:35rem;font-size:3rem;margin: 3rem 0;}
	/*#tabela{height:90vh; overflow-y: scroll;}*/
	#my_bete{height: 70vh;}
	#my_tabela{height: 70vh;}
	#my_comunication{position: absolute; font-size:10rem;margin-top: 1.5rem;padding-top:1rem;top:75rem;}
	/*#footer-set{height:3vh;}*/
	/*#footer-set{background-color: blueviolet;}*/
}

@media (min-width:1200px){
	/*#header-set{font-size:1.5rem;height:2vh;}
	#setari{height:90vh;}
	.stanga{display:block;width:40%;}
	.dreapta{display:block;width:40%}*/
	.button_jc{height:7rem;width:3.5rem;}
/*	#tabla{height:90vh;}*/
	#my_bete{height: 72vh}
	#my_tabela{height: 70vh}
	#my_comunication{position: absolute; font-size:2.2rem;margin-top: 1.5rem;padding-top:1rem;top:50rem;}
	/*#footer-set{height:7vh;}*/
	


}

@media (min-width:1500px){
	#my_comunication{position: absolute; font-size:3rem;margin-top: 2rem;padding-top:1.7rem;top:84vh;}


}
/* media queries */

/* Extra small devices (phones, less than 576px) */
/* No media query since this is the default*/

/*@media (max-width: 576px) and (orientation:landscape)*/

/* Small devices (landscape phones, 576px and up)*/
/*@media (min-width: 576px) */
	

/*Small devices (tablets, 768px and up) */ 
/*@media (min-width:768px)*/ 
	
/* Medium devices (desktops, 992px and up) */ 
/*@media (min-width:992px)*/
	

/* Large devices (large desktops, 1200px and up) */ 
/*@media (min-width:1200px)*/