@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 300;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Light.otf") format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Regular.otf")
 format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: italic;
 font-weight: 400;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-RegularItalic.otf")
 format("opentype");
}

@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Medium.otf") format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: italic;
 font-weight: 500;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-MediumItalic.otf")
 format("opentype");
}

@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Semibold.otf")
 format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: italic;
 font-weight: 600;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-SemiboldItalic.otf")
 format("opentype");
}

@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Bold.otf") format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: italic;
 font-weight: 700;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-BoldItalic.otf")
 format("opentype");
}

@font-face {
 font-family: "HPEGraphik";
 font-style: normal;
 font-weight: 800; /* Super */
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-Super.otf") format("opentype");
}
@font-face {
 font-family: "HPEGraphik";
 font-style: italic;
 font-weight: 800; /* Super Italic */
 font-display: swap;
 src: url("../fonts/HPE%20Graphik/HPE%20Graphik-SuperItalic.otf")
 format("opentype");
}


@keyframes fadein {
 0% { opacity: 0; transform: translateX(20px); }
 100% { opacity: 1; transform: translateX(0); }
}


/* =========== HPE Graphik Condensed (Bold only, as requested) =========== */

@font-face {
 font-family: "HPEGraphikCondensed";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("../fonts/HPE%20Graphik%20Condensed/HPE%20GraphikXXCondensed-Bold.otf")
 format("opentype");
}

:root {
 /* Brand colours */
 --color-hpe-green: #01a982;
 --color-hpe-green-dark: #068667;
 --color-hpe-green-hover: #005f49;
 --color-hpe-mint: #00e0af;
 --color-hpe-mint-transparent: #00e0af00;
 --color-hpe-mint-overlay: #00e0af66;
 --color-hpe-light-green: #05cc93;
 --color-hpe-light-blue: #62e5f6;
 --color-hpe-cyan: #62E5F6;
 --color-hpe-blue: #0070f8;
 --color-hpe-purple: #7764fc;
 --color-hpe-orange: #FF8300;
 --color-hpe-yellow: #FEC901;
 --color-hpe-red: #CA2B4E;
 --cta-lm-color: #068667;
 --cta-lm-color-hover: #005f49;
 --color-hpe-green: #01a982;

 /* Neutrals */
 --color-white: #fff;
 --color-black: #000;
 --color-transparent: transparent;
 --color-dark: #292d3a;
 --color-dark-alt: #202634;
 --color-navy: #1d1f27;
 --color-grey-dark: #393e4a;
 --color-grey-card: #3e4550;
 --color-text: #67686e;
 --color-text-dark: #444;
 --color-text-muted: #6c727f;
 --color-link-hover: #707070;
 --color-light-grey: #f7f7f7;
 --color-light-grey-2: #f8f8f8;
 --color-light-grey-3: #f9f9f9;
 --color-light-grey-4: #f1f1f1;
 --color-mid-grey: #d8d8d8;
 --color-border: #dfe2e6;
 --color-border-light: #e0e0e0;
 --color-border-lighter: #e5e5e5;
 --color-border-card: #e6e8e9;
 --color-border-tab: #d3d3d3;
 --color-btn-disabled-bg: #d4d8d8;
 --color-btn-disabled-text: #a0a2a8;
 --color-btn-hover-dark: #535c66;
 --color-btn-hover-light: #d4d4d4;
 --color-dark-theme-secondary-disabled: #bebebe;
 --color-dark-theme-disabled: #d4d8db;
 --color-footer-link: #333333;
 --color-text-link-hover: #1e4639;
 --color-upload-bg: #e4e4e4;
 --color-progress-bg: #eee;
 --color-circle-progress-bg: #e3e3e3;
 --color-notification-red: rgb(236, 51, 49);
 --color-notification-text: rgb(230, 232, 233);
 --color-muted-b4: #b4b6ba;
 --color-white-alpha-60: #fff9;
 --color-tab-green: rgb(0, 103, 80);
 --color-tab-text: rgb(62, 69, 80);
 --color-body-rgb: rgb(68, 68, 68);
 --color-body-rgb-soft: rgb(68, 68, 68, 0.8);
 --color-tab-dark-rgb: rgb(41, 45, 58);
 --color-focus-mint: rgb(110, 230, 210);
 --color-white-rgb: rgb(255, 255, 255);
 --color-hpe-green-rgb: rgb(1, 169, 130);
 --color-lightcyan: LightCyan;
 --color-silver: silver;
 --color-red: red;

 /* Shadows / overlays */
 --shadow-soft: rgba(0, 0, 0, 0.1);
 --shadow-soft-compact: rgba(0,0,0,0.1);
 --shadow-medium: rgba(0, 0, 0, 0.2);
 --shadow-strong: rgba(0, 0, 0, 0.3);
 --shadow-darker: rgba(0, 0, 0, 0.4);
 --shadow-inner-dark: rgba(0, 0, 0, 0.5);
 --shadow-border-dark: rgba(0, 0, 0, 0.36);
 --shadow-border-subtle: rgba(0, 0, 0, 0.125);
 --shadow-upload-hover: rgba(0, 0, 0, 0.04);
 --shadow-float: #00000040;
 --shadow-inset-white: rgba(255, 255, 255, 0.33);
 --overlay-hero-1: rgba(21,39,35,0.92);
 --overlay-hero-2: rgba(21,39,35,0.78);
 --overlay-hero-3: rgba(21,39,35,0.28);
 --overlay-hero-4: rgba(21,39,35,0.05);
 --overlay-hero-5: rgba(1,169,130,1.0);
 --overlay-logo-divider: rgba(255,255,255,0.55);
 --overlay-hero-greenlight: rgba(0,169,130,0.92);


 /* Theme defaults: light */
 --lb-dark: var(--color-dark);
 --lb-green: var(--color-hpe-green);
 --lb-grey: var(--color-light-grey);
 --lb-text: var(--color-black);
 --lb-muted: var(--color-text-muted);
 --lb-border: var(--color-border);
 --lb-row: #f7f8f9;
 --btn-lm-bg-color: var(--color-dark);
 --btn-lm-border-color: var(--color-dark);
 --btn-lm-text-color: var(--color-white);
 --btn-lm-bg-color-hover: var(--color-btn-hover-dark);
 --btn-lm-border-color-hover: var(--color-btn-hover-dark);
 --btn-lm-bg-color-disabled: var(--color-btn-disabled-bg);
 --btn-lm-border-color-disabled: var(--color-btn-disabled-bg);
 --btn-lm-text-color-disabled: var(--color-btn-disabled-text);
 --btn-lm-secondary-text-color: var(--color-dark);
 --btn-lm-secondary-text-color-disabled: var(--color-btn-disabled-text);
 --typo-text-color: var(--color-text);
 --typo-quote-color: var(--color-text-dark);
 --typo-heading-color: var(--color-dark);
 --typo-icons-color: var(--color-black);
 --typo-link-underline-color: var(--color-hpe-green);
 --typo-link-hover-underline-color: var(--color-link-hover);
 --bwc-bg-color: var(--color-navy);
 --cta-lm-color: var(--color-hpe-green-dark);
 --cta-lm-color-disabled: var(--color-btn-disabled-text);
 --cta-lm-color-hover: var(--color-hpe-green-hover);
}

