/* @import url("/styles/HPfont.css");  */
@import url(//fonts.googleapis.com/css?family=Didact+Gothic);

html {
    font-size: 87.5%;
    font-family: Calibri, 'Gill Sans', 'Trebuchet MS', sans-serif;
}

body {
    font-size: 100%;
}

img.grey-scale {
    filter: grayscale(100%);
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    text-align: left;
}

div {
    position: relative;
    text-align: left;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
}

.clear {
    clear: both;
}

.link {
    cursor: pointer;
}

.inline {
    display: inline;
}

.inlineblock {
    display: inline-block;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.old-homepage #environmentTitle,
.old-homepage #ctl00_environmentTitle,
.old-homepage #ctl00_MainContent_environmentTitle {
    font-size: 40px;
    top: 18px;
    position: relative;
    left: 195px;
    color: #ffffff;
    float: left;
}

#environmentTitle, #ctl00_environmentTitle, #ctl00_MainContent_environmentTitle,
#sysName, #ctl00_sysName, #ctl00_MainContent_sysName {
    font-size: 30px;
    font-weight: bold;
    top: 18px;
    position: relative;
    color: #00b388;
    float: left;
}

.loading #environmentTitle, .loading #ctl00_environmentTitle, .loading #ctl00_MainContent_environmentTitle {
    top: 10px;
    left: 325px;
}

@font-face {
    font-family: 'HP';
    src: url("fonts/HPSimplifiedW04-Regular.woff") format("woff"), url("fonts/HPSimplifiedW04-Regular.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Regular.svg#HPRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HPbold';
    src: url("fonts/HPSimplifiedW04-Bold.woff") format("woff"), url("fonts/hps-euro-bold-ttf.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Bold.svg#HPBold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HPE';
    src: url("/styles/fonts/MetricWeb-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HPEbold';
    src: url("/styles/fonts/MetricWeb-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    background: #b6b7bc;
    font-size: 1em;
    font-family: HP,Calibri,Arial;
    font-size: 1.1em;
    background-color: #EFEFEF;
    color: #333;
    margin: 0;
    padding: 3px;
    min-width: 1360px;
}

#universal-landing-page {
    min-width: unset;
}

h1, h2, h3, h4, h5 {
    font-family: HPbold;
    font-weight: normal;
    color: #000;
    line-height: 125%;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.7em;
    color: #5A5A5A;
}


.ib {
    display: inline-block;
}

div#main /* the area between the headerBar and the footerBar */ {
    background-color: red;
    min-height: 600px;
}

div#PageContent {
    padding: 0 1em;
    min-height: 25em;
}

div#footerIQuotebar {
    background-color: Black;
}

div#logonPanel {
    position: relative;
    width: 30%;
    border: 1px solid #5A5A5A;
    left: 0;
    margin: 2em 0 0;
}

div#panelBanner {
    min-height: 2em;
    padding: 1em;
    margin-bottom: 1em;
    line-height: 0.8em;
    display: inline-block;
}

div#panelBanner .img-fluid {
    max-height: 48px;
}

div#systemMessage {
    min-height: 2em;
    padding: 1em;
    padding-left: 5em;
    margin-bottom: 1em;
    line-height: 0.8em;
    margin-top: 0.8em;
    display: inline-block;
    width: 525px;
    background: #FFFDD1 url('/images/sprites/SPRITE_CCicons_1.png') no-repeat 14px -798px;
}

#closeButton {
    position: absolute;
    top: 2px;
    left: 598px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url('/images/Navigation/cross.png') no-repeat center center;
}

logonPanel .textbox {
    border: 0.1em solid #808080;
}

#logonPanel .failed {
    background-color: red;
    color: White;
    padding-left: .25em;
    position: relative;
    top: 7em;
    margin: 1em;
    display: block;
}

div#headerBack {
    position: fixed;
    top: 0em;
    height: 5em;
    width: 100%;
    background-color: white;
    z-index: 1;
}

.menu td {
    border: 0 none;
    padding-right: 1em;
}
/* Banner */
#ctl00_newHeader {
    height: auto;
    padding-left: 20px;
    background-color: #C0C0C0;
    margin-top: 5em;
    line-height: 0.5em;
}

div#spacer {
    height: 7.1em;
}

div#customerPanel {
    background-color: red;
    margin-right: 3px;
    border: 1px solid #CCC;
    position: fixed;
    top: 5em;
    width: 100%;
    height: 1.5em;
    z-index: 15;
}

div#keywordSearch {
    background-color: gray;
    margin-right: 3px;
    position: fixed;
    top: 6.5em;
    width: 100%;
    z-index: 1;
}

/* Administration page */
.admin_tabs {
    width: 200px;
    background-color: #C0C0C0;
    color: #FFF;
    padding-left: 1em;
    text-align: center;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0;
}

.admin_tab_selected {
    background-color: #0096D6;
    width: auto;
    min-width: 200px;
}

a.admin_tabs:hover {
    text-decoration: none;
}

.admin_tabs_line {
    height: 2px;
    background: #0096D6;
    border-bottom: 4px solid;
    margin-top: -5px;
    padding: 2px 0px;
}

div#activitySummary table > tbody > tr > th {
    font-weight: bold;
    width: 6em;
    text-align: center;
    padding-bottom: 1em;
}

div#activitySummary table > tbody > tr > td {
    width: 8em;
    text-align: center;
    color: #5A5A5A;
    line-height: 2em;
}

    div#activitySummary table > tbody > tr > td.activitySummaryChannel {
        width: 13em;
        text-align: left;
    }

    div#activitySummary table > tbody > tr > td.activitySummaryType {
        width: 10em;
        text-align: left;
        border-right: 1px solid #DCDADA;
    }

    div#activitySummary table > tbody > tr > td:not(.activitySummaryChannel) {
        border-bottom: 1px solid #DCDADA;
    }

div#activitySummary table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Accounts page */
div.Hostlist {
    border-bottom: 1px solid #CCC;
    padding: 0 0 0.6em 1em;
    margin-left: -1em;
    margin-right: -0.9em;
}

    div.Hostlist:hover {
        background-color: #EAEAEF;
    }

/*Search*/
div#search {
    margin-top: 1em;
}

    div#search p.KWNoResults {
        margin-top: 1em;
    }

.kwSearchBox {
    width: 30em;
}

#systemsSearch, #optionsSearch {
    padding-bottom: .5em;
}

div#KwResultsHolder {
    margin-top: 1em;
}

.KWresultRow {
    font-size: .85em;
    width: 100%;
    padding: 0.5em 0;
    display: inline-block;
    min-width: 65%;
}

.searchLine {
    cursor: pointer;
    /*  letter-spacing: 1px;*/
}
/* the descriptions */
.KWbreadcrumbs {
    cursor: pointer;
    padding-bottom: 1em;
    display: inline-block;
    min-width: 62%;
}

.KWcrumb {
    display: inline-block;
    cursor: pointer;
}

.disabledKWcrumb {
    display: inline-block;
    cursor: default;
    color: #aaaaaa;
}

.KWcrumb::first-letter {
    color: #0096D6;
    margin: 0 0.2em;
}

.buyUI {
    top: auto;
}
/* stops hideous misalignment of price/stock in Top Recommended (and possibly Search) but may caused hideous misalignment elsewhere */

.buyUISearch {
    top: .2em;
    right: -2em;
    background-color: white;
    display: inline-block;
    position: absolute;
}

.kwPatch {
    position: absolute;
    right: 0;
    width: 1em;
    height: 80%;
    z-index: 100;
    display: block;
    background-color: white;
}

.buyerSearchBox {
    width: 30em;
}

.sortPriorityPicker {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.sortPriorityTextBox {
    width: 1.5em;
}

.expandContract {
    color: White;
    font-size: 1.2em;
    padding-left: .2em;
    padding-right: .2em;
    cursor: pointer;
    display: inline;
}

.TROdesc {
    width: 15em;
    display: inline-block;
    word-wrap: break-word;
}

/* the tree will occupy all but 35ems (the width of the basket) but a minimum of 35 ems - ie. the basket will overlay the tree on very small screens 
it will also scroll BEHIND the keywordsearch, customerpanel and headerbar
*/

/*.treeHolder{margin-right:35em;min-width:50em;z-index:0;background-color:#d0e0ff;position:relative;} /* we MUST specify position for z-index to work*/
.treeHolder {
    z-index: 0;
    position: relative;
    min-width: 600px;
}
/* we MUST specify position for z-index to work*/ /*/'min-width:50em;' */

/*The price and stock table in the main tree*/
#priceTable table {
    border-collapse: collapse;
}

#priceTable th {
    background-color: #000040;
    color: white;
}

#priceTable td {
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

div#quoteOuter {
    min-height: 300px;
    z-index: 1;
    position: relative;
    float: right;
    display: none;
    right: 0;
    top: 0;
    width: 35em;
    font-size: .75em;
    overflow-y: auto;
    background-color: transparent;
    box-sizing: border-box;
    padding-top: 10px;
    /* This is horrible. I wasn't able to find where the height was being set in JavaScript or backend UI. We can resolve this when we rewrite the UI. */
    height: 84vh !important;
}
/* Affects the EM size of the whole basket */

div#quote {
    margin-left: .5em;
    margin-right: .5em;
    margin-bottom: 40px;
}

.quoteItemTree {
    position: relative;
}

.quoteSystem {
    background-color: #d0d0ff;
    margin-bottom: 1em;
}

.quoteOption {
    background-color: white;
}

.preInstalled {
    color: #000;
}
/* quote line items which are preinstalled */

.addonItem {
    color: black;
}

.exVal {
    font-style: italic;
    color: #e0e0e0;
    text-decoration: line-through;
}
/* quote line items which are currently excluded from validation */

span.quoteTreeType {
    position: absolute;
    left: 0.8em;
    width: 8em;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

span.quoteTreeSKU {
    position: absolute;
    left: 10em;
    width: 7em;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
/*isn't a SKU */

.treeAddButton {
    width: 1em;
    height: 1em;
    margin-top: .2em;
    background-color: Red;
}
/*See buyUi() */
.quoteTreeButton {
    width: 1.2em;
    height: 1.2em;
    margin-top: .1em;
}

/* the flex up, down, and remove from/add to validation buttons */
img.quoteTreeFlexDown {
    position: absolute;
    left: 19em;
    top: .3em;
}

img.quoteTreeDontValidate {
    position: absolute;
    left: 18.5em;
}
/*img.quoteTreeShowInTree {position:relative;}  /*NB: this is the only item in the quote tree positioned relative and deterimines the height/vertical spacing */
img.quoteAddNote {
    position: relative;
    left: 4000px;
}
/* NB: this is the only item in the quote tree positioned relative and deterimines the height/vertical spacing */

input.quoteTreeQty {
    text-align: center;
    position: absolute;
    left: 20.5em;
    width: 2.2em;
    font-size: 1em;
    margin-top: 0.3em;
}

img.quoteTreeFlexUp {
    position: absolute;
    left: 23.4em;
    top: .3em;
}

.quoteTreePrice {
    position: absolute;
    left: 25em;
    display: inline-block;
}

.basketAvalancheTick {
    position: absolute;
    left: 15.2em;
    color: #D7410B;
    z-index: 100;
}
/* not ideal but okay */
.basketAvalancheStar {
    position: absolute;
    left: 13.5em;
}

.basketBundleCircle {
    position: absolute;
    left: 16em;
}

/*system Multiplier section*/
div.multiDiv {
    font-size: 85%;
    margin: 0.4em 3.4em 0.4em 0;
}

.multiDiv img.quoteTreeFlexUp {
    position: relative;
    left: auto;
    top: 0;
    float: right;
}

.multiDiv img.quoteTreeFlexDown {
    position: relative;
    float: left;
    top: 0;
    left: auto;
}

.multiDiv input.quoteTreeQty {
    position: relative;
    left: auto;
    margin: 0 0.2em;
}

.multiLabel {
    color: #008424;
    right: auto;
    position: relative;
}

.multiFlex {
    position: relative;
    right: auto;
    margin-left: 2.8em;
    display: inline-block;
}


.isSystem {
    font-weight: bold;
}

.Refresh {
    margin-right: 1em;
    display: inline-block;
}
/* This style tags prices that need refrehsing by the webservice */
.upToDate {
    color: green;
}

.unconfirmed {
    color: Gray;
    font-style: italic;
}

.PriceUI {
    display: inline-block;
    min-width: 5em;
}
/* TRO over-ride from 4em; may have disastrous consequences elsewhere*/
.stockUI {
    width: 7em;
    display: inline-block;
}

div.flatQuotePanel {
    position: relative;
}

div.flatLine {
    position: relative;
}

span.quoteFlatQty {
    width: 10%;
    margin-left: 5%;
    display: inline-block;
}

span.quoteFlatSKU {
    width: 20%;
    display: inline-block;
}

span.quoteFlatType {
    width: 35%;
    display: inline-block;
}

span.quoteFlatPrice {
    width: 20%;
    display: inline-block;
}

span.totalPrice {
    width: 80%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
}

.errorTextBox {
    background-color: #ff8080;
}

.errorLabel {
    background-color: #ff0000;
    color: White;
}

#errorPage {
    padding-left: 20px;
    padding-top: 20px;
}

/*.messageLabel {*/
background-color: {
    #ff00FF;
    color: White;
}

.formBox {
    width: 30em;
    background-color: #a0a0ff;
}

.formLabel {
    width: 20em;
    margin-left: 3em;
}

.editLimits {
    float: right;
}

.rtlTranslation {
    direction: rtl;
    background-color: yellow;
}

.Translation {
    direction: ltr;
    background-color: yellow;
}

.addTranslation {
    background-color: Fuchsia;
}

input[type="text"].addTranslation {
    width: 3em;
}

/* quantity limits/slots editor */
.quantity {
    width: 1em;
}

.slotType {
    width: 20em;
}

/* style tables within a div called ... */
div#ctl00_MainContent_ListQuotes table {
    background-color: #EEAAFF;
}

div#ctl00_MainContent_ListQuotes td {
    margin-right: 1em;
}

.POA {
    color: red;
    padding-left: .1em;
    padding-right: .1em;
}

.Price {
    background-color: Green;
    color: White;
    padding-left: .1em;
    padding-right: .1em;
}

.invalid {
    background-color: Red !important;
}

.invalidL {
    background-color: Red;
}
/* a field is too long  */

.qty {
    width: 1.2em;
}
/* pale blue */
.qtyDisabled {
    width: 1.2em;
}

.tabSelected {
    background-color: Orange;
}

.quoteCursor {
    border: 2px;
    border-color: Orange;
    border-style: solid;
}

/* inititially *not* displayed - JS will manipulate display to 'block' */
.findBuyer {
    display: none;
    width: 98%;
    background-color: LightSkyBlue;
}

.keywordResults {
    display: none;
    width: 98%;
    background-color: LightGray;
    font-size: 1em;
}

.subhead {
    background-color: lightgray;
    padding: 3px;
}

.visible {
    display: block;
}

.quotesList {
    border: 1px;
    background-color: white;
}

.quotePanel {
    margin-bottom: 5px;
    vertical-align: bottom;
    margin-right: 10px;
}

.quotesListHead {
    background-color: black;
    color: White;
}

.quotesListCol-ID {
    margin-left: 2em;
    width: 4em;
    float: left;
    min-height: 1px;
    text-align: center;
}

