@import url("channels.css?v=4");

.mfb-filter {
	padding: 15px;
	background-color: #fafafa;
}

/* bootstrap */
/*
.mfb-filter input, .mfb-filter button, .mfb-filter .input-group-addon {border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
*/
.mfb-filter .btn {box-shadow: none !important;}
.mfb-filter input:focus {outline: none;}
/*.mfb-filter .btn-group .btn.active {color: #fff; background-color: #015F7F; border-color: #00202b;}*/

.mfb-filter .filter-col {margin-bottom: 10px;}

.mfb-filter .footer {padding: 10px 15px !important; background-color: #fafafa !important;}

.mfb-filter .slider.slider-horizontal {width: calc(100% - 107px); float: left; margin-right: 16px; margin-left: 7px;}
.mfb-filter .range-legend {float:left; width:40px;}

.mfb-filter select {border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}

/*
.mfb-filter button {
	padding: 5px 16px;
	margin-top: 5px;
	border-radius: 4px;
	background-color: #017da8;
	border: 1px solid #015F7F;
	color: #fff;
}
.mfb-filter button:hover {background-color: #068CB8;}
*/

.mfb-filter .slider.slider-horizontal {z-index: 1;}

.mfb-filter .fakesearch {
	position: relative;
	width: 100%;
	padding: 6px 12px;
	background-color: #fff;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	border: 1px solid #ccc;
	color: #555;
	cursor: pointer;
}
.mfb-filter .fakesearch .fa {
	position: absolute;
	right: 10px;
	top: 8px;
}
.mfb-filter .fakesearch:hover {color: #404040;}
.mfb-filter .fakesearch:hover .fa {color: #015F7F;}


/* multiselect */
.multiselect {
	position: relative;
	width: 100%;
	padding: 6px 12px;
	background-color: #fff;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	border: 1px solid #ccc;
	color: #555;
	cursor: pointer;
}
.multiselect .trigger {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5;}
.multiselect .selected-option {position: relative;}
.multiselect .selected-option .fa {position: absolute; right: 0px; top: 3px;}
.multiselect .selected-option .selected-options-counter {font-weight: bold;}

.multiselect .options {
	display: none;
	border: 1px solid #ccc;
	border-top: none;
	width: calc(100% + 2px);
	margin-left: -1px;
	position: absolute;
	top: 32px;
	left: 0;
	background-color: #fff;
	max-height: 210px;
	overflow-y: scroll;
	z-index: 99;
}
.multiselect .options .option {padding: 3px 0 3px 12px;}
.multiselect .options .option:hover {background-color: #fafafa;}
.multiselect .options label {margin:0; width: 100%; padding: 0;}

.multiselect input[type="checkbox"] {float: left; margin-right: 5px; margin-top: 3px;}


/* channels */
.channels-listing {
	background-color: #fff;
	padding: 0;
	margin: 0;
}
.channels-listing.sliding {display: none;}

.channels-listing .item {
	float: left;
	padding: 0;
	text-align: center;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	cursor: pointer;
	position: relative;
	opacity: 0.75;
	transition-duration: .25s;
	margin: 2px;
}
.channels-listing .item .placeholder, .channels-listing .btn-more .placeholder {margin-bottom: 100%;}

.channels-listing .item:hover {-webkit-filter: none; filter: none; opacity: 1; border: 1px solid rgba(214,11,82,.5);}
.channels-listing .item:hover .overlay {display: none;}

.channels-listing .item.active {-webkit-filter: none; filter: none; opacity: 1; border: 1px solid rgba(214,11,82,1);}
.channels-listing .item.active .overlay {display: none;}

.channels-listing .btn-more {
	float: left;
	position: relative;
	margin: 0;
	background-color: #fafafa;
	color: #828282;
	text-align: center;
}
.channels-listing .btn-more .inner {
	position: absolute;
	width: 100%;
	top: calc(50% - 35px);
	text-align: center;
	cursor: pointer;
}
.channels-listing .btn-more .inner span {font-size: 12px; display:block; margin-top: 5px;}
.channels-listing .btn-more .inner .fa {font-size: 50px; margin-top: -12px;}
.channels-listing .btn-more:hover {
	color: #015F7F;
}

/* autocomplete */
.autocomplete-box {
	width: 100%;
	/*min-height: 350px;*/
	height: 75px;
	padding: 15px;
	background-color: #fafafa;
}
.autocomplete-box input[type='text'] {
	width: 100%;
	padding: 10px 15px;
	font-size: 16px;
	color: #555;
	border: 1px solid #cccccc;
	margin: 0;
}
.autocomplete-box input[type='text']:focus {outline: none;}
.no-border-bottom {border-bottom: 0 !important;}

.autocomplete-box .results {
	width: 100%;
	display: none;
	text-align: left;
	border: 1px solid #cccccc;
	border-top: 0;
}
.autocomplete-box .results .category {
	position: relative;
	background-color: #F1F1F1;
	color: #3C3C3C;
	padding: 6px 15px;
}
.autocomplete-box .results .category span {font-size: 15px;}
.autocomplete-box .results .category .fa {position: absolute; top: 10px; right: 15px;}
.autocomplete-box .results .result {
	position: relative;
	background-color: #fff;
	height: 40px;
	padding: 9px 10px 9px 15px;
	border-bottom: 1px solid #fafafa;
	cursor: pointer;
}
.autocomplete-box .results .result:hover {
	background-color: #015F7F;
	color: #fff;
}
.autocomplete-box .results .result .fa {display:none; position: absolute; top: 12px; right: 15px;}
.autocomplete-box .results .result:hover .fa {display:block;}
.autocomplete-box .results .result:hover .year {color: #fafafa;}
.autocomplete-box .results .result .rate {width: 27px; text-align: center; margin-right: 4px; padding: 1px 0;}
.autocomplete-box .results .result .year {color: #777;}
.autocomplete-box .results .result-group {max-height: 160px; overflow-y: scroll;}


@media only screen and (min-width : 320px) {
	.channels-listing .item {width: calc((100% / 4) - 4px); background-size: 95%;}
	.channels-listing .btn-more {width: calc(100% / 4);}
}

@media only screen and (min-width : 480px) {
	.channels-listing .item {width: calc((100% / 8) - 4px); background-size: 90%;}
	.channels-listing .btn-more {width: calc(100% / 8);}
}

@media only screen and (min-width : 768px) {
	.channels-listing .item {width: calc((100% / 8) - 4px);}
	.channels-listing .btn-more {width: calc(100% / 8);}
}

@media only screen and (min-width : 992px) {
	.channels-listing .item {width: calc((100% / 8) - 4px);}
	.channels-listing .btn-more {width: calc(100% / 8);}
}

@media only screen and (min-width : 1200px) {
	.channels-listing .item {width: calc((100% / 8) - 4px);}
	.channels-listing .btn-more {width: calc(100% / 8);}
}