@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("Font/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("Inter-Regular.woff2") format("woff2");
}

:root {
    --blue: #28334A;
    --blue-highlight: #3C475E;
    --green: #8FE2B0;
    --green-highlight: #A3F6C4;
    --white: #FFF;
}

body {
    font-family: Inter, sans-serif;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: InterVariable, sans-serif;
    }
}

.btn-primary, .login_action_container .btn-primary, .login-secondary-btn, .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(--green) !important;
}
.catalog-block:hover, .service-btn:hover, .service-btn-active {
    background: var(--blue) !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: var(--green-highlight) !important;
    }


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

a, .product-icon div .mat-icon:hover, .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(--green);
}
.header-points a, .header-points .mat-icon, .savings-goal-star-active {
    color: var(--blue);
}

    a:hover, a:focus {
        color: var(--green-highlight) !important;
    }
    
    .header-points a:hover, .header-points a:focus {
        color: var(--blue-highlight) !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(--green), var(--green));
}

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

.savings-goal-dropdown .progress-container .progress-overlay {
    color: var(--white);
    font-weight: normal;
}

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

/* Footer */
.footer-container {
    background: var(--blue);
    color: var(--green);
    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 */

.row-header {
    background: var(--green);
}

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

.header-pull-down {
    line-height: 45px;
    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(--blue);
    color: var(--white);
}

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

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

.header-top-item .basket-outer {
    padding-top: 0px;    
}
.header-pull-down .basket-click {
    line-height: 21px;
    margin-top: 4px;
}

/* .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: var(--white);
        font-weight: normal;
    }

        .desktop-menu-container li a:hover, .desktop-menu-container li a:visited, .desktop-menu-container-sticky li a:hover {
            background: var(--blue);
            text-decoration: underline;
            color: var(--green) !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: var(--white);
}

    .desktop-menu-container-sticky .header-points a:hover, .desktop-menu-container-sticky .header-points span:hover {
        color: var(--white) !important;
        text-decoration: underline;
    }


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

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

.desktop-menu-container li a, .desktop-menu-container .dropdown-menu {
    background: var(--blue);
    color: var(--green);
}

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

.desktop-menu-container-sticky .sticky-logo, .desktop-menu-container-sticky .sticky-items {
    width: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mobile-header .navbar-toggler,
.mobile-header a,
.mobile-header .basket-click {
    color: var(--blue);
}

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

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

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

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

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

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

.desktop-menu-container-sticky .sticky-items .basket-click {
    color: var(--white);
}

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

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

    .order-steps div.active-step, .order-steps div:hover {
        background-color: var(--blue);
        color: var(--green);
    }

.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: -38px;
    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: var(--green);
        color: var(--blue);
    }

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

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

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

.service-btn mat-icon {
    color: var(--green);
}