@font-face {
    font-family: Ubuntu;
    font-weight: normal;
    src: url("../Font/Ubuntu-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Ubuntu;
    font-weight: bold;
    src: url("../Font/Ubuntu-Bold.ttf") format("truetype");
}

@font-face {
    font-family: Ubuntu;
    font-weight: normal;
    font-style: italic;
    src: url("../Font/Ubuntu-Italic.ttf") format("truetype");
}

@font-face {
    font-family: Ubuntu;
    font-weight: bold;
    font-style: italic;
    src: url("../Font/Ubuntu-BoldItalic.ttf") format("truetype");
}

:root {
    --accent-color: #ff8400;
    --secondary-color: #ebeaea;
    --black-color: #000;
    --white-color: #FFF;
    --text-color: #121010;
    --hover-color: #a09f9f;
    --filter-color: #0083cb;
    --points-color: #e11d2c;

    --header-upper-background: var(--white-color);
    --header-upper-points-text: var(--text-color);
    --header-upper-text: var(--text-color);
    --header-upper-hover-text: var(--text-color);
    --header-upper-icons: var(--accent-color);
    --header-upper-basket-nr-of-items: var(--accent-color);

    --header-lower-background: var(--secondary-color);
    --header-lower-text: var(--text-color);
    --header-lower-hover-menu-item-background: var(--hover-color);
    --header-lower-hover-menu-item-text: var(--text-color);

    --catalog-filters-credits-slider-start: var(--accent-color);
    --catalog-filters-credits-slider-end: var(--accent-color);
    --catalog-filters-show-more-text: var(--filter-color);
    --catalog-filters-checkbox-background: var(--white-color);
    --catalog-filters-checkbox-border: var(--filter-color);
    --catalog-filters-text: var(--text-color);

    --catalog-icons-background: var(--white-color);
    --catalog-icons-text: var(--accent-color);
    --catalog-icons-icon: var(--accent-color);
    --catalog-icons-hover-background: var(--secondary-color);
    --catalog-icons-hover-text: var(--accent-color);
    --catalog-icons-hover-icon: var(--accent-color);

    --footer-background: var(--text-color);
    --footer-text: var(--white-color);
    --footer-icon: var(--white-color);
    --footer-hover-text: var(--white-color);
    --footer-hover-icon: var(--white-color);
    --footer-size: 46px;
    --footer-size-loggedin: 188px;

    --header-sticky-background: var(--secondary-color);
    --header-sticky-text: var(--text-color);
    --header-sticky-hover-menu-item-background: var(--hover-color);
    --header-sticky-hover-menu-item-text: var(--text-color);

    --catalog-product-card-credits-text: var(--points-color);

    --catalog-product-card-hover-icon: var(--filter-color);

    --catalog-product-details-button-background: var(--accent-color);
    --catalog-product-details-button-text: var(--white-color);
    --catalog-product-details-hover-button-border: var(--filter-color);
    --catalog-product-details-hover-button-background: var(--filter-color);
    --catalog-product-details-hover-button-text: var(--white-color);

    --checkout-steps-background: var(--accent-color);
    --checkout-steps-text: var(--white-color);
    --checkout-steps-current-background: var(--secondary-color);
    --checkout-steps-current-text: var(--text-color);
    --checkout-steps-hover-background: var(--filter-color);
    --checkout-steps-hover-text: var(--white-color);

    --checkout-button-border: var(--text-color);
    --checkout-button-background: var(--white-color);
    --checkout-button-text: var(--text-color);
    --checkout-button-hover-border: var(--text-color);
    --checkout-button-hover-background: var(--filter-color);
    --checkout-button-hover-text: var(--text-color);

    --loginblock-border: var(--text-color);
    --loginblock-background: var(--white-color);
    --loginblock-text: var(--text-color);
    --loginblock-checkbox: var(--filter-color);
    --loginblock-field-border: var(--text-color);
    --loginblock-field-background: var(--white-color);
    --loginblock-field-placeholder-text: var(--hover-color);
    --loginblock-field-text: var(--text-color);

    --loginblock-login-button-border: var(--accent-color);
    --loginblock-login-button-background: var(--accent-color);
    --loginblock-login-button-text: var(--white-color);
    --loginblock-login-button-hover-border: var(--filter-color);
    --loginblock-login-button-hover-background: var(--filter-color);
    --loginblock-login-button-hover-text: var(--white-color);

    --loginblock-register-button-border: var(--accent-color);
    --loginblock-register-button-background: var(--accent-color);
    --loginblock-register-button-text: var(--white-color);
    --loginblock-register-button-hover-border: var(--filter-color);
    --loginblock-register-button-hover-background: var(--filter-color);
    --loginblock-register-button-hover-text: var(--white-color);

    --basket-border: var(--secondary-color);
    --basket-header-background: var(--secondary-color);
    --basket-header-text: var(--text-color);
    --basket-footer-background: var(--secondary-color);
    --basket-footer-text: var(--text-color);
    --basket-text: var(--text-color);
    --basket-credits-text: var(--text-color);

    --basket-button-border: var(--accent-color);
    --basket-button-background: var(--accent-color);
    --basket-button-text: var(--white-color);
    --basket-button-hover-border: var(--filter-color);
    --basket-button-hover-background: var(--filter-color);
    --basket-button-hover-text: var(--white-color);

    --catalog-offer-background: var(--points-color);
    --catalog-offer-text: var(--white-color);
    --catalog-recommended-background: var(--points-color);
    --catalog-recommended-text: var(--white-color);
    
    --mobile-menu-header-background: var(--secondary-color);
    --mobile-menu-header-text: var(--text-color);
    --mobile-menu-header-icons: var(--white-color);
    --mobile-menu-header-basket-nr-of-items: var(--accent-color);
    --mobile-menu-header-hover-icons: var(--accent-color);

    --mobile-menu-burger-border: var(--hover-color);
    --mobile-menu-burger-background: var(--secondary-color);
    --mobile-menu-burger-text: var(--text-color);
    --mobile-menu-burger-user-points-background: var(--secondary-color);
    --mobile-menu-burger-user-points-text: var(--text-color);
}

body {
    font-family: Ubuntu, Helvetica, Arial, sans-serif;
    color: var(--text-color);
}

a {
    color: var(--text-color);
}

    a:hover, a:focus {
        color: var(--text-color);
    }

/* Header */
.row-header {
    background: var(--header-upper-background) !important;
    color: var(--header-upper-text) !important;
}

    .row-header .logo-container img {
        height: 60px !important;
        padding: 5px 0 0 0 !important;
    }

    .row-header .header-points a, .header-points span {
        color: var(--header-upper-points-text) !important;
    }

        .row-header .header-points a:hover, .header-points a:focus {
            color: var(--header-upper-hover-text) !important;
        }

    .row-header .header-pull-down .header-points {
        line-height: 30px;
    }

    .row-header .savings-goal-star-active {
        color: var(--header-upper-icons) !important;
    }

    .row-header .basket-click {
        background: url(../Images/basket_icon.png) no-repeat bottom;
        color: var(--header-upper-basket-nr-of-items) !important;
    }

    .row-header .header-user .user-list ul li a {
        color: var(--header-upper-text);
    }

    .row-header .mat-icon {
        fill: var(--header-upper-icons);
    }

        .row-header .mat-icon:hover {
            fill: var(--header-upper-icons);
        }

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

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

.basket-list .basket_top {
    background: var(--basket-header-background) !important;
    color: var(--basket-header-text) !important;
    border-color: var(--basket-border);
}
.basket-list .basket_top .basket_total_top {
    background: url(../Images/basket_icon_sticky.png) no-repeat center var(--basket-header-background) !important;
}
.basket-list .basket_total {
    background: var(--basket-footer-background) !important;
    color: var(--basket-footer-text) !important;
}

.basket-list .basket_button button {
    background: var(--basket-button-background) !important;
    color: var(--basket-button-text) !important;
    border: var(--bs-btn-border-width) solid var(--basket-button-border);
}

.basket-list .basket_button button .mat-icon {
    fill: var(--basket-button-text);
}

    .basket-list .basket_button button:hover {
        background: var(--basket-button-hover-background) !important;
        color: var(--basket-button-hover-text) !important;
        border: var(--bs-btn-border-width) solid var(--basket-button-hover-border);
    }  

    .basket-list .basket_button button:hover .mat-icon {
        fill: var(--basket-button-hover-text);
    }

.basket-list .basket_products .row div a,
.basket-list .basket_products .row div a:hover {
    color: var(--basket-text);
}

.basket-list .text-end {
    color: var(--basket-credits-text) !important;
}

.basket-continue-button button {
    background: var(--checkout-button-background) !important;
    color: var(--checkout-button-text) !important;
    border-color: var(--checkout-button-border) !important;
}

    .basket-continue-button button:hover {
        background: var(--checkout-button-hover-background) !important;
        color: var(--checkout-button-hover-text) !important;
        border-color: var(--checkout-button-hover-border) !important;
    }

.basket-continue-button .btn-success {
    background: var(--checkout-button-background) !important;
    color: var(--checkout-button-text) !important;
    border: var(--bs-btn-border-width) solid var(--checkout-button-hover-border) !important;
}

    .basket-continue-button .btn-success:hover {
        background: var(--checkout-button-hover-background) !important;
        color: var(--checkout-button-hover-text) !important;
        border: var(--bs-btn-border-width) solid var(--checkout-button-hover-border) !important;
    }

/* Header - Mobile */
.mobile-header {
    background: var(--mobile-menu-header-background);
    color: var(--mobile-menu-header-text);
}

    .mobile-header .navbar-toggler {
        height: 100%;
        color: var(--mobile-menu-header-icons) !important;
    }

        .mobile-header .navbar-toggler:hover {
            color: var(--mobile-menu-header-hover-icons) !important;
        }

    .mobile-header .savings-goal-star-active {
        color: var(--mobile-menu-header-icons) !important;
    }

    .mobile-header a {
        color: var(--mobile-menu-header-icons) !important;
    }

        .mobile-header a:hover {
            color: var(--mobile-menu-header-hover-icons) !important;
        }

    .mobile-header .basket-click {
        color: var(--mobile-menu-header-basket-nr-of-items) !important;
        background: url(../Images/basket_icon_mobile.png) no-repeat center;
    }
        .mobile-header .basket-click:hover {
            background: url(../Images/basket_icon.png) no-repeat center;
            color: var(--mobile-menu-header-hover-icons) !important;
        }

    .mobile-header .mat-icon {
        fill: var(--mobile-menu-header-icons) !important;
    }

        .mobile-header .mat-icon:hover,
        .mobile-header .mat-icon:focus,
        .mobile-header .mat-icon:active {
            fill: var(--mobile-menu-header-hover-icons) !important;
        }

/* Menu */
.desktop-menu-container {
    background: var(--header-lower-background);
    color: var(--header-lower-text);
}

    .desktop-menu-container li a {
        background: none;
        color: var(--header-lower-text) !important;
    }

        .desktop-menu-container li a:hover {
            background: var(--header-lower-hover-menu-item-background);
            color: var(--header-lower-hover-menu-item-text) !important;
        }

    .desktop-menu-container .submenu,
    .desktop-menu-container .submenu ul {
        background: var(--header-lower-background);
        color: var(--header-lower-text) !important;
    }

    .desktop-menu-container .submenu li a {
        background: none;
        color: var(--header-lower-text) !important;
    }

        .desktop-menu-container .submenu li a:hover {
            background: var(--header-lower-hover-menu-item-background);
            color: var(--header-lower-hover-menu-item-text) !important;
        }

.desktop-menu-container-sticky {
    background: var(--header-sticky-background);
    color: var(--header-sticky-text);
}

    .desktop-menu-container-sticky .sticky-logo {
        margin-top: 8px;
        padding-bottom: 8px;
    }

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

    .desktop-menu-container-sticky li a {
        background: none;
        color: var(--header-sticky-text) !important;
    }

        .desktop-menu-container-sticky li a:hover {
            background: var(--header-sticky-hover-menu-item-background);
            color: var(--header-sticky-hover-menu-item-text) !important;
        }

    .desktop-menu-container-sticky .sticky-menu-items .dropdown-menu {
        background-color: var(--header-sticky-background) !important;
    }

    .desktop-menu-container-sticky .submenu,
    .desktop-menu-container-sticky .submenu ul {
    background: var(--header-sticky-background);
    }

    .desktop-menu-container-sticky .submenu li a {
        background: none;
        color: var(--header-sticky-text) !important;
    }

        .desktop-menu-container-sticky .submenu li a:hover {
            background: var(--header-sticky-hover-menu-item-background);
            color: var(--header-sticky-hover-menu-item-text) !important;
        }

    .desktop-menu-container-sticky .header-points a {
        color: var(--header-sticky-text) !important;
    }

    .desktop-menu-container-sticky .basket-click {
        background: url(../Images/basket_icon_sticky.png) no-repeat bottom;
        color: var(--header-sticky-text) !important;
    }

/* Menu - Mobile */
.mobile-menu {
    background: var(--mobile-menu-burger-background);
    color: var(--mobile-menu-burger-text);
}

    .mobile-menu .mobile-user {
        background: var(--mobile-menu-burger-user-points-background) !important;
        border-top: 4px solid var(--mobile-menu-burger-border);
    }

        .mobile-menu .mobile-user a {
            color: var(--mobile-menu-burger-user-points-text) !important;
        }

            .mobile-menu .mobile-user a:hover {
                color: var(--mobile-menu-burger-user-points-text) !important;
            }

    .mobile-menu .sidebar-nav li a {
        color: var(--mobile-menu-burger-text) !important;
    }

        .mobile-menu .sidebar-nav li a:hover {
            color: var(--mobile-menu-burger-text) !important;
        }

    .mobile-menu .mobile-menu-block {
        background: var(--mobile-menu-burger-background);
        border-bottom: 4px solid var(--mobile-menu-burger-border);
    }

.offcanvas-body {
    background: var(--mobile-menu-burger-background);
    color: var(--mobile-menu-burger-text);
}

/* Catalog */
.product-filter-subheading {
    color: var(--catalog-filters-text);
}

.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 {
    color: var(--catalog-filters-show-more-text);
}

.form-check-input {
    background-color: var(--catalog-filters-checkbox-background);
    border-color: var(--catalog-filters-checkbox-border);
}
.form-check-input:checked {
    background-color: var(--catalog-filters-checkbox-border);
    border-color: var(--catalog-filters-checkbox-border);
}

.ngrs-range-slider .ngrs-join {
    background-image: linear-gradient(var(--catalog-filters-credits-slider-start), var(--catalog-filters-credits-slider-end));
}

.catalog-block {
    background: var(--catalog-icons-background);
    color: var(--catalog-icons-text);
}

    .catalog-block:hover {
        color: var(--catalog-icons-hover-text);
        background-color: var(--catalog-icons-hover-background);
    }

        .catalog-block .catalog-img, .catalog-block:hover .catalog-img {
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;
            width: 100%;
        }

    .catalog-block .catalog-icon-savingsgoal,
    .catalog-block:hover .catalog-icon-savingsgoal {
        background: url(../Images/catalog_icon_savingsgoal.png);
    }

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

    .catalog-block .catalog-icon-suggestions,
    .catalog-block:hover .catalog-icon-suggestions {
        background: url(../Images/catalog_icon_suggestions.png);
    }

    .catalog-block .catalog-icon-popular,
    .catalog-block:hover .catalog-icon-popular {
        background: url(../Images/catalog_icon_popular.png);
    }

    .catalog-block .catalog-icon-new,
    .catalog-block:hover .catalog-icon-new {
        background: url(../Images/catalog_icon_new.png);
    }

    .catalog-block .catalog-icon-offers,
    .catalog-block:hover .catalog-icon-offers {
        background: url(../Images/catalog_icon_offers.png);
    }

    .catalog-block .catalog-icon-order,
    .catalog-block:hover .catalog-icon-order {
        background: url(../Images/catalog_icon_order.png);
    }

.catalog-block-savingsgoal-overlay,
.catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .progress-container .progress-inner {
    background: var(--catalog-icons-hover-background);
    color: var(--catalog-icons-hover-text);
}

.catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .progress-container .progress-outer {
    border-color: var(--catalog-icons-hover-text);
}

.catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .progress-container .savings-goal-reached-percent {
    color: var(--catalog-icons-hover-text);
}

.catalog-block-savingsgoal-overlay .catalog-block-savingsgoal-overlay-inner .progress-buttons .mat-icon:hover {
    color: var(--catalog-product-card-hover-icon);
}

/* Order */
.order-steps {
    background-color: var(--checkout-steps-background) !important;
    color: var(--checkout-steps-text) !important;
}

    .order-steps div:hover {
        background-color: var(--checkout-steps-hover-background) !important;
        color: var(--checkout-steps-hover-text);
    }

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

    .order-steps div.active-step {
        background-color: var(--checkout-steps-current-background) !important;
        color: var(--checkout-steps-current-text) !important;
    }

        .order-steps div.active-step:hover {
            background-color: var(--checkout-steps-hover-background) !important;
            color: var(--checkout-steps-hover-text);
        }

/* Footer */
.footer-container {
    background: var(--footer-background);
    color: var(--footer-text);
    padding-bottom: 10px !important;
}

    .footer-container a {
        color: var(--footer-text);
    }

        .footer-container a:hover {
            color: var(--footer-hover-text);
        }

    .footer-container .social-container a {
        color: var(--footer-icon);
    }

    .footer-container .social-container a:hover {
        color: var(--footer-hover-icon);
    }

.wrapper_main_content {
    padding-bottom: var(--footer-size);
}

.wrapper_main_footer {
    margin-top: calc(-1 * var(--footer-size));
    height: var(--footer-size);
    max-height: var(--footer-size);
}

.wrapper_main_content_loggedin {
    padding-bottom: var(--footer-size-loggedin);
}

.wrapper_main_footer_loggedin {
    margin-top: calc(-1 * var(--footer-size-loggedin));
    height: var(--footer-size-loggedin);
    max-height: var(--footer-size-loggedin);
}

/* Login */
.loginblock .front, .loginblock .back {
    background: var(--loginblock-background);
    color: var(--loginblock-text) !important;
}

    .loginblock .front .form-check-input {
        background-color: var(--loginblock-background);
        border-color: var(--loginblock-checkbox);
    }

    .loginblock .front .form-check-input:checked {
        background-color: var(--loginblock-checkbox);
        border-color: var(--loginblock-checkbox);
    }

    .loginblock .front .form-check-label {
        color: var(--loginblock-text);
    }

.loginblock #UserName,
.loginblock #UserNameLogin,
.loginblock #Password {
    background: var(--loginblock-field-background);
    color: var(--loginblock-field-text);
    border: 1px solid var(--loginblock-field-border);
}

    .loginblock #UserName::placeholder,
    .loginblock #UserNameLogin::placeholder,
    .loginblock #Password::placeholder {
        color: var(--loginblock-field-placeholder-text);
    }


