/* updates styles to migrage to role attributes to data-role attributes in base.scss*/

/*
 * data-role overrides for base.scss
 * Load this file AFTER base.scss.
 * Every rule in base.scss that targets a [data-role="..."] attribute is repeated here
 * targeting [data-role="..."], in the original order and inside its original @media query.
 * Selectors that reference two or more different roles use
 * :is([data-role="x"], [data-role="x"]) so they keep working whether each role has been
 * migrated in the markup or not (specificity is unchanged).
 */

@media print {
    [data-role="secondary-nav"] {
        display: none !important;
    }

    [data-role="main"] .main-row {
        width: 100%;
        max-width: 100%;
    }
}

body [data-role="main"] div.paginator-34 {
    clear: both;
    width: 100%;
    float: left;
    text-align: center;
    padding: 0.75em 1em 0 1em;
    border: 1px solid #E0E0E0;
    background: #fff;
    margin-bottom: 10px;
}

body [data-role="main"] div.pbtm {
    margin-bottom: 1.5em;
    padding-top: 0.5em;
}

[data-role="top-panel"] {
    left: 0;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    position: relative;
    background: #f4f4f4;
    border-bottom: 1px solid #d7d7d7;
    -webkit-transition: max-height 0.3s ease-out;
    -moz-transition: max-height 0.3s ease-out;
    -o-transition: max-height 0.3s ease-out;
    transition: max-height 0.3s ease-out;
    z-index: 6;
}

    [data-role="top-panel"] ul {
        margin-top: 0;
    }

@media all and (min-width: 1080px) {
    header[data-role="masthead"] .logo-container {
        width: 280px;
        margin: 25px 0;
    }

    .row nav[data-role="secondary-nav"] {
        width: 70%;
    }
}

[data-role="masthead"] {
    left: 0 !important;
    position: relative;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fff;
}

    [data-role="masthead"] .head-row {
        width: 100%;
        margin: 0;
        max-width: none;
        position: relative;
        height: auto;
        overflow: visible;
    }

    [data-role="masthead"] ul {
        list-style-type: none;
    }

    [data-role="masthead"] .head-row:after {
        clear: both;
    }

    [data-role="masthead"] > .row,
    [data-role="masthead"] > * .row {
        float: left;
    }

@media all and (min-width: 768px) {
    [data-role="masthead"] > .row,
    [data-role="masthead"] > * .row {
        float: none !important;
        margin: 0 auto;
    }
}

[data-role="left-nav"] {
    position: absolute;
    top: 0;
    left: -350px;
    width: 350px;
    height: 100%;
    z-index: 5002;
    padding: 1em;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 1;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.csstransforms3d.csstransforms.csstransitions [data-role="left-nav"] {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .csstransforms3d.csstransforms.csstransitions [data-role="left-nav"] .nav-panel {
        -webkit-transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 0.9);
        -moz-transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 0.9);
        -ms-transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 0.9);
        -o-transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 0.9);
        transform: translate3d(0%, 0, 0) scale3d(0.9, 0.9, 0.9);
    }

:is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="fulfillment-method"], [data-role="fulfillment-method"]) {
    width: auto;
    border-right: 1px solid #ddd;
}

    :is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="fulfillment-method"], [data-role="fulfillment-method"]) a {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 1.25em;
    }

@media all and (min-width: 768px) {
    :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="fulfillment-method"], [data-role="fulfillment-method"]) {
        width: auto;
    }

        :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="fulfillment-method"], [data-role="fulfillment-method"]) a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 250px;
        }
}

:is([data-role="multi-lang"], [data-role="multi-lang"]) + :is([data-role="currency"], [data-role="currency"]) {
    border-left: 1px solid #ddd;
}

[data-role="main"] {
    left: 0;
    width: 100%;
    z-index: 2;
    position: relative;
    min-height: 480px;
}

