:root {
  --MatchH: 20vh;
  --BarH: 3px;
  --FontH: 5vh;
}

* {
	max-width: 100%;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	background-color: #eeeeee;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3vh;
}

.ROW_New {
	clear: both;
}

#BOX_TourneyKit {
	padding: 2rem 0 0 0;
}

.BOX_Round {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	height: 1px;
}


.BOX_Match {
	position: absolute;
	display: inline-block;
	margin: 0;
	padding: 0;
	left: 0;
	width: 100%;
	height: auto;
}
	.BOX_Match .A, .BOX_Match .B1, .BOX_Match .B2 {
		float: left;
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 0;
		border-bottom: var(--BarH) solid #000000;
	}
	.BOX_Match .A {
		width: 100%;
		height: calc(50% - var(--BarH));
	}
	.BOX_Match .B1 {
		width: 100%;
		height: calc(25% - var(--BarH));
	}
	.BOX_Match .B2 {
		border-right: var(--BarH) solid #000000;
		width: calc(100% - var(--BarH));
		height: calc(50% - var(--BarH));
	}


.BTN_Advance {
	position: absolute;
	right: -1.5vh;
	bottom: -1.5vh;
	width: 3vh;
	height: 3vh;
	border: var(--BarH) solid #00aa00;
	border-radius: 2vh;
	background-color: #ffffff;
	color: #00aa00;
	text-decoration: none;
	font-size: 3vh;
	line-height: 3vh;
	text-align: center;
	z-index: 100;
}
	.BTN_Advance:hover {
		background-color: #aaffaa;
	}

.BTN_Return {
	position: absolute;
	left: -4vh;
	bottom: -2vh;
	width: 3vh;
	height: 3vh;
	border: var(--BarH) solid #aa0000;
	border-radius: 2vh;
	background-color: #ffffff;
	color: #aa0000;
	text-decoration: none;
	font-size: 3vh;
	line-height: 3vh;
	text-align: center;
	z-index: 100;
}
	.BTN_Return:hover {
		background-color: #ffaaaa;
	}

.BTN_Random {
	position: absolute;
	right: .5vh;
	top: calc(50% - 2vh);
	width: 3vh;
	height: 3vh;
	border: var(--BarH) solid #0000aa;
	border-radius: 2vh;
	background-color: #ffffff;
	color: #0000aa;
	text-decoration: none;
	font-size: 3vh;
	line-height: 3vh;
	text-align: center;
	z-index: 100;
}
	.BTN_Random:hover {
		background-color: #aaaaff;
	}

.BTN_Logo {
	position: fixed;
	padding: .1rem;
	top: 0;
	right: 0;
	width: 50px;
	background-color: #eeeeee;
	transition: all 200ms;
	z-index: 1000;
}
	.BTN_Logo:hover {
		padding: 1rem;
		width: 500px;
	}
	
.BTN_Action {
	display: inline-block;
	margin: .5vh;
	padding: 1vh;
	border: var(--BarH) solid #0000aa;
	border-radius: 1vh;
	background-color: #ffffff;
	color: #0000aa;
	font-size: 2vh;
	font-weight: bold;
	text-decoration: none;
}
	.BTN_Action:hover {
		background-color: #aaaaff;
	}


.BTN_Name {
	position: absolute;
	margin: 0;
	padding: 0 var(--BarH);
	left: 0;
	bottom: 0;
	width: calc(100% - var(--BarH) - var(--BarH));
	color: #000000;
	font-size: var(--FontH);
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}
	.BTN_Name:hover {
		background-color: #aaaaaa;
		overflow: visible;
	}
.FLD_EditName{
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - var(--BarH) - var(--BarH));
	font-size: var(--FontH);
}


@media print {
  .BTN_Advance, .BTN_Return, .BTN_Random, .BTN_Action {
	  display: none;
  }
  .BTN_Name {
	  overflow: visible;
  }
}