/* ## Site Header ## */
.site-header {position:relative; z-index:1000; margin:0; border-bottom:1px solid #DDE1E2;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.15);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.15);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.15);	
}
.site-header > .inner {/* padding:60px 0 15px; */ background:#fff;}
/* static containers to account for header buttons on mobile - allows absolute positioning to the header */
.site-header .container, .site-header [class*="grid-"] {position:static;}

.site-header .site-logo-wrpr {display:inline-block; height:90px;}
.site-header .site-logo-wrpr p {margin:0;}
.site-header  a.site-logo {display:inline-block; margin-left:70px; width:325px; padding:20px 28px 0 10px;}

.header-links {text-align: right;}
.header-links a {  margin: 0 3px; text-decoration: none; display:none;}
.header-links .sep {display:none;}
.header-links a:hover, .header-links a:focus, .header-links a:active {}

.site-search {/* margin:0 -10px; */}
.site-search .search-trigger {position:absolute; top:2px; left:54px; font-size:1.6em; padding:0; border:0px; width:50px; height:46px; background:#333; color:#fff; z-index:2; text-align:center; cursor:pointer;}
.site-search .search-trigger:hover, .site-search .search-trigger:focus, .search-active .site-search .search-trigger {background:#111;}
.site-search .search-trigger > * {padding-top:9px; display:inline-block; width:36px; height:36px;}
.site-search .inner {/* display:none; position:absolute; background:#aaa; bottom:-44px; left:0px; padding:5px; width:100%;  */ position:relative;}
.search-active .site-search .inner {display:block;}
.site-search .formee input[type="text"] {margin:0px; padding-left:40px;}
.site-search .btn {position:absolute; left:5px; bottom:1px; height:48px; width:30px; border-radius:6px; border:none; min-width:auto; padding:0;
	background: transparent url("/cms/images/layout/search.png") no-repeat scroll 50% 50%;
}


.header-right {display:table; width:100%; border-top:1px solid #DDE1E2; position:relative;}
.header-right .tbl-cell {display:table-cell; border-left:1px solid #DDE1E2; height:60px; vertical-align:middle;}
.header-right .tbl-cell.account-toggle {width: calc( (100%) - (85px) );}
.header-right .tbl-cell.notify-toggle {width:85px;}

.header-right .tbl-cell .inner-cell {position:relative;}
.header-right a.tbl-cell {text-decoration:none; outline:0;}

.header-right .account-toggle .inner-cell {padding-left: 60px; display: block;}
.header-right .account-img {display:block; width:35px; height:35px; border-radius:50%; overflow:hidden; 
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -17px;
	background: #ffffff url("/cms/images/layout/icon-userV2.png") no-repeat scroll 50% 50% / 90% 90%;
}

.header-right .account-img .header-pfp{
	height:100% !important;
}

.header-right .account-toggle {/* color:#4d4d4d; */ }
.header-right .account-toggle .welcome {font-size:12px; font-weight:bold; color:#231F20;}
.header-right .account-toggle .role {font-size:12px; color:#231F20;}
.header-right .account-toggle .role svg.icon {position:relative; top:1px; margin-right:2px;}
.header-right .account-toggle .name {font-size:16px; padding-right:20px; position:relative;}
.header-right .account-toggle .name:after {
	position:absolute;
	content: "\232a";
	font-family: 'icomoon';
	right:5px;
	bottom:2px;
	font-weight:bold;
	font-size:10px;
	-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);
}

	.header-right .account-toggle:hover,
	.header-right .account-toggle:focus,
	.active .header-right .account-toggle {
		background: #faf4e8;
	}


	.header-right .notify-toggle {
		text-align: center;
		color: #722282;
	}
.header-right .notify-toggle .inner-cell {position:relative; display: inline-block; margin-top:5px;}
.header-right .notify-toggle svg {font-size:32px; }
		.header-right .notify-toggle .digit {
			position: absolute;
			padding: 1px 4px;
			font-size: 12px;
			font-weight: bold;
			border-radius: 50%;
			display: inline-block;
			top: -2px;
			right: -1px;
			background: #C35113;
			color: #fff;
		}
		.header-right .notify-toggle:hover,
		.header-right .notify-toggle:focus,
		.active .header-right .notify-toggle {
			background: #722282;
			color: #fff;
		}
	.header-right .notify-toggle:hover .digit,
	.header-right .notify-toggle:focus .digit,
	.active .header-right .notify-toggle .digit {
		background: #d65f00;
		color: #fff;
	}

.header-right .account {display:none;}
.header-right .notify {display:none;}

.account-active .header-right .account, 
.notify-active .header-right .notify {
	display:block;
	position:absolute;
	top:100%;
	width:100%;
	left:0;
	z-index:9;
	background:#fff;
	border:1px solid #DDE1E2;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.15);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.15);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.15);	
}

.header-right .account ul {list-style:none; margin:0; padding:0;}
.header-right .account ul li {border-bottom:1px solid #DDE1E2;}
	.header-right .account ul li a {
		display: block;
		font-size: 14px;
		padding: 10px 15px;
		font-weight: 500;
	}

		.header-right .account ul li a:hover,
		.header-right .account ul li a:focus {
			background: #faf4e8;
			text-decoration: none;
		}

.header-right .notify ul {list-style:none; margin:0; padding:0;}
.header-right .notify ul li {border-bottom:1px solid #DDE1E2; padding:14px 15px;}
.header-right .notify ul li.new {background:#f2f1f5;}
.header-right .notify ul li a {display:block; font-size:16px; margin-bottom:2px;}
.header-right .notify ul li.new a {font-weight:bold;}
.header-right .notify ul li span {font-size:12px; }
.header-right .notify ul li span svg {position:relative; font-size:15px; top:3px; margin-right:3px;}
.header-right .notify a.view-all {display:block; font-size:14px; text-align:center; background:#f2f1f5; padding:9px 15px;}
/* =================================================================
                        Media Queries
===================================================================*/


@media only screen and (min-width:48em){

	.site-header > .inner {/* padding:10px 0; */}
	.site-header a.site-logo {text-align:left;}
	
	.header-links {margin:0 0 10px;}
	.header-links a {display:inline-block;}
	.header-links .sep {display:inline-block;}
	
	.site-search {margin:0px;}
	.site-search .inner {display:block; background:none; position:relative; bottom:auto; padding:0px;}
	.site-search .search-trigger {display:none;}



	.header-right {float:right; width:auto; border-top:none; border-right:1px solid #DDE1E2;}
	.header-right .tbl-cell{height:90px;}
	.header-right .tbl-cell.account-toggle {min-width:240px; padding-right:35px;}
	.header-right .tbl-cell.notify-toggle {width:90px;}


	.header-right .account-toggle .inner-cell {padding-left: 70px;}
	.header-right .account-img {left: 25px;}
	
	
}

@media only screen and (min-width:60em){
	.site-header .container, .site-header [class*="grid-"] {position:relative;}
	.site-header  a.site-logo {margin-left:10px;}
}

/* Ticket #713397 -  RC-229: Optimizing Canopy's Responsive Formatting and Device Formatting */
@media only screen and (max-width: 1640px) {
	.header-right .tbl-cell.account-toggle {
		max-width: 460px;
	}
}

@media only screen and (max-width: 1480px) {
	.header-right .tbl-cell.account-toggle {
		max-width: 360px;
	}
}

@media only screen and (max-width: 1199px) {
	.header-right .tbl-cell.account-toggle {
		max-width: 320px;
	}

	.site-header a.site-logo {
		width: 290px;
		margin-top: 10px
	}
}

@media only screen and (max-width: 1032px) {
	.header-right .tbl-cell.account-toggle {
		max-width: 280px;
	}

	.site-header a.site-logo {
		width: 290px;
		margin-top: 10px
	}
}

@media only screen and (max-width: 959px) {
	.header-right .tbl-cell.account-toggle {
		max-width: 320px;
	}
}

@media only screen and (max-width: 770px) {
	.header-right {
		width: 100%;
	}

		.header-right .tbl-cell.account-toggle {
			max-width: initial;
			padding-right: 10px
		}
}