/* Minification failed. Returning unminified contents.
(17,89): run-time error CSS1062: Expected semicolon or closing curly-brace, found ','
(46,89): run-time error CSS1062: Expected semicolon or closing curly-brace, found ','
(282,89): run-time error CSS1062: Expected semicolon or closing curly-brace, found ','
(414,89): run-time error CSS1062: Expected semicolon or closing curly-brace, found ','
 */
/****************************************
        Default + "Modern design" pack styles
****************************************/

/****************************************
                Font
****************************************/

/*              START general styles                */

/*  normal text:
    font family                                 "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font size                                   [NormalText_FontSize]
    font color                                  [NormalText_FontColor]
*/
body {
    font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;, sans-serif;
    font-size: 13px;
    color: #808080;
}

::-moz-selection {
    color: #808080;
    background-color: #8eb4b4;
}

::selection {
    color: #808080;
    background-color: #8eb4b4;
}

/*  heading text:
    font family                                 "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font color                                  [HeadingText_FontColor]
    font size h1                                26px
    font size h2                                20px
    font size h3                                18px
    font size h4                                12px
*/
h1,
h2,
h3,
h4,
.font-h2,
.font-h4 {
    font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;, sans-serif;
    color: #333;
    font-weight: 600;
}

h1 {
    font-size: 26px;
}

h2,
.font-h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4,
.font-h4 {
    font-size: 12px;
}

.h1-holder small {
    font-size: calc(26px/2);
}

/*  smaller font labels:                        [NormalText_SmallerFontSize]
    basket, checkout, wishlist product id;
    basket unit of measure;
    form row: validation, feedback messages;
    top header text and links;
    subtotal in checkout summary;
    discount cell, extended text in basket grid;
    review date;
    news-date;
    dialog close button;
    breadcrumbs, back button on top of content;
    list price;
    added product variant title in basket miniature;
    autocomplete suggested product category  */
.font-smaller {
    font-size: 12px;
}

.form-row .field-validation-error,
.form-row .feedback-message,
.ui-dialog-titlebar-close,
.hyp-back {
    font-size: 12px;
}

/*  bigger font labels:                         [NormalText_BiggerFontSize]
    titles on account page;
    news title;
    template name on saved template popup;
    information/action block inside a grid;
    product title in list/grid;
*/
.font-bigger {
    font-size: 14px;
}

.product-tile .product-title {
    font-size: 14px;
}

/*  regular titles:                             [RegularTitle_FontColor]
    saved templete name;
    weight value on checkout page;
    review title on product details;
    news title;
    selected quantity on product list / grid page;
    customer name in represent grid;
    searched on value;
    basket summary values;
    matrix total values;

    product, variant titles:
    product in tile, grid;
    simple product tile;

    autocomplete entered word part

    form row message
*/
.font-title {
    color: #333;
}

.product-title,
.variant-title {
    color: #333;
}

.highlight {
    color: #333;
}

.form-row .feedback-message {
    color: #333;
}

/*  darkest name:                               [DarkestText_FontColor]
    - bold:
        quick order product title;
        checkout summary step title;
        information/action block inside a grid;
        login control names;
        order approval message

    - regular:
        profile customer name, email;
        selected facet item;
        order declined reason message
*/
.font-darkest {
    color: #333333;
}

.facet-selected .facet-title {
    color: #333333;
}

.hyp-account.current {
    color: #333333;
}

/*  light grey labels:                          [LightestText_FontColor]
    basket paging total;
    checkout payment methods label;
    checkout inactive step title;
    details uom, tax lebels;
    details, matrix product id;
    autocomplete suggested product category
*/
.font-lighter {
    color: #b2b2b2;
}

/*  light grey labels 2:                        #8eb4b4
    product id, attributes;
    autocomplete items;
    empty shopping cart control header
*/
.product-tile .product-id,
.product-tile .product-attributes {
    color: #8eb4b4;
}

.ui-autocomplete a {
    color: #8eb4b4;
}

/*  hyperlinks;                                 #006bbb
    back, cancel, filter button
    button like link
    button white

    hover back, cancel, filter button           #006bbb
    disabled hypelink button                    [Hyperlink_Disabled_FontColor]
*/
a,
.font-a,
.font-btn,
.btn-like-link,
.btn.btn-white {
    color: #006bbb;
}

    .font-btn:hover,
    .font-btn:focus,
    .btn.btn-white:hover,
    .btn.btn-white:focus {
        color: #006bbb;
    }

    .font-btn:active,
    .btn.btn-white:active {
        color: #006bbb;
    }

.hyp-btn.btn-disabled {
    color: #b2b2b2;
}

.uploader-file + label:hover strong,
.uploader-file:focus + label strong {
    color: #006bbb;
}

a:focus,
button:focus,
[type="submit"]:focus,
[type="button"]:focus{
    outline: 1px dotted #808080;
}
/*              END general styles                */


/*              START specific control styles                */

/*  cookiebar background color                  [Cookiebar_BackgroundColor]
    cookiebar font color                        [Cookiebar_CookiesPolicy_FontColor]
    cookiebar font size                         [Cookiebar_CookiesPolicy_FontSize]
    header top text, links:                     [Header_FontColor]
    top links;
    login, language control text, links;
*/
.sana-cookiebar {
    background-color: #f7f7f7;
}