.light-theme, .light-theme-prespecific, .light-theme-specific {
    color-scheme: light;
}

.dark-theme, .dark-theme-prespecific, .dark-theme-specific {
    color-scheme: dark;
    --typo-text-color: var(--color-border-lighter);
    --typo-quote-color: var(--color-white);
    --typo-heading-color: var(--color-white);
    --typo-icons-color: var(--color-white);
    --typo-link-underline-color: var(--color-white-alpha-60);
    --typo-link-hover-underline-color: var(--color-white);
    --btn-lm-bg-color: var(--color-white);
    --btn-lm-border-color: var(--color-white);
    --btn-lm-text-color: var(--color-dark);
    --btn-lm-bg-color-hover: var(--color-btn-hover-light);
    --btn-lm-border-color-hover: var(--color-btn-hover-light);
    --btn-lm-bg-color-disabled: var(--color-btn-disabled-bg);
    --btn-lm-border-color-disabled: var(--color-btn-disabled-bg);
    --btn-lm-text-color-disabled: var(--color-btn-disabled-text);
    --btn-lm-secondary-text-color: var(--color-white);
    --btn-lm-secondary-text-color-disabled: var(--color-dark-theme-secondary-disabled);
    --cta-lm-color: var(--color-hpe-mint);
    --cta-lm-color-disabled: var(--color-dark-theme-disabled);
    --cta-lm-color-hover: var(--color-hpe-green);
    --bwc-bg-color: var(--color-navy);
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.anchor { display: block; position: relative; top: -100px; visibility: hidden; }
.bg-wrapper-component.dark-theme { background-color: var(--bwc-bg-color); }

body, p, h1, h2, h3, h4, h5, h6, ul, li, span, a, strong { font-family: "HPEGraphik"; line-height: 1.5em; }
p, h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; }
body, p, ul, li, .small, label, small, input, select, ::placeholder, .form-select, .nice-select span { color: var(--typo-text-color); }
a, a:focus-visible { outline: none; }
h1, h2, h3, h4, h5, h6 { color: var(--typo-heading-color); }
h1, h2, h3, h4, h5 { padding-bottom: 0; }
h1 { line-height: 1.1em; }

.container_breadcrumb { padding-left: 30px; padding-right: 30px; }
.breadcrumb { font-size:12px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; line-height: normal; }
.breadcrumb span { line-height: normal; }
.breadcrumb a { color: var(--typo-text-color); border-bottom: 1px solid transparent }
.breadcrumb a:hover, .breadcrumb a:active, .breadcrumb a:focus { color: var(--color-hpe-green-hover); border-bottom: 1px solid var(--typo-link-underline-color); transition: color 0.2s, border-color 0.2s, fill 0.2s;  }
.breadcrumb a.active { font-weight:500 }



.container { max-width: 1800px; }

@media (max-width: 991px) {
 .container_breadcrumb { padding-left: 20px; padding-right: 20px; }
}


@media (min-width: 1200px) {
 section .container { padding-top: 4rem; padding-bottom: 4rem }
 .container { padding-left: 100px; padding-right: 100px; }
}

@media (max-width: 1199px) {
 .container { padding-left: 80px; padding-right: 80px; }
}

@media (max-width: 991px) {
 .container { padding-left: 50px; padding-right: 50px; }
}

@media (max-width: 767px) {
 .container { padding-left: 20px; padding-right: 20px; }
}


@media (min-width: 992px) and (max-width: 1199px) {
 section .container { padding-top: 3rem; padding-bottom: 3rem }
 .font_size_48px { font-size: 48px; }
 .font_size_3rem { font-size: 3rem; }
}

@media (max-width: 991px) {
 section .container { padding-top: 2rem; padding-bottom: 2rem }
}


.page-title-banner { position: relative; }
.page-title-banner::before {
 content: ""; position: absolute; width: 100%; height: 100%;
 background: url('../images/bg/dark-bg-gradient-overlay.png');
 background-size: 60%; background-position: bottom right; background-repeat: no-repeat;
}