.quotesListCol-Ver {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Version {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Name {
    width: 15em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Customer {
    width: 10em;
    float: left;
    min-height: 1px;
    display: none;
}

.quotesListCol-Supplier {
    width: 10em;
    float: left;
    min-height: 1px;
    display: none;
}

.quotesListCol-Systems {
    width: 14em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Options {
    width: 5em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Updated {
    width: 10em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Status {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Value {
    width: 5em;
    float: left;
    min-height: 1px;
}

.quotesListCol-Buttons {
    width: 9em;
    float: left;
    min-height: 1px;
}

    .quotesListCol-Buttons img {
        width: 1em;
        height: 1em;
    }

.quotesListOdd {
    background-color: #FFF;
    display: inline-block;
}

.quotesListEven {
    background-color: #a0d0ff;
    display: inline-block;
}

.quotesList1 {
    border: 1px;
    background-color: #FFF;
    font-size: .85em;
}

div.quotesList1 {
    font-size: 1em;
}

.quotesList1Head {
    background-color: #5A5A5A;
    color: #FFF;
    margin-bottom: 0.5em;
}

.quotesList1Col-ID {
    margin-left: 2em;
    width: 4em;
    float: left;
    min-height: 1px;
    text-align: center;
}

.quotesList1Col-Ver {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Version {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Name {
    width: 15em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Customer {
    width: 10em;
    float: left;
    min-height: 1px;
    display: none;
}

.quotesList1Col-Supplier {
    width: 10em;
    float: left;
    min-height: 1px;
    display: none;
}

.quotesList1Col-Systems {
    width: 20em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Options {
    width: 5em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Updated {
    width: 10em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Status {
    width: 4em;
    float: left;
    min-height: 1px;
}

.quotesList1Col-Value {
    width: 5em;
    float: left;
    min-height: 1px;
    padding-right: 10px;
}

.quotesList1Col-Buttons {
    width: 7em;
    float: left;
    min-height: 1px;
}

    .quotesList1Col-Buttons img {
        width: 1em;
        height: 1em;
    }

.quotesList1Odd {
    background-color: white;
    display: inline-block;
}

.quotesList1Even {
    background-color: #a0d0ff;
    display: inline-block;
}


.quotePreview {
    margin-left: 1em;
}

    .quotePreview td {
        background-color: white;
        border: 1px solid #404040;
        font-family: Verdana,Arial,sans-serif;
        font-size: .8em;
        padding: 10px;
    }
/* the expanding quote preview section inside the quotes list */
.findPanel {
    background-color: Maroon;
}

div.treeHolder {
    font-size: .75em;
}
/* f0f090 */

/* It's this margin that gives the tree its structure 
 The width allows things to be cropped at right - rather than wrap - would be better if this was 100% 
(but i don't know how else to solve the wrapping issue - Dan ? } */
div.treeIndent {
    margin-left: 2.25em;
}
/*width:10000px;} */

div.treeCursor {
    border: 0;
    position: relative;
    z-index: 11;
}
/* martin ? ->>min-width:500px;}*/
img.prodPhoto {
    width: 8em;
    margin-right: 1em;
    display: inline-block;
    vertical-align: middle;
}

/* inline-block has problems with vertical alignment */
/*Squares*/
.square {
    width: 20em;
    height: 20em;
    background-color: white;
    margin: 1.5em 2.0em 1.5em 0;
    border: 2px solid #B9B8BB;
    padding: 0;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

div.square:hover {
    border-color: #5A5A5A;
}

div .square:active {
    border-color: #0096D6;
}

div.square .branchTitle {
    margin-top: 0.4em;
}

div.SquareAttributePanel {
    margin-left: 10%;
    line-height: 1.4em;
}

.squareCount {
    position: absolute;
    top: 1.75em;
    left: .4em;
    z-index: 10;
}

img.squarePhoto {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 18em;
}

div.DriveType, div.Bays {
    margin: 0.35em 1.2em;
}

.squareAdvert {
    color: white;
    width: 20em;
    height: 20em;
    background-color: #0096D6;
    margin: 1.5em;
    border: 1px solid black;
    padding: .5em;
    display: inline-block;
}

.HostList {
    color: white;
    width: 20em;
    height: 10em;
    margin: 1.5em;
    border: 1px solid black;
    padding: .5em;
    display: inline-block;
    box-sizing: unset;
}

    .HostList select {
        position: absolute;
        top: 10em;
        left: 1em;
        width: 18em;
    }

    .HostList input {
        position: absolute;
        top: 10em;
        left: 20em;
        width: 3em;
        text-align: center;
    }

    .HostList img {
        height: 5em;
        margin: 1em 0 0 1em;
    }

.quickFilterGroupHolder {
    background-color: #EFEFEF;
    border: none;
}

    .filterGroupHolder input[type="checkbox"], .quickFilterGroupHolder input[type="checkbox"] {
        filter: brightness(1.1);
    }

        .filterGroupHolder input[type="checkbox"]:disabled, .quickFilterGroupHolder input[type="checkbox"]:disabled {
            filter: invert(40%);
        }

/* holds the quickfilter group panels */
.quickFilterGroupTitle {
    font-size: 1.5em;
}

span.quickFilterGroupTitle {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    display: inline-block;
}

.quickFilterGroupPanel {
    display: inline-block;
    background-color: transparent;
    border: none;
    margin: 0.5em 2em 0 0;
    margin-right: .5em;
    padding: .5em;
    vertical-align: top;
}

    .quickFilterGroupPanel > div br {
        font-size: 1.3em;
    }
/* keeps the QF choices appropriately separated */

.quickFilterLabel {
    vertical-align: top;
    padding-left: .5em;
}

.quickFilterButton {
    padding: 2px;
    background-color: #2040FF;
    color: white;
    border-radius: 3px;
    display: inline-block;
}

.hideQF {
    background-color: #767676;
}

    .hideQF:hover {
        background-color: #5A5A5A;
    }

.greyed {
    opacity: 0.3;
}

.sausageButton {
    background-color: #0096D6;
    border-radius: 5px;
    color: white;
    text-align: center;
    margin: 0 0.8em;
}

.disabled {
    color: #cccccc;
}
/*.arrowCursor{cursor:default;}*/
.handPointer {
    cursor: pointer;
}

.breadcrumbs {
    font-size: .64em;
    line-height: 1.6em;
    display: inline-block;
    cursor: pointer;
    vertical-align: bottom;
}

div#BreadCrumbs {
    margin: 0.3em 0;
    width: 60%;
    display: block;
}

span.paradigmIndicator {
    font-size: 1.4em;
}

.MatrixMode {
    width: 25em;
}
/*the fixed with is required for the matrix columns to line up */

.quickFilterInfo {
    padding: 10px;
    background-color: lightyellow;
    border: 1px solid gray;
    left: 18px;
    margin-top: 10px;
    width: 450px;
}

    .quickFilterInfo span.title {
        font-size: 1.3em;
        font-weight: bold;
    }

    .quickFilterInfo span.leftcol {
    }

    .quickFilterInfo span.rightcol {
        position: absolute;
        left: 200px;
    }

    .quickFilterInfo span.subtitle {
        font-weight: bold;
    }

.branchTitle {
    margin-left: .3em;
    margin-right: .3em;
    margin-bottom: 0;
    font-size: 1.6em;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.branch > .branchTitle {
    width: auto;
    text-align: left;
}

    .branch > .branchTitle.branchTitleLine {
        width: 8em;
        text-align: left;
    }

/*height:1.5em; }  The headers for each tree row  */
.tabStrip .branchTitle {
    font-size: 1.85em;
    font-family: HPbold;
    color: #5A5A5F;
}
/* in place of L8 (L1), not yet rendered in the code */
.tabStrip {
    padding-top: 1em;
}

.flexF {
    font-weight: bolder;
    padding-left: 0.3em;
    color: #D7410B;
    font-size: 18px;
    vertical-align: top;
}

.basketFlexF {
    position: relative;
    font-size: 11px;
}

div.tabStrip span.flexF {
    font-size: 50%;
}

.childCount {
    font-size: .625em;
    color: #0060D0;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 1em;
}

.switch {
    color: Blue;
    cursor: pointer;
}

.editCell {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    overflow: visible;
}
/*overflow:hidden;*/

.hideOverflow {
    overflow: hidden;
}

.oneRow {
    overflow: hidden;
}
/*height:1.5em*/
.sortsRow {
    overflow: hidden;
}
/* height:1.5em;}  */

div.specLeft, div.specRight {
    display: table-cell;
    border-bottom: 1px solid #d0d0d0;
}

div.specLeft {
    text-align: left;
    background-color: #F0F0F0;
    padding: 0 1em;
    width: 10em;
}

div.specRight {
    padding-left: .5em;
    padding-right: .5em;
}

.specRightMax, .marginLeft {
    margin-left: 2em;
}

.finalPrice {
    display: inline-block;
    cursor: pointer;
}

.OrangeStar {
    font-weight: bolder;
    font-size: 1em;
    color: #f0a000;
}

.bundleCircle {
    font-weight: bolder;
    font-size: 1em;
    color: #f0a000;
}

.greyedPromo {
    color: #CCC;
}

span.totalRebate {
    width: 80%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    color: #ffd020;
}

.listPrice {
    font-style: italic;
    color: #2080d0;
    display: inline-block;
}

.preInstalled .listPrice {
    color: #777;
}

.familyCount {
    position: relative;
    text-align: center;
    color: #0096D6;
    background-color: white;
    top: 1.4em;
    z-index: 1;
}


.floatRight {
    float: right;
}
/*used to postion the stock divs */

/* .filtersUI{display:inline-block} /* don't know why this needs this - without it it occupys no space and screws up wrapping - nobody else seems to know why*/

.faintBorder {
    border: 0 solid lightgrey;
}
/* Martin Killed to see what it looks like*/
/*Tabs themseleves - Note the active tab Has a Z-index of 12, the inactive 9 - and the tab body 10  the treecursor is 11  */
/*The activetab has a TOP 1px to force it to overlap the tab body - it's z-index keeps it on top (of the body - but behind the treecursor)*/


.matrixRowColumns span.flexF {
    font-size: 88%;
    float: left;
}
/* grid view, PN-level flex icons; hanging left currently */

/*the body area inside one of the tabs (where content is diplayed) */
.tabBody {
    position: relative;
    z-index: 10;
    background-color: white;
    min-height: 30em;
    border: solid #5A5A5F 1px;
    margin-bottom: .5em;
    width: 98%;
}

    .tabBody > div.hmc, .tabBody > div > div.matrixHeader, .tabBody > div > div.matrixHeader > div.quickFilterGroupHolder {
        color: red;
        display: none;
    }
/* hides QF at L1 level and the holder div for it */
div.tabIndent {
    padding-left: 0;
    padding-right: 1em;
}
/* L2 links */


.textButton {
    background-color: Orange;
    color: white;
    border: 0 none;
    cursor: pointer;
    outline: none;
    padding: .1em;
    margin: 1px;
}

.exportTools {
    margin: .5em;
}

div.infoBox {
    position: absolute;
    left: 1em;
    top: .5em;
    z-index: 100;
    width: 12em;
    background-color: #d0d0ff;
    color: Blue;
    border: 1px solid blue;
    padding: .5em;
}

.filterButtons {
    position: absolute;
    top: 1em;
    left: -20px;
    z-index: 20;
    min-width: 3em;
}

.moreFilterButtonStyle {
    background-color: #0096D6;
    border: solid 5px #0096D6;
    border-radius: 5px;
}

.unpressedButton {
    border: 3px none;
    cursor: pointer;
    width: 2em;
    height: 2em;
    border-radius: 50%;
}
/* displays no border - but allocates space for it (so the content doesnt shuffle when we flip to pressedbutton) */
.pressedButton {
    border: 3px solid #0096D6;
    cursor: progress;
    width: 2em;
    height: 2em;
    border-radius: 50%;
}

.matchingLabel {
    position: absolute;
    left: 0;
    top: 0;
    width: 5em;
    background-color: orange;
    color: white;
    display: none;
}
/*orange "QF matches" counter*/

.prodInfo {
    width: 100%;
    margin-bottom: .5em;
    clear: left;
}

.floatLeft {
    float: left;
}

.triangle-isosceles {
    padding: 15px;
    margin: 1em 0 3em;
    color: #000;
    background: #f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background: -moz-linear-gradient(#f9d835, #f3961c);
    background: -o-linear-gradient(#f9d835, #f3961c);
    background: linear-gradient(#f9d835, #f3961c);
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    /* Variant : for top positioned triangle
------------------------------------------ */

    .triangle-isosceles.top {
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
        background: -moz-linear-gradient(#f3961c, #f9d835);
        background: -o-linear-gradient(#f3961c, #f9d835);
        background: linear-gradient(#f3961c, #f9d835);
    }
    /* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

    /* creates triangle */
    .triangle-isosceles:after {
        content: "";
        position: absolute;
        bottom: -15px; /* value = - border-top-width - border-bottom-width */
        left: 50px; /* controls horizontal position */
        border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
        border-style: solid;
        border-color: #f3961c transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    /* Variant : top
------------------------------------------ */
    .triangle-isosceles.top:after {
        top: -15px; /* value = - border-top-width - border-bottom-width */
        /* right:30px;  controls horizontal position */
        left: 30px;
        bottom: auto;
        left: auto;
        border-width: 0 15px 15px; /* vary these values to change the angle of the vertex */
        border-color: #f3961c transparent;
    }

.chartDataTable td th {
    border: 1px solid black;
    padding: 4px;
}

.chartDataTable th {
    background-color: blue;
    color: White;
}

.slotCell {
    border: 1px solid black;
}


.zoomer {
    border: 1px solid black;
}
/*the flying frames from the add boxes to the basket*/

.compareTable, .compareTablePanel {
    background-color: Gray;
    text-align: center;
    margin: 0;
    padding: 0;
}

.compareTablePanel {
    display: none;
}

.compareTopLeftCell {
}
/*empty cell - holds the close button*/
.compareColumnHeads {
    background-color: Blue;
    color: White;
    text-align: center;
}

.compareRowHeads {
    background-color: blue;
    color: white;
    text-align: right;
}

.compareSetAllSame {
    background-color: white;
    color: black;
}
/*used where all cells carry the same value */
.compareSet0 {
    background-color: SteelBlue;
    color: White;
}

.compareSet1 {
    background-color: SlateBlue;
    color: White;
}

.compareSet2 {
    background-color: Tan;
    color: White;
}

.compareSet3 {
    background-color: Thistle;
    color: White;
}

.compareSet4 {
    background-color: DarkMagenta;
    color: White;
}

.compareSet5 {
    background-color: AquaMarine;
    color: White;
}

.compareWithout {
    background-color: gray;
    color: black;
}
/*this row has no value for this column */

.sessionTable {
    border-collapse: collapse;
    font-size: .8em;
    border: solid 1px black;
}

    .sessionTable td {
        border: solid 1px gray;
        padding: 2px;
    }

.feedbackLabel {
    width: 9em;
    text-align: right;
    font-weight: normal;
    display: inline-block;
    padding-right: 10px;
    margin: 0.3em;
    line-height: 1.8em;
}

.feedbackError {
    width: 30em;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 1em;
    color: red;
}

.feedbackBox {
    display: inline-block;
}

.sfb {
    margin: 2em 1em 0 1em;
}

.editPanel {
    margin-left: 1em;
    margin-top: .5em;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    padding-top: .5em;
    border-color: #708040;
    border-style: solid;
    border-width: 1px;
    overflow: visible;
}

.copyDel {
    display: inline-block;
    margin-left: 5px;
}

.editorButton {
    display: inline-block;
    color: #FFF;
    cursor: pointer;
    border: none;
    font-weight: bold;
    background-color: #007DBA;
    margin: 1px;
    padding: 2px;
}

    .editorButton:hover {
        background-color: #006699;
    }

.compactButton {
    font-size: .75em;
    height: 1em;
}

.dropdownHolder {
    position: absolute;
    z-index: 110;
    overflow: visible;
    min-height: 100px;
    display: block;
    background-color: Red;
}

editFilterTextBox {
}
/*forces the apply button onto the next line */

.editRow {
    border: 1px solid transparent;
}

    .editRow:hover {
        border: 1px solid #006699;
    }

.dropDownRow {
    background-color: White;
    border: 1px solid black;
    cursor: pointer;
}

    .dropDownRow:hover {
        background-color: Yellow;
    }

.filters {
}

.switcher {
    position: absolute;
    right: 1em;
    top: .2em;
    z-index: 200;
}

.switcherGap {
    width: 7em;
    display: inline-block;
}

.inGridDescription {
    overflow: visible;
    white-space: initial;
    margin-right: 3em;
    position: relative;
}
/*margin-top:.5em;margin-left:2.5em;margin-bottom:.5em;margin-right:4em;}  */

.rootCrumb {
    font-size: 1.5em;
    font-weight: bold;
}

.terminalCrumb {
    font-size: 2.5em;
    font-weight: bold;
}

.contrast {
    position: relative;
    left: 2em;
}
/* .fetcherImage{position:absolute;} */

.buyUI {
    position: relative;
    display: inline-block;
    top: .35em;
}

.buyUIqty {
    display: inline-block;
    width: 5em;
}

.buyUIstock, .buyUIprice {
    display: inline-block;
    font-size: 1.4em;
    margin: 0 .5em;
}

.buyUIstock {
    min-width: 10em;
}

    .buyUIstock > div {
        width: 3.5em;
    }

.KWresultRow .buyUIstock {
    font-size: 1em;
}

/* TRO over-ride from 4em; may have disastrous consequences elsewhere*/

.buyUIprSearch {
    /* width: 8em; */
    margin-left: .5em;
    margin-top: 4px;
    display: inline-block;
    background-color: white;
    padding-bottom: 1.5em;
}

.buyUIstSearch {
    margin-right: 2em;
    width: 6em;
    background-color: white;
    display: inline-block;
}

.missingTranslation {
    background-color: Red;
    color: White;
}

.TypedText {
    display: inline-block;
}

.sortArrow {
    display: inline-block;
    cursor: pointer;
}

.removeButton {
    background-color: Red;
    display: inline-block;
    cursor: pointer;
}

.resetOuter {
    margin-left: 20px;
    margin-top: .2em;
}

.resetLabel {
    display: inline;
    padding-left: 10px;
}

.marginHolder {
    display: inline-block;
    position: relative;
    float: right;
    line-height: 1em;
    margin-right: 0.3em;
    margin-top: 0.6em;
    z-index: 10;
}

.systemHeader .marginHolder {
    margin-top: .6em;
}

.systemHeader > span {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: inline-block;
}

.SMBOffer {
    color: #F7941E;
    float: right;
    margin-right: 5px;
    margin-bottom: -2px;
    padding: 0 4px;
    border: 2px solid #F7941E;
    border-radius: 5px;
}

.marginTextBox {
    width: 1.4em;
    right: 2.6em;
    top: -0.4em;
}

.applyBttnPadding {
    padding: 0 !important;
}

/* New (panel based) basket   */
.panelButton {
    display: inline-block;
}

.panelTitle {
    display: inline-block;
}

.panelMessage {
    margin: 0 0 0.6em 1.5em;
    display: table;
}

.smb2Tier1ExpandDetails {
    padding-left: 1.5em;
    padding-bottom: 1em;
}

.smb2Tier1ExpandDetails.tier2 {
    padding-bottom: 0;
}

.smb2Tier1ExpandDetails > span {
    padding-left: 2px;
}

.smb2Tier1Criteria {
    padding-left: 1.5em;
}

.smb2Tier1Criteria > span {
    padding-left: 2px;
}

.unlockedStatus > img, .smb2Tier1ExpandDetails > img {
    margin-bottom: -4px;
}

.smb2Tier2AssemblyServices {
    padding-left: 2.5em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

.smb2Tier2AssemblyServices > span {
    padding-left: 2px;
}

.smb2Tier2AssemblyServices > img {
    margin-bottom: -4px;
}

/* notes shown in a panel of the basket */
.specRollup {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.specRollupItem {
    display: inline-block;
    margin-left: .5em;
}

.slotNote {
    display: inline-block;
}

.traffic {
    width: 1em;
    height: 1em;
    border-radius: .5em;
    display: inline-block;
}

.redLight {
    background-color: Red;
}

.amberLight {
    background-color: orange;
}

.greenLight {
    background-color: green;
}

div#displayMsg.quoteDisplayMsg {
    font-size: 80%;
    font-style: italic;
}
/* saved quote confirmation */


.systemLine {
    cursor: pointer;
    line-height: 2em;
}
/* puts a little space betweent he systemheader and the system basket line*/

.systemHeader {
    font-weight: bold;
    font-size: 120%;
    /*padding-right: 1em;*/
    border-bottom: 1px solid #CCCCCC;
}

.h_sysTotal {
    display: inline-block;
    padding-left: 1.2em;
    padding-right: 0.5em;
    margin-top: 0.7em;
    float: right;
    font-size: 85%;
    font-weight: bold;
}

.partsBin {
    border: 2px solid #C6C9CA;
    padding: 3px;
    overflow: hidden;
}

    .partsBin.quoteCursor {
        border: 2px solid orange;
    }

promoRollupItem {
    display: inline-block;
}

.v_Branch {
    background-image: url('branch.png');
}

.liftBottom {
    bottom: 1em;
}
/* lifts the descriptions in the Squares - to have the overlap the picture (worst case) rather than pour out of the bottom of the square*/

.avalancheGrid {
    background-color: orange;
    color: white;
    display: inline-block;
}

.flexGrid {
    background-color: green;
    color: white;
    display: inline-block;
}

.loyaltyPoints {
    background-color: #4080A0;
    color: white;
    display: inline-block;
}

.filterActive {
    background-color: pink;
    margin-top: 7px;
    margin-bottom: -4px;
}
/*makes people aware they're filtering quotes list */

.oldVersion {
    background-color: lightblue;
}
/* background colors don't work - I can't see why - bored of looking ! */
.oldLatestVersion {
    color: grey;
    background-color: red;
}

.specTable {
    border: 0 solid #B9B8BB;
    width: 100%;
    width: 67em;
    font-weight: normal;
    text-align: left;
    line-height: 180%;
    margin-top: 1em;
}
/* partly temp for vegas*/
.prodDesc {
    width: 95%;
    margin-top: .25em;
}

.aSortDropDown {
    display: inline-block;
    margin-right: 1em;
}

.QF {
    display: inline-block;
    cursor: pointer;
}
/* Quick filters */

.troSectionImage {
    border-top: 1px solid gray;
    margin-top: 0.5em;
    display: inline-block;
    padding-top: 1em;
}

    .troSectionImage img {
        display: inline-block;
        width: auto;
        margin-right: 2em;
        height: 50px;
        width: 50px;
    }

    .troSectionImage .treeIndent {
        display: inline-block;
    }

.sortsDropDowns {
    position: absolute;
    right: 8em;
    z-index: 30;
}

body {
    background-color: #FFF;
    padding: 0;
}

div {
    vertical-align: top;
}

/* Buttons */
.hpOrangeButton, .hpBlueButton, .hpRedButton, .hpBlueButton2, .hpGreyButton, .hpGreenButton, .hpDisabledButton, .textButton, .DisabledButton {
    color: #FFF;
    cursor: pointer;
    border: none;
    border-radius: 0 4px 0 4px;
    padding: 0.4em 0.8em;
    font-family: HPbold;
    margin-top: 0.69em;
    line-height: 1em;
}

.hpGreenButton {
    background-color: #008424;
}

.hpRedButton {
    background-color: #B02;
}
    /*Completely unofficial*/
    .hpRedButton:hover {
        background-color: #9C1B1E;
    }

.hpOrangeButton {
    background-color: #00B388;
}
    /* Critical button - e.g. Buy, Download, Add to Basket, Log In, Register, Contact */
    .hpOrangeButton:hover {
        background-color: #C1401A;
    }
/* Critical button hover */
.textButton, .hpBlueButton {
    background-color: #0096D6;
}
    /* Primary button */
    .textButton:hover, .hpBlueButton:hover {
        background-color: #006699;
    }
/* Primary button hover */
.hpBlueButton2 {
    background-color: #007DBA;
}

    .hpBlueButton2:hover {
        background-color: #006699;
    }

.hpGreyButton {
    background-color: #767676;
}
    /* Secondary button */
    .hpGreyButton:hover {
        background-color: #5A5A5A;
    }
/* Secondary button hover */
.hpDisabledButton {
    background-color: #CCC;
}
/* Disabled button */
.textButton {
    font-size: 80%;
}

/* Colours */
/*Blue*/
.hpBlue {
    color: #0096D6;
}
/* Pretty much the only blue allowed, except for links */
.hpBlueAccessible {
    color: #007DBA;
}
/* Links */
/*Orange*/
.hpOrange {
    color: #00B388;
}
/*Red*/
.hpRed, .failed, .severity5, #logonPanel .failed {
    color: #F00;
}
/* Error text */
.hpRedLight, .failed, .severity5, #logonPanel .failed {
    background-color: #F7D7D7;
}
/* Background for error text */
/*Mono*/
.hpWhite {
    background-color: #FFF;
}
/* Page background */
.hpGrey5 {
    background-color: #F2F2F2;
}
/* Background for highlighted rows and columns */
.hpGreyLight {
    background-color: #E5E8E8;
}
/* Background for disabled for element */
input.hpGrey20 {
    border-color: #CCC;
}
/* Default text field border, sub-section divider */
.hpGreyMedium {
    color: #8A8A8B;
}
/* Text on hpGreyLight (disabled) background... HP color is B9B8BB, but over-ruled by Greg */
.hpGreyDark {
    color: #767676;
}
/* Pre-populated  text, utility links, dates, file formats, metadata */
.hpGrey65 {
    color: #5A5A5A;
}
/* Description text */
input.hpGrey65 {
    border-color: #5A5A5A;
}
/* Active text field border */
.hpBlack {
    color: #000;
}
/* Headings, subheadings, body copy */
/*Misc*/
.hpGreen {
    color: #008424;
}
/* Accent colour */
.hpPurple {
    color: #822980;
}
/* Visited link */

/* Nick elements */

div#tree\.1\.body {
    margin: 0 auto 2em auto;
}

.compareTable {
    background-color: transparent;
    overflow: scroll;
}

.compareRowHeads, .compareColumnHeads {
    background-color: #F2F2F2;
    color: #000;
    padding: 0.8em;
}

div#customerPanel {
    background-color: transparent;
    margin: 0;
    border-width: 0;
    position: fixed;
    top: 0;
    left: 15em;
    width: auto;
    height: auto;
    z-index: 2;
    display: none;
}

.sectionHead {
    font-size: 1.5em;
    border: 0;
    background-color: #fefefe;
}

.textButton {
    display: inline;
}

.addMarginButton {
    padding: .2em;
    color: white;
    background-color: white;
    border: 2px solid #0096D6;
    padding: 0.1em 0.2em;
}

    .addMarginButton:hover {
        background-color: #0096D6;
        color: #FFF;
    }
/* Footer */
.footerIQuote .textButton {
    background-color: transparent;
    position: relative;
}

div#footerIQuoteBar {
    height: 2em;
    line-height: 1em;
    background-color: #0096D6;
}

div#footerIQuote, div.footerIQuote {
    background: url(/images/LOGO_channelcentral_neg_sml.png) #0096D6 no-repeat right;
}

div.footerIQuote {
    margin: 0.6em 0 0 0;
}

    div.footerIQuote .textButton {
        margin-top: 0;
        font-family: HP;
    }

div.teesAndCees {
    bottom: 0;
    position: absolute;
}

.old-homepage .versionNum {
    color: #FFF;
}

.versionNum {
    position: absolute;
    right: .5em;
    bottom: .35em;
    top: 0.33em;
    font-size: 82%;
    color: #000;
    text-transform: lowercase;
}

#termsFooter {
    margin-top: 30px;
    padding: 10px 0;
}

.old-homepage div#headerBar {
    background-image: url('/images/sprites/SPRITE_HPicons_1.png');
}

div#headerBar {
    position: fixed;
    top: 0em;
    width: 100%;
    background-repeat: no-repeat;
    z-index: 99;
    margin: 0;
    background-color: #0096D6;
    color: #FFFFFF;
    background-position: 20px -305px;
    min-height: 5em;
}
    /* Header */
    div#headerBar a {
        color: #FFF;
        font-family: HPbold;
    }

div#headerBack {
    height: 6em;
}

.menu {
    left: 18em;
    top: 3em;
    font-size: 85%;
}
/*div#search{position:fixed;top:6.8em; left:0; width:100%; font-size:90%;background-color:#F5F5F5; 
						border:#CCC solid; border-width:1px 0; padding:0.2em; padding-left:1em; z-index:99;}
		#search input{margin:0 0.4em 0 1em;}
		.KWresultRow {font-size:95%; padding:0.25em 0;}
		.stockUI {width:auto; display:inline-block;}
			div#KwResultsHolder input, .compareTable input {background-color:#FFF;}
		
		.treeHolder{background:transparent;}*/
div#logonPanel {
    border: 1px solid #5A5A5A;
    margin: 2em 0 0;
}

div.pwPanel {
    height: 14em;
    width: 30em;
}

.dropShadow {
    box-shadow: none;
}

div.filterButtons {
    background-color: #0096D6;
    border-color: #0096D6;
    border-radius: 5px;
}

div.zoomer {
    left: -10em;
}

.removeButton {
    background-image: url(/images/navigation/ICON_IQ2_cross.png);
    width: 15px;
    height: 15px;
    background-color: transparent;
    margin: 0.4em;
}

.sortArrow {
    display: inline-block;
    cursor: pointer;
    background-image: url(/images/sprites/SPRITE_HPicons_1.png);
    height: 15px;
    width: 17px;
    background-color: transparent;
}

.sort_DESC, .sort_D {
    background-position: -293px -120px;
}

.sort_ASC, .sort_A {
    background-position: -293px -139px;
}

.squarePhoto, img.squarePhoto {
    height: 7em;
    width: auto;
    margin-top: 1em;
}

.unpressedButton, .pressedButton {
    width: auto;
    height: auto;
    border-radius: 0;
    border-width: 0;
    padding: 2px;
}

    .unpressedButton.selected {
        background-color: #0096D6;
        border-radius: 50%;
    }

/* needs changing to (e.g.) btnPlus, with "hover" and "active" states */
.inGridDescription {
    color: #767676;
    font-size: 110%;
}

div.optionsLabel {
    font-size: 1.8em;
}


/* Matrix Tables */

.matrix {
    font-size: 1em;
    display: block;
    clear: both;
    /*padding-top: 1em;*/ /* removed, see #30025 */
    border: 0 solid #000;
}
/* affects the size of everything in the matrix - recursively ie. any number <1 (e.g. .8  makes nested matrices progressivley smaller - like Russian dolls*/
.treeIndent .matrix {
    margin-left: 1em;
    border-width: 0;
}
/* grid within a tab structure (basically after clicking L2) */

.matrixHeader {
    margin-left: 0em;
}
/*The comparison matrix header row (with daigonal labels) - the 2em corresponds with the indent of the sub branches (see treeIndent{}) */
.innerMatrixHeader {
    height: 100px;
    white-space: nowrap;
    overflow: hidden;
}
/*provides the height for the (diagonal) labels */
.matrixHeader > .quickFilterGroupHolder {
    margin-left: -4em;
}

.matrixRowColumns {
    white-space: nowrap;
}
/* display:inline-block; */
.matrixRowOdd {
    background-color: #a0d0ff;
}
/*.matrixCell{float:left;text-align:left;} /*making this inline block screws up the filter speech bubbles */
.matrixCell {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding-top: .35em;
    white-space: normal;
    position: relative;
    border: 1px solid #a0a0a0;
    overflow: visible;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
    /*overflow:hidden;*/

    .matrixCell img.promoIcon {
        width: 1.3em;
        border-width: 0px;
    }

.PromoColumnBranch img.promoIcon {
    width: auto;
    height: 1.6em;
    border-width: 0px;
}

.matrixCell img.skuTypeIcon {
    width: 2em;
}

.iconContainer {
    display: inline-flex;
    align-items: center;
}

.ProdSubTitle {
    padding: 0.8em;
    font-family: HPbold;
    font-size: 1.3em;
    vertical-align: top;
    display: inline-block;
}

.square .ProdSubTitle {
    font-family: HP;
    padding-bottom: 0;
}

div.prodDesc {
    display: inline;
    font-size: 1.3em;
}

span.prodDesc {
    font-size: 1.3em;
    display: block;
    margin: 0 1em;
}

.matrixRowOdd, .quotesListEven {
    background-color: #FFF;
    border: solid #CCC;
    border-width: 1px 0;
}

.matrixRowOdd, .matrixRowEven, .quotesListOdd, .quotesListEven {
    padding-left: 1em;
    padding: 0.7em 0;
    border-top: 1px solid #E5E8E8;
    min-height: 18px;
}

    .matrixRowOdd:hover, .matrixRowEven:hover, .quotesListOdd:hover, .quotesListEven:hover {
        background-color: inherit;
    }

div.prodInfo {
    width: 95%;
    margin-bottom: 0.5em;
    margin-top: 0.6em;
    background-color: #FFF;
    padding: 0.6em;
}
/* border:1px solid #CCC;}*/
div.sysInfo {
    width: auto;
    border: none;
}

.prodInfo > .prodDesc {
    width: 50%;
}
/*.matrixCell {padding-top:0;line-height:1.75em; border-width:0;} */
.matrixCell {
    padding-top: 0;
    border-width: 0;
    min-height: 18px;
}
    /* temp replacment of above for vegas - nick */

    /*.matrixCell.cls_Part_Number {font-size:1.4em; margin-left:-1.0em; margin-top:-0.4em;}  You can't change the font size becuase the matrix is layed out absolutely in ems'*/
    .matrixCell.cls_Part_Number {
        font-weight: bolder;
    }

    .matrixCell.cls_Description {
        overflow: visible;
    }

    .matrixCell.cls_Price, .matrixCell.cls_Stock {
        font-weight: bold;
        width: 4em;
    }

div.cls_Form_Factor {
    overflow-wrap: break-word;
}

/* img.fetcherImage{display:none;} */

.unconfirmed {
    font-style: normal;
}

input.qty {
    background-color: #F2F2F2;
    margin-right: 0.5em;
    text-align: center;
}

input.qtyDisabled {
    background-color: #F9F9F9;
    margin-right: 0.5em;
}

.energyStar {
    height: 24px;
}

img.energyStar {
    height: 2em;
}

.eStar {
    display: inline-block;
}

.supC {
    display: inline-block;
}

div.supC {
    display: inline-block;
}

.upToDate, .unconfirmed, .totalEngageAndGrowPoints {
    font-weight: bold;
}

.upToDate {
    color: #008424;
}
/*.quotesListCol-ID{margin-left:0; width:35px; padding:0 0.6em;}*/
div.treeCursor, .quoteCursor, .highlitRow {
    border-color: #007DBA;
}

.quoteCursorLooseParts {
    border-color: White !important;
}

.filterButtons img {
    width: 1.2em;
}

.expandContract {
    display: inline-block;
    cursor: pointer;
    width: 28px;
    height: 18px;
    background-image: url('/images/Navigation/SQUARE_minus.png');
    background-repeat: no-repeat;
    background-position: top center;
}

    .expandContract:hover {
        background-image: url('/images/Navigation/SQUARE_minus_hover.png');
    }

    .expandContract:active {
        background-image: url('/images/Navigation/SQUARE_minus_active.png');
    }

.collapsed {
    background-image: url('/images/Navigation/SQUARE_plus.png');
}

    .collapsed:hover {
        background-image: url('/images/Navigation/SQUARE_plus_hover.png');
    }

    .collapsed:active {
        background-image: url('/images/Navigation/SQUARE_plus_active.png');
    }



/* Tim View */
.treeAddButton {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: transparent;
    background-image: url(/images/navigation/ICON_IQ2_plus.png);
    cursor: pointer;
}

.treeAddButtonDisabled {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: transparent;
    background-image: url(/images/navigation/ICON_IQ2_plus_disabled.png);
    cursor: pointer;
}

div.branch {
    margin: 1em 0;
    clear: left;
}
    /* this also applies to "grid within tab" */
    div.branch span.prodDesc {
        display: block;
        margin-left: 2em;
        width: 70%;
    }


/* Basket */

div.quoteHeader {
    font-size: 1.4em;
    line-height: 1.5em;
    margin-bottom: 0.5em;
    padding-top: 0.3em;
    border: 2px solid #ABABAB;
}

    div.quoteHeader.cash-back {
        padding-top: 0;
    }

div.innerHeader > div {
    padding-left: 0.5em;
}

div.quoteHeader .q_outputs {
    display: inline-block;
    margin-left: 1em;
}

.quoteHeader > .marginHolder {
    font-size: 73%;
}

.q_save, .q_export, .q_email, .q_newVlocked, .q_newVunlocked, .q_saved, .q_warehouse, .q_copyQuoteClipboard {
    display: inline-block;
    height: 17px;
    background: url(/images/sprites/SPRITE_HPicons_1.png) no-repeat;
    cursor: pointer;
    border: none;
    text-align: left;
    color: dimgray;
}

.q_menu_icon {
    height: 0.8em;
    vertical-align: super;
    padding-left: 0.4em;
}

.q_basketEnlarge {
    cursor: pointer;
    float: right;
    padding-right: 0.25em;
}

.q_basketEnlarge_icon {
    height: 1em;
}

.q_greenSquareEnlarge {
    cursor: pointer;
    float: right;
    padding-right: 0.25em;
    margin-left: 0.5em;
}

.q_greenSquareEnlarge_icon {
    height: 1.25em;
}

.q_loosePartsHeader {
    min-height: 2em;
}

.q_loosePartsEnlarge {
    cursor: pointer;
    float: right;
    padding-right: 0.25em;
}

.q_loosePartsEnlarge_icon {
    height: 1.25em;
}

.q_export {
    margin-left: 0.2em;
}

.q_copyQuoteClipboard {
    background-position: -150px -286px;
}
    .q_copyQuoteClipboard:hover {
        background-position: -150px -265px;
        color: gray;
    }

.q_save {
    background-position: -150px -135px;
}

    .q_save:hover {
        background-position: -150px -118px;
    }

.q_email {
    background-position: -150px -11px;
}

    .q_email:hover {
        background-position: -150px 5px;
    }


.q_quoteName {
    vertical-align: super;
}

.q_export {
    background-position: -150px -101px;
    border: none;
}

.q_export:hover {
    background-position: -150px -84px;
    color: gray;
}

.q_warehouse {
    background-position: -150px -49px;
}

.q_warehouse:hover {
    background-position: -150px -66px;
    color: gray;
}

.q_transferQuote {
    cursor: pointer;
    background-color: white;
    background-image: url('/images/navigation/transfer.png');
    background-repeat: no-repeat;
    border: none;
    text-align: left;
    color: dimgray;
}

    .q_transferQuote:hover {
        color: #00b388;
        background-image: url('/images/navigation/transfer_hover.png');
    }

.q_endCustomerData {
    cursor: pointer;
    background-color: white;
    background-image: url('/images/navigation/transfer.png');
    background-repeat: no-repeat;
    border: none;
    text-align: left;
    color: dimgray;
    padding-left: 0.6em;
}

    .q_endCustomerData:hover {
        color: #00b388;
        background-image: url('/images/navigation/transfer_hover.png');
    }

.q_newVlocked {
    background-position: -150px -184px;
}

.q_newVlocked:hover {
    background-position: -150px -168px;
    min-width: 14em;
    color: gray;
}

.q_newVunlocked {
    background-position: -150px -217px;
    height: 17px;
}

.q_newVunlocked:hover {
    background-position: -150px -201px;
    height: 17px;
    min-width: 14em;
    color: gray;
}

.q_saved {
    background-position: -150px -152px;
}

.q_basket {
    background-image: url('/images/sprites/SPRITE_HPicons_1.png');
    background-position: -170px -152px;
    height: 0.5em;
    position: absolute;
    right: 1em;
    top: 0;
    width: 1.0em;
}

.q_excel, .q_xml {
    width: 25px;
    display: none;
    height: 25px;
    margin: 0.5em 0.5em 0 0;
    background: url(/images/sprites/SPRITE_CCicons_1.png) no-repeat;
    cursor: pointer;
}

.q_excel {
    background-position: 4px -605px;
}

.q_xml {
    background-position: 4px -632px;
}

#sdMenuPanel {
    z-index: 10000000;
    position: absolute;
}

.menu_panel {
    background-color: transparent;
    padding-top: 0.3em;
}

.sub_menu {
    border: 2px solid lightgray;
    background-color: white;
    margin-top: -0.8em;
    margin-left: 1.2em;
    width: auto;
    display: none;
}

.menu_item {
    padding: 0.5em;
    text-align: left;
}

.menu_subitem {
    margin-left: 1.7em;
    white-space: nowrap;
}

#quote input[type=image] {

}

.hpfs-total-power-advisor-parent {
    min-height: 1em;
}

.power-advisor-icon {
    margin-left: 2.75em;
    background-size: 26px 26px;
    position: absolute;
    width: 26px;
    height: 26px;
    border: none;
    float: right;
    cursor: pointer;
    z-index: 1;
}

.power-advisor-icon.right {
    margin-left: 10em;
}

.power-advisor-link {
    margin-left: 6.25em;
    color: #00b388;
    padding-top: 6px;
    padding-left: 1px;
    position: absolute;
    width: 8em;
    font-family: "HP";
    font-size: 75%;
    line-height: 120%;
    z-index: 9999999;
    cursor: pointer;
    text-decoration: none;
}

/*indent fix*/

div#quote .preInstalled .PriceUI {
    font-weight: normal;
    font-style: italic;
    color: #b0b0b0;
}

div#quote .preInstalled .POA {
    font-weight: normal;
    font-style: italic;
    color: #b0b0b0;
}

div#quote .addonItem .PriceUI {
    font-weight: bold;
    font-style: normal;
}

div#quoteBasketTabStrip {
    font-size: 1.5em;
    line-height: 1.8em;
}

.quoteTab {
    padding: 0 0.4em;
    border-width: 1px;
}

div.panelHeader {
    border: 1px solid #CCCCCC;
    border-width: 1px 0 0 0;
    padding: 0.6em 0em;
    vertical-align: middle;
}

div.panelTitle {
    font-size: 1.3em;
    line-height: 1.3em;
}

.configurationCheckRollup, .validationRollup {
    display: inline-block;
    position: absolute;
    right: .5em;
}

div.configurationCheckRollup, div.validationRollup {
    position: relative;
    left: 1em;
    line-height: 2.5em;
    vertical-align: middle;
}

img.headerValidationIcon {
    margin-left: 0.4em;
}

select.cprt {
    display: none;
}

.severity1, .severity2, .severity3, .severity4, .severity5 {
    margin: 0 0 0.4em 1.6em;
    font-size: 1.1em;
}

    .severity1 > img, .severity2 > img, .severity3 > img, .severity4 > img, .severity5 > img {
        margin-right: 0.4em;
    }

li.severity1, li.severity2, li.severity3, li.severity4, li.severity5, li.severity6 {
    background: no-repeat 0 0.4em;
    padding-left: 1.5em;
    margin: 0 0 0.4em 0;
    font-size: inherit;
    color: inherit;
}

li.severity1 {
    background-image: url('/images/navigation/ICON_CIRCLE_tick.png');
}

li.severity2 {
    background-image: url('/images/navigation/ICON_CIRCLE_info.png');
}

li.severity3 {
    background-image: url('/images/navigation/ICON_CIRCLE_question.png');
}

li.severity4 {
    background-image: url('/images/navigation/ICON_CIRCLE_exclamation.png');
}

li.severity5 {
    background-image: url('/images/navigation/ICON_CIRCLE_amberAlert.png');
}

li.severity6 {
    background-image: url('/images/navigation/ICON_CIRCLE_Cross.png');
    color: #F00;
}

/* Saved Quotes View */
table.quotePreview {
    background-color: #FFF;
    border: none;
    clear: both;
    width: 100%;
    margin: 0;
    font-size: .8em;
}

    table.quotePreview td, table.quotePreview th {
        border: none;
        border-top: 1px solid #E5E8E8;
    }

    table.quotePreview th {
        color: #FFF;
        background-color: #767676;
        font-weight: bold;
        padding: 10px;
    }

.quoteSystem {
    background-color: #FFFFFF;
    border-bottom: 2px solid #CCCCCC;
    padding: 0.6em 0;
}

.quoteCursor.quoteSystem {
    border-bottom-color: #007DBA;
}

    .quoteCursor.quoteSystem.smbQuoteItemTree {
        border-color: #FF8D6D;
    }

.basePrice {
    left: 2.35em;
    display: inline-block;
    line-height: 1.7em;
}

.quoteOption {
    background-color: #FFF;
    line-height: 2em;
    cursor: pointer;
    border: 2px solid transparent;
}

.tabSelected {
    background-color: #0096D6;
    color: #FFF;
}
/* My Quotes */
div#Panel {
    line-height: 2em;
}

.quotesListCol-Buttons img, .quotesTableRow img.unpressedButton {
    width: 1.3em;
    height: 1.3em;
}

div#quoteFilterPanel {
    margin-top: 1em; /* height:50px */
    margin-bottom: 15px;
}

    div#quoteFilterPanel > span.quotePanel {
        margin-bottom: inherit;
        vertical-align: middle;
    }

.quotePanel {
    vertical-align: middle;
}

div#quoteFilterPanel > input#txtFilter, div#quoteFilterPanel > input#txtSku {
    margin-top: 0.6em;
}

div#quoteFilterPanel .hpOrangeButton, div#quoteFilterPanel .hpGreyButton, div#quoteFilterPanel .DisabledButton {
    margin: 0.4em 1em 0 0;
    font-size: 80%;
    line-height: 1.5em;
}

