body {
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	color: #fff;
	font-size: 20px;
	width: 100%;
	height: 100%;
	background: #38425c;
}

html, .boards-load-cnt {
	width: 100%;
	height: 100%;
}

* {
	box-sizing: border-box;
}

.container {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.container .head-bar-cnt {
	width: 100%;
	height: 6%;
	float: left;
}

.container .head-bar {
	width: 100%;
	height: 100%;
	text-shadow: #000 2px 2px 0;
}

.container .head-bar .left,
.container .head-bar .right {
	width: 70%;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	padding: .4vw .8vw 0 .8vw;
	font-size: 2vw;
}

.container .head-bar .right {
	justify-content: flex-end;
	font-size: 2.8vw;
	width: 30%;
}

.container .boards {
	width: 100%;
	height: 94%;
	float: left;
	padding: .3vw;
}

.board-cnt {
	width: 33.333333%;
	height: 33.333333%;
	float: left;
	padding: .3vw;
}

.matrix-4 .board-cnt {
	width: 50%;
	height: 50%;
}

.matrix-1 .board-cnt {
	width: 100%;
	height: 100%;
}

.board {
	width: 100%;
	height: 100%;
	background: #000;
	position: relative;
}

.board .break,
.board .finish {
	width: 100%;
	height: 85%;
	bottom: 0;
	background: url('../images/black-overlay.png?v=4');
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8vw;
}

.board .finish div,
.board .break div {
	width: 100%;
	line-height: 1.4;
	text-align: center;
	font-weight: normal;
}

.board .finish div b.yellow {
	color: #ffde00;
}

.board .finish div label {
	padding: .8vw;
	font-size: 3vw;
	font-weight: bold;
	line-height: 2.2;
	background: white;
	color: #000;
}

.board .finish div label.innings {
	font-size: 2.6vw;
	background: none;
	color: white;
}

.board .finish div label.yellow {
	background: #ffde00;
}

.board .break {
	height: 42%;
	font-size: 2.5vw;
}

.board.ad {
	background: none;
	/* background-color: #132749; */
	background: #000;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.board .names {
	width: 100%;
	height: 15%;
	float: left;
	background: #132749;
}

.board .names .name {
	width: 49.7%;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	padding: .2vw .8vw 0 .8vw;
	font-size: 1.4vw;
	background: white;
	color: #000;
	margin: 0 .3% 0 0;
	white-space: nowrap;
	overflow: hidden;
}



.board .names .name.right {
	justify-content: flex-end;
	margin: 0 0 0 .3%;
	background: #ffde00;
}

.board .content {
	width: 100%;
	height: 85%;
	float: left;
	padding: .5vw;
}

.board .header {
	width: 100%;
	height: 15%;
	float: left;
	font-size: 1.5vw;
	background: #0f254f;
	position: relative;
}

.board .header .left {
	height: 100%;
	float: left;
	padding: .1vw .8vw 0 .8vw;
	background: #cc2727;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .15vw;
	text-shadow: #000 1px 1px 0;
	position: absolute;
	z-index: 3;
}

.board .header .right {
	height: 100%;
	font-weight: normal;
	padding: .1vw .8vw 0 .8vw;
	font-size: 1.3vw;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.board .player {
	width: 40%;
	height: 85%;
	float: left;
}

.board .player .score {
	width: 100%;
	height: 64%;
	margin-bottom: 2%;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5.5vw;
	background: #0f254f;
	text-shadow: #000 2px 2px 0;
	position: relative;
}

.board .player .score .timeouts {
	width: 5.5%;
	position: absolute;
	left: 5%;
	top: 5%;
}

.board .player.right {
	color: #ffde00;
}

.board .player .score .ball {
	position: absolute;
	width: 1.6vw;
	top: 5%;
	right: 5%;
}

.board .player.right .score .ball {
	right: auto;
	left: 5%;
}

.board .player.right .score .timeouts {
	width: 5.5%;
	position: absolute;
	left: auto;
	right: 5%;
	top: 5%;
}

.board .player .score .timeouts span {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 50%;
	background: #4eb81a;
	border-radius: 50%;
}

.board .player .score .timeouts span.fill {
	background: #fff;
	opacity: .3;
}

.board .player .line1,
.board .player .line2 {
	width: 100%;
	height: 15%;
	margin-bottom: 2%;
	float: left;
	padding: .8vw;
	font-size: 1.5vw;
	display: flex;
	align-items: center;
	background: #0f254f;
	justify-content: center;
	position: relative;
}

.board .player .line2 {
	background: none;
	padding: 0;
}

.board .player .line2 div {
	background: #0f254f;
	width: 49%;
	margin: 0 1% 0 0;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.board .player .line2 small {
	position: absolute;
	top: 15%;
	left: 6%;
	font-size: .7vw;
	font-weight: normal;
}

.board .player .line2 div.right {
	margin: 0 0 0 1%;
}

.board .player .line1 small {
	position: absolute;
	top: 15%;
	left: 3%;
	font-size: .7vw;
	font-weight: normal;
}

.board .middle {
	width: 20%;
	height: 85%;
	float: left;
}

.board .middle .innings,
.board .middle .run {
	width: 100%;
	height: 56%;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
}

.board .middle .run {
	height: 44%;
}

.board .middle .run.yellow {
	color: #ffde00;
}

.board .middle .run div,
.board .middle .innings div {
	text-align: center;
}

.board .middle .run small,
.board .middle .innings small {
	font-size: .8vw;
	line-height: 1;
}

.board .middle .run b {
	font-size: 2.8vw;
	line-height: 1;
}

.board .middle .innings b {
	font-size: 3.6vw;
	font-weight: normal;
	border-bottom: 1px solid #fff;
	line-height: 1;
}


.matrix-1 .board .names .name {
	font-size: 4.3vw;
}

.matrix-1 .board .player .score {
	font-size: 19vw;
}

.matrix-1 .board .player .score .ball {
	width: 2.6vw;
}

.matrix-1 .board .player .line1,
.matrix-1 .board .player .line2 {
	font-size: 4vw;
}

.matrix-1 .board .player .line1 small,
.matrix-1 .board .player .line2 small {
	font-size: 1.5vw;
}

.matrix-1 .board .middle .run small,
.matrix-1 .board .middle .innings small {
	font-size: 2.2vw;
}

.matrix-1 .board .middle .run b {
	font-size: 8vw;
}

.matrix-1 .board .middle .innings b {
	font-size: 10vw;
}

.matrix-1 .board .header {
	font-size: 4.5vw;
}

.matrix-1 .board .header .right {
	font-size: 4vw;
}

.matrix-1 .board .break,
.matrix-1 .board .finish {
	font-size: 3.5vw;
}