/*

#80fa3f37 — выделенный элемент (фокус)
#8000cbf0 — выбранный элемент
#5b00cbf0 — выбранный элемент (наведение)

#777777 — текст передач без записей
#FFFFFF — основной текст
#BBBBBB - текст даты в списке дат

#BF000000 — подложка для плеера

#BF0E1D2F — подложка в списках

#19FFFFFF — разделитель между списками
#19FFFFFF — разделитель в списке
*/

#video {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0px;
	top: 0px;
}

/* Common styles for channels, days, schedule */
.roulette {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.bottomLine {
	position: absolute;
	height: 1px;
	width: 100%;
	bottom: 0px;
	background: rgba(255, 255, 255, 0.1);
}

.leftLine {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;

	background: rgba(255, 255, 255, 0.1);
}
/* END: Common styles for channels, days, schedule */

/* Channels panel*/
.channels {
	position: relative;
	float: left;
	width: 424px;
	height: 100%;
	top: 0px;

	color: white;
	background: rgba(14, 29, 47, 0.75);
}

.channels .item {
	height: 66px;
	position: relative;
}

.channels .item img {
	width: 60px;
	height: 60px;
	position: absolute;
	border-radius: 6px;
	top: 3px;
	bottom: 1px;
	left: 16px;
}

.channels .item .empty_logo {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 3px;
	left: 16px;
	background: url(../img/ch_logo_empty.png) no-repeat;
	border-radius: 6px;
	background-size: contain;
}

.channels .item .title {
	position: absolute;
	left: 0px;
}

.channels .item .title_wr {
	position: absolute;
	top: 18px;
	left: 92px;
	font-size: 26px;
	white-space: nowrap;
	width: 315px;
	height: 35px;
	overflow: hidden;
}

.channels .item.isFav .title_wr { width: 280px; }
.channels .item.isArchive .title_wr { width: 220px; }
.channels .archive {
	position: absolute;
	top: 25px;
	left: 315px;
	font-size: 18px;
	display: none;
}

.channels .item.isArchive .archive { display:block; }
.channels .star {
	position: absolute;
	width: 26px;
	height: 26px;
	background: url(../img/ch_star.png);
	top: 18px;
	left: 390px;
	display: none;
}

.channels .item.isFav .star { display:block; }

.channels.active .item.selected {
	background: rgba(250, 63, 55, 0.56);
}

.channels .item.selected {
	background: rgba(0, 204, 250, 0.56);
}

.channels .item:hover {
	background: rgba(250, 63, 55, 0.36);
}

.channels .item:active {
	background: rgba(0, 204, 250, 0.56);
}

.channels .item.delimiter {
	height: 80px;
	background: none;
}
.channels .item.delimiter .title {
	left: 30px;
	font-size: 30px;
	font-weight: 500;
	top: 35px;
	letter-spacing: 0.1px;
}

.channels .item.delimiter .bottomLine {
	background: rgba(183, 183, 183, 0.7);
	height: 2px;
}
/* END: Channels panel*/

/* days panel */
.days {
	color: white;
	right: 0px;
	top: 0px;
	width: 184px;
	height: 100%;
	position: relative;
	float: right;
	background: rgba(14, 29, 47, 0.75);
}
.days .item {
	position: relative;
	height: 66px;
}
.days .item.red {
	color: red;
}

.days .item .weekday {
	position: absolute;
	left: 20px;
	top: 6px;
	font-size: 24px;
}

.days .item .date {
	position: absolute;
	left: 20px;
	top: 38px;
	color: #BBBBBB;
	font-size: 18px;
}

.days.active .item.selected {
	background: rgba(250, 63, 55, 0.56);
}

.days .item.selected {
	background: rgba(0, 204, 250, 0.56);
}

.days .item:hover {
	background: rgba(250, 63, 55, 0.36);
}

.days .item:active {
	background: rgba(0, 204, 250, 0.56);
}
/* END: days panel */

/* schedule panel */
.schedule {
	left: 484px;
	right: 184px;
	max-width: 100%;
	height: 100%;
	position: absolute;
	color: white;
	background: rgba(14, 29, 47, 0.75);
}
.schedule .item {
	position: relative;
	height: 66px;
}
.schedule .time {
	font-size: 26px;
	position: absolute;
	top: 18px;
	left: 20px;
}
.schedule .item .title {
	position: absolute;
	left: 0px;
}

/* TODO: add adaptivity */
.schedule .item .title_wr {
	font-size: 26px;
	position: absolute;
	top: 18px;
	left: 93px;
	white-space: nowrap;
	width: 500px;
	height: 35px;
	overflow: hidden;
}
.schedule .item.isOntheair .title_wr { width: 400px; }
.schedule .item .time, .schedule .item .title_wr { color: #cccccc; font-weight: 300; }
.schedule .item.isLink .time, .schedule .item.isLink .title_wr { color: #ffffff; font-weight: 500; }
.schedule .ontheair {
	font-size: 18px;
	position: absolute;
	top: 25px;
	right: 24px;
	display: none;
}
.schedule .item.isOntheair .ontheair { display:block; }
.schedule .item.isOntheair .time {
	color: white;
	background: url(../img/arr_ontheair.png);
	width: 87px;
	height: 35px;
	top: 10px;
	left: 16px;
	padding-left: 4px;
	padding-top: 5px;
	font-weight: 600;
	font-size: 30px;
}
.schedule .item.isOntheair .title_wr {
	color: white;
	left: 118px;
	top: 15px;
	font-weight: 600;
	font-size: 30px;
}

.schedule.active .item.selected {
	background: rgba(250, 63, 55, 0.56);
}

.schedule .item.selected {
	background: rgba(0, 204, 250, 0.56);
}

.schedule .item:hover {
	background: rgba(250, 63, 55, 0.36);
}

.schedule .item:active {
	background: rgba(0, 204, 250, 0.56);
}
/* END: schedule panel */

/* channel indicator */
.indicator {
	position: absolute;
	min-width: 100px;
	top: 82px;
	right: 32px;
	padding: 22px 8px;

	color: white;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.7);
	
	text-align: center;
	font-size: 38px;
	letter-spacing: 8px;
	text-indent: 8px;
	display: none;
}
/* END: channel indicator */


/* Right navigation menu */
.navigation {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 10px;
	margin-right: 6px;
	padding: 6px;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	border-radius: 6px;
}


.navigation__text {
	padding: 5px 8px 0 8px;
	letter-spacing: 0.5px;
	font-size: 18px;
	color: white;
	float: left;
}

.navigation__icon {
	float: left;
	width: 30px;
	height: 30px;
	background: white;
	background: url(../img/btm_icons_sml.png) no-repeat;
}

.navigation__icon.iA 		{ background-position: 6px -167px; }
.navigation__icon.iB 		{ background-position: 6px -204px; }
.navigation__icon.iC 		{ background-position: 6px -240px; }
.navigation__icon.iD 		{ background-position: 6px -275px; }
/* END: Right navigation menu */


/* reclame */
#video.isReclame {
	z-index: 998;
}
.reclame {
	z-index: 999;
	position: absolute;
	bottom: 30px;
	right: 30px;
	color: white;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.7);
	padding: 10px;
	text-align: center;
	font-size: 24px;
	display: none;
}
.reclame .timer { display: none; }
.reclame .skip {
	background: url('../img/ok_btn.png');
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 0px 0px;
	height: 30px;
	display: none;
}
/* END: reclame */

/* star indicator */
.indicator_star {
	position: absolute;
	top: 82px;
	right: 32px;
	display: none;
}
.indicator_star .add, .indicator_star .del { display: none; }
.indicator_star.add, .indicator_star.del, .indicator_star.add .add, .indicator_star.del .del { display: block; }
/* END: star indicator */

/* panels scroll */
.scrollBar {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 10px;
	background: black;
	height: 100%;
	display: none;
}
.scrollBar > .scrollLine {
	position: absolute;
	left: 1px;
	width: 11px;
	background: rgb( 179, 180, 180 );
	height: 33%; /* change height here */
	top: 33%; /* change pos here */
}
.scrollBar > .scrollLine.locked {
	background: rgb( 227, 229, 229 );
}
/* END: panels scroll