:root{
	--color-main:#DF1377;
	--color-accent1: #2Fc3eD;
	--color-accent1-dark: #0Fa3cD;
	--color-accent2: #444;
	--color-accent3: #51FFB8;
	--button-width:128px;
}
	
html,body{
	background-color:black;
	color:white;
	font-family:helvetica;
}
.hidden{
	display:none;
	height:0;
}
#nameSwapButton{
	width:60px;height:24px;min-width:60px;min-height:24px;font-size:28pt;
	background:none;
	
}
#nameSwapButton:hover,
#nameSwapButton:active{
	background:white;
	color:black;
}
#toast{
	transition:opacity 1s;
	background:#fafafaaa;
	padding: 4px 8px;
	color:black;
	border:solid 0px transparent;
	border-radius: 6px;
	position:fixed;
	bottom:80px;
	min-width:80px;
	max-width:50%;
	display:inline;
	left:50%;
	right:50%;
	width:fit-content;
	white-space:nowrap;
	opacity:0;
	transform: translate(-50%, -50%);
}
button{
	font-size:14pt;
	min-width:var(--button-width);
	min-height:34px;
	margin:4px;
	background-color:var(--color-accent1);
	border:none;
	border-radius:0;
	color:white;
	text-align:center;
	padding: auto auto;
	box-sizing : content-box;
}
button:hover{
	background-color:var(--color-accent1-dark);
	
}
body{padding:8px 12px;}
.blue_team{background-color:var(--color-accent1);}
.red_team{background-color:var(--color-main);}
.viewer{background-color:var(--color-accent3);}
.header{
	font-size:14pt;
	color:var(--color-main);
	font-weight:bold;
	text-align:center;
	width:100%;
}
.team_data{
	display:grid;
	grid-template-columns: auto auto;
	column-gap:8px;
	row-gap: 4px;
	padding: 8px 10px;
	border-radius:10px;
}
.team_data>span{
	font-size:10pt;
}
.team_data>input{
	font-size:10pt;
	height:18px;
}
#bt_link_wrapper>span{
	color:var(--color-accent1);
}
#rt_link_wrapper>span{
	color:var(--color-main);
}
#v_link_wrapper>span{
	color:var(--color-accent3);
}
.flex_center{
	display:flex; justify-content:center;
}
#advOpts{
	display:none;
	grid-template-columns: max-content max-content;
	gap:4px 8px;
}
#teams_n_players{
	display:flex; flex-direction:row;
	gap: 10px;
	width:100%;
	justify-content:center;
}
#link_div_wrapper{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	margin-bottom:40px;
}
#link_div{
	flex-direction:column;
	
	width:fit-content;
} 
.link_wrapper{
	width:100%;
	display:grid;
	grid-template-columns:100px 2fr .66fr .66fr;
	column-gap:12px;
}
.link_wrapper>input{
	width:auto;
	max-width:50vw;
	min-width:280px;
}
.link_wrapper>button{
	min-width:100px;
	width:100px;
	min-height:24px;
	font-size:12pt;
}
#link_list{
	display:grid; 
	grid-template-columns:max-content;
	gap:1em;
	background-color:var(--color-accent2);
	color:white;
	border-radius: 10px;
	padding: .5em 1em;
}
#link_list>*{
}

.predraft{
	display:flex;
}
.postdraft{
	display:none;
}
#customBanLabel::after{
	font-family: 'Material Icons';
	content: "help";
	-webkit-font-feature-settings: 'liga';
}
#helptext{
	display:block;
	position:fixed;
	left:0;top:0;
	max-width:30em;
	background-color:
	white;color:black;
	font-size:8pt;
	padding:.1em .5em;
	opacity:0;
	transition:opacity 1s;
}
#footer{
	position:fixed;bottom:0;left:0;right:0;width:100%;text-align:center;
	background-color:#2229;
	padding:4px 0;
	
	
}
#pickAwakeningsPanel{
	grid-template-columns:max-content 50%;
	
	
}
#pickAwakeningsPanel:not(.hidden) {
	display:grid;
	height:auto;
}
a:visited{color:white;}
.showonmapbans{display:none;}
.hideonmapbans{display:grid;}
.showoncustomban{display:none;}
.showOnBoX,html[data-box="1"] .hideOnBoX{
	display:none;
}
html[data-box="1"] .showOnBoX{
	display:unset;
}
html[data-state='1']
{
	.predraft{
		display:none;
	}
	.postdraft{
		display:flex;
	}
	
}