@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap'); /* Header */
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); /* Good for books */
@import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap'); /* Fancy books */
:root{
	--iconOff : url(media/ui/triangle.svg);
	--iconDef : url(media/ui/square.svg);
	--iconUti : url(media/ui/circle.svg);
	--iconOffEmpty : url(media/ui/triangle_empty.svg);
	--iconDefEmpty : url(media/ui/square_empty.svg);
	--iconUtiEmpty : url(media/ui/circle_empty.svg);
	--uiBottomDistance : 8vh;
	--colorBeneficial : #AFA;
	--colorDetrimental: #FAA;
}

body, html{
	margin:0;
	padding:0; 
	background:#335;
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1vmax;
}
*{
	position: relative;
	box-sizing: border-box;
}

.italic{
	font-style: italic;
}

.bold{
	font-weight: bold;
}

.hidden{
	display: none !important;
}

.centered, .center{
	text-align: center;
}

#customModals input[type=checkbox]{
	width:1.2vmax;
	height: 1.2vmax;
	text-align: middle;
}

a{
	font-weight:bold;
	color:#DDF;
}

h1, h2, h3{
	font-family: 'Germania One', cursive;
}

input, textarea, select{
	font-size:1vmax;
	border-radius:0.25vmax;
	padding:0.5vmax;
	outline:none;
	box-sizing: border-box;
	-moz-user-select: auto;
	user-select: auto;
	margin-bottom:1vmax;
}
input[type=text], input[type=number], textarea{
	width:100%;
}
input[type=color], div.window input[type=color]{
	width: 4vmax;
    height: 2vmax;
    padding: 0;
    border: none;
    background: none;
}


div.modalMain{
	max-height:80vh;
	overflow-y:auto;
	overflow-x: hidden;
}

a.crypto{
	text-decoration: none;
	display:inline-block;
	margin:0.5vmax;
	font-size:1.5vmax;
	
}

#gameIcons > div > div.rollout.visible,
div.gameListing,
div.actionbar > div.actions > div.action,
a.button,
input[type=button], input[type=submit], div.button, label.button,
div.inventory div.item,
#modal div.modalQuests div.right div.item,
div.action,
div.shopToken,
div.netgame.player
{
	user-select: none;
	-moz-user-select: none;
	background:rgba(100,100,100,.75);
	color:#FFF;
	font-weight:bold;
	border-radius:0.5vmax;
	padding:0.5vmax;
	font-size:1.25vmax;
	cursor:pointer;
	text-align: center;
	margin:0.25vmax 0.1vmax;
	border: 2px solid #DDD;
	border-bottom-color: #BBB;
	border-right-color: #BBB;
}
@keyframes newItemsAnim{
	from{ border-color: #FAA;}
	to{ border-color:#F66; }
}
div.button.newItems{
	border-color: #FAA;
	animation: newItemsAnim ease-in-out alternate infinite 1s;
	box-shadow:0 0 1vmax #F66;
}

div.button.grey{
	border-color: #666;
	filter:brightness(75%);
}
div.button.selected{
	border-color:#FFF;
	background:rgba(100,150,100,.75);
}
img.runeforgeIcon{
	width:1vmax;
	height:1vmax;
}


span.itemLink{
	font-weight: bold;
	cursor: pointer;
}
span.itemLink:hover{
	color:#FFF !important;
}

#groupFinder > div.newItems{
	display: block;
	position: absolute;
	width:100%; top:50%;
	left:0;
	transform:translateY(-50%);
	background:rgba(0,0,0,.75);
}
#groupFinder.newItems > div.newItems{
	color:#F66;
	font-weight: bold;
}
div.button.newItems.grey > div.newItems{
	color:#999;
}
input[type=button]:disabled{
	color:#CAA;
	border-color: #CAA;
}
div.gameListing:hover,
input[type=button]:hover, input[type=submit]:hover, div.button:hover,
div.inventory div.item:hover,
div.action:hover{
	border-color:#FFF;
}
div.gameListing:active,
input[type=button]:active, input[type=submit]:active, div.button:active,
div.inventory div.item:active,
div.action:active{
	transform:scale(0.98,0.98);
}




/* A div with labels treated as flex items. Used in assets editor for an instance. */
div.labelFlex{
	display:flex;
	flex-wrap: wrap;
}
div.labelFlex > label,
div.labelStyle{
	display: block;
	flex:1;
}
div.labelFlex > label > *{
	vertical-align: middle;
}

/* Vertically centers a div */
div.verticalCenter{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	background:none;
}
input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 1.26vmax;
	cursor: pointer;
	box-shadow: 1px 1px 0px #000000;
	background: #4f5f72;
	border-radius: 0.5vmax;
	border: 1px solid #596c81;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 1.26vmax;
	cursor: pointer;
	box-shadow: 1px 1px 0px #000000;
	background: #4f5f72;
	border-radius: 0.5vmax;
	border: 1px solid #596c81;
}

input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;
	border: 2.4px solid #6497bd;
	height: 39px;
	width: 26px;
	border-radius: 2px;
	background: #596c81;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -13.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #596c81;
}




input.red{
	background-color:rgba(100,50,50,0.75);
}
input.green{
	background-color:rgba(50,100,50,0.75);
}
input.blue{
	background-color:rgba(50,75,100,0.75);
}
input.yellow{
	background-color:rgba(100,100,50,0.75);
}

*.green{
	color:#CCFFCC;
}
*.red{
	color:#FFCCCC;
}


textarea{
	min-height:3vmax;
}

div.centered, h1.centered, .centered{
	text-align: center;
}


/* Scroll */
/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,.25); 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}



@keyframes fadeOut{
	from{opacity:1;}
	to{opacity:0;}
}

.fadeOut{
	animation: fadeOut 2s ease-in-out forwards !important;
}

#notices{
	position: fixed;
	left:50%;
	width:50%;
	top:3vh;
	transform:translateX(-50%);
}
#notices > div{
	background:#FAA;
	color:#600;
	border:0.2vmax solid #FFF;
	box-shadow:0.2vmax 0.2vmax 2vmax rgba(0,0,0,.75);
	border-radius:0.25vmax;
	font-size:2vmax;
	font-weight: bold;
	padding:1vmax 2vmax;
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	text-align: center;
}
#notices > div.notice{
	background:#AFA;
	color:#060;
}



/* Templates */
*.bgMarble{
	background: url(./media/ui/marble.jpg) repeat;
}
div.scroll{
	overflow:auto;
}





#content{
	position: fixed;
	border-left:none;
	border-right:none;
	left:0; right:0;
	top:0; bottom:0;
}
#content.casting{
	user-select: none !important;
}

/* UI Layer */
#ui{
	position: fixed;
	left:0; right:0;
	bottom:5.1vh; top:0;
	background:rgba(0,50,100,.1);
	transition: transform 0.1s ease-out;
}
#ui.hidden{
	display: block !important;
	transform: translateY(-110%);
}

#ui:not(.dev) .devtool,
#customModals:not(.dev) .devtool{
	display:none !important;
}

#fx{
	position: fixed;
	left:0; right:0;
	top:0; bottom:0;
	pointer-events: none;
}

/* Icon renderer */
#iconRenderer{
	position: fixed;
	left:50%;
	top:0;
	transform:translateX(-50%);
	transition: 0.25s ease-out;
	transition-property: transform, opacity;
	display:block;
}
#iconRenderer.shrunk{
	transform:translateX(-50%) scale(0.01,0.01);
	opacity:0;
}
#iconRenderer > div.diceRoll{
	pointer-events: none;
	width:75vmin;
	height:75vmin;
}
#iconRenderer > div.diceRoll > div.renderer{
	width:100%; height:100%;
	position: absolute;
}
#iconRenderer > div.diceRoll > div.renderer > canvas{
	width:100%; height:100%;
	position: absolute;
}
#iconRenderer > div.diceRoll > div.content{
	position: absolute;
	width:100%; height:100%;
}
#iconRenderer > div.diceRoll > div.content > div.result{
	font-size: 8vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
    transform: translate(-50%,-40%);
	transition:all 0.2s ease-in-out;
}
@keyframes diceRollModAnim{
	from{ transform: translate(-50%,-40%) scale(1.0); }
	to{ transform: translate(-50%,-40%) scale(1.5,1.5); }
}
#iconRenderer > div.diceRoll > div.content > div.result.hidden{
	opacity: 0;
	display:block !important;
}
#iconRenderer > div.diceRoll > div.content > div.result.anim{
	animation:diceRollModAnim alternate .15s 2 ease-in-out;
}

#iconRenderer > div.diceRoll > div.generic.rollFor{
	left: 50%;
    transform: translateX(-50%);
    top: 20%;
    font-size: 3vmin;
    width: 35vmin;
    height: 45vmin;
    border: 1vmin double #AAA;
    position: absolute;
    box-shadow: 0 0 10vmin #3AF;
}

#iconRenderer > div.diceRoll div.generic{
	font-size: 4vmin;
    left: 50%;
	text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
	position: absolute;
    padding: 1vmin 3vmin;
    text-align: center;
    border-radius: 2vmin;
    background: url(./media/ui/marble.jpg) repeat;
	border: 0.5vmin double #EEE;
}
#iconRenderer > div.diceRoll > div.content > div.modifier{
	
    top: 80%;
    transform: translate(-50%,-50%);
	transition:all 0.3s cubic-bezier(1,0,.93,1.44);
	color:#AFA;
	border-color:#AFA;
    box-shadow: 0 0 3vmin #AFA;

}
#iconRenderer > div.diceRoll > div.content > div.modifier.sub{
	color: #FAA;
    box-shadow: 0 0 3vmin #FAA;
	border-color: #FAA;
}
#iconRenderer > div.diceRoll > div.content > div.modifier.center{
	top:50%;
	opacity:0;
	transform: translate(-50%,-50%) scale(1.3);
}



/* FX */
	@keyframes takeDamage{
		0%{transform:translateX(-5%); filter:blur(3px) sepia(100%) hue-rotate(-40deg) saturate(400%);}
		10%{transform:translateX(5%);}
		20%{transform:translateX(-4%);}
		30%{transform:translateX(4%);}
		40%{transform:translateX(-3%);}
		50%{transform:translateX(3%); filter:none; }
		60%{transform:translateX(-2%);}
		70%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		90%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes actionUsed{
		0%{transform:translateX(3%);}
		20%{transform:translateX(3%);}
		100%{transform:none; } 
	}
	@keyframes takeDamageCorruption{
		0%{transform:translateX(-5%); filter:blur(3px) sepia(100%) hue-rotate(290deg) saturate(400%);}
		10%{transform:translateX(5%);}
		20%{transform:translateX(-4%);}
		30%{transform:translateX(4%);}
		40%{transform:translateX(-3%);}
		50%{transform:translateX(3%); filter:none; }
		60%{transform:translateX(-2%);}
		70%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		90%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes takeDamageElemental{
		0%{transform:translateX(-5%); filter:blur(3px) sepia(100%) hue-rotate(220deg) saturate(400%);}
		10%{transform:translateX(5%);}
		20%{transform:translateX(-4%);}
		30%{transform:translateX(4%);}
		40%{transform:translateX(-3%);}
		50%{transform:translateX(3%); filter:none; }
		60%{transform:translateX(-2%);}
		70%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		90%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes takeDamageHoly{
		0%{transform:translateX(-5%); filter:blur(3px) sepia(100%) hue-rotate(15deg) saturate(400%);}
		10%{transform:translateX(5%);}
		20%{transform:translateX(-4%);}
		30%{transform:translateX(4%);}
		40%{transform:translateX(-3%);}
		50%{transform:translateX(3%); filter:none; }
		60%{transform:translateX(-2%);}
		70%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		90%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes takeDamageStretchPC{
		0%{transform:none; filter:blur(3px) sepia(100%) hue-rotate(-40deg) saturate(400%);}
		50%{transform:translateX(20%);}
		60%{transform:translateX(25%); filter:none; }
		70%{transform:translateX(-2%);}
		75%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		85%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes takeDamageStretchNPC{
		0%{transform:none; filter:blur(3px) sepia(100%) hue-rotate(-40deg) saturate(400%);}
		50%{transform:translateX(-20%);}
		60%{transform:translateX(-25%); filter:none; }
		70%{transform:translateX(-2%);}
		75%{transform:translateX(2%);}
		80%{transform:translateX(-1%);}
		85%{transform:translateX(1%);}
		100%{transform:none; }
	}
	@keyframes takeDamageSqueeze{
		0%{transform:none; filter:blur(3px) sepia(100%) hue-rotate(-40deg) saturate(400%);}
		50%{transform:scale(0.9, 0.9);}
		60%{transform:scale(0.88, 0.88); filter:none; }
		70%{transform:scale(1.03);}
		80%{transform:scale(0.98);}
		90%{transform:scale(1.01);}
		100%{transform:none; }
	}
	@keyframes hitfxShake{
		0%{transform:none;}
		10%{transform:translateX(10%);}
		20%{transform:translateX(-10%);}
		30%{transform:translateX(5%);}
		40%{transform:translateX(-5%);}
		50%{transform:translateX(2.5%);}
		60%{transform:translateX(-2.5%);}
		70%{transform:translateX(1%);}
		80%{transform:translateX(-1%);}
		90%{transform:translateX(0.5%);}
		100%{transform:none;}
	}
	@keyframes buffBlue{
		0%{transform:none; filter:sepia(100%) hue-rotate(-180deg) saturate(400%);}
		60%{transform:scale(0.98, 0.98); filter:sepia(100%) hue-rotate(-180deg) saturate(400%);}
		70%{transform:scale(1.03);}
		80%{transform:scale(0.98);}
		90%{transform:scale(1.01);}
		100%{transform:none; }
	}
	@keyframes buffRed{
		0%{transform:none; filter:sepia(100%) hue-rotate(-40deg) saturate(400%);}
		60%{transform:scale(0.98, 0.98); filter:sepia(100%) hue-rotate(-40deg) saturate(400%);}
		70%{transform:scale(1.03);}
		80%{transform:scale(0.98);}
		90%{transform:scale(1.01);}
		100%{transform:none; }
	}

	@keyframes heal{
		0%{transform:scale(0.95); filter:sepia(100%) hue-rotate(40deg) saturate(200%);}
		30%{transform:scale(1.05);}
		75%{transform:scale(0.99);}
	}
	@keyframes arcaneCharge{
		0%{transform:scale(0.95); filter:sepia(100%) hue-rotate(285deg) saturate(200%);}
		95%{transform:scale(1.05);}
	}
	div.fxActionUsed{
		animation: actionUsed 0.25s ease-in-out;
	}
	div.fxTakeDamage{
		animation: takeDamage 0.5s ease-in-out;
	}
	div.fxTakeDamageCorruption{
		animation: takeDamageCorruption 0.5s ease-in-out;
	}
	div.fxTakeDamageElemental{
		animation: takeDamageElemental 0.5s ease-in-out;
	}
	div.fxTakeDamageHoly{
		animation: takeDamageHoly 0.5s ease-in-out;
	}
	div.fxHeal{
		animation: heal 0.5s ease-in-out;
	}
	div.fxArcaneCharge{
		animation: arcaneCharge 1s;
	}
	div.fxStretch{
		animation: takeDamageStretchPC 0.75s ease-in-out;
	}
	div.fxShake{
		animation: hitfxShake 0.75s ease-in-out;
	}
	div.right div.fxStretch{
		animation: takeDamageStretchNPC 0.75s ease-in-out;
	}
	div.fxSqueeze{
		animation: takeDamageSqueeze 0.5s ease-in-out;
	}
	div.fxBuffBlue{
		animation: buffBlue 0.5s ease-in-out;
	}
	div.fxBuffRed{
		animation: buffRed 0.5s ease-in-out;
	}
	div.passiveUpsideDown > div.content > div.bg{
		transform:rotate(180deg) scaleX(-1);
		background-position:center 90% !important;
	}
/**/

/* Shared */
	/* Used by player art layer preview */
	div.layers.artLayers{
		position: absolute;
		bottom:0;
		width:100%;
	}
	div.layers.artLayers > div{
		display:inline-block;
	}


/* Game quickjoin */
	#joinOnlineGame{
		text-align: center;
	}
	#joinOnlineGame input[type=text]{
		max-width:20vmax;
	}


/* Modal */
	#modal{
		position: fixed;
		left:0; right:0;
		top:0; bottom:0;
		background:rgba(0,0,0,.5);
		backdrop-filter:blur(2px);
		user-select: none;
		-moz-user-select: none;
	}
	#modal > div.wrapper{
		position: absolute;
		display:flex;
		left:10vw;
		right:10vw;
		top:10vh;
		bottom:10vh;
		background:rgba(50,50,50,.95);
		color:#FFF;
		border:2px solid #AAA;
		box-shadow:0.5vmax 0.5vmax 5vmax rgba(0,0,0,1);
		border-radius:1vmax;
	}
	#modal > div.wrapper > div.content{
		padding:3vmax;
		overflow:auto;
		width:100%;
		max-height:100%;
		padding-bottom:10vmax;
	}
	#modal > div.wrapper > input{
		position: absolute;
		bottom:0;
		left:50%;
		transform:translate(-50%, 70%);
	}
	#modal.canvas > div.wrapper > div.content{
		padding:0;
		overflow:hidden;
	}

	#modal.canvas div.CANVAS_HOLDER{
		position: absolute;
		left:0; right:0;
		bottom:0; top:0;
	}
	#modal.canvas div.CANVAS_HOLDER > canvas{
		position: absolute;
		top:0; left:0; right:0; bottom:0;
	}
