@font-face{font-family:"Metric";font-weight:200;font-style:normal;src:url("../fonts/Metric-Light.woff2") format("woff2"),url("../fonts/Metric-Light.woff") format("woff");}
@font-face{font-family:"Metric";font-weight:400;font-style:normal;src:url("../fonts/Metric-Regular.woff2") format("woff2"),url("../fonts/Metric-Regular.woff") format("woff");}
@font-face{font-family:"Metric";font-weight:500;font-style:normal;src:url("../fonts/Metric-Medium.woff2") format("woff2"),url("../fonts/Metric-Medium.woff") format("woff");}
@font-face{font-family:"Metric";font-weight:600;font-style:normal;src:url("../fonts/Metric-Semibold.woff2") format("woff2"),url("../fonts/Metric-Semibold.woff") format("woff");}
@font-face{font-family:"Metric";font-weight:700;font-style:normal;src:url("../fonts/Metric-Black.woff2") format("woff2"),url("../fonts/Metric-Black.woff") format("woff");}


body {font-family: 'Metric'; font-size: calc(1rem + .45vmin); font-weight: 400; color: rgb(68, 68, 68); line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff !important; }
body p:last-child { padding-bottom: 0; margin-bottom: 0; }
body { word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }


.mastspace { margin-top: 58px; }


/* HEADER */

@media (min-width: 992px) {
 h1 { font-size: 53px; }
 h2 { font-size: 40px; }
 h3 { font-size: 32px; }
 h2.gradient-block-title { font-size: 32px; text-align: left; padding-bottom: 0; }
 .gradient-block.desc { font-size: 22px; }
 .bodytx-large { font-size: 22px; }
 h2.black-title-center { text-align: center; padding-bottom: 2rem; font-size: 40px; }
}