.sana-cookiebar-description {
    color: #808080;
    font-size: 13px;
}

.top-hyp,
.login,
.language,
.login .hyp,
.language .hyp {
    color: #333;
}

/*  main navigation:
    top level links font family                 "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    top level links font size                   16px
    top level links font color                  #ffffff
    not hovered top level links color           #ffffff
    hovered top level link color                #006bbb

    simple links                                [Menu_SubLevels_FontColor]
*/
nav .hyp-top-lvl {
    font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;, sans-serif;
    color: #ffffff;
    font-size: 16px;
}

.nav-is-hovered .hyp-top-lvl {
    color: #ffffff;
}

.nav-item-root.hover .hyp-top-lvl {
    color: #006bbb;
}

nav .hyp {
    color: #333;
}

/*  main navigation (sticky):
    top level links font color                  [Menu_TopLevel_Sticky_FontColor]
    not hovered top level links color           [Menu_TopLevel_Sticky_FadeOut_FontColor]
    hovered top level link color                [Menu_TopLevel_Sticky_Hovered_FontColor]
*/
header.sticky-mode nav .hyp-top-lvl {
    color: #333333;
}

header.sticky-mode .nav-is-hovered .hyp-top-lvl {
    color: #808080;
}

header.sticky-mode .nav-item-root.hover .hyp-top-lvl {
    color: #333333;
}

@media (max-width: 639px) {
    nav .hyp-top-lvl,
    .nav-is-hovered .hyp-top-lvl {
        color: #333333;
    }
}

/*  footer:
    sitemap links                               #006bbb
    copyright and bottom links                  #006bbb

    hover bottom links                          #00528f
*/
.sitemap .hyp {
    color: #006bbb;
}

footer .bottom,
footer .footer-address,
footer .newsletter,
#footer .bottom,
#footer .footer-address,
#footer .newsletter,
.footer-nav .hyp {
    color: #006bbb;
}

    .footer-nav .hyp:hover {
        color: #00528f;
    }

/*  buttons (+ back, cancel, filter button):
    - normal
        font family                             'Roboto Condensed', sans-serif
        font color                              [Buttons_FontColor]
        disabled font color                     [Buttons_Disabled_FontColor]
        font size                               1.2em

    - medium
        font size                               [Buttons_Medium_FontSize]

    - big
        font size                               [Buttons_Big_FontSize]

    - back
        color                                   [Buttons_Back_FontColor]
        hover color                             [Buttons_Back_Hover_FontColor]

    - close dialog
        color                                   [NormalText_FontColor]
*/
.btn {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #fff;
    font-size: 1.2em;
}

.font-btn {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    font-size: 1.2em;
}

.btn-medium {
    font-size: 20px;
}

.btn-big,
.font-btn-big {
    font-size: 22px;
}

.hyp-back {
    color: #333333;
}

    .hyp-back:hover {
        color: #808080;
    }

.btn.ui-state-disabled,
.btn-disabled,
.btn[disabled] {
    color: #999;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: #808080;
}

/*  form elements:
    input, select text                          [Inputs_FontColor]
    (+ label unit of measure)

    input placeholder                           [Inputs_Placeholder_FontColor]
    *dont group placeholder selectors: Browsers BUG!
*/
input,
textarea {
    font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;, sans-serif;
    color: #333;
}

.filter-title,
.ui-selectmenu-button,
.ui-selectmenu-menu,
.ddlb select {
    color: #333;
}

.lbl-uom {
    color: #333;
}

::-webkit-input-placeholder {
    color: #b2b2b2;
}

::-moz-placeholder {
    color: #b2b2b2;
}

:-ms-input-placeholder {
    color: #b2b2b2;
}

.selectmenu-placeholder {
    color: #b2b2b2;
}

/*  messages block
    font size simple text                         [Messages_FontSize]
    
    color:
    simple text                                   [Messages_FontColor]
    error                                         [Messages_Error_FontColor]
    confirmation                                  [Messages_Confirm_FontColor]
    information                                   [Messages_Info_FontColor]
    alert                                         [Messages_Alert_FontColor]

    password strength indicator:
    weak background color                         [Messages_Error_FontColor]
    strong background color                       [Messages_Confirm_FontColor]
*/
.msg-block {
    font-size: 15px;
    color: #808080;
}

.row-error input,
.msg-block-error,
.validation-summary-errors,
.form-row .field-validation-error {
    color: #cb2245;
}

.msg-block-confirm {
    color: #13a600;
}

.msg-block-info {
    color: #518a8a;
}

.msg-text-alert,
.msg-block-alert {
    color: #f78400;
}

.password-strength-indicator:before {
    background-color: #cb2245;
}

.password-strength-indicator.password-strength-ok:before {
    background-color: #13a600;
}

/*  tables headers, labels                      [Table_Header_FontColor]
    basket, checkout, wishlist product id;
    basket unit of measure;
    cell name

    values                                      [Table_Cell_FontColor]

    sales agreement hidden info data-set title  [Table_Header_FontColor]
*/
.gvi th {
    color: #808080;
}

.gvi .font-lighter,
.gvi .cell-name {
    color: #808080;
}

.gvi td {
    color: #000;
}

