#trendSidenav md-ink-bar{
	color: #fff !important;
	background-color: #fff !important;
}

#trendSidenav md-tab-item{
	color: rgba(255,255,255, 0.6) !important;
}

#trendSidenav md-tab-item.md-active{
	color: rgba(255,255,255, 1) !important;
}

#dataTabNavigation {
	position: relative;
	top: -48px;
}

.OK {
	color: black !important;
	padding-top: 5px !important;
}

.ROC {
	color: #000099 !important;
	padding-top: 5px !important;
}

.LLA {
	color: yellow !important;
	padding-top: 5px !important;
}

.LOA {
	color: orange !important;
	padding-top: 5px !important;
}

.HIA {
	color: darkred !important;
	padding-top: 5px !important;
}

.HHA {
	color: red !important;
	padding-top: 5px !important;
}

.MNL {
	color: #990099 !important;
	padding-top: 5px !important;
}

.OFS {
	color: #ff00ff !important;
	padding-top: 5px !important;
}

.INV {
	color: darkgray !important;
	padding-top: 5px !important;
}

.BAD {
	color: lightgray !important;
	padding-top: 5px !important;
}

.IOF {
	color: #00cc99 !important;
	padding-top: 5px !important;
}

.LLL {
	color: #00ff00 !important;
	padding-top: 5px !important;
}

.HHH {
	color: #666633 !important;
	padding-top: 5px !important;
}

.LOR {
	color: #663300 !important;
	padding-top: 5px !important;
}

.AVG {
	color: #669999 !important;
	padding-top: 5px !important;
}

.SUS {
	color: #009933 !important;
	padding-top: 5px !important;
}

.PND {
	color: #cc6600 !important;
	padding-top: 5px !important;
}

.MXT {
	color: #6600cc !important;
	padding-top: 5px !important;
}

.INC {
	color: #ff4d4d !important;
	padding-top: 5px !important;
}

.IGNORE {
	color: #3366cc !important;
	padding-top: 5px !important;
}

.MASK {
	color: #99ccff !important;
	padding-top: 5px !important;
}

.btn-selected {
	background-color: #d5d5d5;
}


/*********************************************************************************************   SIZEDEPENDEND CSS-STYLES   **********************************************************************************************/


@media screen and (max-width: 1279px) {
	#trend-toolbar {
		padding-left: 0 !important;
	}
	/*#trendMainContainer {
		height: 100%;
	}*/

}

@media screen and (min-width: 1280px) {
	#trendMainContainer {
		height:calc(100% - 65px);
	}

	#trend-md-card {
		height:calc(100% - 24px) !important;
	}

	.trendCardTabContent {
		height: calc(100% - 64px);
	}

	 #trendperiod md-input-container {
		 position:relative; top:12px; min-width:150px;
	 }	
	 .tag-wizard-content {
		height:100%;
	}
	#tag-wizard-dialog {
		width:calc(100vw - 250px) !important;
		height:calc(100vh - 150px) !important;
		min-height:565px !important;
	}


}

	@media screen and (min-width: 1280px) and (max-width: 1919px) {
		.tag-wizard-dialog {
			overflow-y: hidden !important;
		}
			.tag-wizard-dialog md-content.md-dialog-content {
				height: calc(100% - 145px) !important;
				padding: 0px !important;
			}
	}


	/* iPhone 5 and older...*/
	@media screen and (max-width: 400px) {
		#trend-toolbar .md-button {
			margin: 0 2px 0 2px !important;
		}
	}


	@media screen and (min-width: 1024px) {
		#highchartcontainer {
			height: calc(100% - 75px);
		}

		#tag-wizard-dialog {
			width: calc(100vw - 250px) !important;
			height: calc(100vh - 150px) !important;
			min-height: 565px !important;
		}

		.tag-wizard-dialog {
			height: calc(100vh - 335px) !important;
		}
	}

	@media screen and (min-width: 960px) {

		.tag-wizard-dialog md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
			height: inherit;
		}

	}


	/*************************************   Mobile devices in portrait mode   *************************************/

	/*Overall*/
	@media screen and (max-width: 959px) and (orientation: portrait) {

		#trendperiod input {
			font-size: 75% !important;
		}

		#trendperiod {
			background-color: #fff;
		}	

		.tag-wizard-dialog md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
		   height: calc(100vh - 104px) !important;
		}

		#trendperiod select {
			min-width: 50px;
		}

		#trendMainContainer md-card-content {
			padding-top: 0 !important;
			padding-bottom: 2px !important;
			margin-bottom: 16px !important;
		}

		#trendperiod md-input-container {
			position: relative;
			top: 10px;
			max-width: 125px;
			width: 125px;
		}

		#trendMainContainer .md-view {
			padding: 0 !important;
		}
	}

	@media screen and (min-width: 600px) and (max-width: 959px) and (orientation: portrait) {
		#trendMainContainer .content-view {
			height: calc(100% - 64px) !important;
		}

		#trendMainContainer md-card-content {
			height: 100%;
		}
	}
	/*************************************   Mobile devices in landscape mode   *************************************/


	@media screen (max-width: 959px) and (orientation: landscape) {
		#trend-md-card md-card-content {
			padding: 4px;
		}
	}


	@media screen and (min-width: 840px) and (max-width: 959px) and (orientation: landscape) {
		#trendMainContainer .content-view {
			height: calc(100% - 128px) !important;
		}
	}

	@media screen and (min-width: 960px) and (max-width: 1279px) and (orientation:landscape) {
		#trendMainContainer .content-view {
			height: calc(100% - 128px) !important;
		}

		md-dialog#tag-wizard-dialog {
			width: 600px !important;
		}
	}

	@media screen and (max-width: 1279px) and (orientation:landscape) {
		#trendMainContainer md-card-content {
			padding-top: 0 !important;
			padding-bottom: 4px !important;
		}

		#trendMainContainer md-content {
			padding: 0 !important;
		}

		#trendMainContainer navigation {
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: 100vw;
			z-index: 50;
		}
	}

	@media screen and (max-width: 1024px) and (orientation:landscape) {
		#trendperiod input {
			font-size: 75% !important;
		}

		#trendperiod select {
			min-width: 50px;
		}

		#trendperiod md-input-container {
			position: relative;
			top: 10px;
			max-width: 125px;
			width: 125px;
		}

		#trend-md-card {
			margin-top: 0px !important;
		}
	}