[data-role="main"],
[data-role="panel-wrap"] {
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 250ms ease;
    -moz-transition: -moz-transform 250ms ease;
    -o-transition: -o-transform 250ms ease;
    transition: transform 250ms ease;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

[data-role="panel-wrap"] {
    position: relative;
}

[data-role="main"] .main-row {
    width: 100%;
    z-index: 1;
    margin: 0 auto;
    padding: 1.5em 0;
    position: relative;
    -webkit-transition-delay: 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@media all and (min-width: 480px) {
    [data-role="main"] .main-row {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media all and (max-width: 767px) {
    [data-role="main"] .main-row {
        max-width: 480px;
    }
}

@media all and (min-width: 768px) {
    [data-role="main"] .main-row {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media all and (min-width: 1040px) {
    [data-role="main"] .main-row {
        max-width: 1040px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

[data-role="cross-sells"] .item-actions {
    border-top: 2px solid #E0E0E0;
}

[data-role="cross-sells"] .actions-panel {
    padding-top: 0.5em;
}

    [data-role="cross-sells"] .actions-panel .item-actions label,
    [data-role="cross-sells"] .actions-panel .item-actions span,
    [data-role="cross-sells"] .actions-panel .item-actions select {
        font-size: 0.825em;
        line-height: 1.25em;
        margin-right: 0;
    }

    [data-role="cross-sells"] .actions-panel .item-actions.open {
        margin-bottom: 0.5em !important;
        border-bottom: 1px;
        -webkit-box-shadow: 0 0 5px 0 rgba(25, 25, 25, 0.2);
        box-shadow: 0 0 5px 0 rgba(25, 25, 25, 0.2);
    }

    [data-role="cross-sells"] .actions-panel .item-actions .item-actions-wrap {
        padding: 0.5em;
        text-align: right;
    }

    [data-role="cross-sells"] .actions-panel a.btn.primary.add-to-cart,
    [data-role="cross-sells"] .actions-panel a.btn.primary.btn-view-details {
        position: relative;
        top: 0;
    }

[data-role="cross-sells"] .item-actions .um-pack {
    margin-bottom: 0.5em;
}

    [data-role="cross-sells"] .item-actions .um-pack .pack {
        margin: 0;
        float: none !important;
    }

[data-role="primary-nav-top"] ul {
    list-style-type: none;
    margin-left: 0;
}

[data-role="primary-nav-top"] li {
    margin-left: 0;
}

li[data-role="sign-out"] .btn.sign-out,
li[data-role="sign-in"] .btn.sign-in,
[data-role="user-msgs"] a {
    font-size: 1em;
    line-height: 30px;
    padding: 0 1.25em;
    color: #77BC1F;
    text-transform: none;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: 0;
    border: 0;
    background: none;
}

    li[data-role="sign-out"] .btn.sign-out:hover,
    li[data-role="sign-out"] .btn.sign-out:focus,
    li[data-role="sign-in"] .btn.sign-in:hover,
    li[data-role="sign-in"] .btn.sign-in:focus,
    [data-role="user-msgs"] a:hover,
    [data-role="user-msgs"] a:focus {
        background-color: #77BC1F;
        color: #fff;
        opacity: 1;
    }

@media all and (max-width: 767px) {
    header nav ul:not(.side-nav) li[data-role="sign-in"] a.btn {
        font-size: 1.15em;
        padding: 0 1em;
    }
}

nav ul:not(.side-nav) li[data-role="sign-in"] {
    border-right: 1px solid #ddd;
}

@media all and (min-width: 768px) {
    nav ul:not(.side-nav) li[data-role="sign-in"] {
        width: auto;
        margin: 0;
    }

        nav ul:not(.side-nav) li[data-role="sign-in"] .btn.sign-in {
            padding: 0 1.5em;
        }
}

nav ul:not(.side-nav) li[data-role="sign-in"] span {
    display: inline-block;
}

[data-role="left-nav"] {
    background: #052d42;
}

[data-role="primary-nav"] > .row > ul > li.top-category {
    display: none;
}

@media all and (max-width: 767px) {
    nav ul:not(.side-nav) li[data-role="multi-lang"],
    nav ul:not(.side-nav) li[data-role="currency"] {
        display: none;
    }
}

@media all and (min-width: 768px) {
    [data-role="primary-nav"] > .row > ul > li {
        overflow: hidden;
    }

        [data-role="primary-nav"] > .row > ul > li.top-category {
            display: inline-block;
        }
}

nav :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="isettings-btn"], [data-role="isettings-btn"]) .flag-ind a {
    padding: 0;
}

    nav :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="isettings-btn"], [data-role="isettings-btn"]) .flag-ind a span {
        font-size: 14px;
        font-weight: 600;
    }

[data-role="primary-nav"] {
    padding: 0 !important;
}

    [data-role="primary-nav"] li a {
        color: #fff;
    }

    [data-role="primary-nav"] ul li a .icon-nav {
        position: absolute;
        left: 50%;
        top: 7px;
        display: block;
        width: 16px !important;
        margin-left: -8px;
        height: 0;
        -webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
        box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
    }

    [data-role="primary-nav"] ul li.cart-button a.cart-link {
        position: relative;
    }

        [data-role="primary-nav"] ul li.cart-button a.cart-link span {
            display: inline-block;
            font-size: 1em;
            margin: 0 auto;
            padding-left: 1.5em;
        }

        [data-role="primary-nav"] ul li.cart-button a.cart-link i {
            font-size: 170%;
            left: 1em;
            margin-left: -1em;
            position: static;
            line-height: 36px;
        }

@media all and (max-width: 767px) {
    [data-role="primary-nav"] ul li.cart-button a.cart-link i {
        font-size: 1.25em;
        line-height: 50px;
        margin-left: -45px;
    }

    [data-role="secondary-nav"] {
        width: auto;
        float: right;
        text-align: right;
    }

    :is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="search"], [data-role="search"]),
    :is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="user-nav"], [data-role="user-nav"]) {
        width: auto;
    }

    :is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="sign-in"], [data-role="sign-in"]) {
        width: auto;
    }
}