.gvi-sales-agreement-lines .highlighted,
.gvi-sales-agreement-lines .highlighted + .hidden-info {
    background-color: #e3f1fc;
}

.gvi-sales-agreement-lines .msg-this-term-not-allow-exceeding-value,
.gvi-sales-agreement-lines .hidden-info-inner-wrapper .data-set-title,
.gvi-sales-agreement-lines .form-row .label {
    color: #808080;
}

.gvi-sales-agreements .sales-agreement-title {
    color: #808080;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .one-page-checkout .gvi-basket-overview-wrapper .price-node .currency-sign {
        color: #000;
    }
}

@media (min-width: 1024px) {
    .one-page-checkout .gvi-basket-overview-wrapper .price-node .currency-sign {
        color: #000;
    }
}

/*  checkout payment/shipping methods           
    Font color for 'Free' service costs:        [Checkout_Free_Service_Costs_FontColor]
*/
.gvi td .cell-price-value.free-costs {
    color: #3cb300;
}

/*  tabs
    header font family;                         'Roboto Condensed', sans-serif
    header font size;                           1.5em

    tab title inactive                          [TabHeader_Inactive_FontColor]
    tab title hover                             [TabHeader_Hover_FontColor]
    tab title active                            [TabHeader_Active_FontColor]

    big tab font size                           [TabHeader_Big_FontSize]
*/
.ui-tabs-anchor,
.hidden-tabs-name {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    font-size: 1.5em;
}

.ui-tabs-anchor {
    color: #b2b2b2;
}

.ui-state-hover .ui-tabs-anchor {
    color: #808080;
}

.ui-state-active .ui-tabs-anchor,
.hidden-tabs-name {
    color: #333;
}

.matrices .ui-tabs-anchor {
    font-size: 40px;
}

/*  left side controls links:                   
    facets items                                [SideLinks_Facets_FontColor]
    news header                                 [SideLinks_News_FontColor]
    my account                                  [SideLinks_MyAccount_FontColor]
*/
.facets .facet-item {
    color: #4c4c4c;
}

.list-news-header .hyp {
    color: #4c4c4c;
}

.hyp-account {
    color: #808080;
}

/*  prices:
    list price font size                        [ListPrice_FontSize]
    list price color                            [ListPrice_FontColor]

    discount price font size                    [ListPrice_DiscountAmount_FontSize]
    discount price font color                   [ListPrice_DiscountAmount_FontColor]

    discount percentage font size               [ListPrice_DiscountPercentage_FontSize]
    discount percentage font color              [ListPrice_DiscountPercentage_FontColor]

    product price in list/grid font size        [BulkPrice_FontSize]
    product price in list/grid color            [BulkPrice_FontColor]

    red price color                             [BulkPrice_Highlight_FontColor]

    primary product price:
    - font family                               'Roboto Condensed', sans-serif
    - font color                                [PrimaryPrice_FontColor]
    - font size                                 24px

    secondary prices (variants, prepacks, volume prices):
    - font family                               'Roboto Condensed', sans-serif
    - font color                                [SecondaryPrice_FontColor]
    - font size                                 [SecondaryPrice_FontSize]

*/
.list-price {
    font-size: 11px;
    color: #b2b2b2;
}

.list-price-discount.discount-percentage {
    font-size: 11px;
    color: #cb2245
}

.list-price-discount.discount-price {
    font-size: 11px;
    color: #cb2245
}

.product-tile .lbl-price {
    font-size: 16px;
    color: #333;
}

.product-tile .list-price + .lbl-price {
    color: #cb2245;
}

.order-box .lbl-price {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333333;
    font-size: 24px;
}

.cell .lbl-price {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333333;
    font-size: 1.4em;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .gvi-volume-prices .cell-price {
        font-family: 'Roboto Condensed', sans-serif, sans-serif;
        color: #333333;
        font-size: 1.4em;
    }
}

@media (min-width: 1024px) {
    .gvi-volume-prices .cell-price {
        font-family: 'Roboto Condensed', sans-serif, sans-serif;
        color: #333333;
        font-size: 1.4em;
    }
}

/*  main search input
    font size                                   [SearchBox_FontSize]
    placeholder color                           [SearchBox_Placeholder_FontColor]

    *dont group placeholder selectors: Browsers BUG!
*/
.tbx-main-search input {
    font-size: 14px;
}

.tbx-main-search ::-webkit-input-placeholder {
    color: #bfbfbf;
}

.tbx-main-search ::-moz-placeholder {
    color: #bfbfbf;
}

.tbx-main-search :-ms-input-placeholder {
    color: #bfbfbf;
}

.searchbox .searchbox-icon {
    background: #006bbb;
}

    .searchbox .searchbox-icon:hover {
        background: #60a0d0;
    }
/*  shopping cart control header:
    font family                                 'Roboto Condensed', sans-serif
    font size                                   [CartSummary_Header_FontSize]
    color                                       [CartSummary_Header_FontColor]

    empty cart color                            [CartSummary_Empty_FontColor]

    items in cart (mobile)                      [CartSummary_TotalItems_Mobile_FontColor]
*/
.over-summary .hyp {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    font-size: 13px;
    color: #333;
}

.over-summary.is-empty .hyp {
    color: #999;
}

@media (max-width: 639px) {
    .over-summary.over-summary-just-changed .hyp {
        color: #fff;
    }
}

