/* for debug */
/*p {background-color: #f00;}*/

.screen {
	position: relative;
	display: none;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;

	color: rgb(238,238,238);
}
.screenabs {
	position: relative;
	display: none;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;
}
.screen.screenDisable{
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	filter: grayscale(50%);
}
.screen.screenDisableHome{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}


.screen.notimplement{
	/*filter: grayscale(100%);*/
	filter: brightness(30%);
}

.screen p {
	margin: 0;
	padding: 0;
	border: 0;
}


/* font size */
.f12 {font-size: 12px;}
.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f28 {font-size: 16px;}
.f30 {font-size: 17px;}
.f32 {font-size: 18px;}
.f36 {font-size: 20px;}
.f40 {font-size: 23px;}
.f42 {font-size: 24px;}
.f50 {font-size: 28px;}
.f72 {font-size: 40px;}
.f78 {font-size: 44px;}

/* text color */
.tc-w {color: #eee;}
.tc-y {color: #fa0;}
.tc-r {color: #e01;}
.tc-g {color: #888;}
.tc-d {color: #aaa;}
.tc-b {color: #000;}
.tc-gr {color: #0d0;}

/* background color */
.bc-y {background-color: #fa0;}
.bc-b {background-color: #000;}
.bc-w {background-color: #eee;}
.bc-g {background-color: #ddd;}

/* weight */
.tw-6 {font-weight: 600;}

/* text vertical align */
.tva-top {align-items: flex-start !important;}
.tva-cnt {align-items: center !important;}
.tva-btm {align-items: flex-end !important;}
.tva-bln {align-items: baseline !important;}

.ta-l {text-align: left;}
.ta-r {text-align: right;}
.ta-c {text-align: center;}

.va-ttop {vertical-align: text-top;}
.va-tbtm {vertical-align: text-bottom;}
.va-top {vertical-align: top;}
.va-btm {vertical-align: bottom;}
.va-mdl {vertical-align: middle;}

.dnone {display: none;}
.dnoneip {display: none !important;}
.vhide {visibility: hidden;}

.pd3 {padding: 0 3px;}
.pd5 {padding: 0 5px;}
.pd10 {padding: 0 10px;}
.pdl10 {padding-left: 10px;}
.pdl30 {padding-left: 30px;}
.pdt20 {padding-top: 20px;}

.mg5 {margin: 0 5px;}

span.slot {padding: 0 1px;}

.popscreen .conts{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 480px;
	height: 270px;
	display: flex;

	align-items: center;
	justify-content: center;
}

.popscreen .message {
	/*position: absolute;*/
	width: 400px;
	height: 140px;
	background-color: #000;
	border: 2px solid #333;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
}
.popscreen .message span {
	padding: 0 15px;
	line-height: 20px;
}

.popscreen .message div {
	height: 30px;
	width: 390px;
	display: none;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.popscreen .message div.active {display: flex;}

.popscreen .message div > div {
	height: 30px;
	width: 100px;
	line-height: 30px;
	border: 1px solid #888;
	color: #fff;
	background-color: #333;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.popscreen .message div > div.fcs {
	color: #000;
	background-color: #fa0;
}
.popscreen .message div > div.nouse {display: none;}
#notimplement .mes {
	width: 100%;
	height: 40%;
	background-color: rgba(255,255,255,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rec.stby span:nth-of-type(1) {display: none;}
.rec.stby span:nth-of-type(3) {display: none;}
.rec.cache span:nth-of-type(2) {display: none;}
.rec span {line-height: 28px;vertical-align: bottom;}