[data-role="secondary-nav"] {
    z-index: 20;
    margin: 0 auto;
    white-space: nowrap;
    display: inline-block;
    background: rgb(238, 238, 238);
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    position: relative;
    margin-top: -1px;
}

    [data-role="secondary-nav"] li {
        font-size: 0.9em;
    }

@media all and (min-width: 768px) {
    [data-role="secondary-nav"] {
        width: 100%;
    }
}

[data-role="secondary-nav"]:after {
    content: " ";
    clear: both;
    display: block;
}

:is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="account-nav"], [data-role="account-nav"]) {
    background: #f0f1f2;
}

:is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="search"], [data-role="search"]) .ex i {
    display: none !important;
}

@media all and (max-width: 767px) {
    [data-role="secondary-nav"] {
        border-left: 1px solid #d7d7d7;
        border-right: 1px solid #d7d7d7;
    }

        [data-role="secondary-nav"] .ex i {
            display: none !important;
        }
}

[data-role="secondary-nav"] .user-button:hover,
[data-role="secondary-nav"] .user-button:focus,
[data-role="secondary-nav"] .fulfillment-method:hover,
[data-role="secondary-nav"] .fulfillment-method:focus,
.topbar-user [data-role="secondary-nav"] .user-button,
[data-role="secondary-nav"] a.search:hover,
[data-role="secondary-nav"] a.search:focus,
.topbar-search [data-role="secondary-nav"] a.search {
    background-color: #77BC1F;
    color: #fff;
}

@media all and (max-width: 767px) {
    [data-role="search"] li a.search {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 1.25em;
    }
}

:is([data-role="user-nav"], [data-role="user-nav"]) :is([data-role="user-options"], [data-role="user-options"]) .cust-name {
    font-weight: 600;
}

:is([data-role="user-nav"], [data-role="user-nav"]) :is([data-role="user-options"], [data-role="user-options"]) .user-role {
    padding-left: 0.5em;
    font-style: italic;
}

[data-role="user-nav"] {
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 40px;
}

@media all and (max-width: 767px) {
    li[data-role="sign-in"] .btn.sign-in {
        padding: 0 1em;
    }
}

:is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="user-options"], [data-role="user-options"]) {
    width: auto;
    border-right: 1px solid #ddd;
}

    :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="user-options"], [data-role="user-options"]) a {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 1.25em;
    }

@media all and (min-width: 768px) {
    :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="user-options"], [data-role="user-options"]) {
        width: auto;
    }

        :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="user-options"], [data-role="user-options"]) a.user-button {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 260px;
        }
}

:is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="isettings-btn"], [data-role="isettings-btn"]) button {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

@media all and (min-width: 768px) {
    :is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="isettings-btn"], [data-role="isettings-btn"]) {
        display: none;
    }
}

[data-role="customer-info"] {
    height: 45px;
    position: static !important;
    width: 100%;
}

nav ul li[data-role="customer-info"] ul {
    margin-left: 0;
    white-space: nowrap;
    position: static !important;
    padding-right: 150px;
}

[data-role="customer-info"] li {
    display: inline-block;
    font-size: 0.75em;
    white-space: nowrap;
    padding: 0;
    float: none !important;
    overflow: hidden;
}