/*  breadcrumbs:
    item color;                                 [Breadcrumb_FontColor]
    selected item (last)                        [Breadcrumb_LastItem_FontColor]
*/
.breadcrumbs .hyp {
    color: #808080;
}

.breadcrumbs li:last-child .hyp {
    color: #333;
}

/*  pager links:
    font color                                  [PagerLinks_FontColor]
    selected font color                         [PagerLinks_Selected_FontColor]
*/
.pager-list li a {
    color: #808080;
}

.pager-selected {
    color: #333333;
}

/*  stock and availability:
    in stock                                    [StockAmount_InStock_FontColor]
    low stock                                   [StockAmount_LowStock_FontColor]
    out of stock and not available              [StockAmount_OutOfStock_FontColor]
*/
.in-stock {
    color: #3cb300;
}

.low-stock {
    color: #f28100;
}

.out-stock {
    color: #cc0000;
}

.msg-not-available {
    color: #cc0000;
}

/*  specific font sizes:
    shopping cart total row font size           [Cart_TotalRow_FontSize]

    product title on details page               24px
    product title on mobile details page        18px

    product list page title                     28px
    product list page facets title              [ProductList_FacetsTitle_FontSize]

    emphasized popups header:
    volume discount, package content            [Popup_Title_FontSize]
*/
.gvi-totals .emphasis,
.list-totals .emphasis {
    font-size: 16px;
}

.font-product-title {
    font-size: 24px;
}

.combined-header h1 {
    font-size: 28px;
}

.combined-header .facets-title {
    font-size: 22px;
}

.popup-cnt .strong-header {
    font-size: 40px;
}

@media (max-width: 639px) {
    .font-product-title {
        font-size: 18px;
    }

    .combined-header h1 {
        font-size: calc(28px/2);
    }
}

/*  spesific font colors:
    volume price discount                       [VolumePrices_Discount_FontColor]
    shopping card line discount                 [Cart_LineDiscount_FontColor]
    shopping cart extended text font color      [Cart_ExtendedText_FontColor]

    product list page facets title              [NormalText_FontColor]
*/
.gvi-volume-prices .cell-discount {
    color: #37a600;
}

.gvi-basket-overview .cell-discount,
.gvi-basket .cell-discount {
    color: #cb2245;
}

.gvi-basket .extended-text {
    color: #f28100;
}

.combined-header .facets-title {
    color: #808080;
}

/*  name value control:
    basket and checkout lists;
    specifications on product page;
    data on order details and recent orders

    name                                          [PropertyTable_Name_FontColor]
    value                                         [PropertyTable_Value_FontColor]
*/
.font-name-value .name {
    color: #808080;
}

.font-name-value .value {
    color: #333333;
}

.list-totals .name,
.list-totals .currency,
.list-cart .name,
.list-cart .currency {
    color: #808080;
}

.list-totals .value,
.list-cart .value {
    color: #333333;
}

.responsive-table td:before {
    color: #808080;
}

/*  spesific titles:
    product title on basket, checkout pages
    - font family                               'Roboto Condensed', sans-serif
    - font size                                 [Cart_ProductTitle_FontSize]
    - font color                                [Cart_ProductTitle_FontColor]
    variants / prepacks grid header
    - font family                               'Roboto Condensed', sans-serif
    - font size                                 [VariantMatrixHeaders_FontSize]
    - font color                                [VariantMatrixHeaders_FontColor]
*/
.gvi .product-title-super {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333333;
    font-size: 20px;
}

.gvi-variants th,
.gvi-prepacks th {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333;
    font-size: 20px;
}

/*  ok status font color:                       [Status_Ok_FontColor]
    authorization approved
    account ability enabled
    document already paid

    pending status font color                   [Status_Pending_FontColor]
    authorization pending
    authorization not needed
    document payment progress

    failed status font color                    [Status_Failed_FontColor]
    authorization declined
    account ability disabled
    document overdue
*/
.gvi-orders .status-approved,
.gvi-sub-accounts .status-ok,
.gvi-orders .status-paid {
    color: #3cb300;
}

.gvi-orders .status-pending,
.gvi-orders .status-notneeded,
.gvi-orders .status-progress {
    color: #f28100;
}

.gvi-orders .status-declined,
.gvi-sub-accounts .status-faild,
.gvi-orders .status-overdue {
    color: #cc0000;
}



/****************************************
         Background and border
****************************************/

/*              START general styles                */

/*  border color - vertical separator:          [BorderColor]
    login page blocks;
    b2b basket page blocks

    top links in header;
    view / delete in basket grids;
    back button / breadcrumbs;
    add / delete buttons on saved template;
    selected variants quantity on list page;
    stock / id on list page;
    count / hyp clear on last viewed page

    product details page blocks 

    navigation vertical separator               [Menu_SubLevels_Separator_Color]
*/
.border-simple-left {
    border-left: solid 1px #e6e6e6;
}

.top-hyp + .top-hyp,
.action-links .hyp + .hyp,
.back-wrapper + .breadcrumbs,
.templates-action .hyp,
.rating-reviews .hyp + .hyp,
.selected-quantity .edit-selected,
.hyp-clear-viewed,
.product-tile .product-id + .stock-indication {
    border-left: 1px solid #e6e6e6;
}

