@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: "HPE Graphik Regular";
  src: url("../fonts/HPE Graphik-Regular.otf") format("opentype");
}
@font-face {
  font-family: "HPE Graphik Medium";
  src: url("../fonts/HPE Graphik-Medium.otf") format("opentype");
}

@font-face {
  font-family: "HPE Graphik Condensed";
  src: url("../fonts/condensed/HPE GraphikXXCondensed-Medium.otf");
}

@font-face {
  font-family: "HPE Graphik Condensed Black";
  src: url("../fonts/condensed/HPE GraphikXXCondensed-Black.otf");
}

.quickSpecsLink li:before {
  display: none !important;
}

.masterQSLink li {
  padding-left: 0 !important;
}

.masterLinkIcon {
  position: relative !important;
  padding-left: 5px !important;
  top: 2px !important;
}

.headerLink {
  font-size: 18px !important;
  line-height: 1.2em !important;
  color: #01a982 !important;
  fill: #01a982 !important;
  padding-left: 0 !important;
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
}

.headLinkList {
  padding-left: 0 !important;
}
.headLinkList a {
  border-bottom: none !important;
}
.masterLink {
  border-bottom: none !important;
  padding-left: 0 !important;
}

.hover .title {
  color: #00b388 !important;
}

.hover:before {
  color: #00b388 !important;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

#hpehf-header {
  border-bottom: none !important;
}

.navTitle:hover {
  color: #00b388 !important;
}

.answer {
  padding-top: 15px;
  padding-left: 15px;
}

.panel {
  padding: 0 18px;
  border: none !important ;
  background-color: white;
  margin-bottom: 0 !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.progressive-block .faqTitle {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px !important;
  color: #292d3a !important;
  line-height: 1em;
  padding-top: 8px;
  padding-bottom: 5px;
  padding-left: 20px;
  font-weight: 500 !important;
  width: 90%;
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
}

.condensed {
  font-family: "HPE Graphik Condensed", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
  font-stretch: 75% !important;
}
.title {
  font-size: 96px !important;
  color: #292d3a !important;
  font-weight: 700 !important;
  line-height: 96px !important;
  font-stretch: 75% !important;
}
.button-cta {
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
  overflow-wrap: break-word;
  word-break: break-word;
  color: rgb(6, 134, 103) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.20001em !important;
  transition: color 0.15s ease-in-out;
}
.headerLink:hover {
  color: rgb(0, 95, 73) !important;
}
.headLinkList .secondary-link:hover {
  color: rgb(0, 95, 73) !important;
}
.subTitle {
  font-size: 28px !important;
  font-family: "HPE Graphik Medium", Arial, sans-serif !important;
}
.btn {
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
  background-color: rgb(41, 45, 58) !important;
  color: rgb(255, 255, 255) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 100px !important ;
  text-transform: none !important;
  font-size: 20px !important;
}

.tile-title {
  font-size: 28px !important;
  padding-top: 12px !important;
  color: rgb(41, 45, 58) !important;
  font-family: "HPE Graphik Medium", Arial, sans-serif !important;
}
.answer a {
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
}
.secondary-link em {
  color: #292d3a !important ;
}
.hpe-content-block.typo3 .secondary-link {
  font-size: 18px !important;
}
.btn:hover {
  background-color: rgb(74, 78, 96) !important;
}
.img-home-sec {
  opacity: 0.4 !important;
}
.rich-text-container {
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
  color: #67686e !important;
}
em.offlineLinkArrow {
  color: #01a982 !important;
}

em.onlineLinkArrow {
  color: #01a982 !important;
}
em.productPhotoLinkArrow {
  color: #01a982 !important;
}
.anchor-nav-item.active {
  color: #01a982 !important;
}

.tile-description {
  padding-top: 15px !important;
  margin-bottom: 8px !important;
  min-height: 105px !important;
  max-height: fit-content !important;
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
  color: rgb(103, 104, 110) !important;
  font-size: 20px !important;
}

.qsDesc,
.surveryDesciption {
  line-height: 30px !important;
  padding-top: 10px !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}

.desktop-nav {
  height: 80px !important;
}
.links-container {
  margin-top: 10px !important;
}
.homeContentContainer {
  margin: auto !important;
  padding-right: 5% !important;
  padding-bottom: 5% !important;
  padding-top: 5% !important;
  padding-left: 0px !important;
}
.surveyContentContainer {
  margin: auto !important;
  padding-right: 5% !important;
  padding-bottom: 5% !important;
  padding-top: 5% !important;
  padding-left: 0px !important;
}

.getSupportDescription {
  margin-left: -15px !important;
  padding-right: 5% !important;
}

.browse-by-router .tiles .tile-text {
  text-align: left !important;
}
.browse-by-router .tiles .tile {
  align-items: start !important;
  height: 100% !important;
}
.tile .background-wrapper {
  background-color: #f7f7f7 !important;
}
.browseImgIcon {
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.tile:hover {
  border-color: whitesmoke !important;
  cursor: default !important;
}

.tile-text:hover + .background-wrapper {
  background-color: #f7f7f7 !important;
  opacity: 1;
  background-image: linear-gradient(
    160deg,
    #00e0af00 70%,
    #00e0af66 100%
  ) !important;
  transition: opacity 0.5s linear;
}

.tile .background-wrapper:hover {
  background-color: #f7f7f7 !important;
  opacity: 1;
  background-image: linear-gradient(
    160deg,
    #00e0af00 70%,
    #00e0af66 100%
  ) !important;
  transition: opacity 0.5s linear;
}

#surveySection {
  background-color: #e6e8e9 !important;
}

#faq {
  background-color: #e6e8e9 !important;
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}
.supportTitle {
  margin-bottom: -40px !important;
  padding-top: 45px !important;
}
.supportImageContainer {
  padding-right: 25% !important;
}