/**/

/* Custom modals */
	#customModals{
		position:fixed;
		width:100%; height:100%;
		top:0; left:0;
		background:rgba(0,0,0,.25);
		backdrop-filter: blur(3px);
		user-select: none;
	}
	#customModals.noBG{
		backdrop-filter: none;
		pointer-events: none;
		background:none;
	}
	
	#customModals > div > div.header > h1,
	#customModals > div > div.header > div.close > h1
	{
		font-size:2vmax;
		margin:0;
		white-space: nowrap;
	}
	
	#customModals > div > div.header,
	#customModals > div > div.header > div.portrait,
	#customModals > div > div.header > div.close{
		border: 0.2vmax solid #DDD;
		position: absolute;
		left:50%;
		transform:translate(-50%,-100%);
		padding:1vmax;
		border-bottom:none;
		text-align: center;
		text-transform: capitalize;
		border-top-left-radius:0.5vmax;
		border-top-right-radius:0.5vmax;
		min-width:25%;
		background: url(./media/ui/marble.jpg) repeat;
	}
	#customModals > div > div.header > div.portrait{
		top:0;
		background-size:cover;
		transform:translateX(-101%);
		left:0;
		min-width: 5vw;
		cursor:pointer;
		bottom:-0.2vmax;
		top:-0.2vmax;
	}

	#customModals > div > div.header > div.close{
		top:0;
		background:rgba(50,0,0,0.75);
		transform:translateX(101%);
		right:0;
		left:auto;
		min-width: 5vw;
		cursor:pointer;
		bottom:-0.2vmax;
		top:-0.2vmax;
	}
	#customModals > div > div.header > div.close:hover{
		background:rgba(100,0,0,.8);
	}

	#customModals > div{
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%, -50%);
		max-height:90%;
		overflow:visible;
	}
	#customModals div.cmContent,
	div.cmContentBlock{

		border: 0.2vmax solid #DDD;
		border-radius: 0.5vmax;
		padding: 1vmax;
		font-size: 2vmax;
		
	}

	

	#customModals div.cmTabs{
		position: absolute;
		padding-left:3vw;
	}
	#customModals div.cmTab{
		border: 0.2vmax solid #333;
		border-bottom-left-radius: 0.5vmax;
		border-bottom-right-radius: 0.5vmax;
		box-shadow: 0 0.5vmax 1vmax 0.1vmax #000;
		padding: 0.75vmax;
		font-size: 1.5vmax;
		border-top: none;
		color:#AAA;
		cursor:pointer;
		display: inline-block;
		vertical-align: top;
	}
	#customModals div.cmTab:hover, #customModals div.cmTab.active{
		border-color:#FFF;
	}
	#customModals div.cmTab.active{
		color:#FFF;
		font-weight: bold;
		padding:1vmax;
	}

	/* Sleep */
	#sleepSelect{
		text-align: center;
	}

	#sleepSelect img{
		width:5vmax; height:5vmax;
		vertical-align: middle;
	}
	#sleepSelect > span{
		text-align: center;
	}
	#sleepSelect > input[type=button]{
		font-size:2vmax;
	}


	/* BANK */
	#bank > div.modalMain{
		min-width:50vw;
	}

	/* Gym */
	#gym{
		max-width:90vw;
		min-width:60vw;
		position: absolute;
		max-height:80vh;
		pointer-events: all;
	}
	
	#gym > div.modalMain{
		overflow:auto;
		padding:2vmax;
	}

	#actions div[data-id="Actions"] div.titleSpan{
		text-align: center;
		padding: 2vmax;
		border: 1px #666 solid;
		background:rgba(0,0,0,.75);
		margin:0.25vmax;
		border-radius: 0.5vmax;
	}

	#actions div[data-id="Actions"] div.titleSpan > span,
	#gym div.titleSpan > span{
		position: absolute;
		font-size: 1.25vmax;
		top: 0.5vmax;
		left: 0.5vmax;
		font-style: italic;
		color: rgba(255,255,255,.6);
	}

	#gym div.left,
	#gym div.right{
		width:50%;
		padding:2vmax;
	}
	#gym div.talentGroup{
		background: rgba(0,0,0,.5);
		border-radius: 0.5vmax;
		margin:0.5vmax;
		padding:1vmax;
	}
	#gym div.talentGroup > div.header{
		position:absolute;
		font-size:1vmax;
		top:-0.5vmax;
		left: 50%;
		transform:translateX(-50%);
	}
	#gym div.talentGroup > div.list{
		display:flex;
		flex-wrap:wrap;
		justify-content: center;
	}

	#gym div.right{
		text-align:right;
	}
	#gym div.right > div.purchasable > div.learnable{
		background:rgba(0,0,0,.5);
		border-radius:0.5vmax;
		padding:0.5vmax;
		margin:0.5vmax;
		text-align: left;
		height: 5.5vh;
		vertical-align: middle;
		border: 1px solid #AAA;
		font-size:1.5vmax;
	}
	#gym div.right > div.purchasable > div.learnable.disabled{
		background: rgba(100,0,0,.5);
		border-color: #A33;
	}
	#gym div.right > div.purchasable > div.learnable.disabled.empty{
		background:none;
		border:none;
		font-size:1.5vmax;
	}
	#gym div.right > div.purchasable > div.learnable:hover:not(.disabled){
		cursor: pointer;
		border-color: #FFF;
	}
	#gym div.right > div.purchasable > div.learnable > span{
		display:block;
		position: absolute;
		top:50%;
		transform:translateY(-50%);
	}
	#gym div.right > div.purchasable > div.learnable > div.action{
		position: absolute;
		right:0;
		top:0;
	}

	#gym div.action,
	#actions div[data-id="Actions"] div.action{
		background-size: cover;
		overflow: visible;
		display: inline-block;
		margin: 0 0.25vh 0.25vh 0.25vh;
		vertical-align: middle;
		width: 5.5vh;
    	height: 5.5vh;
	}
	#gym div.action.talent{
		width:8vh;
		height:8vh;
		border-color:#EEE;
	}
	#gym div.action.talent > img{
		opacity:0.5;
	}
	#gym div.action.talent.active{
		border-color: #AFA;
		box-shadow: 0 0 1vmax #AFA; 
		background: linear-gradient(to bottom,  #4f8151 0%,#4b7b4d 39%,#3a5e3b 50%,#1e321f 51%,#2b452c 100%);

	}
	#gym div.action.talent.active > img{
		opacity:1;
	}
	#gym div.action.talent.locked{
		background: linear-gradient(to bottom,  #814f4f 0%,#7b4b4b 39%,#5e3a3a 50%,#321e1e 51%,#452b2b 100%);
		border-color: #000;
	}
	/*
	#gym div.action > div:not(.tooltip){
		display:none;
	}
	*/
	#actions div[data-id="Actions"] div.action > div.hotkey{
		display:block;
	}
	#gym div.action > div.uses,
	#actions div[data-id="Actions"] div.action > div.uses{
		display:block;
		position:absolute;
		color:#FAA;
		top:50%; left:0; right:0;
		text-align: center;
		font-style: italic;
		transform:translateY(-50%);
		font-size:1vmax;
		background:none;
	}

	#settings{
		min-width: 50%;
	}
	#settings div[data-id=Audio] input{
		padding:0;
	}

	#settings input[type=checkbox]{
		pointer-events: none;
	}

	#settings div.netgameLink{

		padding:1vmax;
		margin:1vmax 3vmax;
		background: rgba(0,0,0,.75);
		font-weight: bold;
		user-select: all;
		text-align:center;

	}
	#settings div.connected > .hideIfNotHost{
		display:none;
	}
	#settings div.connected.host > .hideIfNotHost{
		display:block;
	}
	#settings div.nowPlaying{
		text-align: center;
	}
	#settings div.nowPlaying a{
		text-decoration: none;
	}
	#settings div.nowPlaying p{
		margin:0.5vmax;
	}
	




	/* PLAYER */
	#player div.cmTabContent > div.right{
		position: absolute;
		width:30vw;
		right:-1.2vmax;
		top:-1.2vmax;
		bottom:-1.2vmax;
		transform:translateX(100%);
		overflow:hidden;
	}

	#customModals > #player{
		width:50vw;
		transform:translate(-75%,-50%);
		max-height:70vh;
	}
	#customModals > #player > div.cmContent{
		overflow:visible;
	}
	#customModals > #player div.cmTabContent{
		min-height:60vh;
		max-height:80vh;
		overflow:visible;
	}
	#player div.cmTabContent h2.name{
		margin:0;
	}
	#player div.cmTabContent div.right > div.image{
		height: 100%;
		position: absolute;
		width: 100%;
		top: 0; left:0;
	}
	#player div.cmTabContent div.right > div.image canvas{
		object-fit: cover;
		object-position: top;
		width: 100%;
		height: 100%;
	}


	#player div.cmTabContent div.right > div.inventory{
		padding: 0;
		position: absolute;
		right: 0;
		bottom:14%;
	}
	#player div.cmTabContent div.right > div.inventory > div.item{
		width:5vmax; height:5vmax;
		display:block;
		padding:0;
	}

	#player div.cmTabContent div.right > div.secondaryStats
	{
		left:0; right:0;
		font-size:2vmax;
		bottom:0;
		height:8%;
		position:absolute;
		text-align: center;
		flex-wrap:nowrap;
	}
	#player div.cmTabContent div.right > div.secondaryStats{
		font-size:1.5vmax;
		height:6%;
	}

	#player div.cmTabContent div.right div.tag{
		background:rgba(0,0,0,.5);
		margin:0.1vmax;
		border-radius:0.5vmax;
	}

	#player div.cmTabContent div.right div.tag span{
		
		position: absolute;
		width:100%;
		left:0;
		top:50%;
		transform:translateY(-50%);
		display:block;

	}
	#player div.cmTabContent div.right div.secondaryStats > div.tag{
		width:25%;
	}

	#player div.cmTabContent div.right > div.expBar{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	#player div.cmTabContent div.right > div.expBar > div.progressBar{
		border:none;
		border-radius:0;
	}

	#player div.cmTabContent[data-id=Edit]{
		font-size:1.25vmax;
	}
	#player div.cmTabContent[data-id=Edit] h2{
		margin-bottom:0;
	}

	#player div.cmTabContent > div.scroll{
		max-height:60vh;
		overflow-x: hidden;
		padding:1vmax;
	}

	#player div[data-id=Character] div.clairvoyance{
		color:#BDF;
	}

	#player div[data-id=Character] div.clairvoyance input.playerTrait{
		width:30%;
		vertical-align: top;
	}

	#player div[data-id=Character] div.actions{
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
	#player div[data-id=Character] > div.content{
		max-height:60vh;
		overflow:auto;
	}
	#player div[data-id=Character] div.actions div.action{
		width:5vmax; height:5vmax;
		max-width: none;
		max-height: none;
		margin:0.5vmax;
	}

	#player div[data-id=Edit] div.actions div.action{
		display:inline-block;
		width:auto;
		height:auto;
		max-width:none;
	}

/**/

/* Black screen visual */
	#blackScreen{
		position: fixed;
		width:100%;
		height:100%;
		top:0; left:0;
		opacity:0;
		background:#000;
		pointer-events: none;
		transition:opacity 3s ease-in-out;
	}
	#blackScreen.anim{
		opacity:1;
	}

/**/


/* YOUR TURN*/
	#ui > div.yourTurnBadge{
		position: absolute;
		top:0;
		left:0; right:0;
		text-align: center;
		padding:0.25vmax;
		background:rgba(200,255,200,.75);
		color:#FFF;
		font-style: italic;
		text-transform: capitalize;
		font-size:2vmax;
		animation: yourTurnBadge 1s ease-in-out alternate infinite;
		text-shadow: 0.1vmax 0.1vmax 0.2vmax #000;
		pointer-events: none;
	}
	#yourTurnBorder{
		position: fixed;
		left:0; right:0; bottom:0; top:0;
		box-shadow: 0 0 1vmax #EFE inset;
		pointer-events: none;
	}


/**/


/* Exploration Dungeon progress */
	#dungeonProgress{

		position: fixed;
		top:0;
		left:50%;
		transform:translateX(-50%);
		text-align: center;
		padding:0.5vmax 0;
		color:#FFF;
		font-style: italic;
		text-transform: capitalize;
		font-size:2vmax;
		text-shadow: 0.1vmax 0.1vmax 0.2vmax #000;
		pointer-events: none;
		opacity:0.5;
		font-size:1.5vmax;
		clip-path: polygon(0 0, 100% 0, 100% 75%, 95% 100%, 5% 100%, 0 75%);
		width: 18%;

	}
	#dungeonProgress.completed{
		color: #AFA;
	}
/**/




