﻿/*parts store general styles*/

th {
    background-color: #767676;
    color: #fff;
    font-weight: bold;
    font-size: 16px !important;
}

.table-bordered td, .table-bordered th {
    border: 1px solid #ccc;
}

/* input and button styles */

.btn {
    padding: 6px 10px;
    border-radius: 0 4px;
    font-weight: bold;
}



.btn-primary {
    background-color: #0096d6 !important;
    color: #fff !important;
}



    .btn-primary:hover {
        background-color: #006699 !important;
    }

.btn-secondary:hover {
    background-color: #5a5a5a !important;
}

.ajax__combobox_textboxcontainer input {
    min-width: 220px;
}

.no-min-width .ajax__combobox_textboxcontainer input {
    min-width: inherit !important;
}

.no-min-width .ajax__combobox_buttoncontainer {
    max-width: 33px;
}





.btn-secondary {
    background-color: #767676 !important;
    color: #fff !important;
}



input, textarea {
    border: 2px solid #ccc;
    border-radius: 0px;
    padding: 1rem .375rem;
}

textarea {
    padding: 2px 8px;
}

.CustomComboBoxStyle {
    clear: both;
}

    input[type='text'], .CustomComboBoxStyle .ajax__combobox_textboxcontainer input[type='text'], textarea {
        width: 100%;
        max-width: 300px;
        height: 33px;
        margin-bottom: 3px;
        margin-top: 3px;
    }

.main-input-hold input[type='text'] {
    max-width: inherit;
}
/*removing main search max width cap - Suresh*/
input.input-xs {
    max-width: 80px;
}

/*input custom checkbox style */

input[type='checkbox'] {
    width: 18px;
    height: 15px;
}


.chkbox .chbx {
    padding: 6px 0 0;
}

input[type='radio'] {
    width: 18px;
    height: 18px;
}

.rdbut {
    margin-right: 5px;
}

    .rdbut span.hidden {
        display: inline-block !important;
        visibility: visible !important;
    }

    .rdbut .rbtn {
        background-image: none;
        position: relative;
        top: 1px;
        padding-left: 0;
    }

.rdbtn_space {
    margin-right:30px;
}

.input-3 {
    margin-bottom: 15px;
}




    /*.input-3, .input-4 {max-width: 425px;}*/ /*Suresh - for uniform width */

    .input-3 input[type='text'] {
        width: 92px;
        max-width: 31.5%;
    }
/*Suresh - for uniform width */

.input-4 input[type='text'] {
    max-width: 20%;
}

input.input-lg {
    max-width: 400px;
}

input.input-sm {
    max-width: 200px;
}

.CustomComboBoxStyle .ajax__combobox_buttoncontainer button {
    background-color: #fff;
    border: 0px;
    background: url(../i/icon_down_arrow.png) no-repeat center;
    height: 33px !important;
    width: 33px !important;
}

.CustomComboBoxStyle .ajax__combobox_buttoncontainer_error button {
    height: 33px !important;
    width: 33px !important;
}




.CustomComboBoxStyle .ajax__combobox_buttoncontainer {
    border: solid 2px #ccc;
    padding-right: 5px;
    padding-left: 3px;
    text-align: center;
}

.CustomComboBoxStyle ajax__combobox_textboxcontainer input {
    background-color: #fff;
    border: 0;
    border-right: 0px none;
    height: 22px;
    padding-left: 6px;
    font-size: 14px;
    width: 140px;
}

.CustomComboBoxStyle .ajax__combobox_itemlist li {
    border-left-width: 0;
    border-right-width: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.CustomComboBoxStyle .ajax__combobox_itemlist {
    border: 1px #ccc solid;
}

.CustomComboBoxStyle .ajax__combobox_textboxcontainer {
    border: solid 2px #ccc;
}

.ajax__combobox_textboxcontainer input {
    border: none !important;
}





.btn_indicator .arrow_right, .right-arrow {
    padding: 5px 6px 4px 6px;
    background-color: #767676;
    width: 30px;
}

    .right-arrow .icon {
        background-image: url('../i/s-15px-hpe.png');
        vertical-align: middle;
        background-position: left -2756px;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

.btn_indicator .btn_inner, .right-arrow {
    height: 24px;
    border-radius: 0 4px;
}



.nav-bg {
    background-color: #0096D6;
}

    .nav-bg .navbar-nav .nav-link, .nav-bg .navbar-nav .active > .nav-link, .nav-bg .navbar-nav li:hover > .nav-link, .nav-bg .navbar-nav .nav-link:focus, .nav-bg .navbar-nav .nav-link:hover {
        color: #fff;
        padding: 0;
        line-height: 150%;
        margin-top: 7px;
        border-bottom: 4px solid transparent;
    }

    .nav-bg ul.navbar-nav > li {
        white-space: nowrap;
    }

        .nav-bg ul.navbar-nav > li:not(:last-child) {
            margin-right: 35px;
        }

.navbar {
    padding: 0;
}



.brd-r {
    border-right: 1px #ccc solid;
}

.hpps-header h1 {
    font-family: HPSimplified;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    text-align: left;
    margin: 20px 0;
}

.icon-dwn:before {
    content: "\e601";
}

[class^="icon-"]:not(.icon-content), [class*=" icon-"]:before {
    font-family: 'HPControlIcons';
    position: relative;
    font-size: 16px;
    top: 1px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    font-smoothing: antialised;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#slider {
    position: relative;
    background-color: #000;
    width: 100%;
}

    #slider .carousel-inner .item img {
        min-width: 100%;
        float: right;
    }

#slide-home {
    visibility: hidden;
}



.indicator-hold {
    display: none;
}

.slide-search .btn {
    padding: 0;
    border-color: #0096D6;
    border-radius: 0;
}

.search-cat, .slide-search .btn {
    background-color: #0096D6;
}

    .search-cat button {
        color: #fff;
        padding: 0 10px !important;
    }

.search-cat-title {
    min-width: 230px;
    max-width: 330px;
}

button.search-cat-title:hover {
    background-color: #0096D6 !important;
    cursor: none !important;
}

.slide-search .btn:focus, .slide-search .btn:hover, .slide-search .btn:hover input {
    background-color: #069;
}

.slide-search .btn, .slide-search input {
    height: 46px !important;
}

.slide-search .btn-search {
    height: 46px;
    width: 46px;
}



.text-white {
    color: #fff !important;
}

.container {
    max-width: 1250px !important;
}

/*to match the theme layout width */

/* slider indicators*/

#myCarousel .list-inline {
    white-space: nowrap;
}

#myCarousel .carousel-indicators {
    cursor: pointer;
    width: auto;
    margin-left: auto;
}

    #myCarousel .carousel-indicators > li {
        width: initial;
        height: initial;
        text-indent: initial;
        width: auto;
        height: auto;
        text-indent: inherit;
    }

        #myCarousel .carousel-indicators > li.active img {
            opacity: 0.7;
        }

#myCarousel .carousel-indicators {
    justify-content: flex-start;
    margin-right: 0;
    display: flex;
    align-items: stretch;
    width: 100%; /*to extend full width*/
    z-index: 3;
}

.carousel-indicators li, .carousel-indicators .active {
    background-color: transparent;
    flex-grow: 1; /*to extend full width*/
}

#myCarousel .carousel-indicators > li img {
    max-width: 100%;
}

/*carousel fade effect*/

.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    position: absolute;
    min-height: 350px;
    transition: opacity ease-out .7s;
}

    .carousel.carousel-fade .carousel-item.active {
        display: block;
        opacity: 1 !important;
    }

.carousel-inner {
    min-height: 290px;
}

nav .dropdown-toggle::after, .navbar-toggler-icon::after {
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg) translate(0px, 2px);
    -webkit-transform: rotate(45deg) translate(0px, 2px);
    /*transition: all 0.4s ease;*/
    content: '';
}

nav .nav-item.dropdown.show .dropdown-toggle::after, .navbar-toggler-icon::after, .dropdown-caret-flip::after {
    transform: rotate(226deg) translate(0px, -1px);
    -webkit-transform: rotate(226deg) translate(0px, -1px);
}

.navbar-toggler-icon {
    background-image: none !important;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    color: #FFF !important;
    text-align: left;
    width: auto;
    font-size: 16px;
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
    margin-left: 10px;
    transform: rotate(45deg) translate(-4px, -2px);
    -webkit-transform: rotate(45deg) translate(-4px, -2px);
}

.navbar-toggler .navbar-toggler-icon::after {
    margin-left: 10px;
    transform: rotate(226deg) translate(0px, -1px);
    -webkit-transform: rotate(226deg) translate(0px, -1px);
}

.navbar-nav a.dropdown-item {
    color: #767676;
    padding: 10px;
    padding-left: 20px;
}



.input-group-prepend a.dropdown-item {
    padding: 10px;
    padding-left: 20px;
}



.navbar-nav a.dropdown-item:hover {
    text-decoration: none;
    color: #0096D6 !important;
    background-color: #f8f9fa;
}



.dropdown-menu a.dropdown-item {
    color: #767676;
}

    .dropdown-menu a.dropdown-item:hover {
        text-decoration: none;
        color: #0096D6 !important;
        background-color: #f8f9fa;
    }



.card-header {
    color: #fff;
    height: 75px;
    font-size: 18px;
    line-height: 18px;
    font-weight: normal;
}

    .card-header img {
        margin-right: 10px;
        float: left;
    }

.feature-col > div [class*="col-"] {
    float: left;
    padding: 0;
    border: none;
}

.card, .card-header {
    border-radius: 0 !important;
}

.card-header {
    height: 70px;
    color: #fff;
}

.card-body {
    text-align: center;
}

.card-header {
    margin-bottom: 15px;
}

.feature-col .card-body {
    border-right: 1px #ccc solid;
}

.no-brd, .no-brd-tr > tbody > tr, .no-brd-td > tbody > tr > td, .no-brd-tr tr:first-child, .no-brd-td td:first-child {
    border: none !important;
    border-color: transparent !important;
}

.slide-search {
    position: absolute;
    top: 70px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    z-index: 1; /* changed 4 to 1 for global menu*/ /*--HPPST-795 --*/
}

.car-indi-wrap {
    left: 0;
    right: 0;
    bottom: 0;
}

.carousel-indicators li:first-child {
    margin-left: 0;
}

.super-topband {
    border-bottom: solid 1px #f2f2f2;
    line-height: 29px;
}



.main-search {
    padding: 30px 0;
    z-index: 999;
}

