:root {
    
    /*-------------*/
    /*-- Cuzo-PV --*/
    /*-------------*/
    
    /*-<<< START import figma >>>-*/   
    
    --color-primary-500: #4c0219;
    --color-primary-400: #870930;
    --color-primary-300: #ab536f;
    --color-primary-200: #c38498;
    --color-primary-100: #dbb5c1;
    --color-primary-050: #f2e9ec;
    --color-secondary-500: #a44201;
    --color-secondary-400: #ff6600;
    --color-secondary-300: #ff944c;
    --color-secondary-200: #ffb380;
    --color-secondary-100: #fed6bc;
    --color-neutral-white: #ffffff;
    --color-neutral-100: #f2f2f2;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #cecece;
    --color-neutral-400: #a6a6a6;
    --color-neutral-500: #828282;
    --color-neutral-600: #4d4d4d;
    --color-neutral-black: #000000;
    --color-success-500: #045804;
    --color-success-400: #008a00;
    --color-success-300: #61ba61;
    --color-success-200: #bbe5bb;
    --color-success-100: #e2f5e2;
    --color-error-500: #810c18;
    --color-error-400: #da283a;
    --color-error-300: #d46b76;
    --color-error-200: #f1ced2;
    --color-error-100: #f6ebec;
    --color-warning-500: #6e3603;
    --color-warning-400: #fdb940;
    --color-warning-300: #f2ca57;
    --color-warning-200: #f5e8bd;
    --color-warning-100: #fff3cd;
    --type-heading-font-family:  'Open Sans', sans-serif;
    --type-heading-font-weight: Bold;
    --type-base-font-family:  'Open Sans', sans-serif;
    --type-link-color: var(--color-primary-400);
    --type-link-hover-color: var(--color-primary-500);
    --type-heading-color: var(--color-primary-400);
    --type-body-color: var(--color-neutral-600);
    --type-label-color: var(--color-neutral-500);
    --color-info-500: #052f6f;
    --color-info-400: #3a71c4;
    --color-info-300: #6999e0;
    --color-info-200: #c2d5f1;
    --color-info-100: #e0e9f7;
    --border-radius-small: 4px;
    --border-radius-base: 8px;
    --border-radius-large: 24px;
    --border-line-color: var(--color-neutral-200);
    --icon-fill-color: var(--color-secondary-400);
    --icon-badge-background-color: var(--color-primary-400);
    --icon-badge-color: var(--color-neutral-white);
    --button-border-width: 1px;
    --button-border-radius: 4px;
    --button-padding-horizontal: 16px;
    --button-padding-horizontal-small: 12px;
    --button-primary-background-color: var(--color-primary-400);
    --button-primary-background-hover-color: var(--color-primary-500);
    --button-primary-border-color: var(--color-primary-400);
    --button-primary-border-hover-color: var(--color-primary-500);
    --button-primary-color: var(--color-neutral-white);
    --button-primary-hover-color: var(--color-neutral-white);
    --button-secondary-background-color: var(--color-neutral-white);
    --button-secondary-background-hover-color: var(--color-neutral-100);
    --button-secondary-color: var(--color-primary-400);
    --button-secondary-hover-color: var(--color-primary-400);
    --button-secondary-border-color: var(--color-primary-400);
    --button-secondary-border-hover-color: var(--color-primary-500);
    --button-disabled-background-color: var(--color-neutral-200);
    --button-disabled-border-color: var(--color-neutral-200);
    --button-disabled-color: var(--color-neutral-600);
    --button-dark-secondary-color: var(--color-neutral-200);
    --button-dark-secondary-border-color: var(--color-neutral-white);
    --button-link-color: var(--color-primary-400);
    --button-link-hover-color: var(--color-primary-500);
    --input-checked-background-color: var(--color-primary-400);
    --input-checked-border-color: var(--color-primary-400);
    --input-checked-icon-color: var(--color-neutral-white);
    --Theme: P&V;
    --input-checkbox-background-color: var(--color-neutral-white);
    --input-checkbox-border-color: var(--color-neutral-400);
    --input-checkbox-border-width: 1;
    --stepper-active-color: var(--color-primary-400);
    --stepper-checked-background-color: var(--color-primary-400);
    --stepper-checked-color: var(--color-primary-100);
    --stepper-active-dark-color: var(--color-primary-100);
    --stepper-checked-dark-background-color: var(--color-primary-100);
    --stepper-checked-dark-color: var(--color-primary-400);
    --tabs-item-active-background-color: var(--color-primary-050);
    --tabs-item-active-label-color: var(--color-primary-500);
    --tabs-item-label-color: var(--color-primary-400);
    --tabs-background-color: transparent;
    --tabs-border-color: transparent;
    --tabs-border-width: 0;
    --tabs-border-radius: var(--border-radius-base);
    --tabs-item-border-radius: var(--border-radius-small);
    --progress-bar-color: var(--color-secondary-400);
    --alert-success-color: var(--color-success-500);
    --alert-success-border-color: var(--color-success-200);
    --alert-success-background-color: var(--color-success-100);
    --alert-info-color: var(--color-info-500);
    --alert-info-border-color: var(--color-info-200);
    --alert-info-background-color: var(--color-info-100);
    --alert-warning-color: var(--color-warning-500);
    --alert-warning-border-color: var(--color-warning-200);
    --alert-warning-background-color: var(--color-warning-100);
    --alert-error-color: var(--color-error-500);
    --alert-error-border-color: var(--color-error-200);
    --alert-error-background-color: var(--color-error-100);
    --alert-neutral-color: var(--color-neutral-600);
    --alert-neutral-border-color: var(--color-neutral-300);
    --alert-neutral-background-color: var(--color-neutral-200);
    --body-background-color: #fafafa;
    
    /*-<<< STOP import figma >>>-*/   
    
    
    /*-<<< START generic tokens >>>-*/   
    
    /* font-sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --h1-font-size: 1.875rem;
    --h1-font-size-mobile: 1.25rem;
    --h2-font-size: 1.25rem;
    --h2-font-size-mobile: 1rem;
    --h3-font-size: 1rem;
    --h3-font-size-mobile: 0.875rem;
    --h4-font-size: 0.875rem;
    --h4-font-size-mobile: 0.75rem;
    --h5-font-size: 0.75rem;
    --h5-font-size-mobile: 0.75rem;
    --display-1: 2.625rem;
    --display-1-mobile: 1.875rem;
    --display-2: 2.25rem;
    --display-2-mobile: 1.25rem;
    
    /* spacers */
    --spacer-1: 4px;
    --spacer-2: 8px;
    --spacer-3: 12px;
    --spacer-4: 16px;
    --spacer-5: 20px;
    --spacer-6: 24px;
    --spacer-7: 32px;
    --spacer-8: 40px;
    --spacer-9: 48px;
    
}