.page-title-banner .container { position: relative; z-index: 2; }
.condensed { font-family: "HPEGraphikCondensed"; }
.fw-semibold, strong { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-regular { font-weight: normal !important; }
.navy-bg { background: var(--color-navy); }
.blue-bg { background: var(--color-dark); }
.grey-bg { background: var(--color-grey-dark); }
.uc-card-shadow { box-shadow: 0 2px 5px var(--shadow-soft-compact); }
.adaptive-marquee .content { padding: 60px 20px; }



@media screen and (min-width:1200px) {
 .h1, h1 { font-size: calc(1.375rem + 2.3vw); }
}


.typo5 .txto-title { margin-bottom: 15px; }
.typo5 .rich-text-container, .typo5.rich-text-container { 
 color: var(--typo-text-color, inherit); font-weight: 400; line-height: 1.5em; 
}

.typo5 h1.condensed, .typo5 .tag-h1.condensed {
 text-transform: uppercase; letter-spacing: 0.02em;
 --f-base-size: 48px; font-size: 48px; font-weight: 700;
 font-stretch: 75%; line-height: 1em;
}
.typo5 h2, .typo5 .tag-h2 { --f-base-size: 32px; font-size: 32px; font-weight: 500; line-height: 1.1875em; }
.typo5 h3, .typo5 .tag-h3 { --f-base-size: 26px; font-size: 26px; font-weight: 500; line-height: 1.23077em; }
.typo5 h4, .typo5 .tag-h4 { --f-base-size: 20px; font-size: 20px; font-weight: 500; line-height: 1.3em; }
.typo5 h5, .typo5 .tag-h5 { --f-base-size: 16px; font-size: 16px; font-weight: 500; line-height: 1.375em; }

.typo5 .rich-text-container, .typo5.rich-text-container { 
 color: var(--typo-text-color, inherit); --f-base-size: 18px; font-size: 18px; font-weight: 400; line-height: 1.5em; 
}
.typo5 a.link { 
 color: var(--typo-text-color); border-bottom: 1px solid var(--typo-link-underline-color);  
 transition: color 0.2s, border-color 0.2s, fill 0.2s; 
}
.typo5 a.link:hover { border-bottom: 1px solid var(--typo-link-hover-underline-color); }

.typo5 .btn-cta-group a, .typo5 .btn-cta-group a:hover { border-bottom: none; }
.typo5 .rich-text-container:not(.add-spec) ul li:before {
 --bullet-top: calc((1lh - var(--bullet-height)) / 2);
 top: var(--bullet-top, 0);
}
.typo5 .content_detail__pagination a { border: none; }
.typo5 .rich-text-container ul li:before {
 width: var(--bullet-width, 0px); height: var(--bullet-height, 0px);
 background-color: var(--bullet-color, var(--color-hpe-green));
}

.rich-text-container ul li:before {
 width: var(--bullet-width, 0px); height: var(--bullet-height, 0px);
 background-color: var(--bullet-color, var(--color-hpe-green));
}

.px_3rem { padding-left: 3rem; padding-right: 3rem; }
.px_1rem { padding-left: 1rem; padding-right: 1rem; }
.px_pt5rem { padding-left: .5rem; padding-right: .5rem; }
.py_2rem { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py_1rem { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.mb_n_10px { margin-bottom: -10px; }
.font_size_14px { font-size: 14px !important; }
.font_size_16px { font-size: 16px !important; }
.font_size_24px { font-size: 24px !important; }
.big { font-size: 2.5rem; line-height: 1.2em; }
.bg-lightgrey { background-color: var(--color-light-grey); }
.radius-1rem { border-radius: .5rem; }



@media screen and (max-width:767px) {
 .xs_margintop_1rem { margin-top: 1rem !important; }
 .xs_marginbottom_1rem { margin-bottom: 1rem !important; }
 .xs_marginbottom_2rem { margin-bottom: 2rem !important; }
 .page-title-banner::before { background-size: cover; }
}



ol { list-style-type: decimal; }
ul { list-style-type: disc; }
.tx_faq ol li { list-style-type: decimal !important; }


.content-wrapper { z-index: 2; position: relative; }
img.square { aspect-ratio: 1/1; object-fit: cover; }
.sq-img-green-gradient-overlay { position: relative; }
.sq-img-green-gradient-overlay::before {
 content: "";
 background: url('../images/bg/sqimg_green_gradient_overlay.png');
 position: absolute; width: 100%; height: 100%;
 top: 0; left: 0; background-size: contain;
}
.banner-logo img { width: 140px; }

.typo5 .norm-table thead th { font-weight: 500 !important; color: var(--lb-text); text-transform: none; }
.typo5 .norm-table td { color: var(--typo-text-color); font-size: 1.1rem; }
.image-column .masthead_product img { aspect-ratio: 4 / 3; object-fit: cover; }


/*********** MODAL ***********/

.modal { z-index: 9999; }
.modal-header { border-bottom: none; }
.modal-content { border: none; border-radius: 10px; }
.modal.typo5 { padding: 0 !important; }
    .modal.typo5 .modal-body h4 {
        color: var(--color-black);
    }

    .modal.typo5 .tncmodal .modal-header,
    .modal.typo5 .modal-header {
        background: var(--color-white);
    }

    .modal.typo5 .btn-close {
        filter: none;
    }

    .modal.typo5 .modal-header {
        padding: 1rem 1.3rem 0;
    }

    .modal.typo5 .modal-body {
        padding: 1rem 1.3rem 2rem;
        margin: 0.6rem 0.3rem;
    }


/*********** CARD GRIDS ***********/

.dark-theme .image-container.icon { margin-bottom: 20px; }
.image-container img { width: 85%; padding-top: 2rem; padding-bottom: 1rem; object-fit: cover; }
.dark-theme .image-container.icon img { filter: invert(1); height: 35px; width: auto; aspect-ratio: auto; }

.uc-card-wrapper {
 position: relative; display: flex; flex-direction: column;
 width: 100%; height: 100%; overflow: hidden;
}

.uc-card-wrapper > .content { flex-shrink: 0; }
.uc-card-wrapper > .pt-2 { display: flex; flex-direction: column; flex: 1 1 auto; }
.uc-card-wrapper .uc-card-footer { margin-top: auto; padding-top: 0; }

.uc-card-hover-bg {
 position: absolute; inset: 0; opacity: 0;
 background: linear-gradient(
  160deg,
  var(--color-hpe-mint-transparent) 70%,
  var(--color-hpe-mint-overlay) 100%);
 pointer-events: none;
 transition: opacity 0.5s ease;
}

.uc-card-wrapper:hover .uc-card-hover-bg { opacity: 1; }

.card-footer {
 padding: .5rem 1rem;
 background-color: rgba(0, 0, 0, .03);
 border-top: none;
}

/*********** END CARD GRIDS ***********/


.tx_link a { color: var(--color-footer-link); }
.tx_link a:hover, .tx_link a:active, .tx_link a:focus { color: var(--cta-lm-color-hover); }
.tx-darkgreen { color: #006750 !important; }
.tx-green { color: var(--color-hpe-green-dark) !important; }
.tx-purple { color: var(--color-hpe-purple) !important; }
.tx-blue { color: var(--color-hpe-blue) !important; }
.tx-navy { color: var(--color-dark) !important; }
.tx-red { color: var(--color-red) !important; }
.tx-orange { color: var(--color-hpe-orange) !important; }
.tx-yellow { color: var(--color-hpe-yellow) !important; }
.p_1point25rem { padding: 1rem 1.25rem; }
.pl_1rem { padding-left: 1rem; }
.font_size_20px { font-size: 20px; }
.font-weight-500 { font-weight: 500 !important; }
.smallnote { font-size: 12px !important; margin-bottom: 0; }
.smallnote p { font-size: 14px !important; }
.float_contact { position: fixed; bottom: 5%; z-index: 999; right: 2%; }



@media screen and (max-width:991px) {
 .sponsor, .programinfo { text-align: center; }
}


@media screen and (min-width:992px) {
 .programinfo { text-align: right; }
 .bodytx-large { font-size: 22px; }
}


@media (min-width: 1600px) {
 .typo5 .rich-text-container,
 .typo5.rich-text-container,
 .typo5 p, .typo5 ul, .typo5 li { --f-base-size: 20px; font-size: 20px; line-height: 1.5em; }
 .cta.btn-landmark, .cta.btn-landmark:visited { --f-base-size: 20px; font-size: 20px; }
 .typo5 h1.condensed, .typo5 .tag-h1.condensed { --f-base-size: 96px; font-size: 96px; line-height: 1em; }
 .typo5 h2, .typo5 .tag-h2 { --f-base-size: 52px; font-size: 52px; line-height: 1.11539em; }
 .typo5 h3, .typo5 .tag-h3 { --f-base-size: 36px; font-size: 36px; line-height: 1.16667em; }
 .typo5 h4, .typo5 .tag-h4 { --f-base-size: 28px; font-size: 28px; line-height: 1.21429em; }
 .typo5 h5, .typo5 .tag-h5 { --f-base-size: 24px; font-size: 24px; line-height: 1.3em; }
 .typo5 h6, .typo5 .tag-h6 { --f-base-size: 20px; font-size: 20px; line-height: 1.3em; }
 .typo5 .h4_B { --f-base-size: 24px; font-size: 24px; line-height: 1.3em; padding: 1rem 0; }
 .navLR { padding: 0 24px; }
}


@media (min-width: 992px) and (max-width: 1599px) {
 .typo5 h1.condensed, .typo5 .tag-h1.condensed { --f-base-size: 80px; font-size: 80px; line-height: 1em; }
 .typo5 h2, .typo5 .tag-h2 { --f-base-size: 40px; font-size: 40px; line-height: 1.15em; }
 .typo5 h3, .typo5 .tag-h3 { --f-base-size: 32px; font-size: 32px; line-height: 1.1875em; }
 .typo5 h4, .typo5 .tag-h4 { --f-base-size: 24px; font-size: 24px; line-height: 1.25em; }
 body, .typo5 .rich-text-container, .typo5.rich-text-container,
 .typo5 p, .typo5 ul, .typo5 li,
 .hpe-arrow-link.landmark, .typo5 .btn-cta-group a,
 .typo5 h5, .typo5 .tag-h5 { --f-base-size: 18px; font-size: 18px; line-height: 1.44445em; }
 .cta.btn-landmark, .cta.btn-landmark:visited { --f-base-size: 18px; font-size: 18px; }
 #HPE .incentives.table th, #HPE .incentives.table td { font-size: 18px; }
 .typo5 .h4_B { --f-base-size: 20px; font-size: 20px; line-height: 1.3em; padding: 1rem 0; }
}


@media (max-width: 991px) {
 .adaptive-marquee .content { padding: 40px 20px 40px; }
 .typo5 .rich-text-container.tnc-terms { font-size: 17px; }
}

.object_position_0 { object-position: 0%; }
.object_position_100pecent { object-position: 100%; }
.object_position_90pecent { object-position: 90%; }
.object_position_80pecent { object-position: 80%; }

.bg_white { background: var(--color-white)!important; }
.bg_mid_grey { background: var(--color-mid-grey)!important; }
.bg_light_grey { background: var(--color-light-grey)!important; }
.bg_midnight { background-color: var(--color-dark)!important; }

.grey_theme { --bwc-bg-color: var(--color-navy); }
.grey_theme,
.grey_theme_prespecific,
.grey_theme_specific {
 --typo-text-color: var(--color-text);
 --typo-quote-color: var(--color-text-dark);
 --typo-heading-color: var(--color-white);
 --typo-icons-color: var(--color-black);
 --typo-link-underline-color: var(--color-hpe-green);
 --typo-link-hover-underline-color: var(--color-link-hover);
}

.main_text { color: var(--color-dark); }


@media (min-width:1399px) {
 .w_55 { width: 55%; }
}


.card-hover-bg {
 opacity: 0;
 background: linear-gradient(160deg, var(--color-transparent) 70%, var(--color-hpe-mint-overlay) 100%);
 transition: opacity 0.5s linear; position: absolute; inset: 0;
}

.card-wrapper:hover .card-hover-bg { opacity: 1; }

.card_border {
 border: 1px solid var(--color-border-card);
 background-color: var(--color-light-grey-4);
}


/********* RANGE SLIDER ********/

.range-slider.grad {
 --progress-shadow: 2px 2px 4px var(--shadow-medium) inset;
 --progress-flll-shadow: var(--progress-shadow);
 --fill-color: linear-gradient(to right, var(--color-lightcyan), var(--primary-color));
 --thumb-shadow: 0 0 4px var(--shadow-strong),
 -3px 9px 9px var(--shadow-inset-white) inset,
 -1px 3px 2px var(--shadow-inset-white) inset,
 0 0 0 99px var(--primary-color) inset;
}
.range-slider.grad input:hover { --thumb-transform: scale(1.2); }
.range-slider.grad input:active { --thumb-shadow: inherit; --thumb-transform: scale(1); }

.range-slider.flat {
 --thumb-size: 20px;
 --track-height: calc(var(--thumb-size) / 5);
 --progress-shadow: none;
 --progress-flll-shadow: none;
 --thumb-shadow: 0 0 0 9px var(--primary-color) inset,
 0 0 0 99px var(--primary-color) inset;
 --thumb-shadow-hover: 0 0 0 9px var(--primary-color) inset,
 0 0 0 99px var(--primary-color) inset;
 --thumb-shadow-active: 0 0 0 13px var(--primary-color) inset;
}

.range-slider.overlay input:active { --thumb-color: inherit; }
.range-slider.overlay .range-slider__values { width: calc(100% - 50% / (var(--max) - var(--min))); }

.range-slider {
 --primary-color: var(--color-hpe-green-dark);
 --value-offset-y: var(--ticks-gap);
 --value-active-color: var(--color-white);
 --value-background: var(--color-transparent);
 --value-background-hover: var(--primary-color);
 --value-font: 500 14px/1 Metric;
 --fill-color: var(--primary-color);
 --progress-background: var(--color-progress-bg);
 --progress-radius: 30px;
 --track-height: calc(var(--thumb-size) / 2);
 --min-max-font: 10px Metric;
 --min-max-opacity: 0.5;
 --min-max-x-offset: 10%;
 --thumb-size: 22px;
 --thumb-color: var(--color-white);
 --thumb-shadow: 0 0 3px var(--shadow-darker), 0 0 1px var(--shadow-inner-dark) inset,
 0 0 0 99px var(--thumb-color) inset;
 --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset
 var(--thumb-color),
 0 0 0 99px var(--primary-color) inset, 0 0 3px var(--shadow-darker);
 --thumb-shadow-hover: var(--thumb-shadow);
 --ticks-thickness: 1px;
 --ticks-height: 5px;
 --ticks-gap: var(--ticks-height, 0);
 --ticks-color: var(--color-silver);
 --step: 1;
 --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
 --maxTicksAllowed: 30;
 --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
 --x-step: Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
 --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
 --tickIntervalPerc: calc(
  (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
  var(--tickEvery, 1)
 );
 --value-a: Clamp(var(--min), var(--value, 0), var(--max));
 --value-b: var(--value, 0);
 --text-value-a: var(--text-value, "");
 --completed-a: calc(
  (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100
 );
 --completed-b: calc(
  (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100
 );
 --ca: Min(var(--completed-a), var(--completed-b));
 --cb: Max(var(--completed-a), var(--completed-b));
 --thumbs-too-close: Clamp(
  -1,
  1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
  1
 );
 --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));
 --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
 display: inline-block;
 height: max(var(--track-height), var(--thumb-size));
 background: linear-gradient(
  to right,
  var(--ticks-color) var(--ticks-thickness),
  var(--color-transparent) 1px
 )
 repeat-x;
 background-size: var(--tickIntervalPerc) var(--ticks-height);
 background-position-x: calc(
  var(--thumb-size) / 2 - var(--ticks-thickness) / 2
 );
 background-position-y: var(--flip-y, bottom);
 padding-bottom: var(--flip-y, var(--ticks-gap));
 padding-top: calc(var(--flip-y) * var(--ticks-gap));
 position: relative;
 z-index: 1;
}
.range-slider[data-ticks-position="top"] { --flip-y: 1; }
.range-slider::before,
.range-slider::after {
 --offset: calc(var(--thumb-size) / 2);
 content: counter(x);
 display: var(--show-min-max, block);
 font-size: 12px;
 position: absolute;
 bottom: -30px;
 opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
 transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1))
 scale(var(--at-edge));
 pointer-events: none;
}
.range-slider::before {
 --before: 1;
 --at-edge: var(--thumb-close-to-min);
 counter-reset: x var(--min);
 left: var(--offset);
}
.range-slider::after {
 --at-edge: var(--thumb-close-to-max);
 counter-reset: x var(--max);
 right: var(--offset);
}
.range-slider__values {
 position: relative;
 top: 50%;
 line-height: 0;
 text-align: justify;
 width: 100%;
 pointer-events: none;
 margin: 0 auto;
 z-index: 5;
}
.range-slider__values::after {
 content: "";
 width: 100%;
 display: inline-block;
 height: 0;
 background: var(--color-red);
}
.range-slider__progress {
 --start-end: calc(var(--thumb-size) / 2);
 --clip-end: calc(100% - (var(--cb)) * 1%);
 --clip-start: calc(var(--ca) * 1%);
 --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
 position: absolute;
 left: var(--start-end);
 right: var(--start-end);
 top: calc(
  var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 -
  var(--track-height) / 2
 );
 height: calc(var(--track-height));
 background: var(--progress-background, var(--color-progress-bg));
 pointer-events: none;
 z-index: -1;
 border-radius: var(--progress-radius);
}
.range-slider__progress::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 -webkit-clip-path: var(--clip);
 clip-path: var(--clip);
 top: 0;
 bottom: 0;
 background: var(--fill-color, var(--color-black));
 box-shadow: var(--progress-flll-shadow);
 z-index: 1;
 border-radius: inherit;
}
.range-slider__progress::after {
 content: ""; position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 box-shadow: var(--progress-shadow);
 pointer-events: none;
 border-radius: inherit;
}
.range-slider > input {
 -webkit-appearance: none;
 width: 100%;
 height: var(--thumb-size);
 margin: 0;
 position: absolute;
 left: 0;
 border: none;
 cursor: -webkit-grab;
 cursor: grab;
 outline: none;
 background: none;
}
.range-slider > input:not(:only-of-type) { pointer-events: none; }
.range-slider > input::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 height: var(--thumb-size);
 width: var(--thumb-size);
 transform: var(--thumb-transform);
 border-radius: var(--thumb-radius, 50%);
 background: var(--thumb-color);
 box-shadow: var(--thumb-shadow);
 border: none;
 pointer-events: auto;
 -webkit-transition: 0.1s;
 transition: 0.1s;
}
.range-slider > input::-moz-range-thumb {
 -moz-appearance: none;
 appearance: none;
 height: var(--thumb-size);
 width: var(--thumb-size);
 transform: var(--thumb-transform);
 border-radius: var(--thumb-radius, 50%);
 background: var(--thumb-color);
 box-shadow: var(--thumb-shadow);
 border: none;
 pointer-events: auto;
 -moz-transition: 0.1s;
 transition: 0.1s;
}
.range-slider > input::-ms-thumb {
 appearance: none;
 height: var(--thumb-size);
 width: var(--thumb-size);
 transform: var(--thumb-transform);
 border-radius: var(--thumb-radius, 50%);
 background: var(--thumb-color);
 box-shadow: var(--thumb-shadow);
 border: none;
 pointer-events: auto;
 -ms-transition: 0.1s;
 transition: 0.1s;
}
.range-slider > input:hover { --thumb-shadow: var(--thumb-shadow-hover); border: none; }
.range-slider > input:hover + output {
 --value-background: var(--value-background-hover);
 --y-offset: -5px;
 color: var(--value-active-color);
 box-shadow: 0 0 0 3px var(--value-background);
}
.range-slider > input:active { --thumb-shadow: var(--thumb-shadow-active); cursor: -webkit-grabbing; cursor: grabbing; z-index: 2; }
.range-slider > input:active + output { transition: 0s; }
.range-slider > input:nth-of-type(1) {
 --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
}
.range-slider > input:nth-of-type(1) + output { --value: var(--value-a); --x-offset: calc(var(--completed-a) * -1.4%); }
.range-slider > input:nth-of-type(1) + output:not(:only-of-type) { --flip: calc(var(--thumbs-too-close) * -1); }
.range-slider > input:nth-of-type(1) + output::after { content: var(--prefix, "") var(--text-value-a) var(--suffix, ""); }
.range-slider > input:nth-of-type(2) { --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1); }
.range-slider > input:nth-of-type(2) + output { --value: var(--value-b); }
.range-slider > input:only-of-type ~ .range-slider__progress { --clip-start: 0; }