.has-aside,
.hyp-account,
.sales-agreement-form-wrapper.business .sales-agreement-action-link:not(:last-child) {
    border-right-color: #e6e6e6;
}

.separator + .nav-item-block,
.separator + .img-in-row {
    border-left-color: #e6e6e6;
}

/*  border color - horizontal separator:        [BorderColor]
    last viewed and checkout offers tabs;
    accordion

    total lines on basket and checkout;
    accordion;
    tab bottom (mobile view)

    quick order block

    top login control;
    cart summary on checkout pages

    basket summary
    checkout summary blocks

    pickup locations table capture

    sales agreement hidden info cells
*/
.last-viewed .ui-tabs-nav,
.checkout-offers .ui-tabs-nav,
.accordion {
    border-bottom: 1px solid #e6e6e6;
}

.list-totals .emphasis,
.list-cart .subtotal,
.accordion-header {
    border-top: 1px solid #e6e6e6;
}

.choose-product,
.quicksearch-result {
    border-top: 1px dashed #e6e6e6;
    border-bottom: 1px dashed #e6e6e6;
}

.border-horizontal,
.products-group.slick-dotted,
.added-product,
.checkout-summary,
.l-service-info,
.our-methods {
    border-color: #e6e6e6;
}

.gvi-pickup-locations caption {
    border-bottom: 1px dashed #e6e6e6;
}

.gvi-sales-agreement-lines .hidden-info-inner-wrapper .cell {
    border-color: #e6e6e6;
}

/*  block border:                               [BorderColor]
    thumbnail;
*/
.carousel-image-s .thumbnail {
    border: 1px solid #e6e6e6;
}

/*  link block hover background:                [LinkBlock_Hover_BackgroundColor]
    language, login links;
    main navigation links
    autocomplete
*/
.login .hyp:hover,
.language .hyp:hover {
    background: #f7f7f7;
}

.ui-autocomplete .ui-menu-item .ui-state-active {
    background: #f7f7f7;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .nav-item-sub.hover {
        background: #f7f7f7;
    }
}

@media (min-width: 1024px) {
    .nav-item-sub.hover {
        background: #f7f7f7;
    }
}
/*              END general styles                */


/*              START specific control styles                */

/*  header background:                          [Header_BackgroundColor]
    sticky header background:                   [Header_Sticky_BackgroundColor]
    dropdowns background:                       [Header_Dropdowns_BackgroundColor]
    language;
    login;
    basket.

    sticky menu background:                     [Header_Menu_Sticky_BackgroundColor]
*/
header {
    background: #fff;
}

    header.sticky-mode,
    header.sticky-mode .bottom-header {
        background: #fff;
    }

.top-dropdown:hover .opener,
.top-dropdown.hover .opener,
.top-dropdown .summary {
    background: #fff;
}

.basket-summary,
.basket:hover .over-summary:not(.is-empty),
.basket.hover .over-summary:not(.is-empty) {
    background: #fff;
}

header.sticky-mode .nav-list-root,
header .bottom-header,
header.nav-is-opened .nav-opener {
    background: #fff;
}

header.nav-is-opened .nav-opener {
    border-bottom-color: #fff;
}

@media (max-width: 639px) {
    header {
        background: #fff;
    }

    header .search{
        background: #fff;
    }
}

/*  header border:                              [Header_BorderColor]
    general header;
    navigation;
    language;
    login;
    search;
    basket
*/
.nav-opener-wrapper,
header.sticky-mode,
.middle-header,
.bottom-header {
    border-color: #e6e6e6;
}

.nav-list-sub,
.nav-wrapper,
.nav-item-root.hover .hyp-top-lvl {
    border-color: #e6e6e6;
}

header.sticky-mode .nav-list-root {
    border: 1px solid #e6e6e6;
}

.language {
    border-right-color: #e6e6e6;
}

.top-hyp + .login {
    border-left-color: #e6e6e6;
}

header .top-dropdown:hover,
header .top-dropdown.hover,
header .top-dropdown .summary {
    border-color: #e6e6e6;
}

.basket-summary,
.basket:hover .over-summary:not(.is-empty),
.basket.hover .over-summary:not(.is-empty) {
    border-color: #e6e6e6;
}

@media (max-width: 639px) {
    .basket,
    .search {
        border-color: #e6e6e6;
    }

    .mob-account-btn,
    header .top-dropdown,
    header .top-dropdown:hover {
        border-color: #e6e6e6;
    }
}

/*  main navigation:
    full page background                        #006bbb
    sub levels background                       [Menu_SubLevels_BackgroundColor]
    active menu item bottom line color          #ffffff
*/
.nav-list-sub,
.nav-wrapper,
.nav-item-root.hover .hyp-top-lvl {
    background-color: #fff;
}

.nav-item.selected .hyp-top-lvl span:after {
    background: #ffffff;
}

@media (min-width: 1024px) {
    header .bottom-header {
        background: #006bbb;
    }
}

/*
    mobile basket changing background           #518a8a
*/
@media (max-width: 639px) {
    .over-summary.over-summary-just-changed {
        background-color: #518a8a !important;
    }
}

/*  
    site background                             [Page_BackgroundColor]
*/
.is_stuck.gvi-totals-wrapper,
body {
    background: #fff;
}