div[id^="pie-chart"] {
    
    /* piechart */
    --pieslice-1-color: #870930;
    --pieslice-2-color: #c38498;
    --pieslice-3-color: #dbb5c1;
    --pieslice-4-color: #004687;
    --pieslice-5-color: #ff6600;
    --pieslice-6-color: #fdb940;
    --pieslice-7-color: #788a05;
    --pieslice-8-color: #561a6d;
    --pieslice-9-color: #00838a;
    --pieslice-10-color: #4d4d4d;
    --pieslice-11-color: #dbb5c1;
    --pieslice-12-color: #ffb380;
    --pieslice-13-color: #fcda9d;
    --pieslice-14-color: #b9c280;
    --pieslice-15-color: #a88ab4;
    
    --pieslice-1-pct-end: var(--pieslice-1-pct);
    --pieslice-2-pct-end: calc(var(--pieslice-1-pct-end) + var(--pieslice-2-pct));
    --pieslice-3-pct-end: calc(var(--pieslice-2-pct-end) + var(--pieslice-3-pct));
    --pieslice-4-pct-end: calc(var(--pieslice-3-pct-end) + var(--pieslice-4-pct));
    --pieslice-5-pct-end: calc(var(--pieslice-4-pct-end) + var(--pieslice-5-pct));
    --pieslice-6-pct-end: calc(var(--pieslice-5-pct-end) + var(--pieslice-6-pct));
    --pieslice-7-pct-end: calc(var(--pieslice-6-pct-end) + var(--pieslice-7-pct));
    --pieslice-8-pct-end: calc(var(--pieslice-7-pct-end) + var(--pieslice-8-pct));
    --pieslice-9-pct-end: calc(var(--pieslice-8-pct-end) + var(--pieslice-9-pct));
    --pieslice-10-pct-end: calc(var(--pieslice-9-pct-end) + var(--pieslice-10-pct));
    --pieslice-11-pct-end: calc(var(--pieslice-10-pct-end) + var(--pieslice-11-pct));
    --pieslice-12-pct-end: calc(var(--pieslice-11-pct-end) + var(--pieslice-12-pct));
    --pieslice-13-pct-end: calc(var(--pieslice-12-pct-end) + var(--pieslice-13-pct));
    --pieslice-14-pct-end: calc(var(--pieslice-13-pct-end) + var(--pieslice-14-pct));
    --pieslice-15-pct-end: calc(var(--pieslice-14-pct-end) + var(--pieslice-15-pct));
}

.nonprod.logo {
    background-image: url(../img/logo/myPVLogo.svg);
}

.prod.logo {
    background-image: url(https://my.pv.be/documents/d/guest/mypvlogo);
}