:root, html[data-theme="light"] {
    --bg-color: #fff;

    --primary-color: #e0e0e0;
    --secondary-color: #EBEFEB;

    --logo-url-pmq: url(./images/logos/logo_picturemachine4_RGB.png);
    --logo-url-pmq-rel: url(../images/logos/logo_picturemachine4_RGB_white.png);
    --logo-release-color: var(--font-color);

    --logo-url-abs: url(./images/logos/logo_abs.png);

    --acer-green: #83B81A;
    --pmq-blue: #0080C9;

    --font-color: #5E6A71;
    --font-color-dark: #4a4a4a;
    --font-color-link: var(--acer-green);
    --font-color-hover: var(--acer-green);
    --font-color-active: var(--acer-green);
    --font-color-hint: #F84C61;
    --font-color-on-acer-green: #fff;
    --font-color-on-pmq-blue: #fff;

    --font-color-widget-head: #727272;

    --header-bg: var(--acer-green);
    --header-color: #fff;
    --header-icon-bg: var(--bg-color);
    --header-icon-color: var(--font-color);

    --border-color: #ccc;
    --border-color-light: #eee;

    --btn-bg-color: #ccc;
    --btn-font-color: #2a2f31;

    --btn-big-bg: var(--primary-color);
    --btn-big-border: var(--border-color);
    --btn-big-color: var(--font-color);
    --btn-big-color-hover: var(--font-color);
    --btn-big-icon-color: var(--font-color);
    --btn-big-icon-color-hover: var(--pmq-blue);

    --btn-small-box-shadow: #e5e5e5;

    --btn-small-white-bg: var(--primary-color);
    --btn-small-white-font: #555;
    --btn-small-white-border: var(--border-color);
    --btn-small-white-icon: var(--btn-small-white-font);

    --btn-small-grey-bg: #4F5A68;
    --btn-small-grey-font: #fff;
    --btn-small-grey-border: var(--btn-small-grey-bg);
    --btn-small-grey-icon: var(--btn-small-grey-font);

    --btn-small-blue-bg: var(--color-edit);
    --btn-small-blue-font: #fff;
    --btn-small-blue-border: var(--btn-small-blue-bg);
    --btn-small-blue-icon: var(--btn-small-blue-font);

    --btn-small-red-bg: var(--color-delete);
    --btn-small-red-font: #fff;
    --btn-small-red-border: var(--btn-small-red-bg);
    --btn-small-red-icon: var(--btn-small-red-font);

    --btn-small-green-bg: var(--acer-green);
    --btn-small-green-font: #fff;
    --btn-small-green-border: var(--btn-small-green-bg);
    --btn-small-green-icon: var(--btn-small-green-font);

    --input-bg-color: #f8f8f8;
    --input-font-color: var(--font-color);

    --color-error: #dc5c5c;
    --color-delete: #DE402C;
    --color-warning: #f0d648;
    --color-edit: #0080C9;
    --color-success: var(--acer-green);
    --color-active: #9cc591;
    --color-deactive: #c68989;

    --dialog-titlebar-bg-color: transparent;
    --dialog-titlebar-font-color: #4a4a4a;
    --dialog-close-color: #4a4a4a;

    --status-color-notinit: #454D57;
    --status-color-notinit-light: #6C6C6C;
    --status-color-ok: #87ac51;
    --status-color-ok-light: #9cc591;
    --status-color-warning: #EAD91E;
    --status-color-missing: #4B90B7;
    --status-color-critical: #F74459;
    --status-color-critical-light: #c68989;
    --status-color-rejected: #DE402C;
    --status-color-pending: #f7d138;
    --status-color-accepted: var(--acer-green);
    --status-color-convert: orange;

    --dt-color-even: var(--secondary-color);
    --dt-color-odd: #F2F0F0;

    --datatable-font-color-head: var(--font-color);
    --datatable-font-color-body: var(--font-color);
    --datatable-font-color-selected: var(--font-color-widget-head);

    --datatable-border-color: var(--border-color);

    --datatable-row-color-even: var(--bg-color);
    --datatable-row-color-even-sorting: var(--datatable-row-color-odd);

    --datatable-row-color-odd: var(--secondary-color);
    --datatable-row-color-odd-sorting: #DADEDA;

    --datatable-row-color-selected: var(--primary-color);
    --datatable-row-color-selected-sorting: #CDCDCD;

    --datatable-row-iscrossclient: var(--pmq-blue);
}


