/****************************************
                Font
****************************************/

/*              START general styles                */

/*  normal text:
    font family                                 [NormalText_FontFamily]
    font size                                   [NormalText_FontSize]
    font color                                  #333333
*/
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #333333;
}

/*  heading text:
    font family                                 [HeadingText_FontFamily]
    font color                                  [HeadingText_FontColor]
    font size h1                                [HeadingText_FontSizeH1]
    font size h2                                [HeadingText_FontSizeH2]
    font size h3                                [HeadingText_FontSizeH3]
    font size h4                                1.3em
*/
h1,
h2,
h3,
h4,
.font-h2,
.font-h4{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #000;
}

h1{
    font-size: 3.7em;
}

h2,
.font-h2{
    font-size: 2.3em;
}

h3{
    font-size: 1.8em;
}

h4,
.font-h4{
    font-size: 1.3em;
}

.h1-holder small{
    font-size: calc(3.7em/2);
}

/*  smaller font labels:                        13px
    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: 13px;
}

.form-row .field-validation-error,
.form-row .feedback-message,
.ui-dialog-titlebar-close,
.hyp-back{
    font-size: 13px;
}

/*  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: #000;
}

.facet-selected .facet-title{
    color: #000;
}

.hyp-account.current{
    color: #000;
}

/*  light grey labels:                          #666
    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: #666;
}

/*  light grey labels 2:                        #666
    product id, attributes;
    autocomplete items;
    empty shopping cart control header
*/
.product-tile .product-id,
.product-tile .product-attributes{
    color: #666;
}

.ui-autocomplete a{
    color: #666;
}

/*  hyperlinks;                                 #d10019
    back, cancel, filter button
    button like link
    button white

    hover back, cancel, filter button           #ff333c
    disabled hypelink button                    [Hyperlink_Disabled_FontColor]
*/
a,
.font-a,
.font-btn,
.btn-like-link,
.btn.btn-white{
    color: #d10019;
}

.font-btn:hover,
.font-btn:focus,
.btn.btn-white:hover,
.btn.btn-white:focus{
    color: #ff333c;
}

.font-btn:active,
.btn.btn-white:active{
    color: #d10019;
}

.hyp-btn.btn-disabled{
    color: #b2b2b2;
}

.uploader-file + label:hover strong,
.uploader-file:focus + label strong{
    color: #d10019;
}

a:focus,
button:focus,
[type="submit"]:focus,
[type="button"]:focus{
    outline: 1px dotted #333333;
}
/*              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:                     #000000
    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: #000000;
}

/*  main navigation:
    top level links font family                 [Menu_TopLevel_FontFamily]
    top level links font size                   22px
    top level links font color                  [Menu_TopLevel_FontColor]
    not hovered top level links color           #000000
    hovered top level link color                #d10019

    simple links                                [Menu_SubLevels_FontColor]
*/
nav .hyp-top-lvl{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #000;
    font-size: 22px;
}

.nav-is-hovered .hyp-top-lvl{
    color: #000000;
}

.nav-item-root.hover .hyp-top-lvl{
    color: #d10019;
}

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: #000;
}

header.sticky-mode .nav-is-hovered .hyp-top-lvl{
    color: #808080;
}

header.sticky-mode .nav-item-root.hover .hyp-top-lvl{
    color: #000;
}

@media (max-width: 639px) {
    nav .hyp-top-lvl,
    .nav-is-hovered .hyp-top-lvl{
        color: #000;
    }
}

/*  footer:
    sitemap links                               #ffffff
    copyright and bottom links                  #ffffff

    hover bottom links                          #ffffff
*/
.sitemap .hyp{
    color: #ffffff;
}

footer .bottom,
.footer-nav .hyp{
    color: #ffffff;
}

.footer-nav .hyp:hover{
    color: #ffffff;
}

