/* Colors */
:root {
	--color-red: #e60000;
	--color-orange: #f60;
	--color-yellow: #b2b300;
	--color-green: #093;
	--color-blue: #00f;
	--color-purple: #909;
	--color-brown: #630;
	--color-white: #aaa;
	--color-pink: #e88997;
	--color-aqua: #0ab398;

	--color-table1: var(--color-white);
	--color-table2: var(--color-white);
	--color-table3: var(--color-white);
	--color-table4: var(--color-white);
	--color-table5: var(--color-white);
	--color-table6: var(--color-white);
	--color-table7: var(--color-white);
	--color-table8: var(--color-white);
	--color-table9: var(--color-white);
	--color-table10: var(--color-white);
	--color-table11: var(--color-white);
	--color-table12: var(--color-white);
	--color-table13: var(--color-white);
	--color-table14: var(--color-white);
	--color-table15: var(--color-white);
	--color-table16: var(--color-white);
}
.bg-red { background-color: var(--color-red); }
.bg-orange { background-color: var(--color-orange); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-green { background-color: var(--color-green); }
.bg-blue { background-color: var(--color-blue); }
.bg-purple { background-color: var(--color-purple); }
.bg-brown { background-color: var(--color-brown); }
.bg-white { background-color: var(--color-white) !important; }
.bg-pink { background-color: var(--color-pink); }
.bg-aqua { background-color: var(--color-aqua); }

.table1 { background-color: var(--color-table1) !important; }
.table2 { background-color: var(--color-table2) !important; }
.table3 { background-color: var(--color-table3) !important; }
.table4 { background-color: var(--color-table4) !important; }
.table5 { background-color: var(--color-table5) !important; }
.table6 { background-color: var(--color-table6) !important; }
.table7 { background-color: var(--color-table7) !important; }
.table8 { background-color: var(--color-table8) !important; }
.table9 { background-color: var(--color-table9) !important; }
.table10 { background-color: var(--color-table10) !important; }
.table11 { background-color: var(--color-table11) !important; }
.table12 { background-color: var(--color-table12) !important; }
.table13 { background-color: var(--color-table13) !important; }
.table14 { background-color: var(--color-table14) !important; }
.table15 { background-color: var(--color-table15) !important; }
.table16 { background-color: var(--color-table16) !important; }


body {
	font-family: "Roboto", sans-serif; /* Set Roboto as the default font */
	overflow: hidden;
}


.h-100-vh { height: 100vh; }

/* Teams Display */
#teams {
	width: 200px;
	display: none;
}

body:not(.display-scores) #teams {
	background-color: #333;
}

#teams > .d-flex:first-child > div {
	font-size: calc(8vh);
	font-weight: 700;
	line-height: calc(8vh/2);
	max-height: 150px;
	color: #fff;
}

#clock {
	font-size: 90px;
	font-weight: 700;
	height: 90px;
	line-height: 45px;
	visibility: hidden;
	color: #fff;
}

body.fullwidth #teams, body.display-scores #teams { 
	width: 100%;
}

body.largeclock #teams #clock {
	height: calc(100% - 200px);
	font-size: 850px;
}

/* Scores Display */
body.display-scores #teams > .d-flex:first-child > div {
	margin-left: calc(8vw) !important;
	margin-right: calc(8vw) !important;
}

#teams .score {
	display: none;
}

body.display-scores #teams .score {
	display: block;
}

body.fullwidth.display-scores #teams {
	background-color: #333;
}

/* Logo Display */
#logo {
	width: 100%;
	background-color: #fff;
	display: none;
}

/* Rankings Display */
#rankings {
	width: 100%;
	background-color: #fff;
	display: none;
}

#rankings .header {
	font-weight: 700;
	font-size: 30px;
}

/* Rankings Display - Rankings */
#rankings .ranks {
	font-size: 25px;
}

#rankings .ranks thead {
	position: sticky;
	top: 0;
	box-shadow: 0 3px 0 #000;
}

#rankings .ranks td, #rankings .ranks th {
	padding-left: .75rem !important;
	padding-right: .75rem !important;
}

/* Rankings Display - On-deck */
#rankings .ondeck {
	white-space: nowrap;
}

#rankings .ondeck table {
	width: auto;
}

#rankings .ondeck th {
	color: #fff !important;
	background-color: #333;
}

#rankings .ondeck td {
	color: #fff !important;
	font-weight: 600;
}

/* On-deck Display */
#ondeck {
	width: 100%;
	background-color: #fff;
	display: none;
}

#ondeck .header {
	font-weight: 700;
	font-size: 30px;
}

#ondeck table {
	width: auto;
}

#ondeck th {
	color: #fff !important;
	background-color: #333;
}

#ondeck td {
	color: #fff !important;
	font-weight: 600;
}

#ondeck .col:nth-child(1) .ondeck {
	font-size: calc(5vh);
}

#ondeck .col:nth-child(2) .ondeck {
	font-size: calc(6vh);
}

#ondeck .col:nth-child(3) .ondeck {
	font-size: calc(5vh);
}

#ondeck .col:nth-child(4) .ondeck {
	font-size: calc(4vh);
}

#ondeck .text-center:not(:has(table)) h2 {
	display: none;
}