@font-face{
    font-family:SFUIbold;
    src:url("/themes/classic/fonts/SFUIText-Bold.otf") format("opentype");
}
#header{
	position:fixed;
	left:0; top:0;
	z-index:999;
	float:left;
	width:100%;
	min-width:800px;
	height:64px;
	padding:0 0 0 0;
	background:#fff;
	border-bottom:1px solid #DDDDDD;}
.modal-open #header{padding-right:16px;}

#header #leftMenuBtn{
	border:1px solid #ddd;
	border-radius:6px;
	color:#ddd;
	display:inline-block;
	font-size:1.8em;
	font-weight:bold;
	line-height:1em;
	margin:15px 0 15px 15px;
	padding:3px 8px;
	text-align:center;
	text-decoration:none;
	vertical-align:top;
}

#header a.logo{
	text-decoration:none;
	display:inline-block;
	width:140px;
	height:20px;
	margin:10px 0 0 0;}
#header a.logo > img{
	width:auto;
	height:42px;
	display:block;
	margin:0 auto;}
#header a.logo h6{position:absolute; top:-5px; left:25px; display:none;}
#header a.logo > img:hover+h6{display:block;}

#header .search{
	float:right;
	margin:10px 0 0 0;
}
#header .search input{
	width:357px;
	height:42px;
	padding:0 25px 0 50px;
	background:#F3F3F3 url(/img/search-loupe.png) no-repeat 20px center;
	-webkit-background-size:auto 40%;
	background-size:auto 40%;
	border:none;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	border-radius:100px;
}
#header .search .search-box{
	display:inline-block;
	position:relative;
}
#header .search-box .search-form_reset-search{
	display:none;
	width:10px;
	height:9px;
	background:url(/img/x.png) no-repeat center top;
	position:absolute;
	top:50%;
	right:14px;
	cursor:pointer;
	transform:translateY(-50%);
}

#header .messages-list{
	list-style:none;
	float:right;
	margin:0 0 0 32px;
	padding:0;
}
#header .messages-list > li{
	float:left;
	margin:0;
	position:relative;
}
#header .messages-list > li > a{
	border-left:1px solid #F3F3F3;
	display:block;
	/*padding:0 35px;*/
	height:64px;
	width:96px;
}
#header .messages-list > li > a.calendar{
	background:url(/img/calendar.png) no-repeat center center;
	background-size:auto 26px;
}
#header .messages-list > li > a.messages{
	background:url(/img/chat.png) no-repeat center center;
	background-size:auto 26px;
}
#header .messages-list > li > a.notification{
	background:url(/img/notification.png) no-repeat center center;
	background-size:auto 26px;
	position:relative;
}
#header .messages-list > li > a.notification > span{
	position:absolute;
	top:50%;
	left:50%;
	margin:1px 0 0 4px;
	background:#ffc963;
	color:#000;
	font-weight:600;
	font-size:9px;
	text-align:center;
	min-width:15px;
	min-height:15px;
	line-height:15px;
	display:block;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}

#header .user{
	background:#F0F0F0;
	border-bottom:1px solid #ddd;
	cursor:pointer;
	float:right;
	height:64px;
	padding:14px 24px;
	position:relative;
	text-align:left;
	width:242px;}
#header .user:after{
	background-image:url(/img/icons/ic_calendar_arrow_down@2x.png);
	background-size:cover;
	content:'';
	height:20px; width:20px;
	position:absolute;
	top:20px; right:10px;
	
}
#header .user .avatar,
#header .user .user-menu{
	display:inline-block;
	vertical-align:top;
}
#header .user .avatar{}
#header .user .user-menu{width:150px; padding-right:10px;}
#header .user .avatar a{display:block;}

#header .user .user-menu ul{
	display:none;
	top:60px; right:5px; left:auto;
	width:217px;}	
#header .user .user-menu a{color:#1B2438;}
#header .user .user-menu p{
	text-align:left;
	line-height:1em;
	margin:0;
	display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    color: #888;}
#header .user .user-menu p .name{
	color:#444;
	display:inline-block;
	max-width:145px;
	font-size:1em;
	font-weight:600;
	line-height:1.2em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;}
#header .user .user-menu p .name::first-letter{text-transform:uppercase;}
#header .user .user-menu p .company{
	color:#888;
	font-size:.8em;
	font-weight:normal;
	word-break:break-word;}	

#header .dropdown-menu{
	border:none;
	border-radius:6px;
	box-shadow:0 6px 32px 0 rgba(0,0,0,0.15);
	position:absolute;
	z-index:9999;}