:is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="sign-out"], [data-role="sign-out"]),
:is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="change"], [data-role="change"]) {
    float: left !important;
    font-size: 1em;
    width: 47px;
}

[data-role="customer-info"] li.welcome {
    font-weight: 700;
    text-align: right;
}

[data-role="customer-info"] li.customer,
[data-role="customer-info"] li.shipto {
    display: none;
}

li[data-role="sign-out"] {
    padding: 0 !important;
    width: 100%;
    display: none;
}

    li[data-role="sign-out"] a.user-change {
        padding: 0;
    }

li[data-role="sign-out"] {
    text-align: right;
    width: auto !important;
    border-right: 1px solid #ddd;
}

[data-role="user-msgs"] {
    float: left;
    text-align: right;
    width: auto !important;
    border-right: 1px solid #ddd;
}

@media all and (max-width: 767px) {
    :is([data-role="secondary-nav"], [data-role="secondary-nav"]) :is([data-role="sign-out"], [data-role="sign-out"]),
    [data-role="user-msgs"] {
        display: none !important;
    }
}

[data-role="secondary-nav"] ul {
    list-style-type: none;
    margin: 0;
    display: inline-block;
    position: relative;
}

    [data-role="secondary-nav"] ul li {
        list-style: none;
        display: inline-block;
        vertical-align: top;
    }

@media all and (min-width: 768px) {
    [data-role="user-nav"] {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }
}

ul[data-role="search"],
ul[data-role="cart"] {
    max-width: 200px;
    width: auto !important;
}

ul[data-role="search"] {
    border-left: 1px solid #ddd;
}

ul[data-role="cart"] {
    background: url("../Images/isc/nav-vertical-border.png") repeat-y scroll right top rgba(0, 0, 0, 0);
}

@media all and (min-width: 768px) {
    ul[data-role="search"] {
        width: auto !important;
        border: 0;
    }
}

[data-role="left-nav"] {
    width: 350px;
    padding: 1em;
}

    [data-role="left-nav"] h4 {
        color: #fff;
    }

    [data-role="left-nav"] .side-nav li a {
        color: #fff;
    }

[data-role="primary-nav"] ul#lnList {
    max-width: 350px;
}

[data-role="primary-nav"] li.ln-button,
[data-role="primary-nav"] li.qo-button,
[data-role="primary-nav"] li.ma-button {
    background: url(../Images/isc/nav-vertical-border.png) repeat-y top right;
}

[data-role="primary-nav"] ul#lnList {
    background: url(../Images/isc/nav-vertical-border.png) repeat-y top left;
}

.topbar-user [data-role="user-options"] a.ex {
    display: block !important;
    height: 40px;
    line-height: 40px;
}

.topbar-isettings [data-role="isettings-btn"] .ex {
    display: block !important;
}

[data-role="cross-sells"] ul {
    list-style: none;
    margin: 0;
}

[data-role="cross-sells"] .item-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 80%;
}

    [data-role="cross-sells"] .item-wrap .thumb-wrap,
    [data-role="cross-sells"] .item-wrap .item-name,
    [data-role="cross-sells"] .item-wrap .item-num,
    [data-role="cross-sells"] .item-wrap > div.price,
    [data-role="cross-sells"] .item-wrap .quantity-pricing {
        margin-bottom: 0.5em;
        line-height: 1.25em;
    }

    [data-role="cross-sells"] .item-wrap > div.price {
        font-size: 0.875rem;
    }

        [data-role="cross-sells"] .item-wrap > div.price span {
            margin-right: 0.5em;
        }

    [data-role="cross-sells"] .item-wrap .item-num {
        font-size: 0.875rem;
        margin-bottom: 1em;
    }

    [data-role="cross-sells"] .item-wrap .thumb-wrap {
        margin-bottom: 1em;
    }

    [data-role="cross-sells"] .item-wrap .p-opt {
        position: relative;
        z-index: 2;
    }

[data-role="cross-sells"] .carousel-wrapper {
    position: relative;
}

