.flipX{
	transform:scaleX(-1);
}
/*	TODO half screen and mobile center table?
	Player level is multi-lining (fix that)
	<1/1 aspect should always show email and shrink font (perhaps smaller email width for scroll) 
		OR should have a popup rendered on click "show" as opposed to hover (since mobile cant hover)
*/
#tooltip{
	padding:.25em .5em;
	font-size:8pt;
	position:absolute;
	left: 200px;
	top:50%;
}
table{

    border-spacing: 0;
}
#agentsTarget>tr>th{
	font-size:12pt;
	height:20px;
	padding:0 .5em;
	white-space:nowrap;
}
#agentsTarget>tr:nth-child(odd){
	background-color:#ddd;
}
#agentsTarget>tr:nth-child(even){
	background-color:#ccc;
}

#agentsTarget>tr.tableheader{
	background-color:var(--color-primary-accent);
	color:#eee;
}
#agentsTarget{
	gap:0;}
#agentsTarget>tr>td{
	font-size:10pt;
	height:20px;
	padding:0 .5em;
	text-align:center;
}

.coltext::-webkit-scrollbar
{
  height: 8px;              /* height of horizontal scrollbar ← You're missing this */
  padding:4px;
  background:white;
  opacity:.5;
}
.coltext::-webkit-scrollbar-track
{
  height: 6px;              /* height of horizontal scrollbar ← You're missing this */
  width: 6px;               /* width of vertical scrollbar */
  background:transparent;
}

.coltext::-webkit-scrollbar-thumb
{
  height: 6px;              /* height of horizontal scrollbar ← You're missing this */
  width: 6px;               /* width of vertical scrollbar */
  background:var(--color-primary-accent);
  border:3px solid white;
}
.coltext{
	overflow-x:auto;
	overflow-y:clip;
	scrollbar-width: thin;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
}
.coltext{
  padding-bottom:1px;
}

.emailcoltext{
max-width:24ch;
}
.mainscoltext{
max-width:18ch;
}
.coltext{
	display:inline-block;
}
.overflow-marker::after{
	content:"\2194";
	font-size:12pt;
	color:var(--color-main);
	position:relative;
	right:-.25em;
	top:-.25em;
}
#agentsTarget>tr>td:hover>.coltext{
	/*max-width:fit-content;*/
}
#agentsTarget>tr>td{
	/*max-width:fit-content;*/
	white-space:nowrap;
}
.showtext{
	display:none;
}
#controls{
	display:flex;
	justify-content:flex-start;
	flex-direction:column;
	width:fit-content;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:.5em;
	border-right:solid 1px #aaa;
	
	min-height:fit-content;
	height:100%;
}

#controlsForm{
	display:grid;
	/*grid-template-columns: max-content 100px;*/
	grid-template-columns: max-content max-content;
	grid-column-gap:.25em;
	grid-row-gap:.5em;
	
	width:fit-content;
}
#controlsForm>*{
	font-size:8pt;
	word-wrap:no-wrap;
}
.colspan{
	 grid-column: 1 / -1;
}
.sliderGrid{
	display:grid;
	grid-template-columns: calc(100% - 11ch) 11ch;
	grid-column-gap:.25em;
	grid-row-gap:.25em;
}
.sliderLabel{
	width:8ch;
	text-align:center;
}

select{
	min-width:fit-content;
}
input[type="text"]{
	width:100%;
}
#plvl{
	box-sizing:border-box;
	margin:2px 4px;
}
#plvl[type="number"]{
}
#main_content,.main_content{
		padding-left:2em;
		padding-right:2em;
}
#plvlLabel{
	font-size:10pt;
	padding:0;
	padding-top:2px;
	
}
.sideBySide{
	display:grid;
	grid: max-content / max-content auto;
	align-items:flex-start;
}
.tableWrapper{
	padding-bottom:1em;
	width:100%;
	max-width:calc(100vw - 5em);
	overflow-x:scroll;
	display:flex;
	justify-content:flex-start;
	padding-left:1em;
}
@media (max-aspect-ratio:7/4)
{
	#agentsTarget>tr>th{
		font-size:10pt;
	}
	.emailcoltext{
		max-width:16ch;
	}
	.mainscoltext{
		max-width:12ch;
	}
}
@media (max-aspect-ratio:3/2)
{
	#controlsForm{
	grid-row-gap:.25em;
	grid-template-columns: minmax(max-content,100px) minmax(max-content,140px);
	}
	
	#controls{
		justify-content:center;
		align-items:center;
		border-right:none;
		width:100%;
		padding:0em;
	}
	
	#controls > p {
		margin:0 0 .25em 0;
	}
	
	#plvlLabel{
		font-size:9pt;
	}

	.sideBySide{
		grid:none;
		display:flex;
		align-items:flex-start;
		gap: 2em;
		flex-direction:column;
		height:fit-content;
	}
	.emailcoltext{
		max-width:24ch;
	}
	.mainscoltext{
		max-width:18ch;
	}
	
	#agentsTarget>tr>th{
		font-size:10pt;
	}
	
	#agentsTarget>tr>td{
		font-size:9pt;
	}
}

@media (max-aspect-ratio:3/2)
{
	.emailcoltext{
		max-width:fit-content;
	}
	.mainscoltext{
		max-width:fit-content;
	}
}

@media (max-aspect-ratio:5/8)
{
	#main_content,.main_content{
		padding:.25em;
	}
	
	#agentsTarget>tr>th{
		font-size:8pt;
	}
	
	#agentsTarget>tr>td{
		font-size:7pt;
	}
	
	.tableWrapper{
		max-width:calc(100vw - 2.25em);
	}
}