/* Progress bars */
	div.progressBar{
		border-radius:0.5vmax;
		border:1px solid #AAA;
		background:rgba(0,0,0,.75);
		color:#FFF;
		text-shadow: 0.1vmax 0.1vmax 0 #000;
		margin-bottom:0.5vmax;
		text-align: center;
		overflow: hidden;
		padding:0.5vmax;
	}
	div.progressBar div.bar{
		height:100%;
		position: absolute;
		top: 0; left: 0;
		background: linear-gradient(to bottom, #9dd254 0%,#68ba2a 50%,#44aa00 51%,#74cb2d 100%);
		box-shadow:0.25vmax 0 0.5vmax rgba(0,0,0,.5);
	}

	div.progressBar.red div.bar{
		background: linear-gradient(to bottom, #d25458 0%,#ba3b2a 50%,#aa1a00 51%,#cb3d2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	div.progressBar.yellow div.bar{
		background: linear-gradient(to bottom, #d2ae54 0%,#baa72a 50%,#aa9900 51%,#cbb32d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
/**/



/* Modal editor */
	

	div.flexTwoColumns,
	div.flexThreeColumns,
	div.flexFourColumns,
	div.flexAuto{
		display:flex;
		width:100%;
		flex-direction: row;
		flex-wrap:wrap;
	}
	div.flexTwoColumns > div{
		flex:50%;
		padding:0.5vmax;
	}
	div.flexTwoColumns > div{
		padding:0;
	}
	div.flexThreeColumns{
		justify-content: left;
	}
	div.flexThreeColumns > div{
		width:33.33%;
	}
	div.flexFourColumns{
		justify-content: left;
	}
	div.flexFourColumns > div{
		width:25%;
	}
	#modal img.player_icon_preview,
	#modal img.inspect_icon
	{
		max-width:100%;
		max-height:100%;
		border-radius:0.5vmax;
	}
	#modal h3, #modal p, div.tooltip h3{
		margin:0.25vmax 0;
	}
	#modal div.action div.tooltip{
		width:150%;
	}

	#inventory div.inventory{
		line-height:0%;
	}
	
	#inventory div.inventory h3{
		margin-top:2vmax;
		margin-bottom:0.75vmax;
	}

	div.inventory.characterSheet{
		padding:0;
		text-align: center;
	}
	
	div.dmActionLearner > img{
		max-height: 2.5vmax;
		position: absolute;
		left: 2%;
		top: 50%;
		transform: translateY(-50%);
	}
	div.inventory div.item.list,
	#modal div.actions div.action.list{
		
		display:inline-block;
		margin:0.2vmax;
		border:1px solid #EEE;

	}
	div.inventory div.item em.sub{
		font-size:0.75vmax;
	}
	/* Used in quest log */
	div.inventory.actions div.action{
		width: 4.25vmax;
		height: 4.25vmax;
		padding:0;
	}
	div.inventory div.action,
	div.inventory div.item{
		
		max-width:none;
		font-weight:normal;
		font-size:1vmax;
		border-width: 1px;
		display: inline-block;
		width:49%;
		padding: 1.5vmax;
		text-align: left;
		padding-left: 4vmax;
		height: 4.25vmax;
		overflow: hidden;

	}
	div.inventory div.item.third{
		width:32%;
	}
	div.inventory div.item > span{
		display: inline-block;
		transform: translateY(-50%);
		top:50%;
	}
	div.inventory div.item.compact{
		width:auto;
		padding:0.5vmax;
	}
	
	div.inventory div.item img.assetIcon,
	div.inventory div.item svg.assetIcon
	{
		vertical-align: middle;
		width: 3vmax;
		height: 3vmax;
		position: absolute;
		left: 0.5vmax;
		top: 0.5vmax;
	}
	div.inventory.altCurrency{
		padding:0.5vmax 0;
	}
	div.inventory.altCurrency div.item.compact{
		cursor: help;
	}
	div.inventory.altCurrency div.item.compact:active{
		transform:none;
	}
	
	div.inventory > div.left{
		width:20%;
		flex:20%;
		margin-right:3vmax;
	}
	div.inventory > div.left > div.progressBar{
		width:93.5%;
		line-height: 100%;
	}
	div.inventory div.item.equipmentSlot{
		width:7vmax;
		height:7vmax;
		display:inline-block;
		padding:0;
	}
	div.inventory div.item.equipmentSlot svg.assetIcon{
		width:100%; height:100%;
		position: absolute;
		top:0; left:0;
	}
	div.inventory div.item.equipmentSlot img.bg.template{
		opacity: 0.25;
		position: absolute;
		top:0; left:0;
	}
	/* Items that can be equipped in combat */
	div.inventory div.item.reequip{
		box-shadow:0 0 1vmax #FFF;
		border-color:#FFF;
	}
	div.inventory div.item.broken{
		background-color:#655;
	}
	div.inventory div.item.custom{
		background-color: rgba(50,100,50,.75);
	}

	div.item.common, strong.common{ border-color: #DDD !important; color: #DDD !important; }
	div.item.uncommon, strong.uncommon{ border-color: #AFA !important; color: #AFA !important; }
	div.item.rare, strong.rare{ border-color: #ADF !important; color: #ADF !important; }
	div.item.epic, strong.epic{ border-color: #FAF !important; color: #FAF !important; }
	div.item.legendary, strong.legendary{ border-color: #FFA !important; color: #FFA !important; }
	div.item.actionReward, strong.actionReward{ border-color: #AFF !important; color: #AFF !important; }
	div.item.disabled{ border-color:#A00 !important; background:#FAA; }

	#selectionbox{
		position:fixed;
		background:rgba(0,0,0,.75);
		border:1px solid #FFF;
		border-radius:0.25vmax;
		overflow:visible;
		user-select: none;
		-moz-user-select: none;
	}
	#selectionbox > div.item{
		background:rgba(255,255,255,.25);
		padding:1vmax;
		border-radius:0.25vmax;
	}
	#selectionbox > div.item:hover{
		background:rgba(255,255,255,.75);
		cursor:pointer;
	}
	#selectionbox > div.item.form:hover{
		background:rgba(255,255,255,.25);
		cursor:default;
	}
	#selectionbox > div.item.form form{
		margin:0; padding:0;
	}
	#selectionbox > div.item.form form input{
		margin:0 0.2vmax;
	}

	/* Quest display */
	#quests div.modalMain{
		display:flex;
	}
	#quests div.modalMain > div.cmTabContent{
		width:100%;
		height:100%;
		min-height:20vh;
		min-width:75vw;
		overflow:auto;
	}
	#quests div.modalMain > div.cmTabContent[data-id=Quests]{
		display:flex; 
		justify-content:space-between;
	}
	#quests div.modalMain h1{
		margin:0 0 1vmax 0;
		font-size:2.5vmax;
	}
	#quests div.modalMain h3{
		font-size:2vmax;
		margin-bottom:0;
	}
	#quests div.modalMain p{
		font-size:1.5vmax;
	}
	#quests div.modalMain p.highlighted{
		color:#AFA;
		font-weight: bold;
	}
	
	#quests div.modalMain div.left{
		padding-right:1vmax; margin-right:1vmax;
		border-right:1px dotted #FFF;
		width:25%;
		display:flex;
		flex-flow: column;
		justify-content: center;
	}	

	#quests div.modalMain div.left div[data-id]{
		background:rgba(50,50,50,0.75);
		padding:1vmax;
		cursor:pointer;
		transition:transform 0.2s ease-out;
		font-size:1.25vmax;
		box-shadow: -0.25vmax 0.25vmax 0.25vmax #000;
	}
	#quests div.modalMain div.left div:hover{
		transform:scale(1.01,1);
		transition:none;
	}
	#quests div.modalMain div.left div:active{
		transform:scale(.99,.99);
		transition:none;
	}
	#quests div.modalMain div.left div.completed{
		background:rgba(100,200,100, 0.5);
	}

	#quests div.modalMain div.right{
		width:75%;
		padding:3vmax;
	}
	#quests div.modalMain div.right div.objective{
		font-weight:bold;
		margin:0 2vmax;
		padding:0.5vmax 1vmax;
		font-size:1.5vmax;
	}
	#quests div.modalMain div.right div.objective.completed{
		font-weight:normal;
		font-style: italic;
		color:#AAA;
	}

	#quests div.explorationStatus div.dungeon.progressBar{
		display:block;
		width:50%;
		left:50%;
		transform:translateX(-50%);
		margin-bottom:1vh;
	}
	

/**/

/* Book overlay */
	#book{
		position: fixed;
		top:0; left:0; bottom:0; right:0;
		background:rgba(0,0,0,.25);
		backdrop-filter: blur(5px);
		font-size:2vmax;
		user-select: none;
		font-family: 'Redressed', cursive;
	}
	#book.handwriting{
		font-family: 'Rock Salt', cursive;
	}
	#book > div.mid{
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%, -50%);
		height:45vmax;
		width:70vmax;
		max-width:80%;
		max-height: 80%;
		background:#000;
		background:url(media/ui/book.png);
		background-size:100% 100%;
		color:#000;
	}
	#book div.page{
		/* Todo: custom font */
		position: absolute;
		top: 10%;
		left: 15%;
		width:30%;
		overflow:hidden;
	}
	#book div.page.B{
		left:auto;
		right:15%;
	}
	#book div.pageNr{
		position: absolute;
		left:30%;
		bottom:10%;
		transform:translateX(-50%);
	}
	#book div.pageNr.B{
		left:auto;
		right:30%;
	}
	#book div.nav{
		width:15%;
		left:0;
		font-size: 4vmax;
		top:0;
		bottom:0;
		position:absolute;
		cursor:pointer;
	}
	#book div.nav:hover div.icon{
		color:#FFF;
		text-shadow: 0.2vmax 0.2vmax 0.5vmax #000;
		
	}
	#book div.nav div.icon{
		top: 50%;
		right:0;
		transform: translateY(-50%);
		position:absolute;
	}
	#book div.nav.B{
		right:0;
		left:auto;
	}
	#book div.nav.B div.icon{
		left:0; right:auto;
	}
	#book div.close{
		position: absolute;
		color: #FFF;
		border: 3px double #AAA;
		padding: 1vmax 3vmax;
		bottom: -10%;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0.5vmax 0.5vmax 1vmax #000;
		font-size: 3vmax;
		user-select: none;
		border-radius: 1vmax;
		cursor: pointer;
	}
	#book div.close:hover{
		filter:brightness(2);
	}
	#book div.close:active{
		transform:translateX(-50%) scale(0.95, 0.95);
	}
/**/

/* Inventory */
	#inventory div.cmTabContent{
		min-width:80vw;
		padding:1vmax 5vmax;
	}
	#inventory div.cmTabContent[data-id="Actions"]{
		width:55vw;
		min-width:0;
	}

	#inventory h3{
		margin:0.25vmax 0;
		font-size:1.5vmax;
		color:#AAA;
		font-style: italic;
		font-weight: normal;

	}


/**/

/* New game menu */

	#newGame{
		min-width: 70vw;
	}

	#newGame div.newGame{
		padding-top:5vh;
		text-align: center;
		font-size: 1.5vmax;
	}

	#newGame input.small{
		font-size:1vmax;
	}

	#newGame input.gameName{
		width:100%;
		display: inline-block;
		font-size:3vmax;
		text-align: center;
		border:none;
		background-color:#DDD;
		color: #363;
	}
	#newGame div.gameDesc{
		font-size:1.4vmax;
		font-style: italic;
		color:#DDD;
	}

	#newGame div.galleryEntry{
		height:10vmax;
		background-size: cover;
		margin:0.5vmax 0;
		overflow: hidden;
	}
	#newGame div.galleryEntry.new{
		height:auto;
		padding:1vmax;
	}
	#newGame form.newGameForm div.galleryEntry{
		width:15vmax; height:20vmax;
		display:inline-block;
		margin:0.5vmax;
	}
	#newGame div.gallery div.galleryEntry.selected,
	#newGame form.newGameForm div.galleryEntry.selected
	{
		outline: 0.4vmax solid #AFA;
	}
	#newGame form.newGameForm div.galleryEntry > div.bg{
		position:absolute;
		top:0; left:0; right:0; bottom:0;
		background-size:cover;
	}
	#newGame form.newGameForm div.galleryEntry > div.bg > canvas,
	#newGame div.portrait > div.image > canvas{
		object-fit: cover;
		object-position: top;
		width: 100%;
		height: 100%;
	}
	#newGame div.galleryEntry div.name,
	#newGame form.newGameForm div.galleryEntry > div.bottom{
		text-transform: uppercase;
		position: absolute;
		bottom:0; left:0; right:0;
		text-align: left;
		background:rgba(0,0,0,.75);
		padding:1vmax;
	}
	#newGame form.newGameForm div.galleryEntry > div.bottom > *{
		margin:0;
	}
	#newGame form.newGameForm div.galleryEntry > div.bottom > h3{
		font-size:1.6vmax;
		text-transform: uppercase;
	}
	#newGame form.newGameForm div.galleryEntry > div.bottom > p{
		font-weight: normal;
		font-size:1vmax;
		text-transform: capitalize;
	}
	@keyframes newGameStartSubmit{
		from{box-shadow:0 0 2vmax 0.5vmax rgba(100,255,100, 1);}
		to{box-shadow:0 0 1vmax 0.1vmax rgba(100,255,100, 1);}
	}
	#newGame form.newGameForm > input[type=submit]{
		font-size:3vmax;
		margin:2vmax;
		background-color:#363;
		animation: newGameStartSubmit 1s ease-in-out alternate infinite;
	}
	#newGame form.newGameForm > input[type=submit]:disabled{
		background-color:#633;
		animation:none;
	}
	#newGame form.newGameForm div.galleryEntry > div.bottom > p.backstory{
		font-size:0.8vmax;
		font-style: italic;
		opacity:0.75;
		display:none;
	}
	#newGame form.newGameForm div.galleryEntry.selected > div.bottom > p.backstory{
		display:block;
		text-transform: none;
	}

	#newGame form.charEdit{
		width:95%;
		font-size:1.2vmax;
	}

	#newGame div.portrait{
		border: 0.2vmax solid #FFF;
		border-radius:0.5vmax;
		width:100%;
		height:25vmax;
		display:inline-block;
		margin-bottom:1vmax;
	}
	#newGame div.portrait > div.image{
		position: absolute;
		inset:0;
		width: 100%; height:100%;
	}

	
	
	#newGame div.tags input{
		width:auto;
		display:inline-block;
		width:6em;
	}

	#newGame label, div.labelFlex label{
		display:inline-block;
		margin: 0.5vmax;
		padding: 0.5vmax 1vmax;
		background:rgba(0,0,0,.8);
		border-radius: 3px;
		border: 1px solid #666;
	}
	#newGame label.selected{
		border-color: #FFF;
	}
	#newGame label:hover{
		background:rgba(80, 80, 80, .8);
	}

	#newGame h2{
		margin:0;
	}
	#newGame p.subtitle{
		font-style: italic;
		font-size:1.5vmax;
		margin:0 0 1vmax 0;
		padding:0;
	}

/**/

/* Main menu */
	/* Main menu */
	#mainMenu{
		text-align: center;
		min-width:80vw;
	}
	#mainMenu p.subtitle{
		font-style: italic;
		font-size:1.5vmax;
		margin:0;
		padding:0 10vw;
	}

	#mainMenu input.newGameButton{
		background-color: #335;
		font-size:2.5vmax;
		margin:2vmax;
		padding:1vmax;
		box-shadow: 0 0 3vmax rgba(200,210,255,1);
	}

	#mainMenu div.gameListing{
		background-size:cover;
		background-position: center 25%;
		padding:0;
		overflow:hidden;
	}
	#mainMenu div.gameListing.active{
		border-color:var(--colorBeneficial);
	}
	#mainMenu div.gameSaves > div.gameListing > div{
		padding: 1vh;
		background-color: rgba(0, 0, 0, .25);
		backdrop-filter: blur(2px);
		margin: 1vmax 0;
	}
	

	#mainMenu table.editor td:nth-child(1){
		text-align: left;
	}

	#mainMenu div.cmTabContent{
		padding-bottom: 5vh;
	}

	#mainMenu div.cmTabContent[data-id=Credits]{

		font-size:1.5vmax;
		overflow:auto;
		max-height:80vh;

	}

	#mainMenu div.search input{
		display: inline-block;
		width:auto;
	}

	#mainMenu div.searchResults{
		display: flex;
		justify-content:space-evenly;
		flex-wrap: wrap;
		margin-top:3vmax;
	}

	#mainMenu div.searchResults div.mod{
		width:30%;
		user-select: text;
		background: linear-gradient(to bottom, #4c4c4c 0%,#131313 100%);
		box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.5);
		border: 0.2vmax solid #AAA;
		border-radius: 1vmax;
		font-size:1vmax;
		padding:1vmax;
	}

	#mainMenu div.searchResults div.mod h3{
		margin:0;
		font-size:1.5vmax;
	}
	#mainMenu div.searchResults div.mod p.subtitle{
		padding:0;
		font-size:1vmax;
	}
	#mainMenu div.searchResults div.mod p.desc{
		max-height:20vh;
		overflow:hidden;
		text-align: left;
	}

	#mainMenu img.portalLogo{
		height:5vmax;
	}
	#mainMenu div.mainMenuOptions{
		flex-wrap: nowrap;
	}
	#mainMenu div.mainMenuOptions > div{
		background-color: rgba(0,0,0,.5);
		padding: 1vmax;
		margin: 0.5vmax;
		border: 0.3vmax #333 double;
		border-radius: 1vmax;
		box-shadow: 0.3vmax 0.3vmax 0.1vmax #000;
	}

	#mainMenu div.mainMenuOptions > div > h3{
		margin:1vmin;
		border-bottom:0.2vmax solid rgba(255,255,255,.25);
		padding:0.5vmin;

	}

	#mainMenu div.mainMenuOptions div.story{
		margin:0.5vh 0;
		overflow:hidden;
		padding:1vmin;
		padding: 1vmin 6vmin;
    	max-height: 15vh;
	}

	#mainMenu div.mainMenuOptions div.story.black{
		background-color: #000;
	}

	#mainMenu div.mainMenuOptions div.story h3{
		background:none;
		font-size:2.5vmax;
		font-weight: normal;
		margin:0;
	}
	#mainMenu div.mainMenuOptions div.story p{
		font-size:1.1vmax;
		margin:0;
		color: #EEE;
		font-weight: normal;
	}
	#mainMenu div.mainMenuOptions div.story p.subtitle{
		font-style: italic;
		font-size:1vmax;
		color:#AAA;
		margin:0 0 1vmin 0;
		padding:0;
		margin:0;
		font-weight: bold;
	}
	#mainMenu div.mainMenuOptions div.story div.bg{
		position: absolute;
		top:0; right:0; bottom:0; left:0;
		background-size:cover;
		opacity: 0.4;
	}
	
	
	

