@lighten-percentage:           15%;
@darken-percentage:            10%;
@saturate-percentage:          15%;
@desaturate-percentage:        20%;

@brand-darken: darken(@brand-accent, @darken-percentage);
@brand-lighten: lighten(@brand-accent, @lighten-percentage);
@brand-saturate: saturate(@brand-accent, @saturate-percentage);
@brand-desaturate: desaturate(@brand-accent, @desaturate-percentage);

@brand-darken-saturate: darken(saturate(@brand-accent, @saturate-percentage), @darken-percentage);
@brand-lighten-saturate: lighten(saturate(@brand-accent, @saturate-percentage), @lighten-percentage);
@brand-darken-desaturate: darken(desaturate(@brand-accent, @desaturate-percentage), @darken-percentage);
@brand-lighten-desaturate: lighten(desaturate(@brand-accent, @desaturate-percentage), @lighten-percentage);


// Helper Classes Do Not Change ----------------------------------------------------------------
.padding-xs { content: " "; color: rgba(0, 0, 0, 0); height: 10px; width: 100%; clear: both; }
.padding,
.padding-sm { content: " "; color: rgba(0, 0, 0, 0); height: 20px; width: 100%; clear: both; }
.padding-md { content: " "; color: rgba(0, 0, 0, 0); height: 40px; width: 100%; clear: both; }
.padding-lg { content: " "; color: rgba(0, 0, 0, 0); height: 80px; width: 100%; clear: both; }
.pad-left { margin-left: 40px; }
.pad-right { margin-right: 40px; }
.pad-top { margin-top: 20px; }
.pad-bottom { margin-bottom: 20px; }
.half-pad-right { margin-right: 20px; }
.half-pad-left { margin-left: 20px; }
.half-pad-top { margin-top: 10px; }
.half-pad-bottom { margin-bottom: 10px; }
.quarter-pad-right { margin-right: 10px; }
.quarter-pad-left { margin-left: 10px; }
.quarter-pad-top { margin-top: 5px; }
.quarter-pad-bottom { margin-bottom: 5px; }
.no-pad-top { padding-top: 0 !important; }
.no-pad-bottom { padding-bottom: 0 !important; }
.no-pad-right { padding-right: 0 !important; }
.no-pad-left { padding-left: 0 !important; }
.centered,
.center { text-align: center; margin-left: auto; margin-right: auto; }
.full-width { width: 100% }
.half-width { width: 50% }