/*  over content separated area:                [Header_Alt_BackgroundColor]
    product list page

    mobile filter control header
    mobile language login control header
*/
@media (max-width: 639px) {
    .gray-header-phone {
        background-color: #f2f2f2;
    }

    .mob-account-btn.state-opened,
    .top-dropdown .opener,
    .top-dropdown:hover .opener {
        background: #f2f2f2;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .colored-header-desktop {
        background-color: #f2f2f2;
    }
}

@media (min-width: 1024px) {
    .colored-header-desktop {
        background-color: #f2f2f2;
    }
}

/*  site footer background;                     #b0acac
    site footer border                          #888888
*/
footer,
#footer {
    background: #b0acac;
    box-shadow: inset 0 1px 0 0 #888888;
}

/*  elements border color                       [Tables_BorderColor]
    grid rows

    list items horizontal border color:
    product list;
    news list;
    reviews list;
    orders list (mobile view)
*/
.gvi th,
.gvi td,
.gvi tr,
.gvi-border-color {
    border-color: #e6e6e6;
}

    .gvi-border-color:before {
        border-color: #e6e6e6;
    }

.l-products-item,
.l-products-item:before,
.l-products-item:after,
.list-news li,
.list-reviews li {
    border-color: #e6e6e6;
}

/*  grid items and controls background          [Tables_Footer_BackgroundColor]
    action controls
    odd columns in variants / prepacks grid     [VariantMatrix_Row_BackgroundColor]
    even columns in variants / prepacks grid    [VariantMatrix_AltRow_BackgroundColor]
*/
.gvi-order-lines tfoot,
.gvi-big-basket tfoot,
.block-actions {
    background: #f7f7f7;
}

.gvi-variants th:nth-child(odd),
.gvi-variants td:nth-child(odd),
.gvi-prepacks th:nth-child(odd),
.gvi-prepacks td:nth-child(odd) {
    background: #fff;
}

.gvi-variants th:nth-child(even),
.gvi-variants td:nth-child(even),
.gvi-prepacks th:nth-child(even),
.gvi-prepacks td:nth-child(even) {
    background: #f7f7f7;
}

@media (max-width: 639px) {
    .col-total {
        background: #f7f7f7;
    }
}

/*  button
    background                                  #006bbb
    border bottom                               #006bbb

    hover background                            #60a0d0
    hover border bottom                         #223434

    focused background                          #006bbb
    focused border bottom                       #006bbb

    action background                           #006bbb
    action border bottom                        #006bbb

    hover action background                     #60a0d0
    hover action border bottom                  #01528e

    focused action background                   #006bbb
    focused action border bottom                #006bbb

    disabled background                         [Buttons_Disabled_BackgroundColor]
    disabled border bottom                      [Buttons_Disabled_BottomBorderColor]

    white button border                         #006bbb
    white button hover border                   #60a0d0
*/
.btn,
.btn.btn-selected:hover,
.btn.btn-selected:focus {
    background-color: #006bbb;
    border-color: #006bbb;
}

    .btn:hover,
    .btn.hover,
    .btn:focus {
        background-color: #60a0d0;
        border-color: #223434;
    }

    .btn:active {
        background-color: #006bbb;
        border-color: #006bbb;
    }

.btn-action,
.btn-action.btn-selected:hover,
.btn-action.btn-selected:focus {
    background-color: #006bbb;
    border-color: #006bbb;
}

    .btn-action:hover,
    .btn-action:focus {
        background-color: #60a0d0;
        border-color: #01528e;
    }

    .btn-action:active {
        background-color: #006bbb;
        border-color: #006bbb;
    }

.sticky-rails .btn .icon-shadow-layer {
    fill: #006bbb;
}

.sticky-rails .btn:hover .icon-shadow-layer,
.sticky-rails .btn:focus .icon-shadow-layer {
    fill: #01528e;
}

.btn.ui-state-disabled,
.btn-disabled,
.btn[disabled],
.btn.ui-state-disabled:hover,
.btn-disabled:hover,
.btn[disabled]:hover,
.btn.ui-state-disabled:focus,
.btn-disabled:focus,
.btn[disabled]:focus {
    background-color: #d9d9d9 !important;
    border-color: #979797 !important;
}

.btn-white {
    background-color: #fff;
    border-color: #006bbb;
}

    .btn-white:hover,
    .btn-white.hover,
    .btn-white:focus {
        background: #fff;
        border-color: #60a0d0;
    }

    .btn-white:active {
        background: #fff;
        border-color: #006bbb;
    }

.btn-scroll-top[aria-pressed="false"] {
    background-color: #006bbb;
    border-color: #006bbb;
}

    .btn-scroll-top[aria-pressed="false"].hover,
    .btn-scroll-top[aria-pressed="true"] {
        background-color: #60a0d0;
        border-color: #223434;
    }

.btn-scroll-top .arrow-layer-1 {
    fill: #fff;
}

.btn-scroll-top .arrow-layer-2 {
    fill: #006bbb;
}

.btn-scroll-top.hover .arrow-layer-2 {
    fill: #223434;
}
.btn-scroll-top .icon-shadow-layer{
    fill: #006bbb;
}