/* Administration.. filters are styled as with MyQuotes (quoteFilterPanel) */
div#userFilterPanel {
    margin-top: 1em;
    height: 50px;
}

    div#userFilterPanel > span.quotePanel {
        margin-bottom: inherit;
        vertical-align: middle;
    }

    div#userFilterPanel > input#txtFilter {
        margin-top: 0.6em;
    }

    div#userFilterPanel .hpOrangeButton, div#userFilterPanel .hpGreyButton {
        margin: 0.4em 1em 0 0;
        font-size: 80%;
        line-height: 1.5em;
    }

div#adminListUsers {
    font-size: 0.8em;
}

div#adminCreateUser {
    clear: both;
}

tr.usrGridRow, tr.usrGridHeader {
    line-height: 2em;
}

tr.usrGridHeader {
    border-bottom: 1px solid #CCCCCC;
    background-color: grey; /*stu added 5-5-16*/
    color: #fff; /*stu added 5-5-16*/
}

    tr.usrGridRow td, tr.usrGridHeader th {
        padding: 0 1em 0 0;
    }

/* Validation */
.slotSumHolder {
    display: block;
    padding-left: 1em;
}

.slotNote {
    margin-left: 1em;
}

.panelOuter ul {
    margin-left: 2em;
    line-height: 2em;
}