/*  buttons (+ back, cancel, filter button):
    - normal
        font family                             [Buttons_FontFamily]
        font color                              [Buttons_FontColor]
        disabled font color                     [Buttons_Disabled_FontColor]
        font size                               1.2em

    - medium
        font size                               21px

    - big
        font size                               24px

    - back
        color                                   [Buttons_Back_FontColor]
        hover color                             [Buttons_Back_Hover_FontColor]

    - close dialog
        color                                   #333333
*/
.btn{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #fff;
    font-size: 1.2em;
}

.font-btn{
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 1.2em;
}

.btn-medium{
    font-size: 21px;
}

.btn-big,
.font-btn-big{
    font-size: 24px;
}

.hyp-back{
    color: #000;
}

.hyp-back:hover{
    color: #808080;
}

.btn.ui-state-disabled,
.btn-disabled,
.btn[disabled]{
    color: #999;
}

.ui-dialog .ui-dialog-titlebar-close{
    color: #333333;
}

/*  form elements:
    input, select text                          #000000
    (+ label unit of measure)

    input placeholder                           #333
    *dont group placeholder selectors: Browsers BUG!
*/
input,
textarea{
    font-family: 'Open Sans', sans-serif;
    color: #000000;
}

.filter-title,
.ui-selectmenu-button,
.ui-selectmenu-menu,
.ddlb select{
    color: #000000;
}

.lbl-uom{
    color: #000000;
}

::-webkit-input-placeholder{
    color: #333;
}

::-moz-placeholder{
    color: #333;
}

:-ms-input-placeholder{
    color: #333;
}

.selectmenu-placeholder{
    color: #333;
}

/*  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: #1f7bc9;
}

.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: #333333;
}

@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;                         [TabHeader_FontFamily]
    header font size;                           2.1em

    tab title inactive                          #333
    tab title hover                             #666
    tab title active                            [TabHeader_Active_FontColor]

    big tab font size                           [TabHeader_Big_FontSize]
*/
.ui-tabs-anchor,
.hidden-tabs-name{
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 2.1em;
}

.ui-tabs-anchor{
    color: #333;
}

.ui-state-hover .ui-tabs-anchor{
    color: #666;
}

.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                        13px
    list price color                            #666666

    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                               [PrimaryPrice_FontFamily]
    - font color                                [PrimaryPrice_FontColor]
    - font size                                 [PrimaryPrice_FontSize]

    secondary prices (variants, prepacks, volume prices):
    - font family                               [SecondaryPrice_FontFamily]
    - font color                                [SecondaryPrice_FontColor]
    - font size                                 [SecondaryPrice_FontSize]

*/
.list-price{
    font-size: 13px;
    color: #666666;
}

.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: 'Pathway Gothic One', sans-serif;
    color: #000;
    font-size: 2.8em;
}

.cell .lbl-price{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #000;
    font-size: 1.4em;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .gvi-volume-prices .cell-price{
        font-family: 'Pathway Gothic One', sans-serif;
        color: #000;
        font-size: 1.4em;
    }
}

@media (min-width: 1024px) {
    .gvi-volume-prices .cell-price{
        font-family: 'Pathway Gothic One', sans-serif;
        color: #000;
        font-size: 1.4em;
    }
}

/*  main search input
    font size                                   13px
    placeholder color                           #666

    *dont group placeholder selectors: Browsers BUG!
*/
.tbx-main-search input{
    font-size: 13px;
}

.tbx-main-search ::-webkit-input-placeholder{
    color: #666;
}

.tbx-main-search ::-moz-placeholder{
    color: #666;
}

.tbx-main-search :-ms-input-placeholder{
    color: #666;
}

/*  shopping cart control header:
    font family                                 [CartSummary_Header_FontFamily]
    font size                                   15px
    color                                       #000000

    empty cart color                            #ffffff

    items in cart (mobile)                      [CartSummary_TotalItems_Mobile_FontColor]
*/
.over-summary .hyp{
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 15px;
    color: #000000;
}

.over-summary.is-empty .hyp{
    color: #ffffff;
}

@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: #000;
}