// Mobile Helper Classes 
.text-left-not-xs,
.text-left-not-sm,
.text-left-not-md,
.text-left-not-lg { text-align: left; }
.text-center-not-xs,
.text-center-not-sm,
.text-center-not-md,
.text-center-not-lg { text-align: center; }
.text-right-not-xs,
.text-right-not-sm,
.text-right-not-md,
.text-right-not-lg { text-align: right; }
.text-justify-not-xs,
.text-justify-not-sm,
.text-justify-not-md,
.text-justify-not-lg { text-align: justify; }
.pull-left-not-xs,
.pull-left-not-sm,
.pull-left-not-md,
.pull-left-not-lg { float: left !important; }
.pull-center-not-xs,
.pull-center-not-sm,
.pull-center-not-md,
.pull-center-not-lg { float: none !important; }
.pull-right-not-xs,
.pull-right-not-sm,
.pull-right-not-md,
.pull-right-not-lg { float: right !important; }
@media (max-width:@screen-sm-max) {
    .text-left-not-xs,
    .text-center-not-xs,
    .text-right-not-xs,
    .text-justify-not-xs { text-align: inherit; }
    .text-left-xs { text-align: left; }
    .text-center-xs { text-align: center; }
    .text-right-xs { text-align: right; }
    .text-justify-xs { text-align: justify; }
    .pad-bottom-xs { margin-bottom: 20px; }
    .half-pad-right-xs { margin-right: 20px; }
    .half-pad-left-xs { margin-left: 20px; }
    .half-pad-top-xs { margin-top: 10px; }
    .half-pad-bottom-xs { margin-bottom: 10px; }
    .quarter-pad-right-xs { margin-right: 10px; }
    .quarter-pad-left-xs { margin-left: 10px; }
    .quarter-pad-top-xs { margin-top: 5px; }
    .quarter-pad-bottom-xs { margin-bottom: 5px; }
    .no-pad-top-xs { padding-top: 0 !important; }
    .no-pad-bottom-xs { padding-bottom: 0 !important; }
    .no-pad-right-xs { padding-right: 0 !important; }
    .no-pad-left-xs { padding-left: 0 !important; }
    .pull-left-not-xs,
    .pull-right-not-xs { float: none !important; }
    .pull-left-xs { float: left !important; }
    .pull-right-xs { float: right !important; }
    .pull-center-xs { float: none !important; }
}
@media (min-width:@screen-sm-min) and (max-width:@screen-sm-max) {
    .text-left-not-sm,
    .text-center-not-sm,
    .text-right-not-sm,
    .text-justify-not-sm { text-align: inherit; }
    .text-left-sm { text-align: left; }
    .text-center-sm { text-align: center; }
    .text-right-sm { text-align: right; }
    .text-justify-sm { text-align: justify; }
    .pad-bottom { margin-bottom: 20px; }
    .half-pad-right-sm { margin-right: 20px; }
    .half-pad-left-sm { margin-left: 20px; }
    .half-pad-top-sm { margin-top: 10px; }
    .half-pad-bottom-sm { margin-bottom: 10px; }
    .quarter-pad-right-sm { margin-right: 10px; }
    .quarter-pad-left-sm { margin-left: 10px; }
    .quarter-pad-top-sm { margin-top: 5px; }
    .quarter-pad-bottom-sm { margin-bottom: 5px; }
    .no-pad-top-sm { padding-top: 0 !important; }
    .no-pad-bottom-sm { padding-bottom: 0 !important; }
    .no-pad-right-sm { padding-right: 0 !important; }
    .no-pad-left-sm { padding-left: 0 !important; }
    .pull-left-not-sm,
    .pull-center-not-sm,
    .pull-right-not-sm  { float: none !important; }
    .pull-left-sm { float: left !important; }
    .pull-center-sm { float: none !important; }
    .pull-right-sm { float: right !important; }
}
@media (min-width:@screen-md-min) and (max-width:@screen-md-max) {
    .text-left-not-md,
    .text-center-not-md,
    .text-right-not-md,
    .text-justify-not-md { text-align: inherit; }
    .text-left-md { text-align: left; }
    .text-center-md { text-align: center; }
    .text-right-md { text-align: right; }
    .text-justify-md { text-align: justify; }
    .pad-bottom { margin-bottom: 20px; }
    .half-pad-right-md { margin-right: 20px; }
    .half-pad-left-md { margin-left: 20px; }
    .half-pad-top-md { margin-top: 10px; }
    .half-pad-bottom-md { margin-bottom: 10px; }
    .quarter-pad-right-md { margin-right: 10px; }
    .quarter-pad-left-md { margin-left: 10px; }
    .quarter-pad-top-md { margin-top: 5px; }
    .quarter-pad-bottom-md { margin-bottom: 5px; }
    .no-pad-top-md { padding-top: 0 !important; }
    .no-pad-bottom-md { padding-bottom: 0 !important; }
    .no-pad-right-md { padding-right: 0 !important; }
    .no-pad-left-md { padding-left: 0 !important; }
    .pull-left-not-md,
    .pull-center-not-md,
    .pull-right-not-md { float: none !important; }
    .pull-left-md { float: left !important; }
    .pull-center-md { float: none !important; }
    .pull-right-md { float: right !important; }
}
@media (min-width:@screen-lg-min) {
    .text-left-not-lg,
    .text-center-not-lg,
    .text-right-not-lg,
    .text-justify-not-lg { text-align: inherit; }
    .text-left-lg { text-align: left; }
    .text-center-lg { text-align: center; }
    .text-right-lg { text-align: right; }
    .text-justify-lg { text-align: justify; }
    .pad-bottom-lg { margin-bottom: 20px; }
    .half-pad-right-lg { margin-right: 20px; }
    .half-pad-left-lg { margin-left: 20px; }
    .half-pad-top-lg { margin-top: 10px; }
    .half-pad-bottom-lg { margin-bottom: 10px; }
    .quarter-pad-right-lg { margin-right: 10px; }
    .quarter-pad-left-lg { margin-left: 10px; }
    .quarter-pad-top-lg { margin-top: 5px; }
    .quarter-pad-bottom-lg { margin-bottom: 5px; }
    .no-pad-top-lg { padding-top: 0 !important; }
    .no-pad-bottom-lg { padding-bottom: 0 !important; }
    .no-pad-right-lg { padding-right: 0 !important; }
    .no-pad-left-lg { padding-left: 0 !important; }
    .pull-left-not-lg,
    .pull-center-not-lg,
    .pull-right-not-lg { float: none !important; }
    .pull-left-lg { float: left !important; }
    .pull-center-lg { float: none !important; }
    .pull-right-lg { float: right !important; }
}

