/* TVnfo Design CSS */

.ui.popup {
	padding: 10px;
	color: #BFF000;
	background: #333;
	border: 1px solid #444;
}

/* Menus */

.ui.menu .item {
	padding: 0 10px;
	color: rgb(85, 139, 47);
	border-right: 1px solid #111;
}

.ui.menu .item:before {
	background: rgba(255, 255, 255, 0.08);
}

.right.menu .item .fa {
	margin-right: 0;
}

.right.menu .item:first-child {
	border-left: 1px solid #111;
}

.right.menu .item:last-child {
	border-right: 0;
}

.ui.menu .dropdown.item .menu {
	background: #2A2B2B;
	border: 1px solid #333;
	box-shadow: 0 0 5px #111;
}

.ui.menu .ui.dropdown .menu > .item {
	padding: 4px 12px 4px 10px;
	color: rgba(136, 136, 136);
}

.ui.dropdown .menu > .item {
	padding: 2px 5px;
}

.ui.dropdown .menu > .item:hover {
	color: rgba(170, 170, 170);
}

.ui.dropdown .menu > .divider {
	margin: 3px 0 !important;
	padding: 0 !important;
	border-top: 1px solid #111;
	border-bottom: 1px solid #444;
}

.ui.menu .ui.dropdown .menu > .item:hover,
.ui.menu .ui.dropdown .menu > .selected.item,
.ui.menu .ui.dropdown .menu > .active.item {
	background: rgba(0, 0, 0, 0.10) !important;
	color: rgba(170, 170, 170);
}

.ui.menu .ui.dropdown .menu > .item:first-child {
	padding-top: 8px;
}

.ui.menu .ui.dropdown .menu > .item:last-child {
	padding-bottom: 8px;
}

.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
	color: rgba(104, 159, 56);
}

.ui.link.menu .item:active,
.ui.menu .link.item:active,
.ui.menu a.item:active { /* color */ }

.ui.menu .active.item { /* color */ }

.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover { /* color */ }

.ui.ui.menu .item.disabled {
	color: rgba(119, 119, 119);
}


/* Search Input */

/*.ui.menu .item > .input {
	width: 300px;
}*/

.ui.menu .item > .input {
	color: #777;
}

 .ui.menu .item > .input input {
	color: #00BCD4;
} 


/* Search */

/*

(Search Map)

	.ui.search
		.results
			.result (a)
				.image (img)
				.content
					.title
					.description
						.status

*/

.ui.search {
	width: 280px;
	border-left: 1px solid #000;
}

.ui.category.search .results {
	overflow-x: hidden;
	overflow-y: auto;
	width: 300px;
	max-height: 500px;

	/*scrollbar-width: 20px !important;*/
	scrollbar-color: rgba(51, 51, 51, 0.8) rgba(0, 0, 0, 0.5);
}

.ui.search > .results {
	padding: 7px;
	background: #333;
	/*border: 5px solid #333;*/
	box-shadow: 0 0 15px #000;
}

.ui.search > .results .result {
	margin-bottom: 7px;
	/*padding: 0 5px 5px 5px;*/
	border-radius: 5px;
	border: 2px solid #222;
}

.ui.search > .results .result:hover,
.ui.search > .results .result.active {
	border-color: #000;
}

/*.ui.search > .results > :first-child {
	margin-top: 0;
}

.ui.search > .results > :last-child {
	margin-bottom: 0;
}*/

.ui.search > .results .result .image,
.ui.search > .results .result .image img,
.ui.search > .results .result .content {
	opacity: .8;
	width: 100%;
	height: 100%;
}

.ui.search > .results .result .image img[src*="pixel"] {
	height: 0; /* Fix Image Height When No Search Image Exists */
}

.ui.search > .results .result .content {
	background: #222;
	/*border-top: 2px solid #FFF;*/
}

.ui.search > .results .result:hover .content,
.ui.search > .results .result.active .content {
	background: #000;
}