/*  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               [ProductPage_Title_FontSize]
    product title on mobile details page        [ProductPage_Mobile_Title_FontSize]

    product list page title                     4em
    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: 2.8em;
}

.combined-header h1{
    font-size: 4em;
}

.combined-header .facets-title{
    font-size: 22px;
}

.popup-cnt .strong-header{
    font-size: 40px;
}

@media (max-width: 639px){
    .font-product-title{
        font-size: 32px;
    }

    .combined-header h1{
        font-size: calc(4em/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              #333333
*/
.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: #333333;
}

/*  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: #000;
}

.list-totals .name,
.list-totals .currency,
.list-cart .name,
.list-cart .currency{
    color: #808080;
}

.list-totals .value,
.list-cart .value{
    color: #000;
}

.responsive-table td:before{
    color: #808080;
}

/*  spesific titles:
    product title on basket, checkout pages
    - font family                               [Cart_ProductTitle_FontFamily]
    - font size                                 17px
    - font color                                [Cart_ProductTitle_FontColor]
    variants / prepacks grid header
    - font family                               [VariantMatrixHeaders_FontFamily]
    - font size                                 [VariantMatrixHeaders_FontSize]
    - font color                                [VariantMatrixHeaders_FontColor]
*/
.gvi .product-title-super{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #000;
    font-size: 17px;
}

.gvi-variants th,
.gvi-prepacks th{
    font-family: 'Pathway Gothic One', 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:          #e5e5e5
    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 #e5e5e5;
}

.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 #e5e5e5;
}

.has-aside,
.hyp-account,
.sales-agreement-form-wrapper.business .sales-agreement-action-link:not(:last-child){
    border-right-color: #e5e5e5;
}

.separator + .nav-item-block,
.separator + .img-in-row{
    border-left-color: #e6e6e6;
}

/*  border color - horizontal separator:        #e5e5e5
    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 #e5e5e5;
}

.list-totals .emphasis,
.list-cart .subtotal,
.accordion-header{
    border-top: 1px solid #e5e5e5;
}

.choose-product,
.quicksearch-result{
    border-top: 1px dashed #e5e5e5;
    border-bottom: 1px dashed #e5e5e5;
}

.border-horizontal,
.products-group.slick-dotted,
.added-product,
.checkout-summary,
.l-service-info,
.our-methods{
    border-color: #e5e5e5;
}

.gvi-pickup-locations caption{
    border-bottom: 1px dashed #e5e5e5;
}

.gvi-sales-agreement-lines .hidden-info-inner-wrapper .cell{
    border-color: #e5e5e5;
}

/*  block border:                               #e5e5e5
    thumbnail;
*/
.carousel-image-s .thumbnail{
    border: 1px solid #e5e5e5;
}

/*  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:                          #d10019
    sticky header background:                   #e5e5e5
    dropdowns background:                       [Header_Dropdowns_BackgroundColor]
    language;
    login;
    basket.

    sticky menu background:                     [Header_Menu_Sticky_BackgroundColor]
*/
header{
    background: #d10019;
}

header.sticky-mode,
header.sticky-mode .bottom-header{
    background: #e5e5e5;
}

.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: #e5e5e5;
    }

    header .search{
        background: #fff;
    }
}

/*  header border:                              #ccc
    general header;
    navigation;
    language;
    login;
    search;
    basket
*/
.nav-opener-wrapper,
header.sticky-mode,
.middle-header,
.bottom-header{
    border-color: #ccc;
}

.nav-list-sub,
.nav-wrapper,
.nav-item-root.hover .hyp-top-lvl{
    border-color: #ccc;
}

header.sticky-mode .nav-list-root{
    border: 1px solid #ccc;
}

.language{
    border-right-color: #ccc;
}

.top-hyp + .login{
    border-left-color: #ccc;
}

header .top-dropdown:hover,
header .top-dropdown.hover,
header .top-dropdown .summary{
    border-color: #ccc;
}

.basket-summary,
.basket:hover .over-summary:not(.is-empty),
.basket.hover .over-summary:not(.is-empty){
    border-color: #ccc;
}

@media (max-width: 639px){
    .basket,
    .search{
        border-color: #ccc;
    }
    .mob-account-btn,
    header .top-dropdown,
    header .top-dropdown:hover{
        border-color: #ccc;
    }
}

