/****************************************
                Font
****************************************/
/*              START general styles                */
/*  normal text:
    font family                                 'Work Sans', sans-serif
    font size                                   [NormalText_FontSize]
    font color                                  [NormalText_FontColor]
*/

body {
    font-family: 'Work Sans', 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 Condensed', sans-serif
    font color                                  [HeadingText_FontColor]
    font size h1                                [HeadingText_FontSizeH1]
    font size h2                                [HeadingText_FontSizeH2]
    font size h3                                [HeadingText_FontSizeH3]
    font size h4                                [HeadingText_FontSizeH4]
*/

h1,
h2,
h3,
h4,
.font-h4 {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333;
    font-weight: 600;
}
h1 {
    font-size: 3.7em;
}
h2 {
    font-size: 2.3em;
}
h3 {
    font-size: 1.8em;
}
h4,
.font-h4 {
    font-size: 1.4em;
}
.h1-holder small {
    font-size: calc(3.7em/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;                                 #518a8a
    back, cancel, filter button
    button like link
    button white

    hover back, cancel, filter button           #5f9a9a
    disabled hypelink button                    [Hyperlink_Disabled_FontColor]
*/

a,
.font-a,
.font-btn,
.btn-like-link,
.btn.btn-white {
    color: #518a8a;
}
.font-btn:hover,
.font-btn:focus,
.btn.btn-white:hover,
.btn.btn-white:focus {
    color: #5f9a9a;
}
.font-btn:active,
.btn.btn-white:active {
    color: #518a8a;
}
.hyp-btn.btn-disabled {
    color: #b2b2b2;
}
.uploader-file + label:hover strong,
.uploader-file:focus + label strong {
    color: #518a8a;
}
/*              END general styles                */
/*              START specific control styles                */
/*  header top text, links:                     [Header_FontColor]
    top links;
    login, language control text, links;
*/

.top-hyp,
.login,
.language,
.login .hyp,
.language .hyp {
    color: #333;
}
/*  main navigation:
    top level links font family                 'Roboto Condensed', sans-serif
    top level links font size                   [Menu_TopLevel_FontSize]
    top level links font color                  [Menu_TopLevel_FontColor]
    not hovered top level links color           [Menu_TopLevel_FadeOut_FontColor]
    hovered top level link color                [Menu_TopLevel_Hovered_FontColor]

    simple links                                [Menu_SubLevels_FontColor]
*/

nav .hyp-top-lvl {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    color: #333333;
    font-size: 20px;
}
.nav-is-hovered .hyp-top-lvl {
    color: #808080;
}
.nav-item-root.hover .hyp-top-lvl {
    color: #333333;
}
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                               #ffffff
    copyright and bottom links                  #ffffff

    hover bottom links                          #cccccc
*/

.sitemap .hyp {
    color: #ffffff;
}
footer .bottom,
footer .footer-address,
footer .newsletter,
.footer-nav .hyp {
    color: #ffffff;
}
.footer-nav .hyp:hover {
    color: #cccccc;
}
/*  buttons (+ back, cancel, filter button):
    - normal
        font family                             'Roboto Condensed', sans-serif
        font color                              [Buttons_FontColor]
        disabled font color                     [Buttons_Disabled_FontColor]
        font size                               [Buttons_Normal_FontSize]

    - 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.4em;
}
.font-btn {
    font-family: 'Roboto Condensed', sans-serif, sans-serif;
    font-size: 1.4em;
}
.btn-medium {
    font-size: 20px;
}
.btn-big,
.font-btn-big {
    font-size: 22px;
}
.hyp-back {
    color: #333333;
}
.hyp-back:hover {
    color: #808080;
}
.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: 'Work Sans', sans-serif, sans-serif;
    color: #333;
}
.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]
*/

.gvi th {
    color: #808080;
}
.gvi .font-lighter,
.gvi .cell-name {
    color: #808080;
}
.gvi td {
    color: #000;
}
@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;                           2.0em

    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: 2.0em;
}
.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]

    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                                 [PrimaryPrice_FontSize]

    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;
}
.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: 2.8em;
}
.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-open .searchbox-icon {
    background: #518a8a;
}
.searchbox-open .searchbox-icon:hover {
    background: #5f9a9a;
}
/*  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               [ProductPage_Title_FontSize]
    product title on mobile details page        [ProductPage_Mobile_Title_FontSize]

    product list page title                     [ProductList_Title_FontSize]

    emphasized popups header:
    volume discount, package content            [Popup_Title_FontSize]
*/