@media only screen and (max-width:@screen-sm-max) {
    .center-mobile { text-align: center !important; margin-right: auto !important; margin-left: auto !important; }
    .full-width-mobile { width: 100% }
    .k-window { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0 }
    .table-responsive { border-bottom: 4px solid @gray-dark;}
}
@media only screen and (max-width:@screen-xs-max) {
    .btn-block-xs,
    .btn-xs-block,
    .xs-block {
        display: block !important;
        width: 100%;
    }
    .btn-xs-block + .btn-xs-block,
    .xs-block + .xs-block,
    .btn-block-xs + .btn-block-xs {
      margin-top: 5px;
  }
}
// Bootstrap Kendo Fix ----------------------------------------------------------------

// remove/hide horizontal scroll   
.k-window  div.k-window-content { overflow-x: hidden; }

// Set a border-box model only to elements that need it 
// if this class is applied to a Kendo UI widget, its layout may change 
.form-control,
.container,
.container-fluid,
.row,
.btn-block,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 { box-sizing: border-box; }

// Make kendo forms act more like bootstrap 
@input-height: @input-height-base;
@widget-text-color: @input-color;
@input-border-focus: @brand-primary;
.form-group .k-widget,
.form-inline .k-widget { width: 100%; }
.form-group .k-grid { width: auto; }
.k-treeview-lines .k-icon { color: @brand-primary; }
.k-datepicker .k-icon { color: @brand-primary; }
input.k-textbox {
    height: @input-height-base;
    font-size: (@font-size-base);
    padding: @padding-base-vertical @padding-base-horizontal;
    width: 100%;
    line-height: @line-height-base;
    color: @input-color;
    background-color: @input-bg;
    border: 1px solid @input-border;
    border-radius: @input-border-radius;
    text-indent: 0;
}
.k-widget,
input.k-textbox,
input.k-textbox:hover {
    border-color: @input-border;
    border-radius: @input-border-radius;
}
input.k-textbox:focus {
    outline-offset: -2px;
    border-color: @input-border-focus;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px fade(@input-border-focus, 65%);
    transition: none;
}


// Loading spinner ----------------------------------------------------------------
.loader { display: none; z-index: 9999 !important; position: fixed; bottom: 50%; right: 50%; margin-right: -37.5px; }
#screen-overlay { display: none; position: fixed; z-index: 9998; top: 0; left: 0; right: 0; bottom: 0; overflow-y: hidden; opacity: 0; width: 100%; height: 100%; }
.cp-spinner { width: 75px; height: 75px; display: inline-block; box-sizing: border-box; position: relative }
.cp-round:before { border-top: solid 6px @brand-primary; border-right: solid 6px @brand-primary; border-bottom: solid 6px @brand-primary; border-left: solid 6px @brand-primary; border-radius: 50%; content: " "; width: 75px; height: 75px; display: inline-block; box-sizing: border-box; position: absolute; top: 0; left: 0; opacity: 0.4; }
.cp-round:after { border-top: solid 6px @brand-info; border-radius: 50%; content: " "; width: 75px; height: 75px; display: inline-block; box-sizing: border-box; border-right: solid 6px transparent; border-bottom: solid 6px transparent; border-left: solid 6px transparent; position: absolute; top: 0; left: 0; animation: cp-round-animate 0.8s ease-in-out infinite }
@keyframes cp-round-animate {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

// Flexbox columns ----------------------------------------------------------------
.row-flex,
.row-flex > div[class*='col-'] { display: flex; flex: 1 1 auto; }
.row-flex-wrap { align-content: flex-start; flex: 0; }
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] { margin: -.2px; }
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] > div { width: 100%; }
.flex-col { display: flex; flex: 1 100%; flex-flow: column nowrap; }
.flex-grow { display: flex; flex: 2; }

