/*!
 * chinachu
**/

/* Override some defaults */
html, body {
	padding         : 0;
	margin          : 0;
	top             : 0;
	right           : 0;
	bottom          : 0;
	left            : 0;
	cursor          : url(pointer.cur), default;
	background-color: rgb(194,65,134);
	-webkit-text-size-adjust: none;
	scrollbar-base-color    : #d67fae; }

body, input {
	font-family     : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
	                  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

a {
	cursor: pointer; }

div.fullmask {
	z-index            : 20000;
	position           : absolute;
	top                : 0;
	right              : 0;
	bottom             : 0;
	left               : 0;
	background-color   : #000;
	background-color   : rgba(0,0,0,0.5);
	background-repeat  : no-repeat;
	background-position: center center; }

div.fullmask.loading {
	background-image   : url(./loading-circular-d67fae-444444.gif); }

div.fullmask.panic {
	background-image   : none;
	background-color   : rgba(255,0,0,0.5); }

div.fullscreen {
	z-index            : 10;
	position           : absolute;
	top                : 0;
	right              : 0;
	bottom             : 0;
	left               : 0;
	overflow           : hidden;
	padding            : 0 !important;
	margin             : 0; }

/* noscroll */
.noscroll {
	overflow: hidden !important; }

/* muted */
.muted {
	opacity: 0.4 !important; }

/* color */
.color-red    { color: #ff0053 !important; }
.color-orange { color: #ff9700 !important; }
.color-green  { color: #7ab624 !important; }
.color-white  { color: #ffffff !important; }
.color-warning{ color: rgb(191,0,41) !important; }

.color-cat-anime { color: #d652d6 !important; }
.color-cat-information { color: #e2519c !important; }
.color-cat-news { color: #d4d436 !important; }
.color-cat-sports { color: #6f6fff !important; }
.color-cat-variety { color: #2dcbcb !important; }
.color-cat-drama { color: #dd5a5a !important; }
.color-cat-music { color: #50d950 !important; }
.color-cat-cinema { color: #e2994b !important; }
.label-cat-theater { color: #eaab68 !important; }
.color-cat-documentary { color: #d4c250 !important; }
.color-cat-hobby { color: #51bcd6 !important; }
.color-cat-welfare { color: #51a6d6 !important; }
.color-cat-etc { color: #888888 !important; }

.label-cat-anime { background-color: #d652d6 !important;; color: white !important;; }
.label-cat-information { background-color: #e2519c !important;; color: white !important;; }
.label-cat-news { background-color: #d4d436 !important;; color: white !important;; }
.label-cat-sports { background-color: #6f6fff !important;; color: white !important;; }
.label-cat-variety { background-color: #2dcbcb !important;; color: white !important;; }
.label-cat-drama { background-color: #dd5a5a !important;; color: white !important;; }
.label-cat-music { background-color: #50d950 !important;; color: white !important;; }
.label-cat-cinema { background-color: #e2994b !important;; color: white !important;; }
.label-cat-theater { background-color: #eaab68 !important;; color: white !important;; }
.label-cat-documentary { background-color: #d4c250 !important;; color: white !important;; }
.label-cat-hobby { background-color: #51bcd6 !important;; color: white !important;; }
.label-cat-welfare { background-color: #51a6d6 !important;; color: white !important;; }
.label-cat-etc { background-color: #888888 !important;; color: white !important;; }

.label-type-GR { background-color: #e2dcdc !important; color: #380707 !important; }
.label-type-BS { background-color: #c5caea !important; color: #0d1a6f !important; }
.label-type-CS { background-color: #eccdcd !important; color: #691111 !important; }
.label-type-SKY, .label-type-EX { background-color: #bcecf7 !important; color: #0b4c5a !important; }

.bg-cat-anime { background: #ffe0ff !important; }
.bg-cat-information { background: #ffe0f0 !important; }
.bg-cat-news { background: #ffffe0 !important; }
.bg-cat-sports { background: #e0e0ff !important; }
.bg-cat-variety { background: #e0ffff !important; }
.bg-cat-drama { background: #ffe0e0 !important; }
.bg-cat-music { background: #e0ffe0 !important; }
.bg-cat-cinema { background: #fff0e0 !important; }
.bg-cat-theater { background: #f7efe7 !important; }
.bg-cat-documentary { background-color: #fff7c4 !important; }
.bg-cat-hobby { background-color: #cfe5ea !important; }
.bg-cat-welfare { background-color: #cde5f3 !important; }
.bg-cat-etc { background: #f0f0f0 !important; }

.bg-green  { background-color: #7ab624 !important; }
.bg-smoke  { background-color: rgba(0,0,0,0.05) !important; }
.bg-warning{ background-color: rgba(191,0,41,0.6) !important; }

.bg-chinachu {
	background-color: rgb(194,65,134); }

.bg-dark {
	background-color: #2b2b2b; }

.bg-black {
	background-color: #000;
	color: #fff; }

.bg-silver {
	background-color: #ddd; }

div.content-loading {
	z-index         : 100;
	position        : absolute;
	top             : 0;
	right           : 0;
	bottom          : 0;
	left            : 0;
	background-color: #aaa;
	background-color: rgba(0,0,0,0.2); }

	div.content-loading > div {
		position        : absolute;
		top             : 50%;
		left            : 50%;
		margin-left     : -51px;
		margin-top      : -5px;
		width           : 100px;
		height          : 8px;
		background-color: #ddd;
		background-color: rgba(255,255,255,0.4);
		border          : 1px solid #fff;
		border-color    : rgba(255,255,255,0.5);
		box-shadow      : -1px -1px 0 rgba(0,0,0,0.1),
		                  -1px 1px 0 rgba(0,0,0,0.1),
		                  1px -1px 0 rgba(0,0,0,0.1),
		                  1px 1px 0 rgba(0,0,0,0.1); }

		div.content-loading > div > div {
			height          : 8px;
			background-color: #c24186; }

/**
 *  main styles ----------------------------------------------------------------------------------------------------
**/
/* common */
nav.header,
div.middle,
div.footer {
	position        : absolute;
	right           : 0;
	left            : 0;
	margin          : 0;
	padding         : 0; }

div.middle > div,
div.footer > div {
	position        : absolute;
	top             : 0;
	right           : 0;
	bottom          : 0;
	left            : 0;
	margin          : 0;
	padding         : 0; }

/* header */
nav.header {
	position  : absolute;
	top       : 0;
	right     : 0;
	left      : 0;
	height    : 40px;
	min-height: 40px;
	color     : #fff;
	background: rgb(194,65,134);
	border    : 0;
	padding   : 0 5 0 5px;
	overflow  : visible; }

	div.navbar-header {
		height: 40px; }

	a.navbar-brand {
		height: 40px;
		padding: 9px 15px;
		font-size: 16px;
		line-height: 16px;
		color: rgba(255,255,255,0.6) !important;
		text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
		cursor: default; }

	a.navbar-brand i {
		font-style: normal;
		vertical-align: super;
		font-size: 10px;
		margin-left: 2px; }

	label.navbar-toggle {
		margin: 5px 10px 0;
		padding: 7px 8px;
		height: 30px; }

	#navbar-toggle-cbox:checked ~ .collapse {
		display: block; }

	#navbar-toggle-cbox {
		display: none; }

	nav.header > div#navbar {
		background: rgb(194,65,134); }

		div#navbar > ul.nav > li.selected {
			background: rgb(179,0,95); }

			div#navbar > ul.nav > li > a {
				padding: 11px 10px 9px 10px;
				line-height: 20px;
				font-size: 13px;
				color: rgba(255,255,255,0.8); }

			div#navbar > ul.nav > li > a:hover {
				color: rgba(255,255,255,1); }

			div#navbar > ul.nav > li > a.warning::after {
				display: inline-block;
				content: "!";
				text-align: center;
				width: 13px;
				height: 15px;
				line-height: 17px;
				font-size: 13px;
				font-weight: bold;
				border-radius: 2px;
				margin-left: 2px;
				color: white;
				box-shadow: 0 0 2px 0 white;
				background: rgb(177, 20, 20); }

				div#navbar > ul.nav > li > a > span {
					margin-right: 5px; }

				div#navbar > ul.nav > li > a > i.badge {
					margin-left: 4px;
					padding: 0;
					font-style: normal;
					font-weight: 100;
					font-size: 10px;
					color: white;
					background: none; }

@media (min-width: 768px) {

	div#navbar > ul.nav {
		float: none; }

		div#navbar > ul.nav > li.category-search,
		div#navbar > ul.nav > li.category-pref {
			float: right; }
}

/* middle */
div.middle {
	top             : 40px;
	bottom          : 0;
	background-color: #fff; }

	div.middle > div {
		position : absolute; }

	div.middle > div.side {
		top      : 0;
		left     : 0;
		bottom   : 0;
		width    : 140px;
		overflow : hidden; }

	div.middle.extend > div.side {
		width    : 40px; }

	div.middle.noside > div.side {
		width    : 0; }

		div.middle > div.side > div {
			position  : absolute; }

		div.middle > div.side > div.side-body {
			top       : 0;
			right     : 0;
			bottom    : 0;
			left      : 0;
			padding   : 10px 0 10px 10px;
			overflow  : auto;
			overflow-x: hidden;
			overflow-y: auto;
			background: #e0e0e0; }

		div.middle.extend > div.side > div.side-body {
			top       : 0;
			padding   : 5px 0; }

			div.middle > div.side > div.side-body > a.sakura-button {
				display      : block;
				border       : none;
				background   : transparent no-repeat 10px center;
				text-shadow  : none;
				color        : #777;
				text-align   : right;
				font-size    : 13px;
				padding      : 6px 10px 5px 30px;
				border-left  : 1px solid transparent;
				border-top   : 1px solid transparent;
				border-bottom: 1px solid transparent;
				box-shadow   : none;
				white-space  : nowrap; }

			div.middle.extend > div.side > div.side-body > a.sakura-button {
				text-indent  : 50px;
				color        : transparent; }

			div.middle > div.side > div.side-body > a.sakura-button:hover {
				color        : black; }

			div.middle > div.side > div.side-body > a.sakura-button.sakura-button-selected {
				color            : #2b2b2b;
				background-color : white;
				border           : none; }

	div.middle > div.main {
		top      : 0;
		right    : 0;
		bottom   : 0;
		left     : 140px; }

	div.middle.extend > div.main {
		left     : 40px; }

	div.middle.noside > div.main {
		left     : 0; }

		div.middle > div.main > div {
			position: absolute; }

		div.middle > div.main > div.main-head {
			z-index   : 5;
			top       : 0;
			right     : 0;
			left      : 0;
			height    : 40px;
			background: rgb(194,65,134);
			color     : #fff;
			overflow  : hidden; }

		div.middle > div.main.nohead > div.main-head {
			height    : 0;
			color     : rgb(194,65,134); }

		div.middle > div.main > div.main-head.overline {
			z-index      : 100;
			box-shadow   : 0 4px 0 rgba(0,0,0,0.1); }

			div.middle > div.main > div.main-head > div.main-head-title {
				margin: 10px 10px 0 10px; }

				div.middle > div.main > div.main-head > div.main-head-title > h1 {
					margin     : 0;
					line-height: 22px;
					font-weight: normal;
					font-size  : 19px;
					white-space: nowrap; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.flag {
						margin-right  : 4px;
						font-size     : 12px;
						background    : rgba(0,0,0,0.1);
						vertical-align: top;
						padding       : 0 2px; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.flag.skip {
						background    : #777; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.flag.manual {
						background    : #2b2b2b; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.subtitle {
						font-size     : 14px;
						background    : rgba(0,0,0,0.1);
						color         : rgba(255,255,255,0.8);
						vertical-align: top;
						padding       : 0 5px; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.episode {
						font-size     : 12px;
						background    : rgba(255,255,255,0.8);
						color         : rgb(194,65,134);
						vertical-align: top;
						padding       : 0 2px; }

					div.middle > div.main > div.main-head > div.main-head-title > h1 > span.id {
						font-size     : 12px;
						color         : rgba(255,255,255,0.5);
						vertical-align: top;
						padding       : 0 2px; }

			div.middle > div.main > div.main-head > div.main-head-toolbar {
				position  : absolute;
				top       : 0;
				right     : 0;
				bottom    : 0;
				padding   : 0 10px;
				background: rgb(194,65,134);
				box-shadow: -2px 0 0 rgba(194,65,134,0.7),
				            -4px 0 0 rgba(194,65,134,0.7),
				            -6px 0 0 rgba(194,65,134,0.7); }

				div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar {
					min-height: 40px;
					height: 40px;
					margin: 0; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar .flagrate-checkbox {
						color: white; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > * {
						vertical-align: inherit; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > hr {
						width  : 0;
						display: inline-block;
						margin : 0 5px;
						padding: 0;
						border : none; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button {
						border     : none;
						background : transparent no-repeat 5px center;
						font-size  : 13px;
						color      : inherit;
						box-shadow : none;
						line-height: 15px;
						padding    : 11px 5px 9px 5px;
						border     : 2px solid transparent;
						text-shadow: none;
						transition : none; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button.day {
						color: rgba(255,255,255,0.7); }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button.selected {
						color: #fff;
						background: rgba(179,0,95,0.25);
						box-shadow: 0 3px 0 rgb(179,0,95); }

						div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button > span {
							color         : #aaa;
							font-size     : 10px;
							line-height   : 10px;
							vertical-align: top; }

						div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button:hover > span {
							color         : #555; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button.sakura-button-icon {
						padding-left: 25px; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button:hover {
						background-color: rgba(0,0,0,0.2);
						color           : #fff; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button.sakura-button-disabled {
						cursor          : default;
						color           : #aaa;
						opacity         : 0.5; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button.sakura-button-disabled:hover {
						background-color: transparent; }

					@media screen and (max-width: 880px){
					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button {
						font-size  : 11px; }
					}

					@media screen and (max-width: 800px){
					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button {
						overflow           : hidden;
						width              : 0px;
						white-space        : nowrap;
						background-position: center center;
						text-indent        : 100px; }

					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button:hover {
						width              : auto;
						white-space        : nowrap;
						background-position: 5px center;
						text-indent        : 0; }
					}

					@media screen and (max-width: 500px){
					div.middle > div.main > div.main-head > div.main-head-toolbar > div.navbar > a.sakura-button-icon {
						padding-left       : 20px !important; }
					}

			div.middle > div.main > div.main-head > div.clock {
				position        : absolute;
				top             : 6px;
				bottom          : 6px;
				left            : 145px;
				background-color: rgba(0,0,0,0.5);
				font-size       : 18px;
				line-height     : 18px;
				padding         : 6px 10px 4px; }

			div.middle > div.main > div.main-head > div.clock::before {
				content         : "";
				top             : 100%;
				left            : 5px;
				position        : absolute;
				border-left     : 3px solid rgba(0,0,0,0.5);
				border-top      : 3px solid rgba(0,0,0,0.5);
				border-right    : 3px solid transparent;
				border-bottom   : 3px solid transparent; }

		div.middle > div.main > div.main-body {
			top     : 40px;
			right   : 0;
			bottom  : 0;
			left    : 0;
			overflow: auto;
			background-size    : cover;
			background-position: center center; }

		div.middle > div.main.nohead > div.main-body {
			top     : 0; }

		div.middle > div.main > div.main-body.overline::after {
			z-index   : 100;
			height    : 4px;
			display   : block;
			content   : "";
			position  : absolute;
			bottom    : 0;
			right     : 0;
			left      : 0;
			background: rgba(0,0,0,0.15); }

			div.middle > div.main > div.main-body > div {
				position: absolute;
				top     : 0;
				right   : 0;
				bottom  : 0;
				left    : 0;
				overflow: auto;
				padding : 10px 10px 28px; }

			div.middle > div.main > div.main-body > div.ex {
				padding : 0 0 10px;
				background: #fafafa; }

			div.middle > div.main > div.main-body > div.loading {
				background: no-repeat center center url(./loading-circular-2b2b2b-ffffff.gif); }

			div.middle > div.main > div.main-body > div.failure {
				background: rgba(255,0,0,0.1); }

				div.middle > div.main > div.main-body div.program-meta {
					font-size    : 13px;
					margin       : 10px 0 15px;
					line-height  : 20px;
					color        : #777; }

					div.middle > div.main > div.main-body div.program-meta > span.dynamic-time.soon {
						color       : green; }

					div.middle > div.main > div.main-body div.program-meta > span.dynamic-time.now {
						color       : red; }

				div.middle > div.main > div.main-body p.program-detail {
					font-size    : 13px;
					white-space  : pre-wrap; }

				@media (min-width: 992px) {
				div.middle > div.main > div.main-body p.program-detail {
					overflow: auto;
					height: calc(100vh - 400px); }
				}

				div.middle > div.main > div.main-body div.ex .row > div > img {
					margin-top: 10px; }

				@media (min-width: 992px) {
				div.middle > div.main > div.main-body div.ex .row > div:last-child > img {
					max-height: calc(100vh / 3 - 80px);
					float: right; }
				}

/* footer */
div.footer {
	z-index         : 10;
	right           : 0;
	bottom          : 0;
	left            : auto;
	height          : auto;
	padding         : 0 10px; }

	div.footer > a.sakura-button {
		margin-right    : 5px;
		border          : none;
		display         : block;
		float           : left;
		width           : auto;
		font-size       : 11px;
		line-height     : 15px;
		height          : 15px;
		padding         : 5px 10px;
		background-color: rgba(194,65,134,0.4);
		box-shadow      : none;
		box-sizing      : initial;
		text-shadow     : none }

	div.footer > a.sakura-button.sakura-button-icon {
		padding-left    : 25px; }

	div.footer > a.sakura-button:hover {
		color           : white;
		background-color: rgba(194,65,134,1); }

	div.footer > a.sakura-button.sakura-button-selected {
		color           : white;
		background-color: rgba(194,65,134,1); }

/* hyperform */

.hyperform button.selected {
	border-color    : #000 !important;
	border-color    : rgba(0, 0, 0, 0.5) !important;
	background-color: #c24186 !important; }

	.hyperform button.selected > label {
		color: #fff; }

.hyperform div.checkbox {
	margin: 0 0 -2px 0 !important; }

	.hyperform div.checkbox > button {
		margin: 0 5px 2px 0 !important; }

.hyperform div.slider > .slider-base {
	background-image: none !important;
	background-color: #fff !important;
	border-color    : #000 !important; }

.hyperform div.slider > .slider-display {
	color           : #c24186 !important; }

	.hyperform div.slider > .slider-base > .slider-fill {
		background-image: none !important;
		background-color: #c24186 !important; }

		.hyperform div.slider > .slider-base > .slider-fill > .slider-handle {
			border-color    : #000 !important;
			background-image: none !important;
			background-color: #d67fae !important; }

/* flagrate */

label.flagrate-checkbox > div,
label.flagrate-radio > div {
	border-color    : rgba(179,0,95,0.9); }

label.flagrate-checkbox > input:checked+div,
label.flagrate-radio > input:checked+div {
	background-color: rgb(179,0,95);
	border-color    : rgb(179,0,95); }

div.flagrate-grid > div > table > tbody > tr.flagrate-grid-row-selected,
div.flagrate-select > div.flagrate-grid > div > table > tbody > tr.flagrate-grid-row-selecte {
	background-color: rgba(179,0,95,0.25); }

div.flagrate-grid > div > table > tbody > tr:nth-child(odd).flagrate-grid-row-selected {
	background-color: rgba(179,0,95,0.30); }

div.flagrate-grid > div > table > tbody > tr.flagrate-grid-row-selected:hover,
div.flagrate-select > div.flagrate-grid > div > table > tbody > tr.flagrate-grid-row-selected:hover {
	background-color: rgba(179,0,95,0.35); }

div.flagrate-grid > div > table > tbody > tr:nth-child(odd).flagrate-grid-row-selected:hover {
	background-color: rgba(179,0,95,0.40); }

div.flagrate-grid td.types,
div.flagrate-grid td.categories {
	text-overflow: unset; }

div.flagrate-toolbar > div.flagrate-progress {
	margin: 0 0 0 5px; }

div.flagrate-progress > div {
	background-color: rgb(194,65,134); }

button.flagrate-button > span > span.glyphicon {
	margin-right: 4px;
	line-height: 1;
	font-family: 'Glyphicons Halflings'; }

/* page */

button.toggle-channels {
	margin: 10px;
	background-color: #f7f7f7;
	box-shadow: 1px 1px 1px #ddd, inset -2px -2px 0 rgba(0,0,0,0.15);
	border-top-color: #ccc;
	border-left-color: #ccc;
	border-right-color: #999;
	border-bottom-color: #999; }

button.toggle-channels.dent {
	background-color: #eee;
	box-shadow: inset 2px 2px 0 rgba(0,0,0,0.15);
	border-top-color: #999;
	border-left-color: #999;
	border-right-color: #ccc;
	border-bottom-color: #ccc; }

div.channel-cards {
	padding: 5px 10px;
	margin-bottom: 10px;
	background: #eee;
	box-shadow: inset 0 3px 0 #ddd;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #ddd; }

	div.channel-cards div.channel-card {
		position: relative;
		margin: 10px 0;
		overflow: hidden;
		background: #f7f7f7;
		border-radius: 3px; }

		div.channel-cards div.channel-card > div.channel {
			position: relative;
			overflow: hidden;
			line-height: 28px;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0 80px 0 10px; }

		div.channel-cards div.channel-card > div.channel.has-logo {
			background-position: left center;
			background-size: contain;
			background-repeat: no-repeat;
			padding-left: 55px; }

			div.channel-cards div.channel-card > div.channel > button.live {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 11px;
				background: rgba(255,255,255,0.25); }

		div.channel-cards div.channel-card > .flagrate-progress {
			height: 2px; }

		div.channel-cards div.channel-card > button.program {
			width: 100%;
			height: 40px;
			text-align: left; }

			div.channel-cards div.channel-card > button.program > span > span {
				padding: 0 2px;
				margin-right: 4px;
				border-radius: 2px;
				font-size: 10px; }

			div.channel-cards div.channel-card > button.program > span > span:hover {
				text-decoration: none !important; }

div.program-cards {
	padding: 0 10px; }

	div.program-cards ul > li.list-group-item.skip {
		opacity: 0.5; }

	div.program-cards ul > li.list-group-item.conflict {
		color: red; }

	div.program-cards ul > li.list-group-item:hover {
		cursor: pointer;
		background: #fafafa; }

	div.program-cards ul > li.list-group-item > div.title {
		cursor: pointer;
		margin-bottom: 5px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; }

	div.program-cards ul > li.list-group-item.skip > div.title {
		text-decoration: line-through; }

		div.program-cards ul > li.list-group-item > div.title > span {
			vertical-align  : top;
			background-color: #eee;
			font-size       : 10px;
			margin-right    : 2px;
			padding         : 0 2px;
			border-radius   : 2px; }

		div.program-cards ul > li.list-group-item > div.title > span[rel="新"] {
			color           : #23ab16; }

		div.program-cards ul > li.list-group-item > div.title > span[rel="終"] {
			color           : #d02e54; }

		div.program-cards ul > li.list-group-item > div.title > span[rel="再"] {
			color           : #951ac6; }

		div.program-cards ul > li.list-group-item > div.title > span.episode {
			background : #fff;
			padding    : 2px 4px 1px 3px;
			margin-left: 5px;
			color      : #d02e54; }

	div.program-cards ul > li.list-group-item > span.dynamic-time {
		color       : #999;
		font-size   : 11px;
		margin-right: 5px; }

	div.program-cards ul > li.list-group-item > span.dynamic-time.soon {
		color       : #68e400; }

	div.program-cards ul > li.list-group-item > span.dynamic-time.now {
		color       : #c6a21a; }

	div.program-cards ul > li.list-group-item > img {
		display: block;
		margin-bottom: 5px; }

	div.program-cards ul > li.list-group-item > span.label {
		font-size: 10px;
		font-weight: normal;
		padding: 0 2px; }

div.timetable {
	background: #555; }

div.timetable,
div.timetable * {
	-webkit-box-sizing : border-box;
	-moz-box-sizing    : border-box;
	-ms-box-sizing     : border-box;
	-o-box-sizing      : border-box;
	box-sizing         : border-box; }

div.timetable > div.board {
	z-index    : 10;
	position   : absolute;
	top        : 0;
	left       : 20px;
	overflow   : visible; }

	div.timetable > div.board > div.handline {
		z-index   : 2;
		position  : absolute;
		left      : 0;
		height    : 2px;
		background: rgba(255,102,0,0.5); }

	div.timetable > div.board > div.cutline {
		z-index     : 1;
		position    : absolute;
		top         : 0;
		bottom      : 0;
		width       : 0;
		border-right: 1px dashed rgba(255,0,0,0.5); }

	div.timetable > div.board > div.rect {
		z-index     : 0;
		position    : absolute;
		background  : #ccc;
		cursor      : pointer;
		box-shadow  : inset 0 1px 0 rgba(25,25,25,0.3); }

	div.timetable > div.board > div.rect:hover {
		box-shadow  : inset 0 0 0 2px rgba(194,65,134,0.4); }

	div.timetable > div.board > div.rect.reserved,
	div.timetable > div.board > div.rect.recording {
		background  : red !important; }

	div.timetable > div.board > div.rect.reserved:hover,
	div.timetable > div.board > div.rect.recording:hover {
		background  : white !important; }

	div.timetable > div.board > div.rect.skip {
		background  : gray !important; }

	div.timetable > div.board > div.rect.conflict {
		background  : gray !important; }

	div.timetable > div.board > div.rect.muted {
		opacity     : 0.5 !important; }

	div.timetable > div.board > div.rect.spot {
		z-index     : 1;
		box-shadow  : inset 0 0 0 1px white,
		              0 0 5px 2px rgba(255, 87, 145, 0.82); }

		div.timetable > div.board > div.rect > div {
			position   : absolute;
			top        : 2px;
			right      : 2px;
			bottom     : 0;
			left       : 2px;
			overflow   : hidden;
			line-height: 1.3em;
			white-space: normal;
			word-break : break-all;
			font-family: "Yu Gothic", "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
			             Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			color      : #444; }

			div.timetable > div.board > div.rect > div > h4 {
				margin   : 0 0 2px 0;
				font-size: 11px; }

			div.timetable > div.board > div.rect > div > div {
				display: block;
				float: left;
				width: 11px;
				color    : #fff;
				font-size: 10px; }

				div.timetable > div.board > div.rect > div > div > span {
					display: block;
					background-color: rgba(0,0,0,0.4);
					padding: 0 0 1px 0;
					width: 11px;
					text-align: center;
					margin-bottom: 1px; }

				div.timetable > div.board > div.rect > div > div > span.新 {
					background-color: #4cc915; }

				div.timetable > div.board > div.rect > div > div > span.再 {
					background-color: #6198ff; }

				div.timetable > div.board > div.rect > div > div > span.終 {
					background-color: #ff6161; }

			div.timetable > div.board > div.rect > div > span {
				display: block;
				margin-left: 12px;
				color    : #5f5f5f;
				font-weight: 500;
				font-size: 11px; }

			div.timetable > div.board > div.rect:hover > div > h4 {
				color      : #000; }

			div.timetable > div.board > div.rect.reserved:not(:hover) > div > span,
			div.timetable > div.board > div.rect.recording:not(:hover) > div > span {
				color      : rgba(255,255,255,0.8); }

			div.timetable > div.board > div.rect.reserved:hover > div > h4,
			div.timetable > div.board > div.rect.recording:hover > div > h4 {
				color      : red; }

		div.timetable > div.board > div.rect.reserved > div,
		div.timetable > div.board > div.rect.recording > div {
			color      : white; }

		div.timetable > div.board > div.rect.recording > div {
			font-weight: bold; }

		div.timetable > div.board > div.rect.skip:hover > div {
			color      : gray;
			text-shadow: none; }

	div.drawer > div.head {
		padding   : 5px 10px;
		background: rgba(255,255,255,0.9);
		margin    : 0 0 10px 0;
		text-align: center; }

		div.drawer > div.head > div.date {
			text-align : center;
			font-family: "Arial Black", Gadget, sans-serif;
			font-size  : 18px;
			line-height: 20px;
			color      : #222; }

			div.drawer > div.head > div.date > small {
				font-size  : 12px;
				color      : #777;
				margin-left: 2px;
				line-height: 15px; }

		div.drawer > div.head > span.dynamic-time,
		div.drawer > div.head > span.channel {
			color    : #777;
			font-size: 10px; }

	div.drawer > div.body {
		overflow   : auto;
		word-break : break-all;
		white-space: normal;
		background : rgba(0,0,0,0.2);
		text-align : left;
		color      : #ccc;
		font-family: "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
		             Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

		div.drawer > div.body > div.title {
			font-size  : 14px;
			font-weight: bold;
			margin     : 0 0 5px 0;
			color      : white; }

			div.drawer > div.body > div.title > span[class*="bg-cat-"] {
				font          : 10px normal "arial";
				color         : rgba(0,0,0,0.7);
				margin-right  : 2px;
				vertical-align: middle;
				border-radius : 1px;
				padding       : 0 2px; }

		div.drawer > div.body > div.detail {
			margin     : 0 0 5px 0; }

		div.drawer > div.body > div.id {
			font-size  : 10px;
			color      : #aaa;
			font-family: Arial, Helvetica, sans-serif; }

	div.drawer > div.foot {
		margin: 10px 0 0 0; }

		div.drawer > div.foot > button {
			display: block;
			width  : 100%; }

div.timetable > div.head {
	z-index   : 98;
	position  : fixed;
	top       : 80px;
	left      : 20px;
	height    : 30px;
	padding-right: 2px;
	overflow  : visible; }

	div.timetable > div.head > div {
		position   : absolute;
		color      : #bbb;
		font-size  : 12px;
		font-weight: normal;
		text-align : center;
		cursor     : pointer;
		overflow   : hidden;
		top        : 0;
		bottom     : 0;
		padding-top: 3px;
		line-height: 2em;
		background : rgba(25,25,25,0.8);
		box-shadow : 5px 0 0 rgba(25,25,25,0.7); }

	div.timetable > div.head > div:hover {
		color      : #fff; }

div.timetable > div.timescale {
	z-index   : 99;
	position  : relative;
	width     : 20px;
	height    : auto;
	padding   : 0 10px;
	overflow  : hidden;
	background: #444;
	box-shadow: inset 1px 0 0 #222, -2px 0 0 rgba(0,0,0,0.1), inset -2px 0 0 #333; }

	div.timetable > div.timescale > button {
		position   : absolute;
		left       : 0;
		width      : 100%;
		height     : 25px;
		padding    : 0;
		font-size  : 10px; }

	div.timetable > div.timescale > button.prev {
		top: 0; }

	div.timetable > div.timescale > button.next {
		bottom: 0; }

	div.timetable > div.timescale > div {
		position   : absolute;
		margin-top : 97px;
		left       : 1px;
		font-size  : 10px;
		font-family: monospace;
		line-height: 10px; }

	div.timetable > div.timescale > div.long {
		width      : 15px;
		padding    : 4px 2px 4px 2px;
		color      : #fff;
		box-shadow : inset 0 2px 0 #000; }

	div.timetable > div.timescale > div.middle {
		height     : 1px;
		width      : 10px;
		border-top : 1px solid #222;
		background : white; }

	div.timetable > div.timescale > div.short {
		height     : 1px;
		width      : 5px;
		border-top : 1px solid #333;
		background : white; }

	div.timetable > div.timescale > div.h18,
	div.timetable > div.timescale > div.h19,
	div.timetable > div.timescale > div.h20,
	div.timetable > div.timescale > div.h21,
	div.timetable > div.timescale > div.h4,
	div.timetable > div.timescale > div.h5 {
		border-color: #06f;
		background  : #06f; }

	div.timetable > div.timescale > div.h6,
	div.timetable > div.timescale > div.h7,
	div.timetable > div.timescale > div.h8,
	div.timetable > div.timescale > div.h9,
	div.timetable > div.timescale > div.h10 {
		border-color: #0cf;
		background  : #0cf; }

	div.timetable > div.timescale > div.h11,
	div.timetable > div.timescale > div.h12,
	div.timetable > div.timescale > div.h13,
	div.timetable > div.timescale > div.h14 {
		border-color: #f90;
		background  : #f90; }

	div.timetable > div.timescale > div.h15,
	div.timetable > div.timescale > div.h16,
	div.timetable > div.timescale > div.h17 {
		border-color: #f30;
		background  : #f30; }

	div.timetable > div.timescale > div.h22,
	div.timetable > div.timescale > div.h23,
	div.timetable > div.timescale > div.h0,
	div.timetable > div.timescale > div.h1,
	div.timetable > div.timescale > div.h2,
	div.timetable > div.timescale > div.h3 {
		border-color: #63c;
		background  : #63c; }

tr.disabled > td {
	opacity         : 0.4; }

td.id > div {
	color      : #aaa;
	font-size  : 11px; }

td.default > div {
	color     : #aaa;
	font-style: italic;
	font-size : 11px; }

td.types > div > span {
	padding      : 0 3px;
	font-size    : 11px;
	margin-right : 2px;
	color        : #eee;
	border-radius: 2px; }

td.categories > div > span {
	padding      : 0 2px;
	font-size    : 11px;
	margin-right : 2px;
	border-radius: 2px; }

td > div > div.dynamic-time {
	line-height: inherit; }

td > div > span.flag {
	margin-right: 2px;
	padding     : 1px 2px 0;
	color       : #fff;
	font-size   : 11px;
	background  : #999; }

td > div > span.flag.conflict {
	background: #f00; }

td > div > span.flag.manual {
	background  : #000; }

td > div > span.flag.新 {
	background  : #6ed02e; }

td > div > span.flag.終 {
	background  : #d02e54; }

td > div > span.flag.再 {
	background  : #2a45c0; }

td > div > span.subtitle {
	margin-left : 4px;
	padding     : 1px 2px 0;
	color       : #e95295;
	font-size   : 11px;
	font-weight : bold; }

td > div > span.episode {
	margin-left    : 2px;
	padding        : 1px 2px 0;
	color          : #d02e54;
	font-size      : 11px; }

td > div > span.id {
	margin-left    : 4px;
	color          : #aaa;
	font-size      : 10px; }

.flagrate-modal > div > div {
	max-width: 500px; }

.flagrate-modal-visible form.flagrate-form {
	margin-left : 12px;
	margin-right: 12px;
	pointer-events: none; }

.flagrate-modal-visible div.flagrate-form-field-input {
	pointer-events: all; }

div.video-container {
	position        : absolute;
	top             : 0px;
	right           : 0px;
	bottom          : 44px;
	left            : 0px;
	background-color: #000; }

	div.video-container > * {
		width : 100%;
		height: 100%; }

div.video-control {
	z-index         : 11;
	position        : absolute;
	right           : 0;
	bottom          : 0;
	left            : 0;
	padding         : 8px 10px 8px;
	text-align      : center; }

	div.video-control > * {
		height: 28px; }

	div.video-control > span {
		padding-top: 9px; }

	div.video-control > button.flagrate-button {
		font-family: "Glyphicons Halflings";
		color: #388dd6; }

	div.video-control > button.flagrate-button:hover {
		color: black; }

	div.video-control .seek {
		width: -webkit-calc(100% - 450px) !important;
		width: -moz-calc(100% - 450px) !important;
		width: -ms-calc(100% - 450px) !important;
		width: calc(100% - 450px) !important; }

div.console {
	position   : absolute;
	top        : 0;
	right      : 0;
	bottom     : 0;
	left       : 0;
	overflow-y : scroll;
	font-size  : 11px;
	font-family: "Courier New", Courier, monospace;
	padding    : 10px;
	background : #2b2b2b;
	color      : #ccc; }

div.editor {
	position   : absolute;
	top        : 0;
	right      : 0;
	bottom     : 0;
	left       : 0; }

.hyperform * {
	box-sizing: initial; }

/* ui:sakura-alert */
div.sakura-alert {
	margin-bottom   : 5px;
	background-color: rgba(0,0,0,0.6);
	color           : white; }

.ex > div.sakura-alert {
	margin-bottom: 0; }

div.sakura-alert-white {
	background-color: #fff;
	color           : #555; }

div.sakura-alert-info,
div.sakura-alert-blue {
	background-color: #6ba0de; }

div.sakura-alert-caution,
div.sakura-alert-yellow {
	color           : #555;
	background-color: #ffe881; }

div.sakura-alert-warning,
div.sakura-alert-red {
	background-color: #d9534f; }

div.sakura-alert-success,
div.sakura-alert-green {
	background-color: #61d67e; }

	div.sakura-alert > div {
		padding         : 8px 8px 7px;
		border          : 2px solid transparent;
		font-size       : 13px; }

	div.sakura-alert > div:hover {
		border-color    : transparent; }