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;
	}
	/* 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;
	}
	
	#mainContainer {
		height: 100vh;
		width: 100%;
	}
	
	#DemoSelectionInterface {
		/* 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;
	}
	
	#DemoSelectionInterfaceInner, #loadingStatusOverlay {
		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 ----------*/
	
	#floaters {
		position: fixed;
		z-index: 5;
	}
	
	#headerInner {
		width: max-content;
		height: 100%;
		font-size: 24px;
		background-color: #433f4a;
		text-align: right;
		color: lightgrey;
		position: fixed;
		right: 110px;
		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;
	}
	
	#openBookmarks {
		position: absolute;
		top: 20px;
		right: 70px;
		width: 30px;
		height: 30px;
		background-color: rgba(23, 35, 34, 0.75);
		z-index: 10;
	}
	
	#mapOptions img,#openBookmarks 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;
	}
	
	#mapOptionsTable {
		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 + #mapOptionsTable {
		display: block;
	}
	/*---------- End of Floaters ----------*/
	/*----------Map ----------*/
	
	#mapDiv {
		position: absolute;
		overflow: hidden;
		background-color: #333;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;
	}
	/*---------- End of Map ----------*/
	/*---------- Info Bars ----------*/
	
	.subMenuToggle {
		position: fixed;
		right: 30px;
		height: 50px;
		width: 50px;
		font-size: 22px;
		display: block;
		background-color: rgba(23, 35, 34, 0.75);
	}
	
	.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;
	}
	
	
	#scoreBoard , #killfeed, #vehicles
	{
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
		height: 100%;
	}
	#vehicles
	{
		font-size: 12px !important;
	}
	#killfeed
	{
		font-size: 12px !important;
	}
	#KillFeedTable
	{
		table-layout: fixed;
		width: 100%;
		text-overflow: ellipsis;
	}
	#scoreBoard
	{
		font-size: 10px!important;
	}
	
	.subMenuToggleTitle {
		font-size: inherit;
		margin-left: 33%;
	}
	
	.submenu-open {
		display: block !important;
	}
	
	.submenu-toggle-open {
		background-color: darkcyan;
	}
	
	
	#scoreBoardToggle
	{
		top: 60px;
	}
	
	#killfeedToggle 
	{
		top: 120px;
	}
	
	#vehiclesToggle
	{
	   top: 180px; 
	}
	
	.killfeedRow 
	{
		cursor: pointer;
	}
	.killfeedRow td
	{
		overflow: hidden;
	}
	.killfeedRow_Future
	{
		opacity: 0.12 !important;
	}
	.killfeed_Team1
	{
		color: var(--Team1default);
	}
	#killfeed_lockScroll
	{
		margin: 0px 0px 0px 30px;
	}
	.killfeed_Team2
	{
		color: var(--Team2default);
	}
	
	
	
	
	#Team1,
	#Team2 {
		width: auto;
		margin-right: 1px;
	}
	
	#Team1 {
		float: left;
		color: var(--Team1default);
	}
	
	#Team2 {
		float: left;
		color: var(--Team2default);
	}
	
	#Team2Vehicles {
		float: left;
		margin: 1px;
	}
	
	#Team1Vehicles {
		float: left;
		margin: 1px;
	}
	

/*	#generated with
for i in range(1,3): 
	print "#Team"+str(i)+" > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander"+str(i)+");}"
	print "#Team"+str(i)+" > .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)+");}"
*/

	#Team1 > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander1);}
	#Team1 > .scoreboard-squad-table:nth-child(1) thead {color: var(--Commander1);}
	#Team2 > .scoreboard-squad-table:nth-child(1) {border-left: 5px solid var(--Commander2);}
	#Team2 > .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{
		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: 20px !important;
		cursor: pointer;
	}
	
	/* 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;
	}
	
	/* Time */
	#KillFeedTableColGroup > col:nth-child(1) {width: 50px;}
	/* Name 1 */
	#KillFeedTableColGroup > col:nth-child(2) {width: 140px;}
	/* Distance */
	#KillFeedTableColGroup > col:nth-child(3) {width: 50px;}
	/* Name 2 */
	#KillFeedTableColGroup > col:nth-child(5) {width: 140px;}
	
	
	.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 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;
	}
	

	.killfeedRow: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%;
		display: none;
		margin: 0 auto;
		padding: 0.2em 0 0 0.2em;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
	}
	
	.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: auto;
	}
	
	.pause-icon {
		width: 100%;
		display: none;
		margin: 0 auto;
		padding: 0.2em 0 0 0.2em;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-user-select: none;
		width: 100%;
		height: auto;
	}
	
	.pause-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;
	}
	
	.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;
	}
	
	#playBarLabel {
		position: relative;
		float: left;
		width: 100%;
		top 0;
		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;
	}
	
	#controlBarOptions:hover #playSpeedLabel {
		display: block;
	}
	
	#playSpeed {
		position: relative;
		float: right;
		width: 100%;
		margin: 0 auto;
		padding: 0.5em 0;
	}
	
	#playSpeedLabel {
		padding: 0 10px;
		position: absolute;
		bottom: 2.4em;
		right: 0;
		display: none;
		height: 2em;
		width: 8em;
		background-color: rgba(23, 35, 34, 0.75);
	}

	/*---------- End of control bar ----------*/
	
	*:active,
	*:hover {
		
	}