/**/

/* Asset library */

	#assetLibrary div.cmTabContent{
		min-width: 70vw;
	}

	#assetLibrary div.quickStat{
		display:inline-block;
	}
	#assetLibrary div.quickStat{
		background:rgba(0,0,0,.5);
		border-radius:0.2vmax;
		margin:0 0.2vmax 0.2vmax 0;
		padding:0.25vmax;
		box-shadow:0.25vmax 0.25vmax 1vmax rgba(0,0,0,.25);
		cursor:help;
	}

/**/

/* Shop */
	#shop, #smith, #transmog{
		min-width: 60vw;
	}
	#transmog div.modalMain,
	#smith div.modalMain,
	#shop div.modalMain{
		max-height:70vh;
		overflow: auto;
		padding: 1vmax 5vmax;
	}

	
	
	
	#smith div.inventory div.item div.cost,
	#transmog div.inventory div.item div.cost,
	#shop div.inventory div.item div.cost{
		position: absolute;
		right:0.5vmax;
		top:50%;
		transform:translateY(-50%);
		overflow:hidden;
	}
	div.inventory div.item div.token{
		display:inline-block;
	}
	div.inventory div.item.compact svg,
	div.inventory div.item div.token > svg{
		position: relative;
		display:inline-block;
		left:auto;
		top:auto;
	}
	div.inventory div.item.compact div.quant,
	div.inventory div.item div.token > div{
		position: absolute;
		bottom:-0.25vmax;
		right:-.25vmax;
		background:rgba(0,0,0,.75);
		padding:0.25vmax;
	}
	div.myMoney{
		text-align: center;
		font-size:1.5vmax;
	}
	
/**/

/* help */
	#help div.modalMain{
		max-height:70vh;
		min-width:50vw;
		overflow: auto;
		padding: 1vmax 5vmax;
		font-size: 1.5vmax;
	}
	#help div.modalMain table{
		width:100%;
	}


/**/

/* Smith */
	#smith > div.modalMain > div.cmTabContent{
		min-height:50vh;
	}

	#smith > div.modalMain > div.cmTabContent input[type=color]{
		width: 100%;
		height: 5vh;
		border: 0.1vmax groove;
	}

	#smith div.inventory div.shopToken{
		padding:0;
	}
	#smith div.inventory div.shopToken.disabled{
		padding:0;
		border-color:#FAA;
		background-color:rgba(128,0,0,0.5);
	}

	#smith div.rfOverlay div.inventory div.item{
		width:100%;
		margin:0 0 0.2vmax 0;
	}
	#smith div.rfOverlay div.inventory div.item > svg,
	#smith div.rfOverlay div.inventory div.item > img{
		top: 50%;
		transform: translateY(-50%);
	}
	#smith div.inventory div.shopToken > div{
		font-size:1vmax;
		font-weight: normal;
		bottom:-.5vmax;
		right:-.5vmax;
	}
	#smith div.subOverlay.rfOverlay div.preview{
		font-size:1vmax;
		text-align: left;
		border:1px solid #FFF;
		padding:1vmax;
		border-radius: 0.25vmax;
	}

	#smith > div.modalMain > div.cmTabContent > div.subOverlay{
		position: absolute;
		background:rgba(0,0,0,.8);
		left:-5%; right:-5%;
		top:0; bottom:0;
		display:flex;
		padding:0vmax;
		min-height:80%;
	}
	#smith > div.modalMain > div.cmTabContent > div.dyeOverlay{
		bottom: 5%;
		top: 5%;
		transform:none;
	}
	#smith > div.modalMain > div.cmTabContent > div.subOverlay > div{
		padding:1vmax;
	}
	#smith > div.modalMain > div.cmTabContent > div.rfOverlay div.inventory div.item:hover{
		border-color:#FFF !important;
	}
	#smith > div.modalMain > div.cmTabContent > div.rfOverlay div.inventory div.item.enabled{
		border-width:0.2vmax;
		background: rgba(100,255,100,0.5);
		box-shadow: 0 0 1vmax 0.2vmax #FFF;
		border-color: #FFF !important;
	}
	#smith > div.modalMain > div.cmTabContent > div.rfOverlay > div.left{
		overflow:auto;
	}
	/*
	#smith > div.modalMain > div.cmTabContent > div.subOverlay div.inventory div.item{
		width:100%;
		margin:0;
	}
		*/
	#smith > div.modalMain > div.cmTabContent > div.subOverlay > div.left div.assetIcon{
		width:2vmax;
		height:2vmax;
	}
	#smith > div.modalMain > div.cmTabContent > div.subOverlay > div.left{
		width:60%;
	}
	#smith > div.modalMain > div.cmTabContent > div.dyeOverlay > div.left > div{
		width:100%;
	}
	#smith > div.modalMain > div.cmTabContent > div.subOverlay.dyeOverlay > div.left > div{
		padding:2vmax;
	}
	#smith > div.modalMain > div.cmTabContent > div.subOverlay > div.right{
		width:40%;
	}
	#smith > div.modalMain > div.cmTabContent > div.subOverlay > div.right > canvas{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: top;
		overflow:hidden;
		border: 0.2vmax solid #EEE;
		border-radius:0.25vmax;
	}
	

	#smith div.inventory > div.item.damaged{
		border-style:groove;
		box-shadow: 0 0 1vmax #FFAAAA inset;
	}
/**/

/* Transmog */
	#transmog div.inventory div.item.selected{
		border-color:#FFF;
		border-width: 0.3vmax;
	}
/**/

/* Players */
	#ui > div.players{
		position: absolute;
		top:0; left:0; right:0; bottom:var(--uiBottomDistance);
		pointer-events: none;
	}

	#ui > div.players > div{
		display:flex;
		flex-direction: column;
		align-items: self-end;
		justify-content: center;
		width: 23vw;
		top:0;
		bottom:0;
		position: absolute;
		text-align: center;
	}

	#ui > div.players > div.left{
		left:0;
		top:4vh;
		bottom:4vh;
		align-items: self-start;
	}
	#ui > div.players > div.right{
		right:0;
		top:4vh;
		bottom:4vh;
	}
	#ui > div.players div.player{
		margin-left:0;
		pointer-events: all;
	}
	#ui > div.players div.player * {
		pointer-events: none;
	}
	#ui > div.players div.player div.stats{
		text-shadow: 1px 1px #FFF, 1px -1px #FFF, -1px 1px #FFF, -1px -1px #FFF;
		vertical-align: bottom;
	}
	#ui > div.players div.player span.resource{
		display:inline-block;
		text-align: center;
		margin: 0 0.2vmax;
		vertical-align: bottom;
		pointer-events: all;
		border-radius: 0.5vmax;
		padding:0;
		font-size:1vmax;
		border-bottom-left-radius: 0;
    	border-bottom-right-radius: 0;
		font-weight: bold;
	}
	#ui > div.players div.player span.resource div.bg{
		position: absolute;
		top: 0; left:50%;
		width:1vmax; height:1vmax;
		background-size: contain;
		transform:translate(-50%, -85%);
		background-position: center center;
		background-repeat: no-repeat;
	}
	#ui > div.players div.player span.resource span.small{
		font-size:1vmax;
		font-weight: normal;
	}
	#ui > div.players div.player div.stats div.name div.leader:not(.host){
		background:none;
		border:none;
	}
	#ui > div.players div.player div.stats div.name div.leader.host.active{
		background-color: #484;
	}
	#ui > div.players div.player img.leader{
		height:2vmax; width:2vmax;
		vertical-align: middle;
	}
	#ui > div.players div.player span.resource.large{
		font-size:2vmax;
		font-weight: bold;
		margin-bottom:-0.2vmax;
	}
	#ui > div.players div.player span.resource.thin{
		font-weight: normal;
	}
	#ui > div.players div.player span.resource.warn{
		color:#FAA;
	}
	#ui > div.players div.player span.HP{
		color:#FFF;
		text-shadow: 1px 1px #900, 1px -1px #900, -1px 1px #900, -1px -1px #900;
	}
	#ui > div.players div.player span.resource.HP div.bg{
		filter:brightness(60%) sepia(1) saturate(400%) hue-rotate(-50deg);
	}
	#ui > div.players div.player div.momentum{
		display:flex;
		width:100%;
		position:absolute;
		bottom:0.1vh; left:0;
		height: 0.5vh;
	}
	#ui > div.players div.player div.momentum > div{
		height:100% !important;
	}

	#ui > div.players div.player span.arousal{
		color:#FFF;
		text-shadow: 1px 1px #909, 1px -1px #909, -1px 1px #909, -1px -1px #909;
	}
	#ui > div.players div.player span.resource.arousal div.bg{
		filter:brightness(70%) sepia(1) saturate(300%) hue-rotate(-90deg);
	}


	#ui > div.players div.player span.armor,
	#ui > div.players div.player span.chest,
	#ui > div.players div.player span.legs
	{
		color:#FFF;
		text-shadow: 1px 1px #666, 1px -1px #666, -1px 1px #666, -1px -1px #666;
	}

	#ui > div.players div.player span.resource.broken{
		color:#FFF;
		text-shadow: 1px 1px #966, 1px -1px #966, -1px 1px #966, -1px -1px #966;
	}
	#ui > div.players div.player span.resource.broken div.bg{
		filter:brightness(40%) sepia(1) saturate(100%) hue-rotate(-40deg);
	}

	#ui > div.players div.topRight{
		position: absolute;
		top:0; left:3vmax;
		right:0;
		text-align: right;
	}
	#ui > div.players div.topLeft{
		font-size: 1.5vmax;
		top: 0.5vmax;
		left: 0.5vmax;
	}
	

	@keyframes chargedAction{
		from{ box-shadow:0 0 1vmax rgba(255,128,0,1), 0.2vmax 0.2vmax 0.5vmax #000; }
		to{ box-shadow:0 0 2vmax rgba(255,255,255,1), 0.2vmax 0.2vmax 0.5vmax #000;  }
	}
	#ui > div.players div.charging{
		position:absolute;
		bottom:4vmax;
		left: 0;
    	transform: translateX(-10%);
	}
	
	#ui > div.players div.player.castTarget div.charging *.tooltipParent{
		pointer-events: none !important;
	}

	#ui > div.players div.charging > div.chAction > div.bg{
		width:100%; height:100%; position: absolute;
		background-size:cover;
		background-position: center;
		top:0; left:0;
	}
	#ui > div.players div.charging > div.chAction{
		animation: chargedAction ease-in-out 0.5s alternate infinite;
		border: 0.5vmax solid var(--colorBeneficial);
		width: 5vmax;
		height: 5vmax;
		display:inline-block;
		padding:0.5vmax;
		margin:0.2vmax;
		background-color: rgba(0,0,0,.75);
		border-radius:0.5vmax;

	}
	#ui > div.players div.charging > div.chAction.detrimental{
		border-color: var(--colorDetrimental);
	}
	#ui > div.players div.charging > div.chAction.noInterrupt{
		outline: 0.5vmax #AAA double;
	}


	div.kinks > div.wrapper,
	#ui > div.players div > div.wrapper{

		display:inline-block;
		padding:0.5vmax;
		background:rgba(0,0,0,.25);
		margin:0.2vmax;
		border-radius:0.2vmax;
		box-shadow:0.2vmax 0.2vmax 1vmax rgba(0,0,0,.25);

	}
	div.kinks > div.wrapper > div.background,
	#ui > div.players div > div.wrapper > div.background{
		width:100%; height:100%;
		position: absolute;
		top:0; left:0;
	}
	#ui > div.players > div.left div.topRight{
		text-align: left;
		left:0; right: 3vmax;
	}
	div.kinks > div.wrapper,
	#ui > div.players div > div.wrapper{
		width: 3vmax;
		height:3vmax;
		border:0.3vmax solid #DFD;
		transition:transform 0.5s ease-in-out, border-color 0.5s ease-in-out; /* Used for flashing highlighted wrappers */
	}
	@keyframes wrapperHighlighted{
		from{border-color:#6F6; background-color:rgba(0,128,0,0.75);}
		to{border-color:#FFF; background-color:rgba(0,128,0,0.25);}
	}
	@keyframes wrapperHighlightedDetrimental{
		from{border-color:#F66; background-color:rgba(128,0,0,0.75);}
		to{border-color:#FFF; background-color:rgba(128,0,0,0.25);}
	}
	#ui > div.players div > div.wrapper.highlighted{
		animation:wrapperHighlighted alternate infinite ease-in-out 0.25s;
	}
	#ui > div.players div > div.wrapper.highlighted.detrimental{
		animation:wrapperHighlightedDetrimental alternate infinite ease-in-out 0.25s;
	}
	#ui > div.players div > div.wrapper.flash{
		transform:scale(1.25);
		border-color:#FFF;
		transition:none;
	}
	#ui > div.players div > div.wrapper.small{
		width: 2.5vmax;
		height: 2.5vmax;
		border-width: 0.2vmax;
		vertical-align: top;
	}
	div.kinks > div.wrapper > div.stacks,
	#ui > div.players div > div.wrapper > div.stacks,
	#ui > div.players div > div.wrapper > div.duration,
	#ui > div.players div.charging > div.chAction > div.duration,
	#ui > div.players div.charging > div.chAction > div.hitChance
	{
		position: absolute;
		bottom:0; left:50%;
		transform:translate(-50%,75%);
		color:#FFF;
		font-size:1.25vmax;
		text-shadow:0.1vmax 0.1vmax 0.2vmax #000;
	}
	#ui > div.players div.charging > div.chAction > div.duration{
		font-size: 3vmax;
		transform: translate(-50%, -70%);
		position: absolute;
		top: 50%;
		line-height: 100%;
		font-weight: bold;
		pointer-events: none;
		z-index:2;
	}
	#ui > div.players div.charging > div.chAction > div.hitChance{
		font-size: 1.5vmax;
		transform:translate(-50%, 50%);
	}
	div.kinks > div.wrapper > div.stacks,
	#ui > div.players div > div.wrapper > div.stacks{
		top:auto;
		left:auto;
		right:0;bottom:auto;
		top:50%;
		transform:translate(50%,-50%);
		font-size:1.25vmax;
		padding:0.2vmax;
		border-radius:0.2vmax;
		min-width: auto;
		font-style:italic;
	}
	div.kinks > div.wrapper div.tooltip,
	#ui > div.players > div.right div > div.wrapper div.tooltip{
		right:0;
		left:auto;
		transform:translateX(50%);
	}
	div.kinks > div.wrapper.detrimental,
	#ui > div.players div > div.wrapper.detrimental{
		border-color:#FDD;
	}
	div.kinks{
		text-align: center;
	}
	div.kinks > div.wrapper{
		width:4vmax; height:4vmax;
	}

	/* Texts */
	#ui > div.players div.player div.speechBubble,
	#lastMessage
	{
		display:none;
	}
	#ui.bubbles > div.players div.player div.speechBubble,
	#lastMessage.speechBubble
	{
		position: absolute;
		display: block;
		left:1vmax;
		transform:translate(-100%, -50%);
		border: 2px solid #000;
		background: #FFF;
		padding:1vmax;
		border-radius: 1vmax;
		color:#000;
		font-size:1.1vmax;
		top:50%;
		font-style: italic;
		box-shadow: 0.25vmax 0.25vmax 1vmax #000;
		pointer-events: all;
		cursor: default;
	}

	#ui.bubbles > div.players > div.left div.player div.speechBubble{
		left:auto;
		right: 1vmax;
		transform:translate(100%, -50%);
	}
	
	#ui.bubbles > div.players div.player div.speechBubble div.arrow,
	#lastMessage.speechBubble div.arrow
	{
		position: absolute;
		right:0;
		top:50%;
		transform: translate(50%, -50%) rotate(45deg);
		border: 2px solid #000;
		background: #FFF;
		width:1vmax;
		height: 1vmax;
		border-left:none;
		border-bottom: none;
		max-width:30vmax;
	}

	#ui.bubbles > div.players > div.left div.player div.speechBubble div.arrow{
		right:auto;
		left:0;
		transform:translate(-50%,-50%) rotate(225deg);
	}

	#ui.bubbles > div.players > div.left div.player div.speechBubble.hidden{
		display: block !important;
		opacity:0;
		transition: opacity 1s ease-in-out;
		pointer-events: none;
	}
	#ui.bubbles > div.players > div.left div.player div.speechBubble.hidden.immediate{
		transition:none;
	}

	@keyframes speechBubbleLastMessage{
		from{
			box-shadow: 0 0 0.5vmax #FFF;
		}
		to{
			box-shadow: 0 0 2vmax #FFF;
		}
	}
	#lastMessage.speechBubble div.arrow{
		bottom: 0;
		right: 1vmax;
		top: auto;
		transform: translateY(60%) rotate(135deg);
		background:#933;
		border-color:#FFF;
	}

	#lastMessage.speechBubble{
		top: auto;
		left: auto;
		right: 0;
		transform: none;
		bottom: 3vmax;
		font-weight: normal;
		background:#933;
		color:#FFF;
		border-color:#FFF;
		box-shadow: 0 0 1vmax #FFF;
		animation: speechBubbleLastMessage infinite alternate 1s ease-in-out;
		width:20vw;
		max-height:10vh;
		overflow:visible;
	}
	#lastMessage.speechBubble.hidden{
		display: block !important;
		opacity:0;
		transition: opacity .25s ease-in-out;
		pointer-events: none;
	}
	#lastMessage.speechBubble.hidden.instant{
		transition: none;
	}
	