.range-slider > input + output {
 --flip: -1;
 --x-offset: calc(var(--completed-b) * -0.8%);
 --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
 pointer-events: none;
 position: absolute;
 z-index: 5;
 background: var(--value-background);
 border-radius: 10px;
 padding: 0;
 left: var(--pos);
 transform: translate(
  var(--x-offset),
  calc(
   150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) *
   var(--flip)
  )
 );
 transition: all 0.12s ease-out, left 0s;
 color: var(--color-hpe-green-dark);
}
.range-slider > input + output::after { 
 content: var(--prefix, "") var(--text-value-b) var(--suffix, ""); font-size: 12px; padding: 0.5rem; 
}
.range-slider, label[dir="rtl"] .range-slider { width: 100%; min-width: 100%; }

/********* END RANGE SLIDER ********/



.progress-bar.progress-bar-green { background-color: var(--color-hpe-green); }
.progress-bar.progress-bar-lightgreen { background-color: var(--color-hpe-light-green); }
.progress-bar.progress-bar-mintgreen { background-color: var(--color-hpe-mint); }
.progress-bar.progress-bar-lightblue { background-color: var(--color-hpe-light-blue); }
.progress-bar.progress-bar-cyan { background-color: var(--color-hpe-cyan); }
.progress-bar.progress-bar-blue { background-color: var(--color-hpe-blue); }
.progress-bar.progress-bar-darkblue { background-color: var(--color-dark); }
.progress-bar.progress-bar-purple { background-color: var(--color-hpe-purple); }
.progress-bar.progress-bar-orange { background-color: var(--color-hpe-orange); }
.progress-bar.progress-bar-red { background-color: var(--color-hpe-red); }
.progress-bar.progress-bar-yellow { background-color: var(--color-hpe-yellow); }