/*  main navigation:
    full page background                        #e5e5e5
    sub levels background                       #ffffff
    active menu item bottom line color          #8b8b8b
*/
.nav-list-sub,
.nav-wrapper,
.nav-item-root.hover .hyp-top-lvl{
    background-color: #ffffff;
}

.nav-item.selected .hyp-top-lvl span:after{
    background: #8b8b8b;
}

@media (min-width: 1024px){
    header .bottom-header{
        background: #e5e5e5;
    }
}

/*
    mobile basket changing background           [CartSummary_Mobile_BackgroundColor]
*/
@media (max-width: 639px){
    .over-summary.over-summary-just-changed{
        background-color: #cb2245 !important;
    }
}

/*  
    site background                             #ffffff
*/
.is_stuck.gvi-totals-wrapper,
body{
    background: #ffffff;
}

/*  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;                     #d10019
    site footer border                          [Footer_BorderColor]
*/
footer{
    background: #d10019;
    box-shadow: inset 0 1px 0 0 #e6e6e6;
}

/*  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                                  #666666
    border bottom                               #fff

    hover background                            #d10a11
    hover border bottom                         #ffffff

    focused background                          #666666
    focused border bottom                       #fff

    action background                           #d10019
    action border bottom                        #a40019

    hover action background                     #a40019
    hover action border bottom                  #7b0012

    focused action background                   #d10019
    focused action border bottom                #a40019

    disabled background                         [Buttons_Disabled_BackgroundColor]
    disabled border bottom                      [Buttons_Disabled_BottomBorderColor]

    white button border                         #666666
    white button hover border                   #d10a11
*/
.btn,
.btn.btn-selected:hover,
.btn.btn-selected:focus{
    background-color: #666666;
    border-color: #fff;
}

.btn:hover,
.btn.hover,
.btn:focus{
    background-color: #d10a11;
    border-color: #ffffff;
}

.btn:active{
    background-color: #666666;
    border-color: #fff;
}
.btn-action,
.btn-action.btn-selected:hover,
.btn-action.btn-selected:focus{
    background-color: #d10019;
    border-color: #a40019;
}

.btn-action:hover,
.btn-action:focus{
    background-color: #a40019;
    border-color: #7b0012;
}

.btn-action:active{
    background-color: #d10019;
    border-color: #a40019;
}

.sticky-rails .btn .icon-shadow-layer {
    fill: #a40019;
}

.sticky-rails .btn:hover .icon-shadow-layer,
.sticky-rails .btn:focus .icon-shadow-layer{
    fill: #7b0012;
}

.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;
    border-color: #979797;
}

.btn-white{
    background: #fff;
    border-color: #666666;
}

.btn-white:hover,
.btn-white.hover,
.btn-white:focus{
    background: #fff;
    border-color: #d10a11;
}

.btn-white:active{
    background: #fff;
    border-color: #666666;
}

.btn-scroll-top[aria-pressed="false"] {
    background-color: #666666;
    border-color: #fff;
}

.btn-scroll-top[aria-pressed="false"].hover,
.btn-scroll-top[aria-pressed="true"]{
    background-color: #d10a11;
    border-color: #ffffff;
}

.btn-scroll-top .icon-shadow-layer{
    fill: #fff;
}

.btn-scroll-top.hover .icon-shadow-layer{
    fill: #ffffff;
}

/*  input, textarea, select
    background                                  #e5e5e5
    border bottom                               #ccc

    focused background                          [Inputs_Focus_BackgroundColor]
    focused border bottom                       #d10019

    select/datepicker hover background color    [Inputs_SelectHover_BackgroundColor]

    datepicker today background                 [DatePicker_Today_BackgroundColor]
*/
.tbx,
.tar,
.uploader{
    background: #e5e5e5;
    border-color: #ccc;
}

.tbx.focused,
.tar.focused{
    background: #fff;
    border-bottom-color: #d10019;
}

.uploader.is-dragover{
    border-color: #d10019;
}