/*Other Stuff*/
a {
    font-weight: normal;
    color: #0096D6;
}

    a:hover {
        text-decoration: underline;
    }
/*stu commented out 5-5-16
.smallfont {
    font-size: 75%;
}*/

.largefont {
    font-size: 120%;
}

.tight {
    padding: 0;
    margin: 0;
}

.normal {
    font-weight: normal;
    text-decoration: none;
}

.hidden {
    display: none;
}

.inline {
    display: inline;
}

.bold {
    font-family: HPbold;
}

.italic {
    font-style: italic;
}

.alignleft {
    text-align: left;
}

.clear {
    clear: both;
}

div.clear {
    clear: left;
}
/* although this would normally be "both", had to adapt this to make filter buttons work... it's not really used anywhere else in IQ2. */

.pointer {
    cursor: pointer;
}

/* Temporary Fixes */
#ctl00_MainContent_BtnPDF {
    display: none;
}
/*div.prodDesc{display:none;}*/

/*	.matchingLabel {display:none;} /* temporary, for testing */ /*
	.quickFilterGroupHolder { display: inline-block; background-color: #EFEFEF; border: none; margin: 0; padding: .5em; display:none;} /* display none for testing */



/* dropdowns */
.dd_item, .dd_thinBottom {
    border: solid #CCC;
    border-width: 1px 0 0 0;
    padding: 0.2em 0;
    cursor: pointer;
}

.v_Branch, .v_Grid, .v_Square, .v_Tab, .v_CompSquare {
    background: url('/images/sprites/SPRITE_CCicons_1.png') no-repeat;
    padding-left: 2em;
}

.v_Branch {
    background-position: 4px -175px;
}

    .v_Branch:hover {
        background-position: 4px -201px;
    }

.v_Grid {
    background-position: 4px -228px;
}

    .v_Grid:hover {
        background-position: 4px -253px;
    }

.v_Square, .v_CompSquare {
    background-position: 4px -332px;
}

    .v_Square:hover, .v_CompSquare.hover {
        background-position: 4px -359px;
    }

.v_Tab {
    background-position: 4px -279px;
}

    .v_Tab:hover {
        background-position: 4px -306px;
    }

.dd_form {
    border-color: #CCC;
}

.dd_form, .dd_thinBottom {
    font-size: 1.1em;
    line-height: 1.55em;
    background-color: #FFFFFF;
    /*margin-top: 0.5em;*/ /* removed for .dd_thinBottom, see #30025 */
}

    .dd_thinBottom.dd_form {
        border: none;
        margin: -0.2em 0;
    }

.dd_form {
    margin-top: 0;
}
/*nick - switchers had a top marging - which was a pain for alignment*/

.dd_open {
    width: 12em;
    background-color: transparent;
}

.dd_head {
    padding-top: 0.1em;
    line-height: 1.7em;
}

.dd_closed {
    background-color: #FFFFFF;
    font-size: 1.3em;
    color: #0096D6;
    width: 4.25em;
    line-height: 1.4em;
}

.dd_item:hover {
    background-color: #0096D6;
    color: white;
}

.dd_icn_container {
    background-image: url(/images/sprites/SPRITE_HPicons_1.png);
    width: 24px;
    height: 25px;
    display: inline-block;
    background-position: -283px 9px;
    right: 0.4em;
    position: absolute;
    border-left: 1px solid #CCC;
    margin: -0.1em 0;
}

.openGrid {
    width: 99.8%;
}

tr.usrGridRow {
    vertical-align: baseline;
}

#ctl00_newHeader {
    height: 38px;
    padding-left: 20px;
    background-color: #C0C0C0;
    margin-top: 5em;
}

    #ctl00_newHeader ul {
        height: auto;
        padding: 8px 0;
        margin: 0;
    }

    #ctl00_newHeader li {
        display: inline;
    }

    #ctl00_newHeader a {
        text-decoration: none;
        color: white;
    }

#ctl00_newMenu {
    height: 35px;
    padding-right: 5px;
    width: auto;
}

    #ctl00_newMenu ul {
        height: auto;
        padding: 8px 0;
        margin: auto;
        clear: both;
        float: right;
    }

    #ctl00_newMenu li {
        display: inline;
        padding-left: 20px;
    }

    #ctl00_newMenu a {
        text-decoration: none;
        color: white;
    }

.highPerf {
    display: inline-block;
}

img.highPerformance {
    width: 2em;
}

.dropdown {
    color: #555;
    margin: 3px -22px 0 0;
    width: 143px;
    position: relative;
    height: 17px;
    text-align: left;
}

/*.submenu {
    background: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    width: 135px;
    display: none;
    margin-left: 10px;
    padding: 20px 0 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

    .submenu li a {
        color: #555555;
        display: block;
        font-family: arial;
        font-weight: bold;
        padding: 6px 15px;
        cursor: pointer;
        text-decoration: none;
    }

        .submenu li a:hover {
            background: #155FB0;
            color: #FFFFFF;
            text-decoration: none;
        }

a.account {
    font-size: 11px;
    line-height: 16px;
    color: #555;
    position: absolute;
    z-index: 110;
    display: block;
    padding: 0 0 0 0;
    height: 28px;
    width: 121px;
    margin: -17px 0 0 10px;
    text-decoration: none;
    background: url(icons/arrow.png) 116px 17px no-repeat;
    cursor: pointer;
}*/

.root {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11px;
    padding: 11px 0 0 0;
    border-top: 1px solid #dedede;
}

.flexDiscountDiv {
    background-color: #E1F0E1;
    text-align: left;
    font-family: HPbold;
}

div.flexChecklist h3 {
    margin: 0.5em 0 0.5em 1em;
}

div#flexDis {
    padding: 0.4em 1.4em;
}

.smb2BasketPromoIcon {
    position: absolute;
    left: 17em;
}

.smb2Header {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
}

.smb2DiscountDate {
    float: right;
    margin-right: 0.5em;
    font-size: 120%;
    font-weight: 800;
}

.smb2LimitsApplied {
    float: right;
    margin-right: 0.5em;
}

.smb2InlineDiv {
    display: inline;
}