[data-role="cross-sells"] .cs-carousel {
    position: relative;
    overflow: hidden;
    margin: 0 30px;
}

    [data-role="cross-sells"] .cs-carousel ul {
        width: 20000em;
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    [data-role="cross-sells"] .cs-carousel > li {
        border: 1px solid #f6f6f6;
        position: relative;
        float: left;
        text-align: center;
        padding: 0.8em;
    }

[data-role="cross-sells"] .product-info .um .pack-container {
    display: initial;
}

    [data-role="cross-sells"] .product-info .um .pack-container .pack {
        width: 100%;
        margin-left: 0;
    }

[data-role="cross-sells"] .cs-carousel [class*=column] + [class*=column]:last-child {
    float: left;
}

[data-role="cross-sells"] .cs-carousel > li:hover {
    cursor: pointer;
    border-color: #b8b8b8;
}

[data-role="cross-sells"] .cs-carousel > li img {
    display: inline-block;
    max-width: 100%;
    height: auto !important;
    width: 160px;
}

[data-role="cross-sells"] .carousel-control-box-prev,
[data-role="cross-sells"] .carousel-control-box-next {
    position: absolute;
}

[data-role="cross-sells"] .carousel-control-prev,
[data-role="cross-sells"] .carousel-control-next {
    position: absolute;
    top: 0;
    width: 8%;
    height: 100%;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    font-size: 1.5em;
    z-index: 200;
    background: #fff;
}

[data-role="cross-sells"] .carousel-control-prev,
[data-role="cross-sells"] .carousel-control-next {
    width: 30px;
    background: none;
}

    [data-role="cross-sells"] .carousel-control-prev span,
    [data-role="cross-sells"] .carousel-control-next span {
        position: absolute;
        height: 1em;
        width: 100%;
        top: 50%;
        margin-top: -0.5em;
        left: 0;
        font-family: "good-oatmeal-v2";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

        [data-role="cross-sells"] .carousel-control-prev span:before {
            content: "\e011";
        }

        [data-role="cross-sells"] .carousel-control-next span:before {
            content: "\e012";
        }

[data-role="cross-sells"] .carousel-control-prev {
    left: 0;
}

[data-role="cross-sells"] .carousel-control-next {
    right: 0;
}

    [data-role="cross-sells"] .carousel-control-prev:hover,
    [data-role="cross-sells"] .carousel-control-next:hover {
        text-decoration: none;
        background: #f6f6f6;
    }

[data-role="cross-sells"] .action > .btn {
    float: right;
    clear: right;
    width: 100%;
}

[data-role="cross-sells"] .f-dropdown.content {
    padding: 10px;
}

[data-role="cross-sells"] .quote-required > span {
    font-size: 0.87em;
}

[data-role="cross-sells"] .quote-required .f-dropdown.content {
    min-width: 190px !important;
    margin-left: -118px;
}

.widget-mobileAppProductCarousel [data-role="cross-sells"] .item-wrap .thumb-wrap {
    margin-bottom: 0.875em;
}

    .widget-mobileAppProductCarousel [data-role="cross-sells"] .item-wrap .thumb-wrap .item-thumb img {
        max-width: 120px;
        max-height: 120px;
    }

.widget-mobileAppProductCarousel [data-role="cross-sells"] .item-wrap .item-num {
    margin-bottom: 0.4em;
    font-size: 0.75rem;
}

[data-role="cross-sells"] ul.p-list {
    margin: 0;
}

@media all and (max-width: 480px) {
    header:is([data-role="masthead"], [data-role="masthead"]) h1:is([data-role="logo"], [data-role="logo"]) {
        font-weight: normal;
        font-size: 1.25em;
        padding: 0.4em 0;
    }

    :is([data-role="customer-info"], [data-role="customer-info"]) :is([data-role="sign-out"], [data-role="sign-out"]) i {
        font-size: 135%;
        position: static;
        display: block;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    :is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="sign-out"], [data-role="sign-out"]),
    :is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="sign-out"], [data-role="sign-out"]) a.user-change {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        :is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="sign-out"], [data-role="sign-out"]) span {
            display: none !important;
        }

    .row nav[data-role="secondary-nav"] {
        width: 129px;
    }
}

