@import url('../../Common/fonts/roboto-font/roboto-fonts.css');
@import url('../../Common/fonts/MateralIcons/materiallcons-fonts.css');
@import url('../../Common/fonts/outfit/outft-fonts.css');
@import url('../../Common/fonts/lato/lato.css');
@import url('../../Common/fonts/noto_sans/noto-sans.css');
@import url('../../Common/fonts/open_sans/open-sans.css');
@import url('../../Common/CSS/OrderType/font-awesome.min.css');
@import url('../../Common/CSS/variable.css');


:root {
    /*--header: var(--theme-color);*/
    /* --button-theme: #44AE00;
    --left_menu: #121212;
    --theme_color: #3300DE;*/
    /* Font families */
    --font-default: "Roboto", sans-serif;
    --font-roboto: "Roboto", sans-serif;
    --font-arial: "Arial", sans-serif;
    --font-outfit: "Outfit", sans-serif;
    --font-georgia: "Georgia", serif;
    --font-verdana: "Verdana", sans-serif;
    --font-comic-sans: "Comic Sans MS", cursive, sans-serif;
    --font-noto-sans: "Noto Sans", sans-serif;
    --font-lato: "Lato", sans-serif;
    --font-open-sans: "Open Sans", sans-serif;
    /*Custom variables*/
    /*--header: var(--custom-header);
    --custom-header: #ffffff;*/
    /* Font sizes */
    --font-size-xxs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 34px;
    --font-size-3xl: 48px;
    --font-size-4xl: 60px;
    --font-size-5xl: 96px;
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Line heights */
    --line-height-xs: 16px;
    --line-height-sm: 20px;
    --line-height-md: 24px;
    --line-height-lg: 28px;
    --line-height-xl: 32px;
    --line-height-2xl: 36px;
    --line-height-3xl: 56px;
    --line-height-4xl: 72px;
    --line-height-5xl: 96px;
    --line-height-6xl: 112px;
    /* Letter spacing */
    --letter-spacing-tightest: -1.5px;
    --letter-spacing-tighter: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-normal-mid1: 0.25px;
    --letter-spacing-normal-mid2: 0.5px;
    --letter-spacing-wide: 0.1px;
    --letter-spacing-wide-mid: 0.15px;
    --letter-spacing-wider: 0.18px;
    --letter-spacing-wider-mid: 0.25px;
    --letter-spacing-widest: 0.3px;
    --letter-spacing-widest-mid: 0.4px;
    --letter-spacing-extended-mid: 1.25px;
    --letter-spacing-extended: 1.5px;
    /* Spacing */
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    /* Border Radius */
    --border-radius-none: 0px;
    --border-radius-xxs: 2px;
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    --border-radius-2xl: 16px;
    --border-radius-3xl: 20px;
    --border-radius-4xl: 24px;
    --border-radius-full: 999px;
    /* Elevation */
    --elevation-none: none;
    --elevation-xs: 0px 1px 2px 0px #0A0D120D;
    --elevation-sm: 0px 1px 3px 0px #0A0D121A;
    --elevation-md: 0px 2px 4px -2px #0D121C0F, 0px 4px 6px -1px #0A0D121A;
    --elevation-lg: 0px 2px 2px -1px #0A0D120A, 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214;
    --elevation-xl: 0px 20px 24px -4px #0A0D1214, 0px 8px 8px -4px #0A0D1208, 0px 3px 3px -1.5px #0A0D120A;
    /* Colors */
    --background-primary: #fff;
    --main-bg-color: #fff;
    --token-primary: #6200EE;
    --token-surface: #000;
    --bg-light: #21212114;
    --border-color: var(--black-120);
    --text-muted: #00000099;
    --transparent: #00000000;
    --primary-color: #6200EE;
    --primary-50: #F2E7FE;
    --primary-100: #DBB2FF;
    --primary-200: #BB86FC;
    --primary-300: #985EFF;
    --primary-400: #7F39FB;
    --primary-500: #6200EE; /* main */
    --primary-600: #5600E8;
    --primary-700: #3700B3;
    --primary-800: #30009C;
    --primary-900: #23036A;
    --secondary-50: #C8FFF4;
    --secondary-100: #70EFDE;
    --secondary-200: #03DAC5;
    --secondary-300: #00C4B4;
    --secondary-400: #00B3A6;
    --secondary-500: #01A299; /* main */
    --secondary-600: #019592;
    --secondary-700: #018786;
    --secondary-800: #017374;
    --secondary-900: #005457;
    --on-primary: #ffffff;
    --on-secondary: 0,0,0;
    --on-background: #000000;
    --on-surface: #000000;
    --on-error: #ffffff;
    --color-warning-500: #B00020;
    --text-link: #2E90FA;
    --text-tertiary: #4D5761;
    --card-surface: #ffffff;
    --txt-black: #000000;
    /* On Surface*/
    --on-surface-high-emphasis: rgba(var(--on-secondary), 0.87);
    --on-surface-medium-emphasis: var(--black-600);
    --on-surface-low-emphasis: rgba(var(--on-secondary), 0.38);
    --surface-overlay: rgba(33, 33, 33, 0.08);
    /* Primary Button */
    --btn-primary-bg: #6200ee;
    --btn-primary-text: #ffffff;
    --btn-primary-border: transparent;
    --btn-primary-bg-hover: #5a00d1;
    --btn-primary-bg-active: #4c00b3;
    --btn-primary-bg-disabled: #ccc;
    --btn-primary-text-disabled: #888;
    --btn-primary-text-style-bg: transperant;
    --btn-outline-border: rgba(0, 0, 0, 0.12);
    /* GRAYS */
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #E0E0E0;
    --color-gray-400: #BDBDBD;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;
    /* Colors.Strokes */
    --stroke-primary: var(--color-gray-300);
    --stroke-secondary: var(--color-gray-200);
    --stroke-secondary-alt: rgba(0, 0, 0, 0.0800);
    --stroke-tertiary: var(--color-gray-100);
    --stroke-disabled: var(--color-gray-300);
    --stroke-disabled-subtle: var(--color-gray-200);
    --stroke-accent-primary: var(--color-secondary-blue-500);
    --stroke-warning: var(--color-warning-500);
    --stroke-success: var(--color-success-500);
    --stroke-destructive: var(--color-destructive-500);
    --stroke-brand-primary: var(--color-brand-orange-500);
    --stroke-brand-secondary: var(--color-brand-teal-500);
    --stroke-white: var(--color-gray-white);
    --stroke-black: var(--color-gray-black);
    /* Colors.States */
    --state-hover: rgba(13, 18, 28, 0.0800);
    --state-disabled: rgba(13, 18, 28, 0.1200);
    --state-press: rgba(13, 18, 28, 0.0000);
    --state-disabled-overlay: rgba(210, 214, 219, 0.4000);
    /* Text */
    --text-45: #5E5E5E;
    --text-dark: #000;
    --text-quaternary: #6C737F;
    /* Background */
    --bg-error: #B00020;
    /* Colors.Validation */
    --validation-success-50: #00BC59;
    --validation-success-95: #EAFFED;
    --white-740: #FFFFFFBD;
    --white-380: #FFFFFF61;
    --black-870: #000000DE;
    --black-600: #00000099;
    --black-380: #00000061;
    --black-120: #0000001F;
    --purple-380: #6200EE61;
    --gray-950: #0D121C;
    --gray-900: #111927;
    --base-black: #000000;
    --base-white: #FFFFFF;
    --teal-900: #005457;
    --teal-800: #017374;
    --teal-700: #018786;
    --teal-600: #019592;
    --teal-500: #01A299;
    --teal-400: #00B3A6;
    --teal-300: #00C4B4;
    --teal-200: #03DAC5;
    --teal-100: #70EFDE;
    --teal-50: #C8FFF4;
    --purple-900: #23036A;
    --purple-800: #30009C;
    --purple-700: #3700B3;
    --purple-600: #5600E8;
    --purple-500: #6200EE;
    --purple-400: #7F39FB;
    --purple-300: #985EFF;
    --purple-200: #BB86FC;
    --purple-100: #DBB2FF;
    --purple-50: #F2E7FE;
    --table-heading: #EDEDED;
    --gxs_color_10: #F4F4F4;
    --gxs_color_20: #E5E5E5;
    --panel-bg: var(--gxs_color_10);
    --form-field-bg: var(--gxs_color_10);
    --form-field-background: #fff;
    --panel-search: #fff;
    --text-white: #fff;
    --revision_completed_status: #7cfc00;
    --stroke-disabled-600: #E0E0E0 !important;
    --stroke-accent-primary: #2e90fa;
}

