/**
 * Stripped-down compatibility layer for StandardUI-based MasterPages.
 * Includes short snippets based on styles under hp-web-style-v1.7-global.css.
 */

/*                                                                          */
/* GLOBAL NAVIGATION                                                        */
/*                                                                          */

/* Layer the HP Global Nav overlay higher than secondary navs */

#content > #header {
    z-index: 1000;
}

/* Country Selector */
.country-selector-wrapper {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    font-size: 0.875rem;
}

/* Modal Country Selector Pop-up Styles */
.modalWindow {
    display: none;
    overflow: auto;
    position: absolute;
    z-index: 1150;
}

.modalCountrySel {
    position: absolute;
    height: 30rem;
    width: 80rem;
    max-width: calc(100% - 2rem);
    background: white;
    border: 1px solid black;
    z-index: 1201;
}

.modalCountrySel a.closebtn {
    background: url(../images/icons/s-hf-hpe.gif) no-repeat -368px -9px transparent;
    cursor: pointer;
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1300;
}

.modalCountrySel .CntrySelRegion {
    padding: 3rem 2rem 1rem;
    position: absolute;
}

.modalCountrySel ul.cntry-list,
.modalCountrySel .CntryList {
    display: grid;
    column-gap: 0.5rem;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: row dense;
}

@media screen and (min-width: 480px) {
    .modalCountrySel ul.cntry-list,
    .modalCountrySel .CntryList {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .modalCountrySel ul.cntry-list,
    .modalCountrySel .CntryList {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .modalCountrySel ul.cntry-list,
    .modalCountrySel .CntryList {
        grid-template-columns: repeat(6, 1fr);
    }
}

.modalCountrySel ul.cntry-list li {
    display: block;
}

#opaqueLayer {
    position: absolute;
    width: 100%;
    height: 0px;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    left: 0px;
    z-index: 1200;
    top: 0px;
    background-color: #000;
    opacity: .5;
}

/*                                                                          */
/* NEW LANDING PAGE                                                         */
/*                                                                          */

/* NLP Sticky Nav */

#nlp-nav.secondary-nav {
    background: rgb(var(--theme-bg-muted) / 100%);
}

@media screen and (min-width: 1280px) {
    #nlp-nav.secondary-nav .title.accordion-toggle {
        display: none;
    }
}

/* PageWide Banners Behavior */

@media screen and (max-width: 720px) {
    .nlp-main-banner {
        display: none !important;
    }
    .nlp-main-banner-fallback {
        display: block !important;
    }
}

/* Add support for legacy flex tables inside standard content blocks (mainly from product table nuggets). */
.std-content-block [width="100%"] {
    overflow-x: auto;
}

.std-content-block .flex-table {
    margin: 2rem 0;
    width: 100%;
}

    .std-content-block .flex-table:first-child > tr:first-child:last-child {
        border-bottom: 1px solid rgb(var(--theme-border-weak) / 25%);
    }

    .std-content-block .flex-table tr + tr {
        border-top: 1px solid rgb(var(--theme-border-weak) / 25%);
    }

    .std-content-block .flex-table th,
    .std-content-block .flex-table td {
        text-align: left;
        padding: 0.5rem 0;
        padding-right: 0.5rem;
    }

@media screen and (min-width: 1280px) {
    .std-content-block .flex-table th,
    .std-content-block .flex-table td {
        padding: 1rem 0;
        padding-right: 1rem;
    }
}

.std-content-block .flex-table th {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Add support for legacy info popups in CMS Start Pages. */
.info-popup {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(https://h41201.www4.hp.com/WMCF.Web/Customizations/HP/HPE/images/icons/help_icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.info-popup-text {
    display: none;
    min-height: 100px;
    background-color: #FFFFFF;
    border: #CCC 2px solid;
    position: relative;
    padding: 20px;
    min-width: 350px;
    width: 450px;
    max-width: 450px;
    z-index: 10000;
    float: left;
    top: 5px;
    left: 5px;
}

/* Override full-width StandardUI product cards on NLP to force max-width images & adjust proportions. */

.nlp-product-module-grid-container .product-module-card .card-media img {
    width: 100%;
    max-width: 24rem;
    margin: auto;
}

@media screen and (min-width: 1024px) {
    .nlp-product-module-grid-container .product-module-card.full-width {
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 1fr auto;
    }

    .nlp-product-module-grid-container .product-module-card.full-width .card-media {
        grid-row: span 2;
    }
}

@media screen and (min-width: 1280px) {
    .nlp-product-module-grid-container .product-module-card.full-width {
        grid-template-columns: 1fr 2fr;
    }
}