.btn-scroll-top.hover .icon-shadow-layer{
    fill: #223434;
}
/*  input, textarea, select
    background                                  [Inputs_BackgroundColor]
    border bottom                               [Inputs_BottomBorderColor]

    focused background                          [Inputs_Focus_BackgroundColor]
    focused border bottom                       [Inputs_Focus_BottomBorderColor]

    select/datepicker hover background color    [Inputs_SelectHover_BackgroundColor]

    datepicker today background                 [DatePicker_Today_BackgroundColor]
*/
.tbx,
.tar,
.uploader {
    background: #f2f2f2;
    border-color: #c2c2c2;
}

    .tbx.focused,
    .tar.focused {
        background: #fff;
        border-bottom-color: #518a8a;
    }

    .uploader.is-dragover {
        border-color: #518a8a;
    }

.filter-title,
.ui-selectmenu-button,
.ui-menu,
.ddlb select {
    background: #f2f2f2;
    border-color: #c2c2c2;
}

    .filter-title.expanded {
        border-color: #f2f2f2;
    }

    .ui-selectmenu-button:focus {
        background: #fff;
        border-bottom-color: #518a8a;
    }

    .ui-selectmenu-button[aria-expanded="true"] {
        border-color: #f2f2f2;
    }

.ui-menu-item .ui-state-active,
.uploader.is-dragover {
    background-color: #fafafa;
}

.ui-datepicker {
    background-color: #fafafa;
    border-bottom: 1px solid #c2c2c2;
}

    .ui-datepicker .ui-datepicker-today {
        background-color: #e9e9e9;
    }

    .ui-datepicker .ui-datepicker-current-day {
        background-color: #518a8a;
    }

        .ui-datepicker .ui-datepicker-current-day a {
            color: #ffffff;
        }

/*  checkboxes
    background                                  [Radio_BackgroundColor]
    border                                      [Radio_BorderColor]

    hover border                                [Radio_Hover_BorderColor]

    checked background                          [Radio_Checked_BackgroundColor]
*/

label .chb ins {
    background-color: #fff;
}

    label .chb ins:after {
        -webkit-box-shadow: 2px 2px 0px 0px #1f7bc9;
        box-shadow: 2px 2px 0px 0px #1f7bc9;
    }

label .chb ins,
label .chb input[type="checkbox"]:checked + ins {
    border-color: #ccc;
}

label:hover .chb ins,
label:hover .chb input[type="checkbox"]:checked + ins {
    border-color: #a6a6a6;
}

label:not(.disabled-ghost) .chb input[type="checkbox"]:disabled + ins,
label:not(.disabled-ghost):hover .chb input[type="checkbox"]:disabled + ins {
    border-color: #ccc;
}

label:not(.disabled-ghost) .chb input[type="checkbox"]:disabled + ins,
label:not(.disabled-ghost):hover .chb input[type="checkbox"]:disabled + ins {
    background: #eee;
}

label:not(.disabled-ghost) .chb input[type="checkbox"]:disabled:checked + ins:after,
label:not(.disabled-ghost):hover .chb input[type="checkbox"]:disabled:checked + ins:after {
    -webkit-box-shadow: 2px 2px 0px 0px #a6a6a6;
    box-shadow: 2px 2px 0px 0px #a6a6a6;
    background: transparent;
}

/*  radiobuttons
    background                                  [Radio_BackgroundColor]
    border                                      [Radio_BorderColor]

    hover border                                [Radio_Hover_BorderColor]
    grid column sorting hint                    [Radio_Hover_BorderColor]

    checked background                          [Radio_Checked_BackgroundColor]
    grid column sorting icon                    [Radio_Checked_BackgroundColor]
*/
label .rdb ins {
    background-color: #fff;
    border: 1px solid #ccc;
}

label:hover .rdb ins,
label .rdb input[type="radio"]:focus + input + ins,
label .rdb input[type="radio"]:focus + ins {
    border-color: #a6a6a6;
}

.sort-hint:before {
    border-bottom-color: #a6a6a6;
}

.sort-hint:after {
    border-top-color: #a6a6a6;
}

label .rdb input[type="radio"]:checked + input + ins:after,
label .rdb input[type="radio"]:checked + ins:after {
    background-color: #518a8a;
}

.is-col-sort-asc:after {
    border-bottom-color: #518a8a;
}

.is-col-sort-desc:after {
    border-top-color: #518a8a;
}

/*  validation errors
    background                                  [Inputs_Error_BackgroundColor]
    border bottom                               [Inputs_Error_BottomBorderColor]
*/
.row-error .tbx,
.row-error .tar,
.row-error .ui-selectmenu-button,
.row-error .uploader {
    background: #fcf5f5;
    border-color: #ce8d9b;
}

/*  main search
    background                                  [SearchBox_BackgroundColor]
    border                                      [SearchBox_BorderColor]

    * prevent border color change
*/
.tbx-main-search {
    background: #fff;
    border: 1px solid #e6e6e6;
}

    .tbx-main-search.focused {
        border: 1px solid #e6e6e6;
    }

@media (min-width: 640px) {
    .searchbox:not(.focused) .tbx-main-search,
    .searchbox:not(.focused) .tbx-main-search {
        background: #fff;
    }
}


