:root {
		--base: #3772FF;
		--highlight: #D6E2FF;
		--soft: #E6EEFF;
		--shadow: #153EAF;
		--accent: #FFB703;
		--accent-soft: #FFF3D6;
		--black: #0F172A;
		--white: #F8FAFF;
		--grey: #C9CED6;
		--red: #EF4444;
		--green: #22C55E;
	}

	@font-face {
		font-family: 'Noto Sans';
		src: url('../fonts/NotoSans-Regular.woff2') format('woff2');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Noto Sans';
		src: url('../fonts/NotoSans-SemiBold.woff2') format('woff2');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Noto Sans';
		src: url('../fonts/NotoSans-Black.woff2') format('woff2');
		font-weight: 900;
		font-style: normal;
		font-display: swap;
	}
	
	* {
		box-sizing: border-box;
		white-space: nowrap;
		-webkit-user-select: none;
		user-select: none;
	}
	
	*::-webkit-scrollbar {
		display: none;
	}
	
	body {
		font-family: 'Noto Sans', system-ui, sans-serif;
		margin: 0;
		overflow: hidden;
	}

	#content {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		width: calc(100vw - 3.5rem);
		height: 100vh;
		justify-content: flex-start;
		align-items: center;
		overflow: hidden;
		background-color: var(--base);
		flex-direction: column;
		gap: 3rem;
		transition: width 0.5s ease;
	}
	
	body:has(#nav-container.expand) #content {
		width: calc(100vw - 15rem);
	}
	
	/* ******************************************************************************** */
	/* CONTROLS																			*/
	/* ******************************************************************************** */
		
		.ico-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			aspect-ratio: 1;
		}
		
		svg {
			height: 100%;
			stroke: currentColor;
			fill: none;
			aspect-ratio: 1;
		}
				
		.ico-container[data-icon='logo'] svg {
			fill: currentColor;
			stroke: none;
			margin-bottom: 2rem;
		}
		
		.ico-container:has(svg:empty) {
			display: none;
		}
		
		button {
			display: flex;
			justify-content: center;
			align-items: center;
			background: none;
			border: none;
			padding: 0;
			gap: 0.2rem;
			font: inherit;
			color: inherit;
			cursor: pointer;
		}
		
		button .ico-container {
			height: 50%;
		}
		
		button:disabled {
			opacity: 0.3;
		}
		
		button .label {
			font-size: 0.6rem;
			text-transform: uppercase;
			font-weight: 900;
		}
		
		button .label:empty {
			display: none;
		}
		
		h1, h2 {
			margin: 0;
			white-space: wrap;
			font-size: inherit;
			font-weight: inherit;
		}
		
		h1 {
			font-size: 0.8em;
		}
		
		h2 {
			font-size: 0.6em;
		}
		
		h1:empty, h2:empty {
			display: none;
		}
		
		input, textarea {
			background: transparent;
			border: none;
			font-family: 'Noto Sans', system-ui, sans-serif;
		}
		
		input:focus, textarea:focus {
			outline: none;
		}
		
		input:read-only, textarea:read-only {
			cursor: inherit;
		} 
		
		.disabled {
			opacity: 0.1;
			pointer-events: none;
		}

		.hidden {
			display: none !important;
		}
		
		
	/* ******************************************************************************** */
	/* SYNCER																			*/
	/* ******************************************************************************** */
		
		#syncer {
			position: fixed;
			inset: 0;
			height: 0.2rem;
			background-color: var(--green);
			z-index: 100;
		}
		
		body[data-offline='true'] #syncer {
			background-color: var(--red);
		}
		
	/* ******************************************************************************** */
	/* NAV																				*/
	/* ******************************************************************************** */
		
		#nav-container {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			width: 4rem;
			background-color: var(--base);
			border-top: 3px solid var(--white);
			border-right: 3px solid var(--white);
			overflow: hidden;
			z-index: 99;
			transition: width 0.5s ease;
		}
		
		#nav-container.expand {
			width: 15rem;
		}
		
		#nav-container #nav-content {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			width: 15rem;
		}
		
		#nav-container #profile-container {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: 1rem;
			border-bottom: 1px solid var(--white);
			height: 14rem;
		}
		
		#nav-container[data-account='TMR'] #profile-container {
			background-color: var(--shadow);
		}
		
		#nav-container[data-account='LDR'] #profile-container {
			background-color: var(--green);
		}
		
		#nav-container[data-account='ADM'] #profile-container {
			background-color: var(--red);
		}
		
		#nav-container #mini-header-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 4rem;
		}
		
		#nav-container #mini-header-container #nav-btn {
			height: 4rem;
			width: 4rem;
			color: var(--white);
			padding: 1rem;
		}
		
		#nav-container #mini-header-container .heading {
			text-transform: uppercase;
			font-weight: 900;
			font-size: 0.8rem;
			writing-mode: vertical-lr;
			transition: opacity 0.5s ease;
		}
		
		
		#nav-container.expand #mini-header-container .heading {
			opacity: 0;
		}
		
		#nav-container #profile-container .header-container {
			flex-direction: column;
			padding: 2rem;
			gap: 1rem;
			transition: opacity 0.5s ease;
		}
		
		#nav-container:not(.expand) #profile-container .header-container {
			opacity: 0;
		}
		
		#nav-container #profile-container .ico-container {
			color: var(--white);
			height: 4rem;
		}
		
		#nav-container #profile-container .heading{
			text-align: center;
			color: var(--white);
		}
		
		#nav-container #profile-container .heading h1 {
			padding: 0.2rem 0.5rem;
		}

		#nav-container #profile-container .heading h2 {
			border-top: 2px solid var(--white);
			padding: 0.2rem 0.5rem;
			font-size: 0.6em;
			font-weight: 900;
		}
		
		#nav-container #profile-container #profile-edit-btn {
			position: absolute;
			top: 0.75rem;
			right: 0.75rem;
			height: 1.25rem;
			width: 1.25rem;
			color: var(--white);
		}
		
		#nav-container[data-account='GST']  #profile-container #profile-edit-btn {
			display: none;
		}
		
		#nav-container nav {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}
		
		#nav-container nav #nav-btn-container {
			flex-grow: 1;
		}
		
		#nav-container nav button {
			height: 4rem;
			justify-content: flex-start;
			width: 100%;
			gap: 1rem;
			flex-direction: row;
			color: var(--white);
			padding: 1rem;
			border-bottom: 1px solid var(--white);
		}
		
		#nav-container:not([data-account='ADM']) #nav-dm-btn {
			/*display: none;*/
		}
		
		#nav-container[data-account='GST'] nav #nav-btn-container button {
			display: none;
		}
		
		#nav-container nav button .label {
			font-size: 0.6rem;
			font-weight: 600;
		}
		
		#nav-container nav button#nav-logout-btn {
			border-top: 1px solid var(--white);
			border-bottom: none;
		}


	/* ******************************************************************************** */
	/* OVERLAY																			*/
	/* ******************************************************************************** */
	
		.overlay {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			inset: 0;
			background-color: var(--white);
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0.3s ease;
			z-index: 60;
		}
		
		.overlay.visible {
			opacity: 0.8;
			visibility: visible;
		}
		
		.overlay.loading .ico-container {
			height: 3rem;
			color: var(--base);
			animation: spin 0.9s linear infinite;
		}

		@keyframes spin {
			to { transform: rotate(360deg); }
		}
		
		
	/* ******************************************************************************** */
	/* FOOTER																			*/
	/* ******************************************************************************** */
		
		#footer {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 1rem;
			width: 100%;
			background-color: var(--shadow);
			border-top: 3px solid var(--white);
			z-index: 98;
			font-size: 0.5rem;
			color: var(--white);
			padding-right: 0.2rem;
		}
		
		#footer #last-update-btn {
			display: flex;
			justify-content: flex-end;
			padding-right: 0.5rem;
			gap: 0.2rem;
			align-items: center;
			cursor: pointer;
		}
		
		#footer .ico-container {
			height: 0.5rem;
			aspect-ratio: 1;
			margin-right: 0.3rem;
		}
		
		body:has(#content.syncing) #footer .ico-container {
			animation: spin 0.9s linear infinite;
		}
		
		body:has(#content.syncing) #footer .label {
			display: none;
		}
		
		body[data-offline='true'] #footer {
			background-color: var(--red);
		}
		
		
	/* ******************************************************************************** */
	/* HEADER CONTAINER																	*/
	/* ******************************************************************************** */	
	
		.header-container {
			display: flex;
		}
		
		.header-container .heading {
			display: flex;
			flex-direction: column;
		}
			

	/* ******************************************************************************** */
	/* STAT CONTAINER																	*/
	/* ******************************************************************************** */
			
		.object-stats {
			display: none;
			justify-content: space-evenly;
			background-color: var(--highlight);
			padding: 2rem 0;
		}

		.page[data-page='sport'] .object-stats {
			display: flex;
		}
		
		.stat-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		
		}
		
		.object-stats .stat-container {
			background-color: var(--soft);
			padding: 1rem;
			aspect-ratio: 1;
			border: 4px solid var(--white);
			border-bottom: 0.5rem solid var(--shadow);
			color: var(--shadow);
			border-radius: 0.2rem;
		}
		
		.content-data[data-layout='table'] .stat-container {
			display: flex;
			gap: 0.2rem;
			font-size: 1rem;
			height: 100%;
			width: 100%;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container {
			flex-direction: row;
			gap: 0.3rem;
			font-size: 0.6rem;
			color: var(--white);
			padding: 0.15rem 0;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container .stat-ico {
			height: 2em;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container .stat-data {
			flex-direction: row;
			gap: 0.2rem;
			font-size: 0.8rem;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container .stat-value {
			font-size: 0.8em;
			font-weight: 600;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container .stat-total {
			font-size: 0.8em;
		}
		
		.content-data[data-layout='grid'] .data-item .stat-container .stat-label {
			display: none;
		}
		
		.object-stats .stat-container .stat-ico {
			height: 2.5em;
			text-align: center;
			order: 1;
		}
		
		.content-data[data-layout='table'] .stat-container .stat-ico {
			display: none;
		}
			
		.stat-container .stat-data {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.2rem;
			order: 3;
		}

		.stat-container .stat-label {
			font-size: 0.6em;
			font-weight: 600;
			text-align: center;
			order: 2;
			padding: 2px 1rem;
			border-bottom: 1px solid var(--shadow);
		}

		.stat-container .stat-value {
			text-align: center;
			font-size: 1.2em;
			font-weight: 900;
		}
		
		.stat-container[data-value=''] {
			display: none;
		}

		.stat-container .stat-total {
			text-align: right;
			font-size: 0.6em;
			font-weight: 600;
		}
		
		.stat-container[data-total=''] .stat-total {
			display: none;
		}
		

	
	/* ******************************************************************************** */
	/* PAGE																				*/
	/* ******************************************************************************** */	
		
		.page {
			display: flex;
			height: 100vh;
			width: 100%;
			flex-direction: column;
			background-color: var(--white);
			border: 5px solid var(--white);
			gap: 4px;
			overflow-y: scroll;
		}
		
		.page:not[data-page='login'] {
			border-left: none;
		}
		
		.page:not(.active) {
			display: none;
		}
		
		.page .page-header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: 60vh;
			flex-shrink: 0;
			background-color: var(--base);
			color: var(--white);
		}
		
		.page-back-btn {
			position: absolute;
			height: 2rem;
			top: 1.5rem;
			left: 1.5rem;
			color: var(--white);
			gap: 0.2rem;
			font-size: 0.6rem;
			font-weight: 600;
			z-index: 95;
		}
		
		.page-back-btn .label {
			text-transform: unset;
		}

		
		.page .page-header .header-container {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 6vh;
			width: 100%;
		}
		
		.page .page-header .header-container .ico-container {
			height: 30vh;
		}

		.page .page-header .header-container .heading {
			align-items: center;
		}
		
		.page .page-header .header-container h1 {
			font-weight: 900;
		}			
		
		
		.page .page-header .header-container h2 { 
			font-size: 0.8em;
			font-weight: 600;
		}

		.page .page-header.sticky .header-container {
			position: absolute;
			flex-direction: row;
			top: 0;
			height: 5rem;
			font-size: 1rem;
			gap: 1rem;
			background-color: var(--base);
			border-bottom: 4px solid var(--white);
			z-index: 90;
		}
		
		.page .page-header.sticky .header-container .ico-container {
			display: none;
		}

		.page .page-header .header-sentinel {
			margin-bottom: 1rem;
		}
		
		.page .page-status {
			display: flex;
			position: relative;
		}
		
		.page .page-status .header-container {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			height: 5rem;
			gap: 0.2rem;
			background-color: var(--header-color);
			color: var(--contrast-color);
			font-size: 1em;
			font-weight: 600;
		}
		
		.page .page-status .current-status {
			width: calc(100% - 7.5rem);
		}
		
		.page .page-status:has(.next-status .header-container[data-key='']) .current-status {
			width: 100%;
		}
		
		.page .page-status:not(:has(.next-status .header-container)) .current-status {
			width: 100%;
		}
		
		.page .page-status:has(.next-status .header-container):not(:has(.next-status .header-container[data-key=''])) .current-status .header-container {
			clip-path: polygon(
				0 0,
				100% 0,
				calc(100% - 16px) 50%,
				100% 100%,
				0 100%
			);
			padding-left: 7.5rem;
			padding-right: 24px; /* room for the socket */
			z-index: 60;
		}
		
		.page .page-status .next-status {
			position: absolute;
			right: 0;
			font-size: 0.8rem;
			width: 8rem;
			z-index: 50;
			clip-path: polygon(
				100% 0,
				16px 0,
				0 50%,
				16px 100%,
				100% 100%
			);
			cursor: pointer;
			transition: width 300ms ease, z-index 0s 300ms;
		}
		
		.page .page-status .next-status.expanding {
			width: 100%;
			z-index: 70;
			transition: width 300ms ease;
		}
		
		.page .page-status .header-container .ico-container {
			height: 2em;
		}
		
		.page .next-status:has(.header-container[data-key='']) {
			display: none;
		}
		
		.page .page-status .next-status .header-container {
			flex-direction: column;
			background-color: var(--header-color);
			color: var(--contrast-color);
		}
		
		.page .page-status .next-status .header-container .ico-container {
			height: 2em;
		}
		
		.page .page-status .next-status .header-container .heading {
			text-align: center
		}
		
		
		.page .object-status .current-status:has(.header-container[data-table='del_status']) .next-status {
			display: none;
		}
		
		body[data-offline='true'] .page[data-locked='unlocked'] .object-status .next-status {
			pointer-events: none;
			opacity: 0.2;
		}
		
		.page .page-content {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

	/* ******************************************************************************** */
	/* PAGE - SCHEDULE																	*/
	/* ******************************************************************************** */	
		
		.page[data-page='schedule'] .page-back-btn {	
			display: none;
		}
		
		.page[data-page='schedule'] .page-status {
			display: none;
		}

		.content-data[data-layout='schedule'] {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
		}

		.content-data[data-layout='schedule'] .day-container {
			display: flex;
			flex-direction: column;
		}

		.content-data[data-layout='schedule'] .day-header {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 0.5rem;
			padding: 0.6rem 1rem;
			background-color: var(--shadow);
			color: var(--white);
			border-radius: 0.5rem 0.5rem 0 0;
		}

		.content-data[data-layout='schedule'] .day-header-dayname {
			font-size: 0.9rem;
			font-weight: 900;
			letter-spacing: 0.02em;
		}

		.content-data[data-layout='schedule'] .day-header-date {
			font-size: 0.7rem;
			font-weight: 600;
			opacity: 0.75;
		}

		.content-data[data-layout='schedule'] .day-content {
			display: flex;
			flex-direction: column;
			gap: 0.6rem;
			padding: 0.6rem;
			background-color: var(--soft);
			border: 2px solid var(--highlight);
			border-top: none;
			border-radius: 0 0 0.5rem 0.5rem;
		}

		.content-data[data-layout='schedule'] .data-item {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			min-height: 4rem;
			background-color: var(--white);
			border: 2px solid var(--white);
			border-radius: 0.4rem;
			overflow: hidden;
			font-size: 0.8rem;
			color: var(--shadow);
		}

		.content-data[data-layout='schedule'] .data-item.selected {
			border-color: var(--green);
		}

		.content-data[data-layout='schedule'] .data-item .col {
			display: flex;
			border-left: 2px solid var(--highlight);
		}

		.content-data[data-layout='schedule'] .data-item .col .value {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 100%;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] {
			flex: 1 1 14rem;
			min-width: 10rem;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] .value {
			justify-content: flex-start;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] .header-container {
			width: 100%;
			height: 100%;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--header-color);
			color: var(--contrast-color, var(--shadow));
		}
	
		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] .header-container .ico-container {
			padding: 0.5rem;
			margin-left: 0.75rem;
			height: 75%;
			background-color: var(--soft);
			color: var(--shadow);
			border-radius: 25%;
		}
		
		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] .header-container h1 {
			font-size: 1rem;
			font-weight: 600;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='--dataItem'] .header-container h2 {
			font-size: 0.7rem;
			font-weight: 600;
			opacity: 0.8;
		}

		.content-data[data-layout='schedule'] .data-item .col:not([data-column='--dataItem']) {
			flex: 0 0 6rem;
			width: 6rem;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='_PRIMARY_STAT'] {
			flex-basis: 5rem;
			width: 5rem;
		}
		
		.content-data[data-layout='schedule'] .data-item .col[data-column='_PRIMARY_STAT'] .stat-label {
			padding: 2px 0.5rem;
		}
		
		.content-data[data-layout='schedule'] .data-item .col[data-column='_LOCK_STATUS'] {
			flex-basis: 6rem;
			width: 6rem;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='SPORT_STATUS_ID'] .header-container
			, .content-data[data-layout='schedule'] .data-item .col[data-column='VENUE_ID'] .header-container
			, .content-data[data-layout='schedule'] .data-item .col[data-column='_LOCK_STATUS'] .header-container {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 0.2rem;
			height: 100%;
			width: 100%;
			text-align: center;
			background-color: var(--header-color);
			color: var(--contrast-color);
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='SPORT_STATUS_ID'] .header-container .ico-container
			, .content-data[data-layout='schedule'] .data-item .col[data-column='VENUE_ID'] .header-container .ico-container
			, .content-data[data-layout='schedule'] .data-item .col[data-column='_LOCK_STATUS'] .header-container .ico-container {
			height: 1.2rem;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='SPORT_STATUS_ID'] .header-container h1
			, .content-data[data-layout='schedule'] .data-item .col[data-column='VENUE_ID'] .header-container h1
			, .content-data[data-layout='schedule'] .data-item .col[data-column='_LOCK_STATUS'] .header-container h1 {
			font-size: 0.65rem;
			font-weight: 700;
		}

		.content-data[data-layout='schedule'] .data-item .col[data-column='SPORT_STATUS_ID'] .header-container h2
			, .content-data[data-layout='schedule'] .data-item .col[data-column='VENUE_ID'] .header-container h2
			, .content-data[data-layout='schedule'] .data-item .col[data-column='_LOCK_STATUS'] .header-container h2 {
			font-size: 0.55rem;
			opacity: 0.7;
		}

	/* ******************************************************************************** */

	/* SECTION																			*/
	/* ******************************************************************************** */	
		
		section {
			display: flex;
			width: 100%;
			flex-shrink: 0;
			min-height: 50vh;
			transition: height 250ms ease, opacity 250ms ease;
			overflow: hidden;
		}
		
		section.collapsed,
			section.collapsing {
			opacity: 0.2;
			height: 6rem;
			min-height: 6rem;
		}
		
		section .section-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
			width: 5rem;
			padding-top: 1rem;
			color: var(--highlight);
			margin-bottom: 2rem;
		}
		
		section .section-header .ico-container {
			height: 3rem;
			transform: rotate(90deg);
			background-color: var(--highlight);
			color: var(--white);
		}
		
		section .section-header .heading {
			writing-mode: vertical-lr;
		}
		
		section .section-header h1 {
			font-size: 2rem;
			text-transform: uppercase;
			font-weight: 900;
		}
		
		section .section-content {
			display: flex;
			width: calc(100% - 5rem);
			align-items: center;
			flex-direction: column;
			flex-grow: 1;
			padding: 1rem 1rem 1rem 0;
			transition: opacity 150ms ease;
		}
		
			
		section.collapsed .section-header {
			flex-direction: row;
			width: 100%;
			margin-left: 1rem;
			color: var(--grey);
			transition: all 250ms ease;
		}
		
		section.collapsed .section-header .ico-container {
			transform: none;
			background-color: var(--grey);
		}
		
		section.collapsed .section-header .heading,
			section.collapsing .section-header .heading {
			writing-mode: horizontal-tb;
			text-orientation: mixed;
		}
		
		section.collapsed .section-header,
			section.collapsing .section-header {
			flex-direction: row;
		}
		
		section.collapsing .section-content,
			section.collapsed .section-content {
			opacity: 0;
			pointer-events: none;
		}

		
		.page:has(section.edit-mode) section:not(.edit-mode) {
			opacity: 0.1;
			pointer-events: none;
		}


	/* ******************************************************************************** */
	/* CONTENT HEADER																	*/
	/* ******************************************************************************** */	
	
		.content-header {
			display: flex;
			align-items: flex-end;
			width: 100%;
			height: 2rem;
			border-bottom: 2px solid var(--shadow);
			margin-bottom: 2px;
		}
		
		.content-header .content-label {
			font-size: 0.6rem;
			font-weight: 900;
			margin-bottom: 0.2rem;
			color: var(--shadow);
		}
		
		.content-header>:first-child {
			flex-grow: 1;
		}
		
		.content-header .content-header-actions  {
			display: flex;
			gap: 0.5rem;
		}
		
		.content-header .content-header-actions button { 	
			height: 2rem;
			color: var(--shadow);
			border-bottom: 2px solid var(--white);
		}

		section[data-selection=''] .content-header .content-header-actions button[data-action='VIEW'] { display: none }
		.content-header .content-header-actions button[data-action='SAVE'] { color: var(--green) }
		.content-header .content-header-actions button[data-action='CANCEL'] { color: var(--black) }
		.content-header .content-header-actions button[data-action='DELETE'] { color: var(--red) }
		.content-header .content-header-actions button[data-action='DBDEL'] { color: var(--red) }
		
		section[data-label='display'] button[data-action='CREATE']:has(.ico-container[data-icon='add']) { color: var(--green) }
		section[data-label='display'] button[data-action='CREATE']:has(.ico-container[data-icon='refresh']) { color: var(--red) }
		
		.content-header .content-header-actions button[data-action='FILTER'] {
			position: relative;
			padding-right: 1.4rem;
			padding-left: 0.2rem;
			border-top-left-radius: 0.6rem;
			border-top-right-radius: 0.6rem;
		}

		.content-header .content-header-actions button[data-action='FILTER']::after {
			content: '';
			position: absolute;
			right: 0.35rem;
			top: 50%;
			width: 0.35rem;
			height: 0.35rem;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: translateY(-65%) rotate(45deg);
			transition: transform 0.15s ease;
		}

		.content-header:has(+ .content-filters.open) .content-header-actions button[data-action='FILTER'] {
			border-top: 2px solid var(--shadow);
		}

		.content-header:has(+ .content-filters.open) .content-header-actions button[data-action='FILTER']::after {
			transform: translateY(-25%) rotate(-135deg);
		}
		
		.content-filters {
			display: none;
			width: 100%;
			flex-wrap: wrap;
			justify-content: flex-start;
			background-color: var(--shadow);
			gap: 1rem;
			padding: 1rem;
			border-bottom: 2px solid var(--soft);
			margin-bottom: 0.5rem;
			border-bottom-left-radius: 0.6rem;
			border-bottom-right-radius: 0.6rem;
		}
		
		.content-filters.open {
			display: flex;
		}
		
		.content-filters .filter-option {
			display: flex;
			flex-direction: column;
			gap: 0.2rem;
		}
		
		.content-filters .filter-option-label {
			font-size: 0.6rem;
			font-weight: 700;
			letter-spacing: 0.02em;
			color: var(--white);
			opacity: 0.6;
		}
		
		.content-filters select {
			font-size: 0.75rem;
			font-weight: 600;
			padding: 0.3rem 1.5rem 0.3rem 0.5rem;
			border: 2px solid var(--soft);
			border-radius: 0.4rem;
			background-color: var(--white);
			color: var(--shadow);
			cursor: pointer;
		}
		
		.content-filters select:focus {
			outline: none;
			border-color: var(--accent);
		}
		
		section.edit-mode button[data-action='UPDATE'] { display: none }
		section:not(.edit-mode) button[data-action='SAVE'] { display: none }
		section:not(.edit-mode) button[data-action='CANCEL'] { display: none }
		section:not(.edit-mode) button[data-action='DELETE'] { display: none }
		section:not(.edit-mode) button[data-action='RESTORE'] { display: none }
		.page[data-delrecord='0'] button[data-action='RESTORE'] { display: none }
		.page[data-delrecord='1'] button[data-action='DELETE'] { display: none }
		
		section[data-label='display']:not(.edit-mode) button[data-action='CREATE'] { display: none }
		
		section[data-label='display']:has(.data-item) button[data-action='CREATE']:has(.ico-container[data-icon='add']) { display: none }
		section[data-label='display']:not(:has(.data-item)) button[data-action='CREATE']:has(.ico-container[data-icon='refresh']) { display: none }
		
		
		body[data-offline='true'] .page[data-locked='unlocked'] button[data-action='UPDATE']
			, body[data-offline='true'] .page[data-locked='unlocked'] button[data-action='SAVE']
			, body[data-offline='true'] .page[data-locked='unlocked'] button[data-action='DELETE']
			, body[data-offline='true'] .page[data-locked='unlocked'] button[data-action='RESTORE']
			, body[data-offline='true'] .page[data-locked='unlocked'] button[data-action='CREATE']	 {
			pointer-events: none;
			opacity: 0.2;
		}
		
		.search-container {
			display: flex;
			align-items: center;
			background-color: var(--soft);
			border-radius: 0.5rem;
			gap: 0.2rem;
			margin: 0.3rem 0;
			padding: 0.2rem 0.3rem;
		}
			
		.search-container .ico-container {
			height: 1.2rem;
			color: var(--shadow);
		}
		
		.search-container .search-input {
			font-size: 1em;
		}
		
		.search-container .search-x-btn {
			height: 1rem;
			color: var(--shadow);
		}
	

	/* ******************************************************************************** */
	/* CONTENT DATA																		*/
	/* ******************************************************************************** */	
	
		.content-data {
			width: calc(100% - 2rem);
			margin: 1rem;
			flex-grow: 1;
			overflow-x: scroll;
		}
		
		.content-data .data-item {
			cursor: pointer;
		}
		
		.data-item > .col > .value:has(>.header-container) > input {
			display: none;
		}
	
	/* ******************************************************************************** */
	/* FORM	CONTENT																		*/
	/* ******************************************************************************** */	
	
		.page[data-locked='isLocked'] button[data-action='CREATE'], .page[data-locked='isLocked'] button[data-action='UPDATE'] {
			display: none;
		}
	
		.content-data[data-layout='form'] > .data-item {
			display: flex;
			flex-wrap: wrap;
			gap: 2px;
		}
		
		section.edit-mode .content-data[data-layout='form'] > .data-item {
			flex-direction: column;
			flex-wrap: nowrap;
		}
		
		.content-data[data-layout='form'] > .data-item > .col {
			display: flex;
			flex-direction: column;			
			width: 14rem;
			padding: 0.5rem;
		}

		section.edit-mode .content-data[data-layout='form'] > .data-item > .col {
			width: auto;
		}
		
		.content-data[data-layout='form'] > .data-item > .col > .label {
			display: flex;
			align-items: center;
			gap: 0.2rem;
			font-size: 0.6rem;
			font-weight: 900;
			color: var(--shadow);
			padding: 0.2rem;
			margin-bottom: 0.5rem;
			height: 1.2rem;
			border-bottom: 2px solid var(--shadow);
		}
		
		section.edit-mode .content-data[data-layout='form'] > .data-item > .col > .label {
			color: var(--accent);
			border-bottom: 2px solid var(--accent);
		}
		
		.content-data[data-layout='form'] > .data-item > .col > .label > .ico-container {
			height: 1rem;
		}
	
		.content-data[data-layout='form'] > .data-item > .col > .value {
			display: flex;
			align-items: center;
			gap: 0.2rem;
			height: 2.5rem;
			padding-left: 0.5rem;
			font-size: 0.8rem;
		}

		.content-data[data-layout='form'] > .data-item > .col[data-editable='true'] > .value {
			background-color: var(--soft);
			color: var(--shadow);
		}

		section.edit-mode .content-data[data-layout='form'] > .data-item > .col[data-editable='true'] > .value {
			background-color: color-mix(in srgb, var(--accent) 25%, var(--white));
			border-bottom: 2px solid var(--black);
			color: var(--black);
		}
		
		.content-data[data-layout='form'] > .data-item > .col:has(> .value > textarea) > .value {
			height: auto;
			min-height: 6rem;
			align-items: flex-start;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}

		.content-data[data-layout='form'] > .data-item > .col > .value > textarea {
			width: 100%;
			min-height: 5rem;
			font-family: inherit;
			font-size: 0.8rem;
			line-height: 1.4;
			color: var(--header-color);
			background: transparent;
			border: none;
			resize: none;
		}

		section.edit-mode .content-data[data-layout='form'] > .data-item > .col > .value > textarea {
			color: var(--black);
			resize: vertical;
		}

		.content-data[data-layout='form'] > .data-item > .col[data-editable='true'] > .value > textarea {
			color: var(--shadow);
		}

		.content-data[data-layout='form'] > .data-item > .col > .value > input {
			width: 100%;
			font-size: 0.8rem;
			color: var(--header-color);
		}
		
		section.edit-mode .content-data[data-layout='form'] > .data-item > .col > .value > input {
			color: var(--black);
		}
		
		.content-data[data-layout='form'] > .data-item > .col[data-editable='true'] > .value > input {
			color: var(--shadow);
		}

		.content-data[data-layout='form'] > .data-item > .col > .value > .header-container {
			align-items: center;
			gap: 0.2rem;
			font-size: 1rem;
			flex-grow: 1;
		}
		
		section:not(.edit-mode) .content-data[data-layout='form'] > .data-item > .col > .value > .header-container {
			color: var(--header-color);
		}
		
		.content-data[data-layout='form'] > .data-item > .col > .value > .header-container > .ico-container {
			height: 1.2rem;
		}
		
		.content-data[data-layout='form'] > .data-item > .col[data-type='PK'] {		
			display: none;
		}
		
		section:has(.content-data[data-layout='form']) .section-content > .content-footer {
			display: none;
		}
		
		.content-data[data-layout='form'] button[data-action='FKLookup'] {
			height: 100%;
			aspect-ratio: 1;
			color: var(--black);
			order: 2;
			transition: transform 0.5s ease;
		}
		
		.content-data[data-layout='form'] > .data-item > .col:has(.col-fk-content) button[data-action='FKLookup'] {
			transform: rotate(180deg);
		}
		
		section:not(.edit-mode) .content-data[data-layout='form'] button[data-action='FKLookup'] {
			display: none;
		}
		
		.col-fk-content {
			width: 100%;
			padding: 1rem;
			background-color: color-mix(in srgb, var(--accent) 15%, var(--white));
		}
		
		section.edit-mode .content-data[data-layout='form'] .col[data-changed='true'] {
			background-color: var(--soft)
		}

	/* ******************************************************************************** */
	/* TABLE CONTENT																	*/
	/* ******************************************************************************** */	
	
		.content-data[data-layout='table'] {
			--row-height: 4rem; 
			height: calc((var(--viewable) * var(--row-height)) + 3rem);
		}
	
		table {
			border-collapse: separate;
			border-spacing: 0;
			min-width: max-content;
			width: 100%;
			font-size: 1rem;
			table-layout: fixed;
		}
		
		table th {
			cursor: pointer;
		}
		
		table th[data-sortable='false'] {
			cursor: default;
		}
		
		th:nth-child(1), td:nth-child(1) {
			position: sticky;
			left: 0;
			z-index: 2;
		}
		
		colgroup col[data-column='_i'] {
			width: var(--row-height);
			text-align: center;
		}
		
		colgroup col[data-type='FK']:not([data-column='--dataItem']) {
			width: 14em;
			max-width: 14em;
		}
		
		colgroup col[data-column='--dataItem'] {
			min-width: 14em;
		}
		
		tr:has(td) {
			height: var(--row-height);
		}
	
		th, td {
			border: 2px solid var(--white);
			white-space: nowrap;
			overflow: hidden;
		}
	
		th {
			background-color: var(--shadow);
			height: 3em;
			font-weight: 600;
			font-size: 0.8em;
			color: var(--white);
		}
		
		th:has(.th-order-ico) {
			padding-left: 1.5rem;
		}
		
		th .th-order-ico {
			float: right;
			height: 1rem;
			margin-right: 0.5rem;
			color: var(--white);
			opacity: 0;
		}
		
		th .th-order-ico svg {
			transition: transform 150ms ease;
		}
		
		th .th-order-ico[data-order='asc'], th .th-order-ico[data-order='desc'] {
			color: var(--white);
			opacity: 1;
		}
		
		th .th-order-ico[data-order='desc'] svg {
			transform: scaleY(-1);
		}
		
		th:hover .th-order-ico {
			opacity: 0.4;
		}
		
		th:hover .th-order-ico[data-order='asc'], th:hover .th-order-ico[data-order='desc'] {
			opacity: 1;
		}
		
		.content-data[data-headers='false'] thead {
			display: none;
		}
		
		td {
			background-color: var(--soft);
			font-size: 0.8em;
			height: var(--row-height);
		}


		tr:last-child {
			border-bottom: none;
		}
		
		.content-data[data-layout='table'] .data-item .col .value {
			display: flex;
			align-items: center;
			gap: 0.2rem;
			height: 100%;
			width: 100%;
			font-size: 0.8rem;
			color: var(--shadow);
			border-bottom: 2px solid var(--highlight);
			position: relative;
		}
		
		.content-data[data-layout='table'] .data-item .col:first-child {
			background-color: var(--shadow);
			color: var(--white);
		}
		
		.content-data[data-layout='table'] .data-item .col:first-child .value {
			border: none;
		}
		
		.content-data[data-layout='table'] .data-item .col .value:not(:has(.header-container)) {
			padding-left: 0.2rem;
		}
		
		.content-data[data-layout='table'] .data-item .col .value .date-display {
			display: flex;
			width: 100%;
			flex-direction: column;
			color: var(--white);
			justify-content: center;
			align-items: center;
		}		
		
		.content-data[data-layout='table'] .data-item .col .value .date-display .date-day { 
			font-size: 0.6rem;
			font-weight: 600;
		}
	
		.content-data[data-layout='table'] .data-item .col .value .date-display .date-date { 
			font-size: 2rem;
			line-height: 2rem;
			font-weight: 900;
		}
	
		.content-data[data-layout='table'] .data-item .col .value .date-display .date-month { 
			font-size: 0.6rem;
			font-weight: 600;
		}
	
		.content-data[data-layout='table'] .data-item .col .value input {
			width: 100%;
			font-size: 1rem;
		}
					
		.content-data[data-layout='table'] .data-item .col[data-column='_i'] .value input {
			font-weight: 900;
			font-size: 0.6rem;
			text-align: center;
			color: var(--white);
		}

		.content-data[data-layout='table'] .data-item .value .header-container {
			align-items: center;
			gap: 0.2rem;
			padding-left: 0.5rem;
			width: 100%;
			height: 100%;
			font-size: 1rem;
			background-color: var(--header-color);
			color: var(--contrast-color, var(--shadow));
		}
		
		.content-data[data-layout='table'] .data-item .col:first-child .value .header-container {
			color: var(--white);
		}
		
		.content-data[data-layout='table'] .data-item .value .header-container > .ico-container {
			height: 1.5rem;
		}
		
		.content-data[data-layout='table'] .data-item .col .header-container h1 {
			font-weight: 600;
		}			

		.content-data[data-layout='table'] .data-item .col .header-container h2 {
			font-weight: 600;
		}
		
		.content-data[data-layout='table'] .data-item .col .header-container .status {
			background-color: var(--red);
			color: var(--white);
			font-size: 0.6rem;
			font-weight: 900;
			padding: 0 0.2rem;
		}
		
		.content-data[data-layout='table'] .data-item.selected {
			background-color: var(--green)
		}
		
		.content-data[data-layout='table'] .data-item.selected td:first-child {
			background-color: var(--green);
		}

		.content-data[data-layout='table'] .data-item.selected td:not(:first-child) {
			opacity: 0.6;
		}
		
		td button[data-action='INLINE'] {
			position: absolute;
			right: 1rem;
			height: 1.5rem;
			min-width: 1.5rem;
			color: var(--contrast-color,  var(--shadow));
			opacity: 0.8;
			border: 1px solid var(--contrast-color, var(--shadow));
			padding: 0.2rem;
		}
		
		td button[data-action='INLINE'] .ico-container {
			height: 1rem;
		}
		
		.page[data-locked='isLocked'] button[data-action='INLINE'] {
			display: none;
		}
		
		.page:has(section[data-table='team'][data-selection=''])
			td[data-column='TEAM_ID']:not(:has(.value[data-value]:not([data-value='']))) button[data-action='INLINE'] {
			display: none;
		}
		
		td:has(.header-container[data-key=""]) button[data-action='INLINE'] {
			left: 1rem;
		}

	/* ******************************************************************************** */
	/* GRID CONTENT																		*/
	/* ******************************************************************************** */	
	
		.content-data[data-layout='grid'] {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 0.75rem;
			font-size: 1.2rem;
			--item-width: 10rem;
			--item-height: 5rem;
		}
		
		.col-fk-content .content-data[data-layout='grid'] {
			--item-width: 7rem;
			--item-height: 3.5rem;
			font-size: 0.8rem;
		}
		
		#registration-container .content-data[data-layout='grid'] {
			--item-width: 11rem;
			--item-height: 7rem;
			font-size: 1rem;
		}
	
		.content-data[data-layout='grid'] .data-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1 1 var(--item-width);
			max-width: var(--item-width);
			height: var(--item-height);
			background-color: var(--soft);
			border-radius: 0.5rem;
			font-size: 0.8rem;
			border: 0.2rem solid var(--highlight);
			color: var(--shadow);
			overflow: hidden;
		}
	
		.content-data[data-layout='grid'] .data-item.selected {
			border: 0.2rem solid var(--green);
		}
		
		.content-data[data-layout='grid'] .data-item .value {
			height: 100%;
			width: 100%;
		}

		.content-data[data-layout='grid'] .data-item .col:only-child {
			height: 100%;
		}
		
		.content-data[data-layout='grid'] .data-item .col[data-column='--dataItem'] {
			flex-grow: 1;
		}
		
		.content-data[data-layout='grid'] .data-item .header-container {
			flex-direction: column;
			height: 100%;
			width: 100%;
			align-items: center;
			justify-content: center;
			background-color: var(--header-color);
			color: var(--contrast-color, inherit);
			gap: 0.5em;
			padding: 0.5em;
			flex-grow: 1;
		}
		
		.content-data[data-layout='grid'] .data-item .header-container .ico-container {
			height: 2em;
		}
		
		.content-data[data-layout='grid'] .data-item .heading {
			text-align: center;
		}

		.content-data[data-layout='grid'] .data-item .header-container h1 {
			font-size: 0.8em;
			font-weight: 600;
		}

		.content-data[data-layout='grid'] .data-item .header-container h2 {
			font-size: 0.6em;
			font-weight: 900;
		}

		.content-data[data-layout='grid'] .data-item .col .header-container:not([data-del='1']) .status {
			display: none;
		}
		
		.content-data[data-layout='grid'] .data-item .col .header-container .status {
			color: var(--red);
			font-size: 0.6rem;
			font-weight: 900;
			padding: 0.2rem 0;
		}
		
		.content-data[data-layout='grid'] .col:has(.stat-container) .value {
			display: flex;
			background-color: var(--shadow);
			padding: 0 0.5rem;
			justify-content: space-between;
		}

	/* ******************************************************************************** */
	/* SECTION - FIXTURES																*/
	/* ******************************************************************************** */

		section[data-table='fixture'] colgroup col[data-column='_FIXTURE_TAG']
			, section[data-table='fixture'] colgroup col[data-column='_PITCH']
			, section[data-table='fixture'] colgroup col[data-column='_REFEREE'] {
			width: var(--row-height);
			min-width: 0;
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_REFEREE'] .value {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding: 0;
		}
		
		section[data-table='fixture'] colgroup col[data-column='_ASSIGNMENTS'] {
			min-width: 40em;
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col:first-child {
			background-color: transparent;
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_PITCH'] .value {
			background-color: var(--green);
			border: 2px solid color-mix(in srgb, var(--green) 75%, var(--black));
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_PITCH'] .value .header-container {
			color: var(--white);
			padding: 0;
			justify-content: center;
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_PITCH'] .value .header-container .heading {
			text-align: center;
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_FIXTURE_TAG'] .value .header-container {
			font-size: 0.8rem;
			padding: 0 4px;
			background-color: var(--header-color, var(--shadow));
			color: var(--contrast-color, var(--white));
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_FIXTURE_TAG'] .value .header-container .heading {
			text-align: center;
		}
		
		section[data-table='fixture'] .col[data-column='_FIXTURE_TAG'] .header-container .ico-container {
			display: none;
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value[data-count='2'] .assignment {
			height: 100%;
			width: 50%;
			color: var(--shadow);
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value[data-count='2'] .assignment[data-result='1'] {
			background-color: var(--green);
			color: var(--white);
			border: 2px solid var(--white);
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value .header-container {
			background-color: transparent;
			color: inherit;
			gap: 0.5rem;
			padding: 0 0.5rem;
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value[data-count='2'] .assignment:nth-of-type(2) .header-container {
			justify-content: flex-end;
			padding-left: 0;
			padding-right: 0.5rem;
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value[data-count='2'] .assignment:nth-of-type(2) .header-container .ico-container {
			order: 2;
			transform: scaleX(-1);
		}

		section[data-table='fixture'] .content-data[data-layout='table'] .data-item .col[data-column='_ASSIGNMENTS'] .value[data-count='2'] .assignment:nth-of-type(2) .header-container .heading {
			text-align: right;
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] .vs {
			position: absolute;
			left: calc(50% - 2rem);
			height: 5rem;
			aspect-ratio: 1;
			background-color: var(--shadow);
			color: var(--white);
			border-radius: 50%;
			padding: 1.7rem;
			border: 4px solid var(--white);
		}
		
		section[data-table='fixture'] .content-data[data-layout='table'] tr.data-item[data-locked='1'] {
			opacity: 0.1;
			pointer-events: none;
		}
		
		
	/* ******************************************************************************** */
	/* SECTION - KNOCKOUT																*/
	/* ******************************************************************************** */
		
		.content-data[data-layout='knockout'] {
			display: flex;
		}
		
		.content-data[data-layout='knockout'] .round-container {
			display: flex;
			flex-direction: column;
		}
		
		.content-data[data-layout='knockout'] .round-header {
			color: var(--header-color, var(--black));
			font-size: 0.6rem;
			font-weight: 600;
			padding: 0.5rem;
			margin: 0 0.5rem;
			border-bottom: 2px solid var(--black);
			text-align: center;
			cursor: pointer;	
		}
		
		section:not(.edit-mode) .content-data[data-layout='knockout'] .round-container.collapsed .round-header {
			flex-grow: 1;
			width: 4rem;
			font-size: 2rem;
			font-weight: 900;
			writing-mode: vertical-lr;
			border-right: 2px solid var(--black);
			border-bottom: none;
			opacity: 0.4;
		}
		
		section:not(.edit-mode) .content-data[data-layout='knockout'] .round-container[data-key='0'] {
			display: none;
		}
		
		.content-data[data-layout='knockout'] .round-container .round-content {
			display: flex;
			flex-direction: column;
			padding: 1rem 0;
			flex-grow: 1;
			justify-content: space-around;
		}
		
		section:not(.edit-mode) .content-data[data-layout='knockout'] .round-container.collapsed .round-content {
			display: none;
		}
		
		.content-data[data-layout='knockout'] .knockout-container {
			display: flex;
			flex-direction: column;
			position: relative;
			padding: 2rem;
			flex-grow: 1;
			justify-content: center;
		}
		
		.content-data[data-layout='knockout'] .data-item {
			display: flex;
			flex-wrap: wrap;
			gap: 2px;
			border: 2px solid var(--black);
			border-radius: 0.25rem;
			overflow: hidden;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_FIXTURE_TAG'] {
			flex-grow: 1;
		}
		
		section:not(.edit-mode) .content-data[data-layout='knockout'] .data-item .col[data-column='_FIXTURE_TAG'] .header-container {
			background-color: var(--header-color, var(--black));
			color: var(--contrast-color, var(--white));
			font-size: 0.8rem;
			padding-left: 0.3rem;
			font-weight: 600;
			height: 1.2rem;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_FIXTURE_TAG'] .header-container .heading {
			flex-direction: row;
			align-items: center;
			gap: 0.2rem;
		}

		.content-data[data-layout='knockout'] .data-item[data-locked='1'] .col[data-column='_LOCKED'] .header-container .ico-container {
			height: 1.2rem;
			padding: 0.2rem;
			background-color: var(--red);
			color: var(--white);
		}	

		.content-data[data-layout='knockout'] .data-item[data-locked='0'] .col[data-column='_LOCKED'] {
			display: none;
		}			
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_REFEREE'] .value {
			display: flex;
			align-items: stretch;
			justify-content: center;
			height: 1.2rem;
		}

		.content-data[data-layout='knockout'] .data-item .referee-control {
			display: flex;
			align-items: center;
			gap: 0.25rem;
			padding: 0 0.4rem;
			background-color: var(--accent);
			color: var(--black);
			font-size: 0.55rem;
			font-weight: 900;
			letter-spacing: 0.02em;
		}

		.content-data[data-layout='knockout'] .data-item .referee-control .ico-container {
			height: 0.75rem;
		}

		.content-data[data-layout='knockout'] .data-item .referee-control:hover {
			background-color: var(--header-color, var(--accent));
			filter: brightness(1.08);
		}

		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_REFEREE'] {
			display: none;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .value {
			display: flex;
			justify-content: center;
			background-color: var(--green);
			color: var(--white);
			font-size: 0.8rem;
			width: 4rem;
			height: 1.2rem;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .value .header-container {
			justify-content: center
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .value .header-container .heading {
			align-items: center;
			flex-direction: row;
			font-weight: 600;
			gap: 0.2rem;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls {
			display: none;
			align-items: center;
			gap: 0.2rem;
			margin-left: 0.3rem;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .value {
			width: 6rem;
			background-color: var(--white);
			color: var(--green);
			font-size: 0.8rem;
			padding-left: 0.3rem;
			font-weight: 600;
			height: 1.2rem;
			border-bottom: 2px solid var(--accent);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls {
			display: flex;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button {
			width: 1rem;
			height: 1rem;
			border-radius: 0.2rem;
			background-color: rgba(255, 255, 255, 0.25);
			color: var(--white);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button {
			background-color: rgba(0, 0, 0, 0.08);
			color: var(--green);
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button .ico-container {
			height: 0.6rem;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button.pitch-dec .ico-container svg {
			transform: scaleY(-1);
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button:hover {
			background-color: rgba(255, 255, 255, 0.45);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_PITCH'] .pitch-controls button:hover {
			background-color: rgba(0, 0, 0, 0.15);
		}
		
		section.edit-mode .content-data[data-layout='knockout']:has(.selected) .col[data-column='_PITCH'] .pitch-controls {
			pointer-events: none;
			opacity: 0.3;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] {
			width: 100%;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .value {
			display: flex;
			flex-direction: column;
			gap: 2px;
			border: 2px solid var(--white);
			overflow: hidden;
			position: relative;
		}

		.content-data[data-layout='knockout'] .data-item .assignment {
			display: flex;
			flex-grow: 1;
			min-width: 14rem;
			height: 3rem;
			padding: 0 0.2rem;
			align-items: center;
		}	
		
		section:not(.edit-mode) .content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .assignment[data-result='1'] {
			background-color: var(--green);
			color: var(--white);
		}

		.content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .header-container {
			padding: 0.2rem;
			align-items: center;
			gap: 0.2rem;
			font-size: 0.8rem;
			width: 100%;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .assignment .header-container .ico-container {
			height: 1.5rem;
		}
		
		.content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .header-container .heading h1 {
			font-weight: 600;
		}

		.content-data[data-layout='knockout'] .data-item[data-locked='1'] {
			pointer-events: none;
			opacity: 0.2;
		}
		
		.content-data[data-layout='knockout'] .vs {
			position: absolute;
			display: flex;
			top: calc(50% - 0.5px);
			left: 0;
			width: 100%;
			height: 1px;
			justify-content: center;
			align-items: center;
			color: var(--black);
			border-top: 1px solid var(--black);
		}
		
		.content-data[data-layout='knockout'] .vs .ico-container {
			height: 1.5rem;
			aspect-ratio: 1;
			padding: 0.2rem;
			background-color: var(--white);
			border-radius: 0.75rem;
		}
		
		.content-data[data-layout='knockout'] .vs .ico-container svg {
			opacity: 0.2
		}
		
		.content-data[data-layout='knockout'] .buffer-div {
			position: absolute;
			height: 50%;
			width: calc(2rem - 4px);
			padding: 0 2px;
		}

		section .content-data[data-layout='knockout'] .round-container .knockout-container .top-left-buffer    { top: 0;    left: 0;  border-bottom: 2px solid var(--black); }
		section .content-data[data-layout='knockout'] .round-container .knockout-container .top-right-buffer   { top: 0;    right: 0; border-bottom: 2px solid var(--black); }
		section .content-data[data-layout='knockout'] .round-container .knockout-container .bottom-left-buffer { bottom: 0; left: 0; }
		section .content-data[data-layout='knockout'] .round-container .knockout-container .bottom-right-buffer{ bottom: 0; right: 0; }

		section .content-data[data-layout='knockout'] .round-container .knockout-container:nth-child(even) .top-right-buffer,
		section .content-data[data-layout='knockout'] .round-container .knockout-container:nth-child(odd) .bottom-right-buffer {
			border-right: 2px solid var(--black);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .round-container .knockout-container .top-left-buffer    { border-bottom: 1px dashed var(--accent); }
		section.edit-mode .content-data[data-layout='knockout'] .round-container .knockout-container .top-right-buffer   { border-bottom: 1px dashed var(--accent);}

		section.edit-mode .content-data[data-layout='knockout'] .round-container .knockout-container:nth-child(even)  .top-right-buffer,
		section.edit-mode .content-data[data-layout='knockout'] .round-container .knockout-container:nth-child(odd) .bottom-right-buffer {
			border-right: 1px dashed var(--accent); 
		}
		
		section .content-data[data-layout='knockout'] .round-container[data-key='1'] .knockout-container .top-right-buffer,
		section .content-data[data-layout='knockout'] .round-container[data-key='1'] .knockout-container .bottom-right-buffer {
			border: none !important;
		}
		
		section .content-data[data-layout='knockout'] .round-container:first-of-type .knockout-container .top-left-buffer {
			border: none !important;
		}

		
		section:has(.content-data[data-layout='knockout']) .content-footer {
			display: none;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .round-container.disabled {
			opacity: 0.3;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .round-container[data-key='0'] .round-content {
			justify-content: flex-start;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item {
			border: none;
		}


		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_FIXTURE_TAG'] .header-container {
			background-color: transparent;
			color: var(--accent);
			font-size: 0.8rem;
			padding-left: 0.3rem;
			font-weight: 600;
			height: 1.2rem;
			border-bottom: 2px solid var(--accent);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .assignment {
			background-color: color-mix(in srgb, var(--accent) 25%, var(--white));
			border: 2px dashed var(--accent);
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .assignment[data-result='1'] {
			background-color: var(--green);
			color: var(--white);
		}

		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .assignment.selected
			, section.edit-mode .content-data[data-layout='knockout'] .data-item[data-table='team'].selected {
			background-color: var(--accent);
			border: 2px solid var(--green);
		}			
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item .col[data-column='_ASSIGNMENTS'] .vs {
			display: none;
		}	

		section.edit-mode .content-data[data-layout='knockout'] .data-item:has(.assignment:not([data-result='0'])):not(:has(.assignment[data-type='BYE'])) {
			pointer-events: none;
			opacity: 0.2;
		}
		
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item[data-table='team'] {
			width: 14rem;
			height: 3rem;
			padding: 0 0.2rem;
			background-color: color-mix(in srgb, var(--accent) 25%, var(--white));
			align-items: center;
			margin: 1rem;
			border: 2px dashed var(--accent);
		}

		section.edit-mode .content-data[data-layout='knockout'] .data-item[data-table='team'] .header-container {
			padding: 0.2rem;
			align-items: center;
			gap: 0.2rem;
			font-size: 0.8rem;
			width: 100%;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item[data-table='team'] .header-container .ico-container {
			height: 1.5rem;
		}
		
		section.edit-mode .content-data[data-layout='knockout'] .data-item[data-table='team'] .header-container .heading h1 {
			font-weight: 600;
		}

		
		
	/* ******************************************************************************** */
	/* CONTENT FOOTER																	*/
	/* ******************************************************************************** */	
	
		.content-footer {
			display: flex;
			width: 100%;
			border-top: 2px solid var(--shadow);
		}
		
		.content-footer .data-footer-label { 
			font-size: 0.6rem;
			font-weight: 600;
			flex-grow: 1;
			color: var(--shadow);
			padding: 0.25rem;
		}
		
		.content-footer .data-pagination {
			display: flex;
			gap: 0.2rem;
			margin-top: 0.2rem;
			margin-right: 0.2rem;
		}
		
		.content-footer .data-pagination button {
			color: var(--shadow);
			font-size: 0.8rem;
			padding: 0.2rem;
			border-bottom: 1px solid transparent;
		}
		
		.content-footer .data-pagination button.active {
			border-color: var(--shadow);
			font-weight: 900;
		}
		
	/* ******************************************************************************** */
	/* LOGIN						           			                                */
	/* ******************************************************************************** */


		#login-container {
			display: flex;
			height: 100vh;
			width: 100vw;
			justify-content: center;
			align-items: center;
			background-color: var(--base);
			color: var(--white);
		}
		
		#login-container form {
			display: flex;
			flex-direction: column;
			width: 100vw;
			height: 100%;
			padding: 2rem;
			gap: 0.5rem;
			background-color: var(--white);
			justify-content: flex-start;
			align-items: center;
		}
		
		#login-container .form-element-container {
			display: flex;
			align-items: center;
			width: 25rem;
			gap: 0.2rem;
			background-color: var(--base);
			border: 5px solid var(--base);
		}
		
		#login-container .form-element-label {
			color: var(--white);
			font-size: 0.8rem;
			font-weight: 900;
			padding: 0 0.2rem;
			min-width: 6rem;
		}
		
		#login-container .form-element-input-container {
			background-color: var(--soft);
			flex-grow: 1;
		}
		
		#login-container input.form-element-input {
			padding: 0.2rem 0.5rem;
			width: 100%;
			font-size: 1.5rem;
			border: 1px solid var(--white);
		}
		
		#login-container input.form-element-input:read-only {
			background-color: var(--base);
			color: var(--white);
			border: none;
		}
		
		#login-container button {
			background-color: var(--base);
			width: 6rem;
			height: 2.5rem;
			font-size: 0.8rem;
			font-weight: 600;
			margin: 1rem;
			border: 2px solid var(--soft);
		}
		
		#login-container button:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
		
		#login-container .alert-container {
			width: 25rem;
			min-height: 1rem;
			color: var(--red);
			font-size: 0.75rem;
			font-weight: 600;
			text-align: center;
			white-space: normal;
		}

	/* ============================================================
	   Self-Service Registration
	   ============================================================ */

	#registration-container {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 200;
		flex-direction: column;
		background-color: var(--white);
		color: var(--shadow);
	}

	#registration-container.open {
		display: flex;
	}

	#registration-container .registration-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.5rem;
		background-color: var(--base);
		flex-shrink: 0;
	}

	#registration-close-btn {
		height: 2rem;
		width: 2rem;
		flex-shrink: 0;
		color: var(--white);
	}

	.registration-breadcrumb {
		display: flex;
		gap: 0.5rem;
		flex-grow: 1;
		overflow-x: auto;
	}

	.registration-crumb {
		padding: 0.5rem 1rem;
		border-radius: 999px;
		background-color: rgba(255, 255, 255, 0.15);
		color: var(--white);
		font-size: 0.7rem;
		font-weight: 900;
		opacity: 0.5;
		white-space: nowrap;
	}

	.registration-crumb.filled {
		opacity: 1;
	}

	.registration-crumb.active {
		background-color: var(--accent);
		color: var(--black);
		opacity: 1;
	}

	.registration-crumb:disabled {
		opacity: 0.2;
		pointer-events: none;
	}

	.registration-body {
		flex-grow: 1;
		overflow-y: auto;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.registration-back-btn {
		align-self: flex-start;
		font-size: 0.7rem;
		font-weight: 900;
		color: var(--shadow);
		opacity: 0.6;
		text-transform: uppercase;
	}
	
	.registration-back-btn .ico-container {
		height: 1rem;
	}

	.registration-back-btn:hover {
		opacity: 1;
	}

	.registration-heading {
		font-size: 1.5rem;
		font-weight: 900;
		text-transform: uppercase;
		color: var(--shadow);
		text-align: center;
		white-space: normal;
	}

	#registration-container section[data-registration-step] {
		flex-direction: column;
		min-height: 0;
		width: 100%;
		max-width: 60rem;
	}

	#registration-container section[data-registration-step] .section-header {
		flex-direction: row;
		width: auto;
		writing-mode: horizontal-tb;
		color: var(--shadow);
		padding-top: 0;
		margin-bottom: 1rem;
	}

	#registration-container section[data-registration-step] .section-header .ico-container {
		height: 1.8rem;
		transform: none;
		background-color: transparent;
		color: var(--shadow);
	}

	#registration-container section[data-registration-step] .section-header .heading {
		writing-mode: horizontal-tb;
	}

	#registration-container section[data-registration-step] .section-header h1 {
		font-size: 1.5rem;
		font-weight: 900;
		text-transform: uppercase;
	}

	#registration-container section[data-registration-step] .section-content {
		width: 100%;
		padding: 0;
		min-height: 70vh;
	}

	#registration-container .content-data[data-layout='grid'] {
		justify-content: center;
	}
	
	#registration-container section[data-registration-step='identifier'] .data-item.disabled {
		position: relative;
	}

	#registration-container section[data-registration-step='identifier'] .data-item.disabled::after {
		content: 'TAKEN';
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.55);
		color: var(--white);
		font-size: 0.7rem;
		font-weight: 900;
		letter-spacing: 0.05em;
		border-radius: inherit;
	}

	.registration-entries {
		width: 100%;
		max-width: 40rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.registration-entries-item {
		display: flex;
		align-items: center;
		gap: 1rem;
		background-color: var(--soft);
		border-radius: 0.5rem;
		padding: 0.75rem 1rem;
	}

	.registration-entries-label {
		font-size: 0.65rem;
		font-weight: 900;
		color: var(--white);
		background-color: var(--shadow);
		padding: 0.2rem 0.6rem;
		border-radius: 999px;
		flex-shrink: 0;
	}

	.registration-entries-name {
		flex-grow: 1;
		font-weight: 600;
		white-space: normal;
	}

	.registration-entries-remove {
		height: 1.2rem;
		width: 1.2rem;
		flex-shrink: 0;
		color: var(--red);
	}

	.registration-detail-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		width: 100%;
	}

	.registration-or {
		font-size: 0.7rem;
		font-weight: 900;
		opacity: 0.5;
	}

	.registration-input-row {
		display: flex;
		gap: 1rem;
		align-items: center;
	}

	.registration-name-input {
		font-size: 1rem;
		padding: 0.75rem 1rem;
		border: 0.15rem solid var(--highlight);
		border-radius: 0.5rem;
		width: 16rem;
	}

	.registration-name-input.invalid {
		border-color: var(--red);
	}

	.registration-primary-btn {
		background-color: var(--accent);
		color: var(--black);
		font-weight: 900;
		text-transform: uppercase;
		font-size: 0.8rem;
		padding: 0.9rem 1.75rem;
		border-radius: 0.5rem;
	}

	.registration-primary-btn:disabled {
		opacity: 0.3;
		pointer-events: none;
	}

	.registration-secondary-btn {
		background-color: var(--soft);
		color: var(--shadow);
		font-weight: 900;
		text-transform: uppercase;
		font-size: 0.8rem;
		padding: 0.9rem 1.75rem;
		border-radius: 0.5rem;
	}

	.registration-rules {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
		max-width: 40rem;
		background-color: var(--soft);
		border-radius: 0.75rem;
		padding: 1.5rem;
	}

	.registration-rule h2 {
		font-size: 0.8rem;
		font-weight: 900;
		text-transform: uppercase;
		color: var(--shadow);
		white-space: normal;
	}

	.registration-rule p {
		font-size: 0.8rem;
		white-space: pre-wrap;
	}

	.registration-confirm-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.registration-confirm-check {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.8rem;
		font-weight: 600;
		white-space: normal;
	}

	.registration-success {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
		white-space: normal;
	}

	.registration-success .ico-container {
		height: 4rem;
		color: var(--green);
	}

	.registration-success h1 {
		font-size: 1.4rem;
		font-weight: 900;
		text-transform: uppercase;
	}

	.registration-success p {
		font-size: 0.9rem;
		opacity: 0.7;
	}


	/* ============================================================
	   Notices (error/success feedback toasts)
	   ============================================================ */

	#notice-container {
		position: fixed;
		top: 1rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 300;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		pointer-events: none;
	}

	.notice {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.75rem 1.25rem;
		border-radius: 0.5rem;
		background-color: var(--shadow);
		color: var(--white);
		font-size: 0.8rem;
		font-weight: 600;
		white-space: normal;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity 200ms ease, transform 200ms ease;
	}

	.notice.visible {
		opacity: 1;
		transform: translateY(0);
	}

	.notice[data-type='error'] {
		background-color: var(--red);
	}

	.notice[data-type='success'] {
		background-color: var(--green);
	}

	.notice .ico-container {
		height: 1.1rem;
		flex-shrink: 0;
	}


	/* ============================================================
	   Referee Mode
	   ============================================================ */

	#referee-container {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 200;
		flex-direction: column;
		background-color: var(--white);
		color: var(--shadow);
	}

	#referee-container.open {
		display: flex;
	}

	#referee-container .referee-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.5rem;
		background-color: var(--base);
		flex-shrink: 0;
	}

	#referee-close-btn {
		height: 2rem;
		width: 2rem;
		flex-shrink: 0;
		color: var(--white);
	}

	.referee-pitch-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		flex-grow: 1;
	}

	.referee-pitch-nav .header-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-width: 8rem;
		color: var(--white);
	}

	.referee-pitch-nav .header-container .ico-container {
		height: 1.6rem;
	}

	.referee-pitch-nav .header-container .heading {
		text-align: center;
	}

	.referee-pitch-nav .header-container h1 {
		font-size: 1rem;
		font-weight: 900;
		text-transform: uppercase;
	}

	.referee-pitch-nav .header-container h2 {
		font-size: 0.7rem;
		font-weight: 600;
		opacity: 0.8;
		text-transform: uppercase;
	}

	.referee-pitch-nav .header-container .status {
		display: none;
	}

	.referee-body {
		flex-grow: 1;
		overflow-y: auto;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.referee-empty {
		font-size: 0.9rem;
		font-weight: 600;
		opacity: 0.6;
		padding: 2rem;
		text-align: center;
		white-space: normal;
	}

	.referee-game {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		width: 100%;
		max-width: 32rem;
		background-color: var(--soft);
		border-radius: 0.75rem;
		padding: 1.5rem;
	}

	.referee-game-round {
		font-size: 0.8rem;
		font-weight: 900;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		opacity: 0.6;
	}

	.referee-matchup {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 1rem;
		width: 100%;
	}

	.referee-team {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.6rem;
		flex: 1 1 0;
		padding: 1rem 0.5rem;
		border-radius: 0.6rem;
		border: 0.2rem solid var(--highlight);
		background-color: var(--white);
		color: var(--shadow);
	}

	.referee-team.winner {
		border-color: var(--green);
		background-color: var(--green);
		color: var(--white);
	}

	.referee-team.loser {
		opacity: 0.4;
	}

	.referee-team-name-btn {
		display: flex;
		color: inherit;
	}

	.referee-team-name-btn .header-container,
	.referee-team-header .header-container {
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
	}

	.referee-team-name-btn .header-container .ico-container,
	.referee-team-header .header-container .ico-container {
		height: 2rem;
	}

	.referee-team-name-btn .header-container .heading,
	.referee-team-header .header-container .heading {
		align-items: center;
		text-align: center;
	}

	.referee-team-name-btn .header-container h1,
	.referee-team-header .header-container h1 {
		font-size: 0.85rem;
		font-weight: 900;
		text-transform: uppercase;
		white-space: normal;
	}

	.referee-team-name-btn .header-container h2,
	.referee-team-header .header-container h2 {
		font-size: 0.65rem;
		font-weight: 600;
		opacity: 0.75;
		text-transform: uppercase;
		white-space: normal;
	}

	.referee-team-name-btn .header-container .status,
	.referee-team-header .header-container .status {
		display: none;
	}

	.referee-score {
		font-size: 1.6rem;
		font-weight: 900;
		font-variant-numeric: tabular-nums;
	}

	.referee-score-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4rem;
	}

	.referee-score-btn {
		background-color: var(--highlight);
		color: var(--shadow);
		font-size: 0.7rem;
		font-weight: 900;
		padding: 0.4rem 0.6rem;
		border-radius: 0.4rem;
	}

	.referee-team.winner .referee-score-btn,
	.referee-team.loser .referee-score-btn {
		background-color: rgba(255, 255, 255, 0.3);
		color: inherit;
	}

	.referee-vs {
		font-size: 0.75rem;
		font-weight: 900;
		opacity: 0.5;
		flex-shrink: 0;
		align-self: center;
	}

	.referee-game-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}

	.referee-hint {
		font-size: 0.65rem;
		opacity: 0.5;
		text-align: center;
		white-space: normal;
	}

	.referee-clock {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		width: 100%;
		padding-top: 1rem;
		border-top: 2px solid var(--highlight);
	}

	.referee-clock-display {
		font-size: 2rem;
		font-weight: 900;
		font-variant-numeric: tabular-nums;
		color: var(--shadow);
	}

	.referee-clock-controls {
		display: flex;
		gap: 0.75rem;
	}

	.referee-btn {
		background-color: var(--accent);
		color: var(--black);
		font-weight: 900;
		text-transform: uppercase;
		font-size: 0.8rem;
		padding: 0.75rem 1.5rem;
		border-radius: 0.5rem;
	}

	.referee-btn:disabled {
		opacity: 0.3;
		pointer-events: none;
	}

	.referee-btn-secondary {
		background-color: var(--soft);
		color: var(--shadow);
		border: 0.15rem solid var(--highlight);
	}

	/* ******************************************************************************** */
	/* REFEREE MODE - PENALTY KICKS														*/
	/* ******************************************************************************** */

	.referee-penalty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		width: 100%;
	}

	.referee-penalty-heading {
		font-size: 1rem;
		font-weight: 900;
		letter-spacing: 0.05em;
		color: var(--shadow);
		opacity: 0.7;
	}

	.referee-penalty-matchup {
		width: 100%;
		align-items: flex-start;
	}

	.referee-penalty-team {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		flex: 1 1 0;
	}

	.referee-penalty-count {
		font-size: 2.5rem;
		font-weight: 900;
		font-variant-numeric: tabular-nums;
		color: var(--shadow);
		line-height: 1;
	}

	.referee-penalty-buttons {
		display: flex;
		gap: 0.5rem;
	}

	.referee-penalty-buttons .referee-btn {
		padding: 0.5rem 0.9rem;
		font-size: 0.7rem;
	}

	/* Classic tally marks: four upright strokes, a fifth struck diagonally
	   through the group - a quick, at-a-glance running count. */
	.tally-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		min-height: 1.4rem;
	}

	.tally-group {
		position: relative;
		display: flex;
		gap: 0.15rem;
		padding: 0 0.15rem;
	}

	.tally-mark {
		width: 0.15rem;
		height: 1.4rem;
		background-color: var(--shadow);
		border-radius: 1px;
	}

	.tally-mark.tally-strike {
		position: absolute;
		left: -0.1rem;
		right: -0.1rem;
		top: 50%;
		width: auto;
		height: 0.15rem;
		transform: rotate(-32deg);
		border-radius: 1px;
	}