/*** METRIC HPE FONT ***/
@font-face{
    font-family:'Metric Light';
    src:url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Light.woff2') format('woff2'),url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Light.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-stretch:normal
}
@font-face{
    font-family:'Metric Regular';
    src:url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Regular.woff2') format('woff2'),url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Regular.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-stretch:normal
}
@font-face{
    font-family:'Metric Medium';
    src:url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Medium.woff2') format('woff2'),url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Medium.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-stretch:normal
}
@font-face{
    font-family:'Metric Semibold';
    src:url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Semibold.woff2') format('woff2'),url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/Metric-Semibold.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-stretch:normal
}
@font-face{
    font-family:'MetricHPE Black';
    src:url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/MetricHPE-Web-Black.woff2') format('woff2'),url('https://hpe-rfb.itcs.hpe.com/resources/rs/custom/fonts/MetricHPE-Web-Black.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-stretch:normal
}

/*** GLOBAL ***/
body {
	display:block;
  	margin:0;
  	padding:0;
  	width:100%;
  	height:100vh;
  	background-color:#f6f6f6;
  	font-family: 'Metric Light',Arial,sans-serif!important;
    font-size: 18px;
	color:#333;
}
.cfix {
	clear:both;  
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #CCC;
  transition:.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* SECTION & WRAPPER */
section.wrapper.inactive {
	display:none;
}
section.wrapper {
	display:block;
  	position:relative;
  	max-width:1400px;
	padding:0 20px;
	box-sizing:border-box;
  	margin:0 auto;
  	background-color:#FFF;
}
section.wrapper.loading {
  	background:white url(https://cdn1.partner.hpe.com/hpe-cpp-default-theme/images/common/loader_32px.gif) no-repeat center center;
}

/*** NAV ***/
section#nav {
  	position:fixed;
  	z-index:99;
	width:100%;
  	height:72px;
  	border-bottom:1px solid #CCC;
  	background-color:#FFF;
	top:0;
	left:0;
	right:0;
}
section#nav .wrapper {
	display:block;
  	position:relative;
  	top:50%;
	height:24px;
  	transform:translate(0,-50%);
}
section#nav #burger {
  	display:inline-block;
  	position:relative;
	width:24px;
  	height:24px;
  	margin-right:20px;
  	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
  	cursor:pointer;
  	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
section#nav #logo {
  	display:inline-block;
	font-size:24px;
  	line-height:24px;
  	height:24px;
  	overflow:hidden;
  	font-weight:100;
  	cursor:pointer;
  	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
section#nav #logo strong {
	font-weight:bold;
}
section#nav #icons {
	display:inline-block;
  	float:right;
  	height:24px;
}
section#nav #icons ul {
  	list-style:none;
	margin:0;
	padding:
}
section#nav #icons ul li {
  	display:inline-block;
  	margin-left:10px;
  	cursor:pointer;
}
section#nav #icons ul li svg,
section#nav #icons ul li img {
  	width:24px;
	height:24px;
  	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
  	box-sizing:border-box;
  	transition:.3s;
}
section#nav #icons ul li span {
	display:none;
  	color:#666;
  	width:24px;
  	height:24px;
  	line-height:24px;
  	text-align:center;
  	overflow:hidden;
  	font-size:30px;
  	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
section#nav #icons ul li[icon-id=profile].open svg,
section#nav #icons ul li[icon-id=profile].open img {
	display:none;  
}
section#nav #icons ul li[icon-id=profile].open span,
section#nav #icons ul li[icon-id=profile].open span svg {
	display:block;  
}
section#nav #icons ul li[icon-id=search] input {
	display:block;
  	position: relative;
    height: 24px;
    box-sizing: border-box;
    min-width: 240px;
    border: 0;
    float: left;
    font-size: 20px;
    font-weight: 100;
    font-family: MetricHPE,Metric,Arial,Helvetica,sans-serif;
}
section#nav #burger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #333;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  pointer-events:none;
}
section#nav #burger span:nth-child(1) {
  top: 2px;
}
section#nav #burger span:nth-child(2),#burger span:nth-child(3) {
  top: 10px;
}
section#nav #burger span:nth-child(4) {
  top: 18px;
}
section#nav #burger.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
section#nav #burger.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
section#nav #burger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
section#nav #burger.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
} 
section#nav nav {
    display: none;
    position: absolute;
    height: calc(100vh - 51px);
    padding: 20px 20px 20px 40px;
    min-width: 220px;
    z-index: 9;
    top: 48px;
    background-color: #425563;
}
section#nav nav.open {
	display:block;  
}
section#nav nav ul {
	list-style:none;
  	margin:0;
  	padding:0;
}
section#nav nav ul li {
	font-size:18px;
  	color:#FFF;
	padding:15px 0;
  	cursor:pointer;
  	font-weight:300;
}
section#nav nav ul li.inactive {
	color:#CCC;
  	cursor:default;
}
section#nav nav ul li a,
section#nav nav ul li a:hover,
section#nav nav ul li a:visited,
section#nav nav ul li a:active {
	color:#fff;  
}

