body { text-align: center; padding: 0; margin: 0; user-select: none; }
h2 { color: darkgreen; }

.card {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid gray;
	width: 148px; /* Plus 2 x 1px border = 150px */
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	position: absolute;
}

div.Host 
{
	box-shadow: 4px 4px 4px lightgray;

}
div.Guest
{
	box-shadow: 3px 3px 3px lightgray;
	/* background-image: url("./images/yellow-fill.jpg"); */
	background-color: #c8ffc8; /* mint green */
}

div.single
{
/*	height: 45px;  47px w borders x 2 = 94 + 6px spacer = 100 */
	height: 25px;
}

div.double
{
/*	height: 98px; /* plus 2 * 1px borders = 100px */
	height: 58px;
}

div.cohost
{
	color: blue;
}

#error_box 
{ 
	padding: 30px; max-width: fit-content; margin-left: auto; margin-right: auto;
	border: 1px solid gray; background-color: #feedea;
}

#position-test
{
	position:absolute;
	bottom: 0; right: 0;
	width: 250px;
	height: 80px;
}

div.sb
{
	position:absolute;
	bottom: 20px;
	height: 20px;
}

div.b, div.l, div.r {
	position: absolute;
}	
	
div.b0, div.l0, div.r0 { background-color: red; }
div.b1, div.l1, div.r1 { background-color: orange; }
div.b2, div.l2, div.r2 { background-color: yellow; }
div.b3, div.l3, div.r3 { background-color: green; }
div.b4, div.l4, div.r4 { background-color: blue; }
div.b5, div.l5, div.r5 { background-color: indigo; }
div.b6, div.l6, div.r6 { background-color: violet; }

div.picked { 
	background-color: #feedea;
}

button {
	position: absolute;
	font-size: large;
}

#start-auto-match {
	box-shadow: 4px 4px 4px lightgray;
	position: absolute;
	top: 20px;
	left: 20px;
}