// Flex grid for making columns/panels stretch to the tallest one on that row
.flex-grid,
.flex-grid > div[class*="col-"] { display: flex; flex-wrap: wrap; }
.flex-grid .panel { display: block; width: 100%; }
@media (max-width:768px) {
    .flex-grid,
    .flex-grid > div[class*="col-"] { display: inherit; }
}

// Notifications Sidebar ----------------------------------------------------------------
.k-notification-successerrorwarn { padding: 0 15px; border: none; color: white; border-radius: 4px; margin-bottom: 5px; }
.sidebar-wrapper { color: #FFF; right: 0; background: transparent; border: none; position: fixed; z-index: 10004; transition: all 0.25s cubic-bezier(1.000, 0.190, 0.195, 0.910); margin-right: -250px; overflow-y: auto; top: 95px; width: 250px; color: #FFF; }
#sidebar-wrapper.active { transition: all 0.25s cubic-bezier(1.000, 0.190, 0.195, 0.910); width: 290px; right: 260px; }
.notify i { height: 100%; margin-top: 10px; font-size: 2em; color: white; }
.mega-x { margin-right: -7px; }
.time { font-size: 11px; }
.notify-wrapper-success .fa-warning:before { content: "\f05d"; }
.notify-wrapper-success { background-color: @brand-success; border-radius:4px; border: @brand-success; }
.notify-wrapper-error { background-color: @brand-danger; border-radius:4px; border: @brand-danger;  }
.notify-wrapper-warn { background-color: @brand-warning; border-radius:4px; border: @brand-warning;  }
.notify-error { background-color: @brand-danger; }

// Credit Card Types Selection ----------------------------------------------------------------
.CreditCardIcon { background-size: 40px 40px; background-repeat: no-repeat; width: 40px; height: 40px; display: block; float: left; }
.Visa_Selected { background-image: url('@{image-path}/visa_selected.png'); }
.Discover_Selected { background-image: url('@{image-path}/discover_selected.png'); }
.AmericanExpress_Selected { background-image: url('@{image-path}/amex_selected.png'); }
.MasterCard_Selected { background-image: url('@{image-path}/mastercard_selected.png'); }
.Visa { background-image: url('@{image-path}/visa.png'); }
.Discover { background-image: url('@{image-path}/discover.png'); }
.AmericanExpress { background-image: url('@{image-path}/amex.png'); }
.MasterCard { background-image: url('@{image-path}/mastercard.png'); }

// Create Person ----------------------------------------------------------------
.completed-section {
    .form-control-static {
        padding-top: 0;
        min-height: 0;
    }
    .form-horizontal {
      @media (min-width: @screen-sm-min) {
        .control-label {
          padding-top: 0;
        }
      }
    }
    .form-group {
        margin-bottom: 0;
    }
    .form-horizontal .checkbox,
    .form-horizontal .radio {
        min-height: 0;
        padding-top: 0;
    }
    .checkbox label,
    .radio label {
        min-height: 0;
    }
    .required-mark {
        display: none;
    }
}

// Hosted payment iframe
iframe.hosted-profile-page {
    width: 100%;
    height: 360px;
    border: none;
}
.hosted-profile-page-blocker {
    width: 100%;
    height: 360px;
    background-color: fade(@gray, 20%);
    position: absolute;
    border-radius: @border-radius;
    margin-left: -15px;
}
.hosted-payment-panel .panel-body {
    position: relative;
}
.fieldSet {
    padding: 0;
}
.fieldSet .formRow {
    margin: 15px 0;
}
body.nexio-body {
    background-color: @panel-bg;
}
body.nexio-body #paymentForm {
    input,
    select {
        display: block;
        width: 100%;
        height: @input-height-base;
        padding: @padding-base-vertical @padding-base-horizontal;
        font-size: @font-size-base;
        line-height: @line-height-base;
        color: @input-color;
        background-color: @input-bg;
        background-image: none;
        border: 1px solid @input-border;
        border-radius: @input-border-radius;
    }
    legend {
        border-bottom: 0;
        margin-bottom: 0;
    }
    .fieldSet {
        border: none;
    }
    .label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
        padding: 0;
        font-size: 100%;
        line-height: inherit;
        color: @text-color;
        text-align: left;
        white-space: normal;
        vertical-align: baseline;
        border-radius: 0em;
    }
    .fieldSet .requiredField,
    .validation.error {
        color: @brand-danger;
    }
    #expirationMonth,
    #expirationYear {
        width: auto;
        display: inline-block;
    }
    #securityCode {
        max-width: 125px;
    }
    .labelSeparator {
        display: none;
    }
    .requiredField {
        float: right;
        margin-left: 3px;
    }
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  border: 1px solid @brand-danger;
}