#contact {
  background-color: white !important;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  color: #444;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 24px;
  transition: 0.4s;
  border-bottom: 1px solid #d1d1d1 !important;
}
.accordionTicket {
  background-color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #d1d1d1 !important;
  border-left: none;
  border-right: none;
  outline: none;
  transition: 0.4s;
  color: rgb(51, 51, 51) !important;
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.accordionTicket.firstAccordion {
  border-top: 1px solid #d1d1d1 !important;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

/* Style the accordion panel. Note: hidden by default */
.panelTicket {
  padding-left: 15px !important;
  padding-top: 15px !important;
  padding-bottom: 30px !important;
  background-color: white;
  display: none;
  overflow: hidden;
  font-family: "HPE Graphik Regular", Arial, sans-serif !important;
}

.accordionTicket::after {
  content: url("../images/general/angle-down-solid-full.svg"); /* Unicode character for "plus" sign (+) */
  float: right;
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.accordion::after {
  content: url("../images/general/angle-down-solid-full.svg"); /* Unicode character for "plus" sign (+) */
  float: right;
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.activeTicketHeader::after {
  content: url("../images/general/angle-up-solid-full.svg");
  width: 18px;
  height: 18px;
}

.activeFAQ::after {
  content: url("../images/general/angle-up-solid-full.svg");
  width: 18px;
  height: 18px;
}

.typo3 .body-copy {
  font-size: 20px !important;
}

@media (max-width: 767px) {
  .getSupportDescription {
    margin-left: 0px !important;
    padding-top: 25px !important;
  }
  .supportImageContainer {
    padding-right: 25% !important;
  }
  .typo3 .body-copy {
    font-size: 18px !important;
  }
  .title {
    font-size: 66px !important;
    line-height: 66px !important ;
  }
  .accordionTicket {
    padding-left: 0px !important;
    font-size: 18px !important;
  }
  .progressive-block .faqTitle {
    font-size: 18px !important;
  }

  .btn {
    font-size: 16px !important;
  }

  .hpe-content-block.typo3 .secondary-link {
    font-size: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 998px) {
  .supportImageContainer {
    padding-right: 2% !important;
  }
}

@media (min-width: 998px) and (max-width: 1320px) {
  .supportImageContainer {
    padding-right: 12% !important;
  }
}
@media (min-width: 998px) and (max-width: 1320px) {
  .supportImageContainer {
    padding-right: 12% !important;
  }
}