.login_action_container .btn-primary {
    background: var(--loginblock-login-button-background) !important;
    color: var(--loginblock-login-button-text) !important;
    border: var(--bs-btn-border-width) solid var(--loginblock-login-button-border) !important;
}

    .login_action_container .btn-primary:hover,
    .login_action_container .btn-primary:focus {
        background: var(--loginblock-login-button-hover-background) !important;
        color: var(--loginblock-login-button-hover-text) !important;
        border: var(--bs-btn-border-width) solid var(--loginblock-login-button-hover-border) !important;
    }

.login-secondary-btn {
    background: var(--loginblock-register-button-background) !important;
    color: var(--loginblock-register-button-text) !important;
    border: var(--bs-btn-border-width) solid var(--loginblock-register-button-border) !important;
}

    .login-secondary-btn:hover,
    .login-secondary-btn:focus {
        background: var(--loginblock-register-button-hover-background) !important;
        color: var(--loginblock-register-button-hover-text) !important;
        border: var(--bs-btn-border-width) solid var(--loginblock-register-button-hover-border) !important;
    }

.login_links a {
    color: var(--loginblock-text);
}

.order-direct-container, .btn-primary, .delivery-container .btn-primary {
    background: var(--accent-color) !important;
    color: var(--white-color);
}

/* Meer weergeven */