.completed-section .sq-form .form-group {
    margin-bottom: 15px;
}

// View Cart ----------------------------------------------------------------
i.cart-button-icon { font-size: 1.2em; }
.dropdown-menu-viewcart { right: 0; left: auto; padding: 10px; min-width: 268px; max-height: 350px; overflow-y: scroll; }
.qty input { max-width: 50px; text-align: center; }
.alert-info { background-color: fadeout(@brand-info, 85%); border-color: @brand-info; color: @brand-info; }
.alert-info a { color: @brand-info; }
.k-panelbar>li.k-state-default>.k-link.k-state-hover { color: #fff; }

// Incentive rewards status messages 
.qualification-message { display: block; }
.QualifiedThreshold i.fa,
.NonQualifiedThreshold i.fa { font-size: 2em; font-family: FontAwesome; float: right; min-height: 60px; }
.QualifiedThreshold i.fa:after { content: "\f058"; }
.NonQualifiedThreshold i.fa:after { content: "\f06a"; }
.QualifiedThreshold,
.NonQualifiedThreshold { border-radius: @border-radius-base; color: #FFFFFF; padding: 10px; }
.QualifiedThreshold { background-color: @brand-success; }
.NonQualifiedThreshold { background-color: @brand-info; }
.DiscountMessageOutput { background-color: @brand-success; border: 2px solid @brand-success; color: #000; width: 100%; opacity: 0.7; text-align: center; min-height: 60px; padding: 18px; color: black; }

// Validation ----------------------------------------------------------------
input.ng-invalid.ng-touched { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
input.ng-invalid.ng-dirty { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
body.ng-invalid.ng-touched { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
body.ng-invalid.ng-dirty { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.ng-submitted input.ng-invalid { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
textarea.ng-invalid.ng-touched { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
textarea.ng-invalid.ng-dirty { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.ng-submitted textarea.ng-invalid { border-color: @brand-danger !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
select.ng-invalid.ng-touched { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
select.ng-invalid.ng-dirty { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.ng-submitted select.ng-invalid { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
span.ng-invalid.ng-touched { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
span.ng-invalid.ng-dirty { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.ng-submitted span.ng-invalid { border-color: @brand-danger; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); }
.k-datepicker.ng-invalid { border-width: 1px; }
.k-numerictextbox.ng-invalid { border-width: 1px; }

// Product category pages  ----------------------------------------------------------------
.product-thumbnails img { max-height: 200px; width: auto; }
.products-gridview .product-description { display: none; }
.products-gridview h4 { padding-bottom: 2px; }
.products-gridview .thumbnail { margin-bottom: 5px; padding: 0; border: 0; }
.products-gridview,
.products-gridview > div[class*="col-"] { display: flex; flex-wrap: wrap; }
.gridproduct-card { display: block; width: 100%; }
@media (min-width:981px) {
    .products-gridview .thumbnail { min-height: 150px; }
}
// Safari 10.1+ hack for percentage rounding on columns combined with flexbox
@media (max-width:768px) {
    .products-gridview .gridproduct {
        width: 100%;
    }
}
@media (min-width:767px) {
    .products-gridview .gridproduct {
        width: 49.9%;
    }
}
@media (min-width:992px) {
    .products-gridview .gridproduct {
        width: 33.2%;
    }
}

// Product detail pages ----------------------------------------------------------------
.AssociatedProductsContainer .product-thumbnail {
    min-height: 200px;
}
.AssociatedProductsContainer .product-thumbnail img {
    max-height: 200px;
}
.is-selectable{
    text-decoration: none;
}
.not-selectable {
    text-decoration: line-through;
}
h3.product-name,
h3.add-to-cart-pricing {
    margin-top: 0;
    margin-bottom: 0;
}
.productdetail-quantity-input {
    max-width: 110px;
}
.productdetail-personalization-panel label.control-label span.text-danger {
    position: inherit;
}
.additional-images-repeater {
    float: left;
    min-height: 110px;
    margin-right: 10px;
    .thumbnail {
        margin-bottom: 0;
    }
    img {
        max-height: 100px;
        max-width: 100px;
    }
}
img.product-image {
    width: auto;
    border-radius: @border-radius;
}

// Shopping Cart Slick Slider for associated items
.AssociatedProductsContainer {
    .slick-prev,
    .slick-next { 
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: block;
        margin-top: -10px;
        padding: 0;
        cursor: pointer;
        color: transparent;
        border: none;
        outline: none;
        background: transparent;
        opacity: .8;
    }
    .slick-next {
        right: 0;
    }
    .slick-prev:hover:before,
    .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before { 
        opacity: 1;
    }
    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before {
        opacity: .25;
    }
    .slick-prev:before,
    .slick-next:before {
        font-size: 25px;
        font-family: 'FontAwesome';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: @link-color !important;
    }
    .slick-prev:before {
        content: "\f190";
    }
    .slick-next:before {
        content: "\f18e";
    }
}

// Max height on product images to prevent very tall narrow images from being huge
.product-image-container img {
    max-height: 550px;
}

// Make the image in the pop-up take up 100% width
.productdetail-k-window-img {
    width: 100%;
    height: auto;
}

// Add indicator to product image that you can click to zoom
.product-image-container {
    position: relative;
    width: 100%;
}
.zoom-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
}
.product-image-container:hover .zoom-overlay {
    opacity: 0.6;
}
.product-image-container i.zoom-icon {
    font-size: 85px;
    color: white;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

// Subtotal page ----------------------------------------------------------------
img.OrderSubtotalThumbnail {
    max-height: 45px;
    max-width: auto;
}
.SamePersonalizationMessage {
    margin-bottom: 0;
}

@media print {
    img.subtotal-product-img {
        max-width: 200px;
        max-height: 200px;
    }
    .subtotal-page .col-sm-6 {
        width: 49.5%;
        float: left;
    }
    body.et_divi_theme #top-header,
    .et_menu_container,
    #pbe-footer-wa-wrap,
    body.et_divi_theme #main-footer {
        display: none !important;
    }
}

// Consultant search ----------------------------------------------------------------
.search-results-panel {
    min-height: 260px;
}

h4.search-results-name {
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1.2em;
}

img.consultant-image {
    max-height: 225px;
}

@media only screen and (min-width: @screen-sm-max) {
    .search-results-image-col {
        max-height: 225px;
    }
}

.search-by-business-unit,
.checkout-businessunit-new {
    display: none !important;
}

// Consultant profile
ul.menu-social {
    list-style: none;
    padding-left: 0;
    word-wrap: break-word;
    li a:before {
        display: inline-block;
        padding: 4px 0px;
        vertical-align: top;
        font-family: "Fontawesome";
        font-size: 16px;
        color: #fff;
        width: 30px;
        height: 30px;
        background-color: @gray-darker;
        border-radius: 100%;
        content: '\f0c0';
        text-align: center;
        margin-right: 15px;
        line-height: 1.5em;
    }
    li.social-website a:before {
        content: '\f0ac';
        background-color: @gray-darker;
    }
    li a[class*="facebook.com"]:before {
        content: '\f09a';
        background-color: #3b5998;
    }
    li a[class*="twitter.com"]:before {
        content: '\f099';
        background-color: #1da1f2;
    }
    li a[class*="dribbble.com"]:before {
        content: '\f17d';
        background-color: #ea4c89;
    }
    li a[class*="plus.google.com"]:before {
        content: '\f0d5';
        background-color: #4285f4;
    }
    li a[class*="pinterest.com"]:before {
        content: '\f0d2';
        background-color: #bd081c;
    }
    li a[class*="github.com"]:before {
        content: '\f09b';
        background-color: #000000;
    }
    li a[class*="tumblr.com"]:before {
        content: '\f173';
        background-color: #2c4762;
    }
    li a[class*="youtube.com"]:before {
        content: '\f167';
        background-color: #ff0000;
    }
    li a[class*="flickr.com"]:before {
        content: '\f16e';
        background-color: #f40083;
    }
    li a[class*="vimeo.com"]:before {
        content: '\f194';
        background-color: #1ab7ea;
    }
    li a[class*="instagram.com"]:before {
        content: '\f16d';
        background-color: #c32aa3;
    }
    li a[class*="linkedin.com"]:before {
        content: '\f0e1';
        background-color: #007bb5;
    }
    li a[class*="snapchat.com"]:before {
        content: '\f2ac';
        background-color: #fffc00;
    }
}

// Password validation
#pswd_info .invalid { line-height: 24px; color: @brand-danger; }
#pswd_info .invalid:before { content: "\f00d"; font-family: fontawesome; margin-right: 10px; }
#pswd_info .valid { line-height: 24px; color: @brand-success; }
#pswd_info .valid:before { content: "\f00c"; font-family: fontawesome; margin-right: 10px; }
#pswd_info { position: absolute; width:90%; padding: 15px; background: #ffffff; font-size: .875em; border-radius: @border-radius-base; box-shadow: 0 1px 3px #ccc; border: 1px solid #ddd; z-index: 9999; }
#pswd_info h4 { margin: 0 0 10px 0; padding: 0; font-weight: normal; font-size: 16px; }
#pswd_info::before { content: "\25B2"; position: absolute; top: -12px; left: 45%; font-size: 14px; line-height: 14px; color: #ddd; text-shadow: none; display: block; }
#pswd_info ul { list-style: none; }

// General fixes and layout ----------------------------------------------------------------

.checkbox-right input[type=checkbox] { margin-left: 0; }
@media only screen and (max-width : 480px) {
    .form-horizontal .checkbox.checkbox-right { padding-top: 0; }
}
.hand { cursor: pointer; }
.panel-heading i.selected-icon { display: none; }
.selected-section .panel-heading i.selected-icon { display: inline-block; }
.DiscountMessageOutput { background-color: @brand-success; border: 2px solid @brand-success; color: #000; }
.invalid { color: @brand-danger; }
.valid { color: @brand-success; }

@media only screen and (min-width:@screen-sm) {
    .form-horizontal .right-checkbox .checkbox {
        margin-top: 11px;
    }
}

// Fix checkboxes in panel headers
h3.panel-title input[type=checkbox].panel-title-checkbox {
    margin: 7px 8px 0 0;
    vertical-align: top;
}

// make container have a min height to lessen footer snapping around, make container fit nicer in divi content
#main-content .container-fluid.cart-container { min-height: 600px; }

// stop notifications from going behind nav
#sidebar-wrapper { z-index: 999999; }

// override divi ol from bootstrap breadcrumb
.entry-content ol.breadcrumb { padding: 9px 15px !important; line-height: normal !important; margin-bottom: 0px; }

// override divi removing padding from inputs
input[type=email].form-control,
input[type=password].form-control,
input[type=tel].form-control,
input[type=text].form-control,
select.form-control,
textarea.form-control {
    height: @input-height-base;
    font-size: (@font-size-base);
    padding: @padding-base-vertical @padding-base-horizontal;
    line-height: @line-height-base;
    color: @input-color;
    border: 1px solid @input-border;
}

// remove top margin
#left-area .entry-content ul.pagination,
.entry-content ul.pagination { margin: 0; padding: 0; }

// make treeview categories wrap rather than use a scrollbar
.entry-content div.k-treeview { white-space: normal; }

// Remove the additional padding divi adds on header tags for panel items
h3.panel-title { padding-bottom: 0;}

// Center recapcha in combination with text-center and pull it over for mobile phones
.g-recaptcha { display: inline-block; }
@media only screen and (max-width : 370px) {
    .g-recaptcha { margin-left: -50px; }
}

// Add z-index on kendo window so it moves ahead of other website elements
.k-overlay { z-index: 1000000 !important; }
.k-window { z-index: 1000001 !important; }

// Product category menu hidden behind button on mobile
.product-category-button i { margin-right: 15px; margin-top: 3px; transition: transform 0.3s; }
.product-category-button.collapsed i { transform: rotate(-180deg); }
@media only screen and (min-width : 992px) {
    .product-category { display: block !important; }
}

// Hide the last of something in ng-repeat
.last .hide-last { display: none; }

// Size the product image down on the viewcart page
.viewcart-product-img img { max-height: 150px; }

// Move the required asterisk to the top right
label.control-label span.text-danger {
    position: absolute;
    top: 0px;
    right: -10px;
    padding: inherit;
}

// Override the line height from whatever the wordpress theme is doing.
.shoppingcartapp {
    line-height: @line-height-base;
}