html[data-theme="dark"] {
    --bg-color: #1F2933;

    --primary-color: #323F4B;
    --secondary-color: #3E4C59;

    --logo-url-pmq: url(./images/logos/logo_picturemachine4_RGB_white.png);
    --logo-url-pmq-rel: url(../images/logos/logo_picturemachine4_RGB_white.png);
    --logo-release-color: var(--font-color);

    --logo-url-abs: url(./images/logos/logo_abs_dark.png);

    --acer-green: #83B81A;
    --pmq-blue: #0080C9;

    --font-color: #C0C0C0;
    --font-color-dark: #989797;
    --font-color-link: var(--acer-green);
    --font-color-hover: var(--acer-green);
    --font-color-active: var(--acer-green);
    --font-color-on-acer-green: #fff;
    --font-color-on-pmq-blue: #fff;

    --font-color-widget-head: #fff;

    --header-bg: var(--primary-color);
    --header-color: var(--font-color);
    --header-icon-bg: var(--secondary-color);
    --header-icon-color: var(--font-color-widget-head);

    --border-color: #616E7C;
    --border-color-light: #616E7C7A;

    --btn-bg-color: inherit;
    --btn-font-color: var(--font-color);

    --btn-big-bg: var(--secondary-color);
    --btn-big-border: var(--border-color-light);
    --btn-big-color: var(--font-color);
    --btn-big-color-hover: var(--font-color);
    --btn-big-icon-color: var(--font-color);
    --btn-big-icon-color-hover: var(--pmq-blue);

    --btn-small-box-shadow: #e5e5e5;

    --btn-small-white-bg: var(--primary-color);
    --btn-small-white-font: #fff;
    --btn-small-white-border: var(--btn-small-white-bg);
    --btn-small-white-icon: var(--btn-small-white-font);

    --btn-small-grey-bg: #4F5A68;
    --btn-small-grey-font: #fff;
    --btn-small-grey-border: var(--btn-small-grey-bg);
    --btn-small-grey-icon: var(--btn-small-grey-font);

    --btn-small-blue-bg: var(--color-edit);
    --btn-small-blue-font: #fff;
    --btn-small-blue-border: var(--btn-small-blue-bg);
    --btn-small-blue-icon: var(--btn-small-blue-font);

    --btn-small-red-bg: var(--color-delete);
    --btn-small-red-font: #fff;
    --btn-small-red-border: var(--btn-small-red-bg);
    --btn-small-red-icon: var(--btn-small-red-font);

    --btn-small-green-bg: var(--acer-green);
    --btn-small-green-font: #fff;
    --btn-small-green-border: var(--btn-small-green-bg);
    --btn-small-green-icon: var(--btn-small-blue-font);

    --input-bg-color: var(--secondary-color);
    --input-font-color: var(--font-color-widget-head);

    --color-error: #dc5c5c;
    --color-delete: #DE402C;
    --color-warning: #f0d648;
    --color-edit: #0080C9;
    --color-success: var(--acer-green);
    --color-active: #9cc591;
    --color-deactive: #c68989;

    --dialog-titlebar-bg-color: transparent;
    --dialog-titlebar-font-color: #fff;
    --dialog-close-color: #fff;

    --status-color-notinit: #454D57;
    --status-color-notinit-light: #6C6C6C;
    --status-color-ok: #87ac51;
    --status-color-ok-light: #9cc591;
    --status-color-warning: #EAD91E;
    --status-color-missing: #4B90B7;
    --status-color-critical: #F74459;
    --status-color-critical-light: #c68989;
    --status-color-rejected: #DE402C;
    --status-color-pending: #f7d138;
    --status-color-accepted: var(--acer-green);
    --status-color-convert: orange;

    --dt-color-even: var(--secondary-color);
    --dt-color-odd: #F2F0F0;

    --datatable-font-color-head: var(--font-color);
    --datatable-font-color-body: var(--font-color);
    --datatable-font-color-selected: var(--font-color-widget-head);

    --datatable-border-color: var(--border-color-light);

    --datatable-row-color-even: var(--primary-color);
    --datatable-row-color-even-sorting: var(--datatable-row-color-odd);

    --datatable-row-color-odd: var(--secondary-color);
    --datatable-row-color-odd-sorting: #475765;

    --datatable-row-color-selected: var(--bg-color);
    --datatable-row-color-selected-sorting: #293643;

    --datatable-row-iscrossclient: var(--acer-green);
}