:root {
    /*  colors used in viqgrid */
    /* ------------------------ */

    --font-size: 1.4rem;
    --font-main: "etelkalight", "Arial", sans-serif;

    --c-text: #4b4c54;
    --c-primary: #d21242;
    --c-secondary: #eb5e30;
    --c-topnav-border: rgba(196, 17, 61, 0.3);
    --c-third: #84b818;
    --c-btn-border: #6da200;
    --c-btn-border-darker: #608e01;
    --c-filter-bottom: #ddd;
    --c-icon-hover: #f3f3f3;
    --c-summary: #e8e8e8;
    --c-focus: #0082b3;
    --c-focus-90: #00a7e6;
    --c-nav-chevron: #b7b7b7;
    --c-alert-bg: #ffd466;
    --flow-started: var(--c-nav-chevron);

    --c-task-done: var(--c-third);
    --c-task-due: var(--c-primary);
    --c-task-flagged: #920692;

    --c-notification-bar-1: var(--c-third);
    --c-notification-bar-2: var(--c-secondary);
    --c-notification-bar-3: var(--c-primary);

    --rgb-primary: 210, 18, 66; /* rgb value of #d21242 */
    --rgb-secondary: 235, 94, 48; /* rgb code for $c-secondary */
    --rgb-third: 132, 184, 24; /* rgb code for $c-third */
    --rgb-primary-dark: 196, 17, 61;

    --bg-topbar: #f6f6f6;
    --bg-reset-btn: #7a7a7a;
    --bg-nav-gradient: #f29c3a 0%, #db2f56 70%, #db2f56 100%;
    --nav-gradient-deg: -46deg;

    --border-grey: #e0e0e0;

    /* chart colors */
    /* ------------ */
    --c-chart-0: var(--c-third);
    --c-chart-1: #f29c3a;
    --c-chart-2: rgba(132, 184, 24, 0.5);
    --c-chart-3: rgba(255, 194, 34, 0.5);
    --c-chart-4: rgba(242, 156, 58, 0.5);
    --c-chart-5: rgba(223, 83, 83, 0.5);
    --c-chart-6: #91c0f2;
    --c-chart-7: #ffb800;
    --c-chart-8: #ffc222;
    --c-chart-9: #e44f0e;
    --c-chart-10: #498dc1;
    --c-chart-11: #920692;

    /* @End colors used in viqgrid */
    /* --------------------------- */

    /* Colors used in mijnladen */
    /* ------------------------ */
    --ml-header-public-bg: #fff;
    --ml-login-block-bg: #fff;
    --ml-c-primary: #d21242;
    --ml-c-text: #666;
    --ml-c-secondary: #ec740f;
    --ml-c-gradient-2: #ea754f;
    --ml-c-btn: linear-gradient(to right, rgb(235, 67, 86) 0%, rgb(239, 122, 86) 100%);
    --ml-c-btn-txt: #fff;
    --ml-c-btn-consent-txt: #000;
    --ml-c-btn-consent: #e6e6e6;
    --ml-c-btn-hover: #000;
    --ml-c-btn-txt-hover: #fff;
    --ml-c-menu-border: #e1e1e1;
    --ml-c-bottom-menu: #636161;
    --ml-c-menu-selected: #d21242;
    --ml-c-mobile-menu-item: #fff;
    --ml-c-mobile-menu-item-border: rgba(255, 255, 255, 0.2);
    --ml-c-invoice: #3fa0dc;
    --ml-c-menu: #72b002;
    --ml-c-menu-hover: var(--ml-c-primary);
    --ml-c-nav-icon: #808080;
    --ml-c-disabled: #e6e6e6;
    --ml-c-header-bg: #d31641;
    --ml-c-error: #d21242;
    --ml-c-circle: #b7b7b7;
    --ml-c-link: var(--ml-c-primary);
    --ml-c-logo-text: #fff;
    --ml-c-km-driven: #524d4d;
    --ml-c-tile-costs: #524d4d;
    --ml-c-tile-co2: #524d4d;
    --ml-c-tile-load: #524d4d;
    --ml-c-tile-invoice: #524d4d;
    --ml-c-tile-loaded-home: #524d4d;
    --ml-c-highlight-2: #999;
    --ml-c-hamburger: #000;
    --ml-f-main: etelkalight, arial, sans-serif;

    --ml-bg-body: #fff;
    --ml-bg-detail-content: #f2f2f2;
    --ml-bg-select-arrow: var(--c-primary);
    --ml-bg-month-nav: #fff;
    --ml-c-login-error: var(--c-primary);
    --ml-c-hltext-1: #fff;
    --ml-c-hltext-2: #fff;

    --ml-rgb-menu-border: 255, 255, 255;
    --ml-rgb-bottom-menu: 153, 153, 153;
    --ml-bg-input: #fff;
    --ml-bd-c-input: #b3b3b3;

    --ml-c-marker-text: #fff;
    --ml-c-marker-text-2: #fff;
    --ml-c-marker-text-3: #fff;

    --ml-gradient-direction: to right;

    --ml-header-height: 6rem;
    --ml-start-bg: #eaeaea;

    --ml-border-error-msg: 2px solid var(--ml-c-primary);
    --ml-bg-error-msg: rgba(239, 121, 86, 0.1);

    --petten-c-grey-1: #e8e8e8;
    --petten-c-grey-2: rgb(232, 233, 232);
    --petten-header-height: 8rem;

    --tnt-btn-c: #fff;
    --tnt-btn-bg: #db3b47;
    --tnt-btn-radius: 5px;
    --tnt-btn-bd-c: #fff;
}