.smb2ComboOp, .smb2AttachMinOptionsOp, .smb2MultiSystemOp, .smb2Tier2Op {
    border-bottom: 1px solid lightgray;
    font-weight: bold;
    line-height: 0.1em;
    margin: 1.5em 1em 1.5em 0.7em;
    text-align: left;
    width: 98%;
}

.smb2Tier2Savings {
    border-bottom: 1px solid lightgray;
    line-height: 0.1em;
    margin: 1.5em 1em 1.5em 0.7em;
    text-align: left;
    width: 98%;
}

.smb2ComboOpSpan, .smb2AttachMinOptionsOpSpan, .smb2MultiSystemOpSpan, .smb2Tier2OpSpan, .smb2Tier2SavingsSpan {
    background-color: white;
    padding: 0 10px;
}

.smb2MemberGroupOp {
    font-weight: bold;
    margin: -0.3em 0 0.5em 1.5em;
}

.smb2AttachMinOptionsOp, .smb2MultiSystemOp {
    margin: 1.2em 1em 1.2em 0.7em;
}

.smb2AttachMinOptionsGroup, .smb2MultiSystemGroup {
    margin: 0.8em 1em 0.8em 1.7em;
    width: 95%;
}

.smb2PanelMessage {
    margin: 0.5em 0 0.6em 1.5em;
    display: table;
}

.smb2DiscountDiv {
    background-color: #E1F0E1;
    text-align: left;
    font-family: HPbold;
    padding: 0.4em 1.4em;
}

.smb2TotalSavings {
    background-color: #E1F0E1;
    font-family: HPbold;
    font-size: 14.5px;
    margin-left: -1px;
    padding-left: 1px;
    width: 45%;
}

.smb2TotalSavingsShowModal {
    font-size: small;
    cursor: pointer;
}

.ecb {
    display: inline-block;
}

.admin_expander {
    height: 30px;
    width: 30px;
    display: inline-block;
    padding: 7px 0 0 5px;
}



.admin_expanded {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 30px;
    background-color: transparent;
    border: 0px solid #efefef;
    margin: 0px;
    margin-left: 10px;
    background-image: url('/images/Navigation/red-minus.png');
    background-repeat: no-repeat;
}
/*     ' img.ImageUrl = "/images/navigation/collapseColumn.png"
                ' img.Attributes("onmousedown") = "getBranches('" & headerPath & "','collapseColumn=" & Trim$(f.ID) & "');return false;"
                ' img.ToolTip
    
    */



.admin_collapsed {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: 0px solid #efefef;
    margin: 0px;
    overflow: hidden;
    margin-left: 10px;
    background-image: url('/images/Navigation/red-plus.png');
    background-repeat: no-repeat;
}

div.FieldFilterContainer {
    border: 2px solid #efefef;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 300px;
    z-index: 1000;
    height: 300px;
    background-color: #fefefe;
    border-radius: 15px;
}


div.FieldFilterHeader {
    cursor: move;
    margin: 0;
    padding: 0;
    background-color: #e3e3e3;
    border-radius: 15px 15px 0 0;
}

div.FieldFilterContainer h2 {
    padding: 1px 0 0 20px;
    display: inline-block;
    text-align: center;
    min-height: 30px;
}

div.FieldFilterHeader div {
    padding: 2px;
    padding-top: 5px;
    background-color: #fefefe;
}

.FieldFilterButtons {
    padding: 2px 4px 0 0;
    position: relative;
    float: right;
    right: 0;
    cursor: pointer;
    text-align: center;
    z-index: 1000;
}

div.FieldFilterFieldList {
    border-radius: 0 0 15px 15px;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 180px;
    padding-left: 5px;
    padding-top: 5px;
    float: left;
    width: 280px;
}

.FieldFilterFieldList input {
    height: 15px;
}

.FieldFilterFieldList div {
    border-bottom: 1px solid #dedede;
    background-color: #fefefe;
}

.CustomizeColumns {
    display: inline-block;
    height: 25px;
    left: 0;
}

.headerDragOver {
    background-color: red;
}

div.spinnerContainer {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: transparent url(/images/spinner.gif) center center no-repeat;
    opacity: .5;
}

.customizeClone {
    overflow-y: scroll;
    max-height: 300px;
    margin-left: 0;
}

.customizeCloneList {
    display: none;
    position: fixed;
    z-index: 1;
    border-radius: 20px;
    border: 1px solid #fefefe;
    height: 75%;
    margin-left: 10px;
    list-style-position: outside;
}

    .customizeCloneList li {
        cursor: pointer;
    }

        .customizeCloneList li:before {
            content: "+";
            margin-right: 4px;
        }


div.UndoPaneContainer {
    display: none;
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

div.hasScreen {
    background-image: url('/images/Navigation/screen.png');
    width: 24px;
    height: 24px;
    display: inline-block;
}

div.pagelimits {
    overflow-x: scroll;
}

div.pagecontent {
    overflow-y: hidden;
}

div.FilterButtonContainer {
    display: block;
}

.FilterButtonContainer > div, .quickFilterGroupPanel {
    margin: 1em;
}

.quiteFilterGroupPanel select {
    max-width: 264px;
}

div.FilterButton {
    margin: 0.69em 0 0 0.69em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 0 0.8em 0 1.4em;
    font-family: HP;
    border: 1px solid #888;
    line-height: 1.6em;
    background: url(/images/navigation/ICON_IQ2_cross.png) left no-repeat;
    border-radius: 0 4px 0 4px;
}

    div.FilterButton span, div.FilterButton img {
        display: inline-block;
    }

    div.FilterButton:hover {
        background-color: #FFF;
    }

.optionsLink {
    font-size: 1.2em;
    display: inline-block;
    margin-left: 1em;
    color: #0096D6;
    cursor: pointer;
}

    .optionsLink > div {
        display: inline-block;
    }

.L9 {
    font-size: 1.2em;
    display: inline-block;
    margin-left: 1em;
}

.activeLink {
    cursor: default;
}

    .footerIQuoteLink:hover, .activeLink:hover {
        text-decoration: none;
    }

.link {
    color: #007DBA; /*font-family: HPbold;*/
    cursor: pointer;
    text-decoration: none;
}

.bigLink {
    color: #0096D6;
    font-size: 1.6em;
    margin-right: 1.5em;
    cursor: pointer;
    display: inline-block;
}

    .bigLink > div {
        display: inline-block;
    }

div.bigLink.hpOrange, div.optionsLink.hpOrange {
    color: #D7410B;
}

.link:hover, .bigLink > div:hover, .optionsLink:hover, .inActiveLink > div:hover {
    text-decoration: underline;
}


.outOfStock {
    color: #B02;
    font-weight: bold;
}

.specRightMax {
    float: right;
    font-weight: bold;
    display: table-cell;
}

.specRow {
    display: table-row;
}

.highlighted {
    background-color: #DFEDEF;
    border: 1px solid #dfdfdf;
}

    .highlighted:hover {
        background-color: #DFEDEF;
    }


.TROitem {
    margin-top: 10px;
    vertical-align: middle;
}

    .TROitem span {
        vertical-align: top;
        padding-right: 1em;
    }

    .TROitem button {
        margin-bottom: 10px;
    }

.TROpartNum {
    display: inline-block;
    width: 5em;
    text-align: left;
}


.upsellLineHeader {
    font-size: 1.7em;
    font-family: HP;
    margin: 1em 0 0.4em 0;
}

.upsellLineBody {
    padding-top: 5px;
}
/* Tools */
.toolsTab {
    border: 1px solid #808080;
    border-top-right-radius: 5px;
    border-bottom: 0;
    background-color: inherit;
}

#tools {
    position: relative;
}

.toolsTabBody {
    position: absolute;
    top: -1px;
    background-color: #FFF;
    height: 30em;
    border: 1px solid #808080;
    padding: 1em;
}

div.toolsTabBody .hpBlueButton {
    display: inline-block;
}

div.toolsTabBody p {
    margin: 1.5em 0;
}

div#importHelp {
    position: relative;
    background-color: #FFF;
    height: 80%;
    padding: 2em;
    width: 77%;
    border-color: #888;
}

p.indent40 {
    text-indent: 40px;
}

p.indent45 {
    text-indent: 45px;
}

.wsHelpTable {
    border: solid black 1px;
    padding: 5px;
}

    .wsHelpTable td {
        border: solid black 1px;
        padding: 5px;
    }

    .wsHelpTable th {
        border: solid white 1px;
        background-color: #007DBA;
        padding: 5px;
    }

.menuItem {
    padding-left: 20px;
}

.alternate {
    padding-left: 20px;
}

.quoteSearchFeedback {
    text-align: center;
}

.quotesTable {
    border-collapse: separate;
    border-spacing: 0em;
}

    .quotesTable td {
        background-color: #FFF;
        vertical-align: middle;
        text-align: left;
    }

.quotesTableRow:hover {
    background-color: #EAEAEF;
}

.quoteTableHeader {
    background-color: grey;
    padding: 2px 10px 2px 10px;
    color: #FFF;
}

.quotesTableCell {
    vertical-align: middle;
    padding: 0 10px 0 10px;
    background-color: transparent !important;
}

.center, .engageAndGrowColumnText {
    text-align: center;
}

.blueColor {
    color: #0099FF;
}

span.spanLink {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.div#lockIcon {
    height: 7em;
    margin: 0;
    background-color: #0096D6;
    color: #FFFFFF;
    background: url('/images/sprites/SPRITE_HPicons_1.png');
    background-position: 20px -300px;
}

.lockIcon {
    width: 20px;
    display: inline-block;
    height: 15px;
    background: url(/images/sprites/SPRITE_HPicons_1.png) no-repeat;
    cursor: pointer;
    background-position: -120px -185px;
}

.quoteButton {
    width: 25px;
    height: 25px;
}

.legal {
    background-color: black;
    padding-top: .1em;
}

.validationMessageTitle {
    border-bottom: 1px dashed black;
}

.specHeader {
    font-size: 1.3em;
    font-weight: normal;
    vertical-align: top;
    margin-top: -2px;
}

.basketErrors {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    border: solid white 1px;
    color: white;
}


.innerHeader {
    font-size: 75%;
}

.innerHeaderLight {
    font-size: 75%;
}

.quoteDisplayMsg {
    display: block;
    height: 2em;
}

ul#nav {
    height: 1em;
    line-height: 1em;
}

.saved {
    color: green;
    vertical-align: super;
}

.draft {
    color: darkgray;
    vertical-align: super;
}

.basketIcon {
    display: inline-block;
    background-image: url('/images/Navigation/ICON_IQ2_plus.png');
    background-repeat: no-repeat;
    height: 4px;
    width: 2px;
}

.grandTotal, .savings {
    font-size: 1.4em;
}

.grandTotal {
    padding-top: 10px;
}

.grandTotal.disableMyQuotes {
    padding-top: 0px;
}

.innerHeader.disableMyQuotes .power-advisor-icon, .innerHeader.disableMyQuotes .power-advisor-link {
    margin-top: 0.5em;
}

.innerHeader.disableHPFS .hpfs-total-power-advisor-parent {
    margin-top: -1.5em;
}

.innerHeader.disableHPFS .power-advisor-link {
    margin-left: 16em;
}

.innerHeader.disableHPFS .power-advisor-icon {
    margin-left: 10em;
}

.innerHeader.disableMyQuotes.disableHPFS .power-advisor-link {
    margin-top: -0.1em;
}

.innerHeader.disableMyQuotes.disableHPFS .power-advisor-icon {
    margin-top: -0.1em;
}

div.savings {
    padding: 0;
}

.savings {
    border: 2px solid #CCCCCC;
    border-left: unset;
    border-right: unset;
}

    .savings div {
        width: 50%;
        display: inline-block;
    }

    .savings .left p {
        margin: 0;
        vertical-align: bottom;
        margin-top: 30px;
    }

    .savings .right {
        text-align: center;
    }

        .savings .right p {
            color: #00B388;
            font-weight: 600;
            text-align: center;
            margin-bottom: 5px;
        }

        .savings .right input[type="button"] {
            margin: 0 0 10px 0;
        }

/* Resources */
div#ResourceMenu {
    display: inline-block;
}

div#DisplayContent {
    display: inline-block;
    margin-left: 2em;
}

div#ResourceMenu h1, div#ResourceMenu h2, div#ResourceMenu h3 {
    margin: 0.5em 0;
}

div#ResourceMenu {
    margin-bottom: 3em;
}

/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: #000;
    background: #0096D6; /* default background for browsers without gradient support */
    /* css3 */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#0096D6), to(#0096D6));
    background: -moz-linear-gradient(#0096D6, #0096D6);
    background: -o-linear-gradient(#0096D6, #0096D6);
    background: linear-gradient(#0096D6, #0096D6);
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    /* Variant : for right positioned triangle
------------------------------------------ */

    .triangle-isosceles.right {
        margin-right: 50px;
        background: #0096D6;
    }

    /* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

    /* creates triangle */
    .triangle-isosceles:after {
        content: "";
        position: absolute;
        bottom: -15px; /* value = - border-top-width - border-bottom-width */
        left: 50px; /* controls horizontal position */
        border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
        border-style: solid;
        border-color: #0096D6 transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    /* Variant : right
------------------------------------------ */

    .triangle-isosceles.right:after {
        top: 6px; /* controls vertical position */
        right: -40px; /* value = - border-left-width - border-right-width */
        bottom: auto;
        left: auto;
        border-width: 10px 0 10px 50px;
        border-color: transparent #0096D6;
    }

.displayPanel {
    display: none;
    position: absolute;
    color: white;
    z-index: 100;
    right: 26em;
    top: 0em;
}

    .displayPanel.banner-exists {
        right: 25em;
        top: 12.6em;
    }

.popupPanel {
    display: none;
    position: absolute;
    color: white;
    z-index: 100;
    width: 15em;
}


div.square_promo_Header {
    text-align: center;
    font-size: 1.3em;
    font-family: HPbold;
    margin-top: 0.5em;
    cursor: default;
}

li.square_promo {
    color: #0096D6;
    text-align: center;
    line-height: 200%;
}

    li.square_promo a {
        text-decoration: none;
    }

.bannerdivright {
    width: 240px;
    float: right;
    margin-right: 4px;
    z-index: 1;
}

.bannerdivtop {
    width: 90%;
}


.bannerimgtop, .bannerimg {
    border: 1px solid;
    cursor: pointer;
}

.bannerimg {
    margin: 2em 0 0 0;
}

.bannerimgtop {
    margin: 0 3em 0 0;
}

li.square_promo:hover {
    text-decoration: underline;
}

.HPRequired {
    color: red;
    padding-left: 2px;
    padding-right: 2px;
}

.HPSignupError {
    color: red;
    font: bold;
}

.HPSignupInfo {
    color: black;
    font: bold;
}

/* Account Settings */
div#accountSettings {
    font-size: 1rem;
    font-family: HP;
    padding-top: 1em;
}

    div#accountSettings .inputStyle, div#accountSettings select {
        padding: 0 0.4em;
        width: 24em;
        height: 1.5em;
        line-height: 1.5em;
        margin-top: 0.6em;
    }

    div#accountSettings .divStyle {
        padding-bottom: 1em;
    }

.containerStyle {
    margin: 1em 0;
    padding: 1.4em;
    border: 1px solid #C0C0CD;
    width: 30em;
}

.hmcHead {
    font-size: 2em;
    font-weight: bold;
}

.hmcSectionHeader div.quickFilterGroupHolder {
    margin: 0.5px;
}

.hmcSectionHeader div.TROitem {
    vertical-align: top;
}

.hmcSectionHeader span.TROdesc {
    width: 40em;
}

.hmcSectionHeader div.buyUIvariant div:not([class]) span[title] {
    display: none;
}

.activeTab, .inActiveTab {
    font-size: .75em;
    height: 2em;
    display: inline-block;
    padding: .5em;
    padding-right: .75em;
    margin-right: .25em;
    margin-top: .5em;
    border-radius: 0 10px 0 0;
    position: relative;
}

.activeTab {
    border: solid #5A5A5F 1px;
    z-index: 10;
    top: 1px;
    background-color: white;
    border-bottom: 0;
}

.inActiveTab {
    border: solid #e0e0e0 1px;
    z-index: 9;
    background-color: #e0e0e0;
    border-bottom: 0;
    font-weight: normal;
    color: #8A8A8B;
}

    .inActiveTab span:hover {
        text-decoration: underline;
    }

div.activeTab span.flexF, div.inActiveTab span.flexF {
    font-size: 120%;
}

div#importTab, div#pricelistTab {
    cursor: pointer;
}

    div#importTab.activeTab, div#pricelistTab.activeTab {
        background-color: #FFF;
        font-family: HPbold;
        border-bottom: 1px solid #FFF;
        z-index: 99;
    }

.tabborder {
    border: solid #5A5A5F 1px;
}

.iq-dialog-box {
    width: 300px;
    height: 130px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid grey !important;
}

.applyToAllAccountCheck {
    margin-top: 1%;
}

.newDefault {
    border: 2px solid gray;
    padding: 1em;
}

    .newDefault span {
        margin-bottom: 0.5em;
        display: inline-block;
    }

    .newDefault > span > [id$=Upload] {
        border: 1px solid #afafaf;
    }

/* ============== END OF SITE CSS =============== */

/* JQUI fixes */
.ui-widget-content {
    border: none;
}

