/* ==========================================================================
   DevExpress skin family

   Palettes only. They plug into the shared component layer in theme-office.css,
   which styles anything carrying a [data-skin] attribute, so no component rule
   is repeated here.

   Each palette is derived from a chrome colour, an accent, a selection colour
   and a light/dark flag, which is what keeps 35 skins consistent with one
   another. See the generator note in the project scratch history.
   ========================================================================== */

/* dx-black */
:root[data-skin='dx-black'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #2D2D2D;
    --x-surface-3: #464646;
    --x-row-alt: #424242;

    --x-sidebar: linear-gradient(180deg, #4A4A4A 0%, #3A3A3A 100%);
    --x-title: linear-gradient(180deg, #565656 0%, #3A3A3A 100%);
    --x-header: linear-gradient(180deg, #4E4E4E 0%, #383838 100%);
    --x-total: linear-gradient(180deg, #5D5D5D 0%, #464646 100%);
    --x-chrome: linear-gradient(180deg, #616161 0%, #464646 100%);
    --x-chrome-hover: linear-gradient(180deg, #A2A2A2 0%, #6B6B6B 100%);
    --x-chrome-active: linear-gradient(180deg, #717171 0%, #535353 100%);
    --x-hover: #5A5A5A;
    --x-hover-line: #858585;

    --x-line: #5A5A5A;
    --x-line-soft: #4C4C4C;
    --x-line-strong: #7D7D7D;

    --x-ink: #F2F4F7;
    --x-ink-soft: #B4B4B4;
    --x-muted: #919191;
    --x-accent: #7A7A7A;
    --x-accent-dark: #929292;

    --x-primary: linear-gradient(180deg, #9A9A9A 0%, #7A7A7A 100%);
    --x-primary-hover: linear-gradient(180deg, #A7A7A7 0%, #878787 100%);
    --x-primary-line: #5C5C5C;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-blue */
:root[data-skin='dx-blue'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #E7F0FA;
    --x-surface-3: #F0F6FC;
    --x-row-alt: #F1F6FC;

    --x-sidebar: linear-gradient(180deg, #F3F8FD 0%, #DFEBF9 100%);
    --x-title: linear-gradient(180deg, #F5F9FD 0%, #DAE8F8 100%);
    --x-header: linear-gradient(180deg, #F0F6FC 0%, #D6E5F7 100%);
    --x-total: linear-gradient(180deg, #E2EDFA 0%, #D0E2F6 100%);
    --x-chrome: linear-gradient(180deg, #F9FBFE 0%, #E1EDF9 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #FFF2D5;
    --x-hover-line: #C7A453;

    --x-line: #A6B6C9;
    --x-line-soft: #C2D5EB;
    --x-line-strong: #7D8A98;

    --x-ink: #0E2B4C;
    --x-ink-soft: #16447A;
    --x-muted: #516E8F;
    --x-accent: #1F5FA9;
    --x-accent-dark: #184A84;

    --x-primary: linear-gradient(180deg, #5585BE 0%, #1F5FA9 100%);
    --x-primary-hover: linear-gradient(180deg, #6B95C6 0%, #356FB2 100%);
    --x-primary-line: #17477F;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-caramel */
:root[data-skin='dx-caramel'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F8F1E3;
    --x-surface-3: #FBF6ED;
    --x-row-alt: #FBF7EF;

    --x-sidebar: linear-gradient(180deg, #FCF8F1 0%, #F6ECD9 100%);
    --x-title: linear-gradient(180deg, #FCF9F4 0%, #F4E9D3 100%);
    --x-header: linear-gradient(180deg, #FBF6ED 0%, #F3E6CE 100%);
    --x-total: linear-gradient(180deg, #F7EEDD 0%, #F2E3C8 100%);
    --x-chrome: linear-gradient(180deg, #FDFBF7 0%, #F7EDDC 100%);
    --x-chrome-hover: linear-gradient(180deg, #F2D697 0%, #EABE59 100%);
    --x-chrome-active: linear-gradient(180deg, #EBC161 0%, #CCA242 100%);
    --x-hover: #F9EBCD;
    --x-hover-line: #B5903A;

    --x-line: #C5B79D;
    --x-line-soft: #E6D6B8;
    --x-line-strong: #958A77;

    --x-ink: #46300B;
    --x-ink-soft: #704D11;
    --x-muted: #89734E;
    --x-accent: #9C6B18;
    --x-accent-dark: #7A5313;

    --x-primary: linear-gradient(180deg, #B48F4F 0%, #9C6B18 100%);
    --x-primary-hover: linear-gradient(180deg, #BE9D67 0%, #A67A2F 100%);
    --x-primary-line: #755012;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-imaginary */
:root[data-skin='dx-imaginary'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EDF3F6;
    --x-surface-3: #F4F7FA;
    --x-row-alt: #F4F8FA;

    --x-sidebar: linear-gradient(180deg, #F6F9FB 0%, #E6EFF4 100%);
    --x-title: linear-gradient(180deg, #F8FAFC 0%, #E2ECF2 100%);
    --x-header: linear-gradient(180deg, #F4F7FA 0%, #DFEAF0 100%);
    --x-total: linear-gradient(180deg, #E9F0F5 0%, #DBE7EE 100%);
    --x-chrome: linear-gradient(180deg, #FAFCFD 0%, #E8F0F4 100%);
    --x-chrome-hover: linear-gradient(180deg, #BEE5F2 0%, #98D7EA 100%);
    --x-chrome-active: linear-gradient(180deg, #9CD8EB 0%, #7EBACC 100%);
    --x-hover: #E0F3F9;
    --x-hover-line: #70A5B5;

    --x-line: #AFBBC2;
    --x-line-soft: #CDDBE3;
    --x-line-strong: #858D92;

    --x-ink: #143743;
    --x-ink-soft: #20586B;
    --x-muted: #577A86;
    --x-accent: #2C7A94;
    --x-accent-dark: #225F73;

    --x-primary: linear-gradient(180deg, #5F9AAE 0%, #2C7A94 100%);
    --x-primary-hover: linear-gradient(180deg, #74A7B8 0%, #41879F 100%);
    --x-primary-line: #215C6F;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-lilian */
:root[data-skin='dx-lilian'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F3EFF6;
    --x-surface-3: #F7F5FA;
    --x-row-alt: #F8F6FA;

    --x-sidebar: linear-gradient(180deg, #F9F7FB 0%, #EFEAF4 100%);
    --x-title: linear-gradient(180deg, #FAF9FC 0%, #ECE6F2 100%);
    --x-header: linear-gradient(180deg, #F7F5FA 0%, #EAE4F0 100%);
    --x-total: linear-gradient(180deg, #F0ECF5 0%, #E7E0EE 100%);
    --x-chrome: linear-gradient(180deg, #FCFBFD 0%, #F0EBF4 100%);
    --x-chrome-hover: linear-gradient(180deg, #DDD0ED 0%, #C9B4E2 100%);
    --x-chrome-active: linear-gradient(180deg, #CBB8E4 0%, #AC99C5 100%);
    --x-hover: #EEE8F6;
    --x-hover-line: #9988AF;

    --x-line: #BBB4C2;
    --x-line-soft: #DBD3E3;
    --x-line-strong: #8D8892;

    --x-ink: #302344;
    --x-ink-soft: #4D386C;
    --x-muted: #736687;
    --x-accent: #6B4E96;
    --x-accent-dark: #533D75;

    --x-primary: linear-gradient(180deg, #8F78AF 0%, #6B4E96 100%);
    --x-primary-hover: linear-gradient(180deg, #9D8ABA 0%, #7A60A0 100%);
    --x-primary-line: #503A70;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-money-twins */
:root[data-skin='dx-money-twins'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F3F4EB;
    --x-surface-3: #F7F8F2;
    --x-row-alt: #F8F9F3;

    --x-sidebar: linear-gradient(180deg, #F9FAF5 0%, #EFF1E4 100%);
    --x-title: linear-gradient(180deg, #FAFBF7 0%, #ECEEE0 100%);
    --x-header: linear-gradient(180deg, #F7F8F2 0%, #EAECDC 100%);
    --x-total: linear-gradient(180deg, #F0F2E7 0%, #E7EAD7 100%);
    --x-chrome: linear-gradient(180deg, #FCFCFA 0%, #F0F2E6 100%);
    --x-chrome-hover: linear-gradient(180deg, #DCE7BC 0%, #C8D995 100%);
    --x-chrome-active: linear-gradient(180deg, #CADB9A 0%, #ACBC7B 100%);
    --x-hover: #EEF4DF;
    --x-hover-line: #98A76D;

    --x-line: #BBBDAC;
    --x-line-soft: #DBDECA;
    --x-line-strong: #8D8F82;

    --x-ink: #293715;
    --x-ink-soft: #425821;
    --x-muted: #6C7A58;
    --x-accent: #5C7A2E;
    --x-accent-dark: #485F24;

    --x-primary: linear-gradient(180deg, #839A60 0%, #5C7A2E 100%);
    --x-primary-hover: linear-gradient(180deg, #93A775 0%, #6C8743 100%);
    --x-primary-line: #455C22;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-my-favorite */
:root[data-skin='dx-my-favorite'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F0F4F8;
    --x-surface-3: #F5F8FB;
    --x-row-alt: #F6F8FB;

    --x-sidebar: linear-gradient(180deg, #F8FAFC 0%, #EBF0F6 100%);
    --x-title: linear-gradient(180deg, #F9FAFC 0%, #E7EEF4 100%);
    --x-header: linear-gradient(180deg, #F5F8FB 0%, #E4ECF3 100%);
    --x-total: linear-gradient(180deg, #EDF2F7 0%, #E1E9F2 100%);
    --x-chrome: linear-gradient(180deg, #FBFCFD 0%, #ECF1F7 100%);
    --x-chrome-hover: linear-gradient(180deg, #F8E0A9 0%, #F4CD77 100%);
    --x-chrome-active: linear-gradient(180deg, #F4CF7D 0%, #D6B15E 100%);
    --x-hover: #FCF0D6;
    --x-hover-line: #BE9D53;

    --x-line: #B5BDC5;
    --x-line-soft: #D4DDE6;
    --x-line-strong: #898F95;

    --x-ink: #152B44;
    --x-ink-soft: #22456C;
    --x-muted: #586E87;
    --x-accent: #2F6096;
    --x-accent-dark: #254B75;

    --x-primary: linear-gradient(180deg, #6186AF 0%, #2F6096 100%);
    --x-primary-hover: linear-gradient(180deg, #7696BA 0%, #4470A0 100%);
    --x-primary-line: #234870;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-asphalt-world */
:root[data-skin='dx-asphalt-world'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #34383C;
    --x-surface-3: #4E5358;
    --x-row-alt: #4B4F54;

    --x-sidebar: linear-gradient(180deg, #52575B 0%, #43484D 100%);
    --x-title: linear-gradient(180deg, #5D6266 0%, #43484D 100%);
    --x-header: linear-gradient(180deg, #565A5F 0%, #40454A 100%);
    --x-total: linear-gradient(180deg, #65696D 0%, #4E5358 100%);
    --x-chrome: linear-gradient(180deg, #696D71 0%, #4E5358 100%);
    --x-chrome-hover: linear-gradient(180deg, #ABB2B9 0%, #7A8691 100%);
    --x-chrome-active: linear-gradient(180deg, #7F8B95 0%, #616C77 100%);
    --x-hover: #616569;
    --x-hover-line: #919BA4;

    --x-line: #616569;
    --x-line-soft: #54585D;
    --x-line-strong: #83868A;

    --x-ink: #F2F4F7;
    --x-ink-soft: #B8B9BB;
    --x-muted: #96999B;
    --x-accent: #8FA3B5;
    --x-accent-dark: #A3B4C2;

    --x-primary: linear-gradient(180deg, #AAB9C7 0%, #8FA3B5 100%);
    --x-primary-hover: linear-gradient(180deg, #B5C2CE 0%, #9AACBC 100%);
    --x-primary-line: #6B7A88;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-office2007-black */
:root[data-skin='dx-office2007-black'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #3A3A3A;
    --x-surface-3: #555555;
    --x-row-alt: #515151;

    --x-sidebar: linear-gradient(180deg, #585858 0%, #4A4A4A 100%);
    --x-title: linear-gradient(180deg, #636363 0%, #4A4A4A 100%);
    --x-header: linear-gradient(180deg, #5C5C5C 0%, #474747 100%);
    --x-total: linear-gradient(180deg, #6B6B6B 0%, #555555 100%);
    --x-chrome: linear-gradient(180deg, #6E6E6E 0%, #555555 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #676767;
    --x-hover-line: #FFDD8E;

    --x-line: #676767;
    --x-line-soft: #5A5A5A;
    --x-line-strong: #888888;

    --x-ink: #F2F4F7;
    --x-ink-soft: #BABABA;
    --x-muted: #9A9A9A;
    --x-accent: #8C8C8C;
    --x-accent-dark: #A1A1A1;

    --x-primary: linear-gradient(180deg, #A8A8A8 0%, #8C8C8C 100%);
    --x-primary-hover: linear-gradient(180deg, #B3B3B3 0%, #989898 100%);
    --x-primary-line: #696969;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-office2007-blue */
:root[data-skin='dx-office2007-blue'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #E7F0FA;
    --x-surface-3: #F0F5FC;
    --x-row-alt: #F1F6FC;

    --x-sidebar: linear-gradient(180deg, #F3F8FC 0%, #DFEBF8 100%);
    --x-title: linear-gradient(180deg, #F5F9FD 0%, #D9E7F7 100%);
    --x-header: linear-gradient(180deg, #F0F5FC 0%, #D5E4F6 100%);
    --x-total: linear-gradient(180deg, #E2EDF9 0%, #CFE1F4 100%);
    --x-chrome: linear-gradient(180deg, #F9FBFE 0%, #E1ECF8 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #FFF2D5;
    --x-hover-line: #C7A453;

    --x-line: #A5B5C7;
    --x-line-soft: #C1D4E9;
    --x-line-strong: #7D8997;

    --x-ink: #0E2B4C;
    --x-ink-soft: #16447A;
    --x-muted: #516E8F;
    --x-accent: #1F5FA9;
    --x-accent-dark: #184A84;

    --x-primary: linear-gradient(180deg, #5585BE 0%, #1F5FA9 100%);
    --x-primary-hover: linear-gradient(180deg, #6B95C6 0%, #356FB2 100%);
    --x-primary-line: #17477F;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-office2007-green */
:root[data-skin='dx-office2007-green'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #ECF2E4;
    --x-surface-3: #F3F7EE;
    --x-row-alt: #F4F8F0;

    --x-sidebar: linear-gradient(180deg, #F6F9F2 0%, #E6EEDC 100%);
    --x-title: linear-gradient(180deg, #F7FAF4 0%, #E2EBD6 100%);
    --x-header: linear-gradient(180deg, #F3F7EE 0%, #DEE9D1 100%);
    --x-total: linear-gradient(180deg, #E8F0DF 0%, #DAE6CB 100%);
    --x-chrome: linear-gradient(180deg, #FAFCF8 0%, #E7EFDE 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #FFF2D5;
    --x-hover-line: #C7A453;

    --x-line: #AFBAA1;
    --x-line-soft: #CCDABC;
    --x-line-strong: #848D7A;

    --x-ink: #1C3311;
    --x-ink-soft: #2D521B;
    --x-muted: #5F7654;
    --x-accent: #3E7226;
    --x-accent-dark: #30591E;

    --x-primary: linear-gradient(180deg, #6C945A 0%, #3E7226 100%);
    --x-primary-hover: linear-gradient(180deg, #80A270 0%, #51803C 100%);
    --x-primary-line: #2E561C;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-office2007-pink */
:root[data-skin='dx-office2007-pink'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F9EDF2;
    --x-surface-3: #FBF4F7;
    --x-row-alt: #FCF5F7;

    --x-sidebar: linear-gradient(180deg, #FCF6F9 0%, #F7E7EE 100%);
    --x-title: linear-gradient(180deg, #FDF8FA 0%, #F6E3EB 100%);
    --x-header: linear-gradient(180deg, #FBF4F7 0%, #F5E0E8 100%);
    --x-total: linear-gradient(180deg, #F8E9EF 0%, #F4DCE5 100%);
    --x-chrome: linear-gradient(180deg, #FDFAFC 0%, #F8E9EF 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #FFF2D5;
    --x-hover-line: #C7A453;

    --x-line: #C6B0B9;
    --x-line-soft: #E8CED9;
    --x-line-strong: #96858C;

    --x-ink: #46182B;
    --x-ink-soft: #702645;
    --x-muted: #895B6E;
    --x-accent: #9C3560;
    --x-accent-dark: #7A294B;

    --x-primary: linear-gradient(180deg, #B46586 0%, #9C3560 100%);
    --x-primary-hover: linear-gradient(180deg, #BE7A96 0%, #A64970 100%);
    --x-primary-line: #752848;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-office2007-silver */
:root[data-skin='dx-office2007-silver'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EFF1F3;
    --x-surface-3: #F5F6F7;
    --x-row-alt: #F6F7F8;

    --x-sidebar: linear-gradient(180deg, #F7F8F9 0%, #EAECEF 100%);
    --x-title: linear-gradient(180deg, #F9F9FA 0%, #E6E9EC 100%);
    --x-header: linear-gradient(180deg, #F5F6F7 0%, #E4E6EA 100%);
    --x-total: linear-gradient(180deg, #ECEEF0 0%, #E0E3E7 100%);
    --x-chrome: linear-gradient(180deg, #FBFBFC 0%, #EBEDF0 100%);
    --x-chrome-hover: linear-gradient(180deg, #FFE5A9 0%, #FFD676 100%);
    --x-chrome-active: linear-gradient(180deg, #FFD77C 0%, #E0B95D 100%);
    --x-hover: #FFF2D5;
    --x-hover-line: #C7A453;

    --x-line: #B4B7BB;
    --x-line-soft: #D3D6DB;
    --x-line-strong: #888A8D;

    --x-ink: #292E34;
    --x-ink-soft: #424953;
    --x-muted: #6C7177;
    --x-accent: #5B6673;
    --x-accent-dark: #47505A;

    --x-primary: linear-gradient(180deg, #828B95 0%, #5B6673 100%);
    --x-primary-hover: linear-gradient(180deg, #939AA3 0%, #6B7581 100%);
    --x-primary-line: #444C56;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-office2010-black */
:root[data-skin='dx-office2010-black'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #363636;
    --x-surface-3: #505050;
    --x-row-alt: #4C4C4C;

    --x-sidebar: linear-gradient(180deg, #545454 0%, #454545 100%);
    --x-title: linear-gradient(180deg, #5F5F5F 0%, #454545 100%);
    --x-header: linear-gradient(180deg, #585858 0%, #424242 100%);
    --x-total: linear-gradient(180deg, #666666 0%, #505050 100%);
    --x-chrome: linear-gradient(180deg, #6A6A6A 0%, #505050 100%);
    --x-chrome-hover: linear-gradient(180deg, #FDEDBD 0%, #FBE297 100%);
    --x-chrome-active: linear-gradient(180deg, #FBE49C 0%, #DDC57D 100%);
    --x-hover: #636363;
    --x-hover-line: #FCE7A9;

    --x-line: #636363;
    --x-line-soft: #565656;
    --x-line-strong: #848484;

    --x-ink: #F2F4F7;
    --x-ink-soft: #B8B8B8;
    --x-muted: #979797;
    --x-accent: #9A9A9A;
    --x-accent-dark: #ACACAC;

    --x-primary: linear-gradient(180deg, #B2B2B2 0%, #9A9A9A 100%);
    --x-primary-hover: linear-gradient(180deg, #BCBCBC 0%, #A4A4A4 100%);
    --x-primary-line: #747474;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-office2010-blue */
:root[data-skin='dx-office2010-blue'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EBF2F8;
    --x-surface-3: #F3F7FB;
    --x-row-alt: #F4F7FB;

    --x-sidebar: linear-gradient(180deg, #F5F8FC 0%, #E5EDF6 100%);
    --x-title: linear-gradient(180deg, #F7FAFC 0%, #E0EAF4 100%);
    --x-header: linear-gradient(180deg, #F3F7FB 0%, #DDE8F3 100%);
    --x-total: linear-gradient(180deg, #E7EFF7 0%, #D8E5F2 100%);
    --x-chrome: linear-gradient(180deg, #FAFBFD 0%, #E6EEF7 100%);
    --x-chrome-hover: linear-gradient(180deg, #FDEDBD 0%, #FBE297 100%);
    --x-chrome-active: linear-gradient(180deg, #FBE49C 0%, #DDC57D 100%);
    --x-hover: #FEF6DF;
    --x-hover-line: #C4AF6F;

    --x-line: #ADB8C5;
    --x-line-soft: #CBD8E6;
    --x-line-strong: #838C95;

    --x-ink: #0E2336;
    --x-ink-soft: #163857;
    --x-muted: #51667A;
    --x-accent: #1F4E79;
    --x-accent-dark: #183D5E;

    --x-primary: linear-gradient(180deg, #557899 0%, #1F4E79 100%);
    --x-primary-hover: linear-gradient(180deg, #6B8AA7 0%, #356086 100%);
    --x-primary-line: #173A5B;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-office2010-silver */
:root[data-skin='dx-office2010-silver'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F2F4F6;
    --x-surface-3: #F7F8F9;
    --x-row-alt: #F8F8FA;

    --x-sidebar: linear-gradient(180deg, #F9FAFA 0%, #EEF0F2 100%);
    --x-title: linear-gradient(180deg, #FAFAFB 0%, #EBEEF0 100%);
    --x-header: linear-gradient(180deg, #F7F8F9 0%, #E9ECEF 100%);
    --x-total: linear-gradient(180deg, #F0F2F4 0%, #E6E9ED 100%);
    --x-chrome: linear-gradient(180deg, #FCFCFC 0%, #EFF1F3 100%);
    --x-chrome-hover: linear-gradient(180deg, #FDEDBD 0%, #FBE297 100%);
    --x-chrome-active: linear-gradient(180deg, #FBE49C 0%, #DDC57D 100%);
    --x-hover: #FEF6DF;
    --x-hover-line: #C4AF6F;

    --x-line: #BABDC0;
    --x-line-soft: #DADDE1;
    --x-line-strong: #8D8F91;

    --x-ink: #282D32;
    --x-ink-soft: #414951;
    --x-muted: #6C7176;
    --x-accent: #5A6570;
    --x-accent-dark: #464F57;

    --x-primary: linear-gradient(180deg, #828A92 0%, #5A6570 100%);
    --x-primary-hover: linear-gradient(180deg, #9299A1 0%, #6A747E 100%);
    --x-primary-line: #444C54;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-coffee */
:root[data-skin='dx-coffee'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EEE6DC;
    --x-surface-3: #F4EFE9;
    --x-row-alt: #F5F0EB;

    --x-sidebar: linear-gradient(180deg, #F7F3EE 0%, #E8DDD1 100%);
    --x-title: linear-gradient(180deg, #F8F5F1 0%, #E4D8C9 100%);
    --x-header: linear-gradient(180deg, #F4EFE9 0%, #E1D3C3 100%);
    --x-total: linear-gradient(180deg, #EAE1D5 0%, #DECEBB 100%);
    --x-chrome: linear-gradient(180deg, #FAF8F6 0%, #EAE0D4 100%);
    --x-chrome-hover: linear-gradient(180deg, #DFC4A4 0%, #CBA26F 100%);
    --x-chrome-active: linear-gradient(180deg, #CEA675 0%, #AF8856 100%);
    --x-hover: #EFE3D3;
    --x-hover-line: #9B784C;

    --x-line: #B2A392;
    --x-line-soft: #D0BFAB;
    --x-line-strong: #877B6E;

    --x-ink: #301F10;
    --x-ink-soft: #4D3119;
    --x-muted: #736253;
    --x-accent: #6B4423;
    --x-accent-dark: #53351B;

    --x-primary: linear-gradient(180deg, #8F7158 0%, #6B4423 100%);
    --x-primary-hover: linear-gradient(180deg, #9D846E 0%, #7A5739 100%);
    --x-primary-line: #50331A;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-dark-side */
:root[data-skin='dx-dark-side'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #24272A;
    --x-surface-3: #3B3E42;
    --x-row-alt: #363A3E;

    --x-sidebar: linear-gradient(180deg, #3F4246 0%, #2E3236 100%);
    --x-title: linear-gradient(180deg, #4B4F52 0%, #2E3236 100%);
    --x-header: linear-gradient(180deg, #43464A 0%, #2C3034 100%);
    --x-total: linear-gradient(180deg, #54575A 0%, #3B3E42 100%);
    --x-chrome: linear-gradient(180deg, #585B5E 0%, #3B3E42 100%);
    --x-chrome-hover: linear-gradient(180deg, #979FA6 0%, #5A6772 100%);
    --x-chrome-active: linear-gradient(180deg, #616E78 0%, #434F5A 100%);
    --x-hover: #4F5356;
    --x-hover-line: #77828B;

    --x-line: #4F5356;
    --x-line-soft: #414448;
    --x-line-strong: #75787A;

    --x-ink: #F2F4F7;
    --x-ink-soft: #B0B1B3;
    --x-muted: #8A8C8E;
    --x-accent: #7FA8C9;
    --x-accent-dark: #96B8D3;

    --x-primary: linear-gradient(180deg, #9EBDD6 0%, #7FA8C9 100%);
    --x-primary-hover: linear-gradient(180deg, #ABC6DB 0%, #8CB1CE 100%);
    --x-primary-line: #5F7E97;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-darkroom */
:root[data-skin='dx-darkroom'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #222222;
    --x-surface-3: #383838;
    --x-row-alt: #333333;

    --x-sidebar: linear-gradient(180deg, #3C3C3C 0%, #2B2B2B 100%);
    --x-title: linear-gradient(180deg, #494949 0%, #2B2B2B 100%);
    --x-header: linear-gradient(180deg, #404040 0%, #292929 100%);
    --x-total: linear-gradient(180deg, #515151 0%, #383838 100%);
    --x-chrome: linear-gradient(180deg, #555555 0%, #383838 100%);
    --x-chrome-hover: linear-gradient(180deg, #96938C 0%, #585348 100%);
    --x-chrome-active: linear-gradient(180deg, #605A50 0%, #413C31 100%);
    --x-hover: #4D4D4D;
    --x-hover-line: #757168;

    --x-line: #4D4D4D;
    --x-line-soft: #3E3E3E;
    --x-line-strong: #737373;

    --x-ink: #F2F4F7;
    --x-ink-soft: #AEAEAE;
    --x-muted: #888888;
    --x-accent: #B08D57;
    --x-accent-dark: #BEA275;

    --x-primary: linear-gradient(180deg, #C3A87F 0%, #B08D57 100%);
    --x-primary-hover: linear-gradient(180deg, #CBB490 0%, #B89868 100%);
    --x-primary-line: #846A41;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-foggy */
:root[data-skin='dx-foggy'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F1F2F4;
    --x-surface-3: #F6F7F8;
    --x-row-alt: #F7F8F8;

    --x-sidebar: linear-gradient(180deg, #F8F9FA 0%, #ECEEF0 100%);
    --x-title: linear-gradient(180deg, #F9FAFA 0%, #E9EBEE 100%);
    --x-header: linear-gradient(180deg, #F6F7F8 0%, #E6E9EC 100%);
    --x-total: linear-gradient(180deg, #EEF0F2 0%, #E3E6E9 100%);
    --x-chrome: linear-gradient(180deg, #FBFCFC 0%, #EDEFF1 100%);
    --x-chrome-hover: linear-gradient(180deg, #D6DFE3 0%, #BFCBD3 100%);
    --x-chrome-active: linear-gradient(180deg, #C1CED5 0%, #A3AFB6 100%);
    --x-hover: #EBEFF2;
    --x-hover-line: #909BA1;

    --x-line: #B7BABD;
    --x-line-soft: #D6DADD;
    --x-line-strong: #8A8D8F;

    --x-ink: #2B343A;
    --x-ink-soft: #44545C;
    --x-muted: #6E777D;
    --x-accent: #5F7480;
    --x-accent-dark: #4A5A64;

    --x-primary: linear-gradient(180deg, #85959E 0%, #5F7480 100%);
    --x-primary-hover: linear-gradient(180deg, #95A3AB 0%, #6F828D 100%);
    --x-primary-line: #475760;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-glass-oceans */
:root[data-skin='dx-glass-oceans'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #E6EDF3;
    --x-surface-3: #EFF4F7;
    --x-row-alt: #F0F5F8;

    --x-sidebar: linear-gradient(180deg, #F3F6F9 0%, #DDE8EF 100%);
    --x-title: linear-gradient(180deg, #F5F8FA 0%, #D8E4EC 100%);
    --x-header: linear-gradient(180deg, #EFF4F7 0%, #D3E1EA 100%);
    --x-total: linear-gradient(180deg, #E1EAF0 0%, #CEDDE7 100%);
    --x-chrome: linear-gradient(180deg, #F8FAFC 0%, #E0E9F0 100%);
    --x-chrome-hover: linear-gradient(180deg, #BEDDEA 0%, #98C9DE 100%);
    --x-chrome-active: linear-gradient(180deg, #9CCBDF 0%, #7EACC1 100%);
    --x-hover: #E0EEF5;
    --x-hover-line: #7099AB;

    --x-line: #A3B1BB;
    --x-line-soft: #BFCFDB;
    --x-line-strong: #7B868D;

    --x-ink: #0E2B36;
    --x-ink-soft: #164457;
    --x-muted: #516E7A;
    --x-accent: #1E5F79;
    --x-accent-dark: #174A5E;

    --x-primary: linear-gradient(180deg, #548599 0%, #1E5F79 100%);
    --x-primary-hover: linear-gradient(180deg, #6A95A7 0%, #346F86 100%);
    --x-primary-line: #16475B;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-high-contrast */
:root[data-skin='dx-high-contrast'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 0px;
    --x-inset: none;

    --x-app-bg: #000000;
    --x-surface-3: #0F0F0F;
    --x-row-alt: #0A0A0A;

    --x-sidebar: #0F0F0F;
    --x-title: #1F1F1F;
    --x-header: #141414;
    --x-total: #2E2E2E;
    --x-chrome: #242424;
    --x-chrome-hover: #333333;
    --x-chrome-active: #474747;
    --x-hover: #292929;
    --x-hover-line: #FFDE3D;

    --x-line: #292929;
    --x-line-soft: #171717;
    --x-line-strong: #575757;

    --x-ink: #F2F4F7;
    --x-ink-soft: #9E9E9E;
    --x-muted: #707070;
    --x-accent: #FFD400;
    --x-accent-dark: #FFDC2E;

    --x-primary: #FFD400;
    --x-primary-hover: #FFD91F;
    --x-primary-line: #BF9F00;
    --x-neutral: #5A6570;
    --x-neutral-line: #3E4A54;
    --x-success: #2A8241;
    --x-success-line: #1F6631;
    --x-danger-bg: #C0392B;
    --x-danger-line: #A03028;
    --x-warning-bg: #D69A22;
    --x-warning-line: #B07C15;
    --x-info-bg: #2A7FB8;
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-liquid-sky */
:root[data-skin='dx-liquid-sky'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #E9F1F6;
    --x-surface-3: #F2F6F9;
    --x-row-alt: #F3F7FA;

    --x-sidebar: linear-gradient(180deg, #F4F8FA 0%, #E2ECF2 100%);
    --x-title: linear-gradient(180deg, #F6F9FB 0%, #DDE9F0 100%);
    --x-header: linear-gradient(180deg, #F2F6F9 0%, #DAE7EF 100%);
    --x-total: linear-gradient(180deg, #E5EEF4 0%, #D5E4ED 100%);
    --x-chrome: linear-gradient(180deg, #F9FBFC 0%, #E4EEF3 100%);
    --x-chrome-hover: linear-gradient(180deg, #C4E4F2 0%, #A2D5EA 100%);
    --x-chrome-active: linear-gradient(180deg, #A6D7EB 0%, #88B8CC 100%);
    --x-hover: #E3F2F9;
    --x-hover-line: #78A3B5;

    --x-line: #AAB8C0;
    --x-line-soft: #C7D7E1;
    --x-line-strong: #808B91;

    --x-ink: #153140;
    --x-ink-soft: #214F66;
    --x-muted: #587583;
    --x-accent: #2E6E8E;
    --x-accent-dark: #24566F;

    --x-primary: linear-gradient(180deg, #6091A9 0%, #2E6E8E 100%);
    --x-primary-hover: linear-gradient(180deg, #759FB4 0%, #437C99 100%);
    --x-primary-line: #22526A;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-london-liquid-sky */
:root[data-skin='dx-london-liquid-sky'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EBEEF0;
    --x-surface-3: #F3F4F6;
    --x-row-alt: #F4F5F6;

    --x-sidebar: linear-gradient(180deg, #F5F7F8 0%, #E5E8EB 100%);
    --x-title: linear-gradient(180deg, #F7F8F9 0%, #E0E4E8 100%);
    --x-header: linear-gradient(180deg, #F3F4F6 0%, #DDE1E5 100%);
    --x-total: linear-gradient(180deg, #E7EAED 0%, #D8DEE2 100%);
    --x-chrome: linear-gradient(180deg, #FAFAFB 0%, #E6EAED 100%);
    --x-chrome-hover: linear-gradient(180deg, #CDD9E2 0%, #B0C3D1 100%);
    --x-chrome-active: linear-gradient(180deg, #B3C6D3 0%, #95A7B4 100%);
    --x-hover: #E7EDF1;
    --x-hover-line: #8494A0;

    --x-line: #ADB2B6;
    --x-line-soft: #CBD0D5;
    --x-line-strong: #83878A;

    --x-ink: #1D2830;
    --x-ink-soft: #2F3F4D;
    --x-muted: #606B73;
    --x-accent: #41586B;
    --x-accent-dark: #334553;

    --x-primary: linear-gradient(180deg, #6F808F 0%, #41586B 100%);
    --x-primary-hover: linear-gradient(180deg, #82919D 0%, #54697A 100%);
    --x-primary-line: #314250;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-mcskin */
:root[data-skin='dx-mcskin'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F4F5E7;
    --x-surface-3: #F8F9F0;
    --x-row-alt: #F8F9F1;

    --x-sidebar: linear-gradient(180deg, #FAFAF3 0%, #F0F2DF 100%);
    --x-title: linear-gradient(180deg, #FAFBF5 0%, #EEF0D9 100%);
    --x-header: linear-gradient(180deg, #F8F9F0 0%, #ECEED5 100%);
    --x-total: linear-gradient(180deg, #F2F3E2 0%, #E9ECCF 100%);
    --x-chrome: linear-gradient(180deg, #FCFCF9 0%, #F1F3E1 100%);
    --x-chrome-hover: linear-gradient(180deg, #E5EBB2 0%, #D6DF85 100%);
    --x-chrome-active: linear-gradient(180deg, #D7E08A 0%, #B9C26B 100%);
    --x-hover: #F2F5DA;
    --x-hover-line: #A4AC5F;

    --x-line: #BDBFA5;
    --x-line-soft: #DDE0C1;
    --x-line-strong: #8F907D;

    --x-ink: #31370E;
    --x-ink-soft: #4F5916;
    --x-muted: #757A51;
    --x-accent: #6E7B1F;
    --x-accent-dark: #566018;

    --x-primary: linear-gradient(180deg, #919B55 0%, #6E7B1F 100%);
    --x-primary-hover: linear-gradient(180deg, #9FA86B 0%, #7C8835 100%);
    --x-primary-line: #525C17;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-pumpkin */
:root[data-skin='dx-pumpkin'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #FBEFE3;
    --x-surface-3: #FCF5ED;
    --x-row-alt: #FDF6EF;

    --x-sidebar: linear-gradient(180deg, #FDF7F1 0%, #FAEAD9 100%);
    --x-title: linear-gradient(180deg, #FDF9F4 0%, #F9E6D3 100%);
    --x-header: linear-gradient(180deg, #FCF5ED 0%, #F8E4CE 100%);
    --x-total: linear-gradient(180deg, #FAECDD 0%, #F7E0C8 100%);
    --x-chrome: linear-gradient(180deg, #FEFBF7 0%, #FAEBDC 100%);
    --x-chrome-hover: linear-gradient(180deg, #F6CDA3 0%, #F1AF6D 100%);
    --x-chrome-active: linear-gradient(180deg, #F2B273 0%, #D39454 100%);
    --x-hover: #FBE7D2;
    --x-hover-line: #BB834B;

    --x-line: #CAB49D;
    --x-line-soft: #ECD3B8;
    --x-line-strong: #998877;

    --x-ink: #50260B;
    --x-ink-soft: #803D11;
    --x-muted: #93694E;
    --x-accent: #B25518;
    --x-accent-dark: #8B4213;

    --x-primary: linear-gradient(180deg, #C47E4F 0%, #B25518 100%);
    --x-primary-hover: linear-gradient(180deg, #CC8F67 0%, #BA662F 100%);
    --x-primary-line: #864012;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-seven */
:root[data-skin='dx-seven'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #EFF4F8;
    --x-surface-3: #F5F8FB;
    --x-row-alt: #F6F8FB;

    --x-sidebar: linear-gradient(180deg, #F7FAFC 0%, #EAF0F6 100%);
    --x-title: linear-gradient(180deg, #F9FAFC 0%, #E6EEF4 100%);
    --x-header: linear-gradient(180deg, #F5F8FB 0%, #E4ECF3 100%);
    --x-total: linear-gradient(180deg, #ECF2F7 0%, #E0E9F2 100%);
    --x-chrome: linear-gradient(180deg, #FBFCFD 0%, #EBF1F7 100%);
    --x-chrome-hover: linear-gradient(180deg, #CDE2F3 0%, #B0D1EC 100%);
    --x-chrome-active: linear-gradient(180deg, #B3D3ED 0%, #95B4CE 100%);
    --x-hover: #E7F1F9;
    --x-hover-line: #84A0B7;

    --x-line: #B4BDC5;
    --x-line-soft: #D3DDE6;
    --x-line-strong: #888F95;

    --x-ink: #13304C;
    --x-ink-soft: #1E4D79;
    --x-muted: #56738F;
    --x-accent: #2A6BA8;
    --x-accent-dark: #215383;

    --x-primary: linear-gradient(180deg, #5D8FBD 0%, #2A6BA8 100%);
    --x-primary-hover: linear-gradient(180deg, #729DC6 0%, #3F7AB1 100%);
    --x-primary-line: #20507E;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-seven-classic */
:root[data-skin='dx-seven-classic'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F2F2F2;
    --x-surface-3: #F7F7F7;
    --x-row-alt: #F7F7F7;

    --x-sidebar: linear-gradient(180deg, #F9F9F9 0%, #EEEEEE 100%);
    --x-title: linear-gradient(180deg, #FAFAFA 0%, #EBEBEB 100%);
    --x-header: linear-gradient(180deg, #F7F7F7 0%, #E8E8E8 100%);
    --x-total: linear-gradient(180deg, #EFEFEF 0%, #E5E5E5 100%);
    --x-chrome: linear-gradient(180deg, #FCFCFC 0%, #EFEFEF 100%);
    --x-chrome-hover: linear-gradient(180deg, #D9D9D9 0%, #C3C3C3 100%);
    --x-chrome-active: linear-gradient(180deg, #C6C6C6 0%, #A7A7A7 100%);
    --x-hover: #EDEDED;
    --x-hover-line: #949494;

    --x-line: #B9B9B9;
    --x-line-soft: #D9D9D9;
    --x-line-strong: #8C8C8C;

    --x-ink: #212121;
    --x-ink-soft: #353535;
    --x-muted: #646464;
    --x-accent: #4A4A4A;
    --x-accent-dark: #3A3A3A;

    --x-primary: linear-gradient(180deg, #757575 0%, #4A4A4A 100%);
    --x-primary-hover: linear-gradient(180deg, #888888 0%, #5C5C5C 100%);
    --x-primary-line: #383838;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-sharp */
:root[data-skin='dx-sharp'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 0px;
    --x-inset: none;

    --x-app-bg: #F8F8F8;
    --x-surface-3: #FAFAFA;
    --x-row-alt: #FAFAFA;

    --x-sidebar: #FDFDFD;
    --x-title: #FCFCFC;
    --x-header: #FAFAFA;
    --x-total: #DCDCDC;
    --x-chrome: #FFFFFF;
    --x-chrome-hover: #EEEEEE;
    --x-chrome-active: #E1E1E1;
    --x-hover: #EAEAEA;
    --x-hover-line: #8C8C8C;

    --x-line: #C2C2C2;
    --x-line-soft: #E4E4E4;
    --x-line-strong: #939393;

    --x-ink: #1B1B1B;
    --x-ink-soft: #2B2B2B;
    --x-muted: #5E5E5E;
    --x-accent: #3C3C3C;
    --x-accent-dark: #2F2F2F;

    --x-primary: #3C3C3C;
    --x-primary-hover: #535353;
    --x-primary-line: #2D2D2D;
    --x-neutral: #5A6570;
    --x-neutral-line: #3E4A54;
    --x-success: #2A8241;
    --x-success-line: #1F6631;
    --x-danger-bg: #C0392B;
    --x-danger-line: #A03028;
    --x-warning-bg: #D69A22;
    --x-warning-line: #B07C15;
    --x-info-bg: #2A7FB8;
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-sharp-plus */
:root[data-skin='dx-sharp-plus'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 0px;
    --x-inset: none;

    --x-app-bg: #FBFBFB;
    --x-surface-3: #FCFCFC;
    --x-row-alt: #FCFCFC;

    --x-sidebar: #FEFEFE;
    --x-title: #FDFDFD;
    --x-header: #FCFCFC;
    --x-total: #D7E5F1;
    --x-chrome: #FFFFFF;
    --x-chrome-hover: #F0F6FB;
    --x-chrome-active: #E4EFF8;
    --x-hover: #ECF4FA;
    --x-hover-line: #92A8BA;

    --x-line: #C9C9C9;
    --x-line-soft: #EBEBEB;
    --x-line-strong: #989898;

    --x-ink: #0E3250;
    --x-ink-soft: #165080;
    --x-muted: #517593;
    --x-accent: #1F6FB2;
    --x-accent-dark: #18578B;

    --x-primary: #1F6FB2;
    --x-primary-hover: #3A80BB;
    --x-primary-line: #175386;
    --x-neutral: #5A6570;
    --x-neutral-line: #3E4A54;
    --x-success: #2A8241;
    --x-success-line: #1F6631;
    --x-danger-bg: #C0392B;
    --x-danger-line: #A03028;
    --x-warning-bg: #D69A22;
    --x-warning-line: #B07C15;
    --x-info-bg: #2A7FB8;
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-springtime */
:root[data-skin='dx-springtime'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #F1F8E6;
    --x-surface-3: #F6FBF0;
    --x-row-alt: #F7FBF1;

    --x-sidebar: linear-gradient(180deg, #F8FBF3 0%, #ECF5DE 100%);
    --x-title: linear-gradient(180deg, #F9FCF5 0%, #E9F4D8 100%);
    --x-header: linear-gradient(180deg, #F6FBF0 0%, #E6F3D4 100%);
    --x-total: linear-gradient(180deg, #EEF6E1 0%, #E3F1CF 100%);
    --x-chrome: linear-gradient(180deg, #FBFDF8 0%, #EDF6E0 100%);
    --x-chrome-hover: linear-gradient(180deg, #D5ECB3 0%, #BDE186 100%);
    --x-chrome-active: linear-gradient(180deg, #C0E28C 0%, #A1C36D 100%);
    --x-hover: #EBF6DA;
    --x-hover-line: #8FAD61;

    --x-line: #B7C4A4;
    --x-line-soft: #D6E5C0;
    --x-line-strong: #8A947C;

    --x-ink: #223E0E;
    --x-ink-soft: #376316;
    --x-muted: #658151;
    --x-accent: #4C8A1E;
    --x-accent-dark: #3B6C17;

    --x-primary: linear-gradient(180deg, #77A654 0%, #4C8A1E 100%);
    --x-primary-hover: linear-gradient(180deg, #89B26A 0%, #5E9634 100%);
    --x-primary-line: #396816;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-stardust */
:root[data-skin='dx-stardust'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #2E333E;
    --x-surface-3: #474D5A;
    --x-row-alt: #434A57;

    --x-sidebar: linear-gradient(180deg, #4B515E 0%, #3B4250 100%);
    --x-title: linear-gradient(180deg, #565C68 0%, #3B4250 100%);
    --x-header: linear-gradient(180deg, #4F5562 0%, #393F4D 100%);
    --x-total: linear-gradient(180deg, #5E6470 0%, #474D5A 100%);
    --x-chrome: linear-gradient(180deg, #626873 0%, #474D5A 100%);
    --x-chrome-hover: linear-gradient(180deg, #9FA5B1 0%, #677083 100%);
    --x-chrome-active: linear-gradient(180deg, #6E7788 0%, #4F586A 100%);
    --x-hover: #5A606C;
    --x-hover-line: #828998;

    --x-line: #5A606C;
    --x-line-soft: #4D5360;
    --x-line-strong: #7E828C;

    --x-ink: #F2F4F7;
    --x-ink-soft: #B5B7BC;
    --x-muted: #91959D;
    --x-accent: #9AA9C4;
    --x-accent-dark: #ACB8CF;

    --x-primary: linear-gradient(180deg, #B2BED2 0%, #9AA9C4 100%);
    --x-primary-hover: linear-gradient(180deg, #BCC6D8 0%, #A4B2CA 100%);
    --x-primary-line: #747F93;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #63C784;
    --x-warn: #E8B65A;
    --x-bad: #F08A80;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .30);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .38);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .46);
}
/* dx-summer */
:root[data-skin='dx-summer'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #FEF8E3;
    --x-surface-3: #FEFBED;
    --x-row-alt: #FEFBEF;

    --x-sidebar: linear-gradient(180deg, #FFFBF1 0%, #FEF5D9 100%);
    --x-title: linear-gradient(180deg, #FFFCF4 0%, #FEF4D3 100%);
    --x-header: linear-gradient(180deg, #FEFBED 0%, #FDF3CE 100%);
    --x-total: linear-gradient(180deg, #FEF6DD 0%, #FDF1C8 100%);
    --x-chrome: linear-gradient(180deg, #FFFDF7 0%, #FEF6DC 100%);
    --x-chrome-hover: linear-gradient(180deg, #F9E490 0%, #F6D44F 100%);
    --x-chrome-active: linear-gradient(180deg, #F6D657 0%, #D8B738 100%);
    --x-hover: #FCF2CA;
    --x-hover-line: #BFA232;

    --x-line: #CFC49D;
    --x-line-soft: #F3E5B8;
    --x-line-strong: #9D9477;

    --x-ink: #533C05;
    --x-ink-soft: #846008;
    --x-muted: #967F48;
    --x-accent: #B8860B;
    --x-accent-dark: #906909;

    --x-primary: linear-gradient(180deg, #C9A346 0%, #B8860B 100%);
    --x-primary-hover: linear-gradient(180deg, #D0AF5E 0%, #BF9223 100%);
    --x-primary-line: #8A6408;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-valentine */
:root[data-skin='dx-valentine'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #FBEBEF;
    --x-surface-3: #FCF3F5;
    --x-row-alt: #FDF4F6;

    --x-sidebar: linear-gradient(180deg, #FDF5F7 0%, #FAE5EA 100%);
    --x-title: linear-gradient(180deg, #FDF7F9 0%, #F9E0E6 100%);
    --x-header: linear-gradient(180deg, #FCF3F5 0%, #F8DDE4 100%);
    --x-total: linear-gradient(180deg, #FAE7EC 0%, #F7D8E0 100%);
    --x-chrome: linear-gradient(180deg, #FEFAFB 0%, #FAE6EB 100%);
    --x-chrome-hover: linear-gradient(180deg, #F5C0CF 0%, #EF9CB3 100%);
    --x-chrome-active: linear-gradient(180deg, #F0A0B6 0%, #D18197 100%);
    --x-hover: #FAE1E8;
    --x-hover-line: #BA7386;

    --x-line: #CAADB4;
    --x-line-soft: #ECCBD3;
    --x-line-strong: #998388;

    --x-ink: #4C0E1F;
    --x-ink-soft: #791632;
    --x-muted: #8F5162;
    --x-accent: #A81F45;
    --x-accent-dark: #831836;

    --x-primary: linear-gradient(180deg, #BD5572 0%, #A81F45 100%);
    --x-primary-hover: linear-gradient(180deg, #C66B84 0%, #B13558 100%);
    --x-primary-line: #7E1734;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}
/* dx-xmas-blue */
:root[data-skin='dx-xmas-blue'] {
    --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --x-radius: 2px;
    --x-inset: inset 0 1px 0 rgba(255, 255, 255, .55);

    --x-app-bg: #E8EFF8;
    --x-surface-3: #F0F5FB;
    --x-row-alt: #F1F6FB;

    --x-sidebar: linear-gradient(180deg, #F4F7FB 0%, #E0EAF5 100%);
    --x-title: linear-gradient(180deg, #F6F9FC 0%, #DBE6F4 100%);
    --x-header: linear-gradient(180deg, #F0F5FB 0%, #D6E4F3 100%);
    --x-total: linear-gradient(180deg, #E3ECF6 0%, #D1E0F1 100%);
    --x-chrome: linear-gradient(180deg, #F9FBFD 0%, #E2EBF6 100%);
    --x-chrome-hover: linear-gradient(180deg, #C6DCEF 0%, #A4C7E6 100%);
    --x-chrome-active: linear-gradient(180deg, #A8C9E7 0%, #89ABC9 100%);
    --x-hover: #E3EEF7;
    --x-hover-line: #7A97B2;

    --x-line: #A6B4C4;
    --x-line-soft: #C3D3E5;
    --x-line-strong: #7E8894;

    --x-ink: #0A1F32;
    --x-ink-soft: #113250;
    --x-muted: #4D6275;
    --x-accent: #17456F;
    --x-accent-dark: #123657;

    --x-primary: linear-gradient(180deg, #4F7292 0%, #17456F 100%);
    --x-primary-hover: linear-gradient(180deg, #6684A0 0%, #2E587D 100%);
    --x-primary-line: #113453;
    --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%);
    --x-neutral-line: #3E4A54;
    --x-success: linear-gradient(180deg, #4FB069 0%, #2A8241 100%);
    --x-success-line: #1F6631;
    --x-danger-bg: linear-gradient(180deg, #E2695C 0%, #C0392B 100%);
    --x-danger-line: #A03028;
    --x-warning-bg: linear-gradient(180deg, #F3C463 0%, #D69A22 100%);
    --x-warning-line: #B07C15;
    --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%);
    --x-info-line: #21648F;

    --x-ok: #2A8241;
    --x-warn: #B07C15;
    --x-bad: #C0392B;

    --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .09);
    --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .13);
    --x-shadow-3: 0 6px 16px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   Dark members of the family: tell the browser and invert the panes the shared
   layer paints white.
   -------------------------------------------------------------------------- */
:root[data-skin='dx-black'],
:root[data-skin='dx-asphalt-world'],
:root[data-skin='dx-office2007-black'],
:root[data-skin='dx-office2010-black'],
:root[data-skin='dx-dark-side'],
:root[data-skin='dx-darkroom'],
:root[data-skin='dx-high-contrast'],
:root[data-skin='dx-stardust'] {
    color-scheme: dark;
    --surface-1: var(--x-surface-3);
    --surface-2: var(--x-surface-3);
}

:root[data-skin='dx-black'] .ss-panel,
:root[data-skin='dx-asphalt-world'] .ss-panel,
:root[data-skin='dx-office2007-black'] .ss-panel,
:root[data-skin='dx-office2010-black'] .ss-panel,
:root[data-skin='dx-dark-side'] .ss-panel,
:root[data-skin='dx-darkroom'] .ss-panel,
:root[data-skin='dx-high-contrast'] .ss-panel,
:root[data-skin='dx-stardust'] .ss-panel,
:root[data-skin='dx-black'] .box,
:root[data-skin='dx-asphalt-world'] .box,
:root[data-skin='dx-office2007-black'] .box,
:root[data-skin='dx-office2010-black'] .box,
:root[data-skin='dx-dark-side'] .box,
:root[data-skin='dx-darkroom'] .box,
:root[data-skin='dx-high-contrast'] .box,
:root[data-skin='dx-stardust'] .box,
:root[data-skin='dx-black'] .acc-card,
:root[data-skin='dx-asphalt-world'] .acc-card,
:root[data-skin='dx-office2007-black'] .acc-card,
:root[data-skin='dx-office2010-black'] .acc-card,
:root[data-skin='dx-dark-side'] .acc-card,
:root[data-skin='dx-darkroom'] .acc-card,
:root[data-skin='dx-high-contrast'] .acc-card,
:root[data-skin='dx-stardust'] .acc-card,
:root[data-skin='dx-black'] .ss-payment-box,
:root[data-skin='dx-asphalt-world'] .ss-payment-box,
:root[data-skin='dx-office2007-black'] .ss-payment-box,
:root[data-skin='dx-office2010-black'] .ss-payment-box,
:root[data-skin='dx-dark-side'] .ss-payment-box,
:root[data-skin='dx-darkroom'] .ss-payment-box,
:root[data-skin='dx-high-contrast'] .ss-payment-box,
:root[data-skin='dx-stardust'] .ss-payment-box,
:root[data-skin='dx-black'] table.table,
:root[data-skin='dx-asphalt-world'] table.table,
:root[data-skin='dx-office2007-black'] table.table,
:root[data-skin='dx-office2010-black'] table.table,
:root[data-skin='dx-dark-side'] table.table,
:root[data-skin='dx-darkroom'] table.table,
:root[data-skin='dx-high-contrast'] table.table,
:root[data-skin='dx-stardust'] table.table,
:root[data-skin='dx-black'] table.dataTable,
:root[data-skin='dx-asphalt-world'] table.dataTable,
:root[data-skin='dx-office2007-black'] table.dataTable,
:root[data-skin='dx-office2010-black'] table.dataTable,
:root[data-skin='dx-dark-side'] table.dataTable,
:root[data-skin='dx-darkroom'] table.dataTable,
:root[data-skin='dx-high-contrast'] table.dataTable,
:root[data-skin='dx-stardust'] table.dataTable,
:root[data-skin='dx-black'] .ss-table,
:root[data-skin='dx-asphalt-world'] .ss-table,
:root[data-skin='dx-office2007-black'] .ss-table,
:root[data-skin='dx-office2010-black'] .ss-table,
:root[data-skin='dx-dark-side'] .ss-table,
:root[data-skin='dx-darkroom'] .ss-table,
:root[data-skin='dx-high-contrast'] .ss-table,
:root[data-skin='dx-stardust'] .ss-table,
:root[data-skin='dx-black'] .acc-table,
:root[data-skin='dx-asphalt-world'] .acc-table,
:root[data-skin='dx-office2007-black'] .acc-table,
:root[data-skin='dx-office2010-black'] .acc-table,
:root[data-skin='dx-dark-side'] .acc-table,
:root[data-skin='dx-darkroom'] .acc-table,
:root[data-skin='dx-high-contrast'] .acc-table,
:root[data-skin='dx-stardust'] .acc-table,
:root[data-skin='dx-black'] .form-control,
:root[data-skin='dx-asphalt-world'] .form-control,
:root[data-skin='dx-office2007-black'] .form-control,
:root[data-skin='dx-office2010-black'] .form-control,
:root[data-skin='dx-dark-side'] .form-control,
:root[data-skin='dx-darkroom'] .form-control,
:root[data-skin='dx-high-contrast'] .form-control,
:root[data-skin='dx-stardust'] .form-control {
    background-color: var(--x-surface-3);
    color: var(--x-ink);
}