/*** Classes for DWF H/F service ***/

.hpui-mega-menu-text .dwf-superscript {
	font-size: 14px;
}

/* Override and zero-out the following Grommet global styles from within the body.  Do this 
   by clearing them throughout the page and then re-setting them with the values Grommet
   uses, but just within the header and footer divs */
address, blockquote, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul {
	margin-bottom: 0px;
}
table {
	border-collapse: separate;
}
img {
	max-width: none;
}
div.header address,
div.header blockquote, 
div.header dl, 
div.header fieldset, 
div.header figure, 
div.header h1, 
div.header h2, 
div.header h3, 
div.header h4, 
div.header h5, 
div.header h6, 
div.header hr, 
div.header ol, 
div.header p, 
div.header pre, 
div.header table, 
div.header ul {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}
div.footer address,
div.footer blockquote, 
div.footer dl, 
div.footer fieldset, 
div.footer figure, 
div.footer h1, 
div.footer h2, 
div.footer h3, 
div.footer h4, 
div.footer h5, 
div.footer h6, 
div.footer hr, 
div.footer ol, 
div.footer p, 
div.footer pre, 
div.footer table, 
div.footer ul {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}
div.header table {
	border-collapse: collapse;
}
div.footer table {
	border-collapse: collapse;
}
div.header img {
	max-width: 100%;
}
div.footer img {
	max-width: 100%;
}
/* Try it now banner styles */
div.banner {
	background-image: url('/resource3/hpsc/hf/images/banner.jpg');
	height: 200px;    
	text-align: center;
	display: flex;
	flex-wrap: wrap; /* Optional. only if you want the items to wrap */
	justify-content: center; /* For horizontal alignment */
	align-items: center; /* For vertical alignment */		
}
/* Experience banner styles */
div.banner2 {
	background-image: url('/resource3/hpsc/hf/images/banner2.png');
	height: 200px;
	text-align: center;
	display: flex;
	flex-wrap: wrap; /* Optional. only if you want the items to wrap */
	justify-content: center; /* For horizontal alignment */
	align-items: center; /* For vertical alignment */
}
/* Banner Content styles */
div.bannerContent {
	width: 50%;
}
div.bannerContent a.hpui-primary-button input[type=button] {
    min-height: 36px;
    z-index: 1;
    padding: 0px 13px 0px 13px;
    width: auto;
    overflow: visible;
    white-space: normal;
    word-break: break-all;
    border: 0;
    font-family: "Metric", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
div.bannerContent a.hpui-primary-button {
    text-decoration: none !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}

div.bannerContent a.hpui-primary-button:hover {
    text-decoration: none !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}
div.bannerContent a.hpui-primary-button input[type=button] {
    background-color: #01A982;
    border: 2px solid #01A982;
    color: #FFFFFF;
}
div.bannerContent a.hpui-primary-button input[type=button]:hover,
div.bannerContent a.hpui-primary-button input[type=button]:focus {
    background-color: #049371;
    border: 2px solid #049371;
    box-shadow: 0px 0px 0px 2px #049371;
    color: #FFFFFF;
}
div.bannerContent h1.hpui-heading {
    font-family: "Metric", Arial, sans-serif;
    font-size: 35px;
    font-stretch: condensed;
    line-height: 36px;
    font-weight: 600;
    margin: 0px 0px 9px 0px;
    color: #FFFFFF;
    padding-bottom: 10px;
}
@media only screen and (min-width: 480px) and (max-width: 900px) {
	div.bannerContent {
		width: 90%;
	}
	div.bannerContent h1.hpui-heading {
		font-size: 27px;
		line-height: 30px;
		margin: 0px 0px 5px 0px;
		padding-bottom: 5px;
	}
}
@media only screen and (max-width: 480px) {
	div.bannerContent {
		width: 90%;
	}
	div.bannerContent h1.hpui-heading {
		font-size: 27px;
		line-height: 30px;
		margin: 0px 0px 5px 0px;
		padding-bottom: 5px;
	}
}

@font-face {
	font-family: "Metric";
	src: url("https://hpefonts.s3.amazonaws.com/web/MetricHPE-Web-Regular.woff") format("woff");
}

@font-face {
	font-family: "MetricBold";
	font-weight: 700;
	src: url("https://hpefonts.s3.amazonaws.com/web/MetricHPE-Web-Bold.woff") format("woff");
}

:root {
	--dce-header-disabled-color: rgb(49, 53, 64);
	--dce-header-disabled-color-mb: rgba(74, 80, 80, 0.8);
	--dce-header-animated-gradient-middle-color: rgb(79, 83, 94);
	--dce-header-text-color: #FFFFFF;
	--dce-header-background-color: #1A1F2B;
	--dce-header-background-color-mb: #333947;
	--dce-header-height: 72px;
}

/* White theme used for cep header sleleton */
.skeleton-light-theme {
	--dce-header-disabled-color: rgb(238, 238, 238);
	--dce-header-disabled-color-mb: rgb(238, 238, 238);
	--dce-header-animated-gradient-middle-color: rgb(201, 199, 197);
	--dce-header-text-color: rgba(0,0,0,0.9);
	--dce-header-background-color: #FFFFFF;
	--dce-header-background-color-mb: #FFFFFF;
	--dce-header-height: 72px;
	--dce-header-skeleton-white-shadow: #000;
}

.skeleton-light-theme .dce-header_skeleton {
    box-shadow: 0 3px 3px -4px var(--dce-header-skeleton-white-shadow,#000);
}

div.header.slds-scope#header {
	margin-top: -72px;
}

body {
	margin: 0px;
}

.dce-header_skeleton {
	background-color: var(--dce-header-background-color, #1A1F2B);
	color: var(--dce-header-text-color, #FFFFFF);
	box-sizing: border-box;
	font-size: 0.8125rem;
	line-height: 1.5rem;
	display: flex;
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--dce-header-height, 72px);
	z-index: 22;
}

.dce-header_skeleton_components_container_bar {
	box-shadow: none;
	position: relative;
	padding-left: 0px;
	display: flex;
	width: inherit;
}

.dce-header_hamburger_menu {
	padding: 23px 31px;
	position: relative;
	stroke-width: 4px;
	top: 0;
	left: 0;
	bottom: 0;
	right: auto;
}

.dce-header_components_container {
	padding-right: 26px;
	padding-left: 68px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	position: absolute;
	height: var(--dce-header-height, 72px);
	width: inherit;
	margin-top: 0.5px;
}

.dce-header_logo_group_container {
	display: flex;
	padding: 0 1rem;
	align-items: center;
	align-content: center;
}

.dce-header_logo {
	display: flex;
}

.dce-header_logo_text_container {
	height: var(--dce-header-height, 72px);
	display: flex;
	align-items: center;
}

.dce-header_logo_text {
	margin-left: 19px;
	font-family: Metric, sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
	margin-bottom: revert;
	margin-top: 12.4px;
}

.dce-header_logo_text strong {
	font-family: MetricBold, sans-serif;
	font-weight: 700;
	margin-left: 5px;
	margin-right: 5px;
}
.dce-header_skeleton .dce-header_skeleton_components_container_bar .dce-header_components_container .dce-header_logo_group_container .dce-header_logo_text a {
    color: inherit;
    text-decoration: none;
}

.dce-header_right_panel_container {
	padding: 0 0.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	align-content: center;
}

.dce-header_magnifying_glass_wrapper {
	margin-left: 0.125rem;
	margin-right: 0.125rem;
	position: relative;
	display: inline-flex;
	min-width: 48px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
}

.dce-header_bell_icon_wrapper {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	height: 48px;
}

.dce-header_bell_icon {
	padding: 12px;
	margin-left: 0.125rem;
	margin-right: 0.125rem;
	line-height: 1.5rem;
	vertical-align: baseline;
	display: inline-block;
}

.dce-header_profile_circle_wrapper {
	margin-left: 0.75rem;
	width: 64px;
	display: flex;
	justify-content: center;
}

.dce-header_profile_circle {
	height: 48px;
	width: 48px;
	display: inline-block;
	margin-left: 2px;
	margin-right: 2px;
}

.dce-header_disabled_component {
	stroke: var(--dce-header-disabled-color, rgb(49, 53, 64));
	color: var(--dce-header-disabled-color, rgb(49, 53, 64));
	fill: var(--dce-header-disabled-color, rgb(49, 53, 64));
}

@keyframes dce-header_animation_gradient {
	0%,
	100% {
		color: var(--dce-header-disabled-color, rgb(49, 53, 64));
		fill: var(--dce-header-disabled-color, rgb(49, 53, 64));
		stroke: var(--dce-header-disabled-color, rgb(49, 53, 64));
	}
	50% {
		color: var(--dce-header-animated-gradient-middle-color, rgb(79, 83, 94));
		fill: var(--dce-header-animated-gradient-middle-color, rgb(79, 83, 94));
		stroke: var(--dce-header-animated-gradient-middle-color, rgb(79, 83, 94));
	}
}

@media screen and (max-width: 1119px) {
	.dce-header_hamburger_menu {
		padding: 22px 16px;
	}
	.dce-header_components_container {
		padding-left: 60px;
		padding-right: 10px;
	}
}

@media screen and (max-width: 767px) {
	.dce-header_skeleton {
		background-color: var(--dce-header-background-color-mb, #333947);
	}
	.dce-header_components_container {
		padding-right: 0px;
	}
	.dce-header_logo_group_container {
		padding: 0 1.25rem;
	}
	.dce-header_logo_text_container {
		display: none;
	}
	.dce-header_right_panel_container {
		padding: 0 1.25rem;
	}
	.dce-header_profile_circle_wrapper {
		display: none;
	}
	.dce-header_disabled_component {
		stroke: var(--dce-header-disabled-color-mb, rgba(74, 80, 80, 0.8));
		color: var(--dce-header-disabled-color-mb, rgba(74, 80, 80, 0.8));
	}
	@keyframes dce-header_animation_gradient {
		0%,
		100% {
			color: var(--dce-header-disabled-color-mb, rgba(74, 80, 80, 0.8));
			fill: var(--dce-header-disabled-color-mb, rgba(74, 80, 80, 0.8));
			stroke: var(--dce-header-disabled-color-mb, rgba(74, 80, 80, 0.8));
		}
		50% {
			color: var(--dce-header-animated-gradient-middle-color-mb, rgb(94, 100, 100));
			fill: var(--dce-header-animated-gradient-middle-color-mb, rgb(94, 100, 100));
			stroke: var(--dce-header-animated-gradient-middle-color-mb, rgb(94, 100, 100));
		}
	}
}

@media screen and (max-width: 309px) {
	.dce-header_logo_img {
		max-width: 100%;
		vertical-align: baseline;
	}
}

use.dce-header_animation {
	animation: dce-header_animation_gradient 2.5s infinite;
}