.ui-widget-header {
    background-image: none;
    background-color: #4D4D4F;
    font-family: HPbold;
}


.ui-corner-all {
    border-radius: 0;
}

.ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar {
    padding: 0;
}

.ui-dialog-title {
    color: #FFF;
    padding: 0 1em;
}

.ui-datepicker {
    color: #FFF;
    border: 1px solid black;
}

.ui-dialog {
    padding: 0;
    max-width: 90em;
}
/* need to set max width through the JQUI somehow though */
.ui-widget {
    font-family: HP,Calibri,Arial;
    font-size: 1em;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-datepicker {
        font-family: HP;
        font-size: inherit;
    }

button.ui-dialog-titlebar-close {
    background: transparent;
    border: none;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: transparent;
}

.ui-dialog-titlebar-close .ui-icon {
    background-image: url(/images/sprites/SPRITE_HPicons_1.png);
    background-position: -368px -99px;
}
/* this is the "close" button on Feedback, Search etc. boxes */

.ui-accordion-header {
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
}

.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em !important;
}

.ui-accordion-content {
    padding: 0px !important;
}

.quoteGroup .ui-state-default .ui-icon {
    background-image: url("//ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/images/ui-icons_888888_256x240.png") !important;
    background-position: -64px 0;
}

.ui-accordion-header-icon {
    margin-left: -13px !important;
}

.ui-widget-overlay {
    opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
    filter: Alpha(Opacity=50) !important;
    background: rgb(50, 50, 50) !important; /* This will make it darker */
    z-index: 50;
}

.ui-widget input[type=button], .ui-widget input[type=submit] {
    background-color: #0096D6;
    color: #FFF;
    cursor: pointer;
    border: none;
    border-radius: 0 4px 0 4px;
    padding: 0.4em 0.8em;
    font-family: HP; /* clearer than bold */
    margin: 0.69em 0.69em 0 0;
}

    .ui-widget input[type=button]:hover, .ui-widget input[type=submit]:hover {
        background-color: #006699;
    }

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a {
    outline: none;
}

.btnHide {
    display: none;
}

.btnShow {
    display: block;
}

.feedbackdiv {
    float: left;
    margin: 12px 0;
    color: #FFF;
    font-weight: bold;
    background-color: green;
}

.upsellBody {
    margin-top: 2em;
}

.adminTable {
    border-collapse: collapse;
    background-color: #eeeeff;
    border: 1px solid black;
}

    .adminTable td {
        border: 1px solid grey;
        padding: 4px;
    }

    .adminTable th {
        border: 1px solid black;
        padding: 4px;
        background-color: #eeeeee;
    }

    .adminTable tr {
        border: 1px solid black;
    }

.deletedRow {
    background-color: #a0a0a0;
}

.adminHelp {
    background-color: green;
    color: white;
    padding: 3px;
    margin: 5px 0 5px;
}

.shredSummary {
    background-color: lightblue;
    border: 1px solid black;
    display: inline-block;
}

.strikethru {
    text-decoration: line-through;
}

.HiddenProduct {
    background-color: dimgrey;
}

efcSpacer {
    background-color: red;
    width: 40px;
    display: inline-block;
}
/* editor first column spacer*/

#univSubtitle {
    margin-right: 10px;
    font-weight: bold;
}

#univSubheading {
    margin-top: 5px;
    width: 730px;
}

#panelManufacturer {
    margin-top: 20px;
    margin-bottom: 100px;
    width: 800px;
    text-align: center;
}

#panelHPE {
    float: right;
}

#panelHPI {
    float: left;
}

a.mfrButton {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 30px;
}

.lnkURLUniversal {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 30px;
}

span.mfrDescription {
    color: grey;
    background-color: #EEE;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    line-height: 25px;
    text-align: center;
}


.filterLabel {
    display: block;
    padding: 10px 0px;
}

.quotesContentsText {
    float: left;
    display: block;
    padding: 5px 0px;
}

.quoteContentsTooltip, .quoteNameTooltip {
    display: none;
    position: fixed;
    background-color: grey;
    color: white;
    float: left;
    width: 150px;
    -ms-word-wrap: normal;
    word-wrap: normal;
    border-radius: 10px;
    text-align: center;
    z-index: 99;
}

.quoteNameTooltip {
    width: auto;
}


.contentsImage {
    margin-top: -3px;
    vertical-align: top;
    padding: 0px 5px;
}

.deleteQuotePromptText {
    display: none;
    position: fixed;
}

.deleteTemplatePromptText {
    display: none;
    position: fixed;
}

.ui-dialog .ui-dialog-buttonpane {
    padding-right: .4em;
}

    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: none;
        text-align: center;
    }

.DisabledButton {
    background-color: #CCCCCC;
}

.pageIndex {
    border: 2px solid #0096D6;
    text-align: center;
    padding: 0.3em 0.8em;
    margin: 0.69em 0.69em 0 0;
    border-radius: 0 4px 0 4px;
    color: #0096D6;
    font-weight: 600;
    font-family: HP;
}

.tabListContainer {
    font-family: HP,Calibri,Arial;
    font-size: 1em;
    color: #222222;
    position: relative;
    padding: .2em;
}

.myQuotesTabs {
    float: left;
    padding: .5em 1em !important;
    text-decoration: none;
    list-style-type: none;
    color: #555;
    background: #EBEBEB;
    margin: 1px .2em 0 0;
}

    .myQuotesTabs:hover {
        color: #212121;
        cursor: pointer;
    }

.myQuotesTabs-active {
    padding-bottom: 6px;
    border: 1px solid #5F7A76;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    background-color: transparent;
    color: #212121;
}

    .myQuotesTabs-active:hover {
        cursor: default;
    }

.tabList {
    margin: 0;
    padding: .2em .2em 0;
    background-color: transparent;
    background: 0;
    border: 1px solid #5F7A76;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

    .tabList:after {
        clear: both;
        content: "";
        display: table;
    }

.tabListContainer input[type=submit] {
    background-color: #0096D6;
    color: #FFF;
    cursor: pointer;
    border: none;
    border-radius: 0 4px 0 4px;
    padding: 0.4em 0.8em;
    font-family: HP; /* clearer than bold */
    margin: 0.69em 0.69em 0 0;
}

    .tabListContainer input[type=submit]:hover {
        background-color: #006699;
    }

.SortActive {
    background-color: #00B388;
}

.fa-sort-asc, .fa-sort-desc {
    margin-left: 5px;
    display: inline-block;
    background-repeat: no-repeat;
    width: 13px;
    height: 10px;
}

.fa-sort-desc {
    background-image: url('/images/navigation/sort-asc.png');
}

.fa-sort-asc {
    background-image: url('/images/navigation/sort-desc.png');
}

#sortID, #sortName, #sortUpdated, #sortGroup {
    cursor: pointer;
}

#numberOfResults {
    margin-left: 5px;
}

div.footerIQuote {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 23px;
    z-index: 99;
}

#PageLimits {
    margin-bottom: 30px;
}


.tabListContainer input[type=submit]:disabled {
    background-color: #727678;
    color: #FFF;
    cursor: pointer;
    border: none;
    border-radius: 0 4px 0 4px;
    padding: 0.4em 0.8em;
    font-family: HP;
    margin: 0.69em 0.69em 0 0;
}


.validationHyperlink {
    text-decoration: underline;
    cursor: pointer;
}

.expandedFlags {
    height: 25em;
    background-color: blue;
}

.collapsedFlags {
    height: .8em;
    background-color: transparent;
    overflow: hidden;
}

.clickable {
    cursor: pointer;
}

#sdPanel {
    padding: 5px;
    z-index: 100;
    position: absolute;
    left: -10em;
    top: -.2em;
}

fcbRow, #closeEngageEndGrowPointsSummaryModal {
    background-color: transparent;
}

.filterValue {
    margin-left: 4px;
}

.filterValue {
    color: #333;
    position: relative;
    top: -3px;
    font-size: 1.2em;
}

.matchCount {
    background-color: transparent;
    color: #757575;
    position: relative;
    top: -3px;
    padding-left: 3px;
}


.rcaIndicator {
    background-color: orange;
    cursor: pointer;
}

.applyRCAButton {
    background-color: blue;
    color: white;
    cursor: pointer;
}

#rcaControls {
    display: none;
}
/* initialy hide the RCA UI (it si subsequently .show (ed) by jQuery */





/*removes the notes*/
img.quoteAddNote {
    left: -4000px;
}

.MatrixHeaderCell {
    margin: 0 5px 0 5px;
}

.matrixCell {
    margin: 0 5px 0 5px;
}

.explanatoryText {
    margin-top: 12px;
    clear: both;
    color: #2AD2C9;
    font-size: 12px;
}

.chooseVersion, .chooseEdition {
    font-size: 1.2em;
    display: none;
}

.headerSortAdministration {
    font-weight: normal;
    color: white;
    text-decoration: none;
}

#UndoTable {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.preinstalledQuoteOption {
    /* background-color: #CCCCCC; stu removed 10-5-16*/
    line-height: 2em;
    cursor: pointer;
}

.smb--options {
    background-color: #d9d9d9;
    line-height: 2em;
    padding-top: 5px;
}

.preinstalled--options {
    background-color: #EBEBEB;
    line-height: 2em;
    padding-top: 5px;
    /*margin-bottom: 0.2em;*/
}

.preinstalled--options--label, .smb--options--label {
    font-weight: bold;
}

img.supplyChain {
    width: 2.5em;
}

.HPsecondary, .HPcancel, .HPprimary {
    color: #FFF;
    cursor: pointer;
    border: none;
    border-radius: 0 4px 0 4px;
    padding: 0.4em 0.8em;
    font-family: HPbold;
    margin-top: 0.69em;
    line-height: 1em;
}


.HPprimary {
    background-color: #00B388;
}
    /* Critical button - e.g. Buy, Download, Add to Basket, Log In, Register, Contact */
    .HPprimary:hover {
        background-color: #C1401A;
    }
/* Critical button hover */
.textButton, .HPsecondary {
    background-color: #0096D6;
}
    /* Primary button */
    .HPsecondary:hover, .HPsecondary:hover {
        background-color: #006699;
    }

.HPcancel {
    background-color: #767676;
}
    /* Secondary button */
    .HPcancel:hover {
        background-color: #5A5A5A;
    }

.helpMeChoose {
    float: right;
    font-size: 100%;
}

div.divStyle > span[id$="LblInfo"] {
    font-size: 20px;
}

div.divStyle > [class$="success"][id$="LblInfo"] {
    background-color: #12D328;
    color: #FFFFFF;
}

div.divStyle > [class$="error"][id$="LblInfo"] {
    background-color: #DC0D14;
    color: #FFFFFF;
}

#saveQuoteName {
    width: 170px;
}

/****Export popup******/
#exportPanel h3 {
    font-weight: bold;
    margin-bottom: 0.2em;
    margin-top: 0.3em;
}

#exportPanel #hpfs-subtitle > h3 {
    display: inline-block;
    vertical-align: bottom;
    line-height: 30px;
}

#exportPanel img {
    width: 25px;
}

#exportPanel #EmailAddress {
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#exportPanel #btnExport {
    float: right;
    margin-right: 0;
    margin-bottom: 0.5em;
}

#exportPanel #exportEmailMessage {
    background-color: #3abeff;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    font-weight: bold;
    overflow-wrap: break-word;
}

#exportPanel #exportEmailInvalid {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
}

#exportPanel #btnExport, #exportPanel #btnCancel {
    margin-top: 1.5em;
}

#exportPanel input[type="radio"] {
    vertical-align: inherit;
    margin-right: 3px;
}

    #exportPanel input[type="radio"]:focus {
        outline: none;
    }

#exportPanel input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 3px;
}
/*********************/

/***Universal SignIn HPI****/
#hpiDescription {
    margin-right: -1em;
    margin-left: -1em;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,219,220,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(221,219,220,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,219,220,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,219,220,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,219,220,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(221,219,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddbdc', GradientType=0 );
}

#panelUniversal > #hpiImage {
    width: 35%;
}

#panelUniversal > [id$="rightPanel"].hpi-register {
    margin-left: 40%;
}

#panelUniversal > [id$="rightPanel"] > #registerPanel {
    height: 13em;
    width: 26em;
    padding: 1em;
}

#panelUniversal > [id$="rightPanel"].hpi-register > #registerPanel {
    height: 14em;
    width: 30em;
    border: none;
    padding: 0;
}

#panelUniversal > [id$="rightPanel"].hpe-register .follow {
    display: inline-block;
    vertical-align: middle;
}

    #panelUniversal > [id$="rightPanel"].hpe-register .follow img {
        vertical-align: middle;
        margin: 0 0.5em 0 0.5em;
    }

    #panelUniversal > [id$="rightPanel"].hpe-register .follow a {
        text-decoration: none;
        color: black;
        vertical-align: middle;
    }

#panelUniversal h1.hpi-h1 {
    font-size: 2em;
    color: #0096D6;
}

#panelUniversal h3.hpi-h3 {
    font-size: 1.2em;
}

#panelUniversal > #hpiImage > img#monitor {
    position: absolute;
    margin-left: 2em;
    width: 100%;
    height: auto;
    z-index: 1;
}

#hpiDescription div.description {
    margin-left: 40%;
    padding-bottom: 3em;
    padding-right: 8em;
}

    #hpiDescription div.description p {
        margin-bottom: 3em;
    }

#panelUniversal > [id$="rightPanel"] .follow img {
    vertical-align: inherit;
}

#panelUniversal > [id$="rightPanel"] .follow h1 {
    display: inline;
}

#hpiDescription div.description p,
#hpiDescription div.description span,
#panelUniversal > [id$="rightPanel"] .follow a {
    font-size: 1.15em;
    text-decoration: none;
    color: black;
}

#panelUniversal .hpi-register #registerPanel [id$="selectHost"] h3 {
    margin-bottom: 1em;
}

#hpiDescription div.description span {
    display: inline-block;
    line-height: 50px;
    margin-right: 1em;
}

    #hpiDescription div.description span::before {
        content: "";
        display: block;
        width: 43px;
        height: 43px;
        float: left;
        margin-right: 0.6em;
    }

    #hpiDescription div.description span:nth-child(1)::before {
        background: url('/images/universalsigninhpi/stopwatch.png') no-repeat;
    }

    #hpiDescription div.description span:nth-child(2)::before {
        background: url('/images/universalsigninhpi/board.png') no-repeat;
    }

    #hpiDescription div.description span:nth-child(3)::before {
        background: url('/images/universalsigninhpi/chart.png') no-repeat;
    }

/****************************/
/***Universal SignIn default****/
#panelUniversal #registerPanel {
    margin: 1.5em 0 1em 0;
}

#panelUniversal [id$="selectHost"] {
    float: left;
    width: 40%;
}

#panelUniversal [id$="listCountries"] {
    height: 125px;
    width: 180px;
}

#panelUniversal [id$="btnSignInUniversal"] {
    float: left;
}

#panelUniversal [id$="btnRegister"] {
    float: right;
}

#panelUniversal [id$="requestPanel"] {
    float: left;
    width: 45%;
    padding-left: 2em;
}

    #panelUniversal [id$="requestPanel"] > div {
        background-color: lightgray;
        height: 115px;
        width: 200px;
        padding: 5px;
    }

#panelUniversal [id$="dropDownOtherCountries"] {
    width: 199px;
    margin-top: 6px;
}

#panelUniversal [id$="txtEmailAddress"] {
    width: 195px;
    margin-top: 3px;
}

#panelUniversal [id$="btnRequest"] {
    float: right;
}

#panelUniversal [id$="requestFeedback"],
#panelUniversal [id$="requestNoEmail"] {
    margin-top: 0.5em;
    display: inline-block;
}

/**************************/

.quoteInformation {
    display: inline-block;
    margin-right: 15px;
}

.quoteInformationValue {
    font-weight: bold;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}


/*********HPFS************/

#hpfs-btn {
    position: absolute;
    width: 26px;
    height: 26px;
    border: none;
    float: right;
    margin-left: 15em;
    margin-top: 0.5em;
    cursor: pointer;
    z-index: 1;
}

    #hpfs-btn:focus {
        outline: none;
    }

#hpfsPanel {
    margin-top: 12px;
}

    #hpfsPanel #hpfs-logo {
        float: left;
        margin-top: 0.5em;
    }

    #hpfsPanel > h1 {
        font-size: 2em;
    }

    #hpfsPanel h2 {
        font-size: 1.5em;
    }

    #hpfsPanel > h3 {
        font-size: 1em;
    }

    #hpfsPanel > h1, #hpfsPanel h2, #hpfsPanel > h3 {
        color: black;
        font-family: HPBold;
    }

    #hpfsPanel > h1, #hpfsPanel > h3 {
        text-align: center;
    }