[data-theme='dark'] {
    --main-bg-color: #000000;
    --background-primary: #0D121C;
    --gxs_color_20: var(--color-gray-50);
    --breadcrumb: var(--color-gray-100);
    --gxs_color_0: var(--color-gray-100);
    --gxs_color_90: var(--color-gray-900);
    --gxs_color_100: var(--color-gray-800);
    --header: var(--color-gray-50);
    --on-background: #fff;
    --bg-light: #6d6d6d;
    --border-color: var(--white-380);
    --on-surface: rgba(255, 255, 255, 1);
    --token-surface: #fff;
    --on-surface-medium-emphasis: var(--white-740);
    --surface-overlay: rgb(248 248 248 / 10%);
    --on-surface-high-emphasis: rgb(255 255 255 / 74%);
    --card-surface: #111927;
    --on-secondary: rgba(255, 255, 255, 1);
    --color-gray-50: #212121;
    --color-gray-100: #424242;
    --color-gray-200: #616161;
    --color-gray-300: #757575;
    --color-gray-400: #9E9E9E;
    --color-gray-500: #BDBDBD;
    --color-gray-600: #E0E0E0;
    --color-gray-700: #EEEEEE;
    --color-gray-800: #F5F5F5;
    --color-gray-900: #FAFAFA;
    /* Colors.Strokes */
    --stroke-primary: var(--color-gray-700);
    --stroke-secondary: var(--color-gray-200);
    --stroke-secondary-alt: var(--color-gray-800);
    --stroke-tertiary: var(--color-gray-900);
    --stroke-disabled: var(--color-gray-700);
    --stroke-disabled-subtle: var(--color-gray-800);
    --stroke-accent-primary: var(--color-secondary-blue-400);
    --stroke-warning: var(--color-warning-400);
    --stroke-success: var(--color-success-400);
    --stroke-destructive: var(--color-destructive-400);
    --stroke-brand-primary: var(--color-brand-orange-400);
    --stroke-brand-secondary: var(--color-brand-teal-400);
    --stroke-white: var(--color-gray-white);
    --stroke-black: var(--color-gray-black);
    /* Colors.States */
    --state-hover: rgba(0, 0, 0, 0.0800);
    --state-disabled: rgba(0, 0, 0, 0.1200);
    --state-press: rgba(0, 0, 0, 0.2500);
    --state-disabled-overlay: rgba(214, 214, 214, 0.4000);
    /* Colors.States */
    --stroke-accent-primary: #2e90fa;
}

