// For Header use only

header{
	  height: 73px;
	  margin-bottom: 40px;  
		  .header-top{
			height: 49px;
			background-color: $header-background;
			margin: 0;
			padding: 0;
			position: relative;
				.logo{
				  background-color: $main-blue;
				  float: left;
				  padding: 0 40px;
				  height: 49px;
				  position: relative;
				  overflow: hidden;
					  &:before{
							content: '';
							height: 100%;
							width: 6px;
							background-color: #8ebf49;
							position: absolute;
							right: 0px;
							top: 0;
							transform: translateY(0);
							-moz-transform: translateY(0);
							-webkit-transform: translateY(0);
					  }		
					   &:after{
							content: '';
							height: 100%;
							z-index: 9;
							width: 6px;
							background-color: $main-blue;
							position: absolute;
							right: 0px;
							top: 0;
							transition: 0.3s ease 0s;
							-moz-transition: 0.3s ease 0s;
							-webkit-transition: 0.3s ease 0s;
							transform: translateY(-100%);
							-moz-transform: translateY(-100%);
							-webkit-transform: translateY(-100%);
					  }		
						&:hover{
							&:after{
							background-color: #1c81c7;
							transform: translateY(0);
							-moz-transform: translateY(0);
							-webkit-transform: translateY(0);
							}
						}
				}
			
				.header-right{
				  float: right;
				  margin: 20px 40px 0 0;
					  nav{
						float: right;
							ul{
							  margin: 0;
							  padding: 0;
								  li{
									list-style: none;
									float: left;
										a{
										  font-size: 14px;
										  color: $white;
										  text-decoration: none;
										  text-transform: uppercase;
										  font-weight: bold;
										  margin-right: 30px;
										  position: relative;
											  &:hover{
												color: #f39302;
											  }
											  &.active{
												color: #f39302;
												&.active:hover{
													color: #f39302;
												}
											  }
											  span.arrow-up{
												display: none;
											  }
											  &.active span.arrow-up {
												border-bottom: 5px solid white;
												border-left: 5px solid transparent;
												border-right: 5px solid transparent;
												bottom: -13px;
												height: 0;
												left: 50%;
												margin-left: -5px;
												position: absolute;
												width: 0;
												display:block;
											  }
											  @-moz-document url-prefix() {
												&.active span.arrow-up.arrow-up{
													bottom: -11px;
												}
												}
												@media screen and (-webkit-min-device-pixel-ratio:0) {
												 &.active span.arrow-up.arrow-up{
														bottom: -13px;
													}
												}
										}
								  }
							}
						.header-bottom{
							height: 24px;
							border-bottom: 1px solid #bdbbb9;
							background-color: $white;
							box-shadow: 0px 7px 13px -4px #292929;
							position: absolute;
							width: 100%;
							left: 0px;
							top: 50px;
								nav{
								  text-align: right;
									  &.dashboard-menu{
										float: right;
											&.mydata-width{
												width: 715px;
											}
											&.user-mydata-width{
												width: 490px;
											}
											ul{
											  margin: 0;
											  padding: 0;
												  li{
													float: left;
													line-height: 22px;
													list-style: none;
													margin: 0;
													position: relative;
														.dashboard-sub-menu{
															position: absolute;
															top: 23px;
															left: 0;
															z-index: 21;
															width: auto;
															padding: 0 0 10px;
															font-size: 12px;
															font-weight: normal;
															color: #ffffff;
															background-color: rgba(102, 102, 102, 0.95);
															display: none;
																.tab-menu-heading {
																	font-size: 12px;
																	font-weight: bold;
																	text-transform: uppercase;
																	padding: 10px 0 0 10px;
																	text-align: left;
																		@media only screen and (max-width: $mobile-landscape){
																			text-align: center;
																		}
																}
																ul {
																	margin: 5px 0 0 0;
																	padding: 0;
																	line-height: 20px;
																		li {
																			list-style: none;
																			white-space: nowrap;
																			float: none;
																			text-align: left;
																				.dashboard-sub-menu-more{
																					position: absolute;
																					top: -5px;
																					right: 100%;
																					z-index: 21;
																					width: auto;
																					padding: 0 0 10px;
																					font-size: 12px;
																					font-weight: normal;
																					color: #ffffff;
																					background-color: rgba(102, 102, 102, 0.95);
																					display: none;
																				}
																				a {
																					color: #ffffff;
																					display: block;
																					padding-left: 14px;
																					padding-right: 14px;
																					font-size: 12px;
																					font-weight: normal;
																					text-transform: none;
																					margin-right: 0;
																						&:hover {
																							background-color: #1f80c3;
																						}
																				}
																				&:hover{
																					.dashboard-sub-menu-more{
																						display: block;
																					}
																				}
																				&:hover > a{
																					background-color: #1f80c3;
																				  }
																			@media only screen and (max-width:990px){
																				margin: 0 0;
																			}
																			@media only screen and (max-width: $mobile-landscape){
																				text-align: center;
																			}
																		}
																}
																@media only screen and (max-width: $mobile-landscape){
																	position: relative;
																	top: 0;
																	width: 100%;
																}
														}
														a{
														  text-decoration: none;
														  font-size: 12px;
														  color: $black;
														  font-weight: 600;
														  font-family: $arial-font;
															&:hover{
																color: #f39302;
															}
														}
														&:hover{
															.dashboard-sub-menu{
																display: block;
															}
														}
														&:hover > a{
															color: #f39302;
														}
														&.click-disable {
															.dashboard-sub-menu {
																display:none !important;
															}
														}
												  }
											}
									  }
								}			
						  }
							@media screen and (max-width:$standard-target-width){
								.header-bottom{
									top: 34px;
									position: absolute;
										nav{
											&.dashboard-menu{
												margin: 0px;
												top: 0px;
												padding: 0px;
												background: none;
												display: inline;
													ul{
														li{
															margin: 0 10px;
															width: auto;
															a{
																font-size: 10px;
															}
														}
													}
											}
										}
								}				
							}
					  }
				}
			@media screen and (max-width:$standard-target-width){		
				.logo{
					padding: 0 10px;
				}
				.header-right{
					margin: 20px 10px 0 0;
						nav{
							background: $menu-drop-gray;
							display: block;
							float: none;
							left: 0;
							padding: 7px;
							position: absolute;
							top: 49px;
							width: 100%;
							z-index: 3;
							text-align: center;
							display: none;
								ul{
									li{
										float: left;
										width: 16%;
										text-align: center;
										a{
											font-size: 13px;
											margin-right: 0px;
											&.active span.arrow-up{
												bottom: -10px;
											}
										}
									}
								}
							.header-bottom{
								nav{
									&.dashboard-menu{
										ul{
											li{
												margin: 0 10px;
												line-height: 20px;
													a{
														font-size: 10px;
													}
											}
										}
									}
								}
							}
						}			
				}
			}
			
			@media screen and (max-width:640px){		
				.header-right{
					nav{
						ul{
							line-height: 30px;
								li{
									float: none;
									width: 100%;
								}
						}
						.header-bottom{
							height: 155px;
							position: relative;
							top: 0;
							border-bottom: none;
							min-height: 50px;
								nav{						
									&.dashboard-menu{
										margin-right: 0px;
										width: 100%;
											ul{
												line-height: 30px;
													li{
														float: none;
													}
											}
									}
								}
						}
					}			
				}
			}
			@media screen and (max-width:$mobile-standard-width){
				.logo{
					width: 200px;
					line-height: 49px;
					padding: 0 10px;
					border-right: 3px solid #8ebf49;
						img{
							width: 100%;
						}
				}
			}
			
		  }
		  .user-icon{
				background-image: url("../img/sprite.svg");
				background-position: right -23px;
				float: right;
				position: relative;
				padding-bottom: 9px;
				height: 19px;
				width: 16px;
				cursor: pointer;
					.user-dropdown{
						  background-color: rgba(136, 136, 136, 0.95);
						  display: none;
						  position: absolute;
						  right: -2px;
						  top: 29px;
						  width: 200px;
						  z-index: 3;
						  padding: 10px 0;
						  font-size: 12px;
						  color: $white;
						  line-height: 20px;
							  .heading{
								font-size: 12px;
								text-transform: uppercase;
								font-weight: 600;
								padding: 0 10px;
							  }
							  .user-email{
								font-size: 10px;
								color: $white;
								font-style: italic;
								padding: 0 10px 0 20px;
							  }
							  ul{
								margin: 0;
								padding: 0;
								li{
								  float: none;
								  list-style: none;
								  a{
									font-size: 12px;
									color: $white;
									text-decoration: none;
									display: block;
									padding: 0 10px;
									&:hover{
									  background-color: #1f80c3;
									}
								  }
								}
							  }
							  &:before{
								border-bottom: 5px solid #868686;
								border-left: 5px solid transparent;
								border-right: 5px solid transparent;
								content: "";
								display: block;
								height: 0;
								position: absolute;
								right: 5px;
								top: -5px;
								width: 0;
								opacity: 0.95;
							  }
					}
		  }
		  .toggle-menu-bar{
				float: right;
				margin: 3px 20px;
				color: #FFF;
				cursor: pointer;
				display: none;
		  } 
		  @media screen and (max-width:$standard-target-width){	
			.toggle-menu-bar{
				display: block;
			}	
		  }  
}
@media screen and (max-width:$standard-target-width){
	header{
		height: 49px;
	}
}