#hpfsContainer {
    width: 100%;
}

    #hpfsContainer #hpfsValidation {
        margin-top: 3em;
        font-size: 1.2em;
        text-align: justify;
    }

    #hpfsContainer p {
        font-size: smaller;
        font-style: italic;
        margin: 1em 0 0.2em 0;
    }

    #hpfsContainer .hpfs-row {
        line-height: 2em;
        display: block;
    }

        #hpfsContainer .hpfs-row .hpfs-cell,
        #hpfsContainer p {
            display: inline-block;
            padding: 0 5px 0 5px;
        }

    #hpfsContainer .hpfs-header {
        color: white;
        font-family: HPBold;
        background-color: gray;
    }

    #hpfsContainer .hpfs-row .hpfs-cell:nth-child(1) {
        width: 30%;
    }

    #hpfsContainer .hpfs-row .hpfs-cell:nth-child(2) {
        text-align: right;
        width: 20%;
    }

    #hpfsContainer .hpfs-row .hpfs-cell:nth-child(3) {
        width: 42%;
        text-align: right;
    }

    #hpfsContainer .hpfs-header.total .hpfs-cell:nth-child(1) {
        width: 25%;
    }

    #hpfsContainer .hpfs-header.total .hpfs-cell:nth-child(2) {
        width: 25%;
    }

    #hpfsContainer #updateBtn {
        float: right;
        margin-right: 0;
    }

#hpfsInputs .hpfs-row .hpfs-cell:nth-child(1) {
    font-family: HPBold;
}

#hpfsContainer .margin {
    color: #0096D6;
}

#hpfsContainer #hpfsInputs .hpfs-row .hpfs-cell span.lease-info {
    background: url(/images/sprites/HPE-sprite.png) no-repeat;
    display: inline-block;
    vertical-align: sub;
    background-position: -4px -19px;
    width: 20px;
    height: 20px;
}

#hpfsContainer.mx-style .hpfs-cell {
    font-size: 12px;
}

#hpfsContainer.mx-style #hpfsInputs .hpfs-row .hpfs-cell:nth-child(3) span {
    width: 20%;
}

#hpfsContainer.mx-style #hpfsInputs input {
    width: 76%;
}

#hpfsContainer #hpfsInputs input {
    width: 86%;
}

#hpfsContainer #hpfsInputs select {
    width: 100%;
}

#hpfsContainer #hpfsInputs .hpfs-row .hpfs-cell:nth-child(3) span {
    display: inline-block;
    width: 10%;
    text-align: right;
}

#hpfsContainer #hpfsInputs > div,
#hpfsContainer #hpfsResults > div {
    border: 1px solid gray;
}

#hpfsContainer #hpfsResults {
    margin-top: 2em;
}

    #hpfsContainer #hpfsResults .hpfs-row .hpfs-cell:nth-child(1) {
        width: 55%;
        font-weight: normal;
        border-right: 1px solid gray;
    }

    #hpfsContainer #hpfsResults .hpfs-row .hpfs-cell:nth-child(2) {
        width: 39%;
        text-align: right;
    }

#hpfsPanel #hpfsFooter {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

    #hpfsPanel #hpfsFooter > h3 {
        color: #0096D6;
        font-family: hpbold;
        font-size: 0.9em;
        text-align: center;
        margin-bottom: 0.5em;
    }

#hpfsPanel #hpfsDisclaimer,
#hpfsPanel #learnMore {
    text-align: justify;
    color: #afafaf;
    font-style: initial;
    font-size: x-small;
}

#hpfsPanel #learnMore {
    color: #0096D6;
    margin-top: 0.5rem;
    display: inline-block;
}
/********Moved from site.master****************/
.ui-widget-overlay {
    opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
    filter: Alpha(Opacity=50) !important;
    background: rgb(50, 50, 50) !important; /* This will make it darker */
    z-index: 50;
}
/***********************/

.PromoColumnBranch {
    display: inline-block;
}

.TROItem .PromoColumnBranch {
    position: absolute;
    top: 0;
    width: 100%;
}

.PromoColumnBranch > img {
    margin-right: 1px;
    width: 20px;
    height: 20px;
}

.BlueCarpet {
    background: url("../images/EngageAndGrow_Logo.PNG") #425563 no-repeat;
    background-position: 0.8em;
    background-position-y: center;
    background-size: 8em;
    color: #FFF;
    font-size: 1.2em;
    text-align: center;
    padding-left: 0px;
    font-family: HPbold;
}

    .BlueCarpet a {
        color: #FFF;
        padding-right: 1.3em;
        text-align: center;
        float: right;
        font-family: HP;
    }

    .BlueCarpet span {
        padding-left: 6em;
        vertical-align: unset;
    }

#PlaceOrderHolder {
    float: right;
    font-family: HPbold;
    padding-right: 0.4em;
}

#PlaceOrderButton {
    background-image: url(/images/sprites/SPRITE_HPicons_1.png);
    background-position: -170px -152px;
    height: 1.5em;
    padding: 0;
    margin: 0 auto;
    width: 8em;
    vertical-align: super;
    text-align: center;
    padding-left: 1.9em;
}

#placeOrderResultText {
    display: inline-block;
    text-align: center;
}

#ClosePlaceOrderPopup {
    margin: 1em auto 0;
    display: block;
}

.quotePreviewBtns {
    position: absolute;
    bottom: 0;
    width: calc(100% - 10px);
    background: #fff;
    Left: 0px;
    padding-bottom: 10px;
    z-Index: 5;
    padding-left: 10px;
}

.variantCode {
    color: White;
    background-color: Blue;
    width: 2em;
    display: inline-block;
    text-align: center;
}

#applyMarginButton.HPsecondary {
    display: inline;
}

.previewQuoteHeaderTable {
    position: relative;
    margin: 40px 0 0 0;
}

.previewQuoteTable {
    position: relative;
    height: 350px;
    overflow: auto;
}

.previewQuoteButtons {
    margin-left: 20px !important;
}

.errorsColor {
    color: red;
}

#SwitchAccountMessage {
    align-content: center;
}

#SwitchAccount {
    display: inline-block;
    float: left;
}

#CancelSwitchAccount {
    display: inline-block;
    float: right;
}

#SwitchAccountButtons {
    position: relative;
    bottom: -20px;
}

.passwordTooltipRules {
    display: inline-block
}

.ActionButtons {
    position: initial;
    clear: both;
}

.rolesTable {
    width: 190px;
    height: 100px !important;
    float: left;
}

.rolesBttns {
    margin: 4px !important;
    border-width: 4px !important;
    display: block;
}

.ApplyRoles {
    display: inline-block;
    float: left;
}

.Cancel {
    display: inline-block;
    float: right;
}

#errorMessagePopup {
    clear: both;
    display: inline-block;
}

#selectRolesDiv {
    margin: 0 auto !important;
    display: table !important;
}

#moveButtonsDiv {
    float: left !important;
    display: table-row !important;
}

#continueBtn {
    margin-top: -0.75em;
    margin-left: 0.6em;
}

#cancelBtn {
    display: none;
    margin-top: -0.70em;
    margin-left: 0.6em;
}

#easyConnect {
    width: 100%;
}

#PagingControls, .quotesTable, .filterActive {
    display: block;
}

.addToBasketControls {
    display: inline-block;
    float: right;
}

.detailsLeft,
.detailsRight {
    width: 50%;
    float: left;
}

.detailsClear {
    clear: both;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.imageUploadButton:hover {
    background-color: #006699;
}


.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.updatePicture {
    height: 84px;
    width: 100px;
}

    .updatePicture.empty {
        border: 3px dotted #00B388;
        background: #eee;
    }

.errorMessage {
    color: #F44336;
    font-size: 14px;
}

.imageRemoveButton {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.feedbackDetailsForm {
    float: left;
    width: auto;
    overflow: hidden;
}

.feedbackImageForm {
    padding-left: 45px;
    overflow: hidden;
}

.buttonFeedback:disabled, .buttonFeedback:hover:disabled {
    background-color: #9ea2a8 !important;
}

.textlimitQName {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.helpMeChooseDiv {
    width: 900px;
    margin-bottom: 20px;
}

.btnAccesoriesandServices {
    font-weight: bold;
    margin-left: 3.7em;
    position: absolute;
    margin-top: 1.3em;
}

.OPGdealID {
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.AvailabilityPriceBasketText {
    margin-left: 0.3em;
}

.finalPriceTotalSavings {
    display: inline-block;
    cursor: pointer;
    color: #FF8D6D;
    font-weight: bold;
}

.TPLPrice {
    display: inline-block;
    cursor: pointer;
    color: #FF8D6D;
    font-weight: bold;
    font-style: italic;
}

.buyUIprice .TPLPrice {
    min-width: 7em;
}


.buyUIprice .listPrice {
    min-width: 7em;
}

.CompatibilityFilter {
    width: 100%;
    margin-top: 5px;
}

.IBPSavePrice {
    color: #FF8D6D;
    font-weight: bold;
    font-style: italic;
    display: inline-block;
    font-size: 1.4em;
    margin-left: 14.0px;
}

.buyUIsavingsPrice {
    min-width: 11em;
    display: inline-block;
}

.tileContent {
    margin-top: 1.5em;
    margin-left: 1.3em;
    text-align: left;
    width: 60%;
}

.tileFooter {
    margin-top: 1.2em;
    margin-left: 2em;
    margin-bottom: 2em;
    width: 70%;
    text-align: left;
}

.CompetitiveResponse {
    padding-left: 25px;
}

.title-w {
    width: 55px;
    padding-right: 10px;
    line-height: 1;
    font-family: HPEbold;
}

table.competitiveSellingResults {
    border-spacing: 0;
    width: 100%;
    font-family: HPE;
}

    table.competitiveSellingResults thead {
        text-align: left;
    }

    table.competitiveSellingResults th:last-child {
        padding: 0px;
        border-left: 1px solid #ddd;
        width: 200px;
        border-bottom: none;
        vertical-align: bottom;
    }

    table.competitiveSellingResults td, table.competitiveSellingResults th {
        border-bottom: 1px solid #ddd;
        padding: 10px;
    }

        table.competitiveSellingResults td:nth-of-type(2) {
            font-weight: bold;
        }

    table.competitiveSellingResults .keySellingPoints {
        padding: 0px;
        border-bottom: 0px;
        vertical-align: bottom;
    }

    table.competitiveSellingResults td:first-child {
        padding: 0px;
    }

    table.competitiveSellingResults td:last-child {
        border-left: 1px solid #ddd;
        border-bottom: 0px;
        padding: 0px;
    }

    table.competitiveSellingResults .tleft-border {
        border-bottom: 1px solid #ddd;
        height: 38px;
        line-height: 2.5;
        margin-left: 10px;
        width: auto;
        white-space: nowrap;
    }

    table.competitiveSellingResults .tright-border {
        border-bottom: 1px solid #ddd;
        line-height: 2;
        margin-right: 10px;
        margin-bottom: -1px;
    }

    table.competitiveSellingResults a, table.competitiveSellingResults a:active {
        text-decoration: none;
        color: #FFF;
        background-color: #00B388;
        display: block;
        width: 97%;
        height: 80%;
        margin: 4px;
        text-align: center;
        font-family: HPEbold;
    }

        table.competitiveSellingResults a.branchNavigationButton {
            padding: 7px 1px;
            width: 74%;
        }

.competitiveResponseSelector {
    font-family: HPE;
    width: 100%;
}

    .competitiveResponseSelector h1 {
        font-size: 32px;
        font-family: HPbold;
    }

    .competitiveResponseSelector div {
        position: initial;
    }

    .competitiveResponseSelector h3.quickFilterGroupTitle {
        column-span: all;
    }

    .competitiveResponseSelector .quickFilterGroupPanel {
        float: left;
    }

        .competitiveResponseSelector .quickFilterGroupPanel:last-child {
            column-count: auto;
            column-width: 75px;
            max-height: 275px;
        }

    .competitiveResponseSelector .quickFilterGroupHolder {
        max-height: 315px;
        clear: both;
        display: inline-block;
        width: 100%;
    }

#hpfsPanel .competitiveResponseSelector h2.competitiveSellingResultsTitle {
    color: #425563;
    font-size: 24px;
}

.noResizable {
    resize: none;
}

.preinstalledRemovedMessage {
    padding-left: 15px;
}

.categoryNameTitle {
    font-size: 20px;
    font-family: HPEbold;
    color: #333;
}

.centerDiv {
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 100px;
    margin: auto;
}

#adminMenu {
    margin-top: 10px;
}

.square_promo_SMB {
    white-space: nowrap;
}

tr.usrGridRow:nth-of-type(odd) {
    background-color: #E6E5E2;
}

.notificationGridRow {
    background: white;
    margin-left: 10px;
}

.notificationTableHeader {
    padding: 0px 1em 0 0;
    line-height: 2em;
    background-color: #425462;
    color: #fff;
    border-bottom: 1px solid #CCCCCC;
}

.notificationsTable {
    border-collapse: collapse;
    font-size: 0.85em;
    width: 100%;
}

.notificationsButton {
    margin-left: 10px;
}

.notificationsLink {
    margin-left: 10px;
}

.notificationIcon {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    margin-right: 20px;
}

.notificationBell {
    position: relative;
    cursor: pointer;
}

.notificationBellIcon {
    color: #00B388;
    font-size: 1.4em;
}

.notificationCounter {
    background-color: red;
    border-radius: 100%;
    color: black;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: xx-small;
}

.notificationBox {
    display: inline-block;
    margin-top: 4px;
}

#fullMessage, #shortMessage {
    resize: none;
}

.notificationLabel {
    width: 9em;
    text-align: right;
    font-weight: normal;
    display: inline-block;
    padding-right: 10px;
    margin-right: 0.3em;
    margin-left: 0.3em;
    margin-bottom: 0.3em;
    line-height: 1.8em;
}

.notificationInput {
    width: 500px;
}

.selectNotification {
    width: 250px;
}

.titleInAdministrationTabs {
    padding-bottom: 10px;
    font-size: larger;
}


.notificationBubble {
    background-color: #ffffff;
    border: 1px solid #c1c1c1;
    font-size: 35px;
    height: 355px;
    margin: 10px auto;
    position: fixed;
    width: 287px;
    margin-top: -1px;
    -moz-box-shadow: 0px 0px 10px #666666;
    -webkit-box-shadow: 0px 0px 10px #666666;
    box-shadow: 0px 0px 10px #666666;
    z-index: 9999;
    right: 13px;
    top: 115px;
    background: #eaeaea;
}

.notificationBubbleArrowBorder {
    border-color: transparent transparent #c2c2c2 transparent;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    position: absolute;
    top: -17px;
    right: 12px;
}

.notificationBubbleArrow {
    border-color: transparent transparent #eaeaea transparent;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    position: absolute;
    top: -17px;
    right: 12px;
}

.notificationBubbleContainer {
    padding-left: 10px;
    font-size: 20px;
    font-family: Calibri, 'Gill Sans', 'Trebuchet MS', sans-serif;
}

.notificationBubbleBox {
    background: white;
    margin: 10px;
    font-size: 13px;
    height: 55px;
    overflow: hidden;
}

.notificationBubbleBoxIcon {
    float: left;
    margin: 10px;
    padding-top: 10px;
    width: 20px;
    height: 20px;
}

.notificationText {
    padding-top: 10px;
    font-family: Calibri, 'Gill Sans', 'Trebuchet MS', sans-serif;
}

.notificationBubbleDismissButton {
    float: right;
    margin: 5px;
    color: #c2c2c2;
    font-size: 9px;
}

.notificationBubbleBoxContainer {
    overflow-y: scroll;
    height: 327px;
}

.notificationBubbleNoNotifications {
    font-size: 15px;
    text-align: center;
}

.basketListElement {
    position: absolute;
    top: 0;
    left: -500px;
}

.engageAndGrowPointsSummaryHeader {
    background-color: #425563;
    color: #fff;
}

.engageAndGrowPointsSummaryTable {
    border-spacing: 0px 10px;
    border-collapse: separate;
    width: 100%;
}

.engageAndGrowColumnWidth {
    width: 10%;
    padding-left: 10px;
}

.displayInline {
    display: inline-flex;
}

.resourceCategoryName {
    font-size: 125%;
}

.resourcesList {
    margin-left: 0;
    padding-left: 0;
}

.iQuoteResourcesTitle {
    margin: 1em 0 0 0;
    font-size: 200%;
}

.resourceIFrame {
    height: 35em;
    width: 62.22em;
    border: 0;
}

.supplier-logo {
    text-align: right;
    padding: 1.25em 1.25em 0 0;
    position: relative;
    display: inline-block;
    float: right;
    max-height: 40px;
}

.old-homepage #ctl00_loginDisplay {
    color: unset;
}

#ctl00_loginDisplay {
    position: relative;
    right: 10px;
    top: .3em;
    text-align: right;
    width: auto;
    display: inline-block;
    float: right;
    min-height: 5.1em;
    color: #000;
}

#terms-and-conditions textarea {
    height: 250px;
    width: 50%;
    margin-top: 10px;
}

.tab-lines {
    display: inline-block;
    margin-bottom: 10px;
    overflow: hidden;
}

flex-solutions-widget .search-container {
    margin-left: 15px;
}

    flex-solutions-widget .search-container p {
        display: inline-block;
    }

    flex-solutions-widget .search-container input {
        min-width: 250px;
    }

    flex-solutions-widget .search-container button {
        background: transparent;
        color: #000;
        font-weight: 600;
        border-width: 2px;
        cursor: pointer;
    }

#SolutionStore {
    border-color: #FA8072 !important;
}

    #SolutionStore li {
        width: 80%;
    }

    #SolutionStore .tileFooter {
        margin-bottom: 2em;
        margin-top: 0;
        width: 80%;
    }