.gvi-totals .emphasis,
.list-totals .t-row-total-price {
    font-size: 16px;
}
.font-product-title {
    font-size: 2.8em;
}
.combined-header h1 {
    font-size: 4.6em;
}
.popup-cnt .strong-header {
    font-size: 40px;
}
@media (max-width: 639px) {
    .font-product-title {
        font-size: 32px;
    }
    .combined-header h1 {
        font-size: calc(4.6em/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]
*/

.gvi-volume-prices .cell-discount {
    color: #37a600;
}
.gvi-basket-overview .cell-discount,
.gvi-basket .cell-discount {
    color: #cb2245;
}
.gvi-basket .extended-text {
    color: #f28100;
}
/*  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 {
    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
*/

.last-viewed .ui-tabs-nav,
.checkout-offers .ui-tabs-nav,
.accordion {
    border-bottom: 1px solid #e6e6e6;
}
.list-totals .t-row-total-price,
.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;
}
/*  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;
    }
    header .top-dropdown,
    header .top-dropdown:hover {
        border-color: #e6e6e6;
    }
}
/*  main navigation:
    full page background                        [FullPageHeader_BackgroundColor]
    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: #f7f7f7;
    }
}
/*
    mobile basket changing background           #518a8a
*/

@media (max-width: 639px) {
    .over-summary.over-summary-just-changed {
        background-color: #518a8a;
    }
}
/*  
    site background                             [Page_BackgroundColor]
*/

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;
    }
    .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;                     #999999
    site footer border                          #888888
*/

footer {
    background: #999999;
    border-top: 1px solid #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                                  #518a8a
    border bottom                               #2d3e3e

    hover background                            #5f9a9a
    hover border bottom                         #223434

    focused background                          #518a8a
    focused border bottom                       #2d3e3e

    action background                           [Buttons_Action_BackgroundColor]
    action border bottom                        [Buttons_Action_BottomBorderColor]

    hover action background                     [Buttons_Action_Hover_BackgroundColor]
    hover action border bottom                  [Buttons_Action_Hover_BottomBorderColor]

    focused action background                   [Buttons_Action_BackgroundColor]
    focused action border bottom                [Buttons_Action_BottomBorderColor]

    disabled background                         [Buttons_Disabled_BackgroundColor]
    disabled border bottom                      [Buttons_Disabled_BottomBorderColor]

    white button border                         #518a8a
    white button hover border                   #5f9a9a
*/

.btn {
    background-color: #518a8a;
    border-color: #2d3e3e;
}
.btn:hover,
.btn.hover,
.btn:focus {
    background-color: #5f9a9a;
    border-color: #223434;
}
.btn:active {
    background-color: #518a8a;
    border-color: #2d3e3e;
}
.btn-action {
    background-color: #f78400;
    border-color: #ac5c00;
}
.btn-action:hover,
.btn-action:focus {
    background-color: #f09630;
    border-color: #a86922;
}
.btn-action:active {
    background-color: #f78400;
    border-color: #ac5c00;
}
.btn-disabled,
.btn[disabled] {
    background-color: #d9d9d9 !important;
    border-color: #979797 !important;
}
.btn-white {
    background-color: #fff;
    border-color: #518a8a;
}
.btn-white:hover,
.btn-white.hover,
.btn-white:focus {
    background: #fff;
    border-color: #5f9a9a;
}
.btn-white:active {
    background: #fff;
    border-color: #518a8a;
}
/*  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;
}
.ui-selectmenu-button,
.ui-menu,
.ddlb select {
    background: #f2f2f2;
    border-color: #c2c2c2;
}
.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;
}
/*  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 .chb input[type="checkbox"]:disabled + ins,
label:hover .chb input[type="checkbox"]:disabled + ins {
    border-color: #ccc;
}
/*  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;
}
/*  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;
}
.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;
}
.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;
}
@media screen and (max-width: 639px) {
    .one-page-checkout .order-overview-section {
        background-color: transparent;
    }
}
/****************************************
            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;
}