/**/

/* Fetish Selector */
	table.fetishes{
		text-align: left;
		font-size: 1.6vmax;
	}
	

/**/

/* multiCastPicker */
	#multiCastPicker{

		position: fixed;
		bottom:50%;
		left:50%;
		transform:translate(-50%,-50%);
		background:rgba(0,50,100,.95);
		color:#FFF;
		font-weight: bold;
		padding:2vmax;
		border-radius: 1vmax;
		box-shadow:0.15vmax 0.15vmax 2vmax rgba(255,255,255,1);
		border:0.2vmax solid #FFF;
		text-align: center;
		font-size:3vmax;
		cursor:default;
		user-select: none;
		-moz-user-select: none;
		pointer-events: none;
		opacity:1;
		transition: bottom 0.25s ease-out, opacity, 0.25s ease-out;
		background: url(./media/ui/marble.jpg) repeat;

	}
	#multiCastPicker > input{
		font-size:3vmax;
		padding:1vmax;
		pointer-events: all;
		margin:1vmax;
		height:auto;
	}
	#multiCastPicker.hidden > input{
		display:none;
	}

	#multiCastPicker.hidden{
		display:block !important;
		bottom:-50%;
		opacity: 0;
		pointer-events: none;
	}




/**/

/* ROLEPLAY */

	#roleplay{
		position: fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		color:#FFF;
		font-size:1.4vmax;
		cursor:default;
		width:55%;
		display:flex;
	}

	#roleplay > div.left > div.portrait{
		padding:0;
		margin-right: 0;
	}
	#roleplay > div.right{
		flex:1;
	}

	#roleplay div.bg{

		box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,1);
		border:0.1vmax solid #FFF;
		text-align: left;
		border-radius: 0.25vmax;
		background:url(media/ui/marble.jpg);
		background-repeat: repeat;
		padding:1vmax;
		margin:0.25vmax;
		user-select: none;
		-moz-user-select: none;
	}

	#roleplay div.portrait{
		width:10vmax; 
		height:10vmax;
	}
	#roleplay div.portrait div.bg{
		position: absolute;
		top:0; left:0; right:0; bottom:0;
		background-size:cover;
		box-shadow:none;
	}
	#roleplay div.portrait div.bg > canvas{
		position: absolute;
		width:100%; height:100%;
		top:0; left:0;
	}
	#roleplay div.text{
		font-weight: normal;
	}
	#roleplay div.text span.name{
		font-style: italic;
		font-weight: bold;
		font-size:1.5vmax;
	}
	#roleplay div.text em{
		font-size:1.2vmax;
		color:#DDD;
	}
	
	#roleplay div.responses > div.option{
		width:90%;
		font-size:1.25vmax;
		font-style: italic;
		background: rgba(100,100,100,.95);
		cursor:pointer;
		border-color: rgba(200,200,200,0.5);
	}
	#roleplay div.responses > div.option.highlighted{
		border-width: 0.2vmax;
		font-weight: bold;
		color: #FAA;
		font-style: normal;
	}
	#roleplay div.responses > div.option.roll.selected,
	#roleplay div.responses > div.option.selected, 
	#roleplay div.responses > div.option:not(.selected):hover{
		border-color:#FFF;
		background-color: rgba(100,150,255,1) !important;
	}

	#roleplay div.responses > div.option.roll.disabled,
	#roleplay div.responses > div.option.disabled{
		opacity:0.5;
		background:rgba(50,50,50,0.95);
	}
	
	#roleplay div.responses > div.option.roll{
		padding-left:4vmax;
	}
	#roleplay div.responses > div.option > div.diceRoll{
		padding:0.5vmax;
		display:inline-block;
		border-radius:0.5vmax;
		position:absolute;
		left:0.25vmax;
		top:0.25vmax;
		bottom:0.25vmax;
	}
	#roleplay div.responses > div.option > div.diceRoll > div.diceIcon{
		position:absolute;
		width:100%; height:100%;
		background-size: contain;
		background-position:center;
		background-image: url(media/wrapper_icons/dice-twenty-faces-twenty.svg);
		opacity:0.3;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
	}
	#roleplay div.responses > div.option > div.diceRoll > span.difficulty{
		font-weight: bold;
		font-style: normal;
		font-size:1.75vmax;
		text-shadow: 0.2vmax 0.2vmax 0.2vmax #000;
	}
	#roleplay div.responses > div.option.roll.hard{
		color: #FAA;
		background-color: rgba(125,100,100,0.95);
	}
	#roleplay div.responses > div.option.roll.med{
		color: #FFA;
		background-color: rgba(125,125,100,0.95);
	}
	#roleplay div.responses > div.option.roll.easy{
		color: #AFA;
		background-color: rgba(100,125,100,0.95);
	}
	#roleplay div.responses > div.option.roll:hover,
	#roleplay div.responses > div.option:hover{
		background: rgba(50,100,150,1);
	}
	
	#roleplay div.responses > div.option > div.diceRoll > span.modifier{
		transform:scale(0.75);
		position: absolute;
		bottom:-0.2vmax;
		right:-0.2vmax;
	}
	#roleplay div.responses > div.option > div.diceRoll > span.modifier.pos{
		color: #AFA;
	}
	#roleplay div.responses > div.option > div.diceRoll > span.modifier.neg{
		color: #FAA;
	}
	
	
/*/


/* Game Icons (bottom bar) */

	#gameIcons,
	#ui > div.actionbar{
		position: fixed;
		left:0; right:0;
		height:5vh;
		background:rgba(0,0,0,.85);
		bottom:0;
		text-align: center;
		border-top:0.2vh groove rgba(255,255,255,.5);
	}
	@keyframes gameIconsHighlight{
		from{box-shadow:0 0 2vmax 1vmax rgba(255,255,100, 1);}
		to{box-shadow:0 0 1vmax 0.5vmax rgba(255,255,100, 1);}
	}
	div.interaction.highlight,
	#gameIcons > div.highlight{
		animation:gameIconsHighlight 1s alternate infinite ease-in-out;		
	}
	#groupFinder,
	#gameIcons > div
	{
		margin-top: 0.15vmax;
		transition:transform 0.1s ease-out;
		width:4.25vh;
		height:4.25vh;
		background-size: cover;
		overflow:visible;
		display:inline-block;
		vertical-align: middle;
	}
	#gameIcons > div.button > div.number{
		position: absolute;
		right:0;
		bottom:0;
		background:rgba(0,0,0,.25);
		border-radius:0.2vmax;
		border-bottom-right-radius: 0.5vmax;
		color: #FFF;
		font-weight: normal;
		padding:0 0.1vmax;
	}

	#ui > div.actionbar > div.actions > div.actionGroup{
		width:5.75vh;
		height:5.75vh;
		overflow: visible;
		display:flex;
		margin:0 0.15vh 0 0.15vh;
		flex-direction: column-reverse;
	}

	div.action,
	#ui > div.actionbar > div.actions div.action{
		display:block;
		width:5.5vh;
		height:5.5vh;
		border-color:var(--colorBeneficial);
		border-width: 0.2vh;
		padding:0.5vh;
		font-size:1.5vh;
		margin:0;
		flex-shrink:0;
		background: linear-gradient(to bottom, #686868 0%,#636363 39%,#4c4c4c 50%,#282828 51%,#383838 100%);
	}
	#modal div.dmActionLearner{
		border-color:#AFA;
	}
	#ui > div.actionbar > div.actions > div.actionGroup > div.action:not(:first-child){
		display: none;
	}
	#ui > div.actionbar > div.actions > div.actionGroup > div.action:not(:first-child) div.hotkey{
		display:none;
	}
	#ui > div.actionbar > div.actions > div.actionGroup:hover > div.action,
	#ui > div.actionbar > div.actions > div.actionGroup.popout > div.action
	{
		display: block;
	}
	*.bgIconColor.corr,
	div.action.corr > img,
	div.dmActionLearner.corr > img
	{
		filter: sepia(100%) saturate(250) hue-rotate(251deg);
	}

	*.bgIconColor.phys,
	div.action.phys > img,
	div.dmActionLearner.phys > img
	{
		filter: sepia(100%) saturate(250) hue-rotate(294deg);
	}

	*.bgIconColor.arc,
	div.action.arc > img,
	div.dmActionLearner.arc > img
	{
		filter: sepia(100%) saturate(250) hue-rotate(97deg);
	}



	
	#gameIcons > div.highlighted,
	#mainMenuToggle > div.highlighted{
		border-color: #ADF;
		background-color:#9AD;
	}
	#gameIcons > div.button{
		transition: all 0.5s ease-in;
	}

	#gameIcons > div.flash{
		transform: scale(1.3, 1.3);
		transition: all 0.1s ease-out;
		border-color:#9D9;
		box-shadow: 0 0 0.5vmax #9F9;
	}
	#gameIcons > div.autoWidth{
		width:auto;
	}

	#gameIcons > div > div.rollout{
		display:none;
	}
	#gameIcons > div > div.rollout.visible{
		position: absolute;
		top:-0.5vh; left:50%;
		transform:translate(-50%, -100%);
		display:block;
	}
	#gameIcons > div > div.rollout.audioSettings{
		min-width:20vw;
	}
	#gameIcons div[data-id=audioToggle]{
		transform:none !important;
	}

	

/**/

/* Tutorial */

	#tutorialWidget{
		position: fixed;
		padding:0.5vmax;
		user-select: none;
		background:#FA0;
		color: #310;
		box-shadow: 0.2vmax 0.2vmax 0.5vmax #000;
		border: 0.2vmax solid #DDD;
		border-radius: 0.5vmax;
	}
	#tutorialWidget:hover{
		border-color:#FFF; 
		cursor:pointer;
	}
	#tutorialWidget > div.arrow{
		position: absolute;
		bottom:0; left:50%;
		transform:translate(-50%,60%) rotate(45deg);
		background:#FA0;
		border: 0.2vmax solid #DDD;
		width:1vmax; height:1vmax;
		border-left:none;
		border-top:none;
	}
	#tutorialWidget:hover > div.content{
		border-color: #FFF;
		
	}
	#tutorialWidget > div.content{
		margin:0.5vmax;
		font-size: 1.3vmax;
		font-weight: bold;
		max-width:20vw;
		text-align: center;
	}
	

	

/**/


/* Text */
	#ui > div.middle{
		bottom:var(--uiBottomDistance);
		background:rgba(0,0,0,.5);
		left:23vw;
		right:23vw;
		position:absolute;
		top:0;
		display:flex;
		flex-direction: column;
	}
	#ui > div.middle > div.content{
		position: absolute;
		bottom:3vmax;
		overflow:auto;
		max-height:100%;
		left:0;
		right:0;
		padding: 0 2.5vw;
	}
	#ui.mute > div.middle > div.chat{
		pointer-events: none;
		background:rgba(100,0,0,.25);
	}
	#ui.mute > div.middle > div.chat::after{
		content:'Spectators muted.';
	}
	#ui > div.middle > div.chat{
		min-height:1.5vmax;
		background:rgba(0,0,0,.25);
		padding:0.5vmax 2.5vw;
		font-size:1.5vmax;
		border-top:1px dotted #FFF;
		outline:none;
		position:absolute;
		bottom:0;
		width:100%;
	}
	#ui > div.middle > div.content > div.line{
		font-size:1.25vmax;
		padding:0.25vmax;
		color:#DDD;
	}
	#ui > div.middle > div.content > div.line.sided > div.sub{
		display:inline-block;
		max-width:90%;
		text-align: left;
	}
	#ui > div.middle > div.content > div.line.center{
		text-align: center;
		background: #000;
	}
	#ui > div.middle > div.content > div.line.turnChange{
		margin:1vmax 0;
		padding:0;
	}
	#ui > div.middle > div.content > div.line.turnChange > div.sub{
		background:#000;
		font-style: italic;
		font-size:1vmax;
		padding:0.5vmax 1vmax;
	}
	#ui > div.middle > div.content > div.line.dmInternal{
		text-align: center;
		font-size:1vmax;
		background:rgba(200,200,0,0.1);
	}
	#ui > div.middle > div.content > div.line.enemy{
		text-align: right;
	}
	#ui > div.middle > div.content > div.line.abilityUse{
		font-size:1vmax;
		color:rgba(255,255,255,.5);
	}
	#ui > div.middle > div.content > div.line.playerChat{
		font-size:1vmax;
	}
	#ui > div.middle > div.content > div.line.playerChat > div.sub{
		background:rgba(255,255,255,.25);
		padding:0.5vmax;
		border-radius:0.5vmax;
		width:auto;
		box-shadow: 0.2vmax 0.2vmax 0.2vmax #000;
		overflow:hidden;
	}
	#ui > div.middle > div.content > div.line.dmChat{
		color: #DEF;
		font-weight: bold;
		text-align: center;
		font-style:normal;
		font-size:1.25vmax;
	}
	#ui > div.middle > div.content > div.line.actionLearned{
		font-size:1vmax;
		color:#DDF;
		font-weight: bold;
	}

	#ui > div.middle > div.content > div.line.levelup{
		text-align: center;
		color:#FFA;
		box-shadow:0 0 1vmax #FFA;
		margin:1vmax 0;
		background: linear-gradient(to bottom, #b9b271 0%,#77703d 100%);
		font-weight: bold;
		text-shadow:0.2vmax 0.2vmax 0.5vmax #660;
	}
	#ui > div.middle > div.content > div.line.battleStarted{
		background:rgba(255,255,255,.5);
		box-shadow:0.2vmax 0.2vmax 1vmax #000;
		color:#FFF;
		margin-top:3vmax;
		margin-bottom:2vmax;
		font-size:2vmax;
	}
	#ui > div.middle > div.content > div.line.statMessage{
		font-size:0.9vmax;
		padding:0.1vmax 0.5vmax;
		font-style: italic;
	}
	#ui > div.middle > div.content > div.line.statMessage.arousal{
		color:#DBD;
	}
	#ui > div.middle > div.content > div.line.statMessage.crit{
		font-weight:bold;
	}
	#ui > div.middle > div.content > div.line.statMessage.important{
		color:#FA6;
		font-weight: bold;
	}
	#ui > div.middle > div.content > div.line.statMessage.clothDamage{
		color:#A99;
	}
	#ui > div.middle > div.content > div.line.statMessage.clothMend{
		color:#8A8;
	}
	#ui > div.middle > div.content > div.line.statMessage.AP{
		color:#BDD;
	}
	#ui > div.middle > div.content > div.line.statMessage.damage{
		color:#DBB;
	}
	#ui > div.middle > div.content > div.line.statMessage.healing{
		color:#BDB;
	}




	#ui > div.middle > div.content > div.line.ooc{
		font-size:1vmax;
		color:#AAA;
		font-weight: normal;
	}

	#ui > div.middle > div.content > div.line.emote{
		font-style: italic;
	}