.filter-title,
.ui-selectmenu-button,
.ui-menu,
.ddlb select{
    background: #e5e5e5;
    border-color: #ccc;
}

.filter-title.expanded {
    border-color: #e5e5e5;
}

.ui-selectmenu-button:focus{
    background: #fff;
    border-bottom-color: #d10019;
}

.ui-selectmenu-button[aria-expanded="true"]{
    border-color: #e5e5e5;
}

.ui-menu-item .ui-state-active,
.uploader.is-dragover{
    background-color: #fafafa;
}

.ui-datepicker{
    background-color: #fafafa;
    border-bottom: 1px solid #ccc;
}

.ui-datepicker .ui-datepicker-today{
    background-color: #e9e9e9;
}

.ui-datepicker .ui-datepicker-current-day{
    background-color: #1f7bc9;
}

.ui-datepicker .ui-datepicker-current-day a{
    color: #ffffff;
}

/*  checkboxes
    background                                  [Radio_BackgroundColor]
    border                                      [Radio_BorderColor]

    hover border                                [Radio_Hover_BorderColor]

    checked background                          #d10019
*/

label .chb ins{
    background-color: #fff;
}

label .chb ins:after {
    -webkit-box-shadow: 2px 2px 0px 0px #d10019;
    box-shadow: 2px 2px 0px 0px #d10019;
}

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                          #d10019
    grid column sorting icon                    #d10019
*/
    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: #d10019;
}

.is-col-sort-asc:after{
    border-bottom-color: #d10019;
}

.is-col-sort-desc:after{
    border-top-color: #d10019;
}

/*  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                                      #ffffff

    * prevent border color change
*/
.tbx-main-search{
    background: #fff;
    border: 1px solid #ffffff;
}

.tbx-main-search.focused{
    border: 1px solid #ffffff;
}

/*  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: #000;
}

.popup-placeholder{
    background: #fff;
}

.mfp-bg{
	background: #000;
}

/*  tab:
    highlight active bottom line                #d10019
    inactive big tab background                 [TabHeader_Big_Inactive_BackgroundColor]
*/
.ui-tabs-active .ui-tabs-anchor:after{
    background: #d10019;
}

.matrices .ui-tabs-anchor{
    background: #f5f5f5;
}

/*  highlight active:
    thumbnail hover / active border             #999999
*/
.carousel-image-s .hyp-thumbnail:hover .thumbnail:after{
    border-bottom: 3px solid #999999;
}

.carousel-image-s .slick-current .thumbnail{
    border: 1px solid #999999;
}

/*  full-page banner:
    font family                                 [FullPageBanner_FontFamily]
    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: 'Pathway Gothic One', sans-serif;
}

.banner h1{
    font-size: 5.5em;
    color: #fff;
}


.banner h2{
    font-size: 5.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: #000;
    }
}

/* one page checkout order overview
    background:                                 [Checkout_Order_Overview_BackgroundColor]
    border:                                     #e5e5e5
*/
.one-page-checkout .order-overview-section{
    border-color: #e5e5e5;
    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: #e5e5e5;
    background-color:  #fcfcfc;
}

@media screen and (max-width: 639px) {
    .one-page-checkout .order-overview-section {
        background-color: transparent;
    }
}

/*  Sticky section on B2B PLP
    background:                                 #ffffff
    border:                                     #e5e5e5
*/
.sticky-rails{
    background: #ffffff;
    border-color: #e5e5e5
}

/****************************************
            Content blocks
****************************************/
.usp-list li,
.service-info-text{
    font-family: 'Pathway Gothic One', sans-serif;
    color: #4c4c4c;
    font-size: 20px;
}


/****************************************
            Compare product areas
****************************************/
/*POPUP*/
.compare-popup-header{
    background: #666666;
    color: #fff;
}

.compare-link{
    color: #333;
}

/*PLP*/
.product-compare-selector{
    border-color: #e5e5e5;
}

/*COMPARE PAGE*/
.actions-section {
    border-color: #e5e5e5;
}

.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: #ffffff;
    box-shadow: 0 0 0 1px #ffffff;
}