.ui_search {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	opacity:				0;
	pointer-events:			none;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				2.5vw;
	
	transition:				opacity 0.3s ease;	
	
	background-color:		rgba(0,0,0,1);
	
}

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

.ui_search.portrait {
	
	font-size:				1.5vh;
	
}

.ui_search_background {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					100%;
	height:					100%;
	
	opacity:				0.5;
	pointer-events:			none;
	
	background-image:		url('../media/sysimg/bg_main.png');
	background-size:		cover;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
}

.ui_search_textinput {
	
	position:				absolute;
	left:					29vw;
	top:					1vw;
	width:					calc( 100% - 55vw );
	height:					6vw;
	
	background-color:		rgba(0,0,0,0.6);
	border:					rgba(255,166,26,1)	0.2vh solid;
	
	overflow:				hidden;
	
	padding:				1vh;
	
	font-size:				2.5vw;
	font-weight:			normal;
	text-align:				left;
	color:					rgba(255,255,255,1);
	
	transition:				width 0.3s ease;
	
}

.ui_search_textinput.cleartext {
	
	width:					calc( 100% - 61vw );
	
}


.ui_search_list {
	
	position:				absolute;
	right:					1vw;
	width:					calc( 100% 	- 30vw );
	top:					7.5vw;
	height:					calc( 100%	- 15vw );
	
	background-color:		rgba(0,0,0,0.6);
	
	overflow-x:				hidden;
	overflow-y:				scroll;
	
	font-weight:			normal;
	text-align:				left;
	color:					rgba(255,255,255,1);
	
}


.ui_search_cleartext {
	
	position:				absolute;
	right:					32vw;
	top:					1vh;
	width:					0vw;
	height:					6vw;
	
	opacity:				0;
	cursor:					pointer;
	pointer-events:			none;
	
	background-image:		url('../media/sysimg/icon_close.png');				
	background-size:		contain;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
	transition:				right 0.3s ease, width 0.3s ease, opacity 0.3s ease;
	
}

.ui_search_cleartext.visible {
	
	opacity:				1;
	width:					6vw;
	right:					26vw;
	pointer-events:			auto;
	
}

.ui_search_search {
	
	position:				absolute;
	right:					18vw;
	top:					1vh;
	width:					6vw;
	height:					6vw;
	
	opacity:				1;
	pointer-events:			auto;
	
	background-image:		url('../media/sysimg/icon_search.png');				
	background-size:		cover;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
}

.ui_search_item {
	
	width:					calc( 100% - 2vw );
	height:					fit-content;
	
	background-color:		rgba(0,0,0,0.5);
	
	padding:				1vh;
	
	border:					rgba(255,166,26,0.4) 0vh solid;
	border-left-color:		rgba(255,166,26,1);
	border-bottom-width:	0.1vw;
	border-left-width:		0vw;
	
	font-weight:			normal;
	text-align:				left;
	color:					rgba(255,255,255,1);
	
	transition:				border-left-width 0.3s ease, font-weight 0.3s ease, background-color 0.3s ease;
	
}

.ui_search_item.selected {
	
	border-left-width:		1vw;
	font-weight:			900;
	background-color:		rgba(255,166,26,0.4);
	
	
}

.ui_search_songinfopanel {
	
	position:				absolute;
	right:					1vw;
	width:					calc( 100% - 32vw );
	bottom:					7vw;
	height:					3vw;
	
	background-color:		rgba(0,180,60,1);
	border-color:			rgba(0,255,100,1);
	color:					rgba(255,255,255,1);
	
	padding:				1vh;
	
	font-family:			"noto_sansregular", Arial, sans-serif;
	font-size:				2.5vw;
	font-style:				italic;
	
	opacity:				0;
	pointer-events:			none;
	cursor:					pointer;
	
	transition:				opacity 0.3s ease;
	
}

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


.ui_search_mediaplayer {
	
	position:				absolute;
	right:					1vw;
	width:					calc( 100% - 30vw );
	bottom:					8vw;
	height:					5vw;
	
	color:					rgba(255,255,255,1);
	
	opacity:				0;
	pointer-events:			none;
	
	transition:				opacity 0.3s ease;
	
}

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

.ui_search_actions {
	
	position:				absolute;
	right:					1vw;
	width:					calc( 100% - 30vw );
	bottom:					2vw;
	height:					5vw;
	
	color:					rgba(255,255,255,1);
	
}


.ui_search_play {
	
	position:				absolute;
	left:					0%;
	top:					0%;
	width:					calc( 16% - 2vw );
	height:					4vw;
	
	padding:				1vw;
	
	color:					rgba(255,255,255,1);
	background-color:		rgba(255,166,26,0.8);
	
	font-weight:			bold;
	text-align:				center;
	
	cursor:					pointer;
	
	transition:				opacity 0.3s ease, background-color 0.3s ease, background-image 0.3s ease;
	opacity:				0.3;
	pointer-events:			none;
	
	background-image:		url('../media/sysimg/icon_play.png');
	background-size:		contain;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
}


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

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

.ui_search_play.playing {
	
	background-image:		url('../media/sysimg/icon_pause.png');
	
}

.ui_search_request {
	
	position:				absolute;
	left:					18%;
	top:					0%;
	width:					calc( 40% - 2vw );
	height:					4vw;
	
	padding:				1vw;
	
	color:					rgba(255,255,255,1);
	background-color:		rgba(255,166,26,0.8);
	
	font-weight:			bold;
	text-align:				center;
	
	cursor:					pointer;
	
	transition:				opacity 0.3s ease, background-color 0.3s ease;
	opacity:				0.3;
	pointer-events:			none;
	
}


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

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