/*  messages block background:
    simple text                                 [Messages_BackgroundColor]
    error                                       [Messages_Error_BackgroundColor]
    confirmation                                [Messages_Confirm_BackgroundColor]
    information                                 [Messages_Info_BackgroundColor]
    alert                                       [Messages_Alert_BackgroundColor]

    password strength background                [Messages_BackgroundColor]
*/
.msg-block {
    background: #f2f2f2;
}

.msg-block-error,
.validation-summary-errors {
    background: #faebee;
}

.msg-block-confirm {
    background: #e8f2e6;
}

.wide-msg-block-info {
    background: #e3f1fc;
}

.msg-block-info {
    background: #e3f1fc;
}

.msg-block-alert {
    background: #fff5eb;
}

.password-strength-indicator {
    background: #f2f2f2;
}

/*  popup / over content elements:
    - background                                [Popup_BackgroundColor]
        dialog
        loading indicator
        iframe
        autocomplete
        tooltip
        tabs in popup

    - border                                    [Popup_BorderColor]
        dialog
        loading indicator
        iframe
        autocomplete
        tooltip
        tabs in popup

    overlay background                          [Popup_Overlay_BackgroundColor]
*/
.ui-dialog {
    background: #fff;
    border: 1px solid #e6e6e6;
}

.loading-indicator {
    background: #fff;
    border: 1px solid #e6e6e6;
}

.ifrm {
    background: #fff;
    border: 1px solid #e6e6e6;
}

.ui-autocomplete {
    background: #fff;
    border: 1px solid #e6e6e6;
}

.ui-tooltip {
    background: #fff;
    border: 1px solid #e6e6e6;
}

.matrices .ui-tabs-active .ui-tabs-anchor {
    background: #fff;
}

.matrices .ui-tabs-nav li {
    border: 1px solid #e6e6e6;
    box-shadow: 0 5px 0 0 #fff, 0 0 5px 0 rgba(0,0,0,0.15);
}

.ui-widget-overlay {
    background-color: #333333;
}

.popup-placeholder {
    background: #fff;
}

.mfp-bg {
    background: #333333;
}

/*  tab:
    highlight active bottom line                [TabHeader_Active_BottomBorderColor]
    inactive big tab background                 [TabHeader_Big_Inactive_BackgroundColor]
*/
.ui-tabs-active .ui-tabs-anchor:after {
    background: #518a8a;
}

.matrices .ui-tabs-anchor {
    background: #f5f5f5;
}

/*  highlight active:
    thumbnail hover / active border             [Thumbnails_Active_BorderColor]
*/
.carousel-image-s .hyp-thumbnail:hover .thumbnail:after {
    border-bottom: 3px solid #518a8a;
}

.carousel-image-s .slick-current .thumbnail {
    border: 1px solid #518a8a;
}

/*  full-page banner:
    font family                                 'Roboto Condensed', sans-serif
    title font size                             [FullPageBanner_Title_FontSize]
    title font color                            [FullPageBanner_Title_FontColor]
    subtitle font size                          [FullPageBanner_SubTitle_FontSize]
    subtitle font color                         [FullPageBanner_SubTitle_FontColor]
    mobile font color                           [FullPageBanner_Mobile_FontColor]
*/
.banner h1,
.banner h2 {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
}

.banner h1 {
    font-size: 4.5em;
    color: #fff;
}


.banner h2 {
    font-size: 3.5em;
    color: #ccc;
}

@media (max-width: 639px) {
    .banner h1 {
        font-size: calc(5.5em/2);
    }

    .banner h2 {
        font-size: calc(5.5em/2);
    }

    .banner h1,
    .banner h2 {
        color: #333333;
    }
}

/* one page checkout order overview
    background:                                 [Checkout_Order_Overview_BackgroundColor]
    border:                                     [BorderColor]
*/
.one-page-checkout .order-overview-section {
    border-color: #e6e6e6;
    background-color:  #fcfcfc;
}

.one-page-checkout .checkout-step.focused:not(.order-overview-section):before,
.one-page-checkout .checkout-step:hover:not(.order-overview-section):before {
    border-color: #e6e6e6;
    background-color:  #fcfcfc;
}

@media screen and (max-width: 639px) {
    .one-page-checkout .order-overview-section {
        background-color: transparent;
    }
}

/*  Sticky section on B2B PLP
    background:                                 [Page_BackgroundColor]
    border:                                     [BorderColor]
*/
.sticky-rails {
    background: #fff;
    border-color: #e6e6e6
}

/****************************************
            Content blocks
****************************************/
.usp {
    padding: 0 20px;
}

.usp-list li,
.service-info-text {
    font-family: 'Work Sans', sans-serif;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

/****************************************
            Compare product areas
****************************************/
/*POPUP*/
.compare-popup-header{
    background: #006bbb;
    color: #fff;
}

.compare-link{
    color: #333;
}

/*PLP*/
.product-compare-selector{
    border-color: #e6e6e6;
}

/*COMPARE PAGE*/
.actions-section {
    border-color: #e6e6e6;
}

.has-sticky,
.has-sticky .compare-column,
.reviews-value,
.specification-value {
    border-color: #e6e6e6;
}

.reviews-value,
.specification-value {
    background: #f6f6f6;
    color: #000;
}

.compare-rails::after,
.compare-rails::before{
    background: #fff;
    box-shadow: 0 0 0 1px #fff;
}
