style.css

	body {
		margin: 0;
		padding: 0;
		/* Make text unselectable */
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		display: inline;
		font-family: 'Arial', sans-serif;
		height: 100vh;
		background-color: #2c2f34;
		color: rgb(239, 238, 241);
		white-space: nowrap;
		cursor: default;
	}
	/* Colors */
	:root{
	--Team1default: #FF3300;
	--Team2default: #2299FF;
	--Commander1: #FF3300;
	--Commander2: #2299FF;
	--Unassigned1:#FFFFFF;
	--Unassigned2:#FFFFFF;
	--Squad1:#9395ea;
	--Squad2:#c4c400;
	--Squad3:#800080;
	--Squad4:#56a8a7;
	--Squad5:#ff8040;
	--Squad6:#2ed232;
	--Squad7:#00ffff;
	--Squad8:#ff0080;
	--Squad9:#a56d5a;
	--SquadGreen: #00FF00
	}
	
	#mainContainer {
		height: 100vh;
		width: 100%;
	}
	
	
	/* ---------- loading interface ------------ */
	
	#DemoSelectionInterfaceInner, #loadingStatusOverlay {
		/* make text selectable */
		-moz-user-select: initial;
		-khtml-user-select: initial;
		-webkit-user-select: initial;
		-ms-user-select: initial;
		user-select: initial;
		-webkit-touch-callout: initial;
		margin: 0 auto;
		padding: 20px 0;
		margin-top: 60px;
		max-width: 700px;
		font-size: 20px;
		color: white;
		background-color: #45484f;
		border-radius: 5px;
		box-shadow: 0 5px 15px 0 rgba(0,0,0,.5);
		margin: 20px auto;
		text-align: center;
		z-index: 10000
}
	
	#demoFileSelectionURL {
		display: block;
		margin: 10px auto;
		max-width: max-content;
	}
	
	#demoFileSelectionLoadURL {
		display: block;
		margin: 10px auto;
		margin-top: 5px;
	}
	
	#demoFileSelection {
		display: flex;
		margin: 10px auto;	 
	}
	
	/*---------- Floaters ----------*/
	
	.subMenuToggle {
		position: fixed;
		right: 30px;
		height: 30px;
		width: 30px;
		font-size: 22px;
		display: block;
		background-color: rgba(23, 35, 34, 0.75);
		cursor: pointer;
		z-index: 10;
	}
	.subMenuToggle img
	{
		height: 30px;
		width: 30px;
	}
	
	.subMenuToggle:hover {
		background-color: darkslategray;
		transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s;
		-webkit-transitifoon: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s;
	}

	#copyLink {
		top: 20px;
		right: 110px;
	}

	#headerInner {
		width: max-content;
		height: 100%;
		font-size: 24px;
		background-color: #433f4a;
		text-align: right;
		color: lightgrey;
		position: fixed;
		right: 150px;
		top: 20px;
		z-index: 5;
		box-shadow: 2px 3.5px #34313a;
		height: 30px;
		padding: 0 2px 0 2px;
	}
	
	#bookmarksMenu
	{
		overflow-y: auto;
	}
	#bookmarksTable 
	{
		border-collapse:collapse;
		table-layout:fixed;
		width: 100%;
	}
	#bookmarksTable td
	{
		white-space: pre-wrap; 
		white-space: -moz-pre-wrap; 
		word-break: break-all;
		cursor: pointer;
	}
	/* Time */
	#bookmarksTableColgroup > col:nth-child(1) {width: 60px;}
	/* Comment */
	/* #bookmarksTableColgroup > col:nth-child(2) {width: 100px;} */
	/* Remove */
	#bookmarksTableColgroup > col:nth-child(3) {width: 100px;}
	
	#bookmarkCommentField
	{
		width: 100%
	}
	
	
	#mapOptions {
		position: absolute;
		top: 20px;
		right: 30px;
		width: 30px;
		height: 30px;
		background-color: rgba(23, 35, 34, 0.75);
		z-index: 10;
	}
	
	#toggleBookmarks {
		top: 20px;
		right: 70px;
	}
	
	#mapOptions img,#toggleBookmarks img {
		height: 25px;
		width: 25px;
		padding: 2.5px;
	}
	

	
	#mapOptionsButton {
		position: absolute;
		display: inline-block;
		height: inherit;
		width: inherit;
	}
	
	#mapOtionsInput {
		display: none;
	}
	
	#mapOptions:hover {
		/* box-shadow: 1px 2px #37474F;
		transform: translateY(1.5px) translateX(1px); */
		background-color: darkslategray;
	}
	
	#mapOptionsDiv {
		display: none;
		color: black;
		background-color: white;
		width: auto;
		height: auto;
		top: 55px;
		right: -5px;
		position: fixed;
		white-space: nowrap;
		border-radius: 2px;
		border: 1px solid grey;
		box-shadow: 0.5px 0.5px 5px 0px black;
		margin: 0 30px 0 0;
		z-index: 5;
	}
	
	#mapOtionsInput:checked + #mapOptionsDiv {
		display: block;
	}
	
	
	.autoScroll
	{
		height: 16px;
		width: 16px;
		vertical-align: middle;
		margin: 0px 0px 0px 30px;
	}
	
	
	
	.color_Team1
	{
		color: var(--Team1default);
	}
	.color_Team2
	{
		color: var(--Team2default);
	}
	.color_Squad
	{
		color: var(--SquadGreen);
	}
	
	
	.futureRow
	{
		opacity: 0.3 !important;
	}
	
	/* -------------- Scoreboard ------------- */
	#scoreBoard
	{
		font-size: 10px !important;
	}
	
	/*	#generated with
for i in range(1,3): 
	print "#Team"+str(i)+"Table > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander"+str(i)+");}"
	print "#Team"+str(i)+"Table > .scoreboard-squad-table:nth-child(1) thead {color: var(--Commander"+str(i)+");}"

for i in range(1,10): 
	print ".scoreboard-squad-table:nth-child("+str(i+1)+") {border-left: 5px solid var(--Squad"+str(i)+");}"
	print ".scoreboard-squad-table:nth-child("+str(i+1)+") thead {color: var(--Squad"+str(i)+");}"
	
for i in range(1,3): 
	print ".scoreboard-squad-table:nth-child(11) {border-left: 5px solid var(--Unassigned"+str(i)+");}"
	print ".scoreboard-squad-table:nth-child(11) thead {color: var(--Unassigned"+str(i)+");}"
*/

	#Team1Players > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander1);}
	#Team1Players > .scoreboard-squad-table:nth-child(1) thead {color: var(--Commander1);}
	#Team2Players > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander2);}
	#Team2Players > .scoreboard-squad-table:nth-child(1) thead {color: var(--Commander2);}
	.scoreboard-squad-table:nth-child(2) {border-left: 5px solid var(--Squad1);}
	.scoreboard-squad-table:nth-child(2) thead {color: var(--Squad1);}
	.scoreboard-squad-table:nth-child(3) {border-left: 5px solid var(--Squad2);}
	.scoreboard-squad-table:nth-child(3) thead {color: var(--Squad2);}
	.scoreboard-squad-table:nth-child(4) {border-left: 5px solid var(--Squad3);}
	.scoreboard-squad-table:nth-child(4) thead {color: var(--Squad3);}
	.scoreboard-squad-table:nth-child(5) {border-left: 5px solid var(--Squad4);}
	.scoreboard-squad-table:nth-child(5) thead {color: var(--Squad4);}
	.scoreboard-squad-table:nth-child(6) {border-left: 5px solid var(--Squad5);}
	.scoreboard-squad-table:nth-child(6) thead {color: var(--Squad5);}
	.scoreboard-squad-table:nth-child(7) {border-left: 5px solid var(--Squad6);}
	.scoreboard-squad-table:nth-child(7) thead {color: var(--Squad6);}
	.scoreboard-squad-table:nth-child(8) {border-left: 5px solid var(--Squad7);}
	.scoreboard-squad-table:nth-child(8) thead {color: var(--Squad7);}
	.scoreboard-squad-table:nth-child(9) {border-left: 5px solid var(--Squad8);}
	.scoreboard-squad-table:nth-child(9) thead {color: var(--Squad8);}
	.scoreboard-squad-table:nth-child(10) {border-left: 5px solid var(--Squad9);}
	.scoreboard-squad-table:nth-child(10) thead {color: var(--Squad9);}
	.scoreboard-squad-table:nth-child(11) {border-left: 5px solid var(--Unassigned1);}
	.scoreboard-squad-table:nth-child(11) thead {color: var(--Unassigned1);}
	.scoreboard-squad-table:nth-child(11) {border-left: 5px solid var(--Unassigned2);}
	.scoreboard-squad-table:nth-child(11) thead {color: var(--Unassigned2);}
	
	
	.scoreboard-squad-table thead
	{
		cursor: pointer;
	}
	
	#Team1Players, #Team2Players {
		width: auto;
		margin-right: 1px;
	}
	
	#Team1Players {
		float: left;
		color: var(--Team1default);
	}
	
	#Team2Players {
		float: left;
		color: var(--Team2default);
	}
	
	.scoreboard-squad-table{
		padding-top:4px;
		margin-left: 2px;
		border-spacing: 0;
		width: auto;
	}
	
	.scoreboard-squad-table-collapsed  > .player-row	
	{
		display: none !important;
	}
	
	.scoreboard-squad-table-selected {
		outline: solid 1px #00FF00 !important;
	}
	
	
	.player-row 
	{
		height: 22px !important;
		cursor: pointer;
	}
	
	.player-row  td
	{
		padding: 0px;
	} 
	
	/* Name */
	.player-row td:nth-child(1) {width: 140px;}
	/* K/D */
	.player-row td:nth-child(2) {width: 28px;}
	/* Kit */
	.player-row td:nth-child(3) {width: 16px;}
	/* Vehicle */
	.player-row td:nth-child(4) {width: 16px;}
	
	.player-row-selected {
		outline: solid 1px yellow !important;
	}
	
	.player-row-dead {
		color: #666666;
	}
	
	.player-row-squadlead {
		font-weight: bold;
	}
	
	/*----------Map ----------*/
	
	
	#mapDiv, #renderers
	{
		position: absolute;
		overflow: hidden;
		background-color: #333;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;
	}
	
	
	#scoreBoard , #vehicles
	{
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
		height: 100%;
	}
	#vehicles
	{
		font-size: 12px !important;
	}
	
	
	#Team2Vehicles {
		float: left;
		margin: 1px;
	}
	
	#Team1Vehicles {
		float: left;
		margin: 1px;
	}
	
	
	.vehicleTable {
		font-size: 10px;
		width: 300px;
		border-bottom: 1px solid black;
		text-align: left;
		cursor: pointer;
	}
	
	.vehicleTable tr:nth-child(1) {text-align: center !important;}
	.vehicleTable tr:nth-child(2) {text-align: center !important;}
	/* .vehicleTable td:nth-child(1) {} */
	.vehicleTable td:nth-child(2) {text-align: right;}
	
	.vehicleTable img {
		width: 20px;
		height: 20px;
	}
	
	.vehicleTable-selected {
		outline: 1px solid yellow !important;
	}
	

	.killsRow:hover, .vehicleTable:hover, .player-row:hover
	{
		outline: dotted 1px yellow;
	}
	
	
	/*---------- End of Info Bars ----------*/
	/*---------- Control bar ----------*/
	
	#controlBarContainer {
		position: absolute;
		height: 2.4em;
		bottom: 0px;
		right: 0px;
		left: 0px;
		z-index: 4;
		padding: 10px;
		align-items: flex-end;
	}
	
	#startPauseButton {
		position: relative;
		background-color: rgba(23, 35, 34, 0.75);
		height: 100%;
		float: left;
		display: flex;
		justify-content: flex-end;
		width: 2.7em;
		margin-right: 0.5em;
		border-radius: 2px;
		border: none;
		outline: 0;
		overflow: hidden;
	}
	
	#startPauseButton:hover {
		background-color: darkslategray;
	}

	
	.play-icon {
		width: 100%;
		height: 100%;
		display: none;
		margin: 0 auto;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	.play-icon svg {
		fill: white;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-user-select: none;
		outline-width: 0px;
		box-sizing: border-box;
		outline: inherit;
		width: 100%;
		height: 100%;
	}

	.pause-icon {
		width: 100%;
		height: 100%;
		display: none;
		margin: 0 auto;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.pause-icon svg {
		width: 100%;
		height: 100%;
		fill: white;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		outline-width: 0px;
		box-sizing: border-box;
		outline: inherit;
	}
	
	.state-playing .pause-icon {
		display: block;
	}
	
	.state-paused .play-icon {
		display: block;
	}
	
	#controlBar {
		position: relative;
		background-color: rgba(23, 35, 34, 0.75);
		height: 100%;
		display: flex;
		justify-content: flex-end;
		border-radius: 2px;
		padding: 0px 0px 0px 1em;
		user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
	}
	
	#playBarLabel {
		position: relative;
		float: left;
		width: 100%;
		padding-top: 7.5px;
	}
	
	#playBar {
		position: relative;
		float: right;
		width: 100%;
	}
	#playBarBubble {
		position: absolute;
		top: -20px;
		z-index: 5;
	}
	
	#addBookmarkButton
	{
		font-size: 24px;
	}
	
	#controlBarOptions {
		position: relative;
		float: right;
		width: 40px;
		top: 0px;
		margin: 0 auto;
		padding-top: 5px;
		padding-left: 5px;
	}
	
	#controlBarOptions svg path {
		fill: white;
		stroke: white;
	}
	
	#playSpeed {
		position: relative;
		width: 100%;
		height: 90%;
		top: 0.6em;
		right: 0.1em;
		-webkit-appearance: slider-vertical;
	}
	
	#playSpeedLabel {
		padding: 0 0;
		position: absolute;
		bottom: 2.4em;
		display: none;
		height: 12em;
		width: 2.2em;
		background-color: rgba(23, 35, 34, 0.75);
	}
	#controlBarOptions:hover #playSpeedLabel {
		display: block;
	}

	/*---------- End of control bar ----------*/
	
	*:active,
	*:hover {
		
	}
	.cursorPointer , input[type='checkbox']
	{
		cursor: pointer;
	}
	
	
	#menuList
	{
		position: fixed;
		display: block;
		z-index: 50;
		
	}
	
	.no-close .ui-dialog-titlebar-close {
		display: none;
	}