.ui_document {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.3s ease;
	
}

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

.ui_document_groupindicator {
	
	position:				absolute;
	right:					20vw;
	top:					-10vw;
	width:					fit-content;
	height:					fit-content;
	
	opacity:				0;
	pointer-events:			none;
	cursor:					pointer;
	
	background-color:		rgba(255,166,26,1);
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				3.0vw;
	color:					rgba(255,255,255,1);
	padding:				1vw;
	padding-left:			2vw;
	padding-right:			2vw;
	
	transition:				top 0.3s ease, opacity 0.3s ease;
	
}

.ui_document_groupindicator.active {
	
	top:					1vh;
	opacity:				1;
	
	pointer-events:			auto;
	
}

.ui_document_groupindicator.seethrough {
	
	opacity:				0.2;
	
	pointer-events:			auto;
	
}

.ui_document_groupselector {
	
	position:				absolute;
	right:					0vw;
	top:					-105vh;
	width:					40vw;
	height:					100vh;
	
	opacity:				0;
	pointer-events:			none;
	
	background-color:		rgba(128,83,13,1);
	
	transition:				top 0.3s ease, opacity 0.3s ease;
	
}

.ui_document_groupselector.active {
	
	top:					0vh;
	opacity:				1;
	pointer-events:			auto;
	
}

.ui_document_groupselector_group {
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				3.0vw;
	color:					rgba(255,255,255,1);
	padding:				1vw;
	padding-left:			2vw;
	padding-right:			2vw;
	
	margin-bottom:			2vw;
	
	cursor:					pointer;
	
	background-color:		rgba(255,166,26,0.5);
	
	
}



.ui_document_page {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	transition:				opacity 0.3s ease;	
	
	overflow:				scroll;
	
	scroll-behavior: 		smooth;
	
}

.ui_document_canvasdiv {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					99vw;
	height:					calc( 100vw / 2481 * 3509);
	
	opacity:				1;
	
	transition:				left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease;
	
}

.ui_document_canvasdiv.zoom {
	
	width:					200vw;
	height:					calc( 200vw / 2481 * 3509);
	
}


.ui_document_canvas {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	opacity:				1;
	
}

.ui_document_chorusbackground {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	background-color:		rgba(0,0,0,0.5);
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease;
	
}

.ui_document_chorusbackground.active {
	
	opacity:				1;
	
}

.ui_document_chorus {
	
	position:				absolute;
	left:					0%;
	top:					-100%;
	width:					99%;
	
	background-repeat:		no-repeat;
	border:					rgba(205,0,53,1) 0.5vh solid;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				top 0.5s ease, opacity 0.5s ease;
	
}

.ui_document_chorus.active {
	
	top:					5%;
	opacity:				1;
	
}

.ui_document_infocanvas {
	
	position:				absolute;
	left:					0%;
	bottom:					-100%;
	width:					99%;
	
	background-repeat:		no-repeat;
	border:					rgba(0,255,53,1) 0.5vh solid;
	
	opacity:				0;
	pointer-events:			none;
	cursor:					pointer;
	
	transition:				bottom 0.5s ease, opacity 0.5s ease;
	
}

.ui_document_infocanvas.active {
	
	bottom:					10%;
	opacity:				1;
	pointer-events:			auto;
	
	
}


.ui_document_markers {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					98%;
	height:					100%;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease;
	
	overflow:				hidden;
	
}

.ui_document_markers.active {
	
	opacity:				1;
	
}

.ui_document_markerline	{
	
	position:				absolute;
	left:					0%;
	top:					20%;
	width:					98%;
	height:					0.2vh;
	
	background-color:		rgba(255,80,40,0.2);
	border:					rgba(255,80,40,1) 0px solid;
	border-top-width:		0.2vh;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				1.0vw;
	font-weight:			bold;
	color:					rgba(255,255,255,0.2);
	
	opacity:				1;
	pointer-events:			none;
	
}

.ui_document_markersnav {
	
	position:				absolute;
	left:					20vw;
	bottom:					-10vh;
	width:					60vw;
	height:					8vw;
	min-height:				8vh;
	
	cursor:					pointer;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease, bottom 0.5s ease;
	
}



.ui_document_markersnav.active {
	
	opacity:				1;
	bottom:					0vw;
	pointer-events:			auto;
	
}

.ui_document_markersnav_prev {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					49%;
	height:					100%;
	
	background-color:		rgba(60,30,0,0.4);
	background-image:		url('../media/sysimg/icon_up.png');
	background-size:		contain;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
	cursor:					pointer;
	
}


.ui_document_markersnav_next {
	
	position:				absolute;
	right:					0%;
	top:					0%;
	width:					49%;
	height:					100%;
	
	background-color:		rgba(60,30,0,0.4);
	background-image:		url('../media/sysimg/icon_down.png');
	background-size:		contain;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
	cursor:					pointer;
	
}