@media screen and (max-width: 450px) {
    .main-search {
        padding: 10px 0;
        z-index: 999;
    }
}

    .top-nav-pipe {
        color: #cdcdcd;
    }

    .top-nav-pipe {
        padding: 0 8px;
    }



    .modal-dialog {
        padding-top: 15vh;
    }

    .super-topband a {
        color: #0096d6;
        text-decoration: none;
        font-size: 13px;
        padding-right: 14px;
        display: inline-block;
    }



        .super-topband a:hover {
            text-decoration: underline;
        }



    .super-topband .dropdown-menu a {
        border-top: 1px solid #cecece;
        display: block;
        width: 100%;
        cursor: pointer;
        padding: 10px 0;
        line-height: 29px;
        font-size: 16px;
    }

    .super-topband .dropdown-menu .popcartlnk {
        padding: 10px 0;
    }

    .super-topband .dropdown-menu .popcartbtn {
        padding: 10px 30px;
        width: auto;
    }

    .super-topband .dropdown-menu a:first-child {
        border-top: medium none;
        display: block;
    }

    .super-topband .dropdown-item:focus, .user-profile .dropdown-item:hover {
        background-color: transparent;
        color: #0096d6;
        text-decoration: underline;
    }

    .notice-band {
        background-color: #5A5A5A;
        height: 40px;
        padding-top: 5px;
        font-size: 20px;
        font-weight: 100;
    }

    .user-profile {
        position: relative;
    }

    .cart-number {
        width: 17px;
        line-height: 17px;
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        background-color: #0096D6;
        display: inline-block;
        color: #fff;
        margin-left: -10px;
        position: absolute;
    }

    .dropdown-toggle.no-caret-drop::after, .sign-blk .no-caret-drop::after {
        border: none;
        padding: 0;
        margin: 0;
    }

    .sign-blk .no-caret-drop::after {
        content: none !important;
    }

    .fa-shopping-cart {
        color: #000 !important;
    }

    .drop-content {
        min-width: 350px;
        padding: 15px;
    }

        .drop-content h5 a {
            color: #0096D6;
            border-bottom: 1px solid #cecece;
            padding-bottom: 10px;
            text-align: center;
            font-size: 1.25rem !important;
        }

    .main-input-hold, .main-input-hold .form-control {
        display: flex;
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        border-width: 2px;
    }

    .profile-btn {
        cursor: pointer;
    }

    .search-cat {
        flex-grow: 0 !important;
    }

    .user-profile a::before, .user-profile .sign-blk a::before {
        content: '|';
        padding-right: 14px;
        color: #0096d6;
        border-width: 0 !important;
        height: auto;
    }

    .user-profile .supertop-links > a:first-child::before {
        content: '';
        padding: 0;
    }

    .user-profile .dropdown-menu a::before {
        padding-right: 0;
        content: '';
    }

    .carousel-indicators {
        position: static;
        margin-bottom: 0;
    }

    .indicator-hold {
        background-color: #272727;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .indicator-hold button.search-collapse-btn {
            border-radius: 0;
            position: relative !important;
            padding: 5px 15px !important;
        }

            .indicator-hold button.search-collapse-btn .navbar-toggler-icon {
                float: left;
            }

    .black-border {
        border: 1px solid black;
    }

    .indicator-hold button.search-collapse-btn .navbar-toggler-icon::after {
        position: absolute;
        right: 15px;
        top: 45%;
    }

    .pop-question {
        background-image: url(../i/s-15px-hpe.png);
        _background-image: url(../i/s-15px-ie6-hpe.gif);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: right -2232px;
        width: 15px;
        height: 18px;
        display: inline-block;
        padding-left: 6px;
        line-height: 14px;
    }

    .dropdown-menu {
        top: 100% !important;
    }



    /*drop down style*/



    .btn-slim {
        padding: 2px 8px !important;
    }



    .btn-slim-primary {
        background-color: #0096d6;
        color: #fff !important;
    }



    .print-result {
        position: absolute;
        right: -56px;
        bottom: 44px;
    }



    .pro-id-blk h2 {
        line-height: 2.2;
        font-weight: 100;
        color: #5a5a5a;
        font-size: 28px;
    }

    .hpps_topwrapper {
        position: relative;
        z-index: 25;
        padding-top: 2px;
        padding-bottom: 1px;
        background: #fff;
        /*border-bottom: solid 1px #f2f2f2;*/
        width: 100%;
        min-height: 27px;
    }

    dropdown-item.active, .dropdown-item:active {
        color: #fff !important;
    }

    .rma-blk .row, .ol-reg-blk .row, .feedback-blk .row {
        margin-bottom: 15px;
    }

        .ol-reg-blk .row > div, .feedback-blk .row > div {
/*            width: 100%;*/ /*HPPST-795*/ 
        }

    .profile-wrap a.dropdown-item {
        padding: 10px 15px;
    }



    .container {
        max-width: 1220px;
        /*for body content extension*/
        margin: 0 auto;
    }

    /*pop over style*/

    .blk-link {
        padding: 15px 0;
        display: block;
        border-top: 1px #ccc solid;
    }

    .pop-container {
        width: 210px;
    }

    .popover:after {
        background-color: black;
    }

    .hpps-comboBox ul {
        min-width: 270px;
        width: auto !important;
        min-height: 30px;
        height: auto !important;
        overflow-y: auto !important;
    }

    .no-min-width.hpps-comboBox ul {
        min-width: inherit !important;
        max-height: none;
    }

        .no-min-width.hpps-comboBox ul li {
            word-break: break-all;
            white-space: pre-wrap;
        }

    .no-min-width .ajax__combobox_inputcontainer {
        width: 100%;
    }
    /*overwrite default bootstrap carat */

    .dropdown-toggle::after {
        border: solid #fff;
        border-width: 0 1.5px 1.5px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg) translate(0px, 2px);
        -webkit-transform: rotate(45deg) translate(0px, 2px);
        margin-left: 5px;
        margin-bottom: 3px;
    }

    .profile-btn.dropdown-toggle::after {
        border-color: #212529;
        padding: 2px;
        transform: rotate(45deg) translate(0px, 1px);
        -webkit-transform: rotate(45deg) translate(0px, 1px);
    }

    .mt-n5 input {
        margin-top: -5px;
    }

    .btn-fullWide {
        width: 100%;
    }

    .btn-minwide {
        min-width: 170px;
    }

    /*dropdown carat */

    .profile-wrap:before, .shop-wrap:before, .user-profile .sign-blk a:before {
        border-color: #c4c4c4 transparent transparent;
        border-style: solid;
        border-width: 10px 10px 0;
        top: -10px;
        content: "";
        height: 0;
        position: absolute;
        right: 25px;
        text-align: center;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        width: 0;
    }

    .profile-wrap:after, .shop-wrap:after {
        border-color: #fff transparent transparent;
        border-style: solid;
        border-width: 10px 10px 0;
        top: -8px;
        content: "";
        height: 0;
        position: absolute;
        right: 25px;
        text-align: center;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        width: 0;
        z-index: 999999;
    }

    .shop-wrap:after, .shop-wrap:before {
        right: 17px;
    }

    .user-profile .sign-blk a:after, .user-profile .sign-blk a:before {
        right: 100px;
    }

    .drop-content.profile-wrap:after, .drop-content.profile-wrap:before {
        right: 30px;
    }



    .desc-text {
        font-size: 14px;
        color: #5a5a5a;
    }

    .list-links-float a {
        float: left;
        margin-right: 8px;
    }

    .list-links-float td, .word-break-col {
        word-break: break-all;
    }

    .text-2-indent {
        margin-left: 0.7em;
    }

        .text-2-indent a {
            margin-left: -0.7em;
        }

    /* end new style updates*/



    /*temp-start*/

    .parts-table tr td, .parts-table tr th, .parts-table1 tr td, .parts-table1 tr th {
        vertical-align: middle;
    }

    table.td-d-block-md > tbody > tr > td {
        border: none !important;
    }

    /*No bold table heading row */

    .parts-table th, .parts-table1 th {
        font-weight: 100;
    }

    .pagination-inline.parts-table td td {
        display: table-cell;
    }

    .pagination-inline.parts-table tr:last-child table td {
        border: 1px solid #ccc;
    }





    body {
        transform: none !important;
    }
    /*fix transform y pop-up issue*/



    .parts-hidden-table td, .parts-hidden-table tr {
        border: 0;
    }



    .parts-hidden-table {
        border: 1px solid #ccc;
        width: 100%;
        font-size: 14px;
    }







        /* Close btn image*/

        .parts-hidden-table .parts-hidden-table-header a, .close-btn-lg {
            background-image: url('../i/s-21px-hpe.png');
            background-position: 0px -500px;
            background-repeat: no-repeat;
            background-color: transparent;
            width: 20px;
            height: 20px;
            display: inline-block;
            float: right;
            border: 0px;
        }



    /*.form-divider-horizontal{

          margin : 0px;

          border-top: 1px solid black;

      }*/

    /*temp-end*/


    @media screen and (max-width: 992px) {

        .divVideoJPSmall {
            display: none;
        }

        .show-sm {
            display: block;
        }



        .no-brd-md {
            border-color: transparent !important;
        }

        /*temp-start*/

        .parts-table, .parts-table1 {
            border-collapse: collapse;
            border: 0;
        }



            .parts-table td, .parts-table1 td {
                display: block;
                border: none;
                padding: .30rem;
            }

                .parts-table td.hiddencol {
                    display: none !important;
                }

            .parts-table tr th, .parts-table1 tr th {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }



            .parts-table tr, .parts-table1 tr {
                border: 1px solid #ccc;
            }



        .parts-hidden-table td {
            padding-top: 10px;
            padding-bottom: 10px;
        }



        .bottom-fixed-btns {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            display: inline-block;
            background-color: #eee;
            z-index: 2;
        }



            .bottom-fixed-btns .btn {
                border-radius: 0px;
                height: 42px;
            }



            .bottom-fixed-btns .proceedBtn {
                width: 50%;
                float: right;
            }



            .bottom-fixed-btns .addToCartBtn, .bottom-fixed-btns .updateCartBtn {
                width: 50%;
                float: left;
            }



        .parts-table td:before {
            content: attr(data-th) " ";
            font-weight: bold;
        }

        .parts-table1 td:before {
            content: attr(data-th1) " ";
            font-weight: bold;
        }

        /*temp-end*/



    }

    .pg-link {
        color: white !important;
    }

        .pg-link a a:link a:visited {
            color: white !important;
        }

    @media screen and (min-width: 768px) {

        /*.divVideoJPSmall {
        display: none;
    }*/

        .pg-width {
            padding-left: 65px !important;
        }
    }

    @media screen and (min-width: 543px) {
        .pg-display {
            display: inline-block;
        }

        .pg-width {
            width: 39.4%;
            min-width: 39.4%;
            max-width: 39.4%;
            padding-left: 15px;
        }

        .pg_right_blue_arrow {
            display: none !important;
        }
    }

    @media screen and (max-width: 542px) {
        .pg-display {
            display: none !important;
        }

        .pg-width {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            padding-right: 0px;
            border-top-right-radius: .25rem !important;
            border-bottom-right-radius: .25rem !important;
        }

        .pg_right_blue_arrow:before {
            content: '\276F';
        }

        /*.pg_right_blue_arrow  {display: inline-block;}
    .pg_right_blue_arrow  {background-image: url(../i/s-31px-hpe.png);background-repeat: no-repeat; background-color: transparent;}
    .pg_right_blue_arrow  {width:7px; height:13px;  display:inline-block; margin-left: 3px;}
    .pg_right_blue_arrow  {background-position: left -810px}
    a.pg_right_blue_arrow {width:7px; height:13px; padding:0}*/
    }

    @media screen and (min-width: 992px) {

        .nav-bg ul.navbar-nav > li:hover .dropdown-toggle:after, .dropdown-caret-flip:active:after {
            transform: rotate(225deg);
            -webkit-transform: rotate(225deg);
            transform-origin: 4px 7px;
        }

        .carousel-indicators li a {
            padding: 0 30px;
        }

        .tab-pane ul {
            line-height: 18px;
        }

        .tab-img, .tab-list {
            width: 50%;
        }

        .more-regions {
            width: 50%;
        }



        /*temp-start*/

        .parts-table td, .parts-table1 td {
            border: 2px solid #ccc;
        }

        table {
            border: 0;
        }

        /*temp-end*/
        /*input extend on focus*/

        td.in-extnd {
            position: relative;
        }

        .in-extnd input {
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .in-extnd input:focus {
                position: absolute;
                top: 12px;
                width: 200px;
                border-color: black;
                z-index: 99999;
                -webkit-transition: all 0.3s ease; /* Safari */
                transition: all 0.3s ease;
            }
    }

    .carepack-tell-more {
        border: 2px solid #A9A9A9;
        border-radius: 6px !important;
    }

    button.carepack-nobtn:hover {
        background-color: #0096D6 !important;
        cursor: text !important;
    }

    .carepack-buy-now .btn:hover {
        background-color: #069;
    }

    .carepack-buy-now .btn.carepack-btn-noright-radius {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .carepack-buy-now .btn.carepack-btn-noleft-radius {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .CustomComboBoxStyle td {
        display: table-cell;
    }

    .partsGuider {
        min-width: 225px;
    }


    @media screen and (min-width: 1046px) {
        .divVideoJP {
            right: 150px !important;
            text-align-last: center;
        }

        .partsGuider {
            width: auto !important;
        }

        .carepack-img-container {
            width: 850px;
        }

        .carepack-img {
            height: 196px;
            background-image: url('../i/PC_Print_CP_Banner_1200x278_AQ2.jpg');
            background-repeat: no-repeat;
            background-size: 790px 196px;
            position: relative;
        }

        .carepack-imgEMEAMS {
            min-height: 182px;
            background-image: url('../i/CP Banner 1200x278_EMEAMS.jpg');
            background-repeat: no-repeat;
            background-size: 790px 196px;
            position: relative;
            margin-bottom: 10px;
        }

        .carepackText {
            position: relative;
            /*z-index: 999;*/
            margin: 0 auto;
            left: 0;
            text-align: left;
            width: 496px; /* Set the width of the positioned div */
            color: grey;
            font-family: HPSimplified, Arial; /*HPSimplifiedLight;*/
            text-decoration: none;
            font-size: 24px;
            display: inline-block;
            margin-top: 80px;
        }

        .ink-img {
            height: 278px;
            background-repeat: no-repeat;
            background-size: 586px 278px;
            position: relative;
            max-width: 577px !important;
        }

        .carepack-buy-now {
            position: absolute;
            display: block;
            bottom: 5px;
            left: 10px;
        }


        .carepack-buy-now-EMEA {
            position: relative;
            display: inline-block;
            top: 36px;
            right: 498px;
        }

        .carepack-buy-now .btn {
            padding: 5px 12px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
        }

        .carepack-buy-now-EMEA .btn {
            padding: 5px 12px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
        }


        .carepack-tell-more {
            position: absolute;
            bottom: 5px;
            left: 160px;
            padding: 5px 15px;
        }

        .carepack-tell-more {
            position: absolute;
            bottom: 5px;
            left: 160px;
            padding: 5px 15px;
        }

        .carepack-tell-more-txt {
            font-size: 14px;
        }

        .carepack-buy-txt {
            font-size: 14px;
        }


        .carepack-buy-now .dropdown-toggle::after {
            margin-left: 2px;
            margin-bottom: 5px;
        }

        /*Virual agent classes*/

        .colVA-lg-16 {
            width: 39.666667%;
            padding-right: 10px;
        }

        .visible-lg {
            display: block !important;
            margin-right: -73px;
            float: left;
        }

        .icon-svs_Virtual_Agent {
            height: 70px;
            background-image: url('../i/VirtualAgent.JPG');
            background-repeat: no-repeat;
            /*background-size: 60px 60px*/;
            position: relative;
        }

        .colVA-lg-6 {
            width: 20%;
            float: right;
            /*margin-top: -94px;
        margin-right: -14px;*/
        }
        /*.issue-not-listed-link {
        margin-top: 20px !important;
    }*/

        .issue-not-listed-link {
            border: 1px solid #461b65;
            color: #461b65 !important;
            border-radius: 2px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            margin: 20px auto 10px auto;
            text-align: center;
            display: block;
        }

            .issue-not-listed-link:hover,
            .issue-not-listed-link:focus {
                background-color: rgba(130, 41, 128, 1);
                border-color: rgba(70, 27, 101, 1);
                color: #fff !important;
            }

        .vatRadio {
            width: 100% !important;
            max-width: 396px;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
            top:5px;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 60%;
                left: 10%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 16px;
                font-family: HPSimplified, Arial;
                padding: 12px 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 37%;
                left: 22.5%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 14px;
                display: inline-block;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 13%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 25px;
                display: inline-block;
            }
    }

    @media only screen and (max-width: 992px) and (min-width: 768px) {

        .carousel-indicators li a {
            padding: 0;
            font-size: 1.5vw;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 60%;
                left: 10%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 16px;
                font-family: HPSimplified, Arial;
                padding: 12px 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 37%;
                left: 22.5%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 14px;
                display: inline-block;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 13%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 25px;
                display: inline-block;
            }
    }

    @media screen and (max-width: 1045px) and (min-width: 768px) {
        .partsGuider {
            width: auto !important;
        }

        .carepack-img-container {
            width: 735px;
        }

        .carepack-img {
            height: 170px;
            background-image: url('../i/PC_Print_CP_Banner_1200x278_AQ2.jpg');
            background-repeat: no-repeat;
            background-size: 735px 170px;
            position: relative;
        }

        .carepack-imgEMEAMS {
            min-height: 170px;
            background-image: url('../i/CP Banner 1200x278_EMEAMS.jpg');
            background-repeat: no-repeat;
            background-size: 735px 170px;
            position: relative;
            margin-bottom: 10px;
        }

        .carepackText {
            position: relative;
            /*z-index: 999;*/
            margin: 0 auto;
            left: 0;
            text-align: left;
            width: 496px; /* Set the width of the positioned div */
            color: gray;
            font-family: HPSimplified, Arial; /*HPSimplifiedLight;*/
            font-size: 24px;
            display: inline-block;
            margin-top: 80px;
        }

        .ink-img {
            height: 278px;
            background-repeat: no-repeat;
            background-size: 586px 278px;
            position: relative;
            max-width: 577px !important;
        }

        .carepack-buy-now {
            position: absolute;
            display: block;
            bottom: 5px;
            left: 10px;
        }

        .carepack-buy-now-EMEA {
            position: relative;
            display: inline-block;
            top: 36px;
            right: 498px;
        }

        .carepack-buy-now .btn {
            padding: 4px 8px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 15px;
        }

        .carepack-buy-now-EMEA .btn {
            padding: 4px 8px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 15px;
        }


        .carepack-tell-more {
            position: absolute;
            bottom: 5px;
            left: 145px;
            padding: 0.2rem 0.4rem;
        }

        .carepack-tell-more-txt {
            font-size: 0.9rem;
        }

        .carepack-buy-txt {
            font-size: 0.9rem;
        }

        .carepack-buy-now .dropdown-toggle::after {
            margin-left: 2px;
            margin-bottom: 5px;
        }

        /*Virual agent classes*/

        .colVA-lg-16 {
            width: 52.666667%;
            padding-right: 10px;
        }

        .diag-nav {
            margin: 10px 0 !important;
            height: 92px;
        }

        .issue-not-listed-container {
            border-top: 1px solid #ddd;
            padding: 10px 0 0 0;
        }

        .visible-lg {
            display: block !important;
            margin-right: -30px;
            float: left
        }

        .icon-svs_Virtual_Agent {
            height: 60px;
            background-image: url('../i/VirtualAgent.JPG');
            background-repeat: no-repeat;
            background-size: 60px 60px;
            position: relative;
        }

        .colVA-lg-6 {
            width: 25%;
            float: right;
        }

        .issue-not-listed-link {
            margin-top: 20px !important;
        }

        .issue-not-listed-link {
            border: 1px solid #461b65;
            color: #461b65 !important;
            border-radius: 2px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            margin: 20px auto 10px auto;
            text-align: center;
            display: block;
        }

            .issue-not-listed-link:hover,
            .issue-not-listed-link:focus {
                background-color: rgba(130, 41, 128, 1);
                border-color: rgba(70, 27, 101, 1);
                color: #fff !important;
            }

        .vatRadio {
            width: 100% !important;
            max-width: 396px;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
            top: 5px;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 77%;
                left: 13%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 14px;
                font-family: HPSimplified, Arial;
                padding: 12px 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 44%;
                left: 27%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 12px;
                display: inline-block;
                width: 368px;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 18%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 24px;
                display: inline-block;
            }
    }

    @media screen and (min-width: 577px) and (max-width: 767px) {
        /*reporting pages*/

        .vatRadio {
            width: 100% !important;
            max-width: 396px;
        }

        .tbl-w-multi {
            width: 120%;
        }

        .carepack-img-container {
            width: 535px;
        }

        .carepack-img {
            height: 253px;
            background-image: url('../i/PC_Print_CP_Banner_586x278_AQ2.jpg');
            background-repeat: no-repeat;
            background-size: 535px;
            position: relative;
        }

        .carepack-imgEMEAMS {
            min-height: 170px;
            background-image: url('../i/CP Banner 586x278_EMEAMS.jpg');
            background-repeat: no-repeat;
            background-size: 535px;
            position: relative;
            margin-bottom: 42px;
        }

        .carepackText {
            position: relative;
            /*z-index: 999;*/
            margin: 0 auto;
            left: 0;
            text-align: left;
            width: 258px; /* Set the width of the positioned div */
            color: gray;
            font-family: HPSimplified, Arial; /*HPSimplifiedLight;*/
            font-size: 17px !important;
            display: inline-block;
            margin-top: 70px;
        }

        .ink-img {
            height: 253px;
            background-repeat: no-repeat;
            background-size: 535px;
            position: relative;
            max-width: 548px !important;
        }

        .carepack-buy-now {
            position: absolute;
            display: block;
            bottom: 35px;
            left: 10px;
        }

        .carepack-buy-now-EMEA {
            position: relative;
            display: inline-block;
            top: 36px;
            right: 261px;
        }

        .carepack-buy-now .btn {
            padding: 3px 10px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 15px;
        }

        .carepack-buy-now-EMEA .btn {
            padding: 3px 10px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 15px;
        }

        .carepack-tell-more {
            position: absolute;
            bottom: 35px;
            left: 145px;
            padding: 0.2rem 0.4rem;
        }

        .carepack-tell-more-txt {
            font-size: 0.9rem;
        }

        .carepack-buy-txt {
            font-size: 0.9rem;
        }

        .carepack-buy-now .dropdown-toggle::after {
            margin-left: 2px;
            margin-bottom: 5px;
        }

        /*Virual agent classes*/

        .colVA-lg-16 {
            width: 66.666667%;
            text-align: center;
            padding-right: 10px;
        }

        .visible-lg {
            display: none !important;
        }

        .icon-svs_Virtual_Agent {
            height: 60px;
            background-image: url('../i/VirtualAgent.JPG');
            background-repeat: no-repeat;
            background-size: 60px 60px;
            position: relative;
        }

        .colVA-lg-6 {
            width: 25%;
            float: right;
        }

        .issue-not-listed-link {
            border: 1px solid #461b65;
            color: #461b65 !important;
            border-radius: 2px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            margin: 20px auto 10px auto;
            text-align: center;
            display: block;
        }

            .issue-not-listed-link:hover,
            .issue-not-listed-link:focus {
                background-color: rgba(130, 41, 128, 1);
                border-color: rgba(70, 27, 101, 1);
                color: #fff !important;
            }

        .partresellcontainer {
            position: relative;
            width: 100%;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 60%;
                left: 10%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 16px;
                font-family: HPSimplified, Arial;
                padding: 12px 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 37%;
                left: 22.5%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 14px;
                display: inline-block;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 13%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 25px;
                display: inline-block;
            }
    }

    @media screen and (min-width: 768px) {


          .variable-div-w {
            width: 70%;
        }

        .nav-bg ul.navbar-nav > li:hover, .nav-bg ul.navbar-nav > li.active {
            border-bottom: solid 4px #fff;
        }

        .navbar-nav .dropdown-menu {
            border-bottom: solid 4px #0096D6;
        }

        .hpps_topwrapper .dropdown:hover > .dropdown-menu, .nav-bg .dropdown:hover > .dropdown-menu {
            display: block;
        }

        .dropdown > .dropdown-toggle:active {
            /*Without this, clicking will make it sticky*/
            pointer-events: none;
        }

        .slide-search > div {
            max-width: 700px;
            margin-left: 0px;
        }

        .blue-row .feature-col .card-body {
            border-right: 1px #fff solid;
        }

        .super-topband .dropdown-menu {
            left: 12px !important;
        }

        .super-topband .dropdown-menu {
            border: solid 1px #cecece;
            background-color: #fff;
            padding: 5px 15px;
            width: 169px;
            top: 6px !important;
            z-index: 99999;
            border-radius: 0;
        }



        /* dropdown on hover*/

        .hover-drop {
            position: relative;
        }

            .hover-drop:hover > .dropdown-menu, .hover-drop .dropdown-menu:hover {
                display: block;
                transform: none !important;
                padding: 0;
            }



            .hover-drop > .dropdown.dropdown-toggle:active {
                /*Without this, clicking will make it sticky*/
                pointer-events: none;
            }

            .hover-drop .dropdown-menu {
                right: 0;
                left: auto !important;
                top: 28px !important;
            }

            .hover-drop .drop-content {
                top: 26px !important;
            }

        .no-caret-drop:hover {
            text-decoration: none !important;
        }




        .carousel-indicators li a {
            height: 50px;
            border-radius: 3px;
            padding: 0 15px;
            border: 1px #fff solid;
            color: #fff !important;
            display: inline-block;
            line-height: 50px;
            white-space: nowrap;
            width: 100%; /*to extend full width*/
            text-align: center;
        }

        .carousel-indicators li.active a {
            border-color: #000;
            background-color: #f7f7f7;
            color: #000 !important;
        }



        .navbar-expand-md .navbar-nav .dropdown-menu {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: -moz-calc(100vh - 142px);
            max-height: -webkit-calc(100vh - 142px);
            max-height: calc(100vh - 142px);
            padding-right: 15px;
        }



        .blue-row {
            background-color: #cce6ff;
            padding: 30px 0;
            position: relative;
            width: 100vw;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
        }

            .blue-row h2, .blue-row h2 > span {
                color: #5a5a5a;
                font-size: 28px;
                line-height: 30px;
                font-weight: 300;
            }

        .sub-head {
            font-size: 16px;
            color: #5a5a5a;
            line-height: 22px;
        }

        .blue-row .sub-head {
            margin-bottom: 18px;
        }

        .blue-row .card {
            background-color: transparent;
        }

        #feature-blk.collapse, #additional-blk.collapse, #identify.collapse, #help-blk.collapse {
            display: block;
        }

        .disableClick {
            pointer-events: none;
        }

        .navbar-expand-md .navbar-collapse.sign-blk {
            display: inline-block !important;
        }



        .pos-md-rel {
            position: relative !important;
        }

        .modal-content img {
            max-width: 750px;
        }
        /* to fix extra height with white space - Suresh*/



        .sign-blk a::after {
            content: '|' !important;
            position: static;
            height: auto;
            width: auto;
            padding-left: 14px;
        }



        /*reporting pages*/

        .tbl-w-multi {
            width: 100%;
        }

        
    }

    @media screen and (max-width: 767px) {

        .divVideoJPSmall {
            display: none;
        }

        .partsGuider {
            width: auto !important;
        }

          .variable-div-w {
            width: 100%;
        }

        .sm-grey-heading {
            color: #666;
            font-weight: bold;
        }

        .nav-bg ul.navbar-nav > li.nav-item {
            padding: 10px 20px;
            border-bottom: 1px solid #dadada;
        }

        /*.nav-bg, .nav-bg > .container {

         padding: 0;

    }*/



        .nav-bg ul.navbar-nav {
            background-color: #fff;
        }

            .nav-bg ul.navbar-nav > li.nav-item a {
                color: #767676;
            }



                .nav-bg ul.navbar-nav > li.nav-item a:hover {
                    color: #0096D6 !important;
                }

                .nav-bg ul.navbar-nav > li.nav-item a::after {
                    -moz-transform: rotate(45deg) translate(-15px, -10px) !important;
                }

            .nav-bg ul.navbar-nav > li.nav-item.show a::after {
                -moz-transform: rotate(226deg) translate(11px, 8px) !important;
            }

        .nav-bg .navbar-nav .nav-link, .nav-bg .navbar-nav .active > .nav-link, .nav-bg .navbar-nav li:hover > .nav-link, .nav-bg .navbar-nav .nav-link:focus, .nav-bg .navbar-nav .nav-link:hover {
            color: #767676;
        }

        .nav-bg .navbar-nav .dropdown-toggle::after, .nav-bg .navbar-nav .navbar-toggler-icon::after {
            border-color: #767676;
            float: right;
        }

        .nav-bg ul.navbar-nav > li:last-child {
            margin-right: 0px;
            padding-right: 20px;
        }

        .nav-bg ul.navbar-nav > li:not(:last-child) {
            margin-right: 0;
        }

        .dropdown-menu {
            /*border: none;*/
        }

            .dropdown-menu a {
                color: #767676;
            }

                .dropdown-menu a:hover {
                    color: #0096D6 !important;
                }



        #slider {
            background-image: url(../i/slide/tramaA.png);
        }



        /* main search on mobile styles*/

        .slide-search .dropdown-menu a {
            padding: 1rem;
            border-bottom: 1px solid #dadada;
        }

        .slide-search .dropdown-menu {
            display: block;
            width: 100%;
            position: static;
            border-width: 1px;
            padding: 0px;
        }

        .slide-search .search-cat div.input-group-prepend > button {
            display: none;
        }



        #mainSearch input.form-control {
            width: calc(100% - 46px);
        }

        #mainSearch .btn-search {
            background-color: #0096D6;
        }

        .navbar-nav {
            border-bottom: solid 4px #0096D6;
        }

        .search-top-text {
            top: 20vh;
            z-index: 999;
        }



        .no-icon-sm.navbar-toggler-icon::after {
            border: none;
            padding: 0;
            margin: 0;
        }

        .no-icon-sm.navbar-toggler-icon {
            text-align: right;
            font-size: 16px;
        }

        .search-collapse-btn {
            background-color: #0096D6;
            padding: 5px 12px;
            color: #fff;
        }

        .wide-btn {
            width: 100%;
            padding: 10px !important;
        }

        .dropdown-item {
            white-space: normal;
        }



        .indicators {
            position: absolute;
            padding: 15px;
            background-color: #fff;
            width: 100%;
            width: 100%;
            border: 1px #ccc solid;
            border-bottom: solid 4px #0096D6;
            z-index: 99;
        }

        .carousel-indicators {
            display: block !important;
            position: static;
            line-height: 34px;
        }

            .carousel-indicators a {
                color: #fff !important;
            }

        .stickyButton:hover {
            background-color: transparent !important;
        }

        .slide-search > div {
            position: static !important;
        }

        .search-cat {
            z-index: 999;
            position: absolute;
            top: -50px;
            width: calc(100% + 30px);
            left: -15px;
            right: 0px;
            background-color: rgb(255, 255, 255);
            border-bottom: solid 4px #0096D6;
        }

        .main-search > .input-group {
            position: static;
        }

        .sm-relative {
            position: relative;
        }

        .blue-row .feature-col .card-body {
            border-color: #fff;
        }

        .slide-search {
            top: 50px;
            height: 235px;
        }

        .carousel-indicators-dropdown {
            padding-left: 5px;
            margin: 0 auto;
            position: absolute;
            bottom: 120px;
        }

        .super-topband a {
            font-size: 14px;
        }



        .super-topband .dropdown-menu a {
            color: #767676;
            padding: 10px 30px;
            font-size: 1em;
        }

        .mobile_overlay {
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            position: fixed;
            top: 47px;
            left: 0;
            width: 100%;
        }





        .navbar-toggler {
            padding: 0;
            border: none;
        }

        .navbar {
            padding: 5px 0 0;
        }

        nav.navbar {
            position: relative;
        }
            /*suresh- to fix ie placement*/
            nav.navbar button.search-collapse-btn {
                position: absolute;
                right: 0;
                top: 4px;
            }
        /*suresh- to fix ie placement*/

        .mobile-indicators .dropdown-menu {
            min-width: 250px;
            border: 1px solid #dadada;
        }



        .blue-row {
            padding: 0 !important;
        }

        .extend-btn {
            width: 100%;
            cursor: pointer;
        }

            .extend-btn.collapsed .down-arrow {
                border: solid #0096D6;
                border-width: 0 1.5px 1.5px 0;
                display: inline-block;
                padding: 4px;
                transform: rotate(45deg) translate(1px, -5px);
                -webkit-transform: rotate(45deg) translate(1px, -5px);
            }

            .extend-btn .down-arrow {
                border: solid #0096D6;
                border-width: 0 1.5px 1.5px 0;
                display: inline-block;
                padding: 4px;
                transform: rotate(225deg) translate(-3px, 1px);
                -webkit-transform: rotate(225deg) translate(-3px, 1px);
            }

            .extend-btn h4, .extend-btn h2 {
                padding: 10px 0;
                background-color: #cce6ff;
                position: relative;
                text-align: left;
                padding-left: 15px;
                font-weight: normal;
                min-height: 50px;
                font-size: 15px;
            }

            .extend-btn span.down-arrow {
                position: absolute;
                right: 30px;
                top: 50%;
                margin-top: -4px;
            }

        .user-profile .sign-blk, .super-topband .dropdown-menu {
            position: absolute;
            border: 1px solid #dadada;
            background-color: #fff;
            min-width: 100%;
            right: 0;
            top: 45px;
            transform: none !important;
            border-radius: 0 !important;
        }

            .user-profile .sign-blk a {
                display: block;
                text-align: left;
                border-bottom: 1px solid #dadada;
                padding: 10px 0;
                color: #767676 !important;
                padding-left: .9875em;
                font-size: 1em;
            }

                .user-profile .sign-blk a::before {
                    content: '';
                    padding-right: 0;
                }

                .user-profile .sign-blk a:last-child {
                    border-bottom: none;
                }

        .tab-img {
            position: absolute;
            opacity: 0.5;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
            filter: alpha(opacity=20);
        }

            .tab-img img {
                width: 100%;
            }


        .search-top-text > span {
            display: inline-block;
        }

        .indicator-hold {
            padding-left: 30px;
            padding-right: 30px;
        }

        .print-result {
            position: static;
            width: 100%;
            text-align: right;
            margin-top: 10px;
        }

        .stickyButton:hover {
            border: none;
        }

        .search-cat .input-group-prepend {
            margin: 0;
        }

        .carousel-inner {
            min-height: 320px;
        }



        nav > .navbar-collapse {
            position: absolute;
            width: calc(100% + 30px);
            top: 100%;
            z-index: 9;
            left: -15px;
        }

        .notice-band {
            font-size: 16px;
            padding-top: 8px;
        }

        .main-input-hold {
            width: 100%;
        }

        .user-profile {
            position: static;
        }

        /*#mast-nav {overflow-x: hidden;}*/ /*Suresh- stop avoid other scroll*/

        .rma-blk input[type='text'], ol-reg-blk input[type='text'], .feedback-blk input[type='text'] {
            width: 100%;
            max-width: initial;
            margin-bottom: 3px;
            margin-top: 3px;
        }

        .rma-blk .row, .ol-reg-blk .row, .feedback-blk .row {
            margin-bottom: 0;
        }

            .rma-blk .row > .col-12, .ol-reg-blk .row > .col-12, .feedback-blk .row > .col-12 {
                margin-bottom: 15px;
            }



        /*temp-start*/

        .bold-label-sm {
            font-weight: bold;
        }

        /*temp-end*/



        .profile-wrap:before, .user-profile .sign-blk a:before, .profile-wrap:after, .user-profile .sign-blk a:after {
            right: 85px;
        }

        .shop-wrap:after, .shop-wrap:before {
            right: 25px;
        }

        .text-md-head {
            margin-bottom: 15px;
        }

            .text-md-head div:first-child span:first-child {
                font-weight: bold;
            }

        table.td-d-block-md > tbody > tr > td {
            display: block;
            border: none !important;
            padding: .30rem;
        }

        .ajax__calendar table td {
            display: table-cell !important;
            border: none !important;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
            bottom:5px;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 84%;
                left: 14%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 14px;
                font-family: HPSimplified, Arial;
                padding: 8px 12px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 49%;
                left: 25%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 11px;
                display: inline-block;
                width: 250px;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 20%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 20px;
                display: inline-block;
            }
    }


    @media only screen and (max-width: 576px) and (min-width: 421px) {

        .carepack-img-container {
            width: 400px;
        }

        .carepack-img {
            height: 189px;
            background-image: url('../i/PC_Print_CP_Banner_586x278_AQ2.jpg');
            background-repeat: no-repeat;
            background-size: 400px;
            position: relative;
        }

        .instantInk {
            max-width: 401px !important;
        }


        .carepack-imgEMEAMS {
            min-height: 189px;
            background-image: url('../i/CP Banner 586x278_EMEAMS.jpg');
            background-repeat: no-repeat;
            background-size: 400px;
            position: relative;
            margin-bottom: 20px;
        }

        .carepackText {
            position: relative;
            /*z-index: 999;*/
            margin: 0 auto;
            left: 0;
            text-align: left;
            width: 210px; /* Set the width of the positioned div */
            color: gray;
            font-family: HPSimplified, Arial; /*HPSimplifiedLight;*/
            font-size: 17px !important;
            display: inline-block;
            margin-top: 52px;
        }

        .ink-img {
            height: 189px;
            background-repeat: no-repeat;
            background-size: 400px;
            position: relative;
            max-width: 406px !important;
        }

        .carepack-buy-now {
            position: absolute;
            display: block;
            bottom: 15px;
            left: 8px;
        }

        .carepack-buy-now-EMEA {
            position: relative;
            display: inline-block;
            top: 27px;
            right: 215px;
        }

        .carepack-buy-now .btn {
            padding: 4px 7px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 13px;
        }


        .carepack-buy-now-EMEA .btn {
            padding: 4px 7px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 13px;
        }

        .carepack-tell-more {
            position: absolute;
            bottom: 15px;
            left: 118px;
            padding: 0.2rem 0.4rem;
        }

        .carepack-tell-more-txt {
            font-size: 0.8rem;
        }

        .carepack-buy-txt {
            font-size: 0.8rem;
        }

        .carepack-buy-now .dropdown-toggle::after {
            margin-left: 2px;
            margin-bottom: 5px;
        }

        /*Virual agent classes*/

        .colVA-lg-16 {
            width: 62.666667%;
            text-align: center;
            padding-right: 10px;
        }

        .visible-lg {
            display: none !important;
        }

        .icon-svs_Virtual_Agent {
            height: 60px;
            background-image: url('../i/VirtualAgent.JPG');
            background-repeat: no-repeat;
            background-size: 60px 60px;
            position: relative;
        }

        .colVA-lg-6 {
            margin-top: -20px;
            margin-right: 2px;
        }

        .issue-not-listed-link {
            margin-top: 20px !important;
        }

        .issue-not-listed-link {
            border: 1px solid #461b65;
            color: #461b65 !important;
            border-radius: 2px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            margin: 20px auto 10px auto;
            text-align: center;
            display: block;
        }

        .issue-not-listed-container {
            text-align: center;
        }

        .issue-not-listed-link:hover,
        .issue-not-listed-link:focus {
            background-color: rgba(130, 41, 128, 1);
            border-color: rgba(70, 27, 101, 1);
            color: #fff !important;
        }

        /*.colVA-lg-24 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }*/

        .colVA-sm-24 {
            width: 100%;
        }

        .vatRadio {
            width: 100% !important;
            max-width: 396px;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 60%;
                left: 10%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 16px;
                font-family: HPSimplified, Arial;
                padding: 12px 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 37%;
                left: 22.5%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 14px;
                display: inline-block;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 13%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 25px;
                display: inline-block;
            }
    }

    @media screen and (max-width: 576px) {


        .feature-col .card-body {
            border: none;
            border-bottom: 1px #fff solid !important;
        }

        .feature-col {
            margin-bottom: 0 !important;
        }

        .top-nav-pipe {
            padding: 0 2px;
        }

        .carousel-indicators-dropdown {
            bottom: 70px;
        }

        .super-topband a {
            padding-right: 3px;
            padding-left: 3px;
        }

        #slider .carousel-inner .item img {
            float: none;
        }



        #slider {
            background-image: url(../i/slide/tramaA.png);
        }

        .user-profile a::before {
            padding-right: 4px;
        }

        .user-profile .sign-blk a:after, .user-profile .sign-blk a:before {
            right: 75px;
        }

        .drop-content.profile-wrap:after, .drop-content.profile-wrap:before {
            right: 20px;
        }

        .help-hold span {
            display: none;
        }

        .btn-xs-wide {
            width: 100%;
        }

        /*.everything {overflow-x: hidden;}*/ /*Suresh - commented to avoid double scroll*/

        .extend-btn h2 {
            padding-right: 36px;
        }



        .notice-band {
            font-size: 15px;
            line-height: 18px;
            padding-top: 2px;
        }



        /*temp-start max 576*/

        .bottom-fixed-btns .proceedBtn, .bottom-fixed-btns .addToCartBtn, .bottom-fixed-btns .updateCartBtn {
            min-width: auto;
        }

        /*temp-end*/
        .input-3 input[type='text'] {
            width: 127px;
            max-width: 29%;
        }
        /*Suresh - for uniform width */
        .input-3 {
            min-width: 310px;
        }

        .xs-60 {
            max-width: 60% !important;
        }

        .btn-minwide {
            min-width: inherit !important;
        }

        .font-xs-14 {
            font-size: 14px !important;
        }

        .pop-content-80vh {
            width: 90%;
        }

        /*reporting pages*/

        .tbl-w-multi {
            width: 200%;
        }

        .min-w-35 {
            min-width: 100% !important;
        }

        .partresellcontainer {
            position: relative;
            width: 100%;
            bottom:5px;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 78%;
                left: 15%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 12px;
                font-family: HPSimplified, Arial;
                padding: 4px 10px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 43%;
                left: 23%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 9px;
                display: inline-block;
                width: 180px;
            
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 17%;
                left: 19%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 15px;
                display: inline-block;
            
            }
    }

    @media screen and (max-width: 420px) {

        .vatRadio {
            width: 100% !important;
            max-width: 396px;
        }

        .vatplaceholder,
        .vatplaceholder::placeholder {
            font-size: 12px;
        }
        .carepack-img-container {
            width: 300px;
        }

        .carepack-img {
            height: 142px;
            background-image: url('../i/PC_Print_CP_Banner_586x278_AQ2.jpg');
            background-repeat: no-repeat;
            background-size: 300px;
            position: relative;
        }

        .carepack-imgEMEAMS {
            min-height: 142px;
            background-image: url('../i/CP Banner 586x278_EMEAMS.jpg');
            background-repeat: no-repeat;
            background-size: 300px;
            position: relative;
            margin-bottom: -26px;
        }

        .carepackText {
            position: relative;
            /*z-index: 999;*/
            margin: 0 auto;
            left: 0;
            text-align: left;
            width: 150px; /* Set the width of the positioned div */
            color: gray;
            font-family: HPSimplified, Arial; /*HPSimplifiedLight;*/
            font-size: 12px !important;
            display: inline-block;
            margin-top: 40px;
        }

        .ink-img {
            height: 142px;
            /*background-image: url('../i/ink_hp.jpg');*/
            background-repeat: no-repeat;
            background-size: 300px;
            position: relative;
            max-width: 300px !important;
        }

        .carepack-buy-now {
            position: absolute;
            display: block;
            bottom: 10px;
            left: 5px;
        }

        .carepack-buy-now-EMEA {
            position: relative;
            display: inline-block;
            top: 25px;
            right: 157px;
        }

        .carepack-buy-now .btn {
            padding: 3px 6px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 0.7rem;
        }

        .carepack-buy-now-EMEA .btn {
            padding: 3px 6px;
            color: #fff;
            background-color: #0096D6;
            border-color: #0096D6;
            border-radius: 6px;
            box-shadow: none;
            font-size: 0.7rem;
        }

        .carepack-tell-more {
            position: absolute;
            bottom: 10px;
            left: 95px;
            padding: 0.2rem 0.4rem;
        }

        .carepack-tell-more-txt {
            font-size: 0.6rem;
        }

        .carepack-buy-txt {
            font-size: 0.6rem;
        }

        .carepack-buy-now .dropdown-toggle::after {
            padding: 2px;
            margin-left: 1px;
            margin-bottom: 4px;
        }

        /*Virual agent classes*/

        .colVA-lg-16 {
            width: 59.666667%;
            text-align: center;
            padding-right: 10px;
        }


        .issue-not-listed-container {
            border-top: 1px solid #ddd;
            padding: 10px 0 0 0;
        }

        .visible-lg {
            display: none !important;
        }

        .icon-svs_Virtual_Agent {
            height: 60px;
            background-image: url('../i/VirtualAgent.JPG');
            background-repeat: no-repeat;
            background-size: 60px 60px;
            position: relative;
        }

        .colVA-lg-6 {
            margin-top: -20px;
            margin-right: 2px;
        }

        .issue-not-listed-link {
            margin-top: 20px !important;
        }

        .issue-not-listed-link {
            border: 1px solid #461b65;
            color: #461b65 !important;
            border-radius: 2px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            margin: 20px auto 10px auto;
            text-align: center;
            display: block;
        }

        .issue-not-listed-container {
            text-align: center;
        }

        .issue-not-listed-link:hover,
        .issue-not-listed-link:focus {
            background-color: rgba(130, 41, 128, 1);
            border-color: rgba(70, 27, 101, 1);
            color: #fff !important;
        }

        .colVA-sm-24 {
            width: 100%;
        }

        .instantInk {
            max-width: 300px !important;
        }

        .InkHeaderText {
            padding-top: 30px;
        }

        .partresellcontainer {
            position: relative !important;
            width: 100% !important;
            bottom: 4px;
        }

            .partresellcontainer img {
                width: 100%;
                height: auto;
            }

            .partresellcontainer .btn {
                position: absolute;
                top: 84%;
                left: 12%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #007dba;
                color: #fff;
                font-size: 8px;
                font-family: HPSimplified, Arial;
                padding: 5px 10px;
                cursor: pointer;
                text-align: center;
                text-decoration: none !important;
            }


            .partresellcontainer .bannertext {
                position: absolute;
                top: 49%;
                left: 24%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: grey;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 8px;
                display: inline-block;
                width: 162px;
            }

            .partresellcontainer .bannertextHeader {
                position: absolute;
                top: 25%;
                left: 18%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                color: black;
                font-family: HPSimplified, Arial;
                text-decoration: none;
                font-size: 12px;
                display: inline-block;
            }
    }


    /*overwrite the old styles*/

    .stickyButtonActive {
        background-color: transparent !important;
    }

    p {
        font-size: inherit !important;
    }

    .stickyButton, .stickyButtonActive {
        border: none;
        font-size: initial;
        padding: initial;
        margin: 0;
    }

    .feature-col .card-text {
        color: #5a5a5a;
        min-height: 85px;
    }

    .header .hf_top_menu .level2 ul {
        display: none;
    }

    #content_section {
        font-size: inherit;
    }

    #main_column {
        width: auto;
        float: none;
        margin: 0;
    }

    .chkbox .chbx {
        background-image: none;
        position: relative;
    }

    .CustomComboBoxStyle .ajax__combobox_textboxcontainer input {
        width: auto;
    }

    .table_sortable td {
        font-size: inherit;
        line-height: 22px;
    }

    .cart-data-table {
        font-size: 16px !important;
    }

    .hpps-comboBox > ul {
        max-height: 250px;
        ;
        overflow-y: auto;
    }

    /*checkbox testing - s*/

    .enabl:hover {
        text-decoration: none !important;
    }

    .chbx.enabl .customCheckbox, .customCheckWrap .customCheckbox {
        position: relative;
        display: inline-block;
        top: 3px;
        width: 18px;
        height: 18px;
        background: transparent;
        margin-right: 5px;
        overflow: hidden;
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        background-position: left 0px;
    }

        .chbx.enabl:hover .customCheckbox, .customCheckWrap .customCheckbox:hover {
            background-image: url(../i/s-21px-hpe.png);
            background-repeat: no-repeat;
            background-position: left -45px;
        }

        .chbx.enabl .customCheckbox.error, .customCheckWrap .customCheckbox.error {
            background-position: left -180px;
        }

        .chbx.enabl .customCheckbox.customCheckboxChecked, .customCheckWrap .customCheckbox.customCheckboxChecked {
            background-image: url(../i/s-21px-hpe.png);
            background-repeat: no-repeat;
            background-position: left -90px;
        }


        .chbx input, .customCheckWrap .customCheckbox input {
            opacity: 0;
            cursor: pointer;
            z-index: 5;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

    .customCheckbox.customCheckboxChecked {
        display: none;
        text-align: center;
        line-height: 20px;
        font-size: 90%;
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        background-position: left -90px;
    }

    .customCheckbox.customCheckboxChecked {
        display: block;
    }

    .customCheckWrap .customCheckbox.customCheckboxChecked {
        display: inline-block;
    }

    .chbxplus {
        position: relative;
        display: inline-block;
        top: 3px;
        width: 18px;
        height: 18px;
        background: transparent;
        margin-right: 5px;
        overflow: hidden;
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        /*background-position: left -583px;*/
        background-position: left -1950px;
        margin-left: 1px;
    }

        .chbxplus input {
            opacity: 0;
            cursor: pointer;
            z-index: 5;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

    .chbxminus {
        position: relative;
        display: inline-block;
        top: 3px;
        width: 18px;
        height: 18px;
        background: transparent;
        margin-right: 5px;
        overflow: hidden;
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        /*background-position: left -583px;*/
        background-position: left -2085px;
        margin-left: 1px;
    }

        .chbxminus input {
            opacity: 0;
            cursor: pointer;
            z-index: 5;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

    .custom-radio {
        width: 18px !important;
        height: 18px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 3px;
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        background-position: left -225px;
    }

        .custom-radio:hover {
            background-position: left -271px;
        }

        .custom-radio.selected {
            background-position: left -317px;
        }

        .custom-radio input[type="radio"] {
            margin: 1px;
            position: absolute;
            z-index: 2;
            cursor: pointer;
            outline: none;
            opacity: 0;
            /* CSS hacks for older browsers */
            _noFocusLine: expression(this.hideFocus=true);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            -khtml-opacity: 0;
            -moz-opacity: 0;
        }

    .chkbox a label  {
        color: #212529 !important;
    }

    .chk-min .chbx.enabl {
        min-width: 90px;
        margin-bottom: 10px;
        color: #212529 !important;
    }

    #ctl00_MainContent_UC_FeaturedItemAdmin1_pnlEditLanguage {
        overflow-y: scroll;
    }




    /*checkbox testing - e*/

    .for-li-tbl table, .for-li-tbl li {
        width: 100% !important;
    }

    .min-w-35 {
        min-width: 35%;
    }

    img {
        max-width: 100% !important;
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        input {
            padding: 0px 10px;
            height: 38px !important;
        }
    }







    .modal-backdrop {
        display: none !important;
    }

    .modal-dialog {
        z-index: 9998;
        padding-bottom: 1.75rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .modal-content, .pop-content-80vh {
        z-index: 9999;
        max-height: 80vh !important;
        overflow-y: auto;
    }

    .modal-content {
        max-height: 80% !important;
    }

    .pop-backdrop, .sign-blk:before {
        opacity: .5;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        width: 700%;
        height: 500%;
        margin: 0 -300%;
    }



    /*--start custom width--*/
    .hpw-100 {
        width: 100%;
    }

    .hpw-80 {
        width: 80%;
    }

    .hpw-75 {
        width: 75%;
    }

    .hpw-60 {
        width: 60%;
    }

    .hpw-50 {
        width: 50%;
    }

    .hpw-40 {
        width: 40%;
    }

    .hpw-25 {
        width: 25%;
    }

    .hpw-20 {
        width: 20%;
    }

    @media (min-width:576px) {
        .hpw-sm-100 {
            width: 100%;
        }

        .hpw-sm-80 {
            width: 80%;
        }

        .hpw-sm-75 {
            width: 75%;
        }

        .hpw-sm-60 {
            width: 60%;
        }

        .hpw-sm-50 {
            width: 50%;
        }

        .hpw-sm-40 {
            width: 40%;
        }

        .hpw-sm-25 {
            width: 25%;
        }

        .hpw-sm-20 {
            width: 20%;
        }
    }

    @media (min-width:768px) {
        .hpw-md-100 {
            width: 100%;
        }

        .hpw-md-80 {
            width: 80%;
        }

        .hpw-md-75 {
            width: 75%;
        }

        .hpw-md-60 {
            width: 60%;
        }

        .hpw-md-50 {
            width: 50%;
        }

        .hpw-md-40 {
            width: 40%;
        }

        .hpw-md-25 {
            width: 25%;
        }

        .hpw-md-20 {
            width: 20%;
        }
    }

    @media (min-width:992px) {
        .hpw-lg-100 {
            width: 100%;
        }

        .hpw-lg-80 {
            width: 80%;
        }

        .hpw-lg-75 {
            width: 75%;
        }

        .hpw-lg-60 {
            width: 60%;
        }

        .hpw-lg-50 {
            width: 50%;
        }

        .hpw-lg-40 {
            width: 40%;
        }

        .hpw-lg-25 {
            width: 25%;
        }

        .hpw-lg-20 {
            width: 20%;
        }
    }

    @media (min-width:1200px) {
        .hpw-xl-100 {
            width: 100%;
        }

        .hpw-xl-80 {
            width: 80%;
        }

        .hpw-xl-75 {
            width: 75%;
        }

        .hpw-xl-60 {
            width: 60%;
        }

        .hpw-xl-50 {
            width: 50%;
        }

        .hpw-xl-40 {
            width: 40%;
        }

        .hpw-xl-25 {
            width: 25%;
        }

        .hpw-xl-20 {
            width: 20%;
        }
    }

    .dark-blue-bg {
        background-color: #135270 !important;
    }

    .light-blue-bg {
        background-color: #0085c0 !important;
    }
    /*--end custom width--*/

    /*for big deals grid row reveal*/
    .pro-grid tr {
        display: none;
        transition: all 0.5s ease;
    }

    .pro-grid.first-set .gridview tr:nth-child(-n+21) {
        display: table-row;
    }

    .pro-grid.second-set .gridview tr:nth-child(-n+41) {
        display: table-row;
    }

    .pro-grid.third-set .gridview tr:nth-child(-n+61) {
        display: table-row;
    }

    .pro-grid.fourth-set .gridview tr:nth-child(-n+81) {
        display: table-row;
    }

    .pro-grid.fifth-set .gridview tr:nth-child(-n+101) {
        display: table-row;
    }

    .pro-grid.fifth-set .btn-grid-more {
        cursor: default;
        color: #aaa !important;
        background-color: #ccc !important;
        border-color: #ccc !important;
    }

        .pro-grid.fifth-set .btn-grid-more:hover {
            background-color: #ccc !important;
            border-color: #ccc !important;
        }

    .err-border {
        border: 1px red solid;
    }

    .icb_mag {
        background-image: url(../i/s-21px-hpe.png);
        background-repeat: no-repeat;
        background-color: transparent;
    }

    .icb_mag {
        width: 21px;
        height: 20px;
        display: inline-block;
        padding-left: 6px;
        line-height: 22px;
        margin-top: 2px;
    }

    .icb_mag {
        background-position: left -625px;
    }

    a.icb_mag {
        width: 21px;
        height: 21px;
        padding: 0;
    }

    /*.right_blue_arrow  {background-image: url(../i/s-31px-hpe.png);background-repeat: no-repeat; background-color: transparent;}
.right_blue_arrow  {width:7px; height:13px;  display:inline-block; margin-left: 3px;}
.right_blue_arrow  {background-position: left -738px}
a.right_blue_arrow {width:7px; height:13px; padding:0}*/

    .right_blue_arrow:before {
        content: '\276F';
    }

/*HPPST-729 -Banner re-directing customers to Magento*/
/* Media Query for Devices Above 1281px */
@media (min-width: 1281px) {
    .magentobanner {
        height: 52px;
        padding: 8px 0px 0px 0px;
        gap: 0px;
        background-color: #AF1653;
    }

    .bannerMainHeader {
        font-family: Forma DJR Micro;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #FFFFFF;
    }

    .bannerSubHeader {
        font-family: Forma DJR Micro;
        font-size: 18px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #FFFFFF;
    }

    .magentoLink {
        font-family: Forma DJR Micro;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #FFFFFF;
    }

    .magentoButton {
        width: 161px;
        height: 36px;
        padding: 0px 32px 0px 32px;
        gap: 8px;
        border-radius: 3px 0px 0px 0px;
        border: 1px 0px 0px 0px;
        border: 1px solid #FFFFFF
    }

    .magentoModelContent {
        width: 609px !important
    }

    .magentoModelTitle {
        font-family: Forma DJR Micro;
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #2C3038;
    }

    .magentoModelBody {
        font-family: Forma DJR Micro;
        font-size: 16px;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #2C3038;
    }

    .magentoModelButton {
        font-family: Forma DJR Micro;
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important;
    }
}

/* Media Query for Devices Between 768px and 1025px */
@media (min-width: 767px) and (max-width: 1025px) {

    /* Banner adjustments */
    .magentobanner {
        height: auto; /* Allow flexible height */
        padding: 12px 0; /* Add more padding for better spacing */
        text-align: center; /* Center-align the content for balance */
        gap: 0;
        display: flex; /* Use Flexbox for layout */
        background-color: #AF1653;
        justify-content: space-between; /* Align content horizontally */
        color: #FFFFFF;       
        overflow: hidden; /* Hide any overflowing content */
    }

    /* Main header adjustments (Title) */
    .bannerMainHeader {
        font-size: 1.75em; /* Increase font size for better visibility */
        line-height: 1.4; /* Adjust line spacing for readability */
        text-align: center; /* Center-align the header text */
        font-family: Forma DJR Micro;
        color: #FFFFFF;
    }

    /* Subheader adjustments (Description) */
    .bannerSubHeader {
        font-size: 1.25em; /* Slightly larger font for better readability */
        line-height: 1.4; /* Adjust line height */
        text-align: center; /* Center-align the subheader */
        font-family: Forma DJR Micro;
        color: #FFFFFF;
    }

    /* Button adjustments */
    .magentoButton {
        height: auto; /* Slightly taller button for touch accessibility */
        padding: 0 24px; /* Adjust padding for proportional size */
        margin: 8px auto; /* Add margin and center the button */
        gap: 8px;
        border-radius: 3px 0 0 0;
        border: 1px solid #FFFFFF;
        text-align: center;
        white-space: nowrap; /* Prevent text from wrapping */
        overflow: hidden; /* Hide any overflowing content */
        margin-right: auto;
    }

    /* Link text adjustments */
    .magentoLink {
        font-size: 0.875em; /* Slightly larger font for better readability */
        color: #FFFFFF;
        font-family: Forma DJR Micro;
    }
    /* Modal Content */
    .magentoModelContent {
        width: 70% !important; /* Use 70% of the screen width */
        margin: 0 auto; /* Center the modal */
        border-radius: 10px; /* Add rounded corners for a modern look */
        overflow: hidden; /* Prevent overflow issues */
    }

    /* Modal Title */
    .magentoModelTitle {
        font-size: 1.5em; /* Increase font size to 24px */
        line-height: 1.4; /* Adjust line height for readability */
        padding: 15px; /* Add padding around the title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal Body */
    .magentoModelBody {
        font-size: 1.1em; /* Slightly increase font size to 17.6px */
        line-height: 1.6; /* Improve line spacing for readability */
        padding: 15px; /* Add padding to the modal body */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Buttons */
    .magentoModelButton {
        width: 60%; /* Buttons take up 60% of the modal width */
        font-size: 1.1em; /* Increase font size to 19.8px */
        line-height: 1.5; /* Adjust button line spacing */
        padding: 12px; /* Add padding for better touch targets */
        margin: 12px auto; /* Center the buttons and add spacing */
        border-radius: 8px; /* Add rounded corners */
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important;
    }

    /* Modal Footer */
    .modal-footer {
        flex-direction: row; /* Arrange buttons side-by-side */
        justify-content: space-between; /* Space buttons evenly */
        padding: 15px; /* Add padding around the footer */
    }
}


/* Media Query for Devices Between 1025px and 1281px */
@media (min-width: 1025px) and (max-width: 1281px) {

    /* Adjust the Banner */
    .magentobanner {
        height: 70px; /* Increased height for larger screens */
        padding: 12px 0; /* More padding for better spacing */
        text-align: center; /* Center the text */
        gap: 0;
        background-color: #AF1653;
    }

    /* Main Header adjustments (Title) */
    .bannerMainHeader {
        font-size: 28px; /* Increase font size for better visibility */
        line-height: 38px; /* Adjust line height for clarity */
        text-align: center; /* Center-align the text */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Subheader adjustments (Description) */
    .bannerSubHeader {
        font-size: 20px; /* Slightly larger font for readability */
        line-height: 28px; /* Increase line height for clarity */
        text-align: center; /* Center-align the subheader */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Button adjustments */
    .magentoButton {
        height: auto; /* Increase height for better tap-target size */
        padding: 0px 30px 0px 30px;
        margin: 10px auto; /* Center the button and add spacing */
        gap: 8px;
        border-radius: 3px 0 0 0;
        border: 1px solid #FFFFFF;
    }

    /* Link text adjustments */
    .magentoLink {
        font-size: 16px; /* Increase font size for better readability */
        color: #FFFFFF;
        font-family: 'Forma DJR Micro', sans-serif;
    }
    /* Modal Content */
    .magentoModelContent {
        width: 75% !important; /* Use 75% of the viewport width */
        margin: 0 auto; /* Center horizontally */
        border-radius: 12px; /* Add rounded corners for a polished look */
        overflow: hidden; /* Prevent content overflow */
    }

    /* Modal Title */
    .magentoModelTitle {
        font-size: 1.75em; /* Increase font size to approximately 28px */
        line-height: 1.5; /* Adjust line height for clarity */
        padding: 20px; /* Add padding around the title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal Body */
    .magentoModelBody {
        font-size: 1.1em; /* Slightly increase font size to 17.6px */
        line-height: 1.6; /* Improve readability with more line spacing */
        padding: 20px; /* Add padding to the modal body */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }


    /* Buttons */
    .magentoModelButton {
        width: 50%; /* Buttons take up 50% of the modal width */
        font-size: 1.2em; /* Increase font size to 21.6px */
        line-height: 1.5; /* Adjust button line spacing */
        padding: 15px; /* Add padding for touch-friendly buttons */
        margin: 15px auto; /* Center the buttons with spacing */
        border-radius: 8px; /* Add rounded corners */
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important;
    }

    /* Modal Footer */
    .modal-footer {
        flex-direction: row; /* Arrange buttons side-by-side */
        justify-content: space-between; /* Space buttons evenly */
        padding: 20px; /* Add padding around the footer */
    }
}

/* Media Query for Devices Between 768px and 1025px (Landscape Orientation) */
@media (min-width: 767px) and (max-width: 1025px) and (orientation: landscape) {

    /* Banner adjustments */
    .magentobanner {
        height: auto; /* Allow the banner height to adjust to content */
        padding: 16px 0; /* Add more padding to make use of space in landscape */
        text-align: center; /* Center-align the content */
        gap: 0;
        background-color: #AF1653;
    }

    /* Main header adjustments (Title) */
    .bannerMainHeader {
        font-size: 1.75em; /* Increase font size slightly for better readability */
        line-height: 1.3; /* Adjust line-height for better readability in landscape */
        text-align: center; /* Center-align the header text */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Subheader adjustments (Description) */
    .bannerSubHeader {
        font-size: 1.25em; /* Adjust font size to fit landscape view */
        line-height: 1.4; /* Adjust line-height */
        text-align: center; /* Center-align the subheader */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Button adjustments */
    .magentoButton {
        height: auto; /* Increase button height for better visibility */
        padding: 0 24px; /* Adjust padding for the button */
        margin-top: 8px; /* Add space above the button */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Link text adjustments */
    .magentoLink {
        font-size: 0.875em; /* Slightly adjust the font size to maintain readability */
        color: #FFFFFF;
        text-align: center;
        color: #FFFFFF;
        font-family: 'Forma DJR Micro', sans-serif;

    }

    /* Modal Content */
    .magentoModelContent {
        width: 70% !important; /* Use 70% of the viewport width */
        margin: 0 auto; /* Center the modal horizontally */
        border-radius: 10px; /* Add rounded corners */
        overflow: hidden; /* Prevent overflow issues */
    }

    /* Modal Title */
    .magentoModelTitle {
        font-size: 1.5em; /* Increase font size to 24px */
        line-height: 1.4; /* Adjust line spacing for readability */
        padding: 15px; /* Add padding around the title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal Body */
    .magentoModelBody {
        font-size: 1.1em; /* Slightly increase font size to 17.6px */
        line-height: 1.6; /* Improve line spacing for readability */
        padding: 15px; /* Add padding to the modal body */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

   
    /* Buttons */
    .magentoModelButton {
        width: 60%; /* Buttons take up 60% of the modal width */
        font-size: 1.1em; /* Increase font size to 19.8px */
        line-height: 1.5; /* Adjust button line spacing */
        padding: 12px; /* Add padding for better touch targets */
        margin: 12px auto; /* Center the buttons and add spacing */
        border-radius: 8px; /* Add rounded corners */
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important;
    }

    /* Modal Footer */
    .modal-footer {
        flex-direction: row; /* Keep buttons in a row on larger landscape screens */
        justify-content: space-around; /* Distribute buttons evenly */
        padding: 15px; /* Add padding around the footer */
    }
}

/* Media Query for Devices Between 481px and 767px */
@media (min-width: 480px) and (max-width: 766px) {

    /* Banner adjustments */
    .magentobanner {
        height: auto; /* Allow the banner height to adjust to content */
        padding: 16px 0; /* Increase padding for better spacing */
        text-align: center; /* Center-align the content */
        gap: 0;
        background-color: #AF1653;
    }

    /* Main header adjustments (Title) */
    .bannerMainHeader {
        font-size: 1.5em; /* Adjust font size to fit smaller screens */
        line-height: 1.4; /* Adjust line-height for better readability */
        text-align: center; /* Center the header text */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Subheader adjustments (Description) */
    .bannerSubHeader {
        font-size: 1.125em; /* Slightly reduce font size for readability */
        line-height: 1.4; /* Adjust line-height */
        text-align: center; /* Center-align the subheader */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    /* Button adjustments */
    .magentoButton {
        height: auto; /* Slightly increase button height */
        padding: 0 20px; /* Adjust padding to make the button more compact */
        margin-top: 8px; /* Add margin between button and text */
        gap: 8px;
        border-radius: 3px 0 0 0;
        border: 1px solid #FFFFFF;
        text-align: center;
        font-family: 'Forma DJR Micro', sans-serif;
    }

    /* Link text adjustments */
    .magentoLink {
        font-size: 0.875em; /* Slightly adjust the font size to make it more readable */
        text-align: center;
        color: #FFFFFF;
        font-family: 'Forma DJR Micro', sans-serif;
    }

    /* Modal Content */
    .magentoModelContent {
        width: 80% !important; /* Use 80% of the screen width */
        margin: 0 auto; /* Center the modal horizontally */
        border-radius: 8px; /* Rounded corners for a cleaner look */
        overflow: hidden; /* Prevent overflow issues */
    }

    /* Modal Title */
    .magentoModelTitle {
        font-size: 1.5em; /* Adjust font size to approximately 24px */
        line-height: 1.4; /* Increase line spacing for readability */
        padding: 12px; /* Add padding around the title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal Body */
    .magentoModelBody {
        font-size: 1em; /* Keep body text at 16px */
        line-height: 1.5; /* Improve line spacing for readability */
        padding: 12px; /* Add padding around the content */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Buttons */
    .magentoModelButton {
      /*  width: 80%;*/ /* Make buttons wider for easier tapping */
        font-size: 1em; /* Adjust font size to 16px */
        line-height: 1.5; /* Adjust button line spacing */
        padding: 12px; /* Add padding for a better touch target */
       /* margin: 10px auto;*/ /* Center the buttons and add spacing */
        border-radius: 6px; /* Add rounded corners for a modern look */
        font-family: 'Forma DJR Micro', sans-serif;       
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important
    }

    /* Modal Footer */
    .modal-footer {
        flex-direction: column; /* Stack buttons vertically */
        padding: 12px; /* Add padding around the footer */
    }
}

/* Mobile Devices (320px to 480px) */
@media (min-width: 320px) and (max-width: 480px) {
    .magentobanner {
        height: auto; /* Dynamic height for better spacing */
        padding: 16px 0; /* Increase padding for smaller screens */
        text-align: center; /* Center-align content for readability */
        gap: 0;
        background-color: #AF1653;
    }

    .bannerMainHeader {
        font-size: 1.25em; /* Adjust font size to 20px */
        line-height: 1.5; /* Increase line height for readability */
        text-align: center; /* Center-align title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    .bannerSubHeader {
        font-size: 1em; /* Adjust font size to 16px */
        line-height: 1.4; /* Increase line height for readability */
        text-align: center; /* Center-align subheader */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #FFFFFF;
    }

    .magentoButton {
        height: auto; /* Slightly taller for better tap area */
        padding: 0px 16px 0px 16px; /* Adjust padding for smaller buttons */
        gap: 8px;
        border-radius: 3px 0 0 0;
        border: 1px solid #FFFFFF;
        text-align: center;
    }

    .magentoLink {
        font-size: 0.875em; /* Adjust font size to 14px */
        color: #FFFFFF;
        font-family: 'Forma DJR Micro', sans-serif;
    }

    /* Modal Content */
    .magentoModelContent {
        width: 90% !important; /* Use most of the viewport width */
        margin: 0 auto; /* Center the modal */
        border-radius: 8px; /* Add rounded corners */
        overflow: hidden; /* Prevent overflow issues */
    }

    /* Modal Title */
    .magentoModelTitle {
        font-size: 1.25em; /* Adjust font size to 20px */
        line-height: 1.4; /* Adjust line spacing for better readability */
        padding: 10px; /* Add padding around the title */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal Body */
    .magentoModelBody {
        font-size: 1em; /* Adjust font size to 16px */
        line-height: 1.5; /* Adjust line spacing for readability */
        padding: 10px; /* Add padding to the body */
        font-family: 'Forma DJR Micro', sans-serif;
        color: #2C3038;
    }

    /* Modal List Style */
    .lstStyle {
        padding-left: 20px; /* Add left padding to maintain list indentation */
        font-size: 0.9em; /* Slightly reduce font size */
    }

    /* Buttons */
    .magentoModelButton {
       /* width: 90%;*/ /* Make buttons span most of the modal width */
        font-size: 1em; /* Adjust font size to 16px */
        line-height: 1.5; /* Maintain proportional button height */
        padding: 10px; /* Add padding for better touch target */
       /* margin: 8px auto;*/ /* Center the buttons and add spacing between them */
        border-radius: 6px; /* Add slight rounding for aesthetics */
        font-family: 'Forma DJR Micro', sans-serif;
        background: #FFFFFF;
        color: #2C3038;
        background-color: transparent;
        border: 1px solid #FFFFFF !important;
    }

    /* Modal Footer */
    .modal-footer {
        flex-direction: column; /* Stack buttons vertically */
        padding: 10px; /* Add padding around the footer */
    }
}