html { font-family: var(--ml-f-main); }

/* Logos used in viqgrid */
/* --------------------- */

.visualwrapper .logo {
    background: url(logo-vertical.svg) no-repeat;
    background-position: 1px 26px;
}

.visualwrapper.pinned-navbar .logo {
    height: 100px;
    background: url(logo.svg) no-repeat;
    background-position: 15px 25px;
}

/* @End logos used in viqgrid */
/* -------------------------- */


/* Overrides for mijnladen */
/* ------------------------ */

.eneco-mijnladen .month-nav { border-top: 1px solid #e8e8e8; }

body.public_page {
    background: #e8e8e8;
/*    background: linear-gradient(var(--ml-gradient-direction), var(--ml-c-primary) 0%, var(--ml-c-gradient-2) 100%) fixed no-repeat;*/
}

.ml-header { background: #fff; } /* override gradient */

header.ml-header .logo {
    margin-left: 3rem;
    padding-top: 1rem;
    width: 110px;
}


.ml-header-public { position: relative; }

.ml-header-public::after {
    position: absolute;
    bottom: -0.7rem;
    left: 0;
    right: 0;
    display: block;
    height: .7rem;
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) no-repeat;
}

.ml-login-logo img {
    width: 110px;
    height: auto;
}

.eneco-mijnladen :is(.login-block,
                     .totp-block) {
    border-radius: 8px;
    box-shadow: 0px 8px 8px 0 rgba(0, 0, 0, .3);
}


/* map markers */
.svg-icon-stat.free     { background-image: url(icon-stat-free.svg); }
.svg-icon-stat.occupied { background-image: url(icon-stat-occupied.svg); }
.svg-icon-stat.unknown  { background-image: url(icon-stat-unknown.svg); }


.eneco-mijnladen :is(.btn,
    input[type="submit"],
    input[type="button"],
    .btn-consent){
    border: none;
    border-radius: 0.4rem;
}

.eneco-mijnladen .btn-primary {
    background: var(--ml-c-btn);
    border-radius: 0.4rem;
}

.eneco-mijnladen .btn-primary:hover {
    --ml-c-btn: var(--ml-c-btn-hover);
    --ml-c-btn-txt: var(--ml-c-btn-txt-hover);
}

.content-tile h1 { --ml-c-primary: #000; }

@media screen and (max-width: 46.25em) {
    .menu-container .menuitem.selected { background-color: rgba(0, 0, 0, 0.2); }
}