.discountIndicator {
    display: inline-block;
    margin-left: 1.5em;
}

    .discountIndicator span {
        font-size: 0.8em;
        font-weight: normal;
    }

        .discountIndicator span.applied,
        .discountIndicator span.notApplied {
            margin-left: 0.5em;
            vertical-align: sub;
        }

.partsBin .discountIndicator {
    width: 100%;
    border-bottom: 1px solid;
    margin-left: 0;
    padding-bottom: 5px;
}

    .partsBin .discountIndicator:first-child {
        margin-left: -2%;
        padding-left: 44%;
    }

.partsBin .quoteLoosePartOption .discountIndicator {
    display: none;
}

.partsBin .quoteLoosePartOption:nth-of-type(1) .discountIndicator {
    display: block;
}

span.savingsPrice {
    padding-left: 5px;
}

/* Basket Discount Savings dialog styles */
.discountSavingsDialog h2 {
    margin-bottom: 20px;
}

.discountSavingsDialog .addToQuote {
    float: right;
}

.discountSavingsDialog .dialogTitle {
    color: #333;
    font-family: HPEBold;
    font-size: 1.2em;
    font-weight: normal;
    margin-right: 200px;
}

.discountSavingsDialog .hpeButton {
    font-size: 1rem;
    border: #00B388 solid 4px;
    background-color: #00B388;
    line-height: 1.8rem;
    padding: 0 30px;
    font-family: HPEbold;
    text-transform: uppercase;
    border-radius: 0;
    color: white;
    cursor: pointer;
    text-align: center;
    height: 2.3rem;
    box-sizing: border-box;
    letter-spacing: 0.1rem;
    margin-right: 1em;
    margin: 15px;
}

.discountSavingsDialog .listPrice::after {
    content: " *";
}

.discountSavingsDialog .mainContent {
    margin: 0 auto;
    width: 90%;
}

.discountSavingsDialog .sectionTitle {
    color: #425563;
    font-size: 24px;
    font-family: HPEbold;
    padding-top: 5px;
}

.discountSavingsDialog .totalPriceTitle {
    color: #333;
    font-family: HPEBold;
    font-size: 1em;
    font-weight: normal;
    margin-left: 50px;
}

.discountSavingsDialog .totalPriceValue {
    margin-left: 10px;
}

.discountSavingsTable {
    color: #425563;
    font-family: HPE,Arial;
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
    width: 100%;
}

    .discountSavingsTable .expandButton {
        cursor: pointer;
    }

    .discountSavingsTable th {
        background: #EFEFEF;
    }

    .discountSavingsTable th, .discountSavingsTable tr {
        border-style: solid;
        border-width: 1px 0px 1px 0;
        border-color: #C1DAD7;
        font-family: HPE,Arial;
        padding-left: 10px;
    }

        .discountSavingsTable th.col-0_5 {
            width: 4.17%;
        }

        .discountSavingsTable th.col-1 {
            width: 8.33%;
        }

        .discountSavingsTable th.col-1_5 {
            width: 12.5%;
        }

        .discountSavingsTable th.col-2 {
            width: 16.67%;
        }

        .discountSavingsTable th.col-3 {
            width: 25%;
        }

        .discountSavingsTable th.col-4 {
            width: 33.33%;
        }

        .discountSavingsTable th.col-5 {
            width: 41.67%;
        }

        .discountSavingsTable th.col-5_5 {
            width: 45.83%;
        }

        .discountSavingsTable th.col-6 {
            width: 50%;
        }

    .discountSavingsTable .subPartNumber {
        padding-left: 20px;
    }

    .discountSavingsTable td {
        padding-left: 10px;
    }

        .discountSavingsTable td.listPrice {
            display: table-cell;
        }

/* END of Basket Discount Savings dialog styles */

/* Basket Savings styles */

.finalPrice.listPrice, .savingsPrice.listPrice {
    font-family: HPE;
    font-style: italic;
    color: #614767;
    font-size: 1.1em;
    font-weight: normal;
}

    .savingsPrice.listPrice::after {
        content: " *";
    }

.finalPrice.customerPrice, .savingsPrice.customerPrice {
    font-family: HPE;
    color: #00B388;
    font-size: 1.1em;
    font-weight: bold;
}

.finalPrice.tplPrice, .savingsPrice.tplPrice {
    font-family: HPE;
    color: #FF8D6D;
    font-size: 1.1em;
    font-weight: bold;
    font-style: italic;
}

.h_sysTotal .customerPrice, .totalPriceValue.customerPrice {
    color: #00B388;
}

.h_sysTotal .tplPrice, .totalPriceValue.tplPrice {
    color: #FF8D6D;
    font-style: italic;
}

div.customerPrice {
    display: inline;
}

td.customerPrice {
    color: #00B388;
    font-weight: bold;
}

td.tplPrice {
    color: #FF8D6D;
    font-weight: bold;
    font-style: italic;
}

/* END of Basket Savings styles */
/* IMPORTANT: this is horrid but due to the rabbit hole of horrific styling structure that iQuote is constructed of, hacks like this are required. */
.ui-dialog .ui-dialog-content {
    box-sizing: border-box;
    margin-top: 20px;
}


.buyUIstock {
    position: relative;
}

.stock-info {
    position: absolute;
    min-width: 100%;
    bottom: 16px;
    display: none;
    z-index: 1000;
    min-width: 300px;
    font-size: 11.55px;
}

    .stock-info ul {
        background: #FFF;
        border: 1px solid #000
    }

    .stock-info.top {
        bottom: 16px;
    }

    .stock-info.bottom {
        top: 16px;
    }

    .stock-info.left {
        left: 16px;
    }

    .stock-info.right {
        right: 16px;
    }

    .stock-info li {
        letter-spacing: -.31em;
        padding-bottom: 10px;
        font-weight: normal;
    }

    .stock-info ul li:last-child {
        padding-bottom: 0;
        padding: 5px 0;
    }

.stock-data {
    display: inline-block;
    letter-spacing: normal;
}

.stock-data-img {
    width: 50%;
    text-align: center;
    height: 31px;
    vertical-align: middle;
}

    .stock-data-img img {
        width: auto;
        height: 30px;
    }

.stock-data-name {
    width: 35%;
    vertical-align: middle;
}

    .stock-data-name p {
        padding-left: 10px;
    }

    .stock-data-quantity p,
    .stock-data-name p {
        margin-bottom: 0;
    }

.stock-data-quantity {
    width: 15%;
    text-align: right;
    vertical-align: middle;
}

.universal-stock-report .stock-content .header {
    font-weight: 600;
    border-bottom: 1px solid grey;
}

.universal-stock-report .stock-content {
    letter-spacing: -.31em;
    border-bottom: 1px solid grey;
}

    .universal-stock-report .stock-content .header img {
        max-width: 100%;
        max-height: 50px;
    }

    .universal-stock-report .stock-content .retailer,
    .universal-stock-report .stock-content .retailer p,
    .universal-stock-report .stock-content .quantity,
    .universal-stock-report .stock-content .quantity p {
        text-align: center;
    }

.universal-stock-report .cell {
    width: 150px;
    text-align: center;
    display: inline-block;
    vertical-align: bottom;
    letter-spacing: normal;
    padding: 5px 0;
    box-sizing: border-box;
}

    .universal-stock-report .cell p {
        margin: 0;
    }

    .universal-stock-report .cell.success p {
        color: #00B388;
    }

    .universal-stock-report .cell.sku,
    .universal-stock-report .cell.quantity,
    .universal-stock-report .cell.retailer {
        padding: 5px;
    }

        .universal-stock-report .cell.retailer p {
            text-align: center;
        }

.universal-stock-report .stock-footer {
    letter-spacing: -.31em;
    padding: 5px 0 10px;
}

    .universal-stock-report .stock-footer .cell {
        float: right;
    }

    .universal-stock-report .stock-footer .row {
        padding-right: 150px;
    }

.universal-stock-report .stock-content .cell.description {
    width: 300px;
}

.stock-title h2 {
    font-family: HPEBold;
}

.universal-stock-report .stock-content .cell.description p {
    margin-bottom: 0;
}

.universal-stock-report .cell.footer-text {
    float: none;
}

.universal-stock-report .first-retailer {
    border-left: 1px solid grey;
}

.fulfillment-icon {
    content: url(../images/trolley.png);
    vertical-align: middle;
    margin-right: 10px;
}

.fulfillment-tick-icon {
    content: url(../images/tick.png);
}

.fulfillment-cross-icon {
    content: url(../images/cross.png);
}

body.iframe {
    overflow: hidden;
    background: transparent;
}


#browsingLocate {
    width: 100%;
}

.prodInfo .expandable-content {
    margin-right: 4px;
    margin-left: 21px;
}

.crs h2,
.crs p,
.crs h3 {
    text-align: center;
}

.crs h2 {
    margin-bottom: 20px;
}

.crs .section {
    margin-bottom: 10px;
}

    .crs .section h2 {
        margin-bottom: 0;
    }

.crs .new-features h2 {
    color: #00B055;
    font-weight: bold;
    text-transform: uppercase;
}

.crs .new-attention h2 {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.crs .new-crs h2,
.crs .new-ibp h2 {
    font-weight: bold;
    font-size: 20px;
}

.crs p.error-message {
    text-align: left;
    background-color: #ff0000;
    color: White;
}

.crs .content {
    margin-bottom: 20px;
}

    .crs .content p {
        text-align: left;
    }

#userNotices {
    height: auto !important;
}

#associatePartnerModal {
    display: none;
}


#continueBtn[disabled] {
    border-color: lightgrey;
    color: lightgrey;
    cursor: not-allowed;
}


input[name="confirm"]:disabled, input[name="confirm"]:disabled:hover {
    background-color: #cccccc;
    color: #666666;
}

#exportPanel #btnExport, #exportPanel #btnCancel {
    margin-top: 0;
    float: none;
}

.ui-widget[aria-describedby="exportPanel"] {
    width: auto !important;
}

.invalid-warning {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #425462;
}

#exportPanel #btnExport {
    float: right;
}

.hpfsOr {
    color: rgb(51, 51, 51);
    display: inline;
    font-family: HPEbold
}

.hpfsBasket {
    margin-top: -5px;
    display: inline-block;
}

    .hpfsBasket .hpfsOr {
        color: rgb(51, 51, 51);
        display: inline;
        font-family: HPE
    }

    .hpfsBasket .listPrice {
        font-weight: inherit;
    }


.invalid-warning p {
    padding: 10px;
}

#toolsSpinnerContainer {
    top: 0;
    left: 0;
}

#ctl00_MainContent_CrsPopup .fieldContainer input[name="confirm"] {
    background-color: #006699;
}

    #ctl00_MainContent_CrsPopup .fieldContainer input[name="confirm"]:disabled {
        color: #666666;
        background-color: #cccccc;
    }

.crsButton {
    margin-bottom: 20px;
}

#domains {
    margin-bottom: 10px;
}

#browsingLocate.vertical {
    width: 17.5em;
    display: inline-block;
    margin: 0;
    padding: 0;
    float: right;
    margin-bottom: 20px;
}

.universal-vertical-panel {
    width: calc(100% - 35em);
    display: inline-block;
}

#browsingLocate.vertical #logoContainer {
    margin: 0;
}

    #browsingLocate.vertical #logoContainer div {
        text-align: center;
    }

#browsingLocate.vertical #browsingAttentionText {
    margin-bottom: 50px;
}

#browsingLocate.vertical #logoContainer div a {
    border-color: transparent;
    width: 100%;
}

#Smb20SavingsValue {
    font-weight: bold;
}

#greenSquareModal h2 {
    font-weight: 800;
    margin-bottom: 20px;
    color: black;
}

#greenSquareModal label {
    display: block;
    width: 100%;
}

#split-configuration-section {
    display: inline-block;
}

#greenSquareModal input[type='radio'] {
    margin-bottom: 10px;
    margin-right: 5px;
}

    #greenSquareModal input[type='radio']:last-of-type {
        margin-bottom: 20px;
    }

#greenSquareModal input[type='button'] {
    color: black;
    background: #00B388;
}

#greenSquareModal input[type='number'] {
    text-align: center;
}

#greenSquareModal img.add,
#greenSquareModal img.minus {
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
}

#greenSquareModal img.minus {
    margin-top: 1px;
}

#greenSquareModal img.add {
    transform: scale(0.857);
}

/* Chrome, Safari, Edge, Opera */
#greenSquareModal input[type='number']::-webkit-outer-spin-button,
#greenSquareModal input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

#greenSquareModal #split-configuration-option {
    width: 60%;
    display: inline-block;
}

.pickupQuoteLabel {
    padding-right: 100px;
}

.pickupTextDiv {
    padding-top: 20px;
    padding-bottom: 40px;
}

.bomtext {
    vertical-align: top;
    padding-left: 10px;
}

.bomdesc {
    vertical-align: top;
    padding-bottom: 20px;
}

.notall {
    font-weight: bold;
    padding-bottom: 20px;
}

.bomdiv {
    padding-bottom: 20px;
}

.previewBomtable {
    position: relative;
    overflow: auto;
}

.assemblybuildicon {
    width: 13px;
    vertical-align: middle
}

.assembly-panel .assemblyspanlable {
    padding: 0 1em;
    display: flex;
    justify-content: space-between;
}

.assembly-panel .assemblyspanicon {
    width: 1em;
    height: 1em;
}
.assembly-panel .assemblyspancheckbox {
    padding-left: 20px;
}

.assembly-panel .assemblyspanprice {
    /*
    left: 25em;
    position: absolute;
    display: inline-block;
    color: #00B388;
    font-weight: bold;
    padding-left: 20px;
    */
    padding-right: 3em;
}

.pickupBomdiv {
    max-height: 500px;
    overflow-y: auto;
}

.searchpromodiv {
    /* border-width: 0px;
    position: absolute;
    right: 300px;
    display: inline-block*/
    display: inline-flex;
    align-items: center;
    font-size: 0.75em;
}

.NoBanner {
    padding-top: 10px;
}

.quote-cashback {
    background: #425563;
    padding: 5px 5px 10px;
    color: #FFF;
    margin-bottom: 5px;
}

    .quote-cashback .fields input {
        width: calc(100% - 102px);
        vertical-align: bottom;
        font-size: 17px;
    }

    .quote-cashback .fields p {
        color: #000;
        background: #00B388;
        min-width: 91px;
        vertical-align: bottom;
        margin-left: 5px;
        font-weight: 700;
        cursor: pointer;
        margin-bottom: 0;
        display: inline-block;
        text-align: center;
    }

    .quote-cashback img {
        max-width: 12px;
        margin-left: 5px;
        vertical-align: middle;
    }

#invalidCashBack .invalid {
    background-color: transparent !important;
}

.quote-favourite {
    float: right;
    vertical-align: middle;
    cursor: pointer;
    height: 1.25em;
}

    .favourites_table th {
        font-weight: bold;
    }

    .favourites_table tr {
        border-bottom: solid gray 1px;
    }

    .favourites_table td:last-child, .favourites_table th:last-child {
        text-align: center;
        width: 80px;
    }

    .favourites_table th, .favourites_table td {
        padding: 3px;
    }

.favourites_toggle, .favourites_item {
    cursor: pointer;
    color: cadetblue;
}

.favourites_start {
    background-image: url(/images/sprites/HPE-sprite.png);
    background-position: -65px -40px;
    width: 20px;
    height: 1.5em;
    display: inline-block;
    cursor: pointer;
}

.favourites_header {
    font-weight: bold;
}

.favourites_show_icon, .favourites_hide_icon {
    background-image: url(/images/sprites/SPRITE_HPicons_1.png);
    width: 20px;
    height: 12px;
    display: inline-block;
    margin-left: 3px;
}

.favourites_show_icon {
    background-position: -290px -76px;
}

.favourites_hide_icon {
    background-position: -290px -78px;
    transform: rotate(180deg);
}

.favourites_details {
    margin-top: 5px;
    font-size: 0.85em;
}

#favouritesPopup {
    min-height: 720px;
    width: 960px;
}

#pricedecreaseimg {
    height: 18px;
    width: 20px;
    margin-right: 0em;
}

#WzTtDiV,
#WzBoDy,
#WzTiTl,
#WzTiTlTb {
    width: auto !important;
}

#WzTtDiV {
    line-break: normal;
}

#WzTiTlTb {
    width: 100% !important;
}

.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: .25em !important;
}

.mb-2 {
    margin-bottom: .5em !important;
}

.mb-3 {
    margin-bottom: .75em !important;
}

.mb-4 {
    margin-bottom: 1em !important;
}

.mb-5 {
    margin-bottom: 1.25em !important;
}

.ml-0 {
     margin-left: 0 !important;
 }

.ml-1 {
    margin-left: .25em !important;
}

.ml-2 {
    margin-left: .5em !important;
}

.ml-3 {
    margin-left: .75em !important;
}

.ml-4 {
    margin-left: 1em !important;
}

.ml-5 {
    margin-left: 1.25em !important;
}

.d-flex {
    display: flex !important;
}

.d-flex-inline {
    display: inline-flex !important;
}

.import-checkbox > label {
    font-weight: normal;
}