.ui_search_request.requested {
	
	opacity:				1;
	background-color:		rgba(0,160,160,1.0);
	pointer-events:			none;
	
}


.ui_search_open {
	
	position:				absolute;
	left:					60%;
	top:					0%;
	width:					calc( 40% - 2vw );
	height:					4vw;
	
	padding:				1vw;
	
	color:					rgba(255,255,255,1);
	background-color:		rgba(255,166,26,0.8);
	
	font-weight:			bold;
	text-align:				center;
	
	cursor:					pointer;
	
	transition:				opacity 0.3s ease;
	opacity:				0.3;
	pointer-events:			none;
	
}


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

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

.ui_search_params {
	
	position:				absolute;
	left:					1vw;
	width:					25vw;
	top:					7.5vw;
	height:					calc( 100%	- 15vw );
	
	overflow-x:				hidden;
	overflow-y:				auto;
	
	color:					rgba(255,255,255,1);
	
}

.ui_search_params_label {
	
	font-weight:			normal;
	text-align:				left;
	
	color:					rgba(255,166,26,0.8);
	margin-bottom:			0.5vw;
	
}

.ui_search_params_area {
	
	border:					rgba(255,166,26,0.4) 0.2vh solid;
	background-color:		rgba(0,0,0,0.5);
	color:					rgba(255,255,255,1);
	
	font-weight:			normal;
	text-align:				left;
	
	width:					calc( 100% - 3vw );
	
	padding:				1vw;
	margin-bottom:			1vw;
	
	transition:				background-color 0.3s ease;
	cursor:					pointer;
	
}

.ui_search_params_area.requests {
	
	background-color:		rgba(0,255,255,1.0);
	font-weight:			bold;
	
}


.ui_search_params_bookselector {
	
	position:				absolute;
	left:					-120vw;
	width:					94vw;
	top:					7.5vw;
	height:					70%;
	
	overflow-x:				scroll;
	overflow-y:				hidden;
	
	border:					rgba(255,166,26,0.7) 0.2vh solid;
	background-color:		rgba(0,0,0,0.95);
	
	padding:				2vw;
	
	opacity:				0;
	pointer-events:			none;
	
	color:					rgba(255,255,255,1);
	
	transition:				left 0.5s ease, opacity 0.5s ease;
	
}

.ui_search_params_bookselector.active {
	
	left:					1vw;
	opacity:				1;
	pointer-events:			auto;
	
}


.ui_search_params_bookselector_close {
	
	position:				absolute;
	right:					1vw;
	bottom:					1vw;
	width:					fit-content;
	height:					4vw;
	
	padding:				1vw;
	
	color:					rgba(255,255,255,1);
	background-color:		rgba(255,166,26,1);
	
	font-weight:			bold;
	text-align:				center;
	
	cursor:					pointer;
	
	opacity:				1;
	
}

.ui_search_speech {
	
	position:				absolute;
	left:					1vw;
	width:					25vw;
	bottom:					2vw;
	height:					5vw;
	
	color:					rgba(255,255,255,1);
	
}

.ui_search_book {
	
	width:					4vw;
	height:					5.6vw;
	opacity:				0.4;
	
	margin-left:			0.5vw;
	
	border-style:			solid;
	border-width:			0.2vw;
	border-color:			rgba(255,166,26,1);
	
	background-size:		cover;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
	transition:				opacity 0.5s ease, border-width 0.5s ease, border-color 0.5s ease;
	
	pointer-events:			none;
	cursor:					pointer;
	
}

.ui_search_book.big {
	
	width:					16vw;
	height:					22.4vw;
	pointer-events:			auto;
	
}

.ui_search_book.selected {
	
	border-width:			0.3vw;
	border-color:			rgba(0,255,100,1);
	opacity:				1;
	
}

.ui_search_flag {
	
	width:					7.5vw;
	height:					4.5vw;
	opacity:				0.4;
	
	margin-left:			0.5vw;
	
	border-style:			solid;
	border-width:			0.2vw;
	border-color:			rgba(255,166,26,1);
	
	background-size:		cover;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	
	transition:				opacity 0.5s ease, border-width 0.5s ease, border-color 0.5s ease;
	
	pointer-events:			auto;
	cursor:					pointer;
	
}


.ui_search_flag.selected {
	
	border-width:			0.3vw;
	border-color:			rgba(0,255,100,1);
	opacity:				1;
	
}


.roundbrackets {
	
	color:					rgba( 50,180,255, 1);
	font-weight:			bold;
	font-size:				smaller;
	
	pointer-events:			none;
	
}

.squarebrackets {
	
	color:					rgba( 255,100,0, 1);
	font-weight:			normal;
	font-style:				italic;
	font-size:				smaller;
	
	pointer-events:			none;
	
}

.artist {
	
	color:					rgba( 255,220,180, 1);
	font-weight:			bold;
	font-style:				italic;
	font-size:				smaller;
	
	pointer-events:			none;
	
}

.request {
	
	background-color:		rgba( 0, 160, 160, 1);
	color:					rgba( 255,255,255, 1);
	font-weight:			bold;
	font-style:				normal;
	font-size:				smaller;
	padding-left:			0.5vw;
	padding-right:			0.5vw;
	
	pointer-events:			none;
	
}