@media all and (min-width: 480px) {
    [data-role="primary-nav"] ul li a .icon-nav {
        left: 20px;
        margin-left: 0;
    }

    :is([data-role="customer-info"], [data-role="customer-info"]) :is([data-role="sign-out"], [data-role="sign-out"]) {
        width: 115px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .row nav[data-role="secondary-nav"] {
        width: 230px;
    }

    :is([data-role="customer-info"], [data-role="customer-info"]) li:is([data-role="sign-out"], [data-role="sign-out"]) {
        width: 115px;
    }

    li[data-role="sign-out"] a.user-dd:before {
        border-width: 0.5em;
        margin-top: -0.25em;
        right: 1em;
    }
}

@media all and (max-width: 767px) {
    nav[data-role="primary-nav"] ul:not(.side-nav) li a {
        display: block;
        height: 50px;
        line-height: 50px;
        min-width: 50px;
        padding: 0 1.25em;
    }

    [data-role="customer-info"] .welcome,
    [data-role="customer-info"] .customer,
    [data-role="customer-info"] .shipto {
        display: none;
    }
}

@media all and (min-width: 768px) {
    :is([data-role="customer-info"], [data-role="customer-info"]) :is([data-role="sign-out"], [data-role="sign-out"]) i {
        position: absolute;
        left: 16px;
        display: block;
        width: 16px;
        height: 0;
        font-size: 100%;
    }

    .row nav[data-role="secondary-nav"] {
        width: 50%;
    }
}

li[data-role="sign-out"] a.user-change {
    display: none;
}

li[data-role="sign-out"] a.login-link {
    display: block;
}

li[data-role="sign-out"] {
    width: auto;
    display: block;
}

[data-role="customer-info"] li.customer,
[data-role="customer-info"] li.shipto,
[data-role="customer-info"] li.welcome {
    display: inline-block;
}

[data-role="customer-info"] li.customer {
    width: 20%;
    min-width: 150px;
}

[data-role="customer-info"] li.shipto {
    width: 60%;
    text-overflow: ellipsis;
}

[data-role="customer-info"] li.welcome {
    min-width: 115px;
    padding-right: 20px;
    position: absolute;
    right: 115px;
}

[data-role="cross-sells"] .pl-item {
    width: 25%;
    font-size: 0.9em;
}

[data-role="cross-sells"] .item-thumb {
    display: block;
    width: 100%;
    text-align: center;
    max-width: 160px;
    max-height: 160px;
    margin: 0 auto;
}

    [data-role="cross-sells"] .item-thumb img {
        max-width: 160px;
        max-height: 160px;
    }

[data-role="cross-sells"] .product-brand {
    text-align: center;
}

[data-role="cross-sells"] .pl-grid .small-9 {
    width: 100%;
}

[data-role="cross-sells"] .pl-info {
    width: 100%;
}

[data-role="cross-sells"] .item-opt {
    width: 100%;
}

[data-role="cross-sells"] ul.attribute-list {
    width: 100%;
}

[data-role="cross-sells"] .compare-link {
    display: none;
}

@media all and (max-width: 960px) {
    [data-role="customer-info"] li.shipto,
    [data-role="customer-info"] li.customer {
        display: none !important;
    }
}

@media all and (min-width: 888px) {
    [data-role="customer-info"] li.welcome,
    [data-role="user-nav"] {
        background: #EEF0F0;
    }
}

@media all and (min-width: 900px) {
    .row nav[data-role="secondary-nav"] {
        width: 68%;
    }
}

[data-role="main"] .main-row {
    background: #fff;
}

[data-role="primary-nav"] {
    background: DodgerBlue;
}

@media all and (min-width: 1040px) {
    [data-role="primary-nav"] > .row {
        max-width: 1040px;
        padding: 0;
    }
}

[data-role="primary-nav"] li {
    background: none;
    height: 50px;
    line-height: 50px;
}

[data-role="primary-nav"] ul li.cart-button a.cart-link {
    background: url("../Images/isc/nav-vertical-border.png") repeat-y scroll left top rgba(0, 0, 0, 0);
}

[data-role="primary-nav"] li {
    background: none;
}

[data-role="left-nav"] {
    padding: 0;
    background: url(../Images/isc/nav-horz-border.png) repeat-x 0 0;
    background-color: #f1f1f1;
    -webkit-box-shadow: inset 0 0 10px 0 #dedede;
    box-shadow: inset 0 0 10px 0 #dedede;
}

[data-role="masthead"] > .row {
    padding-bottom: 4px;
}

[data-role="secondary-nav"] .foundicon-remove:before {
    color: #77bc1f;
    content: "\e606";
    font-size: 1.2rem;
}

[data-role="secondary-nav"] .foundicon-remove:before {
    color: #fff;
}

[data-role="primary-nav"] ul:not(.side-nav) li a {
    font-weight: 600;
}

[data-role="primary-nav"] ul:not(.side-nav) li:hover {
    background-color: #f1f1f1;
    -webkit-box-shadow: inset 0 0 10px 0 #dedede;
    box-shadow: inset 0 0 10px 0 #dedede;
}

    [data-role="primary-nav"] ul:not(.side-nav) li:hover a span,
    [data-role="primary-nav"] ul:not(.side-nav) li:focus a span,
    [data-role="primary-nav"] ul:not(.side-nav) li:hover a i,
    [data-role="primary-nav"] ul:not(.side-nav) li:focus a i {
        color: DodgerBlue !important;
    }

[data-role="main"] a.btn.btn-add-to-cart:before {
    font-family: "good-oatmeal-v2";
    content: "\e00a";
    font-size: 1.2rem;
    padding-right: 0.5em;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline;
    width: auto;
    height: auto;
    line-height: inherit;
    vertical-align: bottom;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
}

[data-role="primary-nav"] ul li.cart-button a.cart-link span {
    font-size: 1.32em;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
}

[data-role="left-nav"] .top-bar-section ul li {
    background: url(../Images/isc/nav-horz-border.png) repeat-x bottom left;
    line-height: 22px;
}

    [data-role="left-nav"] .top-bar-section ul li.js-generated h5 {
        margin: 0;
    }

[data-role="left-nav"] .top-bar-section li a,
[data-role="left-nav"] .top-bar-section li.panel-head span,
[data-role="left-nav"] .top-bar-section .qo-wrap h3 {
    padding: 0.5em 1.5em 0.5em 1em;
    font-size: 1.15em;
    line-height: 1.5em;
    min-height: 0;
    height: auto;
    font-weight: 400;
    position: relative;
    text-decoration: none;
    color: inherit;
}

[data-role="left-nav"] .nav-panel nav .top-bar-section li a {
    font-weight: 600;
    color: DodgerBlue;
}

[data-role="left-nav"] .top-bar-section ul li.panel-head span,
[data-role="left-nav"] .top-bar-section .qo-wrap h3 {
    font-weight: 600;
    display: block;
}

[data-role="left-nav"] .top-bar-section .qo-wrap h3 {
    padding: 0;
    margin: 0 0 1em 0;
}

[data-role="primary-nav-top"] .pnav-top-list {
    font-size: 0.9em;
}

    [data-role="primary-nav-top"] .pnav-top-list li a {
        margin-bottom: 0.5em;
    }

    [data-role="primary-nav-top"] .pnav-top-list > li > a {
        padding: 0 0 0.25em 0;
        display: inline-block;
        width: 100%;
        background: url(../Images/isc/nav-horz-border.png) repeat-x bottom left;
        font-weight: 600;
    }

    [data-role="primary-nav-top"] .pnav-top-list > li > ul {
        margin-bottom: 1em;
    }

[data-role="primary-nav-top"] ul ul > li > ul > li > a {
    color: #fff !important;
}

@media all and (max-width: 480px) {
    [data-role="primary-nav"] ul#lnList {
        max-width: 240px;
        width: auto;
    }
}