/**/

/*	MOMENTUM GAIN ICONS */
	#ui > div.momentumGain{
		pointer-events: none;
		position: absolute;
		top:0; left:0; right:0; bottom: 0;
	}
	#ui > div.momentumGain > div.momentumIcon{
		width: 7vmax;
		height: 7vmax;
		margin:1vmax;
		position: absolute;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
		background:var(--iconOff);
		background-size: contain;
		display:none;
	}
	#ui > div.momentumGain > div.momentumIcon.Def{
		background-image:var(--iconDef);
	}
	#ui > div.momentumGain > div.momentumIcon.Uti{
		background-image:var(--iconUti);
	}
	@keyframes momentumIconIn{
		from{
			transform:translate(-50%, -50%) scale(0.01);
		}
		to{ 
			transform:translate(-50%, -50%) scale(1.0);
		}
	}
	@keyframes momentumIconOut{
		0%{
			top:50%;
			transform:translate(-50%, -50%) scale(1.0);
		}
		99%{
			top:110%;
			transform:translate(-50%, -50%) scale(.1);
			opacity: 1.0;
		}
		100%{
			opacity:0;
		}
	}
	
	#ui > div.momentumGain > div.momentumIcon.on{
		display:block;
		animation: momentumIconIn 200ms ease-out, momentumIconOut cubic-bezier(0.975, 0.005, 0.990, 0.980) 250ms forwards;
		animation-delay: 0ms, 1000ms;
	}

/**/


/* Mini chat */
	#mapChat{
		position: absolute;
		top:0; right:0;
		width: 30%;
		height:100%;
		pointer-events: none;
		overflow:hidden;
	}
	#mapChat > div.line{
		font-size:1.5vmax;
		transition:opacity 2s ease-in;
		padding:0.25vmax 1vmax;
		background:rgba(0,0,0,.25);
		margin-bottom:1px;
	}
	#mapChat > div.line.fade{
		opacity:0;
	}

/**/


/* Grapple arrows */
	#ui > div.grapples > div{
		position: fixed;
		height:1vmax;
		background: linear-gradient(to left, rgba(100,100,255,0.5) 0%,rgba(100,100,255,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		transition:opacity 0.25s ease-out;
		pointer-events: none;
	}
	#ui > div.grapples > div.taunt{
		height:0.25vmax;
		background: linear-gradient(to right, rgba(255,50,50,0.4) 0%,rgba(255,50,50,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	#ui > div.grapples > div.charged{
		z-index:1;
		border-radius:0.5vmax;
		height:0.25vmax;
		background: linear-gradient(to left, rgba(255,128,50,0) 2%, rgba(255,128,50,0.5) 5%,rgba(255,128,50,0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		mask-image: repeating-linear-gradient(270deg, transparent, #999 0 0.5vmax, transparent 0.5vmax 1vmax);
		opacity: 0.25;
		height:0.5vmax;
	}
	#ui > div.grapples > div.charged.atme{
		opacity: 1;
		height:0.5vmax;
		mask-image: repeating-linear-gradient(270deg, transparent, #999 0 0.75vmax, transparent 0.75vmax 1vmax);
	}
	#ui > div.grapples > div.hidden{
		display:block !important;
		opacity: 0 !important;
		
	}
/**/



/* Portraits based on player size */
/*
	#ui > div.players div.p2 div.player{
	}
	#ui > div.players div.p3 div.player{
	}
	#ui > div.players div.p4 div.player{
	}
	#ui > div.players div.p5 div.player{
	}
	#ui > div.players div.p6 div.player,
	#ui > div.players div.p7 div.player,
	#ui > div.players div.p8 div.player,
	#ui > div.players div.p9 div.player,
	#ui > div.players div.p10 div.player
	{
	}
*/
	


	#ui.combat > div.players div.player.dead,
	#ui div.players div.player.small{
		max-height:12vh;
	}
	#ui.combat > div.players div.player.pet {
		max-height:20vh;
		width: 20vw;
	}
	#ui > div.players div.player{

		width:22vw;
		margin:0.3vmax;
		user-select: none;
		cursor:pointer;
		flex-grow: 1;
		max-height:50vh;
		transform:translateX(-1%);
		transition:transform 0.1s ease-out;
	}
	#ui > div.players div.player.teamChange::before {
		display: block;
		height: 2px;
		content: "";
		top: -0.5vh;
		width: 100%;
		position: absolute;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}
	@keyframes kfTargetSelector{
		from{box-shadow:0 0 1vmax #FFA;}
		to{box-shadow:0 0 2vmax #FFA;}
	}
	#ui > div.players div.player.castTarget > div.targetingStats,
	#ui > div.players div.player.targetSelected > div.targetingStats
	{
		display:block;
	}
	@keyframes downedProtect{
		from{filter:grayscale(1);}
		to{filter:grayscale(0);}
	}
	#ui > div.players div.player.downedProtect > div.content > div.bg{
		animation:downedProtect ease-out 0.5s infinite;
	}
	div.players div.player > div.targetingStats{
		position:absolute;
		top:50%;
		left:0; right:0;
		text-align:center;
		font-size:2vmax;
		transform:translateY(-50%);
		background:rgba(0,0,0,.25);
		padding:0.5vmax;
		display:none;
	}
	#ui > div.players div.player.castTarget > div.targetingStats span.good{
		color: #DFD;
	}
	#ui > div.players div.player.castTarget > div.targetingStats span.bad{
		color: #FCC;
	}

	div.players div.player.myActive > div.content{
		outline: 0.4vmax solid #FFF;
	}
	
	div.players div.player > div.content{

		overflow:visible;
		border-radius:0.5vmax;
		box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.75);
		background:#222;
		border:0.2vmax solid transparent;
		height:100%;
		background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(
			45deg, #888888 0%,#adadad 48%,#797979 51%,#838383 100%) border-box;

	}
	div.players div.player div.name{
		font-size: 1.4vmax;
		padding: 0.1vmax 0.25vmax;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height:3.8vmax;
		background:rgba(0,0,0,.2);
		text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000;
		backdrop-filter: blur(3px);
	}

	div.players div.player div.name span.nameTag.mine,
	div.players div.player div.name.active span.nameTag.mine{
		font-weight: bold;		
	}
	div.players div.player div.name span.nameTag.npc{
		font-style: italic;
	}
	div.players div.player div.name span.turnArrow{
		display:none;
	}
	div.players div.player div.name.active span.turnArrow{
		display:inline;
	}
	div.players div.left div.player div.name > span{
		margin-left:0.5vmax;
	}
	div.players div.right div.player div.name > span{
		margin-right:0.5vmax;
	}


	div.players div.player div.netgameStatus{
		position: absolute;
		bottom:0.5vmax; left:1.5vmax;
	}
	div.players div.right div.player div.netgameStatus{
		left:auto; right:1.5vmax;
	}

	@keyframes netgameInfo{
		from{box-shadow:0 0 1vmax 0.25vmax rgba(255,255,255, 1);}
		to{box-shadow:0 0 .5vmax 0 rgba(255,255,255, 1);}
	}
	div.players div.player div.netgameStatus > div{
		width:4vmax; height:4vmax;
		border-radius:1vmax;
		border: 2px solid #FFF;
		margin-bottom: 0.5vmax;
		animation: netgameInfo 1s ease-in-out alternate infinite;
		background:rgba(255,255,255,.5);
	}
	div.players div.player div.netgameStatus img{
		width:100%; height: 100%;
	}
	div.players div.player div.netgameStatus span{
		
		position: absolute;
		color:#000;
		left:50%; top:50%;
		transform:translate(-50%, -50%);
		font-size:1.7vmax;
		font-weight: bold;
		

	}
	
	
	#ui > div.players div.player:hover div.name > div.button{
		display:inline-block;
	}
	#ui > div.players div.player div.name > div.button{
		width:1.6vmax; height:1.6vmax;
		padding:0;
		vertical-align: middle;
		margin:0 0.1vmax;
		display:none;
		pointer-events: all;
	}
	#ui > div.players div.player div.name > div.button.selected{
		border-color:#AFA;
		background-color: #363;
	}

	div.players div.player.incapacitated > div.content{
		border-color:#FFD;
	}
	#ui div.player.dead > div.content{
		border-color:#C66;
		opacity:0.75;
	}
	

	#ui > div.players div.player.mine.active > div.content{
		border-color:#AFA;
		box-shadow:0 0 .5vmax .25vmax rgb(200,255,200);
	}
	#ui > div.players div.player.active > div.content{
		border-color:#FFA;
		box-shadow:0 0 .5vmax .25vmax rgb(255,255,200);
	}


	#ui > div.players div.player.castTarget > div.content{
		border-color:#FAF;
		box-shadow:0 0 1vmax #FDF;
		cursor:pointer;
		transition:transform 0.1s ease-out;
	}
	#ui > div.players div.player.castTarget.highlighted > div.content{
		box-shadow:0 0 1vmax #FDF, 0 0 0 0.5vmax #FFA;
		transform:scale(1.015,1.015);
	}
	#ui > div.players div.player.targetSelected{
		transform:translateX(10%);
		transition:transform 0.25s ease-out;
	}
	#ui > div.players div.right div.player.targetSelected{
		transform:translateX(-10%);
	}
	#ui > div.players div.player.targetSelected > div.content{
		border-color:#FFA;
		cursor:pointer;
		animation: kfTargetSelector 1s ease-in-out alternate infinite;
	}


	#ui div.player > div.actionDrawer{
		position: absolute;
		right:0; top:0.5vmax;
		transform:translateX(100%);
	}
	#ui div.right div.player > div.actionDrawer{
		left:0;
		right:auto;
		transform:translateX(-100%);
	}
	#ui div.right div.player > div.actionDrawer > div{
		border-radius: 0;
		border-top-left-radius: 0.5vmax;
		border-bottom-left-radius: 0.5vmax;
		text-align: left;
	}
	#ui div.player > div.actionDrawer > div{
		background:rgba(150,200,150,.95);
		box-shadow:0.1vmax 0.1vmax 1vmax #000;
		color:#363;
		margin-top:0.2vmax;
		padding:0.5vmax;
		font-size:1.5vmax;
		text-align: right;
		border-top-right-radius: 0.5vmax;
		border-bottom-right-radius: 0.5vmax;
		border:0.2vmax solid #DFD;
		user-select: none;
		-moz-user-select: none;
		cursor: pointer;
		border-left: none;
		border-right:none;
	}
	#ui div.player > div.actionDrawer > div:hover{
		border-color:#FFF;
		background:rgba(220,255,220,.75);
	}

	#ui > div.players div.player > div.content > div.bg{
		position: absolute;
		width:100%; height:100%;
		top:0; left:0;
		background-size:cover;
		background-position: center 10%;
		overflow:hidden;
		background-color:#000;
	}
	#ui > div.players div.player > div.content > div.bg > canvas{
		object-fit: cover;
		object-position: 50% 5%;
		width: 100%;
		height: 100%;
	}
	
	#ui > div.players div.player > div.content > div.stats > div.name div.focus{
		width:3vmax;
		height:3vmax;
		opacity: 0.75;
		position: absolute;
		background:fixed url(media/wrapper_icons/eye-target.svg) center;
		right:0.5vmax;
		top:-2vh;
		transform:translateY(-50%);
	}
	#ui > div.players > div.right > div.player > div.content > div.stats > div.name div.focus{
		right:1vw;
		left:auto;
	}

	#ui > div.players div.player > div.content > div.stats{
		position:absolute;
		right:0;
		bottom:0;
		left:0;
		text-align: right;
		border-top-left-radius: 1vmax;
	}
	#ui > div.players div.right div.player > div.content > div.stats{
		left:0; right:0; top:0; bottom:0;
		border-radius:0;
		border-top-right-radius: 1vmax;
		text-align: left;
	}

	#ui > div.players div.player > div.content > div.stats div.resourceFlex{
		display:flex;
		width:100%;
		justify-content: space-between;
		position: absolute;
		bottom:0;
		height:3.8vmax;
	}
	#ui > div.players > div.right div.player > div.content > div.stats div.resourceFlex{
		flex-direction: row-reverse;
	}
	#ui > div.players div.player > div.content > div.stats div.resources{
		margin-top:auto;
		flex-shrink: 0;
		padding-bottom:0.2vh;
	}
	#ui > div.players div.player > div.content > div.stats div.passives{
		flex:1;
		padding-bottom:0.5vh;
		margin-top:auto;
	}
	#ui > div.players div.player > div.content > div.stats div.passives > div.icons{
		flex-wrap: wrap-reverse;
		text-align: left;
		display:flex;
		height:100%;
	}
	#ui > div.players div.player > div.content > div.stats div.passives > div.icons > div{
		width:1.5vmax; height:1.5vmax;
		border-width:0.1vmax;
		overflow:visible;
		margin:1px;
	}






	/* DM Tools */
	div.dm_tools > label.option{
		display:block;
		width:auto;
	}
	div.dm_tools > label.option > *{
		vertical-align: middle;
		margin:0; padding:0;
	}
	div.dm_tools > .option.active{
		background:rgba(255,200,200,0.9);
	}
	div.dm_tools > .option.inactive{
		background:rgba(200,255,200,.9);
	}
	div.dm_tools{
		padding:0 25%;
	}

	/* Interactions */
	#ui > div.players div.player > div.interactions {
		position:absolute;
		top:1vmax; right:0;
		transform:translateX(100%);
	
	}
	#ui > div.players > div.right > div.player > div.interactions {
		right:auto;
		left:0;
		transform:translateX(-100%);
	}
	#ui > div.players div.player > div.interactions > div {
		width:4vmax;
		height:4vmax;
		background:url(media/ui/marble.jpg) repeat;
		overflow:hidden;
		border-radius:0.25vmax;
		border: 2px solid #999;
		cursor:pointer;
		pointer-events:all;
		padding:0.25vmax;
	}
	#ui > div.players div.player > div.interactions > div:hover{
		border-color:#FFF;
	}
	#ui > div.players > div.left div.player > div.interactions > div{
		border-left:none;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	 
	}
	#ui > div.players > div.right div.player > div.interactions > div{
		border-right:none;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	 
	}
	
	#ui > div.players div.player > div.interactions > img {
		width:100%;
		pointer-events:none;
	}

	/* Shields */

	#ui > div.players div.player > div.shields{
		position:absolute;
		top:50%; right:0;
		transform:translate(50%, -50%);
	}
	#ui > div.players > div.right > div.player > div.shields {
		right:auto;
		left:0;
		transform:translate(-50%, -50%);
	}
	#ui > div.players div.player > div.shields > div.shield {
		width:5vmax;
		height:5vmax;
		overflow:hidden;
		pointer-events:all;
		margin:0.2vmax;
		transform:scale(0%);
		transition:transform 0.1s cubic-bezier(0.64, 0.57, 0.67, 1.53);
	}
	#ui > div.players div.player > div.shields > div.shield.spawn{
		transform:scale(1.0);
	}
	@keyframes shieldDeath{
		0%{transform: rotate(0) scale(1);}
		50%{transform: translate(25%, -100%) rotatex(120deg) scale(1.25);}
		100%{transform: translate(30%, 500%) rotatex(180deg) scale(0);}
	}
	#ui > div.players div.player > div.shields > div.shield.die{
		animation:shieldDeath forwards 0.3s ease-in !important;
	}
	#ui > div.players div.player > div.shields > div.shield > span{
		color:#069;
		font-size:3.5vmax;
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-shadow: 2px 2px #FFF, -2px 2px #FFF, 2px -2px #FFF, -2px -2px #FFF;
		font-family: 'Germania One', cursive;
	}



	#ui > div.players div.player > div.shields > div.shield.disabled > span{
		color:#333 !important;
	}
	#ui > div.players div.player > div.shields > div.shield.disabled div.bg {
		filter: brightness(0.7) !important;
	}
	#ui > div.players div.player > div.shields > div.shield > div.bg{
		position: absolute;
		top:0; left:0; right:0; bottom:0;
		background-size:contain;
		filter: drop-shadow(.25vmax .25vmax 0.1vmax #000) brightness(0.7) sepia(1) saturate(3) hue-rotate(130deg);
	}
	#ui > div.players div.player > div.shields > div.shield > div.bolster{
		display: none;
	}
	#ui > div.players div.player > div.shields > div.shield.bolster > div.bolster{
		position: absolute;
		display:block;
		top:-.5vmax; left:-.2vmax; right:-.2vmax; bottom:0;
		background:url(media/wrapper_icons/winged-shield.svg) center top;
		background-size:contain;
	}