.d-contents { display: contents; }


/********** CIRCLE PROGRESS BAR **********/

.progress-wrap { position: relative; }
.progress-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }

.progress-bg { fill: none; stroke: var(--color-circle-progress-bg); stroke-width: 16; }

.progress-bar {
 fill: none; stroke: var(--color-hpe-green); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 0 999;
}

.progress-content {
 position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -55%); text-align: center; width: 100%;
}

/********** FLOATING CONTACT ICON **********/

.float_contact a{
 box-shadow: 0 0 13.8px var(--shadow-float);
 width: 56px; height: 56px; border-radius: 50%;
 background: var(--color-white);
 display: flex; align-items: center; justify-content: center;
}
.float_contact  .email-icon {
 background: var(--color-dark);
 mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20%203a3%203%200%200%201%203%203v12a3%203%200%200%201-3%203H4a3%203%200%200%201-3-3V6a3%203%200%200%201%203-3h16Zm-6.46%2011.24a3%203%200%200%201-3.08%200L3%209.77V18a1%201%200%200%200%201%201h16a1%201%200%200%200%201-1V9.77l-7.46%204.47ZM4%205a1%201%200%200%200-1%201v1.43l8.49%205.1a1%201%200%200%200%201.02%200L21%207.43V6a1%201%200%200%200-1-1H4Z%22%20clip-rule%3D%22evenodd%22/%3E%3C/svg%3E');
 mask-size: 100% 100%; width: 24px; height: 24px;
}


.fontsize_38px { font-size: 38px !important; }
.fontsize_58px { font-size: 58px !important; }