#header .dropdown-menu:after{
	top:-16px;
	right:41px;
	border:solid transparent;
	content:" ";
	height:0;
	width:0;
	position:absolute;
	pointer-events:none;
	border-color:transparent;
	border-bottom-color:#fff;
	border-width:8px;
	margin-left:-10px;
}
#header .dropdown-menu:before{
	top:-20px;
	right:40px;
	border:solid transparent;
	content:" ";
	height:0;
	width:0;
	position:absolute;
	pointer-events:none;
	border-color:transparent;
	border-bottom-color:#e1e1e1;
	border-width:10px;
	margin-left:-10px;
}
#header .dropdown-menu li{}
#header .dropdown-menu li a{
	background:none;
	color:#222222;
	display:block;
	font-size:12px;
	line-height:14px;
	padding:7px 20px;
	text-decoration:none;
	white-space:normal;}
#header .dropdown-menu li a:hover{background-color:#f9f9f9;}

#header .dropdown-menu li.border-top,
#header .dropdown-menu li.border-bottom{position:relative;}
#header .dropdown-menu li.border-top:before,
#header .dropdown-menu li.border-bottom:after{
	background-color:#ededed;
	content:'';
	display:block;
	height:1px; width:100%;
	margin:4px 0;
}

#header .dropdown-menu li.header-part{}
#header .dropdown-menu li.header-part a{padding:16px 20px;}
#header .dropdown-menu li.header-part a:hover{background-color:transparent; cursor:default;}
#header .dropdown-menu li.header-part .name{
	color:#1B2438;
	display:inline-block;
	font-family:'SFUIbold', sans-serif, serif;
	font-size:15px;
	font-weight:700;
	vertical-align:middle;
	width:calc(100% - 40px);}
#header .dropdown-menu li.header-part .avatar-bg{display:inline-block; height:40px; vertical-align:middle; width:40px;}

#header li > #notification-menu{
	position:absolute;
	display:block;
	left:-10000px;
	width:450px;
}
#header li > #notification-menu .not-found{
	padding:10px 15px;
	text-align:center;
}

#header .dropdown-menu.notification ul{
	display:block;
	list-style:none;
	margin:0;
	max-height:300px;
	overflow-x:hidden;
	overflow-y:auto;
	padding:0;
	position:relative;}
#header .dropdown-menu.notification ul li{margin-bottom:9px;}
#header .dropdown-menu.notification ul li:after{
	background-color:#d8d8d8;
    content:'';
    display:block;
    height:1px;
	left:90px;
	margin:4px 0;
	position:absolute;
	right:0;
    width:100%;
	}
#header .dropdown-menu.notification ul li:last-child{margin-bottom:0;}
#header .dropdown-menu.notification ul li:last-child:after{display:none;}
#header .dropdown-menu.notification ul li.active a{background:#eee;}
#header .dropdown-menu.notification ul li.active a:hover{background:#f9f9f9;}
#header .dropdown-menu.notification ul li a .avatar-bg{height:36px; vertical-align:middle; width:36px;}
#header .dropdown-menu.notification ul li a .txt{
	color:#1B2438;
	display:inline-block;
	font-size:14px;
	font-weight:400;
	line-height:19px;
	padding-left:12px;
	vertical-align:middle;
	width:100%;}
#header .dropdown-menu.notification .see-all{position:relative;}
#header .dropdown-menu.notification .see-all a{color:#2f2f2f; display:block; font-size:12px; font-weight:600; line-height:19px; padding:8px 20px; text-align:center; text-decoration:none;}
#header .dropdown-menu.notification .see-all a:hover{background-color:#f9f9f9;}
#header .dropdown-menu.notification .see-all:before{
    background-color:#d8d8d8;
    content:'';
    display:block;
    height:1px;
    width:100%;
	margin:4px 0;}

#header .site-time{
	color:transparent;
	font-size:16px;
	font-weight:600;
	margin:auto;
	position:absolute;
	left:0;
	right:0;
	width:240px;
}
#header .site-time:hover{color:#444;}

@media screen and (max-width:1200px){
	#header .search input{display:none;}
}
@media screen and (max-width:1024px){
	#header .search input{width:auto;}
}
@media screen and (min-width:1080px){
	#header #leftMenuBtn{display:none !important;}
	#header a.logo{margin-left:40px;}
}
@media screen and (max-width:768px){
	#header #leftMenuBtn{}
	#header a.logo{}
	#header .messages-list{margin:0 auto !important;}
	#header .icon.calendar{display:none !important;}
	#header .icon.notification{border:none; margin-left:-10px; width:50px;}
	#header .user{padding:14px 18px 14px 10px; width:auto;}
	#header .user:after{right:0;}
	#header .user .user-menu{padding:0; width:auto;}
	#header .user .user-menu p{display:none;}
}
@media screen and (max-width:600px){
	#header li > #notification-menu{width:250px;}	
}