/** STAR RATING **/
.rating {
	display:inline-block;
	height:32px;
	margin:0 3px;
	float:left;
	direction:rtl;
}
.rating.disabled {
	pointer-events:none;
}
.rating + .total {
	display: inline-block;
    line-height: 18px;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0 3px;
    color: #999;
	float:left;
}
.rating.xs + .total {
	font-size:12px;
}
.rating.xl + .total {
	font-size:18px;
}
.rating.mirror,
.rating.mirror  + .total {
	float:right;
}
.rating svg,
.rating.md svg {
	width:24px;
	height:24px;
	cursor:pointer;
	padding:4px 0;
}
.rating.active svg.full polygon {
	fill: #00b388;
	stroke: #00b388;
}
.rating.active svg.empty polygon,
.rating.active svg.half path {
	stroke: #00b388;
}
.rating.xs svg {
	width:18px;
	height:18px;
	padding:6px 0;
}
.rating.xl svg {
	width:32px;
	height:32px;
	padding:0;
}
.rating svg.full,
.rating svg.half {
	display:none;
}
.rating:hover .star svg.half,
.rating:hover .star svg.full {
	display:none!important;
}
.rating:hover .star svg.empty {
	display:inline-block!important;
}
.rating:hover .star:hover svg.full,
.rating:hover .star:hover ~ .star svg.full,
.rating:hover .star[data-rating]:hover svg.full,
.rating:hover .star[data-rating]:hover ~ .star svg.full {
	display:inline-block!important;
}
.rating:hover .star:hover svg.empty,
.rating:hover .star:hover svg.half,
.rating:hover .star:hover ~ .star svg.empty,
.rating:hover .star:hover ~ .star svg.half {
	display:none!important;
}

/** DEFAULT DISPLAY **/
.rating[data-rating='4'] .star:nth-child(2) svg.empty,
.rating[data-rating='4'] .star:nth-child(2) svg.half,
.rating[data-rating='4'] .star:nth-child(2) ~ .star svg.empty,
.rating[data-rating='4'] .star:nth-child(2) ~ .star svg.half {
	display:none;
}
.rating[data-rating='4'] .star:nth-child(2) svg.full,
.rating[data-rating='4'] .star:nth-child(2) ~ .star svg.full {
	display:inline-block;
}
.rating[data-rating='5'] .star:nth-child(1) svg.empty,
.rating[data-rating='5'] .star:nth-child(1) svg.half,
.rating[data-rating='5'] .star:nth-child(1) ~ .star svg.empty,
.rating[data-rating='5'] .star:nth-child(1) ~ .star svg.half {
	display:none;
}
.rating[data-rating='5'] .star:nth-child(1) svg.full,
.rating[data-rating='5'] .star:nth-child(1) ~ .star svg.full {
	display:inline-block;
}
.rating[data-rating='3'] .star:nth-child(3) svg.empty,
.rating[data-rating='3'] .star:nth-child(3) svg.half,
.rating[data-rating='3'] .star:nth-child(3) ~ .star svg.empty,
.rating[data-rating='3'] .star:nth-child(3) ~ .star svg.half {
	display:none;
}
.rating[data-rating='3'] .star:nth-child(3) svg.full,
.rating[data-rating='3'] .star:nth-child(3) ~ .star svg.full {
	display:inline-block;
}
.rating[data-rating='2'] .star:nth-child(4) svg.empty,
.rating[data-rating='2'] .star:nth-child(4) svg.half,
.rating[data-rating='2'] .star:nth-child(4) ~ .star svg.empty,
.rating[data-rating='2'] .star:nth-child(4) ~ .star svg.half {
	display:none;
}
.rating[data-rating='2'] .star:nth-child(4) svg.full,
.rating[data-rating='2'] .star:nth-child(4) ~ .star svg.full {
	display:inline-block;
}
.rating[data-rating='1'] .star:nth-child(5) svg.empty,
.rating[data-rating='1'] .star:nth-child(5) svg.half,
.rating[data-rating='1'] .star:nth-child(5) ~ .star svg.empty,
.rating[data-rating='1'] .star:nth-child(5) ~ .star svg.half {
	display:none;
}
.rating[data-rating='1'] .star:nth-child(5) svg.full,
.rating[data-rating='1'] .star:nth-child(5) ~ .star svg.full {
	display:inline-block;
}

/* TABS */
.tabs {
	display:block;
	position:relative;
	margin-bottom:40px;
  	padding-right:80px;
}
.tabs span {
    display: inline-block;
    font-size: 18px;
    padding: 5px 10px;
    margin-right: 5px;
  	cursor:pointer;
  	border-bottom:2px solid transparent;
}
.tabs span.active {
  	cursor:default;
  	font-weight:600;
	border-bottom:2px solid #00B388;
	pointer-events:none;
}
.tabs + .container div[tab-id] {
	display:none;  
}
.tabs + .container div[tab-id].active {
	display:block;  
}