.ui_document_pageprev {
	
	position:				absolute;
	left:					1%;
	bottom:					-10vh;
	width:					8vw;
	height:					8vw;
	min-width:				8vh;
	min-height:				8vh;
	
	background-color:		rgba(0,0,0,0.4);
	background-image:		url('../media/sysimg/prev.png');
	background-position:	50% 50%;
	background-size:		contain;
	
	cursor:					pointer;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease, bottom 0.5s ease;
	
}




.ui_document_pageprev.active {
	
	opacity:				1;
	bottom:					0%;
	pointer-events:			auto;
	
}


.ui_document_pagenext {
	
	position:				absolute;
	right:					1%;
	bottom:					-10vh;
	width:					8vw;
	height:					8vw;
	min-width:				8vh;
	min-height:				8vh;
	
	background-color:		rgba(0,0,0,0.4);
	background-image:		url('../media/sysimg/next.png');
	background-position:	50% 50%;
	background-size:		contain;
	
	cursor:					pointer;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease, bottom 0.5s ease;
	
}

.ui_document_pagenext.active {
	
	opacity:				1;
	bottom:					0%;
	pointer-events:			auto;
	
}


.ui_document_marker {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					40%;
	height:					5%;
	
	background-image:		url('../media/sysimg/marker.png');
	background-position:	50% 50%;
	background-size:		100% 100%;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease;
	
}

.ui_document_marker.smooth {
	
	transition:				opacity 0.5s ease, top 0.5s ease, height 0.5s ease;
	
}

.ui_document_marker.active {
	
	opacity:				0.3;
	
}

.ui_document_markersection {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					90%;
	height:					5%;
	
	pointer-events:			none;
	
	opacity:				0;
	
	transition:				opacity 0.5s ease;
	
	overflow:				hidden;
	
}

.ui_document_markersection.smooth {
	
	transition:				opacity 0.5s ease, top 0.5s ease, height 0.5s ease, background-color 0.5s ease;
	
}


.ui_document_markersection.active {
	
	opacity:				0.5;
	
}



.ui_document_editmode {
	
	position:				absolute;
	left:					30%;
	top:					-10%;
	width:					60%;
	height:					6vh;
	
	background-color:		rgba(0,200,200,0.3);
	border:					rgba(0,128,128,1.0) 0.1vh solid;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.5s ease, top 0.5s ease;
	
}

.ui_document_editmode.active {
	
	top:					1vh;
	
	opacity:				1;
	pointer-events:			auto;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				1.5vw;
	
}

.ui_document_editmode_button {
	
	position:				absolute;
	
	padding:				0.5vh;
	
	background-color:		rgba(0,200,200,1);
	color:					rgba(255,255,255,1);
	
	opacity:				0;
	pointer-events:			none;
	
}

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

.ui_document_editmode_button.editmode	{
	
	top:					0.5vh;
	left:					0.5vh;
	width:					40%;
	height:					calc( 100% - 2vh	);
	
}

.ui_document_editmode_button.clearall	{
	
	top:					0.5vh;
	left:					0.5vh;
	width:					30%;
	height:					calc( 100% - 2vh	);
	
	background-color:		rgba(128,0,0,1);
	
}


.ui_document_editmode_button.cancel	{
	
	top:					0.5vh;
	right:					calc( 30% 	+ 2vh	);
	width:					30%;
	height:					calc( 100% 	- 2vh	);
	
	background-color:		rgba(128,128,128,1);
	
}


.ui_document_editmode_button.save	{
	
	top:					0.5vh;
	right:					0.5vh;
	width:					30%;
	height:					calc( 100% - 2vh	);
	
	background-color:		rgba(0,200,60,1);
	
}

.ui_document_editmarkerline	{
	
	position:				absolute;
	left:					0%;
	top:					20%;
	width:					98vw;
	height:					0.1vh;
	
	background-color:		rgba(255,80,40,0.3);
	border:					rgba(255,80,40,1) 0px solid;
	border-top-width:		0.5vh;
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.3s ease, height 0.3s ease, border-top-width 0.3s ease;
	
	overflow:				hidden;
	
}

.ui_document_editmarkerline.mouse	{
	
	height:					5vh;
	border-top-width:		0.2vh;
	
}

.ui_document_editmarkerline.active	{
	
	opacity:				1;
	
}

.ui_document_editmarkerline_section	{
	
	position:				absolute;
	left:					0%;
	top:					1vh;
	width:					95%;
	height:					calc( 100% - 2vh );
	
	padding-left:			0.5vh;
	padding-right:			0.5vh;
	padding-top:			0.5vh;
	
	border:					rgba(255,166,26,1) 0px solid;
	border-top-width:		0px;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				1.0vw;
	color:					rgba(255,255,255,1);
	
	opacity:				0.2;
	pointer-events:			none;
	
	transition:				opacity 0.2s ease, border-top-width 0.2s ease;
	
}

.ui_document_editmarkerline_section.active	{
	
	opacity:				0.8;
	border-top-width:		0.4vh;
	
}