@media all {
    :root {
        --screenwd: 100vw; /*Calculated by JS in realtime to consider scrollbar */
        --content-maxw-default: 1350px;
        --content-maxw: var(--content-maxw-default);
        --content-med-maxw: 1350px;
        --content-big-maxw: 1450px;
        --content-big2-maxw: 1520px;
        --content-bigger-maxw: 1600px;
        --content-bigger2-maxw: 1800px;

        --h-xs: 4px;

        --v-sm: 4px;
        --h-sm: 8px;

        --v-ms: 10px;
        --h-ms: 12px;

        --v-m: 11px;
        --h-m: 17px;

        --v-l: 16px;
        --h-l: 24px;

        --v-x: 32px;
        --h-x: 32px;

        --hpad: var(--h-m);
        --hpad2: var(--h-l);

        --v-bt: var(--v-m); /*this also aligns with big input like Search*/
        --h-bt: var(--h-m);
        --h-bt-icon: 15px;

        --v-input: 10px;
        --h-input: 8px;

        --bootstrap: 15px;
        --bootstrap-negative: -15px;

        --v-interitem-sm: 8px;
        --v-interitem-m: 12px;
        --v-interitem: 16px;
        --v-interitem-ml: 20px;
        --v-interitem-l: 24px;
        --v-interitem-x: 64px;
        --v-interblock: 28px;
        --v-interblock2: 32px;
        --v-interblock4: 40px;
        --v-inter-section: 32px;
        --v-block: 12px;
        --h-block: 28px;
        --v-block-content: var(--v-block);
        --h-interitem: 20px;
        --h-interitem-l: 28px;
        /*--h-block-content: var(--bootstrap);*/

        --pad-sm: var(--v-sm) var(--h-sm);
        --pad-m: var(--v-m) var(--h-m);
        --pad-popup: var(--v-l) var(--h-m);
        --pad-bt: var(--v-bt) var(--h-bt);
        --pad-block-title: 15px var(--h-block);
        --pad-block-content: var(--v-block) var(--h-block);
        --pad-wrap: var(--v-x) var(--h-block);
        --pad-inputs: var(--v-input) var(--h-input);
        --pad-table: var(--v-l) var(--h-sm);
        --pad-table-sm: var(--v-m) var(--h-sm);
        --pad-tag: 0.32em 0.64em;

        --f-title-page: 26px;
        --f-title-block: 17px;
        --f-l: 16px;
        --f: 14px;
        --f-sm: 12px;
        --f-xs: 10px;
        --f-inputs: var(--f);
        --i: 20px;
        --i-sm: 12px;
        --i-xs: 10px;
        --i-m: 16px;
        --fbtn: 14px;
        --fbtn-icon: 14px;
        --fs: 12px;
        --ftiny: 10px;
        --ftags: var(--ftiny);

        --fw-light: 300;

        --c-main: #0F2A48;
        --c-main-active: #0955c1;
        --c-pale: #8A9099;
        --c-medium: #868a91;
        --c-pale2: #b0bac8;
        --c-paler: #cdd8e7;
        --c-light: #e8e9eb;
        --c-lighter-transp: rgba(232, 232, 232, 0.5);
        --c-gray: #8A9099;
        --c-green: #00b299;
        --c-green-b: #00d18f;
        --c-dblue: #3B527A;
        --c-mblue: #455378; /* ex. pict on orange-pale */
        --c-orange-red: #d77b21;
        --c-orange: #F7CE5E;
        --c-orange-d: #f79f5e;
        --c-rose-d:	#ea42ed; /**/
        --bg-action: var(--c-main);
        --bg-active: var(--c-main-active);
        --bg-content: #F6FAF9;
        --bg-green: var(--c-green);
        --bg-green-pale: #B2E8E0;
        --bg-green-b-pale: #baffe0;
        --bg-blue: var(--c-blue);
        --bg-blue-pale: #cce9ff;
        --bg-orange: var(--c-orange);
        --bg-orange-pale: #FFF0CC;
        --bg-orange-d-pale: #fff0e5;
        --bg-red-pale: #ffcccc;
        --bg-red-paler: #fdebeb;
        --bg-rose-pale: #ffccf7;
        --bg-gray: #F8F8F8;
        --bg-selected: var(--c-light);
        --bg-light: #F8F8F8;
        --bw: #FFFFFF;

        /*legend colors:*/
        --c-l-orange: #FF965D;
        --c-l-yellow: #FFD054;
        --c-l-gray: var(--c-gray);
        --c-l-blue: var(--c-main); /*#0F2A48*/
        --c-l-lblue: #1CA4FE;
        --c-l-green: 20A144;

        --color: var(--c-main); /* for charts etc. */
        --c-color1: #ff965d;
        --c-color2: #ffd054;
        --c-color3: #8a9099;
        --c-color4: #0f2a48;
        --c-color5: #1ca4fe;
        --c-color6: #20a144;
        --c-color7: #1be3cf;
        --c-color8: #c45dc5;

        --border-light: 1px solid var(--c-light);
        --border-radius: 15px;
        --border-radius-sm: 10px;
        --border-radius-tiny: 4px;
        --shadow-green: 0 6px 16px -4px rgba(33, 174, 145, 0.16);
        --shadow-green-sm: 0 6px 12px -8px rgba(33, 174, 145, 0.16);
    }

    /* ex. chart legend */
    .color-v4 {
        --color: var(--c-main);

        --c-ooh     : var(--color);
        --c-dooh    : var(--color);
        --c-street  : var(--color);
        --c-digital : var(--color);
        --c-presse  : var(--color);
        --c-radio   : var(--color);
        --c-tv      : var(--color);
        --c-cinema  : var(--color);
        --c-levi1   : var(--color);
        --c-levi2   : var(--color);
        --c-levi3   : var(--color);
        --c-levi4   : var(--color);
        --c-levi5   : var(--color);
        --c-levi6   : var(--color);
    }
    .color-v4[data-ind="1"], .color-v4:not([data-ind]):nth-child(8n+1) { --color: var(--c-color1); }
    .color-v4[data-ind="2"], .color-v4:not([data-ind]):nth-child(8n+2) { --color: var(--c-color2); }
    .color-v4[data-ind="3"], .color-v4:not([data-ind]):nth-child(8n+3) { --color: var(--c-color3); }
    .color-v4[data-ind="4"], .color-v4:not([data-ind]):nth-child(8n+4) { --color: var(--c-color4); }
    .color-v4[data-ind="5"], .color-v4:not([data-ind]):nth-child(8n+5) { --color: var(--c-color5); }
    .color-v4[data-ind="6"], .color-v4:not([data-ind]):nth-child(8n+6) { --color: var(--c-color6); }
    .color-v4[data-ind="7"], .color-v4:not([data-ind]):nth-child(8n+7) { --color: var(--c-color7); }
    .color-v4[data-ind="8"], .color-v4:not([data-ind]):nth-child(8n+8) { --color: var(--c-color8); }


    .marg-sm        { margin: var(--pad-sm); }
    .marg-top-sm    { margin-top: var(--v-sm); }
    .marg-bottom-sm { margin-bottom: var(--v-sm); }
    .marg-left-sm   { margin-left: var(--h-sm); }
    .marg-left-m   { margin-left: var(--h-m); }
    .marg-right-sm  { margin-right: var(--h-sm); }
    .marg-right-sm-i  { margin-right: var(--h-sm) !important; }
    .marg-right-m  { margin-right: var(--h-m); }
    .marg-right-m-i  { margin-right: var(--h-m) !important; }
    .pad-sm         { padding: var(--pad-sm); }
    .pad-top-sm     { padding-top: var(--v-sm); }
    .pad-bottom-sm  { padding-bottom: var(--v-sm); }
    .pad-left-sm    { padding-left: var(--h-sm); }
    .pad-right-sm   { padding-right: var(--h-sm); }
    .pad-h-block    { padding-left: var(--h-block); padding-right: var(--h-block); }

    .pad-bootstrap { padding-left: var(--bootstrap); padding-right: var(--bootstrap); }

    .no-pad-first-child:first-child { padding-top: 0 !important; }

    .vtop { vertical-align: top; }
    .vmiddle { vertical-align: middle; }
    .vbottom { vertical-align: bottom; }

    .f-title-page { font-size: var(--f-title-page); }
    .f-title-block { font-size: var(--f-title-block); }
    .f-l { font-size: var(--f-l); }
    .f-main { font-size: var(--f); }
    .f-sm { font-size: var(--f-sm); }
    .f-xs { font-size: var(--f-xs); }

    body .bg-content { background-color: var(--bg-content); }
    body .bg-gray { background-color: var(--bg-gray); }
    body .bg-green { background-color: var(--bg-green); }
    body .bg-green-pale { background-color: var(--bg-green-pale); }
    body .bg-orange { background-color: var(--bg-orange); }
    body .bg-orange-pale { background-color: var(--bg-orange-pale); }

    body .text-pale { color: var(--c-pale); }

    body .border-radius { border-radius: var(--border-radius); }
    body .noborder { border: none !important; }
}

@media (min-width: 768px) {
    .md-border-right {
        border-right: var(--border-light);
    }
}