/*[data-theme='light'] {
    --white-740: #FFFFFFBD;
    --white-380: #FFFFFF61;
    --black-870: #000000DE;
    --black-600: #00000099;
    --black-380: #00000061;
    --black-120: #0000001F;
    --purple-380: #6200EE61;
    --gray-950: #0D121C;
    --gray-900: #111927;
    --base-black: #000000;
    --base-white: #FFFFFF;
    --teal-900: #005457;
    --teal-800: #017374;
    --teal-700: #018786;
    --teal-600: #019592;
    --teal-500: #01A299;
    --teal-400: #00B3A6;
    --teal-300: #00C4B4;
    --teal-200: #03DAC5;
    --teal-100: #70EFDE;
    --teal-50: #C8FFF4;
    --purple-900: #23036A;
    --purple-800: #30009C;
    --purple-700: #3700B3;
    --purple-600: #5600E8;
    --purple-500: #6200EE;
    --purple-400: #7F39FB;
    --purple-300: #985EFF;
    --purple-200: #BB86FC;
    --purple-100: #DBB2FF;
    --purple-50: #F2E7FE;
    --table-heading: #EDEDED;
}*/

[data-theme='dark'] {
    --white-740: rgba(255,255,255,0.74);
    --white-380: rgba(255,255,255,0.38);
    --table-heading: #252932;
    --black-870: #FFFFFFDE;
    --black-600: #FFFFFF99;
    --black-380: #FFFFFF61;
    --black-120: #FFFFFF1F;
    --purple-380: #7F39FB61;
    --gray-950: #FFFFFF;
    --gray-900: #FFFFFF;
    --base-black: #FFFFFF;
    --base-white: #0D121C;
    --teal-900: #C8FFF4;
    --teal-800: #70EFDE;
    --teal-700: #03DAC5;
    --teal-600: #00C4B4;
    --teal-500: #00B3A6;
    --teal-400: #01A299;
    --teal-300: #019592;
    --teal-200: #018786;
    --teal-100: #017374;
    --teal-50: #005457;
    --purple-900: #F2E7FE;
    --purple-800: #DBB2FF;
    --purple-700: #BB86FC;
    --purple-600: #985EFF;
    --purple-500: #7F39FB;
    --purple-400: #6200EE;
    --purple-300: #5600E8;
    --purple-200: #3700B3;
    --purple-100: #30009C;
    --purple-50: #23036A;
}


/***************************** OLD PAGES VARIABLES **************************************/


[data-theme='light'] {
    --gxs_color_10: #F4F4F4;
    --gxs_color_20: #E5E5E5;
    --panel-bg: var(--gxs_color_10);
    --form-field-bg: var(--gxs_color_10);
    --form-field-background: #fff;
    --panel-search: #fff;
}
[data-theme='dark'] {
    --color-gray-800: #F5F5F5;
    --gxs_color_65: #F5F5F5;
    --color-gray-100: #424242;
    --gxs_color_10: #F4F4F4;
    --panel-bg: var(--background-primary);
    --panel-search: #252932;
    --gxs_color_20: #212121;
    --gxs_color_0: rgb(255 255 255 / 74%);
    --on-background: #fff;
    --header: #212121;
    --left_menu: #212121;
    --header-text-color: #ffffff;
    --left-menu-text-color: #ffffff;
    --public-search-header-theme: #666666;
    --public-search-header-text-color: #ffffff;
    --theme-text-color: #ffffff;
    --breadcrumb: var(--color-gray-100);
    --gxs_color_100: var(--color-gray-800);
    --breadcrumb: var(--color-gray-100);
    --background-primary: #0D121C;
    --gxs_color_0: #5a5a5a;
    --form-field-bg: var(--surface-overlay);
    --form-field-background: var(--surface-overlay);
    --stroke-disabled-600: #E0E0E0 !important;
}

.gsx-application {
    --text-primary: var(--gxs_color_100) !important;
    --stroke-secondary: var(--gxs_color_10) !important;
    --stroke-primary: var(--color-gray-600) !important;
    --bg-primary: var(--gxs_color_0) !important;
    --stroke-disabled: var(--stroke-disabled-600) !important;
}