@media all and (min-width: 768px) {
    [data-role="secondary-nav"] > .row {
        width: 100%;
        margin: 0 auto;
        max-width: 1040px;
        display: block;
        height: 100%;
        height: 40px;
    }
}

[data-role="customer-info"] li.welcome,
[data-role="user-nav"] {
    background: none;
}

[data-role="user-info"] div {
    color: #afd2e3;
    font-size: 14px;
    font-weight: normal !important;
}

[data-role="secondary-nav"] .customer-link,
[data-role="secondary-nav"] .shipto-link {
    color: #fff;
    font-size: 16px;
    max-width: 100%;
    position: relative;
    padding-right: 25px;
}

[data-role="secondary-nav"] ul li .customer-link i:before,
[data-role="secondary-nav"] ul li .shipto-link i:before {
    font-family: "good-oatmeal-v2";
}

[data-role="customer-info"] li.welcome {
    color: #fff;
}

[data-role="left-nav"] .top-bar-section {
    margin-top: 15px;
}

@media all and (max-width: 480px) {
    #header [data-role="primary-nav"] ul.small-5 {
        width: 35%;
    }

    [data-role="masthead"] .row {
        padding-bottom: 0;
        background: none;
    }

    [data-role="primary-nav"] ul li.cart-button {
        border-left: 0;
    }

    header:is([data-role="masthead"], [data-role="masthead"]) :is([data-role="logo"], [data-role="logo"]) {
        margin-bottom: 0;
    }
}

