html, body
{
	height: 100%;
	margin: 0;
	background-color: black;
}	

table, th, td
{
	border: 1px solid RGB(96,96,96);
	border-collapse: collapse;
}
th, td
{
	background-color: RGB(32,32,32);
	padding-left: 5px;
	padding-right: 5px;
}
tr
{
	color: RGB(192,192,192);
}

#p-inline
{
	display: inline-block;
	vertical-align: top;
	font-size:14px;
	cursor: pointer;
	text-align: center;
	color: RGB(24,144,248);
	position:absolute;
	right:0;
	padding-right: 15px;
}

#p-box
{
	text-align: center;	
}

#wrapper
{
	position:relative;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
	grid-template-rows: 0.4fr 1.3fr 1.1fr 1.1fr 1.1fr;
	grid-gap: 4px;
	width: 100vw;
	height: 100vh;			
}
#wrapper > div-11
{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#wrapper > div-12
{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#wrapper > div-13
{
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
#wrapper > div-14
{
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}
#wrapper > div-2
{
	grid-column: 1 / 5;
	grid-row: 2 / 3;
}
#wrapper > div-3
{
	grid-column: 1 / 4;
	grid-row: 3 / 4;
}
#wrapper > div-4
{
	grid-column: 1 / 4;
	grid-row: 4 / 5;
}
#wrapper > div-5
{
	grid-column: 1 / 4;
	grid-row: 5 / 6;
}
#wrapper > div-6
{
	grid-column: 4 / 5;
	grid-row: 3 / 6;
}

#header
{
	grid-area: header;
	background-color: RGB(48,48,48);
	padding: 4px;
	text-align: center;
	font-size: 44px;
	color: rgb(212,212,212);
}		
#header > div-311
{
	color: rgb(228,32,32);
}
#header > div-sal
{
	color: rgb(228,228,0);
}
#header > div-ven
{
	color: rgb(32,228,32);
}
#header > div-cas
{
	color: rgb(228,228,228);
}

@media only screen and (max-width: 600px)
{
	#header
	{
		grid-area: header;
		background-color: RGB(48,48,48);
		padding: 4px;
		text-align: left;
		font-size: 18px;
		color: rgb(212,212,212);
	}		
	
	#wrapper
	{
		position:relative;
		display:grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 0.3fr) repeat(4, 1.7fr);
		grid-gap: 2px;
	}
	#wrapper > div-14
	{
		grid-column: 1 / 4;
		grid-row: 1 / 2;
	}
	#wrapper > div-11
	{
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	#wrapper > div-12
	{
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
	#wrapper > div-13
	{
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}
	#wrapper > div-2
	{
		grid-column: 1 / 4;
		grid-row: 3 / 4;
	}
	#wrapper > div-3
	{
		grid-column: 1 / 4;
		grid-row: 4 / 5;
	}
	#wrapper > div-4
	{
		grid-column: 1 / 4;
		grid-row: 5 / 6;
	}
	#wrapper > div-5
	{
		grid-column: 1 / 4;
		grid-row: 6 / 7;
	}
	#wrapper > div-6
	{
		display: none!important;
	}
	
	#p-inline
	{
		display: inline-block;
		vertical-align: top;
		font-size:16px;
		cursor: pointer;
		text-align: center;
		color: RGB(24,144,248);
		position:absolute;
		right:0;
		padding-right: 4px;
	}

	#p-box
	{
		border: thin solid RGB(164,164,164);
		display: inline;
		text-align: center;	
		padding: 2px;
	}	
}