/**/

/* Action bar */
	#ui > div.actionbar{
		position: absolute;
		border:none;
		background:none;
		background: url(./media/ui/marble.jpg) repeat;
		border-top:2vh groove rgba(255,255,255,.25);
		height:7.9vh;
	}

	#ui > div.actionbar > div.reroll{
		position: absolute;
		top: -1vh;
		left:1vw;
		transform: translateY(-75%);
		font-weight: bold;
		width: 3vh;
		height: 3vh;
		background: url(media/wrapper_icons/perspective-dice-six-faces-three.svg) no-repeat top left;
		pointer-events: none;
	}
	#ui > div.actionbar > div.reroll > span{
		display:block;
		position: absolute;
		left:100%;
		top:50%;
		transform:translateY(-50%);
		font-size: 3vh;
		text-shadow: 2px 2px 1px #000;
	}

	/* Stats */
	#ui > div.actionbar > div.resources{
		display:flex;
		position: absolute;
		top:-2.1vh; /* SHould correspond to height of div.point below */
		width:100%;
		background:rgba(0,0,0,.25);
		left:0;
	}
	/*
	#ui > div.actionbar > div.resources {
		border:none;
		background:none;
		box-shadow:none;
		flex:50%;
		width:50%;
		display:flex;
		flex-direction:row;
		margin:0 0.5vh;
	}
	*/
	/* Todo: re is now set on point */
	#ui > div.actionbar > div.resources > div.point,
	#ui > div.players div.player div.momentum > div,
	#ui > div.actionbar > div.resources > div.point.re.on:hover > div
	{
		background-color:rgba(200,200,200,0.25);
		background-position: center;
		background-repeat: no-repeat;
		background-size:contain;
		border-radius:0.5vmax;
	}
	@keyframes momChange{
		from{
			transform:scale(1.1);
			box-shadow:0 0 2vh rgb(255,255,255);
		}
		to{
			
		}
	}
	#ui > div.actionbar > div.resources > div.point.ch{
		animation: momChange 0.5s ease-in-out;
	}
	#ui > div.actionbar > div.resources > div.point.off,
	#ui > div.actionbar > div.resources > div.point.def,
	#ui > div.actionbar > div.resources > div.point.uti
	{
		cursor:pointer;
		box-shadow:0 -0.25vh 1vh rgba(207,233,255,.75);
	}
	#ui > div.actionbar > div.resources > div.point.re.on.rerand:hover > div{
		display:none;
	}
	#ui > div.actionbar > div.resources > div.point.re.on.rerand:hover > div:first-child{
		display:block;
		background-image: url(media/ui/questionmark.svg), linear-gradient(to bottom, #f6f4b8 0%,#70ef67 50%,#5de256 51%,#6f80f2 100%);
	}
	
	#ui > div.actionbar > div.resources > div.point.re.on:hover> div{
		width:100%;
		position: absolute;
		top:0; left:0;
		transform:translateY(-100%);
		height:3vh;
		display:block;
	}
	#ui > div.actionbar > div.resources > div.point > div{
		display:none;
	}
	#ui > div.actionbar > div.resources > div.point > div:hover{
		border-color:#FFF;
	}
	#ui > div.actionbar > div.resources > div.point.on:hover > div:nth-child(2){
		transform: translateY(-200%);
	}
	#ui > div.actionbar > div.resources > div.point.on:hover > div:nth-child(3){
		transform: translateY(-300%);
	}
	#ui > div.actionbar > div.resources > div.point.on:hover > div.disabled{
		opacity:0.2;
	}
	#ui > div.actionbar > div.resources > div.point.on:hover > div.disabled:hover{
		border-color:rgba(0,0,0,0);
		cursor:not-allowed;
	}
	#ui > div.actionbar > div.resources > div.point.off:hover,
	#ui > div.actionbar > div.resources > div.point.def:hover,
	#ui > div.actionbar > div.resources > div.point.uti:hover
	{
		transition:all ease-out 0.25s;
		transform:scaleY(1.1);
	}
	#ui > div.actionbar > div.resources div.point.off,
	#ui > div.players div.player div.momentum > div[data-type=off]{
		background-image: var(--iconOff), linear-gradient(to bottom, rgba(246,244,184,1) 0%,rgba(240,233,102,1) 50%,rgba(232,225,86,1) 51%,rgba(246,239,112,1) 100%);
	}
	#ui > div.actionbar > div.resources div.point.def,
	#ui > div.players div.player div.momentum > div[data-type=def]{
		background-image: var(--iconDef), linear-gradient(to bottom, rgba(184,245,246,1) 0%,rgba(102,240,240,1) 50%,rgba(86,232,232,1) 51%,rgba(112,246,246,1) 100%);
	}
	#ui > div.actionbar > div.resources div.point.uti,
	#ui > div.players div.player div.momentum > div[data-type=uti]{
		background-image: var(--iconUti), linear-gradient(to bottom, rgba(192,246,184,1) 0%,rgba(123,240,102,1) 50%,rgba(108,232,86,1) 51%,rgba(132,246,112,1) 100%);
	}

	#ui > div.actionbar > div.resources div.point.highlighted{
		box-shadow:0 0 0.25vh 0.5vh rgb(255,255,255) !important;
		border:1px solid rgb(255,255,255);
	}
	
	#ui > div.actionbar > div.resources > div,
	#ui > div.players div.player div.momentum > div,
	#ui > div.actionbar > div.resources > div > div{
		height:2vh;
		flex-grow:1;
		border:1px solid rgba(0,0,0,0);
		transition:none;
		margin:0.1vh;
	}
	#ui > div.actionbar > div.resources > div.highlighted{
		transition:none;
		transition:all ease-out 0.05s;
	}


	/* End turn button */
	#ui > div.actionbar > div.actions{
		position: absolute;
		display: flex;
		justify-content: center;
		left:0; right:0; bottom:0; top:0;
		text-align: center;
		-moz-user-select: none;
		user-select: none;
	}

	#ui > div.actionbar.spectating > div.actions > div{
		display:none;
	}

	#ui > div.actionbar.spectating > div.actions > span.spectating{
		display: block;
		font-size: 2vmax;
		margin-top: 0.75vmax;
	}
	#ui > div.actionbar > div.actions > span.spectating{
		display:none;
	}
		
	
	#ui > div.actionbar > div.actions > div.action[data-id=end-turn],
	#execMultiCast
	{
		width: auto;
		padding-top: 1.5vh;
		color: #DFD;
		border-color: #DFD;
		text-shadow: 1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000;
		margin: 0.3vh 0 0 0;
		height: 5.5vh;
		background: linear-gradient(to bottom, #686868 0%,#636363 39%,#4c4c4c 50%,#282828 51%,#383838 100%);
	}
	#ui > div.actionbar > div.actions > div.action.disabled[data-id=end-turn]{
		display:none;
	}
	#ui > div.actionbar > div.actions > div.action[data-id=end-turn] div.bg{
		background:url(media/wrapper_icons/upgrade.svg);
		background-size:contain;
		background-position: right center;
		background-repeat: no-repeat;
		position: absolute;
		transform:translateY(-50%) rotate(90deg);
		right:0;
		top:50%;
		height:5vh;
		width:5vh;
		opacity: 50%;
	}
	@keyframes endTurnPulse{
		from{transform: scale(1.05,1.05);}
		to{transform: scale(1.1,1.1);}
	}
	#ui > div.actionbar > div.actions > div.action[data-id=end-turn].highlighted,
	#multiCastPicker > #execMultiCast.highlighted{
		color:#DFD;
		border-color:#DFD;
		animation: endTurnPulse 0.5s ease-in-out alternate infinite;
		box-shadow: 0 0 1vmax #AFA;
		background: linear-gradient(to bottom, #51a159 0%,#4e9c56 39%,#418147 50%,#2c5630 51%,#35693a 100%);
	}

	div.action > *,
	#ui > div.actionbar > div.actions div.action *{
		pointer-events: none;
	}
	#ui > div.actionbar > div.actions div.action.spellSelected{
		transform: translateY(-15%) scale(1.2,1.2);
	}
	div.action > img,
	#ui > div.actionbar > div.actions div.action > img{
		width:100%;
		height:100%;
		position: absolute;
		left:0; top:0;
	}
	div.actions div.action > div.uses,
	#ui > div.actionbar > div.actions div.action > div.uses{
		position: absolute;
		top:-15%; right:-10%;
		font-size:1.5vmax;
		color:#EFE;
		text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
	}
	#ui > div.actionbar > div.actions div.action > div.uses.red{
		color:#FEE;
		font-size:1vmax;
	}
	div.action > div.cd,
	#ui > div.actionbar > div.actions div.action > div.cd{
		
		top: 50%;
		transform: translateY(-50%);
		right: -15%;
		height:40%;
		font-size:1.5vmax;
		font-weight:bold;
		text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
		color:#FFF;
		position: absolute;
		color:#FEE;

	}

	div.action > div.missingMom{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	div.action > div.missingMom > div{ width:1vmax; height:1vmax; background-size:100% 100%; background-position: center;  }
	div.action > div.missingMom div.Off{ background-image:var(--iconOffEmpty); }
	div.action > div.missingMom div.Def{ background-image:var(--iconDefEmpty); }
	div.action > div.missingMom div.Uti{ background-image:var(--iconUtiEmpty); }

	div.action > div.missingMom > div.fill.Off{
		background-image:var(--iconOff);
	}
	div.action > div.missingMom > div.fill.Def{
		background-image:var(--iconDef);
	}
	div.action > div.missingMom > div.fill.Uti{
		background-image:var(--iconUti);
	}

	.OffColor{ color:#FFD; }
	.DefColor{ color:#DFF; }
	.UtiColor{ color:#DFD; }
	
	
	div.actions div.action div.cd > img,
	#ui > div.actionbar > div.actions div.cd > img {
		height: 100%;
		vertical-align: middle;
		filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
		transform: translateY(-10%);
	}

	div.players div.topLeft,
	div.action > div.hotkey,
	#ui > div.actionbar > div.actions > div.action > div.hotkey{

		color:rgba(255,255,255,.75);
		font-style: italic;
		position: absolute;
		top:-0.15vmax; left:0;
		text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #001;
		font-weight: normal;

	}
	#ui > div.actionbar > div.actions div.action.enabled:hover{
		border-color:#FFF !important;
	}
	#ui > div.actionbar > div.actions > div.action.empty > *,
	div.action.empty > div.cd
	{
		display: none;
	}
	#ui > div.actionbar > div.actions > div.action.empty,
	div.action.empty
	{
		background:#333;
		border-color:#666;
		cursor:default;
	}
	div.action.empty > img{
		display:none;
	}
	
	#ui > div.actionbar > div.actions > div[data-id=cancel]{
		flex:100%;
	}
	/*
	#ui > div.actionbar > div.actions > div.enabled{
		color:#DFD;
		border:0.2vmax solid #DFD;
	}
	*/
	div.action.detrimental,
	#modal div.dmActionLearner.detrimental,
	#ui > div.actionbar > div.actions div.action.detrimental{
		border-color:--colorDetrimental;
	}
	div.action.disabled,
	#ui > div.actionbar > div.actions > div.actionGroup > div.action.disabled,
	#ui > div.actionbar > div.actions > div.disabled,
	div.item.disabled,
	div.inventory div.item.disabled{
		color:#FDD !important;
		border:0.2vh solid #D66 !important;
		background:rgba(100,0,0,0.75);
	}
	
	#ui > div.actionbar > div.actions > div div.tooltip{
		width:250%;
	}
	


/* */


/* DEVTOOLS */
	table.editor.vibhub{
		font-size:1vmax;
		text-align: left;
	}
	table.editor{
		width:100%;
		box-sizing: border-box;
		border-collapse: collapse;
	}
	table.editor.textEditor td:first-child{
		width:40%;
		font-size:1.25em;
	}
	table.editor.listing{
		font-size:0.8em;
	}
	table.editor.listing td{
		padding:0.2vmax;
	}


	table.editor tr{
		background:rgba(0,0,0,.5);
	}
	table.editor.clickable tr:hover{
		background:rgba(255,255,255,.5);
		cursor:pointer;
	}
	table.editor tr:nth-child(odd){
		background:rgba(0,0,0, 0.75);
	}
	table.editor tr:first-child, table.editor.clickable tr:first-child:hover{
		background:rgba(0,0,0);
		cursor: auto;;
	}

	table.editor td, table.editor th{
		padding:0.5vmax;
	}

	#modal div.roomWrap > div,
	#modal div.editorWrap > div
	{
		flex: unset;
	}
	#modal div.dungeonMap{
		width:50vw;
		height:50vw;
		background:rgba(0,0,0,.25);
		
	}
	#modal div.dungeonMap > div.room{
		background:rgba(255,255,255,.5);
		border-radius:0.5vmax;
		border:0.5vmax solid rgba(0,0,0,0.5);
		position:absolute;
		transform:translate(-50%,-50%);
		font-size:1vmax;
	}
	#modal div.dungeonMap > div.room:hover{
		background:rgba(200,255,200,.75);
		cursor:pointer;
	}
	#modal div.dungeonMap > div.room.selected{
		border-color:#AFA;
		cursor:pointer;
	}

	#modal div.dungeonMap > div.room > input.addRoom{
		font-size:0.75vmax;
		position:absolute;
		padding:0 0.25vmax;
		margin:0;

	}


	div.modButtons div.button{
		display:inline-block;
	}

	#modGenericInfo input{
		width:auto;
		display:inline-block;
	}

	#assetForm input{
		width:auto;
	}

	#assetForm input.equipped{
		border-color:#AFA;
	}

	table.editor tr.search{
		background:rgba(255,200,155,.25);
		font-style: italic;
	}
	table.editor tr.search:hover{
		cursor: auto;
		background:rgba(255,200,155,.25);

	}

	div.condWrapper{
		display:inline-block;
		background:rgba(0,0,0,.5);
		border: 1px solid #FFF;
		padding:0.5vmax;
		min-width:8vmax;
		min-height:3vmax;
		padding:1.5vmax 0.5vmax 0.25vmax 0.5vmax;
		margin:0.25vmax;
	}

	div.condWrapper > div.condPanel{
		position: absolute;
		top:0; left:0;
	}
	div.condWrapper.fullWidth{
		display:block;
	}
	div.condWrapper > div.condPanel > span{
		cursor:pointer;
		background:rgba(255,255,255,.25);
		border:1px solid #FFF;
		padding:0 0.25vmax 0.25vmax 0.25vmax;
	}
	div.condWrapper > div.condPanel > span.hlt{
		border-color:#AFA;
	}

	#jsonEditor{
		position: fixed;
		top:0; left:0; right:0; bottom:0;
		width:100%; height:100%;
		background:rgba(255,255,255,.25);
	}
	#jsonEditor > div{
		position:fixed;
		width:40vmax;
		height:40vmax;
		padding:0.5vmax;
		padding-bottom:3vmax;
		text-align: center;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
	}

	#jsonEditor > div > textarea{
		width:100%; height:100%;
	}
	#jsonEditor > div > div.buttons{
		position: absolute;
		bottom:0; width:100%;
	}

	#modal div.dungeonMap  input.disabled{
		background:#FAA;
	}