/* Product */
.product-points,
.product-container-blocks .product-title a:hover {
    color: var(--catalog-product-card-credits-text);
}

.product-icon div .mat-icon:hover {
    color: var(--catalog-product-card-hover-icon);
}

.product-details-button .btn {
    background: var(--catalog-product-details-button-background) !important;
    color: var(--catalog-product-details-button-text) !important;
}

.product-details-button:hover .btn {
    background: var(--catalog-product-details-hover-button-background) !important;
    color: var(--catalog-product-details-hover-button-text) !important;
    border-color: var(--catalog-product-details-hover-button-border) !important;
}

.product-details-icon .mat-icon:hover {
    fill: var(--catalog-product-card-hover-icon);
}

.product-offer {
    background: var(--catalog-offer-background) !important;
    color: var(--catalog-offer-text) !important;
}

.product-recommend {
    background: var(--catalog-offer-background) !important;
    color: var(--catalog-offer-text) !important;
}

/* Service */
.service-btn:hover, .service-btn:active, .service-btn:focus, .service-btn-active {
    background: var(--accent-color) !important;
}

/* Others */
.delivery-container .btn-primary, .delivery-container .btn-primary:hover, .delivery-container .btn-primary:focus {
    border: var(--bs-btn-border-width) solid var(--accent-color);
}

.max-body-width {
    padding-bottom: 10px;
}

.social-container {
    float: right;
}

    .social-container img {
        margin-left: 8px;
    }

.social-container-mobile {
    text-align: center;
    margin-top: 10px;
}

    .social-container-mobile img {
        margin: 0 4px;
    }

.savings-goal-dropdown .progress-container .progress-inner {
    background: var(--header-upper-icons);
}

.savings-goal-dropdown {
    z-index: 100;
}