/* Algemeen */

:root {
    --blue: #0066cc;
    --background: #e9edf0;
    --primary: #344b57;
    --primaryhover: #212f37;
    --textcolor: #344b57;
}

body {
    font-family: Verdana,Geneva,sans-serif;
}

.btn-primary, .login_action_container .btn-primary, .login-secondary-btn, .service-btn:hover, .service-btn-active, .catalog-block:hover, .catalog-block-savingsgoal-overlay, .catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .progress-container .progress-inner, .slider-dummy-button:hover, .slider-dummy-button:focus, .order-direct-container {
    background: var(--primary) !important;
}

    .btn-primary:hover, .login_action_container .btn-primary:hover, .login_action_container .btn-primary:focus, .login-secondary-btn:hover, .login-secondary-btn:focus {
        background: #212f37 !important;
    }


.product-container-blocks .product-image .helper {
    height: auto !important; /* fixes catalog images*/
}

a, .header-points a, .header-points .mat-icon, .product-icon div .mat-icon:hover, .savings-goal-star-active, .fade-out-block-button-open span, .fade-out-block-button-open .mat-icon, .fade-out-block-button-close span, .fade-out-block-button-close .mat-icon, .product-container-blocks .product-title a:hover, .product-details-icon .mat-icon:hover {
    color: var(--primary);
}

    a:hover, a:focus {
        color: var(--primary) !important;
    }

.wrapper_main_content_loggedin {
    /* must be same height as the footer */
    padding-bottom: 196px;
}

.wrapper_main_footer_loggedin {
    /* negative value of footer height */
    margin-top: -196px;
    height: 196px;
}

.ngrs-range-slider .ngrs-join, .savings-goal-dropdown .progress-container .progress-inner {
    background-image: linear-gradient(var(--primary), var(--primary));
}

@media (max-width: 991px) {
    .savings-goal-star-active, .savings-goal-star-active:hover {
        color: var(--primary) !important;
    }
}

.savings-goal-dropdown .progress-container .progress-overlay {
    color: #FFF;
    font-weight: normal;
}

.savings-goal-dropdown {
    line-height: 21px;
}

/* Footer */
.footer-container {
    background: var(--background);
    color: var(--textcolor);
    font-size: 14px;
}

    .footer-container a, .footer-container a:hover {
        color: inherit;
    }

    .footer-container li {
        line-height: 30px;
    }

.footer-contaienr li.main {
    font-size: 15px;
}

/* Header */

.container-fixed {
    margin-top: 5px;
}

.header-pull-down {
    line-height: 65px;
    margin: 0px !important;
}

.logo-container {
    padding: 0;
}

    .logo-container img {
        height: 60px;
    }

.header-beforelogin {
    margin-bottom: 10px;
}

.desktop-menu-container, .desktop-menu-container-sticky, .row-header .dropdown-menu {
    background: var(--primary);
    color: #FFF;
}

.desktop-menu-container {
    margin-top: 6px;
    background: var(--primary);
}

    .desktop-menu-container ul li {
        margin-right: 0;
        margin-left: 45px;
    }

.header-pull-down .basket-click {
    line-height: 21px;
    margin-top: 6px;
}

.header-pull-down .basket-outer .basket-click {
    margin-top: 10px;
}

.desktop-menu-container-sticky li {
    margin: 0 5px !important;
}

    .desktop-menu-container li a, .desktop-menu-container-sticky li a {
        color: #FFF;
        font-weight: normal;
    }

        .desktop-menu-container li a:hover, .desktop-menu-container li a:visited, .desktop-menu-container-sticky li a:hover {
            background: var(--primary);
            text-decoration: underline;
            color: #FFF !important;
        }

.desktop-menu-container-sticky .basket-click {
    background: url("/images/basket_icon_mobile.png") no-repeat bottom;
}

.desktop-menu-container-sticky .header-points a, .desktop-menu-container-sticky .header-points span {
    color: #FFF;
}

    .desktop-menu-container-sticky .header-points a:hover, .desktop-menu-container-sticky .header-points span:hover {
        color: #FFF;
        text-decoration: underline;
    }


.dropdown-menu li {
    background: var(--primary);
}

    .dropdown-menu li a {
        text-transform: none;
        font-size: 14px;
        background: var(--primary);
        color: #FFF;
    }

.desktop-menu-container li a, .desktop-menu-container .dropdown-menu {
    background: var(--primary);
    color: #FFF;
}

    .desktop-menu-container li a:hover {
        background: var(--primary);
        text-decoration: underline;
        color: #FFF;
    }

.desktop-menu-container-sticky .sticky-logo {
    margin-top: 5px;
}

.desktop-menu-container-sticky .sticky-logo {
    margin-top: 0;
}

    .desktop-menu-container-sticky .sticky-logo .logo-row .logo-col {
        position: absolute;
    }

.desktop-menu-container-sticky .sticky-items {
    margin-left: 13%;
}

.desktop-menu-container-sticky .dropdown-menu, .desktop-menu-container-sticky .dropdown-menu a {
    background: var(--primary) !important;
    color: #FFF;
}

/* Catalog */
.product-points {
    font-size: 16px;
    color: var(--blue);
}

.catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .overlay-product-title {
    border-color: var(--blue);
}

.catalog-block .catalog-icon-savingsgoal-has-savingsgoal {
    background-image: url(../Images/catalog_icon_savingsgoal_has_savingsgoal.png);
}

/* Mobile */
.mobile-menu, .mobile-header {
    background: var(--primary);
}

    .mobile-menu .sidebar-nav li a:hover {
        border-left: 2px solid var(--primary);
    }

.product-filter-mobile-open:hover, .display-options-row .display-options-col .glyphicon-inactive:hover {
    color: var(--primary);
}

.logo-container-mobile {
    padding-top: 40px;
    z-index: 9;
}

.mobile-header .basket-click {
    background: none;
    font-size: 18px;
}

.header-top-item {
    color: var(--primary);
}

    .header-top-item .user-list {
        line-height: 18px;
        width: auto !important;
    }

.desktop-menu-container-sticky .sticky-items .basket-click {
    color: #FFF;
}

.order-steps {
    background: var(--blue);
    color: #FFF;
}

    .order-steps div.disable-step:hover {
        background-color: var(--primary) !important;
    }

    .order-steps div.active-step, .order-steps div:hover {
        background-color: var(--primary);
        color: #FFF;
    }

.footerlogo img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-top: -20px;
}

.basket-list .basket_top, .basket-list .basket_total_to {
    border-color: var(--blue) !important;
    box-shadow: 0 0 3px var(--blue);
}

.basket-list {
    border-color: var(--blue) !important;
}

.header-pull-down .basket-list {
    margin-top: -53px;
    margin-left: -224px;
    line-height: 21px;
}

.basket-list .basket_top, .basket-list .basket_total {
    background: var(--blue);
}

    .basket-list .basket_top .basket_total_top {
        background-color: #FFF;
        color: var(--primary);
    }

.btn.btn-success {
    background-color: var(--primary);
}

    .btn.btn-success:hover {
        background-color: var(--primaryhover);
    }

.points-container {
    background-color: var(--blue);
}

.logo-container img, .logo-container-mobile img {
    height: 60px;
    padding-left: 12px;
}

.sticky-logo img {
    height: 50px;
}