@media all and (max-width: 767px) {
    [data-role="primary-nav"] ul li.cart-button a.cart-link {
        border-left: 0;
        padding-left: 1.25em;
    }

        [data-role="primary-nav"] ul li.cart-button a.cart-link span {
            padding-left: 45px;
            text-indent: 0;
        }

    .row nav[data-role="secondary-nav"] {
        width: 120px;
        margin-top: 0.5em;
    }
}

@media all and (min-width: 480px) {
    [data-role="primary-nav"] ul:not(.side-nav) li a {
        min-width: 55px !important;
    }
}

@media all and (min-width: 768px) {
    [data-role="primary-nav"] .small-5 {
        width: 43%;
    }

    [data-role="primary-nav"] [class*=-button] > a {
        font-weight: 600;
        font-size: 1.15em;
        padding: 0 1.25em;
    }

    [data-role="primary-nav"] .ma-button a span {
        padding-left: 1.5em;
    }

    [data-role="primary-nav"] .qo-button a span {
        padding-left: 1.5em;
    }

    [data-role="primary-nav"] .da-button a span {
        padding-left: 28px;
        padding-right: 2px;
    }

    [data-role="primary-nav"] ul:not(.side-nav) li.ln-button i {
        left: 1.25em;
    }

    [data-role="primary-nav"] ul:not(.side-nav) li.qo-button i {
        left: 1.25em;
    }

    [data-role="primary-nav"] ul:not(.side-nav) li i {
        left: 1.25em;
    }

    #header [data-role="search"] a.search {
        min-height: 0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 1.25em !important;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

        #header [data-role="search"] a.search:hover,
        #header [data-role="search"] a.search:focus,
        .topbar-search #header [data-role="search"] a.search {
            background-color: DodgerBlue;
            color: #fff;
        }

    #header [data-role="search"] .foundicon-search:before {
        font-size: 16px;
        opacity: 1;
        text-shadow: none;
        left: auto;
    }

    #header [data-role="search"] a span {
        font-weight: 600;
    }

    #header [data-role="search"]:hover a span,
    .topbar-search #header [data-role="search"] a span,
    #header [data-role="search"]:hover .foundicon-search:before {
        color: #fff;
    }

    [data-role="secondary-nav"].header-b2c {
        display: none;
    }

    .topbar-user header.header-b2c li[data-role="user-options"] a.user-button {
        background-color: #77BC1F;
        padding-left: 30px;
    }

        .topbar-user header.header-b2c li[data-role="user-options"] a.user-button span {
            color: #fff;
        }

    .topbar-user header.header-b2c li[data-role="user-options"] .foundicon-remove:before {
        color: #fff;
        padding-left: 10px;
    }

    header.header-b2c [data-role="user-nav"] {
        border: none;
        margin-top: 15px;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    header.header-b2c li[data-role="user-options"] a {
        max-width: 200px !important;
    }

    header.header-b2c li[data-role="fulfillment-method"] a.btn {
        max-width: 90px;
        padding: 0;
    }

    header.header-b2c li[data-role="account-menu"] .sn-account > ul > li > a {
        padding: 0 !important;
    }
}

@media all and (min-width: 768px) {
    header.header-b2c li[data-role="user-options"] {
        position: relative;
        border-right: none;
    }

        header.header-b2c li[data-role="user-options"] a .cust-name {
            font-weight: normal;
        }

        header.header-b2c li[data-role="user-options"] .ex i {
            top: 4px !important;
            left: -5px !important;
        }

    header.header-b2c .head-row .header-zone.rt ul[data-role="user-nav"] {
        position: relative;
    }

    header.header-b2c .head-row .header-zone.rt ul:is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="search-input"], [data-role="search-input"]) {
        position: relative;
        min-width: 110px;
    }

    header.header-b2c .head-row .header-zone.rt ul[data-role="user-nav"] .foundicon-torso:before,
    header.header-b2c .head-row .header-zone.rt ul[data-role="user-nav"] .foundicon-cart:before {
        font-size: 24px !important;
    }

    .header-b2c [data-role="user-nav"] ul li {
        border: none;
    }

    .header-b2c [data-role="user-nav"] {
        float: right;
    }

    [data-role="primary-nav"] ul#lnList {
        max-width: 100%;
    }

    .header-b2c [data-role="cart"] {
        float: right;
    }
}

@media print {
    [data-role="main"] .main-row {
        width: 100%;
        max-width: 100%;
    }
}