.upload-text {
 color: var(--color-tab-dark-rgb); flex: 1; padding-right: 10px;
 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

input[type="file"] { display: none; }

.form-control.form_upload { padding: 5px 12px; } 


/* ================ NOTIFICATION BELL ================ */

.bell_container { position: absolute; align-self: anchor-center; justify-self: end; margin-right: .8rem; }

.circle_bell { 
 background-color: var(--color-white);
 box-shadow: 0 2px 10px var(--shadow-soft);
 border-radius: 50%; padding: 1.25rem; justify-self: flex-end; display: flex;
}
.circle_bell_number { 
 border-radius: 50%; z-index: 13; padding: 8px 10px;
 position: absolute; justify-self: flex-end; display: flex;
 background-color: var(--color-notification-red);
 color: var(--color-notification-text); font-size: 10px; line-height: 1;
}

/* ================ END NOTIFICATION BELL ================ */


/* ================ POST LOGIN CAROUSEL BANNER ================ */

img.masthead_rectangle { aspect-ratio: 4/3; object-fit: cover; object-position: right; }

.hero-slider-wrapper { background: var(--color-black); overflow: hidden; }
.hero-slider { aspect-ratio: 4/1; }
.hero-slide { position: relative; color: var(--color-white); overflow: hidden; aspect-ratio: 4 / 1; }
.hero-slide-bg { position: absolute; inset: 0; background-size: 80%; background-position: center right; }
.slick-slide img, .hero-slide-content img { justify-self: end }

.hero-slide::before {
 content: ""; position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(
  90deg,
  var(--overlay-hero-1) 0%,
  var(--overlay-hero-2) 34%,
  var(--overlay-hero-3) 64%,
  var(--overlay-hero-4) 100%);
}

.hero-slide-content {
 position: relative; z-index: 2; width: 100%;
 display: flex; flex-wrap: wrap; align-items: center;
}
.hero-logos { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.hero-logos img { height: 30px; width: auto; object-fit: contain; }
.logo-divider { width: 1px; height: 42px; background: var(--overlay-logo-divider); }
.hero-slide p { font-size: 20px; line-height: 1.45; max-width: 560px; margin-bottom: 36px; }
.hero-cta-wrap { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-cta {
 display: inline-flex; align-items: center; gap: 12px;
 background: var(--color-white);
 color: var(--color-dark-alt);
 padding: 16px 28px; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.hero-cta-outline { background: var(--color-transparent); color: var(--color-white); border: 2px solid var(--color-white); }
.hero-cta:hover { color: var(--color-dark-alt); }
.hero-cta-outline:hover { background: var(--color-white); color: var(--color-dark-alt); }

.hero-cta .arrow-icon {
 display: inline-block; width: 20px; height: 20px; background: currentColor;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M1.67%2010L18.34%2010M18.34%2010L11.67%2016.67M18.34%2010L11.67%203.33%22%20stroke%3D%22%2301A982%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M1.67%2010L18.34%2010M18.34%2010L11.67%2016.67M18.34%2010L11.67%203.33%22%20stroke%3D%22%2301A982%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
 -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

.hero-slider .slick-dots { bottom: 15px; }
.hero-slider .slick-dots li button:before { color: var(--color-white); opacity: 0.45; font-size: 12px; }
.hero-slider .slick-dots li.slick-active button:before { opacity: 1; }
.welcome-small-info { gap: 20px; }


/* Mobile */

@media (max-width: 991px) {

 .hero-slider .slick-dots { bottom: 0; }
 .hero-slider{ aspect-ratio: auto; }
 .hero-slide {
  min-height: auto; display: flex !important;
  flex-direction: column-reverse; background: var(--color-navy); aspect-ratio: auto;
 }

 .hero-slide-bg {
  position: relative; height: 300px; inset: auto; background-position: center; background-size:cover;
 }

 .hero-slide::before { display: none; }
 .welcome-small-info { flex-wrap: wrap; gap: 12px; }
 .welcome-cta-btn { flex-direction: column; }
}

/* ================ END POST LOGIN CAROUSEL BANNER ================ */


/* ================ SLICK CAROUSEL BUTTONS ================ */
.eg-carousel-arrows { display: flex; gap: 12px; margin-top: 18px; }

.eg-carousel-arrows button {
 width: 40px; height: 40px; border: 0; border-radius: 50%;
 background: var(--color-btn-hover-dark); /* active */
 color: var(--color-white);
 font-size: 14px; transition: all 0.3s ease;
 display: flex; align-items: center; justify-content: center;
}
.eg-carousel-arrows button i {
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: var(--color-white);
}

/* DISABLED STATE */

.eg-carousel-arrows button.disabled { background: var(--color-muted-b4); cursor: not-allowed; opacity: 0.7; }
.article-carousel .slick-track { display: flex !important; }
.article-carousel .slick-slide { height: inherit !important; }
.article-box { height: 100%; display: flex; flex-direction: column; }
.article-box p { flex-grow: 1; }

/* ================ END SLICK CAROUSEL BUTTONS ================ */



.block_img { object-fit: cover; height: 300px; width: 100%; object-position: top; }
.accordion-button,
.accordion-body { padding: 1rem 0; --f-base-size: 20px; font-size: 20px; line-height: 1.5em; }



/************* ACCORDION CUM TABS /*************/

.accordion-tabs .accordion-item {
 border-top: 1px solid var(--color-border)!important; border-bottom:none!important;
}

.accordion-tabs .accordion-button {
 padding: 1rem 0; color: var(--color-dark); background: transparent;
 box-shadow: none; font-size:inherit; font-weight:500;
}

.accordion-tabs .accordion-button:not(.collapsed) { color: var(--color-dark); background: transparent; }
.accordion-tabs .accordion-body { padding: 0 0 1rem; }
.accordion-tabs .accordion-body p { margin-bottom: 1rem; }
.accordion-image-preview img { width: 100%; max-width: 350px; display: block; margin: 0 auto; }
.accordion-mobile-image { display: none; width: 100%; max-width: 400px; margin: 0 auto; }

@media (max-width:991px) {
 .accordion-mobile-image { display: block; max-width: 250px; }
}

/************* END ACCORDION CUM TABS /*************/



.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.75s ease; }
.fade-in.show { opacity: 1; transform: translateY(0); }

.bg_lightgreen { position: relative; overflow: hidden; }

.bg_lightgreen:before {
 content: "";
 position: absolute;
 inset: 0;
 background:
 url('../images/bg/def-green-light.svg')
 top right /
 var(--am-bg-width, 100%) auto
 no-repeat;
 pointer-events: none;
 z-index: 0;
}

.bg_lightgreen > .container { position: relative; z-index: 1; }

.hero-slider2 .slick-dots li button:before { color: #7D8A92; opacity: .5; font-size: 12px; }


/********* MARGIN & PADDING *********/

@media (max-width: 991px) {
 .md_mb_2 { margin-bottom: 2rem }
 .md_mt_2 { margin-top: 2rem }
 .md_p_1 { padding: 1rem; }
 .md_p_2 { padding: 2rem; }
 .md_p_3 { padding: 3rem; }
 .md_p_5 { padding: 5rem; }
 .md_px_1 { padding-left: 1rem; padding-right: 1rem; }
 .md_px_2 { padding-left: 2rem; padding-right: 2rem; }
 .md_px_3 { padding-left: 3rem; padding-right: 3rem; }
 .md_px_20 { padding-left: 20px; padding-right: 20px; }
 .md_px_4rem { padding-left: 4rem; padding-right: 4rem; }
 .md_mb_1rem {margin-bottom: 1.5rem;}
 .mb_2rem5 {margin-bottom: 2.5rem;}
 .md_my_1pt5 { margin: 1.5rem 0 }
 .md_mt_1pt5 { margin-top: 1.5rem }
 .md_mb_1pt5 { margin-bottom: 1.5rem }
 .md_textcenter { text-align: center; }
 .md_pl_pt5rem { padding-left: .5rem; }
 .md_pl_0 { padding-left: 0; }
}

@media (min-width: 992px) {
 .lg_p_1 { padding: 1rem; }
 .lg_p_2 { padding: 2rem; }
 .lg_p_3 { padding: 3rem; }
 .lg_pt_pt5rem { padding-top: .5rem; }
 .lg_px_2rem { padding-left: 2rem; padding-right: 2rem; }
 .lg_px_3pt5rem { padding-left: 3.5rem; padding-right: 3.5rem; }
 .lg_mb_2rem {margin-bottom: 2rem;}
 .lg_my_2 { margin: 2rem 0 }
 .lg_mt_2 { margin-top: 2rem }
 .lg_mb_2rem { margin-bottom: 2rem; }
}

.p_1 { padding: 1rem; }
.p_2 { padding: 2rem; }
.pt20px_p30 { padding: 20px 30px 30px 30px !important; }
.p_30px { padding: 30px !important; }
.pt0_p30px { padding: 0 30px 30px !important; }
.px_30px { padding: 0 30px; }
.m_30px { margin: 30px !important; }
.pb_pt5rem { padding-bottom: .5rem; }

/********* END MARGIN & PADDING *********/


/********** SUB NAVI **********/

@media (max-width: 650px) {
 .subnavi { gap: 20px; }
 .subnavi .subnavi-link::after { bottom: -16px; }
 .subnavi .subnavi-link  { white-space: normal; line-height: 19px; font-size: calc(18px - 2px); }
}

@media (min-width: 651px) and (max-width: 767px) {
 .subnavi { gap: 20px; }
 .subnavi .subnavi-link::after { bottom: -26px; }
 .subnavi .subnavi-link  { white-space: normal; line-height: normal; font-size: calc(18px - 2px); }
}


@media (min-width: 768px) and (max-width: 991px) {
 .subnavi { gap: 30px; }
 .subnavi .subnavi-link::after { bottom: -23px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
 .subnavi .subnavi-link::after { bottom: -24px; }
 .subnavi .subnavi-link { line-height: 22px; }
}

.subnavi .subnavi-link { position: relative; display: inline-block; padding-top: 0; vertical-align: top; text-decoration: none; }


@media  (min-width: 992px) and (max-width: 1199px) {
 .subnavi { gap: 50px; }
 .subnavi .subnavi-item { line-height: 19px; }
}

@media (min-width: 1200px) {
 .subnavi { gap: 60px; }
 .subnavi .subnavi-link::after { bottom: -23px; }
 .subnavi .subnavi-link { position: relative; display: inline-block; padding-top: 0;  white-space: nowrap; vertical-align: top; text-decoration: none; line-height: 24px;}
}
.subnavi { display: flex; align-items: center; justify-content: center; font-weight: 500; list-style: none; margin-bottom:0; }

.subnavi .subnavi-item { display: block; padding: 22px 0; margin: 0; text-align: center;  }
.subnavi { height: 70px; min-height: 70px; }

/********** UNDERLINE **********/

.subnavi .subnavi-link::after {
 content: ""; position: absolute; left: 0; width: 100%;
 height: 4px; transition: width .3s ease; 
}

.subnavi .subnavi-link:hover::after { 
 width: 100%; background-color: #b2b9bd; height: var(--tab-accent-size, 4px) 
}
.subnavi .subnavi-link.active::after { 
 width: 100%; background-color: #05CC93; height: var(--tab-accent-size, 4px) 
}
.subnavi .subnavi-link.active { width: 100%; font-weight: 500; color: #FFFFFF !important;  }

.bg_purple { background-color: var(--color-hpe-purple); }
.bg_cyan { background-color: #62E5F6; color: var(--color-dark); }
.bg_dimgreen { background-color: #D1FFEE; color: var(--color-dark); }

.border_none { border: none; }
.bg_transparent { background:transparent; }

/********** END SUB NAVI **********/


/********** LEFT PANEL ACCORDION **********/

#LEFT_accordion .accordion-button::after { flex-shrink: 0; width: 15px; height: 15px; background-size: auto; }

#LEFT_accordion .accordion-item { background-color: var(--color-white); border: 0; border-radius: 0.25rem; }
#LEFT_accordion .accordion-item .accordion-header { padding: 0; }
#LEFT_accordion .accordion-button:not(.collapsed) {
 color: var(--color-body-rgb); background-color: var(--color-white); box-shadow: none;
}
#LEFT_accordion .accordion-button:not(.collapsed)::after {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233E4550'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
 transform: rotate(-180deg);
}

#LEFT_accordion .accordion-button:focus { box-shadow: none; }
#LEFT_accordion .accordion-flush .accordion-item .accordion-button { border-radius: 0.25rem; }
#LEFT_accordion .accordion-button {
 border: 1px solid var(--color-transparent); padding: 0;
 color: var(--color-body-rgb-soft); font-size: 1rem;
}

#LEFT_accordion .accordion-item:hover, #LEFT_accordion .accordion-item:active { color: var(--color-body-rgb); }
#LEFT_accordion .accordion_body_scroll { min-height: 220px; height: 220px; overflow-y: auto; }
#LEFT_accordion .accordion-body { padding-top: .5rem }
#LEFT_accordion .accordion-body .form-check:last-child { margin-bottom: 0; }
#LEFT_accordion .accordion-body.range_slider { padding: 2rem 1rem 3rem; }

.white_box { background-color: #ffffff; border-radius: 0; padding: 30px; margin-bottom: 1rem; }
#LEFT_accordion h6 { margin-bottom: 8px; font-size: 16px; }

/********** END LEFT PANEL ACCORDION **********/



hr { margin: 3rem 0 !important; flex-shrink: 1 !important; }
hr.insidebox { margin: 2rem 10px !important; flex-shrink: 1 !important; }

.bonuspoint { color: var(--color-hpe-purple) }
.hpe-arrow-link.landmark .arrow2, .hpe-arrow-link.landmark:visited .arrow2 { --cta-lm-icon-size: 16px; }
.bonuspoint_box { padding: 2rem; }



/********** MILESTONE PROGRESS **********/

#milestone .progress {
 display: flex; align-items: center; height: 1.3rem; overflow: hidden; font-size: .9rem;
 background-color: #e9ecef; border-radius: 20rem; position: relative; top: -142%; z-index: 0;
}


#milestone .progress_circle {
 position: relative; z-index: 0; width: 36px; height: 36px;
 border-radius: 50%; top: -1px; background-color: #01A982;
 display: flex; align-items: center; justify-content: center;
}


@media (min-width: 1299px) {
 .navbar-expand-lg .navbar-toggler { display: none; }
}


#milestone .progress_circle_grey { background-color: #e9ecef; }
#milestone .progress_circle_outline { background-color: #fff; border: 2px solid var(--color-hpe-green); z-index: 2; }
#milestone .in-progress-bg { background-color: #01A982; }

#milestone small { font-size: 0.9rem; text-align: center; line-height: 1.2; }

#milestone .progress_scroll {
 width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
 display: block; white-space: nowrap; box-sizing: border-box; justify-items: center;
}

@media (max-width: 991px) {
 #milestone .progress_width { width: 700px; margin: 0 auto; }
}

@media (min-width: 992px) {
 #milestone .progress_width { width: 90%; }
}

.main_condensed { font-size: 6rem; color: var(--color-dark); margin-bottom: 0; text-transform: uppercase; line-height: 1; }

/********** END MILESTONE PROGRESS **********/



/********** ARTICLE CAROUSEL **********/

.article-carousel .slick-list { overflow: visible; }
.article-carousel { position: relative; margin-left: -30px; }
.article-carousel .slick-list { overflow: visible; }

.article-carousel .slick-track { display: flex !important; align-items: stretch; }

.article-carousel .slick-slide {
 display: flex !important;
 height: auto !important;
 margin: 0 12px;
 box-sizing: border-box;
 opacity: 0.35;
 transition: opacity 0.4s ease;
}

.article-carousel .slick-track { margin-left: 15px; }

.article-carousel .slick-slide.slick-active { opacity: 1; }
.article-carousel .slick-slide > div { display: flex; width: 100%; }
.article-carousel .uc-card-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #f3f3f3;}
.article-carousel .uc-card-wrapper > .p-5 { display: flex; flex-direction: column; flex: 1 1 auto; }
.article-carousel .uc-card-footer { margin-top: auto; }

.image-container.dashboard { justify-content: center; display: flex; }
.image-container { justify-content: center; display: flex; }
.image-container img { width: 100%; object-fit: contain; object-position: center center; }
.image-container .illustration img { width: 50%; object-fit: contain; object-position: center; }

/********** END ARTICLE CAROUSEL **********/



.tickstatus span { padding-left: 1rem; font-size: 14px; }
.statuscompleted { filter: invert(48%) sepia(57%) saturate(2932%) hue-rotate(134deg) brightness(90%) contrast(99%); }
.statusgrey { filter: invert(55%) sepia(4%) saturate(302%) hue-rotate(163deg) bri ghtness(92%) contrast(92%); }

#training .content img, .badge.content img { width: 130px }
#training p { font-size: 16px; }
#training .hpe-arrow-link.landmark, #training .hpe-arrow-link.landmark:visited { font-size: 16px; }
#training .hpe-arrow-link.landmark .arrow, #training .hpe-arrow-link.landmark:visited .arrow { --cta-lm-icon-size: 16px; }

.text_green_dark {
 font-size: inherit;
 line-height: inherit;
 color: rgb(0, 103, 80);
 font-weight: 500;
 text-decoration: underline;
 cursor: pointer;
}

.text_green_dark:hover { color: rgb(62, 69, 80); }

.tooltip-inner {
 max-width: 450px;
 padding: .5rem;
 color: #fff;
 text-align: center;
 background-color: #000;
 border-radius: .25rem;
}

.min_contentheight { min-height: 57vh; }

.w-85 { width:86% }

#inventory .skubg-green { height: 18px; width: 18px; border-radius: 50%; background-color: #00B050; }
#inventory .skubg-orange { height: 18px; width: 18px; border-radius: 50%; background-color: #ffc000; }
#inventory .skubg-red { height: 18px; width: 18px; border-radius: 50%; background-color: #9d9d9d; }

#inventory .skubg-green2 { height: 20px; background-color: #00B050; width: 20px; border-radius: 50%; display: inline-block; }
#inventory .skubg-orange2 { height: 20px; background-color: #ffc000; width: 20px;border-radius: 50%; display: inline-block; }
#inventory .skubg-red2 { height: 20px; background-color: #9d9d9d; width: 20px;border-radius: 50%; display: inline-block; }

ul.check_list { padding-left: 5px; }
ul.check_list > li::before { font-family: 'hpe-icons' !important; display: table-cell; content: "\ecac"; color: var(--color-hpe-green); padding-right: 0.75em; }
ul.check_list > li { display: flex; padding-bottom: 1rem }
ul.check_list > li > span { display: contents; }


/********** TABS **********/

#tabnav .tab-content { padding: 2rem 0; }

#tabnav .nav-link {
 position: relative; --f-base-size: 20px;
 font-size: 20px;
 line-height: 1.5em;
 display: block;
 height: 60px;
 padding: 0.8rem 0;
 margin: 0 !important;
 background-color: transparent;
 border: 0;
 border-radius: 0;
 font-weight: 500;
 text-decoration: none;
 transition: color 0.15s ease-in-out;
 padding: var(--tab-padding, 16px 0);
 color: var(--tab-text-color);
}

/* Underline */
#tabnav .nav-link::after {
 width: 100%;
 height: var(--tab-accent-size, 2px);
 content: "";
 background-color: transparent;
 transition: background-color .1s ease-in-out;
 position: absolute;
 bottom: 0;
 left: 0;
}

/* Hover / Focus - animate 0% → 100% */
#tabnav .nav-link:hover::after, #tabnav .nav-link:focus::after { background-color: #b2b9bd; height: var(--tab-accent-size, 4px); color: var(--tab-text-color); }
#tabnav .nav-link.active::after { background-color: #05CC93; height: var(--tab-accent-size, 4px); color: var(--tab-text-color-active); }
.nav-tabs .nav-link.active { color: #000 !important; background-color: #05CC93; height: var(--tab-accent-size, 4px); }

/********** TAB CONTENT **********/

.tab-content { position: relative; }

.tab_body {
 position: relative;
 width: 100%;
 padding: 1rem 0;
 display: none;
 animation: fadein 0.8s;
}

.tab_body.active { display: block; }

/*accordion*/
#tabnav .accordion-button,
#tabnav .accordion-button:not(.collapsed) {
 color: var(--color-black);
 font-weight: 500;
 --f-base-size: 20px;
 font-size: 20px;
 line-height: 1.5em;
 background-color: var(--color-transparent);
 box-shadow: none;
 outline: none;
}
#tabnav .accordion-item h2.accordion-header,
#tabnav h4 { padding-bottom: 0; margin-bottom: 0; }
#tabnav .accordion-item { border: none; background-color: var(--color-transparent); }
#tabnav .tab_body .accordion-button::after { position: absolute; top: 20px; right: 20px; }
#tabnav .accordion-button:not(.collapsed)::after{
 background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#tabnav .accordion-button:focus { outline: none; box-shadow: none; }

.border_top { border-top: 1px solid var(--color-border-lighter); margin: 1rem 0; }

/********** TABNAV STICKY **********/

#tabnav #myTab { background-color: #fff; }

#tabnav #myTab.is-sticky {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 9998;
 background-color: #fff;
 margin: 0;
}

/* Keep same container alignment when sticky */

@media (min-width:1200px) {
 #tabnav .nav-tabs { gap: 0 60px; justify-content: center; }
}
@media (max-width:1199px) {
 #tabnav .nav-tabs { gap: 0 40px; justify-content: center; }
 #tabnav #myTab.is-sticky { gap: 60px; }
 #tabnav .nav-item { padding: 0 0; }
}
@media (max-width:991px) {
 #tabnav #myTab.is-sticky { gap: 40px; }
}
@media (max-width:767px) {
 #tabnav #myTab.is-sticky { gap: 20px; }
}

/********** END TABNAV STICKY **********/

/********** END TABS **********/