/* */


/* Tooltip */
	#tooltip{
		position:absolute;
		background:rgba(0,0,0,.9);
		color:#FFF;
		padding:1vmax;
		max-width:30vw;
		min-width:15vw;
		min-width:25vw;
		font-size:1vmax;
		pointer-events: none;
		border-radius:0.5vmax;
		border:1px solid #FFF;
		text-align: left;
		font-weight:normal;
		z-index:1000;
		user-select: none;
	}

	div.tooltip{display:none;}

	div.tooltipParent{
		pointer-events: all !important;
	}

	/* Action tooltip */
	#tooltip > div.actionTooltip{
		z-index:1000;
		color:#CCC;
		font-size:1.25vmax;
	}
	#tooltip > div.actionTooltip > h3{
		margin:0;
		font-size:1.5vmax;
		color:#FFF;
	}
	#tooltip > div.actionTooltip.enabled > h3{
		color:#DFD;
	}
	#tooltip > div.actionTooltip.disabled > h3{
		color:#FDD;
	}
	#tooltip div.stats{
		display:flex;
		width:100%;
		flex-direction: row;
		flex-wrap:wrap;
		font-style:italic;
		font-size:1vmax;
	}
	#tooltip div.stats > span:nth-child(even){
		text-align:right;
	}
	#tooltip div.stats > span{
		display:block;
		flex:50%;
	}
	#tooltip div.stats > span.tooltipMomentum > span > div{
		display:inline-block;
		width:1vmax; height:1vmax;
		margin:0.1vmax;
		background-size: 100% 100%;
	}
	#tooltip div.stats > span.tooltipMomentum > span.Off > div{ background-image: var(--iconOff); }
	#tooltip div.stats > span.tooltipMomentum > span.Def > div{ background-image: var(--iconDef); }
	#tooltip div.stats > span.tooltipMomentum > span.Uti > div{ background-image: var(--iconUti); }

	#tooltip div.minimapTooltipIcon > img{
		max-height: 1vmax;
		margin-right:0.2vmax;
		vertical-align: middle;
	}
	



/**/


/* Loading screen */
	#loading_screen{
		top:0;
		width:100%;
		height:100%;
		position: absolute;
		background:#000;
	}

	#loading_screen > div {
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%, -50%);
		width:50%;
	}
	@keyframes loadingBarBorder{
		from{border-color:#FFF;}
		to{border-color:#54bdd2;}
	}
	#loading_screen div.loadingBar{
		width:100%;
		height:0.5vmax;
		overflow: hidden;
		border-radius: 0.25vmax;
		background:#359;
		animation: loadingBarBorder 1s alternate infinite ease-in-out;
		pointer-events: none;
		margin-bottom:2vmax;
	}
	#loading_screen div.tip{
		text-align: center;
		font-style: italic;
	}
	#loading_screen div.slider{
		height:100%;
		position: absolute;
		left:0;
		width:0;
		transition: width 0.5s ease-in-out;
		background: linear-gradient(to bottom, #54bdd2 0%,#2a8cba 50%,#006eaa 51%,#2d9ccb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	#loading_screen p{
		font-size:1vmax;
		text-align: center;
		margin:0; padding:0;
		vertical-align: middle;
	}
	
/**/

/* Zone name */
	#zone{
		position: absolute;
		top:0; left:50%;
		transform:translateX(-50%);
		background-color: rgba(0,0,0,.25);
		color:#EEE;
		font-size:1vmax;
		user-select: none;
		pointer-events: none;
		text-align: center;
		padding:0.5vmax;
		font-weight: bold;
		font-family: 'Germania One', cursive;
		border-bottom-right-radius: 0.5vmax;
		border-bottom-left-radius: 0.5vmax;
		backdrop-filter: blur(2px);
	}

/* Mini map */
	#miniMap{
		position: absolute;
		top:0; left:0;
		width:20vmax;
		height: 20vmax;
		font-size:1vmax;
		user-select: none;
		pointer-events: none;
	}


	#miniMap > div.top{
		position: absolute;
		top:0;
		left:0;
		display: flex;
	}

	#miniMap > div.top.flat div.nav,
	#miniMap:not(.on) > div.top > div:not(.minimize){
		/* Flat Z height */
		display: none;
	}

	#miniMap > div.top > div.zLevel{
		text-shadow: 1px 1px 1px #000;
	}

	#miniMap > div.top > div{
		
		margin-left:1px;
		vertical-align: middle;
		flex:1;
		text-align: center;
		padding:1vmax 0;
		width:3vmax;
		display:inline-block;
		pointer-events:initial;
		line-height: 0%;

	}

	#miniMap > div.top > div.minimize{
		background:#ACA;
		height: 2vmax;
		padding:0;
		resize:both;
	}
	#miniMap > div.top > div.minimize > canvas{
		object-fit: contain;
		top:0; left:0;
		max-height:100%;
		aspect-ratio: 1;
	}

	#miniMap > div.top > div:not(.zLevel){
		background:url(media/ui/marble.jpg);
		border: 1px solid #AAA;
		border-top:none;
		cursor:pointer;
	}

	#miniMap > div.zLevel{
		position: absolute;
		top:1vmax; left:50%;
		transform:translateX(-50%);
		color:rgba(255,255,255,.75);
		font-family: 'Germania One', cursive;
	}

	


	#miniMap > div.top > div:not(.zLevel):hover{
		background:rgba(255,255,255,.75);
	}
	#miniMap > div.top > div:not(.zLevel):active{
		font-weight: bold;
	}

	#miniMap:not(.on) > div.content{
		display:none;
	}

	#miniMap > div.content{
		position: absolute;
		width:100%;
		height:100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:2%;
		top:2vmax;
	}
	#miniMap > div.content > div.cell.tooltipParent > img{
		pointer-events: none;
	}
	#miniMap > div.content > div.cell{
		background:rgba(255,255,255,.5);
		border:1px solid rgba(0,0,0,.5);
		border-radius: 1vmax;
		display:flex;
		overflow:hidden;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#miniMap > div.content > div.cell > img{
		width:45%; height:45%;
		filter:brightness(0%);
	}
	#miniMap > div.content > div.cell.current{
		background: rgba(100, 255, 100, 0.5);
	}
	#miniMap > div.content > div.cell.empty{
		visibility: hidden;
	}


/**/


/* Quest accept */

	#questAccept{
		position: fixed;
		top:25%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align: center;
		transition: opacity 0.25s cubic-bezier(.55,1.53,.56,.62);
		pointer-events: none;
		width:50vw;
		height:25vw;
	}
	#questAccept object.bg{
		position: absolute;
		top:0; left:0;
		width:100%;
		height:100%;
		
	}
	#questAccept h1{
		font-size:6vw;
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		margin:0;
	}

	#questAccept.hidden{
		display: block !important;
		pointer-events: none;
		opacity: 0;
	}
/**/
/* Quest objective */

	#questObjective{
		position: fixed;
		top:25%;
		left:50%;
		transform:translate(-50%,-50%) scale(1,1);
		text-align: center;
		color: #DDF;
		border:0.2vmax solid #DDF;
		background:rgba(5,5,20,.75);
		padding:1vmax;
		border-radius:1vmax;
		text-shadow:2px 2px 0.2vmax #000;
		transition: all 0.3s ease-out;
		pointer-events:none;
		opacity:1;
		font-size:1.7vmax;
	}
	#questObjective.completed{
		color:#AFA;
		border-color: #AFA;
		font-weight: bold;
	}
	#questObjective.hidden{
		display: block !important;
		opacity:0;
		transform:translate(-50%,-50%) scale(0.7,0.7);
	}

/**/


/* Chat hotkey */
	#groupFinder{
		position:fixed;
		bottom:0;
		right:0.25vh;
	}

	#mainMenu div.cmTabContent[data-id="Group Finder"]{
		font-size:1.5vmax;
		min-height:70vh;
	}

	#mainMenu div[data-id="Group Finder"] div.notJoined{
		display: inline-block;
		max-width: 40vmax;
	}

	#mainMenu div[data-id="Group Finder"] form.gfCharacterForm input{
		font-size:2vmax;
	}
	#mainMenu div[data-id="Group Finder"] form.gfCharacterForm textarea{
		min-height:10vmax;
	}

	#mainMenu div[data-id="Group Finder"] div.listing{
		display:flex;
		margin-top:9vmax;
	}

	#mainMenu div[data-id="Group Finder"] div.player{
		width:19%;
		padding-top:19%;
		overflow: hidden;
		box-shadow: 0.25vmax 0.25vmax 1vmax #000;
		border: 0.2vmax solid #FFF;
		cursor:pointer;
		user-select: none;
		margin:0.5%;
	}
	#mainMenu div[data-id="Group Finder"] div.player:hover{
		box-shadow: 0 0 1vmax #FFF;
	}
	#mainMenu div[data-id="Group Finder"] div.player:active{
		transform: scale(0.95, 0.95);
	}
	#mainMenu div[data-id="Group Finder"] div.player div.bg{
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0; left:0;
		background-size: cover;
		background-position: top center;
	}
	#mainMenu div[data-id="Group Finder"] div.player div.name{
		background:rgba(0,0,0,.5);
		color:#FFF;
		position: absolute;
		top:50%;
		left:0; right:0;
		transform:translateY(-50%);
		padding: 0.5vmax 0;

	}
	@keyframes playerChatNameUnread{
		from{
			background:rgba(0,0,0,.5);
		}
		to{
			background:rgba(0,50,0,.75);
		}
	}
	#mainMenu div[data-id="Group Finder"] div.player.highlighted div.name{
		font-weight: bold;
		color:#AFA;
		animation: playerChatNameUnread 1s ease-in-out alternate infinite;
	}

	#mainMenu div[data-id="Group Finder"] div.chat{
		height:80%;
		width:80%;
		position: absolute;
		top:10%;
		left:10%;
		border-radius: 1vmax;
		border:0.2vmax solid #FFF;
		box-shadow: 0 0 3vmax #000, 0 0 3vmax #000;
		overflow:visible;
		text-align: left;
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.header{
		height:15%;
		position: absolute;
		top: 0;
		left:0; right:0;
		background-size: cover;
		background-position: center;
		border-top-left-radius: 1vmax;
		border-top-right-radius: 1vmax;
		overflow: hidden;
		font-family: 'Germania One', cursive;
		border-bottom: 1px dotted #FFF;
		color:#FFF;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.header div.name{
		font-weight: bold;
		font-size: 3vmax;
		background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 46%,rgba(0,0,0,0) 100%);
		width:100%; height: 100%;
		position: absolute;
		overflow:hidden;
		padding:3%;
		text-shadow: 0.2vmax 0.2vmax 0.5vmax #000;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.close{
		position:absolute;
		bottom:-3.5vmax;
		width: 100%;
		background-color:#333;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.header div.gameInvite{
		position: absolute;
		top:50%;
		transform:translateY(-50%);
		right:1vmax;
		
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.header div.gameInvite:active{
		transform:translateY(-50%) scale(.95,.95);
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.bodywrap{
		position:absolute;
		bottom:3vmax;
		top:15%;
		overflow: auto;
		left:30%; right:0;
		background:#333;
		color: #FFF;
		font-size:1.25vmax;
		box-shadow: -0.2vmax 0 0.2vmax #000;
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.charDesc{
		position:absolute;
		bottom:3vmax;
		top:15%;
		overflow: auto;
		left:0%; right:70%;
		color: #FFF;
		font-size:1.25vmax;
		border-right: 1px dotted #FFF;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.charDesc > *{
		margin: 0.5vmax 1vmax;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.charDesc p{
		font-style: italic;
	}
	
	#mainMenu div[data-id="Group Finder"] div.chat div.input,
	#mainMenu div[data-id="Group Finder"] div.chat div.playerDisconnected{
		height: 3vmax;
		position:absolute;
		bottom: 0;
		border-top: 1px dotted #FFF;
		left:0; right:0;
		background:#FFF;
		border-bottom-left-radius: 1vmax;
		border-bottom-right-radius: 1vmax;
		overflow: hidden;
		color: #000;
		padding: 0.5% 1%;
		text-align: bottom;
		outline:0;
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.playerDisconnected{
		text-align: center;
		background:#AAA;
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message{
		font-size: 1.25vmax;
		margin:0.2vmax;
		user-select: text;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message div.sub{
		max-width:70%;
		min-width:40%;
		padding:0.5vmax;
		background: rgba(255,255, 255, .2);
		border-radius:0.5vmax;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message.right div.sub{
		text-align: left;
		display:inline-block;
		
	}
	
	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message.gameInvite{
		background:none;
		text-align: center;
	}

	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message div.gameInvite{
		display:inline-block;
		padding:1vmax;
	}
	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message div.gameInvite i{
		font-weight: normal;
	}
	

	#mainMenu div[data-id="Group Finder"] div.chat div.body div.message.right{
		text-align: right;
	}

	#mainMenu div[data-id="Group Finder"] div.gfBG{
		background-size: cover;	
		background-position: 15% center;
		position: absolute;
		height:15vmax;
		left:-1vmax; right:-1vmax; top:-1vmax;
		border-bottom:1px solid #000;
	}
	#mainMenu div[data-id="Group Finder"] div.gfHeader{
		position: absolute;
		left:0; right:0;
		top:50%;
		transform:translateY(-50%);
		background: rgba(0,0,0,.75);
		text-align: center;
	}

	#mainMenu div[data-id="Group Finder"] div.gfHeader h2{
		display:inline-block;
		font-size: 3vmax;
	}
	#mainMenu div[data-id="Group Finder"] div.gfHeader img.icon{
		height:100%;
		position: absolute;
		left: -1vmax;
		top: 50%;
		transform: translate(-100%,-50%);
		border-radius:0.5vmax;
		
	}
	


/**/

/* Floating combat text */
	#fct{
		position: fixed;
		left:0; right:0;
		bottom:0; top:0;
		pointer-events: none;
	}
	@keyframes fct{
		0%{transform:scale(0.9);}
		5%{transform:scale(1.05);}
		15%{transform:scale(1);}
		25%{opacity:1;}
		100%{transform:translateY(-500%); opacity:0;}
	}
	@keyframes fct_crit{
		0%{transform:scale(0.5);}
		2%{transform:scale(1.5);}
		5%{transform:scale(0.9);}
		9%{transform:scale(1.1);}
		15%{transform:scale(1);}
		25%{opacity:1;}
		100%{transform:translateY(-500%); opacity:0;}
	}
	#fct > div.text:not(.hidden){
		font-size:3vmax;
		position: absolute;
		animation: fct 2s ease-in forwards;
		text-shadow:0.1vmax 0.1vmax 0.1vmax #000; 
	}
	#fct > div.text.crit:not(.hidden){
		font-size:5vmax;
		font-weight:bold;
		animation: fct_crit 2s ease-in forwards;
	}
	#fct > div.text.hp{ color:#F88; }
	#fct > div.text.ap{ color:#8F8; }
	#fct > div.text.armor{ color:#888; }
	#fct > div.text.arousal{ color:#F8F; }
/**/


/* Color constants */
	*.colorOffensive{ color:#FF8; }
	*.colorDefensive{ color:#8FF; }
	*.colorUtility{ color:#8F8; }
	
/*/

/* HIDE IF NOT MOBILE */
	#mainMenuToggle{
		display:none;
	}
/*/

/*  */
#gameOver{
	position: fixed;
	top:0; left:0;
	width:100%; height:100%;
	background:rgba(0,0,0,.75);
	backdrop-filter: blur(0.5vmax);
	user-select: none;
}
#gameOver > div.frame.h{
	opacity:0;
}
#gameOver > div.frame{
	position: absolute;
	left:50%; top:50%;
	transform:translate(-50%, -50%);
	opacity:1;
	transition:opacity 1s ease-out;	
}
#gameOver > div.frame > img{
	max-width:80vw;
	max-height:80vh;
	border:0.3vmax #FFF solid;
	
}

#gameOver > div.frame > input{
	position: absolute;
	bottom:0;
	left: 50%;
	transform: translate(-50%, 50%);
	user-select: auto;
}


/*/