h1, h2, h3, h4, h5 { line-height: 1.11320755em; font-weight: 400; letter-spacing: 0.01em; padding-bottom: 1rem; text-transform: inherit; }
small { color: #7f7d7d; line-height: 1.2; }

.headerunderline { 
 position: absolute;
 display: block;
 width: 65px;
 height: 3px;
 background-color: #01A982;
 margin-top: .8rem; 
}

.headertitlespace { margin-bottom: 3rem;color: #ffffff; }

.tx-green { color: #01A982 !important; }
.tx-white { color: #ffffff; }
.tx-black { color: #000000; }
.tx-magenta { color: #C140FF !important; }

section.margin-bottom-4rem { margin-bottom: 4rem; }

.border_top { border-top: 1px solid #E5E5E5; margin: 1rem 1.25rem; }
.bordertop { border-top: 1px solid #dee2e6 }
.borderbottom { border-bottom: 3px solid #dee2e6 }
.bordrtop_green { background-color: #01A982; height: 1px; margin-bottom: 1rem; }

.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-inherit { font-size: inherit; }

.paddingLeft-0 { padding-left: 0; }
.paddingRight-0 { padding-right: 0; }
.pad-2rem { padding: 2rem; }
.pad-3rem { padding: 3rem; }
.pad-2point5rem { padding: 2.5rem; }

.margintop-0 { margin-top: 0 !important; }
.m-bottom-1-5rem { margin-bottom: 1.5rem; }
.margin-left-point5 { margin-left: .5rem; }
.margin-right-point5 { margin-right: .5rem; }
.margintb-1 { margin: 1rem 0; }
.margintb-half { margin: .5rem 0; }

.radius-30px { border-radius: 30px; }
.radius-1rem { border-radius: 1rem; }
.extraseparator { height: 35px; }

.magentatx { color: #C140FF !important; }
.notetx { font-size: 1rem; }

a, a:hover { text-decoration: none; cursor: pointer; color: inherit;  }

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

@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 }
}

section .container.padding-topbottom-0 { padding-top: 0 !important; padding-bottom: 0 !important }

@media (min-width: 1200px) {
 .masthead-brief { margin-top: calc(30px - 0.31462em); font-size: 26px; line-height: 1.26923077em; }
}

/* END HEADER */


/* BACKGROUND COLOR */

.HPE_lightpurple { background-color: #C140FF; }
.bg-green { background-color: #01A982; }
.bg-greymenu { background-color: #eeeeee; }
.bg-grey { background-color: #F2F2F2; }
.bg-lightgrey { background-color: #f8f8f8; }
.bg-mediumgrey { background-color: #e4e4e4; }
.block-grey { background-color: #F1F1F1; }
.bgwhite { background-color: #ffffff; }
.HPE_purple { background-color: #6F37ED; }

/* END BACKGROUND COLOR */


/* GRADIENT */

.gradient_bluemargentayellow { background: linear-gradient(45deg, #fec901, #af42f0, #0d5265); }
.gradient_purpleblue { background: linear-gradient(45deg, #d221ff, #00dec8); }
.gradient_purplemargentayellow { background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3); }
.gradient_purpleblueyellow { background: linear-gradient(45deg, #8219f3, #00dec8, #ffc800); }
.gradient_orangeyellow { background: linear-gradient(45deg, #ffd300, #ff6300); }
.gradient_greenyellow { background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970) }
.gradient_magentagreenyellow { background: linear-gradient(225deg, #eb3474, #b56cad, #01c294 40%, #fec901) }
.gradient_magentapurplegreen { background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6) }
.gradient_orangepurple { background: linear-gradient(270deg, #7B2DFF 0%, #AA3EFF 47%, #FE5C01 100%); }
.gradient_purplebluegreen { background: linear-gradient(-45deg, #6439e4, #3158c1, #6cc56c); }
.gradient_purplebluegreen2 { background: linear-gradient(35deg, #4009e5, #3158c1, #6cc5c0); }
.gradient_purplebluegreen3 { background: linear-gradient(135deg, #2551c7, #6439e4); }
.gradient_bluepurple { background: linear-gradient(55deg, #6439e4, #5e35da); }


.gradient_back img { margin: 1.35rem; }
.gradient_back_purpleblue { content: ''; z-index: -1; background: linear-gradient(45deg, #d221ff, #00dec8); width: 230px; }
.gradient_back_bluemargentayellow { content: ''; z-index: -1; background: linear-gradient(45deg, #fec901, #af42f0, #0d5265); width: 230px; }
.gradient_back_purpleblueyellow { content: ''; z-index: -1; background: linear-gradient(45deg, #ffc800, #00dec8, #8219f3); width: 230px; }
.gradient_back_purplemargentayellow { content: ''; z-index: -1; background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3); width: 230px; }
.gradient_back_orangeyellow { content: ''; z-index: -1; background: linear-gradient(45deg, #ffd300, #ff6300); width: 230px; }
.gradient_back_greenyellow { content: ''; z-index: -1; background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970); width: 230px; }
.gradient_back_magentagreenyellow { content: ''; z-index: -1; background: linear-gradient(225deg, #eb3474, #b56cad, #01c294 40%, #fec901); width: 230px; }
.gradient_back_magentapurplegreen { content: ''; z-index: -1; background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6); width: 230px; }

.greycurve_bg {
 background-image: url('../images/stockimages/GettyImages-1304863046_1600_0_72_RGB.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

.greycurve_bg2 {
 background: url('../images/stockimages/greycurve_2.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

.tx_purplemagentayellow {
 content: '';
 background-image: linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.tx_purpleblue {
 content: '';
 background-image: linear-gradient(45deg, #d221ff, #00dec8);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.tx_purpleblueyellow { 
 background: linear-gradient(45deg, #8219f3, #00dec8, #ffc800);
 content: '';
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}

.tx_orangepurple { 
 background: linear-gradient(270deg, #7B2DFF 0%, #AA3EFF 47%, #FE5C01 100%);
 content: ''; margin-bottom: ;
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}

/* END GRADIENT */

.gradient-stockimage, .membercard { grid-area: overflow-content; position: relative; margin-bottom: 2rem; }

@media screen and (max-width: 767px) {
 .membercard img { width: calc(100% - 30px) }
 .gradient-stockimage img { width: calc(100% - 30px); object-fit: cover; height: 300px; object-position: top; }

 .gradient-stockimage_bluemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(45deg, #fec901, #af42f0, #0d5265); 
  height: 100%;
 }

 .gradient-stockimage_orangeyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(45deg, #ffd300, #ff6300);
  height: 100%;
 }
 .gradient-stockimage_purplemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblue2::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 10.5%);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
 .gradient-stockimage_purpleblueyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(45deg, #ffc800, #00dec8, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblue::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
 .gradient-stockimage_greenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970);
  height: 100%;
 }
 .gradient-stockimage_magentagreenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(225deg, #eb3474, #b56cad, #01c294 40%, #fec901);
  height: 100%;
 }
 .gradient-stockimage_magentapurplegreen::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6);
  height: 100%;
 }
 .gradient-stockimage_orangepurple::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(100% - 12.5%);
  background: linear-gradient(270deg, #7B2DFF 0%, #AA3EFF 47%, #FE5C01 100%);
  height: 100%;
 }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
 .gradient-stockimage img { width: calc(100% - 48px); object-fit: cover; height: 350px; object-position: 0% 30%; object-position: top; }
 .gradient-stockimage img.hauto { width: calc(100% - 48px); object-fit: cover; height: 190px !important; object-position: 0% 30%; object-position: top; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
 .gradient-stockimage img { width: calc(100% - 50px); object-fit: cover; height: 245px; object-position: top; }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
 .membercard img { width: calc(100% - 50px);  }

 .gradient-stockimage_bluemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  height: 100%;
  background: linear-gradient(45deg, #fec901, #af42f0, #0d5265); 
 }

 .gradient-stockimage_orangeyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(45deg, #ffd300, #ff6300);
  height: 100%;
 }
 .gradient-stockimage_purplemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblue2::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(95.5% - 50px);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
 .gradient-stockimage_purpleblueyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(45deg, #ffc800, #00dec8, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblue::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
 .gradient-stockimage_greenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970);
  height: 100%;
 }
 .gradient-stockimage_magentagreenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(225deg, #eb3474, #b56cad, #01c294 40%, #fec901);
  height: 100%;
 }
 .gradient-stockimage_magentapurplegreen::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6);
  height: 100%;
 }
 .gradient-stockimage_orangepurple::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%;
  bottom: -10%;
  width: calc(92.5% - 50px);
  background: linear-gradient(270deg, #7B2DFF 0%, #AA3EFF 47%, #FE5C01 100%);
  height: 100%;
 }
}

@media screen and (min-width: 1200px) {
 .membercard img { width: calc(100% - 56px); }
 .gradient-stockimage img { width: calc(100% - 56px); object-fit: cover; height: 300px; object-position: top; }

 .gradient-stockimage_bluemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  height: 100%;
  background: linear-gradient(45deg, #fec901, #af42f0, #0d5265); 
 }

 .gradient-stockimage_orangeyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(45deg, #ffd300, #ff6300);
  height: 100%;
 }
 .gradient-stockimage_purplemargentayellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblueyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(45deg, #ffc800, #00dec8, #8219f3);
  height: 100%;
 }
 .gradient-stockimage_purpleblue::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
 .gradient-stockimage_greenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970);
  height: 100%;
 }
 .gradient-stockimage_magentagreenyellow::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(225deg, #eb3474, #b56cad, #01c294 40%, #fec901);
  height: 100%;
 }
 .gradient-stockimage_magentapurplegreen::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6);
  height: 100%;
 }
 .gradient-stockimage_orangepurple::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(95% - 56px);
  background: linear-gradient(270deg, #7B2DFF 0%, #AA3EFF 47%, #FE5C01 100%);
  height: 100%;
 }

 .gradient-stockimage_purpleblue2::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -9.5%;
  width: calc(97% - 56px);
  background: linear-gradient(45deg, #d221ff, #00dec8);
  height: 100%;
 }
}

/* FOOTER */
#sponsored-logo { background: #fff; text-align: center; }
#sponsored-logo img { margin: 0 0.5em; }
#sponsored-logo .row_01 img { width: 7em; }
#sponsored-logo .row_02 img { width: 7.5em; margin-bottom: 0.7em; }
#sponsored-logo .row_03 img { width: 5em; }
/* END FOOTER */


/*----- Floating Contact Button -----*/
.float_contact { position: fixed; bottom: 5%; z-index: 999; right: 2%; }
/*----- End of Floating Contact Button -----*/



/* ================ GLOBAL LANDING ================ */

.home_header {
 background: url("../images/stockimages/hpe_intro_bg.png");
 background-position: center top;
 background-size: cover;
 padding: 6em 0 4em;
 color: #fff;
}
.home_header p { font-size: 24px; }
.home_login { background: #000000; padding: 4em 0 3em; color: #fff; position: relative; font-size: 18px; }
.globe_vid { position: absolute; bottom: 0; right: 2em; display: grid; }
.globe_vid video { width: auto; float: right; }
.video_overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 20%); }
/* .video_content, .video_overlay { grid-area: 1 / 1; } */

.bringtofront { z-index: 1; }

@media screen and (max-width: 768px) and (max-device-width: 768px) {
 .globe_vid { width: 100%; right: 2px !important; }
 .globe_vid video { width: 100% !important; }
}

h1.home-block-title, h2.home-block-title { text-transform: none; margin-bottom: .5rem }
.home-block h2 { text-transform: none; margin: 1.5rem 0 0.5rem; font-weight: 600; }
.home-block { background: #F1F1F1; border: 0; }
.home-block-body { padding: 1.5em 1.5em 0 1.5em ; border: 0; background: transparent; }
.home-block-btn { padding: 1.5em; border: 0; background: transparent; }
.home-block-body p {
 margin: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 font-weight: 400;
}

.home-block-green { background: #01A982; border-radius: 30px; color: #ffffff; }

@media screen and (max-width: 767px) {
 .card-body.tbspace { padding-top: 3rem; padding-bottom: 3rem; }
 .tbspace2 { padding-top: 1rem; padding-bottom: 1rem; }
}

@media screen and (min-width: 768px) {
 .tbspace2 { padding-top: 3rem; padding-bottom: 3rem; }
}


/* FLIPING CARD */

#globalland .flip-card {
 background-color: transparent;
 width: 100%; border-radius: 1rem;
 overflow: hidden;
 margin: 0; 
}
#globalland .flip-card-inner, #carouselflip .flip-card {
 position: relative;
 text-align: center;
 min-height: 340px;
 transition: transform .9s;
 transform-style: preserve-3d;
}

#globalland .flip-card-inner .flip-card-front img { width: 70%; }

#globalland .flip-card:hover .flip-card-inner, #carouselflip .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

#globalland .flip-card-front, #globalland .flip-card-back, #carouselflip .flip-card-front, #carouselflip .flip-card-back {
 position: absolute; border-radius: 1rem;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
#globalland .flip-card-front { background-color: #ffffff; padding: 4rem 3rem 3rem; font-size: 1rem; }

#globalland .flip-card-front, #globalland .flip-card-front img {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}
#globalland .flip-card-back {
 background-color: #000000;
 color: #fff; 
 transform: rotateY(180deg);
}
#globalland .flip-card-back .flip-card-back-inner {
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 100%; padding: 2rem;
}
#globalland .flip-card-back .flip-card-back-inner p, #carouselflip .flip-card-back .flip-card-back-inner p {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 6;
 -webkit-box-orient: vertical;
}

#carouselflip .flip-card-inner .flip-card-front img, #incentive .flip-card-inner .flip-card-front img { width: 100%; height: 100%;object-fit: cover; }

#carouselflip .flip-card-back { color: #fff; transform: rotateY(180deg); }
#carouselflip .flip-card-back-odd { background-color: #f6f6f6; color: rgb(68, 68, 68);  height: 100%; }
#carouselflip .flip-card-back-even { background-color: #333333; color: #fff; height: 100%;  }
#carouselflip .flip-card-back .flip-card-back-inner { padding: 2rem; }

@media screen and (min-width: 1200px) {
 #carouselflip .flip-card-back-inner p { font-size: 16px; }
}

#carouselflip .flip-card {
 background-color: transparent;
 height: 300px;
 width: 100%;
 overflow: hidden;
}
#carouselflip .flip-card-inner {
 position: relative;
 text-align: center;
 height: 300px;
 transition: transform 0.6s;
 transform-style: preserve-3d;
}
#carouselflip .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

#flipcarousel .carousel-control-prev-icon { background-image: url('../images/icon/icon_caret_left.svg') }
#flipcarousel .carousel-control-next-icon { background-image: url('../images/icon/icon_caret_right.svg') }
#flipcarousel  .carousel-indicators {
 position: absolute;
 right: 0;
 bottom: -45px;
 left: 0;
 z-index: 2;
 display: flex;
 justify-content: center;
 margin-right: 15%;
 margin-bottom: 1rem;
 margin-left: 15%;
 list-style: none;
}

#flipcarousel .carousel-indicators .active {
 opacity: 1;
 border: 1px solid rgba(0, 0, 0, .5);
 background-color: rgba(255, 255, 255, 1.0) !important;
}

#flipcarousel .carousel-indicators [data-bs-target] {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: rgba(0, 0, 0, .25) !important;
 border: 1px solid rgba(0, 0, 0, .5);
 margin-right: 4px;
 margin-left: 4px;
}

#globalland .flip-card-back .flip-card-back-inner table { text-align: center; }
#globalland .flip-card-back .flip-card-back-inner table tr td:first-child { width: 60%; }

/* END FLIPING CARD */

/* ================ END GLOBAL LANDING ================ */


/* ================ HOME ================ */

.member-bg { height: auto; background-repeat: no-repeat !important; background-size: cover !important; }
.blackoverlay { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5) !important; }

#membersection h5  { font-weight: 400; }
#membersection h2, #membersection h4, #membersection h5 { padding-bottom: 0; margin-bottom: 0; }

#membersection .accordion-item { background-color: transparent; border: 0; }
#membersection .accordion-button { background-color: transparent; padding: 0; outline: none; box-shadow: none; }
#membersection .accordion-button::after { filter: invert(48%) sepia(57%) saturate(2932%) hue-rotate(134deg) brightness(90%) contrast(99%); }

#membersection .accordion-body { padding: 1rem 0 !important; font-size: 1rem; }

#membersection .accordion-button:not(.collapsed) {
 color: #0c63e4;
 background-color: transparent;
 box-shadow: inset 0 -1px 0 rgba(255,255,255,.125);
}

.smallnote { font-size: 14px !important; margin-bottom: 0; font-weight: 300; }
#membersection .accordion { margin: 1rem 0; }
#membersection .col-line { border-right: 1px solid rgba(255,255,255,.35); }

.card { border-radius: 1rem; }
.card.card-block { 
 background: #ffffff; border: 0; 
 box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);
 -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);
 -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);  
}

.whiteoverlay { box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.7) !important; }

#membersection figure { margin: 0; }
#membersection .blockquote-footer { margin-bottom: 0; font-size: .75em; color: #ffffff; margin-top: 1rem; }

@media screen and (max-width: 991px) {
 #membersection .container { padding: 2rem; color: #ffffff; }
 #membersection .col-line-last { border-right: 0; }
 .cardshadow { padding: 0; }
}

@media screen and (min-width: 992px) {
 #membersection .container { padding-top: 4rem; padding-bottom: 4rem; color: #ffffff; }
 #membersection .col-line-last { border-right: 1px solid rgba(255,255,255,.35); }
 .cardshadow { 
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0..07);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);
  padding: 3rem; border-radius: 1rem; 
 }
}


/* MASTHEAD CAROUSEL SLIDER */

.carousel-inner > .item {
 position: relative;
 display: none;
 -webkit-transition: 3s ease-in-out left;
 -moz-transition: 3s ease-in-out left;
 -o-transition: 3s ease-in-out left;
 transition: 3s ease-in-out left;
 transition-duration: 3s;
}

.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 1px solid transparent; margin-right: 4px; margin-left: 4px; }
.carousel-indicators li { background-color: #df064c; }
.carousel-control-next-icon, .carousel-control-prev-icon { width: 3rem; height: 3rem; }
.carousel-container-tx { height: 540px; margin-top: 10px; position: relative; }
.carousel-indicators .active { opacity: 1; border: 1px solid #fff!important; background-color: rgba(255, 255, 255, .5) !important; }


@media screen and (max-width: 991px) {
 .carousel-container-tx { height: auto; margin-top: 10px; position: relative; }
 .carousel-caption { text-align: left; right: 10%; left: 10%; bottom: 10%; }
 .carousel-control-next, .carousel-control-prev { width: 5%; bottom: 20%; top: auto; }
 .mastoverlay { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; }
 .fluid-bg { height: 460px; background-repeat: no-repeat !important; background-size: cover !important; }
}


@media screen and (min-width: 992px) {
 .carousel-caption { text-align: left; right: 0; left: 0; top: 0; }
 .carousel-control-next, .carousel-control-prev { width: 5%; top: 0;}
 .fluid-bg { height: 460px; background-repeat: no-repeat !important; background-size: cover !important; }
} 


/* END MASTHEAD CAROUSEL SLIDER */


/* ================ MY ACTIVITIES ================ */

#myactivities .container { padding: 4rem; }

@media screen and (max-width: 991px) {
 .activities-bg { height: 210px; background-repeat: no-repeat !important; background-size: cover !important; display: flex; align-items: center; text-align: center; }
}

@media screen and (min-width: 992px) {
 .activities-bg { height: 250px; background-repeat: no-repeat !important; background-size: cover !important; display: flex; align-items: center; text-align: center; }
}

.card.card-gradient { border: 0; color: #ffffff; padding: 2.5rem; border-radius: 1rem; }

@media screen and (min-width: 992px) and (max-width: 1199px) {
 .card.card-gradient { border: 0; color: #ffffff; padding: 2rem;  }
}

.card-gradient-btn { padding: 0; }
.card-gradient-body { padding: 0 0; }
.card-gradient-body .card-title { margin-bottom: 0; padding-bottom: 0; }

/* ================ END MY ACTIVITIES ================ */

/* ================ TAB ================ */

@media screen and (max-width: 991px) {
 #tabnav .nav-tabs-borderbottom991 { height: 1px; width: auto; position: absolute; background-color: #d3d3d3; top: 67px; }
 #proliantserver #tabnav .nav-justified .nav-item, #proliantserver #tabnav .nav-justified>.nav-link { flex-basis: auto; width: 100%; }
}

@media screen and (min-width: 992px) {
 #proliantserver #tabnav .nav-justified .nav-item, #proliantserver #tabnav .nav-justified>.nav-link { flex-basis: auto; }
}

#tabnav .nav-tabs-borderbottom { height: 1px; width: 100%; background-color: #d3d3d3;  }
#tabnav .nav-tabs .nav-link { border: 3px solid transparent; border-top-left-radius: 0; border-top-right-radius: 0; border-style: none; border-bottom: 3px solid transparent; }

#tabnav .nav-tabs .nav-link:hover {
 color: rgb(68, 68, 68);
 border-color: transparent; 
 border-radius: 0; font-weight: 500;
 border-bottom: 4px solid #ebebeb;
}

#tabnav .nav-tabs .nav-link:focus, #tabnav .nav-tabs .nav-link.active {
 color: rgb(68, 68, 68);
 border-color: transparent; 
 border-radius: 0; font-weight: 500;
 border-bottom: 4px solid #01A982;
}

#tabnav .nav-link {
 display: block;
 padding: .8rem 1.5rem;
 margin: 0 !important;
 color: rgb(68, 68, 68);
 text-decoration: none;
 transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .05s ease-in-out;
}

#tabnav .nav-tabs { border-bottom: 0; }
#tabnav .nav-tabs .nav-link { margin-bottom: 0; }
#tabnav .tab-content { padding: 2rem 0; }

#proliantserver #tabnav .nav-tabs .nav-link:hover, #proliantserver #tabnav .nav-tabs .nav-link:focus, #proliantserver #tabnav .nav-tabs .nav-link.active {
 font-weight: normal; }

/* ================ END TAB ================ */


/* ================ INCENTIVE ================ */

#incentive .accordion-button { 
 padding: 0; outline: #01A982; box-shadow: none; font-size: 18px; padding: 5px 10px; 
}
.accordion-button::after { filter: invert(48%) sepia(57%) saturate(2932%) hue-rotate(134deg) brightness(90%) contrast(99%); }
#incentive .accordion-button:not(.collapsed) { 
 color: rgb(68, 68, 68); padding: 5px 10px; 
 box-shadow: rgb(255, 255, 255) 0px 0px 2px 1px, rgb(1, 169, 130) 0px 0px 4px 1px;
 border-radius: 6px; background-color: transparent; 
}

#incentive .accordion-button:not(.collapsed)::after 
{ filter: invert(48%) sepia(57%) saturate(2932%) hue-rotate(134deg) brightness(90%) contrast(99%) }
#incentive .accordion-body { padding: .5rem; margin-bottom: 1.5rem }
#incentive h6 { font-weight: 500; }
#incentive .accordion-item { background-color: #fff; border: 0; }


@media screen and (min-width: 992px) {
 .accordion-expandtx { font-size: 16px; }
 .card-text { font-size: 18px; }
}


#incentive .card { border-radius: 0; }
#incentive .card-footer { padding: 0; background-color: transparent; border-top: 1px solid rgba(0,0,0,.125); }

.card-footer-smallnote { flex: 1 1 auto; padding: .4rem 1rem; font-size: 14px }
#incentive .progress { border-radius: 0; height: .7rem; font-size: .6rem; }

.progress-bar.progress-bar-green { background-color: #01A982; }
.progress-bar.progress-bar-yellow { background-color: #FEC901; }
.progress-bar.progress-bar-orange { background-color: #FF8300 }
.progress-bar.progress-bar-lightblue { background-color: #7FF9E2 }
.progress-bar.progress-bar-mediumblue { background-color: #32DAC8 }
.progress-bar.progress-bar-darkblue { background-color: #0D5265 }
.progress-bar.progress-bar-lightpurple { background-color: #C140FF }
.progress-bar.progress-bar-mediumpurple { background-color: #7630EA }
.progress-bar.progress-bar-red { background-color: #CA2B4E }

#incentive .flip-card { background-color: transparent; height: 100%; width: 100%; overflow: hidden; margin: 0; }
#incentive .flip-card-inner .flip-card-front img { width: 100%; }
#incentive .flip-card-front img { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); }

#incentive .flip-card-front .flip-card-front-inner { position: fixed; width: 100%; top: 54%; }
#incentive .flip-card-back .flip-card-back-inner { position: fixed; left: 50%; top: 0; transform: translate(-50%, 0); width: 100%; padding: 2rem; }
#incentive .flip-box { color: rgb(68, 68, 68); text-align: left; }
#incentive .flip-card-inner .flip-card-front img { width: 100%; height: 180px; object-fit: cover; }
#incentive .flip-card-inner{
 position: relative;
 text-align: center;
 min-height: 340px;
 height: 100%;
 transition: transform 0.6s;
 transform-style: preserve-3d;
}

.d-contents { display: contents; }

/* ================ END INCENTIVE ================ */


/* ================ START COMPANY MANAGEMENT CSS ================ */

@media (min-width: 1200px) {
 #companymanagement section .container { padding-top: 3rem; padding-bottom: 3rem }
}

.company-mng-position { background-position: center bottom !important; }
#companymanagement .percent { position: relative; text-align: center; }
#companymanagement .progress-bar-box svg { position: relative; width: 230px; height: 230px; transform: rotate(-90deg); }

#companymanagement .progress-bar-box svg circle {
 width: 100%; height: 100%;
 fill: none;
 stroke: #f0f0f0;
 stroke-width: 15;
 stroke-linecap: round;
}

#companymanagement .progress-bar-box svg circle:last-of-type {
 stroke-dasharray: 625px;
 stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
 stroke: #3498db; 
}

#companymanagement .progress-bar-box .number-darkblue 
{ position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }
#companymanagement .progress-bar-box .number-mediumblue 
{ position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }
#companymanagement .progress-bar-box .number-mediumpurple 
{ position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); }
#companymanagement .progress-bar-box .number-lightpurple 
{ position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }
#companymanagement .progress-bar-box .number-orange 
{ position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }
#companymanagement .progress-bar-box .number-yellow 
{ position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }

#companymanagement .progress-bar-box .number h3 { font-weight: 200; font-size: 2.5rem; color: #32dacb; }
#companymanagement .progress-bar-box .number h3 span { font-size: 2rem; }
#companymanagement .progress-bar-box .title h2 { margin: 25px 0 0; line-height: 22px; }
#companymanagement .progress-bar-box .title h2 span { font-size: 17px; }

#companymanagement .progress-bar-box-darkblue svg circle:last-of-type { stroke: #0D5265; }
#companymanagement .progress-bar-box .number-darkblue h3 { font-weight: 200; font-size: 2.5rem; color: #0D5265; }
#companymanagement .progress-bar-box-mediumblue svg circle:last-of-type { stroke: #32DAC8; }
#companymanagement .progress-bar-box .number-mediumblue h3 { font-weight: 200; font-size: 2.5rem; color: #32DAC8; }
#companymanagement .progress-bar-box-mediumpurple svg circle:last-of-type { stroke: #7630EA; }
#companymanagement .progress-bar-box .number-mediumpurple h3 { font-weight: 200; font-size: 2.5rem; color: #7630EA; }
#companymanagement .progress-bar-box-lightpurple svg circle:last-of-type { stroke: #C140FF; }
#companymanagement .progress-bar-box .number-lightpurple h3 { font-weight: 200; font-size: 2.5rem; color: #C140FF; }
#companymanagement .progress-bar-box-orange svg circle:last-of-type { stroke: #FF8300; }
#companymanagement .progress-bar-box .number-orange h3 { font-weight: 200; font-size: 2.5rem; color: #FF8300; }
#companymanagement .progress-bar-box-yellow svg circle:last-of-type { stroke: #FEC901; }
#companymanagement .progress-bar-box .number-yellow h3 { font-weight: 200; font-size: 2.5rem; color: #FEC901; }

.bonus-brd { border: 1px solid #ccc; width: 100%; padding: 20px 10px;  }
.bonus-brd h2 { line-height: 22px; }
.bonus-brd h2 span { font-size: 17px; }
.text-ttl-bouns { font-size: 50px; color: #c140ff; }
.prl-text { color: #7630ea; }

#companymanagementtable .table-fixed-column-outter { position: relative; margin: 2rem auto;  }
#companymanagementtable .table-fixed-column-inner { overflow-x: scroll; overflow-y: visible; margin-left: 450px; }
#companymanagementtable .table { margin-bottom: 0.25rem; }
#companymanagementtable .table.table-fixed-column { table-layout: fixed; width: 100% }
#companymanagementtable .table td, .table th { width: 150px; border: none; padding: 0.5rem 0.75rem; }
#companymanagementtable .table th:first-child,
#companymanagementtable .table tr td:first-child { position: absolute; left: 0; width: 300px; }
#companymanagementtable .table-bordered>:not(caption)>* { border-width: 0; }

.pagination { display: inline-block; float: right; padding: 20px 0 0 0; }
.pagination a {
 color: black;
 float: left;
 padding: 5px 12px;
 text-decoration: none;
 border: 1px solid #ddd;
}

.pagination a.active { background-color: #01A982; color: white; border: 1px solid #01A982; }
.pagination a:hover:not(.active) { background-color: #ddd; }
.pagination a:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.pagination a:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

@media screen and (max-width:991px) {
 #companymanagementtable .table th:first-child,
 #companymanagementtable .table tr td:first-child { width: 200px; }
 #companymanagementtable .table th:nth-child(2),
 #companymanagementtable .table tr td:nth-child(2) { left: 200px; }
 #companymanagementtable .table-fixed-column-inner { margin-left: 350px; }
}

@media screen and (min-width:992px) {
 #companymanagementtable .table tr td:nth-child(2), #companymanagementtable .table th:nth-child(2),
 #companymanagementtable .table tr td:nth-child(2) { position: absolute; left: 300px; }
}

@media screen and (min-width:501px) {
 #companymanagementtable .table th:nth-child(2),
 #companymanagementtable .table tr td:nth-child(2) { position: absolute; }
}

@media screen and (max-width:500px) {
 #companymanagementtable .table-fixed-column-inner { margin-left: 300px; }
 #companymanagementtable .table th:nth-child(2),
 #companymanagementtable .table tr td:nth-child(2) { position: absolute; width: 100px;  }
}

.table>:not(caption)>*>* {
 padding: 0.5rem 0.75rem;
 background-color: var(--bs-table-bg);
 border-bottom-width: 1px;
 box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/* ================ END COMPANY MANAGEMENT CSS ================ */


/* ================ MY CREDIT CARD CSS START HERE ================ */

.crdit-card-hd { font-weight: 400; }
.status-text { color: #01A982; font-weight: 700 }
#creditcard .percent { position: relative; text-align: center; }
#creditcard .progress-bar-box svg { position: relative; width: 210px; height: 210px; transform: rotate(-90deg); }

#creditcard .progress-bar-box svg circle { 
 width: 100%; height: 100%; fill: none; stroke: #f0f0f0; stroke-width: 10px; stroke-linecap: round; 
}
#creditcard .progress-bar-box svg circle:last-of-type { 
 stroke-dasharray: 625px; stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100); stroke: #3498db; 
}

#creditcard .progress-bar-box .number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#creditcard .progress-bar-box .number h3, #creditcard .progress-bar-box .number2 h3 { font-weight: 400; font-size: 2.5rem;  }
#creditcard .progress-bar-box .number h3 span { font-size: 2rem; }
#creditcard .title h3 { font-size: 1.5rem; margin-bottom: 0; padding-bottom: 0; }
#creditcard .progress_lightblue svg circle:last-of-type { stroke: #32DAC8; }
#creditcard .progress_orange svg circle:last-of-type { stroke: #FF8300; }
#creditcard .progress_green svg circle:last-of-type { stroke: #01A982; }
#creditcard .progress_darkpurple svg circle:last-of-type { stroke: #7630EA; }
#creditcard .progress_lightpurple svg circle:last-of-type { stroke: #C140FF; }

#creditcard .bonus-brd { border: 1px solid #ccc; width: 100%; padding: 20px 10px; min-height: 280px; }
#creditcard .bonus-brd h2 { line-height: 22px; }

#creditcard .bar_lightblue_big svg { position: relative; width: 350px; height: 350px; transform: rotate(-90deg); }
#creditcard .bar_lightblue_big svg circle { width: 100%; height: 100%; fill: none; stroke: #f0f0f0; stroke-width: 14px; stroke-linecap: round; }
#creditcard .bar_lightblue_big:nth-child(1) svg circle:last-of-type { stroke: #7630ea; }
#creditcard .bar_lightblue_big .number { position: absolute; top: 45%;  }
#creditcard .bar_lightblue_big .number h3 { font-weight: 400; font-size: 3rem;  }

.bs-wizard { margin-top: 40px; }
.bs-wizard { border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0; }
.bs-wizard > .bs-wizard-step { padding: 0; position: relative; }

@media screen and (min-width:992px) {
 .bs-wizard > .bs-wizard-step .bs-wizard-stepnum { margin-top: 58px; margin-left: 65px; }
}

.bs-wizard > .bs-wizard-step .bs-wizard-info { color: #999; font-size: 14px; }
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
 position: absolute;
 width: 100px; height: 100px;
 display: block;
 background: #01A982;
 top: -15px;
 left: 50%;
 margin-top: -15px;
 margin-left: -15px;
 border-radius: 50%;
}
.bs-wizard > .bs-wizard-step > .progress {
 background-color: #7f8285;
 position: relative;
 border-radius: 0px;
 height: 3px;
 box-shadow: none;
 margin: 20px 0;
}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar { width:0px; box-shadow: none; background: #01A982; }
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #7f8285;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }

a.bs-wizard-dot img { 
 width: 45px;
 margin: auto;
 height: 45px;
 filter: invert(1);
 position: relative;
 display: flex;
 top: 28%;
}

.text-center.bs-wizard-stepnum.text-active { color: #01A982; }


@media screen and (max-width:599px) {
 .bs-wizard > .bs-wizard-step .bs-wizard-stepnum { font-size: 14px; padding: 0 .5rem; width: 100%; margin-top: 2.5rem; }
}

@media screen and (min-width:600px) and (max-width:991px) {
 .bs-wizard > .bs-wizard-step .bs-wizard-stepnum { font-size: 14px; padding: 0 .5rem; width: 83%; margin-top: 2.5rem; }
}

@media screen and (max-width:991px) {

 .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
  position: absolute;
  width: 70px;
  height: 70px;
  display: block;
  background: #01A982;
  top: -15px;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
 }

 a.bs-wizard-dot img {
  width: 25px;
  margin: auto;
  height: 25px;
  filter: invert(1);
  position: relative;
  display: flex;
  top: 28%;
 }

 .bs-wizard > .bs-wizard-step > .progress {
  background-color: #7f8285;
  position: relative;
  border-radius: 0px;
  height: 3px;
  box-shadow: none;
  margin: 5px 0;
 }

 .bs-wizard > .bs-wizard-step > .bs-wizard-dot { left: 32%; }
}

/* ================ END MY CREDIT CARD ================ */


/* ================ PROLIANT SERVER ================ */

@media screen and (min-width: 992px) {
 .fluid-bg2 {
  height: 420px; width: 100%;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  object-fit: cover;
 }
}


@media screen and (max-width: 991px) {
 .fluid-bg2 { height: 520px; background-repeat: no-repeat !important; background-size: cover !important; }
 .productimg { margin-top: 3.5rem; }
} 

.fluid-bg2-text { height: 420px; }

#proliantserver .card-body { flex: 1 1 auto; padding: 1rem 0; min-height: 30vh; }

.overflow-ellipsis {
 display: -webkit-box; 
 -webkit-box-orient: vertical; 
 -webkit-line-clamp: 5; 
 overflow: hidden; 
 text-overflow: ellipsis; 
}

.cardpad { padding: 2rem; }

#proliantserver .card-owl3-item {
 position: relative;
 display: flex;
 flex-direction: column;
 min-width: 0;
 word-wrap: break-word;
 background-color: #fff;
 background-clip: border-box;
 border: 1px solid rgba(0,0,0,.125);
 border-radius: 15px;
}

#proliantserver .card-footer { background-color: transparent; border-top: 0; padding: 0;  }
#proliantserver .owl3-item { transition: .2s all ease-in-out; cursor: pointer; }
.owl3-item img { height: 100px; object-fit: contain; margin: 2rem 0; }

#proliantserver .smallnote { font-size: 16px !important; margin-bottom: 1rem; color: #9d9d9d; }
#proliantserver h5 { margin-bottom: 0; padding-bottom: 0; }


/* ================ END PROLIANT SERVER ================ */


.bgimageposition { background-position: top right !important; }
.carouselcontentshadow { text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.carouselcontentblack { color: #000; }
#carousellogo td { padding: 0; }
.carousel-dual-logo { width: 1px; height: 100%; background-color: #ffffff; }
.mastoverlay2 { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; }

.tncmodal .modal-header, .modal-header {
 background-color: #01a982;
 color: #fff;
 border-radius: .3rem .3rem 0 0;
 font-weight: 900 !important;
}

.tncmodal .modal-footer { display: block !important; }
.tncmodal .modal-footer p { font-size: 75%; }

.tncmodal .modal-dialog { overflow-y: initial !important }
.tncmodal .modal-body { min-height: 40vh; overflow-y: auto; }
.tncmodal .modal-body ol, .tncmodal .modal-body ul { padding-left: 25px; font-weight: 200 !important; }

#tnccontent ul li { list-style: disc !important; }
.tnc-tb, .tnc-tb2 { margin: 1em .5em; width: 100%; }
.tnc-tb3, .tnc-tb3 th { margin: 1em 0; width: 100%; width: 200px; }

.tncmodal ul { padding-left: 2rem; }

.tnc-tb th, .tnc-tb2 th {
 border-bottom: 3px solid #01a982;
 border-top: none !important;
 padding: 0.5em;  font-size: 1rem;
 /* text-transform: uppercase; */
 font-weight: 500 !important;
 color: #444;
}

.tnc-tb td, .tnc-tb2 td { padding: 0.5em; font-size: 1rem; }
.tnc-tb tr:nth-child(even) { background-color: #f5f5f5; }
.tnc-tb2 tr:nth-child(even) { background-color: #ffffff; }

button:disabled, button[disabled] { pointer-events: none; }

#tncpop h6 { padding-top: 1rem; font-weight: 500; font-size: 1.1rem; }
#tncpop ol { list-style-type: decimal; }
#tncpop ol li, #tncpop ul li { padding-left: .5rem; padding-bottom: .5rem;}
#tncpop { font-size: 0.9em; }

@media screen and (min-width: 992px) {
 .promo-illustrate img { width: 60%; padding-top: 3rem; }
 .greenborderbox { border: 3px solid #01a982; padding: 3rem; border-radius: 1rem; margin: 15px 0; }
 .promo-icon img { width: 20%; padding-bottom: 2rem; }
}

@media screen and (max-width: 991px) {
 .promo-illustrate img { width: 100%; padding-top: 3rem; }
 .greenborderbox { border: 3px solid #01a982; padding: 1.5rem; border-radius: 1rem; margin: 15px 0; }
 .promo-icon img { width: 60%; }
}

#incentive .progress2 { border-radius: 0; height: 1.5rem; font-size: .8rem; }
#incentive .progress3 { border-radius: 0; height: 1.2rem; font-size: .8rem; }

.tx-tnc { font-size: 1rem; }
.tx-tnc ol li { list-style-type: decimal !important; margin-left: -1rem !important; padding-bottom: .3rem;}
ul.tx-tnc-disc li { list-style-type: disc !important; padding-bottom: .3rem;}
ul.tx-tnc-disc li > ul li { list-style-type: circle !important; padding-bottom: .3rem;}

ol.list_decimal li { list-style-type: decimal !important; padding-bottom: .3rem;}

.fix-wrapper { overflow-x: auto; width: 100%; }
.fixtable {
 table-layout: fixed; 
 width: 100%;
 border-collapse: collapse;
 background: white;
}

.fixtable tr { border-bottom: 1px solid #ccc; }
.fixtable td, .fixtable th {
 vertical-align: top;
 text-align: left;
 width:100px;
 padding: 12px;
}
.fix { position: sticky !important; background: white !important; }
.fix:first-child {
 left:0 !important;
 width:200px !important;
 z-index: 99;
 background: #fff !important;  
}
.fix:nth-child(2) {
 left: 200px !important;
 z-index: 99;
 width: 150px !important;
 background: #fff !important;
}
.fix:nth-child(3) {
 left:350px !important;
 z-index: 99;  
 background: #fff !important;  
}

ul.check_list { padding-left: 5px; }
ul.check_list > li { display: flex; padding-bottom: 1rem; }
ul.check_list > li > span { display: contents; }
ul.check_list > li::before { font-family: 'hpe-icons' !important; display: table-cell; content: "\ecac"; color: #01a982; padding-right: 0.75em; }
ul.check_list > li { padding-bottom: 1rem; }
.nav-tabs .nav-link.active { background-color: transparent;}

hr.greenline { background-color: #01a982; height: 2px; width: 100%; opacity: 1; margin-bottom: 2rem; }


@media screen and (max-width: 991px) {
 .mobile-banner-intel { background: url('../images/stockimages/banner-intel-landscape.jpg');}
 .mastoverlay3 { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; }
}

@media screen and (min-width: 992px) {
 .mobile-banner-intel { background: url('../images/stockimages/banner-intel.jpg');}
}

.mobile-banner-HPETopAchieversClub { background: url('../images/stockimages/HPETopAchieversClub.jpg');}

.modal-header { border-bottom: none; }
.modaluili ul li { padding-bottom: 1rem; }


/*++++++ SBP Incentive **++++++*/

.sbp_container { position: relative; }

table.sbp_tb tr td {
 border-top-style: dashed;
 border-top-width: 3px;
 border-top-color: #292d3a;
 vertical-align: top;
 width: 24%;
 padding-left: 0;
 display: inline-block;
}

@media screen and (min-width: 591px) and (max-width: 992px) {
 .sbp_step_box { position: relative; margin-top: -22px; }
}

@media screen and (min-width: 993px) {
 .sbp_step_box { position: relative; margin-top: -12px; }
}

.sbp_header_no {
 background: #00e8cf;
 align-items: center;
 display: inline-grid;
 vertical-align: top;
 border-radius: 50px;
 width: 40px;
 height: 40px;
 text-align: center;
 font-weight: 600;
 color: #000;
 margin-right: 0.5em;
 margin-top: -10px;
}

.sbp_header_title {
 display: inline-block;
 font-weight: 600;
 margin-top: -10px;
 width: 78%;
 padding: .3em 0.75em;
 vertical-align: top;
 background: #fff;
 border: 2px solid #292d3a;
 color: #292d3a;
}

.sbp_image,
.sbp_list { margin: 0 1em; }
.sbp_list ul.promolist { padding-left: 30px; }
.sbp_list ul.promolist .icon { left: 20px !important; }


@media screen and (min-width: 1251px) {
 .sbp_tb td:nth-child(4) {
  border-right-style: dashed;
  border-right-width: 3px;
  border-right-color: #0D5265;
  padding-bottom: 6.5em;
 }
 .sbp_tb td:nth-child(5) { float: right; margin-right: 4%; }
 .sbp_tb td:nth-child(6) { float: right; }
 .sbp_tb td:nth-child(7) { float: right; }
 .sbp_tb td:nth-child(8) { float: right;
 }

}


@media screen and (min-width: 791px) and (max-width: 1250px) {
 table.sbp_tb tr td { width: 33%; }
 .sbp_tb td:nth-child(3) {
  border-right-style: dashed;
  border-right-width: 3px;
  border-right-color: #0D5265;
  padding-bottom: 12em;
 }

 .sbp_tb td:nth-child(4) { float: right; margin-right: 1%; }
 .sbp_tb td:nth-child(5) { float: right; }
 .sbp_tb td:nth-child(6) {
  float: right;
  border-left-style: dashed;
  border-left-width: 3px;
  border-left-color: #0D5265;
  padding-bottom: 10em;
 }
}


@media screen and (min-width: 590px) and (max-width: 790px) {
 table.sbp_tb tr td { width: 49%; }

 .sbp_tb td:nth-child(2) {
  border-right-style: dashed;
  border-right-width: 3px;
  border-right-color: #0D5265;
  padding-bottom: 6em;
 }

 .sbp_tb td:nth-child(3) { float: right; margin-right: 2%; }
 .sbp_tb td:nth-child(4) {
  border-left-style: dashed;
  border-left-width: 3px;
  border-left-color: #0D5265;
  padding-bottom: 5em;  
 }

 .sbp_tb td:nth-child(5) 
 { float: right; margin-right: 2%;  border-right-style: dashed; border-right-width: 3px; margin-top: -10px; padding-bottom: 4em; border-right-color: #0D5265;}
 .sbp_tb td:nth-child(6) { padding-bottom: 5em;}
 .sbp_tb td:nth-child(7) { float: right; margin-right: 2%; }
 .sbp_tb td:nth-child(8) { float: right; }
}


@media screen and (max-width: 590px) {
 table.sbp_tb tr td { width: 90%; }

 .sbp_tb td {
  border-top: 0 !important;
  border-left-style: dashed;
  border-left-width: 3px;
  border-left-color: #0D5265;
  margin-left: 25px;
 }

 .sbp_step_box { margin-left: -22px; }
 .sbp_image, .sbp_list { padding-left: 50px; }
 .sbp_list ul.promolist .icon { left: 65px !important; }

 .sbp_tb td:last-child {
  border-top: 0 !important;
  border-left-style: dashed;
  border-left-width: 3px;
  border-left-color: white;
  margin-left: 25px;
 }
 table.sbp_tb tr td { padding-bottom: 4em; }
}


@media screen and (min-width: 591px) and (max-width: 992px) {
 .sbp_header_title {
  display: inline-block;
  font-weight: 600;
  margin-top: 2px;
  width: 78%;
  padding: .3em 0.75em;
  vertical-align: top;
  background: #fff;
  border: 2px solid #0D5265;
 }
 .sbp_header_no {
  background: #7FF9E2;
  align-items: center;
  display: inline-grid;
  vertical-align: top;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  text-align: center;
  font-weight: 600;
  color: #000;
  margin-right: 0.5em;
  margin-top: 0;
 }

 .sbp_tb td:nth-child(3) { padding-bottom: 14.5em; }
}

/**++++++++++* END SBP Incentive *++++++++++*/


.d-contents { display: contents; }
#incentive2 #accordion { 
 color: rgb(68, 68, 68); padding: 5px 10px; 
 box-shadow: none; outline: none; appearance: none;
 border-radius: none; background-color: transparent; 
}

#incentive2  button:focus { outline: none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
#incentive2 .accordion-header { margin-bottom: 0; padding-bottom: 0; }
#incentive2 .accordion-body { border: 0; border-radius: 0; background-color: #F9F9F9; padding: 1rem 1.25rem; }
#incentive2 .accordion-button:not(.collapsed) { box-shadow: none; background-color: #F9F9F9; color: inherit; }
#incentive2 .accordion-item { border: none; margin-bottom: 1rem; }
#incentive2 .accordion-button { background-color: #F9F9F9; }

.flex-column-reverse { display: flex; flex-flow: column-reverse; }
.big { font-size: 2.5rem; }
.btn2 { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }

.datepicker td, .datepicker th { width: auto; text-align: center; padding: .5rem 1rem; }
.dropdown-menu { border: 2px solid #01A982; } 
.month { padding: 0.3rem; font-size: 14px; }

.briefpara { font-size: 22px; }
.SBP-statustitle { font-size: 20px; color: #c140ff; }
.SBP-card-achievement { border: 1px solid #ccc; padding: 1.5rem; }
.SBP-card-achievement-noborder { border: 0; padding: 1.5rem; }
.SBP-cardfooter { background: transparent; border: 0; padding: 0; }
.noborder { border: 0; }


/* PBM */

#searchbox .container { text-align: left; }
.searchbanner {
 background: url('../images/prelogin/hpe_intro_bg.png');
 background-position: center top;
 background-size: cover;
 min-height: 340px;
 justify-content: center;
 display: flex;
 align-items: center;
}

@media screen and (min-width: 992px) {
 .searchbox { 
  background: rgba(244, 244, 244, 0.5);
  border-radius: 12px;
  padding: 30px 40px 40px 40px;
  color: #000;
  text-align: left; z-index: -1;
 }
}

@media screen and (max-width: 991px) {
 .searchbox { 
  background: rgba(244, 244, 244, 0.5);
  border-radius: 12px;
  padding: 1rem 2rem;
  color: #000;
  text-align: left; z-index: -1;
 }
}

#searchbox input { border: 1px solid #dedede; padding: .75em; background-color: #ffffff; }
#searchbox section { margin: 4rem 0;padding: 0; }
#searchbox h2, #searchbox h3, #searchbox h4, #searchbox h5 { padding-bottom: 1rem; }
.searchboxtx { color: #000000; width: 100%; }

.newboxshadow { 
 box-shadow: 0px 4px 7px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 4px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 4px 7px rgba(0,0,0,0.2); 
}
#newspinner h2,#newspinner h3,#newspinner h4, #newspinner h5 { padding-bottom: 0; font-weight: normal !important; margin-bottom: 0; }

#newspinner .boxshadow { 
 border-radius: 12px; 
 box-shadow: 0px 4px 7px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 4px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 4px 7px rgba(0,0,0,0.2); }

 .progress { height: 1.2rem; }
 .progressbar-radius { border-radius: 50px !important; }
 .bar-red { background-color: #e25141; }
 .bar-mediumblue { background-color: #32DAC8; }
 .bar-yellow { background-color: #FEC901; }
 .bar-point { font-size: .9rem; }

 .circleredtx { font-size: 1.2rem; color: #e25141; }
 .circlepointtx { font-size: 2rem;  }

 .boxshadowmargin { margin: 1.5rem 0; }
 .barpointer { position: absolute; text-align: right; color: #01A982; font-size: .8rem; margin-left: -0.5rem; margin-top: -1rem;}
 .barpointerline { position: absolute; border-right: 2px dotted #01A982; height: 8px; margin-top: -1.7rem; }
 .progress { margin-bottom: 0; }

 @media only screen and (max-width:991px) {
  #newspinner .boxshadow { padding: 2rem 1rem;  }
  .boxheader-block { text-align: center; }
  .marginspace { margin: 1rem; }
  .mobilemt { margin-bottom: 3rem; }
  .mobilemt-empty { margin-bottom: 1rem; }
 }


 @media only screen and (min-width:992px) {
  #newspinner .boxshadow { padding: 2.5rem;  }
  .boxheader-block { text-align: left; }
  .marginspace { margin: 0 0 1rem; }
 }


 @media only screen and (min-width:992px) {
  .PBMhchart { height: 85%; }
 }

/* END PBM */


/* PBM Business Review */

.partner-banner { position: relative; width: 100%; }
.partner-banner img { max-width: 100%; width: 100%; height: 600px; }
.banner-caption {
 position: absolute;
 left: 33%;
 top: 60%;
 font-size: 60px;
 font-weight: bold;
 text-align: center;
 max-width: 500px;
 right: 0;
}
canvas#chart { padding: 1rem; }
.bggraph { border: 5px solid #3ccfcb; border-radius: 20px; }
.review-text h4 { font-weight: bold !important; font-size: 35px; }
.review-text {
 padding: 1.7rem;
 color: #fff;
 position: relative;
 margin: 0 0 18px;
 width: 100%;
 min-height: 125px;
}
.review-text p {
 font-size: 22px;
 font-weight: 500;
} 
.or-card .or-link {
 bottom: 0;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 1;
}
.or-card .or-content { flex: 1 0 auto; }
.or-card .or-description { margin-top: 15px; }
.or-card .or-background-overlay {
 border-radius: 12px;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
}
.select-wrapper.padqtr select {
 border: 1px solid #dedede !important;
 padding: 0.5em 1em 0.5em !important;
 border-radius: 10px !important;
} 
.about-sales-box{
 width:100%;
 float: left;
 background: #f5f5f5;
 padding: 40px;
 border-radius: 10px;
} 
.about-sales-box-main{
 display: grid;
 box-sizing: border-box;
 grid-template-columns: repeat(auto-fill, minmax(min(30%, 100%), 1fr));
 gap: 48px;
}

.about-sales-box-col-1{
 display: flex;
 box-sizing: border-box;
 max-width: 100%;
 align-items:center;
 background-color:#fff;
 color: rgb(111, 111, 111);
 min-width: 0px;
 min-height: 0px;
 flex-direction: column;
 width: 100%;
 padding: 25px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 12px;
 cursor: pointer;
 transition: all 0.3s ease-in-out 0s;  
}
.about-sales-box-col-1 p { font-size: 22px; color: #000; font-weight: 400; }
.about-sales-box-col-1 p span { font-weight: 600; }
.chart-container { width: 100%; height: 100%; margin: auto; border-radius: 20px; }

@media (max-width:1230px) {
 .col-12.col-md-9.graph { max-width: 100%; flex: 100%; }
 #selectBox .cs-select > span { width: 100%; }
 #selectBox .cs-skin-elastic .cs-options { max-width: 100%; }
 #selectBox .cs-skin-elastic .cs-options span:hover,
 #selectBox .cs-skin-elastic .cs-options li.cs-focus span,
 #selectBox .cs-skin-elastic .cs-options .cs-selected span { width: 100%; }

 section#selectBox { padding: 1em 0; }
 .review-text { margin: 10px 0; }
 .col-12.col-md-3.review-mobile-view { max-width: 100%; flex: 100%; }
 .col-12.col-md-2.review-mobile-view { max-width: 100%; flex: 100%; }
 .about-sales-box-main{grid-template-columns: none;}  
 .or-card.text-center.review-text {width: 100%;} 
 .banner-caption { left: 27%; top: 58%; font-size: 42px; }
 .partner-banner img { height: auto; }
} 

@media (max-width: 1000px) {
 .col-12.col-md-9.graph { max-width: 100%; flex: 100%; }
 .col-12.col-md-3.review-mobile-view { max-width: 100%; flex: 100%; }
 .col-12.col-md-2.review-mobile-view { max-width: 100%; flex: 100%; }
 .banner-caption { left: 21%; top: 60%; font-size: 40px; }
}

@media (max-width: 599px) {
 .banner-caption {
  left: 0;
  top: 60%;margin-top: 1rem;
  font-size: 30px;
 }
} 

@media (min-width: 600px) {
 .banner-caption {
  top: 60%;margin-top: 1rem;
  font-size: 50px;
 }
} 

.boxheader-block .card { border: none; }
.or-description p, .about-sales-box-col-1 p { margin-bottom: 0; }

/* END PBM Business Review */


.stat-square { height: 20px; width: 20px; float: left; margin-right: 0.5em; }


/* ---------------- Support-About Program ----------------*/

#good-to-know i{font-size: 1.4em;}
#good-to-know {background-color: #f4f4f4;}
#about_sect .col-lg-5, #about_ect .col-lg-7 { padding:0; }

@media only screen and (max-width: 991px){
 .line-in-middle {height:30px;background: linear-gradient(to right, transparent 0%, transparent calc(50% - 3px), black calc(50% - 3px), black calc(50% + 3px), transparent calc(50% + 3px), transparent 100%); }
}

@media only screen and (min-width: 992px) {
 .line-in-middle { height:30px; }
}

#desc_sect .accordion-item { background-color: #fff; border: none; }
#desc_sect .accordion_item_green { border: 3px solid #01a982; }
#desc_sect .accordion_item_lightgreen { border: 3px solid #32DAC8; }
#desc_sect .accordion_item_purple { border: 3px solid #7630EA; }
#desc_sect .accordion_item_orange { border: 3px solid #FF8300; }
#desc_sect .accordion_item_yellow { border: 3px solid #FEC901; }

#desc_sect .accordion-button, #desc_sect .accordion-button:not(.collapsed) {
 color: #000; font-weight: 500; font-size: 1.2rem;
 background-color: transparent;
 box-shadow: none; outline: none;
}

#desc_sect .accordion-item h2.accordion-header, #desc_sect h4 { padding-bottom: 0; margin-bottom: 0; }
.desc_title {
 width: 250px;
 padding: 1em;
 text-align: center;
 border-style: solid;
 border-width: 3px;
 margin: 1.5em 1em 1.5em 0;
}

#desc_sect .accordion-body p:last-child { margin-bottom: 0; }

/* ---------------- END Support-About Program ----------------*/


/* ---------------- Multi step form ----------------*/

@media only screen and (min-width:992px) {
 #multi-step-form-container { margin-top: 3rem; }
}

@media only screen and (max-width:991px) {
 #multi-step-form-container { margin-top: 0; padding: 3rem; }
}

ul.form-stepper { counter-reset: div; margin-bottom: 3rem; }
ul.form-stepper .form-stepper-circle { position: relative; }

ul.form-stepper .form-stepper-circle span {
 position: absolute;
 top: 50%;
 left: 50%;
 color: #fff;
 transform: translateY(-50%) translateX(-50%);
}

.form-stepper-horizontal { position: relative; }

ul.form-stepper > li { list-style: none; }
ul.form-stepper li a .form-stepper-circle {
 display: inline-block;
 width: 40px;
 height: 40px;
 margin-right: 0;
 line-height: 1.7rem;
 text-align: center;
 background: rgba(0, 0, 0, 0.38);
 border-radius: 50%;
}

.form-stepper .form-stepper-active .form-stepper-circle { background-color: #01A982 !important; color: #fff; }
.form-stepper .form-stepper-active .label { color: #01A982 !important; }
.form-stepper .form-stepper-active .form-stepper-circle:hover { background-color: #01A982 !important; color: #fff !important; cursor: pointer; }
.form-stepper .form-stepper-unfinished .form-stepper-circle { background-color: #32DAC8; color: #000 !important; }
.form-stepper .form-stepper-completed .form-stepper-circle { background-color: #01A982 !important; color: #fff; }
.form-stepper .form-stepper-completed .label { color: #01A982 !important; }
.form-stepper .form-stepper-completed .form-stepper-circle:hover { background-color: #0e9594 !important; color: #01A982 !important; cursor: pointer; }
.form-stepper .form-stepper-active span.text-muted { color: #000 !important; }
.form-stepper .form-stepper-completed span.text-muted { color: #fff !important; }
.form-stepper .label { font-size: 1rem; margin-top: 0.5rem; }

button { cursor: pointer; }

/* ---------------- END Multi step form ----------------*/


@media screen and (max-width: 991px) {
 #PartnerGrowthIncentive .partnergrowth_box_radius { border: 3px solid #000; padding: 1.5rem; border-radius: 15px; z-index: 3; position: relative; background-color: #fff; align-items: center; display: grid; }
 #PartnerGrowthIncentive .dotted_line_vertical_mobile:after { content: ""; position: absolute; left: 50%; border-left: 3px dotted #0d5265; height: 41.5%; top: 31%; }
}

@media screen and (min-width: 992px) {
 .carousel-container-middle { height: 420px; }
 h2.masthead_H1B { font-size: 40px;  }
 #PartnerGrowthIncentive .partnergrowth_box_radius { border: 3px solid #000; padding: 1.5rem; border-radius: 15px; z-index: 3; position: relative; background-color: #fff; min-height: 140px; align-items: center; display: grid; }
}

.bgimageposition2 { background-position: center right !important; }
.mobile-banner-microsoft_intel { background: url('../images/stockimages/AdobeStock_178278585_1600_0_72_RGB.jpg');}

#PartnerGrowthIncentive .dotted_line_horizontal { border: none; border-top: 3px dotted #0d5265; height: 3px; }
#PartnerGrowthIncentive .dotted_line_vertical 
{ border-right: 3px dotted #0d5265; height: 50px; left: -50%;
 position: relative; 
}

#PartnerGrowthIncentive .dotted_line_horizontal2:after { content: ""; position: absolute; left: 37.8%; border-bottom: 3px dotted #0d5265; width: 24.2%; }
#PartnerGrowthIncentive .dotted_line_vertical_left:after { content: ""; position: absolute; left: 37.8%; border-left: 3px dotted #0d5265; height: 25px; bottom: auto; }
#PartnerGrowthIncentive .dotted_line_vertical_right:after { content: ""; position: absolute; right: 38%; border-left: 3px dotted #0d5265; height: 25px; bottom: 37%; }

#PartnerGrowthIncentive .partnergrowth_box_radius_blue { border-color: #00DEC8; }
#PartnerGrowthIncentive .partnergrowth_box_radius_lightblue { border-color: #1EB0D2; }
#PartnerGrowthIncentive .partnergrowth_box_radius_purple { border-color: #6F37ED; }
#PartnerGrowthIncentive .partnergrowth_box_radius_dimblue { border-color: #3490D9; }

@media screen and (min-width: 992px) and (max-width: 1199px) {
 #PartnerGrowthIncentive .dotted_line_vertical_left:after { content: ""; position: absolute; left: 37.8%; border-left: 3px dotted #0d5265; height: 25px; bottom: 35%; }
 #PartnerGrowthIncentive .dotted_line_vertical_right:after { content: ""; position: absolute; right: 38%; border-left: 3px dotted #0d5265; height: 25px; bottom: 40%; }
}

.margin-left-point5 { margin-left: .5rem; }
.margin-right-point5 { margin-right: .5rem; }
.margintb-1 { margin: 1rem 0; }
.margintb-half { margin: .5rem 0; }

.mobile-banner-HPETopAchieversClub2 { background: url('../images/stockimages/GettyImages-1087517562_1600_0_72_RGB.jpg');}

@media screen and (max-width: 767px) {
 .xs_marginbottom_1rem { margin-bottom: 1rem; }
 .xs_marginbottom_2rem { margin-bottom: 2rem; }
 .xs_margintop_2rem { margin-top: 2rem; }
 .xs_margintop_3rem { margin-top: 3rem; }
 .xs_margintop_4rem { margin-top: 4rem; }
 .xs_margintop_5rem { margin-top: 5rem; }
 .xs_margintop_point5rem { margin-top: .5rem; }
 .xs_margintop_1rem { margin-top: 1rem !important; }
 .xs_tx_center { text-align: center !important; }
 .xs_mt_0 { margin-top: 0 !important; }
 .xs_mb_0 { margin-bottom: 0 !important; }
 .xs_pb_0 { padding-bottom: 0 !important; }
 .xs_px_1rem { padding: 0 1rem; }
}

@media screen and (max-width: 991px) {
 .md_margintop_1rem { margin-top: 1rem !important; }
 .md_margintop_2rem { margin-top: 2rem !important; }
 .md_tx_center { text-align: center !important; }
 .md_marginbottom_1rem { margin-bottom: 1rem; }
 .md_my_3rem { margin: 3rem 0; }
 .md_mb_1rem { margin-bottom: 1rem !important; }
 .md_mb_2rem { margin-bottom: 2rem !important; }
}

.tx_purple { color: #7630EA !important; }
.tx_lightblue { color: #1EB0D2 !important; }
.tx_dimblue { color: #3490D9 !important; }
.tx_red { color: #ed0000; }

.tx_darkblue { color: #0D5265 }
.tx_mediumblue { color: #32DAC8 }
.tx_lightblue2 { color: #7FF9E2 }
.tx_lightpurple { color: #C140FF }

/*---------------- Bali ----------------*/

@media (max-width: 991px) {
 .imgsuitcase_mobile { margin-right: 1rem; }
}

@media (min-width: 992px) {
 .imgsuitcase_mobile { margin-right: 5rem; }
}

#tacBali .imgbali { background: url('../images/stockimages/TAC_bali.jpg'); background-size: cover; background-position: top; background-repeat: no-repeat; height: 850px; }
#tacBali .imgcirclepic { height: 75%;  z-index: 1; }
#tacBali .shapebubble {     
 height: 42%;
 position: absolute;
 justify-content: space-around;
 background: url('../images/stockimages/TAC_bali_bubble.svg');
 background-repeat: no-repeat;
 left: 22%;
}
#tacBali .shapeheader { position: relative; width: 35%; padding: 4.5rem; left: 0; }
#tacBali .balifooter { background-color: #01A982; padding: 4rem; color: #fff; z-index: -5; position: relative;}

#tacBali ul { padding-left: 0; }
#tacBali ul li { content:''; background-image: url('../images/icon/ico_square.svg'); background-repeat: no-repeat; padding-left: 2rem; background-size: 16px; font-size: 88%; padding-bottom: .8rem;background-position-y: 4px; }

.tx_lightblue_how { color: #7FF9E2 }
.margin-right-5rem { margin-right: 5rem; }
.gradient_bali { background: linear-gradient(45deg, #007cb0, #04c052); z-index: -3; position: relative; }

#tacBali .imgbali2 { background: url('../images/stockimages/TAC_bali.jpg'); background-position: top; background-repeat: no-repeat; height: 850px; z-index: -2; position: relative; }

@media screen and (max-width: 576px) {
 #tacBali .imgcirclepic2 { height: 310px;  z-index: 1; }
 #tacBali .shapebubble2 {     
  height: 800px;
  position: absolute;
  justify-content: space-around;
  background: url('../images/stockimages/TAC_bali_bubble_mobile.svg');
  background-repeat: no-repeat;
  left: 11%; top: -18%; z-index: -1;
 }
 #tacBali .shapeheader2 { position: relative; width: 66%; padding: 1rem; left: 10px; bottom: -60%; }
 #tacBali .ticket_suitcase { bottom: 3%; position: absolute; }
 .h1, h1 { font-size: calc(1.375rem + 2.2vw); }
}

@media screen and (min-width: 577px) and (max-width: 767px)  {
 #tacBali .imgcirclepic2 { height: 310px;  z-index: 1; }
 #tacBali .shapebubble2 {     
  height: 1100px;
  position: absolute;
  justify-content: space-around;
  background: url('../images/stockimages/TAC_bali_bubble_mobile.svg');
  background-repeat: no-repeat;
  left: 11%; top: -62%; z-index: -1;
 }
 #tacBali .shapeheader2 { position: relative; width: 50%; padding: 1rem; left: 10px; bottom: -56%; }
 #tacBali .ticket_suitcase { bottom: 3%; position: absolute; width: 80%; left: 9%; }
 .h1, h1 { font-size: calc(1.375rem + 2.5vw); }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
 #tacBali .imgcirclepic2 { height: 550px;  z-index: 1; }
 #tacBali .shapebubble2 {     
  height: 1300px;
  position: absolute;
  justify-content: space-around;
  background: url('../images/stockimages/TAC_bali_bubble_mobile.svg');
  background-repeat: no-repeat;
  left: 11%; top: -72%; z-index: -1;
 }
 #tacBali .shapeheader2 { position: relative; width: 40%; padding: 1rem; left: 10px; bottom: -56%; }
 #tacBali .ticket_suitcase { bottom: -12%; position: absolute; width: 80%; left: 9%; }
 .h1, h1 { font-size: calc(1.375rem + 2.5vw); }
}

@media screen and (min-width: 1200px) {
 #tacBali .imgcirclepic2 { height: 550px;  z-index: 1; }
 #tacBali .shapebubble2 {     
  height: 1300px;
  position: absolute;
  justify-content: space-around;
  background: url('../images/stockimages/TAC_bali_bubble_mobile.svg');
  background-repeat: no-repeat;
  left: 11%; top: -72%; z-index: -1;
 }
 #tacBali .shapeheader2 { position: relative; width: 40%; padding: 1rem; left: 10px; bottom: -50.5%; }
 .h1, h1 { font-size: calc(1.375rem + 2.3vw);} 
 #tacBali .ticket_suitcase { bottom: -12%; position: absolute; width: 80%; left: 9%; }
}

/*---------------- END Bali ----------------*/

.mobile-banner-MSA_ComputeIncentive { background: url('../images/stockimages/HPE2022042308250_1600_0_72_RGB.jpg'); background-position: 60% 10%; }
.box_radius_blue { border: 3px solid #00DEC8;  }
.box_radius_lightblue { border: 3px solid #1EB0D2; }
.box_radius_dimblue { border: 3px solid #3490D9; }
.box_radius_purple { border: 3px solid #6F37ED; }
.box_radius_magenta { border: 3px solid #C140FF; }
.box_radius_green { border: 3px solid #01a982; }

.box_yellowmargentablue {
 background: linear-gradient(45deg, #0d5265, #af42f0, #fec901);
 color: #ffffff;
 font-weight: 600;
 padding: 8px 30px;
 border-radius: 2rem; border: transparent;
 display: inline-block;
}


@media (min-width: 1199px) and (max-width: 1399px) {
 .minheight_140px { min-height: 140px; }
}


.h_min200px { min-height: 70px; }

.card-footer_trans { background-color: transparent; border-top: 0; padding: 0;  }
.font_size_90perc { font-size: 90%; }
.smallblack { color: rgb(68, 68, 68); font-style: italic; }

@media (min-width: 992px) {
 .box_radius { padding: 1.5rem; border-radius: 15px; background-color: #fff;  }
 .pad_extra { padding: .3rem 0; }
}

@media (max-width: 991px) {
 .box_radius { padding: 1.5rem; border-radius: 15px; background-color: #fff;  }
 .pad_extra { padding: 0; }
}

.gradient-stockimage img { z-index: 2 !important; position: relative !important; }
.gradient-stockimage_purpleblueyellow::after,
.gradient-stockimage_purplemargentayellow::after,
.gradient-stockimage_orangeyellow::after,
.gradient-stockimage_purpleblue::after,
.gradient-stockimage_greenyellow::after,
.gradient-stockimage_magentagreenyellow::after,
.gradient-stockimage_magentapurplegreen::after { z-index: 1 !important; }

@media (max-width: 767px) {
 .gradient-stockimage { position: relative; margin-bottom: 4rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
 .gradient-stockimage { position: relative; margin-bottom: 4rem; }
}

.dotted_line_vertical_mobile_servicesincentive { border-right: 3px dotted #FF8300; height: 30px; left: -50%; position: relative; bottom: -50%; }

/* ================ CALENDAR 03-09-24================ */

.rd-container { 
 display: none; background-color: #fff; padding: 20px; text-align: center; 
 box-shadow: 0 15px 15px 0 rgba(0, 0, 0, .2); border: 2px solid #01A982; 
 margin-top: 1px; border-radius: 6px;
}
.rd-container-attachment { position: absolute; }
.rd-month { display: inline-block; margin-right: 25px; margin-top: 6px; }
.rd-month:last-child { margin-right: 0; }
.rd-back,
.rd-next { cursor: pointer; border: none; outline: none; background: none; padding: 0; margin: 0; }
.rd-back[disabled],
.rd-next[disabled] { cursor: default; }
.rd-back { float: left; margin-left: 10px; }
.rd-next { float: right; margin-right: 10px; }
.rd-back:before { font-family: 'hpe-icons' !important; display: block; content: "\e976"; color: #01a982; font-size: .85rem; margin-top: 6px; }
.rd-next:before { font-family: 'hpe-icons' !important; display: block; content: "\e977"; color: #01a982; font-size: .85rem; margin-top: 6px; }
.rd-day-body { cursor: pointer; text-align: center;  width: 35px; height: 35px; vertical-align: middle; }
.rd-day-selected,
.rd-time-selected,
.rd-time-option:hover { cursor: pointer; background-color: #01A982; color: #fff;  /* new */ border-radius: 50%; }
.rd-day-prev-month,
.rd-day-next-month { color: #ccc; }
.rd-day-disabled { cursor: default; color: #ccc; }
.rd-time { position: relative; display: inline-block; margin-top: 5px; min-width: 80px; }
.rd-time-list { display: none; position: absolute; overflow-y: scroll; max-height: 160px; left: 0; right: 0; background-color: #fff; color: #333; }
.rd-time-selected { padding: 5px; }
.rd-time-option { padding: 5px; }
.rd-day-concealed { visibility: hidden; }
.rd-days { margin-top: 15px; }

table.rd-days th, table.rd-days td { font-size: .9rem; }
table th.rd-day-head { padding-bottom: 1rem; }

@media screen and (max-width: 991px) {
 table.rd-days td { padding: 0.75rem; }
 .mt_1rem { margin-top: 1rem; }
 .mt_point5rem { margin-top: .5rem; }
}

/* ================ END CALENDAR 03-09-24================ */

.xs_position_fixed { position: fixed; }
.opacity_point8 { opacity: .8 ; }
.opacity_point75 { opacity: .75 ; }
.z-1 { z-index: 1; }
.justify-items-center { justify-items: center; }
.justify-self-center { justify-self: center; }
.font_size_35px { font-size: 35px; }
.font_size_48px { font-size: 48px; }
.border_radius_36px { border-radius: 36px; }
.blackoverlay_point3 { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; }
.pad_bottom_1rem { padding-bottom: 1rem; }
.mb_2rem { margin-bottom: 2rem; }
.mb_5rem { margin-bottom: 5rem !important; }
.pl_3rem { padding-left: 3rem; }
.pr_3rem { padding-right: 3rem; }
.px_3rem { padding: 0 3rem; }

ul.bullet { list-style: disc; }

.tx_link a { color: #333333; }
.tx_link a:hover, .tx_link a:active, .tx_link a:focus { color: #01A982; }

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

@media screen and (min-width: 992px) {
 .sponsor { text-align: left; }
 .programinfo { text-align: right; }
}

h2 { margin-bottom: 1rem }

#masthead_single, #masthead_single_microsoft { position: relative; }
.mastoverlay_single {
 box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; 
 height: 100%;
 width: 100%;
 position: absolute;
}

@media screen and (min-width: 992px) {
 #masthead_single .carousel-caption, #masthead_single_microsoft .carousel-caption {
  text-align: left; right: 0; left: 0; top: 0;
 }
 .mastoverlay_single_mobile2 {
  background: linear-gradient(235deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .3) 80%);
  height: 100%;
  width: 100%;
  /* z-index: 1; */
  position: absolute;
 }
}

@media screen and (max-width: 991px) {
 #masthead_single .carousel-caption { text-align: left; right: 1.5%; left: 1.5%; bottom: 2rem; }
 #masthead_single_microsoft .carousel-caption { text-align: left; right: 1.5%; left: 1.5%; bottom: 1rem; }
 .mastoverlay_single_mobile2 {
  background: linear-gradient(235deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .7) 80%);
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
 }
}

.mastoverlay_single_mobile {
/*box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3) !important; */
background: linear-gradient(235deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 80%);
height: 100%;
width: 100%;
z-index: 1;
position: absolute;
}

.tx_orangeyellow { 
 background: linear-gradient(45deg, #ffd300, #ffd300);
 content: '';
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}

.new_sku { 
 color: #fff; border-radius: 50px; padding: 3px .8rem; background: linear-gradient(45deg, #ffd300, #ff6300); display: inline-block
}

.bgsize_100 { background-size: 100% !important; } 

@media screen and (min-width: 992px) {
 .margintb_lg_2rem { margin: 2rem 0 !important; }
 .margintb_lg_6rem { margin: 6rem 0 !important; }
 .lg_mb_2rem { margin-bottom: 2rem !important; }
 .lg_mt_7rem { margin-top: 7rem; }
 .lg_mt_2rem { margin-top: 2rem; }
 .lg_m_2rem { margin: 2rem; }
 .lg_mt_3rem { margin-top: 3rem; }
 .md_mt_4rem { margin-top: 4rem; }
 .lg_mb_4rem { margin-bottom: 4rem !important; }
 .lg_mt_1rem { margin-top: 1rem; }
}


.gradient-stockimage img.object_fit_fill { object-fit: fill;  }
.font_size_65px { font-size: 65px !important; }
.font_size_30px { font-size: 30px !important; }
.font_size_25px { font-size: 25px; }
.font_size_20px { font-size: 20px; }
.position_relative { position: relative; }
.z-n1 { z-index: -1; }

.incentive_tnc li ul.list_alpha li { list-style-type: lower-alpha !important; padding-bottom: .2rem; padding-left: .5rem; }
.incentive_tnc { font-size: 1rem; }
.incentive_tnc ol li { list-style-type: decimal !important; margin-left: -1rem !important; padding-bottom: .3rem; padding-left: .5rem;}
.incentive_tnc ul { padding-left: 2rem; }
.incentive_tnc ol { padding-left: 2.5rem; }

.incentive_tnc li ul.bullet li { list-style-type: disc !important; padding-bottom: .2rem; padding-left: .5rem; }

.card.card_border_color {
 color: rgb(68, 68, 68);
 padding: 2.5rem;
 border-radius: 1rem;
}

.my_2rem { margin: 2rem; }
.mt_2rem { margin-top: 2rem; }
.m_top_1point5rem { margin-top: 1.5rem; }
.font_size_40px { font-size: 40px; }
.fill_green { filter: invert(48%) sepia(57%) saturate(2932%) hue-rotate(134deg) brightness(90%) contrast(99%); }
.fill_orange { filter: brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(1789%) hue-rotate(359deg) brightness(102%) contrast(107%); }
.fill_purple { filter: brightness(0) saturate(100%) invert(21%) sepia(42%) saturate(7266%) hue-rotate(258deg) brightness(93%) contrast(98%); }

.rotate_90deg { transform: rotate(90deg); }
.box_radius_lightpurple { border: 3px solid #C140FF; }

.tx_greenyellow { 
 background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970);
 content: ''; margin-bottom: ;
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}

.datablock_bg {
 background-image: url('../images/stockimages/HPE_AI_texture_datablocks.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

.tx_magentagreenyellow { 
 content: ''; background: linear-gradient(225deg, #fec901, #01c294, #b56cad 40%, #eb3474); 
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.box_shadow { 
 box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.06);
 -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.06);
 -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.06);
 padding: 1.5rem; border-radius: 1rem; 
}

@media screen and (max-width: 499px) {
 .gradient-stockimage_hauto img { width: calc(100% - 16px); height: auto; object-fit: fill; }
}

@media screen and (min-width: 500px)  and (max-width: 767px) {
 .gradient-stockimage_hauto img { width: calc(100% - 30px); height: auto; object-fit: fill; }
}

@media screen and (min-width: 768px)  and (max-width: 1199px) {
 .gradient-stockimage_hauto img { width: calc(100% - 50px); height: 190px;  object-fit: fill; }
}

@media screen and (min-width: 1200px) {
 .gradient-stockimage_hauto img { width: calc(100% - 60px); height: auto; }
}

.gradient-stockimage_hauto { position: relative; margin-bottom: 4rem; }

.pl_point5rem { padding-left: .5rem; }
.pl_1rem { padding-left: 1rem; }
.pr_1rem { padding-right: 1rem; }

.box_radius_yellow { border: 3px solid #FEC901; }
.box_radius_superlightblue { border: 3px solid #7FF9E2; }

@media screen and (min-width: 992px) {
 .fluidbg_blue {
  background-image: url('../images/stockimages/AdobeStock-257301038_1600_0_72_RGB.jpg');
  background-size: 200%; background-repeat: no-repeat;
 }
 .lg_marginbottom_2rem { margin-bottom: 2rem; }
}
@media screen and (max-width: 991px) {
 .fluidbg_blue {
  background-image: url('../images/stockimages/AdobeStock-257301038_1600_0_72_RGB.jpg');
  background-size: cover; background-repeat: no-repeat;
 }
}
.card-body_1pt5 { padding: 1.5rem; }
.card_footer_1pt5 { padding: 0 1.5rem 1.5rem; }
.card_footer_2rem { padding: 0 2rem 2rem; }

.font_size_16px { font-size: 16px; }
.my_5rem { margin: 5rem 0; }
.my_4rem { margin: 4rem 0; }
.my_3rem { margin: 3rem 0; }
.marginbottom_2rem { margin-bottom: 2rem; }

@media screen and (max-width: 1199px) {
 .lg_tx_center { text-align: center !important; }
 .lg_px_1rem { padding: 0 1rem; }
 .lg_mb_1rem { margin-bottom: 1rem !important; }
 .lg_margintop_5rem { margin-top: 5rem !important; }
}

.p_1point4rem { padding: 1.4rem; }

.tx_faq { font-size: 1.15rem !important; }
.tx_faq ol li { list-style-type: decimal !important; margin-left: -1rem !important; padding-bottom: .5rem; padding-left: .5rem; padding-top: .5rem; }
.tx_faq ol li ol li { list-style-type: upper-roman !important; margin-left: -1rem !important; padding-bottom: .5rem; padding-left: .5rem; padding-top: .5rem; }
.tx_faq ol { margin-bottom: 1rem; }
.p_1point25rem { padding: 1rem 1.25rem }
li button { font-size: 1.2rem; }
.px_point5rem { padding: 0 .5rem; }
.tx_deci ol li:nth-child(1), .tx_deci ol li:nth-child(2) { font-weight: 500; color: #01A982 ; }

.tx_bluemargentayellow {
 content: '';
 background-image: linear-gradient(175deg, #0d5265, #af42f0, #fec901);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.gradient_yellowmargentablue { background: linear-gradient(45deg, #0d5265, #af42f0, #fec901); }

.tx_yellowmargentablue {
 content: '';
 background-image: linear-gradient(45deg, #0d5265, #af42f0, #fec901);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.h2_tx_shadow { text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.background_size_150 { background-size: 150%; }
.tooltip-inner { padding: 1rem; background-color: rgba(0, 0, 0, 1.0); border-radius: 15px; line-height: 1.3; }

.landing_login { background: #000000; padding: 4rem 0; color: #fff; position: relative; font-size: 18px; }
.landing_login_vid { position: absolute; bottom: -5px; left: 0; padding: 0; object-fit: cover; }
.landing_login_vid video { float: right; object-fit: cover; width: 100vw; height: 100vh; }

@media screen and (max-width: 768px) and (max-device-width: 768px) {
 .landing_login_vid { width: 100%; }
}

.border_none { border: none; }

.gradient_border_yellowmargentablue { 
 border: transparent;
 border-radius: 25px;
 background-image: linear-gradient(white, white), 
 linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
 background-origin: border-box;
 background-clip: content-box, border-box;
} 

.gradient_border_purpleblueyellow { 
 border: transparent;
 border-radius: 25px;
 background-image: linear-gradient(white, white), 
 linear-gradient(45deg, #8219f3, #00dec8, #ffc800);
 background-origin: border-box;
 background-clip: content-box, border-box;
} 

.gradient_border_magentapurplegreen { 
 border: transparent;
 border-radius: 25px;
 background-image: linear-gradient(white, white), 
 linear-gradient(45deg, #eb3474, #7630ea, #01d9a6);
 background-origin: border-box;
 background-clip: content-box, border-box;
} 

.gradient_border_purpleblue { 
 border: transparent;
 border-radius: 25px;
 background-image: linear-gradient(white, white), 
 linear-gradient(45deg, #d221ff, #00dec8);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

#globalland .flip-card-front .flip-card-front-inner p, #globalland .flip-card-back .flip-card-back-inner p  { font-size: 1.1rem; }

.mt_10rem { margin-top: 10rem; }

@media screen and (min-width: 1521px) {
 .illu_tx_top1 { width: 20%; position: absolute; left: 40%; text-align: center; }
 .illu_tx_top2 { width: 21%; position: absolute; top: 49%; left: 17%; text-align: center; }
 .illu_tx_top3 { width: 20%; position: absolute; top: 43%; left: 63%; text-align: center; }
 .illu_img { width: 60%; margin-top: 5rem; }
}

@media screen and (min-width: 1199px) and (max-width: 1520px) {
 .illu_tx_top1 { width: 20%; position: absolute;  left: 40%; text-align: center; }
 .illu_tx_top2 { width: 20%; position: absolute; top: 46%; left: 14%; text-align: center; }
 .illu_tx_top3 { width: 20%; position: absolute; top: 40%; left: 66%; text-align: center; }
 .illu_img { width: 60%; margin-top: 6.5rem; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
 .illu_tx_top1 { width: 25%; position: absolute; left: 38%; text-align: center; }
 .illu_tx_top2 { width: 25%; position: absolute; top: 46%; left: 14%; text-align: center; }
 .illu_tx_top3 { width: 25%; position: absolute; top: 40%; left: 62%; text-align: center; }
 .xs_mt_28rem { margin-top: 28rem; }
 .illu_img { width: 60%; margin-top: 6.5rem; }
 #landing_login .icon_step { position: relative; border-top: 2px solid; margin-top: -20%; z-index: -1; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
 .illu_tx_top1 { width: 85%; position: absolute; text-align: center; justify-self: anchor-center; }
 .illu_tx_top2 { width: 85%; position: absolute; top: 33%; text-align: center; justify-self: anchor-center;}
 .illu_tx_top3 { width: 85%; position: absolute; top: 48%; text-align: center; justify-self: anchor-center;}
 .xs_mt_20rem { margin-top: 20rem; }
 .xs_mt_28rem { margin-top: 28rem; }
 .illu_img { width: 100%; margin-top:22rem; }
 #landing_login .icon_step { position: relative; border-top: 2px solid #898989; margin-top: -17%; z-index: -1; }
}

@media screen and (max-width: 767px) {
 .illu_tx_top1 { width: 85%; position: absolute; text-align: center; justify-self: anchor-center; }
 .illu_tx_top2 { width: 85%; position: absolute; top: 36%; text-align: center; justify-self: anchor-center;}
 .illu_tx_top3 { width: 85%; position: absolute; top: 55%; text-align: center; justify-self: anchor-center;}
 .xs_mt_20rem { margin-top: 20rem; }
 .xs_mt_28rem { margin-top: 28rem; }
 .illu_img { width: 100%; margin-top: 28rem; }
 #landing_login .icon_step { display: none; }
}

@media screen and (max-width: 991px) {
 .titleline { display: none; }
 .landing_login_box_radius_expand_position { position: relative; left: 0; }
 .stepline_bottom::before { 
  content: "";
  border-left: 2px solid #898989;
  position: absolute;
  z-index: -1;
  bottom: 13%;
  height: 700px;
 }
 .stepline_top::after { 
  content: "";
  border-left: 2px solid #898989;
  position: absolute;
  z-index: -1;
  top: -115%;
  height: 470px;
 }
}

@media screen and (min-width: 992px) {
 .stepline_bottom::before { 
  content: "";
  border-left: 2px solid #898989;
  position: absolute;
  z-index: -1;
  bottom: 13%;
  height: 500px;
 }
 .stepline_top::after { 
  content: "";
  border-left: 2px solid #898989;
  position: absolute;
  z-index: -1;
  top: -90%;
  height: 450px;
 }

 .landing_login_box_radius_expand_position { position: relative; left: 125px; }
}

@media screen and (min-width: 1200px) {
 #landing_login .icon_step { border-top: 2px solid #898989; top: -25px; z-index: -1; position: relative; }
}

.pad_point7rem { padding: .7rem; }
.pad_1rem { padding: 1rem; }
.pl_2rem { padding-left: 2rem; }

.gradient_border_minheight { min-height: 16rem; }

#landing_login .accordion-button {  padding: 0; outline: #01A982; box-shadow: none; font-size: 26px; font-weight: 500;  }
#landing_login .accordion-button:not(.collapsed) { padding: 0; box-shadow: none; border-radius: 6px; background-color: transparent; border: 0; font-size: 26px;  }

#landing_login .accordion-button:not(.collapsed)::after {
 background-image: url('../images/icon/icon_close.svg');
 transform: rotate(-180deg); background-size: contain; filter: brightness(0) saturate(100%) invert(68%) sepia(0%) saturate(6445%) hue-rotate(174deg) brightness(103%) contrast(98%);
}
#landing_login .accordion-button::after { filter: brightness(0) saturate(100%) invert(68%) sepia(0%) saturate(6445%) hue-rotate(174deg) brightness(103%) contrast(98%); }

#landing_login .accordion-body { padding: .5rem; margin-bottom: 1.5rem }
#landing_login h6 { font-weight: 500; }
#landing_login .accordion-item { background-color: #fff; border: 0; margin-top: .8rem; }
#landing_login .accordion-item .accordion-button ~ .collapse { margin-top: 0; }

#landing_login .icon_step:after {
 content: '';
 border-radius: 50px;
 width: 35px;
 height: 35px;
 top: -20px;
 position: relative;
 display: flex;
 justify-self: end;
}

#landing_login .icon_step.icon_step_yellow:after { background: #FEC901; }
#landing_login .icon_step.icon_step_orange:after { background: #FF8300; }
#landing_login .icon_step.icon_step_green:after { background: #01A982; }
#landing_login .icon_step.icon_step_magenta:after { background: #C140FF; }
#landing_login .icon_step.icon_step_purple:after { background: #7630EA; }

#landing_login .icon_step_img {
 border-radius: 50px;
 padding: 1rem; background-color: #fff;
 width: 80px;
 height: 80px;
 align-items: center;
 display: flex;
 justify-content: center;
 position: relative;
 top: 15px;
}

#landing_login .landing_login_box_radius_expand { padding: 1.5rem; border-radius: 15px; z-index: 3; position: relative; background-color: #fff; align-items: center; display: grid; }

.tx_yellow { color: #FEC901 !important; }
.tx_orange { color: #FF8300 !important; }

.border_color_orange { border: 3px solid #FF8300; }
.border_color_yellow { border: 3px solid #FEC901; }
.border_color_green { border: 3px solid #01A982; }
.border_color_magenta { border: 3px solid #C140FF; }
.border_color_purple { border: 3px solid #7630EA; }
.border_color_lightblue { border: 3px solid #00dec8; }
.border_color_blue { border: 3px solid #1EB0D2; }
.border_color_dimblue { border: 3px solid #0D5265; }

.m_top_point5rem { margin-top: .5rem; }

.landing_login_box_radius_expand_header { 
 background: linear-gradient(225deg, #ffc800, #eb3474, #8219f3);
 padding: 1rem 2rem; color: #ffffff;
 border-radius: 3rem;
 font-size: 28px;
 font-weight: 600;
}

#aboutus .masthead_aboutus {
 background: url('../images/stockimages/HPE202402173777_1600_0_72_RGB.jpg') 72% 35%; background-size: cover; 
}

.tx_magentapurplegreen {
 content: '';
 background-image: linear-gradient(45deg, #eb3474, #7630ea, #01d9a6);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}


@media screen and (max-width: 991px) {
 .header_border_green { height: 3px; background-color: #01A982; position: absolute; width: 22%; top: 6%; left: 0;}
 .header_border_purple { height: 3px; background-color: #7630EA; position: absolute; width: 22%; top: 6%; right: 0; }
 .profile_justify-items-end { justify-items: start; }
}

@media screen and (min-width: 992px) {
 .header_border_green { height: 3px; background-color: #01A982; position: absolute; width: 32%; top: 14%; left: 0; }
 .header_border_purple { height: 3px; background-color: #7630EA; position: absolute; width: 32%; top: 14%; right: 0; }
 .profile_justify-items-end { justify-items: end; }
}

.landing_pic { object-fit: cover; height: 180px; object-position: 50% 60%; }

#myprofile .masthead_myprofile {
 background: url('../images/stockimages/HPEService_18247_ProLiant2.jpg') 70% 25%; background-size: cover; 
}

#myprofile .card_img img { width: 100%; height: 270px; object-fit: cover; border-radius: 1rem 1rem 0 0; object-position: top; }

.borderleft_color_orange { border-left: 4px solid #FF8300; }
.borderleft_color_yellow { border-left: 4px solid #FEC901; }
.borderleft_color_green { border-left: 4px solid #01A982; }
.borderleft_color_lightgreen { border-left: 4px solid #32DAC8; }
.borderleft_color_magenta { border-left: 4px solid #C140FF; }
.borderleft_color_purple { border-left: 4px solid #7630EA; }

#myprofile td { padding: 10px 0; }

#myprofile .point_mask {
 font-size: 5.5rem;
 font-weight: 700;
 background: url('../images/stockimages/AdobeStock_222468625_1600_0_72_RGB.jpg') 0 0 / contain repeat;
 color: #de466c;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.px_2rem { padding: 0 2rem }
.justify-content-end { justify-content: end; }
.w_190px { width: 190px; }
.p_2rem { padding: 2rem }
.p_3rem { padding: 3rem }
.font_size_50px { font-size: 50px; }
.align-self-flex-end { align-self: flex-end; }

.profile_bg { background-image: url('../images/stockimages/profile_bg.jpg'); background-size: cover; background-repeat: no-repeat; }
.bg_member { background-image: url('../images/stockimages/bg_member.jpg'); background-size: cover; background-repeat: no-repeat; }

.tncmodal .modal-body.minheight_auto { min-height: auto; }
.camera_radius {
 border-radius: 50px;
 background-color: #01A982;
 width: 100px;
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
}

.to_do_body { min-height: 205px; height: 205px; overflow-y: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 16px; border: solid 5px transparent; }
::-webkit-scrollbar-track { background-color: #e1e1e1; }
::-webkit-scrollbar-thumb { background-color: #01A982; }

.mx_2rem { margin: 0 2rem; }
.ml_1rem { margin-left: 1rem; }
.mt_1rem { margin-top: 1rem; }

#Block_Slider .owl-carousel .owl-nav button.owl-prev { left: -60px; position: absolute; top: 40%; }
#Block_Slider .owl-carousel .owl-nav button.owl-next { right: -60px; position: absolute; top: 40%; }

/********* SCROLLING TAB ********/ 

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

.tab-nav-bar { position: relative; }
.tab-navigation { position: relative; align-items: center; }
.tab_bar_borderbottom { height: 1px; width: 100%; background-color: #d3d3d3; position: absolute; bottom: 0; left: 0; }

@media screen and (max-width: 991px) {
 .tab-menu { max-width: 600px; margin: 0px 35px;  }
 .left-btn { left: 0; background: transparent; display: none; }
}

@media screen and (min-width: 992px) {
 .tab-menu { max-width: 930px;  }
 .left-btn { left: -30px; background: transparent; display: none; }
}

.tab-menu {
 /*   color: var(--text-color); */
 /*   background-color: var(--third-color); */
 /*   max-width: 800px; */
  /* border-bottom: 1px solid var(--third-color);
  border-radius: 50px;
  box-shadow: var(--box-shadow); */
  scroll-behavior: smooth;
  user-select: none;
  overflow-x: auto;
  padding: 0;
  list-style: none;
  white-space: nowrap;
 }

 .tab-menu.dragging { scroll-behavior: unset; cursor: grab; }
 .tab-menu::-webkit-scrollbar { display: none; }

 .tab-btn {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  padding: .8rem 1.5rem;
  margin: 0 -2px !important;
  color: rgb(68, 68, 68);
  transition: color .15s ease-in-out, border-color .05s ease-in-out;
  font-size: 1.2rem; 
  border-bottom: 4px solid transparent;
 }
 .tab-btn:hover, .tab-btn:focus { border-color: transparent; border-radius: 0; font-weight: 500; border-bottom: 4px solid #ebebeb; }
 .tab-btn.active { border-color: transparent; border-radius: 0; font-weight: 500; border-bottom: 4px solid #01A982; }

 .tab-menu.dragging .tab-btn { pointer-events: none; }
 .left-btn, .right-btn { position: absolute; cursor: pointer; fill: #01A982; align-self: anchor-center; }
 .right-btn { right: 0; background: transparent; }

/* ===== Tab content ===== */

.tab-content { position: relative; }
.tab_body {
 position: relative;
 width: 100%;
 padding: 2rem 0;
 display: none;
 animation: fadein .8s; 
}

/********* END SCROLLING TAB ********/ 


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

.range-slider.grad {
 --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
 --progress-flll-shadow: var(--progress-shadow);
 --fill-color: linear-gradient(to right, LightCyan, var(--primary-color));
 --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3),
 -3px 9px 9px rgba(255, 255, 255, 0.33) inset,
 -1px 3px 2px rgba(255, 255, 255, 0.33) 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) / 3);
 --progress-shadow: none;
 --progress-flll-shadow: none;
 --thumb-shadow: 0 0 0 5px var(--primary-color) inset, 0 0 0 30px white inset;
 --thumb-shadow-hover: 0 0 0 9px var(--primary-color) inset,
 0 0 0 99px white inset;
 --thumb-shadow-active: 0 0 0 13px var(--primary-color) inset;
}

/* .range-slider.overlay {
  --primary-color: #01A982;
  --track-height: 20px;
  --thumb-size: var(--track-height);
  --thumb-color: var(--primary-color);
  --thumb-shadow: none;
  --progress-flll-shadow: none;
  --progress-shadow: none;
  --progress-background: none;
  --progress-radius: 0px;
  --ticks-color: var(--primary-color);
  --ticks-height: 0;
  --ticks-thickness: 0;
  --ticks-gap: 0px;
  --min-max-font: 500 18px Metric;
  --min-max-opacity: 1;
  --show-min-max: none;
  color: #01A982;
} */
/* .range-slider.overlay input:hover {
  --thumb-shadow: calc(25px - (50px * var(--is-left-most))) 0 0 -15px #01A982
    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: #01A982;
 --value-offset-y: var(--ticks-gap);
 --value-active-color: white;
 --value-background: transparent;
 --value-background-hover: var(--primary-color);
 --value-font: 500 14px/1 Metric;
 --fill-color: var(--primary-color);
 --progress-background: #eee;
 --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: white;
 --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) 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 rgba(0, 0, 0, 0.4);
 --thumb-shadow-hover: var(--thumb-shadow);
 --ticks-thickness: 1px;
 --ticks-height: 5px;
 --ticks-gap: var( --ticks-height, 0 );
 --ticks-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), 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: var(--min-max-font);
 position: absolute;
 bottom: var(--flip-y, 3ch);
 top: calc(6ch * var(--flip-y));
 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: 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, #eee);
 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, 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;
 /*   top: calc( 50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)) ); */
 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) * -.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: #01A982;
}
.range-slider > input + output::after {
 content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
 font: var(--value-font); padding: .5rem;
}

.range-slider, label[dir=rtl] .range-slider { /* width: clamp(300px, 50vw, 800px); */ width: 100%; min-width: 100%; }

#range_drop button.accordion-button2 {
 color: rgb(68, 68, 68); padding: 8px 10px;
 background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e) !important;
 background-repeat: no-repeat; background-position: .25rem 0.25rem; background-size: 16px 12px;
 border: 1px solid rgba(0, 0, 0, 0.36); border-radius: 6px;
}

#range_drop button.accordion-button2::after {
 color: rgb(68, 68, 68); padding: 5px 10px; border-radius: 3px;
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
 background-repeat: no-repeat; background-position: .15rem 0.3rem; background-size: 16px 12px;
 border-radius: 6px;
 transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

#range_drop .accordion-button:not(.collapsed), #range_drop .accordion-button2:hover, #range_drop .accordion-button2:focus, #range_drop .accordion-button2:active {
 color: rgb(68, 68, 68);
 padding: 8px 10px;
 box-shadow: rgb(110, 230, 210) 0px 0px 3px 2px;
 border-radius: 6px;
 background-color: transparent; 
}

#range_drop .accordion-button2::after, #range_drop .accordion-button2:not(.collapsed)::after { filter: brightness(100%) }

/* Chrome, Safari, Edge, Opera */
#range_drop input::-webkit-outer-spin-button,
#range_drop input::-webkit-inner-spin-button, { -webkit-appearance: none; margin: 0; }

/* Firefox */
#range_drop input[type=number] { -moz-appearance: textfield; }

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


#tab_accor #accordion { 
 color: rgb(68, 68, 68); padding: 5px 10px; 
 box-shadow: none; outline: none; appearance: none;
 border-radius: none; background-color: transparent; 
}

#tab_accor  button:focus { 
 outline: none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; 
}
#tab_accor .accordion-header { margin-bottom: 0; padding-bottom: 0; }
#tab_accor .accordion-body { border: 0; border-radius: 0; background-color: #F9F9F9; padding: 0 1.5rem 1.5rem; }
#tab_accor .accordion-button:not(.collapsed) { 
 box-shadow: none; background-color: #F9F9F9; color: inherit; padding: 1.5rem; 
}
#tab_accor .accordion-item { border: none; margin-bottom: 1rem; }
#tab_accor .accordion-button { background-color: #F9F9F9; padding: 1.5rem;     align-items: flex-start; }

#incentive_rightaccordion .accordion-item { 
 background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.36); border-radius: .25rem; margin-bottom: 1rem; 
}
#incentive_rightaccordion .accordion-item .accordion-header  { padding: 0; }

#incentive_rightaccordion .accordion-button:not(.collapsed) {
 color: rgb(68, 68, 68);
 background-color: #fff;
 box-shadow: none;
}

#incentive_rightaccordion .accordion-button:focus { box-shadow: none; }
#incentive_rightaccordion .accordion-flush .accordion-item .accordion-button { border-radius: .25rem;  }
#incentive_rightaccordion .accordion-button { 
 border: 1px solid transparent; padding: 8px 11px 8px 11px; color: rgb(68, 68, 68, .8); font-size: 1.1rem; 
}

#incentive_rightaccordion .accordion-item:hover, #incentive_rightaccordion .accordion-item:active {
 color: rgb(68, 68, 68);
 box-shadow: rgb(110, 230, 210) 0px 0px 3px 2px;
 border: 1px solid #555555
}

#incentive_rightaccordion .accordion_body_scroll { min-height: 220px; height: 220px; overflow-y: auto; }

#incentive_rightaccordion .accordion-body { border-radius: .25rem; padding: 1.25rem; }
#incentive_rightaccordion .accordion-body .form-check:last-child { margin-bottom: 0; }

#incentive_rightaccordion .accordion-body.range_slider { padding: 2rem 1rem 3rem; }

.px_3rem { padding-left: 3rem; padding-right: 3rem; }
.py_2rem { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py_1rem { padding-top: 1rem !important; padding-bottom: 1rem !important; }


@media screen and (max-width: 991px) {
 #resourcelibrary .card-body { padding: 2rem; }
 #resourcelibrary .card-gradient-btn { padding: 0 2rem 2rem; }
 .btn_main_grey {
  background: #F2F2F2;
  color: #555555; font-size: 90%;
  font-weight: 600;
  padding: 10px 50px;
  border-radius: 1rem; border: transparent;
  display: inline-block;
  margin-top: 1rem; 
 }
 .incentive_bannerpoint {
  color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 90px;
  display: flex; justify-content: center; align-items: center;
 }
 .incentive_bannerpoint2 {
  padding: 0 2rem; color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 90px;
  display: flex; justify-content: center; align-items: center;
 }
}

@media screen and (min-width: 992px) {
 .btn_main_grey {
  background: #F2F2F2;
  color: #555555; font-size: 90%;
  font-weight: 600;
  padding: 10px 50px;
  border-radius: 10rem; border: transparent;
  display: inline-block;
  margin-top: 1rem; 
 }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
 #resourcelibrary .card-body { padding: 0; }
 #resourcelibrary .card-gradient-btn { padding-top: 1rem; }
 
 .img_margintop_neg3point5rem { margin-top: -3.5rem; }
 .incentive_bannerpoint {
  padding: 0 2rem; color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 110px;
  display: flex; justify-content: center; align-items: center;
 }
 .incentive_bannerpoint2 {
  padding: 0 2rem; color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 110px;
  display: flex; justify-content: center; align-items: center;
 }
}

@media screen and (min-width: 1200px) {
 .incentive_bannerpoint {
  padding: 0 2rem; color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 134px;
  display: flex; justify-content: center; align-items: center;
 }
 .incentive_bannerpoint2 {
  padding: 0 2rem; color: #ffffff; display: block; line-height: 1.1;
  background-image: url('../images/stockimages/incentive_bannerpoint.jpg');
  background-size: cover; background-repeat: no-repeat; border-radius: 1rem; min-height: 90px;
  display: flex; justify-content: center; align-items: center;
 }
}

.mt_n1point5rem { margin-top: -1.5rem; }

.z_n1 { z-index: -1; }
.z_2 { z-index: 2; }

.membercard_partner_name { position: absolute; color: #fff; z-index: 3; bottom: 13%; left: 8%; font-size: 1rem; }
.membercard_company_name { position: absolute; color: #fff; z-index: 3; bottom: 4%; left: 8%; font-size: 1rem; }

.membercard_partner_reward { position: absolute; color: #fff; z-index: 3; bottom: 31%; left: 14%; font-size: 1rem; }
.membercard_company_reward { position: absolute; color: #fff; z-index: 3; bottom: 26%; left: 14%; font-size: 1rem; }

.mt_3rem { margin-top: 3rem; }
.mb_4rem { margin-bottom: 4rem; }

.greycurve_bg2 { position: relative; }
.greycurve_bg2::after {
 content: "";
 background-image: url('../images/stockimages/greycurve_bg2.jpg'); 
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat; 
 opacity: .2; border-radius: 2rem; 
 top: 0; left: 0; bottom: 0; right: 0;
 position: absolute; z-index: -1; 
}

.transparent_white { background: rgba(255, 255, 255, .35) !important; border: none; }
.round_circle_mask {
 border-radius: 50%;
 background-color: rgba(127, 249, 226, .25);
 width: 90px;
 height: 90px;
 padding: 3rem;
 align-items: center;
 justify-content: center;
 display: flex;
}

.round_circle_camera { 
 background: url('../images/icon/camera.svg');
 width: 40px;
 height: 40px;
 position: absolute;
 margin-left: 55px;
}

.round_circle_gallery { 
 background: url('../images/icon/gallery.svg');
 width: 40px;
 height: 40px;
 position: absolute;
 margin-left: 55px;
}

@media screen and (max-width: 991px) {
 .round_circle_camera, .round_circle_gallery { bottom: 65%; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
 .round_circle_camera, .round_circle_gallery { bottom: 63%; }
}

@media screen and (min-width: 1200px) {
 .round_circle_camera, .round_circle_gallery  { bottom: 35%; }
}

.owl-carousel .owl-item img { display: inline;  }
.font-weight-300 { font-weight: 300 !important; }

.mb_n_10px{ margin-bottom: -10px; }
.font_size_14px { font-size: 14px !important; }
.font_size_12px { font-size: 12px !important; }
.font_size_10px { font-size: 10px !important; }

.bg_curvegreen {
 background-image: url('../images/stockimages/AdobeStock_222468625_1600_0_72_RGB.jpg');
 background-size: cover; background-repeat: no-repeat;
}

.greycurve_bg3 {
 background-image: url('../images/stockimages/GettyImages-1135685118_1600_0_72_RGB.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

.greycurve_bg4 {
 background-image: url('../images/stockimages/GettyImages-1391461393.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

.point_tb_line {
 border-bottom: 2px solid #32DAC8;
 border-top: 2px solid #32DAC8;
 justify-self: anchor-center;
 padding: .5rem;
}

.header_line { width: 65px; height: 4px; margin: 1rem 0; }
.header_line_center { width: 100px; height: 4px !important; margin: 2rem 0 1rem !important; justify-self: anchor-center; }
.fill_white { filter: invert(1); }

.border_gradient_purpleblue { 
 border: transparent;
 border-radius: 25px;
 background-image: linear-gradient(transparent), 
 linear-gradient(45deg, #d221ff, #00dec8);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

.flex_none { flex: none; }
.card-footer { background: transparent; }

#carousel_home .masthead_carousel_home {
 background: url('../images/stockimages/HPE20190301045.jpg') 75% 15%; background-size: cover; 
}

@media screen and (max-width: 991px) {
 #carousel_home .masthead_product img { width: 400px !important; opacity: .8; }
 #carousel_home .masthead_product_text { position: absolute; z-index: 1; bottom: 0; } 
 .xs_mx_auto { margin: 0 auto; }
 .masthead_space { margin-top: 70px; }
 .mastoverlay_carousel {
  background: linear-gradient(235deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, .7) 80%);
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
 }
}

@media screen and (min-width: 992px) {
 #carousel_home .masthead_product img { width: 450px; opacity: 1.0; }
 .my_6rem { margin: 6rem 0; }
 .masthead_space { margin-top: 140px; }
 .masthead_space_noimage { margin-top: 70px; }
 .mastoverlay_carousel {
  background: linear-gradient(235deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .7) 80%);
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
 }
}


@media screen and (min-width: 992px) and (max-width: 1199px) {
 .masthead_space { margin-top: 129px; }
 .masthead_space_nonavigation { margin-top: 70px; }
}

@media screen and (min-width: 1200px) {
 .masthead_space { margin-top: 140px; }
 .masthead_space_nonavigation { margin-top: 80px; }
}

#carousel_home .owl-2-style .card-text { min-height: 5.5rem; }

.modal-content { border: none; }

.carousel-container-middle img { width: 150px; }
.carousel-container-middle2 img { width: 280px; }

.mt_7rem { margin-top: 7rem; }
.mt_66px { margin-top: 66px; }

@media screen and (max-width: 1199px) {
 #prelogin .owl-carousel .owl-nav button.owl-next, #prelogin .owl-carousel .owl-nav button.owl-prev { display: none; }
}

@media screen and (min-width: 1200px) {
 #prelogin .owl-carousel .owl-nav button.owl-next {
  right: -80px;
  position: absolute;
  top: 40%; filter: invert(100%);
 }
 #prelogin .owl-carousel .owl-nav button.owl-prev {
  left: -80px;
  position: absolute;
  top: 40%; filter: invert(100%);
 }
}


#reward table { width: 74%; text-align: left; position: absolute; bottom: 29%; margin: 0 1rem; }
#reward tr { border-bottom: 0; margin: 0; vertical-align: top; }
#reward th, #reward td { padding: 0; }
#reward td:first-child { width: 92px; }
#reward table td { font-size: .8rem; }

@media screen and (min-width: 597px) and (max-width: 991px) {
 #reward table { width: 82%; text-align: left; position: absolute; bottom: 21%; margin: 0 2rem; }
 #reward td:first-child { width: 60px; }
 #reward table td { font-size: 1.3rem; width: 200px; }
 #reward2 table td { font-size: 1.3rem; width: 200px; }
}

#reward2 table { width: 80%; text-align: left; position: absolute; bottom: 6%; margin: 0 1.5rem; z-index: 3; }
#reward2 tr { border-bottom: 0; margin: 0; vertical-align: top; }
#reward2 th, #reward td { padding: 0; }
#reward2 td:first-child { width: 124px; }
#reward2 table td { font-size: 1rem; padding-bottom: 0; }

@media screen and (min-width: 768px) and (max-width: 991px) {
 #reward2 table { width: 70%; text-align: left; position: absolute; bottom: 4%; margin: 0 1rem; z-index: 3; }
 #reward2 table td { font-size: .8rem; }
}

#reward2 td { padding: 0 }

.flip-card-back .flip-card-back-inner img { width: 90px; }
.flip-card-back .flip-card-back-inner img.hpes { width: 130px; }


/********* GRADIENT AUTOPOP ********/ 

#autopop_gradient, #autopop_default { font-size: 0.85em !important; }
#autopop_gradient .modal-content, #autopop_default .modal-content { border-radius: 10px; }
#autopop_gradient .modal-header h4, #autopop_default .modal-header h4 { text-align: center; font-weight: 600; }
#autopop_gradient .modal-body, #autopop_default .modal-body { margin: .6rem .3rem; }
#autopop_gradient ol, #autopop_default ol { list-style-type: decimal; }
#autopop_default ol li > ul li { list-style-type: lower-roman !important; }
#autopop_gradient ol li, #autopop_gradient ul li, #autopop_default ol li, #autopop_default ul li { padding-left: .5rem; padding-bottom: .5rem;}
#autopop_gradient table td, #autopop_default table td { font-size: inherit }
#autopop_gradient td, #autopop_default td { padding: 10px; }
#autopop_gradient h6, #autopop_default h6 { font-size: 1.1rem; }
#autopop_gradient ol li:last-child, #autopop_gradient ul li:last-child, #autopop_default ol li:last-child, #autopop_default ul li:last-child { margin-bottom: 1rem;}

#autopop_gradient .modal_header_purplemargentayellow {
 background: linear-gradient(45deg, #ffc800, #eb3474, #8219f3);
 color: #fff; border-radius: 10px 10px 0 0; justify-content: center;
}

#autopop_gradient .modal_header_purpleblue {
 background: linear-gradient(45deg, #d221ff, #00dec8);
 color: #fff; border-radius: 10px 10px 0 0; justify-content: center;
}

#autopop_gradient .modal_header_purpleblueyellow {
 background: linear-gradient(45deg, #8219f3, #00dec8, #ffc800);
 color: #fff; border-radius: 10px 10px 0 0; justify-content: center;
}

#autopop_gradient .modal_footer_purplemargentayellow { 
 border-image: linear-gradient(45deg, #ffc800, #eb3474, #8219f3) 1;
}
#autopop_gradient .modal_footer_purpleblue { 
 border-image: linear-gradient(45deg, #d221ff, #00dec8) 1;
}
#autopop_gradient .modal_footer_purpleblueyellow { 
 border-image: linear-gradient(45deg, #8219f3, #00dec8, #ffc800) 1;
}

.border_gradient { border: 1px solid; border-image-slice: 1; border-width: 5px;  }
.border_gradient_purplemargentayellow { 
 border-image-source: linear-gradient(45deg, #ffc800, #eb3474, #8219f3); 
 /* Border */
 border: 6px solid transparent;
 border-radius: 1rem;
 background: 
 linear-gradient(to right, white, white), 
 linear-gradient(45deg, #ffc800, #eb3474, #8219f3); 
 background-clip: padding-box, border-box;
 background-origin: padding-box, border-box;
}

.border_gradient_purpleblue { 
 border-image-source: linear-gradient(45deg, #d221ff, #00dec8); 
 /* Border */
 border: 6px solid transparent;
 border-radius: 1rem;
 background: 
 linear-gradient(to right, white, white), 
 linear-gradient(45deg, #d221ff, #00dec8); 
 background-clip: padding-box, border-box;
 background-origin: padding-box, border-box;
}

.border_gradient_purpleblueyellow { 
 border-image-source: linear-gradient(45deg, #8219f3, #00dec8, #ffc800); 
 /* Border */
 border: 6px solid transparent;
 border-radius: 1rem;
 background: 
 linear-gradient(to right, white, white), 
 linear-gradient(45deg, #8219f3, #00dec8, #ffc800); 
 background-clip: padding-box, border-box;
 background-origin: padding-box, border-box;
}

/********* END GRADIENT AUTOPOP ********/ 


.borderbox_lightblue { border: 3px solid #32DAC8; padding: 3rem; border-radius: 1rem; margin: 15px 0; }
.borderbox_purple { border: 3px solid #7630EA; padding: 3rem; border-radius: 1rem; margin: 15px 0; }


@media screen and (max-width: 991px) {
 .md_p_1rem { padding: 1rem !important; }
 .md_px_1point5rem { padding: 0 1.5rem; }
 .arrow_right_pointer { width: 40px; }
}

@media screen and (min-width: 992px) {
 .arrow_right_pointer { width: 60px; }
 .lg_p_1rem { padding: 2rem !important; }
}

@media screen and (max-width: 767px) {
 .xs_p_1rem { padding: 1rem !important; }
 .xs_p_1point5rem { padding: 1.5rem !important; }
 .xs_px_1rem { padding: 0 1rem; }
 .xs_px_1point5rem { padding: 0 1.5rem; }
 .xs_p_1point5rem { padding: 0 1.5rem; }
 .xs_rotate_90deg { transform: rotate(90deg); }
 .xs_tx_center { text-align: center !important; }
}

.block_box_shadow {
 box-shadow: 0rem 3rem 2rem -3rem rgb(0 0 0 / 70%), 0 0rem 8rem 0 rgba(0, 45, 64, 0.1);
}

@media screen and (max-width: 991px) {
 #autopop_default th { padding: 0.7rem 0.75rem; min-width: auto; }
}


/*START_#19838_20250711*/

#APAC_home .masthead_APAC_home_01 {
 background: url('../images/stockimages/HPE202302230363.jpg') 80% 15%; background-size: cover; 
}
#APAC_home .masthead_APAC_home_02 {
 background: url('../images/stockimages/GettyImages-467192824_RF_1600_0_72_RGB.jpg') 90% 15%; background-size: cover; 
}
#APAC_home .masthead_APAC_home_03 {
 background: url('../images/stockimages/HPE_Structure_Orange.jpg') 80% 15%; background-size: cover; 
}
#APAC_home .masthead_APAC_home_04 {
 background: url('../images/stockimages/HPE202208240031170_1600_0_72_RGB.jpg') 80% 15%; background-size: cover; 
}

.masthead_APAC_incentive {
 background: url('../images/stockimages/HPE20200310023.jpg') 92% 15%; background-size: cover; 
}

.minheight_148px { min-height: 148px; } 
.minheight_320px { min-height: 320px; } 

.masthead_space_prelogin { margin-top: 80px; }

/*#19838_END*/

.tooltip .tooltip-inner { text-align: left; }
.small { font-size: 1rem; }
.mb_7rem { margin-bottom: 7rem !important; }
.fill_blue { filter: brightness(0) saturate(100%) invert(41%) sepia(95%) saturate(2503%) hue-rotate(178deg) brightness(95%) contrast(97%); }


@media screen and (max-width: 1199px) {
 .masthead_space_marqueetag { margin-top: 123px !important; }
 .marqueetag { top: 70px; }
}

@media screen and (min-width: 1200px) {
 .masthead_space_marqueetag { margin-top: 133px !important; }
 .marqueetag { top: 80px; }
}

.marquee { font-size: 18px; font-weight: 500; color: #ffffff; padding: 15px; text-shadow: 0px 1px 2px rgba(0, 0, 0, .4)}
.marqueetag { text-align: center; z-index: 2; position: fixed; }

.gradient_border_greenblue { 
 border: transparent;
 border-radius: 10px;
 background-image: linear-gradient(white, white), 
 linear-gradient(45deg, #66d578, #00dec8);
 background-origin: border-box;
 background-clip: content-box, border-box;
 padding: 3px;
}

.gradient_greenblue { background: linear-gradient(45deg, #66d578, #00dec8); }

.tx_greenblue { 
 background: linear-gradient(45deg, #66d578, #00dec8);
 content: '';
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}
.tx_greenyellow { 
 background: linear-gradient(225deg, #FF8300, #FEC901, #2ECC40, #3D9970);
 content: ''; margin-bottom: ;
 background-size: 100% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
}

.smallnote_16px { font-size: 16px; font-weight: 300; }

.bordertop_lightblue { height: 3px; background-color: #7FF9E2; margin: 1rem 0; }
.bordertop_purple { height: 3px; background-color: #7630EA; margin: 1rem 0; }
.bordertop_orange { height: 3px; background-color: #FF8300; margin: 1rem 0; }
.bordertop_lightpurple { height: 3px; background-color: #C140FF; margin: 1rem 0; }
.bordertop_yellow { height: 3px; background-color: #FEC901; margin: 1rem 0; }
.bordertop_green { height: 3px; background-color: #01A982; margin: 1rem 0; }
.pointbox_purpleblue { border-width: 12px; padding: 2rem; border-style: solid; border-image: linear-gradient(45deg, #d221ff, #00dec8) 1; }
.block_img { object-fit: cover; height: 300px; width: 100%; object-position: top; }  

.pointbox_purplemagentayellow { 
 border-width: 12px; padding: 2rem;
 border-style: solid;
 border-image: linear-gradient(45deg, #ffc800, #eb3474, #8219f3) 1;
}

@media (min-width: 992px) {
 .label_NEW_purpleblue { 
  background: linear-gradient(45deg, #d221ff, #00dec8);
  padding: .5rem 1rem; position: relative;
  color: #ffffff; border-radius: 30px; font-weight: 600;
  bottom: .35rem; margin-right: .5rem;
 }
 .label_purplemagentayellow { 
  background: linear-gradient(225deg, #ffc800, #eb3474, #8219f3);
  padding: 0.25rem .8rem; color: #ffffff;
  border-radius: 30px; font-size: 65%;
  font-weight: 600; bottom: 6px; position: relative;
  margin-right: .3rem;
 }
}

@media (max-width: 991px) {
 .label_NEW_purpleblue { 
  background: linear-gradient(45deg, #d221ff, #00dec8);
  padding: .5rem 1rem; position: relative;
  color: #ffffff; border-radius: 30px; font-weight: 600;
  bottom: 0; margin-right: .5rem;
 }
 .label_purplemagentayellow { 
  background: linear-gradient(225deg, #ffc800, #eb3474, #8219f3);
  padding: 0.25rem .8rem; color: #ffffff;
  border-radius: 30px; font-size: 65%;
  font-weight: 600; bottom: 3px; position: relative;
  margin-right: .3rem;
 }
}

.radiusbox_purpleblue {
 background: linear-gradient(45deg, #d221ff, #00dec8);
 color: #ffffff;
 font-weight: 600;
 padding: 1rem 3rem;
 border-radius: 10rem; 
 display: inline-block;
}

.label_NEW_purpleblue2 { 
 background: linear-gradient(45deg, #d221ff, #00dec8);
 padding: 0.35rem .8rem; color: #ffffff;
 border-radius: 30px;
 font-size: 65%;
 font-weight: 600;
}

span.label_NEW { 
 background: linear-gradient(225deg, #eb3474, #7630ea, #01d9a6);
 padding: 0.35rem .8rem; color: #ffffff;
 border-radius: 30px;
 font-size: 65%;
 font-weight: 600; word-break: keep-all;
 margin-left: .3rem; 
}

span.label_NEW_purplemagentayellow { 
 background: linear-gradient(225deg, #ffc800, #eb3474, #8219f3);
 padding: 0.25rem .8rem; color: #ffffff;
 border-radius: 30px; float: inline-end;
 font-size: 90%;
 font-weight: 600;
 margin-left: .3rem;
}

span.label_NEW_purpleblueyellow { 
 background: linear-gradient(45deg, #8219f3, #00dec8, #ffc800);
 padding: 0.25rem .8rem; color: #ffffff;
 border-radius: 30px;
 font-size: 90%;
 font-weight: 600;
 margin-left: .3rem;
}


.w_100px { width: 100px; }
.my_2rem { margin: 2rem; }
.my_4rem { margin: 4rem 0 !important; }
.p_4rem { padding: 4rem !important; }

.bordertop_orange2 { height: 4px; background-color: #FF8300; margin: 2rem auto; width: 100px; }
.label_place { margin-top: -2rem; margin-right: -1rem; text-align: right; }
.label_NEW { margin-left: 1.5rem; position: absolute; }


@media screen and (max-width: 991px) {
 .icons_openbox_smartchoice img { width: 120px; }
 .dotted_line_vertical { border-right: 3px dotted #FF8300; height: 30px; left: -50%; position: relative; bottom: -50%; }
 .microsite_smartchoice_product img { width: 420px; }
}

@media screen and (min-width: 992px) {
 .icons_openbox_smartchoice img { width: 130px; }
 .dotted_line_horizontal { border-bottom: 3px dotted #FF8300; height: 3px; width: 50%; left: 25%; position: absolute; bottom: 42%; }
}

.pointbox_bluemargentayellow { 
 border-width: 12px; padding: 2rem;
 border-style: solid;
 border-image: linear-gradient(45deg, #fec901, #af42f0, #0d5265) 1;
}

.accordion_button_none::after { display: none; cursor: none; }
.label_NEW_left_purplemagentayellow { 
 background: linear-gradient(225deg, #ffc800, #eb3474, #8219f3);
 padding: 0.25rem .8rem; color: #ffffff;
 border-radius: 30px; 
 font-size: 90%;
 font-weight: 600;
 margin-left: .3rem;
}

@media screen and (min-width: 1200px) {
 .bottom_recommended_icon img {
  width: 120px;
  min-height: 140px;
  object-fit: contain;
 }
 .xl_mb_4rem { margin-bottom: 4rem !important; }
 .xl_pb_4rem { padding-bottom: 4rem !important; }
}

@media screen and (max-width: 1199px) {
 .bottom_recommended_icon img {
  width: 100px;
  min-height: 140px;
  object-fit: contain;
 }
}

.down_arrow {
 background-image: url('../images/icon/down_arrow.svg');
 width: 160px;
 position: absolute;
 height: 200px;
 top: -96px;
 left: -78px;
 background-repeat: no-repeat;
}

.bordertop_lightblue { height: 3px; background-color: #7FF9E2; margin: 1rem 0; }
.bordertop_purple { height: 3px; background-color: #7630EA; margin: 1rem 0; }
.bordertop_orange { height: 3px; background-color: #FF8300; margin: 1rem 0; }
.bordertop_lightpurple { height: 3px; background-color: #C140FF; margin: 1rem 0; }
.bordertop_yellow { height: 3px; background-color: #FEC901; margin: 1rem 0; }
.bordertop_green { height: 3px; background-color: #01A982; margin: 1rem 0; }
.bordertop_orange2 { height: 4px; background-color: #FF8300; margin: 2rem auto; width: 100px; }

.datablock_bg {
 background-image: url('../images/stockimages/HPE_AI_texture_datablocks.jpg');
 background-size: cover; padding: 1rem 0; background-repeat: no-repeat;
}

#NormalTable table td { font-size: inherit; padding: 0; text-align: left; vertical-align: middle; } 
#NormalTable table { width: 100%; border-collapse: collapse; display: table }

.carousel_logo { width: 260px !important; }
.card_block_body { padding: 1.5em ; border: 0; background: transparent; }

.card_img_objectfit img { width: 100%; object-fit: cover; object-position: center; border-radius: 1rem 1rem 0 0; }


/******** TAC 2025 (PCBE VME) ********/
/******** END TAC 2025 (PCBE VME) ********/