.ui.search > .results .result .content .title {
	padding: 5px;
	color: #AAA;
	font-size: 100%;
}

.ui.search > .results .result .content .title .flag {
	margin-right: 3px;
}

.ui.search > .results .result .content .title em {
	font-style: normal;
	font-size: 90%;
}

.ui.search > .results .result .content .description {
	opacity: .8;
}

.ui.search > .results .result .content .description b {
	display: block;
}

.ui.search > .results .result:hover .image,
.ui.search > .results .result:hover .content,
.ui.search > .results .result:hover .description,
.ui.search > .results .result.active .image,
.ui.search > .results .result.active .content,
.ui.search > .results .result.active .description {
	opacity: 1.0;
}


/* Cards */

.ui.cards {
	padding: 8px 5px;
}

.ui.cards .card,
.fluid.card {
	background: #1B1C1D;
	box-shadow: 0 0 5px #111;
	/*padding-bottom: 1px !important;*/
	border-bottom: 3px solid #333 !important;
}

.ui.cards > .card .image {
	background: #333;
}

.ui.fluid.card > .content,
.ui.cards > .card > .content {
	overflow: hidden;
	position: relative;
	padding: 2px 0;
	border-top: 1px solid #000;
	background: rgba(53, 65, 74, .5);
	font-size: 95%;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ui.fluid.card > .content .name,
.ui.cards > .card > .content .name {
	overflow: hidden;
	display: inline-block;
	width: 65%;
	/*color: #999;
	vertical-align: text-bottom;*/
}

/*.ui.fluid.card > .content a,
.ui.cards > .card > .content a {
	color: #999;
}

.ui.fluid.card > .content a:hover,
.ui.cards > .card > .content a:hover {
	color: #CCC;
}*/

.ui.label {
	color: rgba(255,255,255,.8);
	background: rgba(0,0,0,.5);
}

.ui.attached.label {
	padding: 3px 5px;
}

.ui.attached.label:hover {
	color: #FFF;
	background: #000;
}

.ui.fluid.card .flag,
.ui.cards > .card .flag {
	opacity: .5;
	margin: 4px 0 0 5px;
	/*vertical-align: middle;*/
}

.ui.fluid.card .flag:hover,
.ui.cards > .card .flag:hover {
	opacity: .7;
}

/*.ui.fluid.card .flag,
.ui.cards > .card .flag {
	opacity: .5;
	margin: 0 0 0 5px;
}

.ui.fluid.card .flag:hover,
.ui.cards > .card .flag:hover {
	opacity: .7;
}*/


/* Cards Layout */

.ui.cards > .card {
	margin: 0.50em 0.50em;
}

.ui.two.cards > .card {
	width: calc(50% - 1.2em);
	margin-left: .50em;
	margin-right: .50em;
}

.ui.three.cards > .card {
	width: calc(33.33% - 1em);
	margin-left: .50em;
	margin-right: .50em;
}

.ui.four.cards > .card {
	width: calc(25% - 1em);
	margin-left: 0.50em;
	margin-right: 0.50em;
}

@media only screen and (max-width: 767.98px) {

	.ui.three.doubling.cards > .card {
		width: calc(50% - 1em);
		margin-left: .50em;
		margin-right: .50em;
	}

	.ui.four.doubling.cards > .card {
		width: calc(50% - 1em);
		margin-left: .50em;
		margin-right: .50em;
	}

}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {

	.ui.three.doubling.cards > .card {
		width: calc(50% - 1em);
		margin-left: .50em;
		margin-right: .50em;
	}

	.ui.four.doubling.cards > .card {
		width: calc(50% - 1em);
		margin-left: .50em;
		margin-right: .50em;
	}

}

@media only screen and (max-width: 767.98px) {

	.ui.stackable.cards {
		margin: 15px 0;
	}

	.ui.stackable.cards > .card {
		margin: .50em .50em;
		width: calc(100% - 1em) !important;
	}

}

/* EOF: ./styles/design.css */