.header {
	height:40px;
	background-color:#004b63;
}

.headerMenuLogo {
	float:left;
	padding-left:8px;
	padding-right:8px;
}
.headerMenuLogo img {
	height:37px !important;
}

.headerMenuModule {
	float:left;
	height:40px;
	margin-right:7px;
	vertical-align:middle;
	line-height:40px;
	color:#dddddd;
	text-align:center;
}

.headerMenuViewer {
	float:left;
	position:relative;
	width:140px;
	height:40px;
	vertical-align:middle;
	line-height:40px;
	color:#dddddd;
	text-align:left;
}

.headerMenuSubstitute {
	float: left;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
}
.headerMenuSubstitute > #substitute-status-icon:hover {
	color: #53d105;
	cursor: pointer;
}

.headerMenuUser {
	float:left;
	position:relative;
	height:40px;
	vertical-align:middle;
	line-height:40px;
	color:#dddddd;
	text-align:left;
}

/* Todo : @screen-md-max or @screen-lg-min (= rewrite with LESS) should be better than hardcoding the breakpoint value */
@media (min-width: 1200px) {
	.headerMenuUser {
		width:300px;
	}
}
.headerDate.mismatch {
	color : #ff6a6a;
}

.headerDate,
.headerCountdown {
	position:relative;
	top:0px;
	float:right;
	line-height:20px; 
	font-size:10px;
	margin-right:10px;
}


.headerMenuSpacer {
	float:left;
	width:2px;
	height:40px;
}

.headerMenuSpaceBar {
	float:left;
	position:relative;
	width:1px;
	height:36px;
	top:2px;
	background-color:gray;
	opacity:0.5;
}

/* icon-buttons */

.headerIconButton {
	float:left;
	position:relative;
	width:40px;
	height:40px;
	text-align:center;
}

.headerIconButton span {
	vertical-align:middle;
	line-height:40px;
}

.headerIconBig {
	width:60px;
}

.headerIconButton:hover {
	cursor:pointer;
}

/* icons */

.iconHeader {
	font-size:24px;
	color:#ddd;
}

.headerIconButton:hover .iconHeader {
	color:white;
}

.headerAlignRight {
	float:right;
}

.headerIconGreen {
	background-color: #368958;
	/*background: rgba(0,	, 0.6);*/
}

.headerIconRed {
	background-color: rgba(204, 0, 0, 0.2);
	/*background: rgba(204, 0, 0, 0.6);*/
}

.headerIconBlinkGreen {
	-webkit-animation: blinkGreenAnimation 1s ease-in-out infinite;
	-moz-animation: blinkGreenAnimation 1s ease-in-out infinite;
	-o-animation: blinkGreenAnimation 1s ease-in-out infinite;
}
@-webkit-keyframes blinkGreenAnimation {
	0%   { background: rgba(0, 204, 0, 0.2); }
	50%  { background: rgba(0, 204, 0, 0.6); }
	100% { background: rgba(0, 204, 0, 0.2); }
}
@-moz-keyframes blinkGreenAnimation {
	0%   { background: rgba(0, 204, 0, 0.2); }
	50%  { background: rgba(0, 204, 0, 0.6); }
	100% { background: rgba(0, 204, 0, 0.2); }
}
@-o-keyframes blinkGreenAnimation {
	0%   { background: rgba(0, 204, 0, 0.2); }
	50%  { background: rgba(0, 204, 0, 0.6); }
	100% { background: rgba(0, 204, 0, 0.2); }
}

.headerIconBlinkRed {
	-webkit-animation: blinkRedAnimation 1s ease-in-out infinite;
	-moz-animation: blinkRedAnimation 1s ease-in-out infinite;
	-o-animation: blinkRedAnimation 1s ease-in-out infinite;
}
@-webkit-keyframes blinkRedAnimation {
	0%   { background: rgba(204, 0, 0, 0.2); }
	50%  { background: rgba(204, 0, 0, 0.8); }
	100% { background: rgba(204, 0, 0, 0.2); }
}
@-moz-keyframes blinkRedAnimation {
	0%   { background: rgba(204, 0, 0, 0.2); }
	50%  { background: rgba(204, 0, 0, 0.8); }
	100% { background: rgba(204, 0, 0, 0.2); }
}
@-o-keyframes blinkRedAnimation {
	0%   { background: rgba(204, 0, 0, 0.2); }
	50%  { background: rgba(204, 0, 0, 0.8); }
	100% { background: rgba(204, 0, 0, 0.2); }
}

.notification-area {
	background-color: #006551;
	position:relative;
	color:white;
	z-index:10;
	text-align:left;
}

.notification-area-content {
	background-color:#668091;
	box-shadow: 1px 1px 4px rgb(68,68,68);
	position:absolute;
	min-width:244px;
	max-width:244px;
	top:2px;
	font-size:10px;
	opacity:0.75;
}

.notification-area-content-message {
	margin:2px;
	padding:4px;
	word-wrap:break-all;
}

.notification-area-content-message:hover {
	/*background-color: rgba(0, 204, 0, 0.6);*/
	background-color:#A7B9C5;
	color:black;
}