.ui {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	background-color:		rgba(0,0,0,1);
	overflow:				hidden;
	
}

.ui_gradient {
	
	position:				absolute;
	left:					0%;
	bottom:					0%;
	width:					100%;
	height:					0%;
	
	opacity:				0;
	
	background-image:		url('../media/sysimg/gradient.png');
	background-position:	0% 100%;
	background-size:		contain;
	background-repeat:		repeat-x;
	
	pointer-events:			none;
	
	transition:				opacity 1s ease, height 1s ease;
	
}

.ui_gradient.active {
	
	opacity:				0.8;
	height:					40%;
	
}

.ui_taptostart {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease;	
	
	background-image:		url('../media/sysimg/taptostart.png');
	background-size:		contain;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
}

.ui_taptostart.active {
	
	opacity:				1;
	pointer-events:			auto;
	
}

.itemtype {
	
	color:					rgba(255,255,255,0.4);
	font-weight:			bold;
	
}


.itemdetails {
	
	color:					rgba(255,255,255,0.5);
	font-weight:			bold;
	font-size:				60%;
	
}

.itemstate {
	
	color:					rgba(0,255,255,0.8);
	font-style:				italic;
	font-size:				60%;
	
}

.itemfallback {
	
	color:					rgba(0,255,255,0.8);
	font-style:				italic;
	font-size:				60%;
	
}

.itemtimecurrent {
	
	color:					rgba(255,166,26,0.6);
	font-weight:			bold;
	font-size:				60%;
	
}

.itemtimeduration {
	
	color:					rgba(255,255,255,0.5);
	font-weight:			100;
	font-size:				60%;
	
}

.button {
	
	width:					100%;
	height:					4vw;
	
	padding:				1vw;
	color:					rgba(255,255,255,1);
	background-color:		rgba(255,166,26,0.4);
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				2.5vw;
	font-weight:			bold;
	text-align:				center;
	
	margin-bottom:			2vh;
	
	cursor:					pointer;
	
	transition:				background-color 0.5s ease;
	
}

.button:hover {
	
	background-color:		rgba(255,166,26,0.8);
	
}

.button.disabled {
	
	display:				none;
	pointer-events:			none;
	opacity:				0;
	
}


.backbutton {
	
	width:					100%;
	height:					3.5vh;
	color:					rgba(255,255,255,1);
	padding-top:			0.25vh;
	padding-left:			5vh;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				2.5vh;
	font-weight:			bold;
	text-align:				left;
	
	margin-top:				1vh;
	margin-left:			2.5vh;
	
	cursor:					pointer;
	opacity:				0.8;
	
	transition:				opacity 0.3s ease, margin-left 0.3s ease;
	
	background-image:		url('../media/sysimg/prev.png');
	background-size:		contain;
	background-position:	0% 50%;
	background-repeat:		no-repeat;
	
}

.backbutton:hover {
	
	opacity:				1;
	margin-left:			1vh;
	
}