/*variables */
:root {
	/* customizable */
	--mdc-theme-primary: #3884f8; /* blue */
	--mdc-theme-secondary: #3884f8; /* blue not currently used */
	--mdc-theme-on-primary: #fff;
	--mdc-theme-on-secondary: #fff;
	
	/* not customizable */
	--mdc-theme-text-primary-on-light: #000000de;
	--mdc-theme-text-secondary-on-light: #0000008a;
	--mdc-theme-text-primary-on-dark: #fff;
	--mdc-theme-text-secondary-on-dark: #ffffffb3;
	--mdc-theme-text-hint-on-light: #00000061;
	--mdc-theme-text-disabled-on-light: #00000061;
	--mdc-theme-text-icon-on-light: #00000061;
	--mdc-theme-text-hint-on-dark: #ffffff80;
	--mdc-theme-text-disabled-on-dark: #ffffff80;
	--mdc-theme-text-icon-on-dark: #ffffff80;
	--mdc-theme-error: #ff2525;
	--mdc-theme-warning: #e77d13;
	--mdc-theme-success:#0ced0c;
	--mdc-theme-on-error: #fff;
	--mdc-theme-custom-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
	--mdc-theme-custom-surface-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
	
/* root variables created by M4 not customizable */ 	
	--mdc-theme-tooltip-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
	--mdc-theme-tooltip-arrow-shadow-bottom: -4px -4px 2px -3px rgba(0,0,0,0.2);
	--mdc-theme-tooltip-arrow-shadow-top: 3px 3px 2px -2px rgba(0,0,0,0.3);
	--mdc-theme-tooltip-arrow-shadow-left: 3px -3px 2px -2px rgba(0,0,0,0.3);
	--mdc-theme-tooltip-arrow-shadow-right: -3px 3px 2px -2px rgba(0,0,0,0.3);

/* root-variables/styles created by M4 */
	--mdc-theme-warning: #ff9900;
}

.theme-light {
/* not customizable */	
	--mdc-theme-background: #fafafa;
	--mdc-theme-on-background: #111111;
	--mdc-theme-on-surface: #111;
	--mdc-theme-surface: #fafafa;
	--mdc-theme-text-hint-on-background: #00000061;
	--mdc-theme-text-icon-on-background: #00000061;
	--mdc-theme-text-disabled-on-background: #00000061;
	--mdc-theme-text-primary-on-background: #000000de;
	--mdc-theme-text-secondary-on-background: #0000008a;
	--mdc-theme-custom-background-accent: #00000005;
	--mdc-theme-custom-background-light: #0000000a; /* grey */
	--mdc-theme-custom-background-light-translucent: #000000cc; /* grey translucent */
	--mdc-theme-custom-background-medium: #0003;
	--mdc-theme-custom-backdrop: #fafafad9;
	--mdc-theme-custom-header: #fafafaf2;
	--mdc-theme-custom-border: #00000014; /* border-color */
	--mdc-theme-custom-border-white: #fff; /* border-color white*/
	
/* theme-light variables created by M4 not customizable */ 
	--mdc-theme-on-surface-transparent: #1111111a;
	--mdc-theme-dimmer: #fafafa80;
	--mdc-theme-disabled-background: #0000001f;
	--mdc-theme-primary-transparent: hwb(from var(--mdc-theme-primary) h w b / 20%);
	--mdc-theme-primary-alt: color-mix(in srgb, var(--mdc-theme-primary), #fff 85%);
	--mdc-theme-text-disabled-opaque: #9b9b9b;
	--mdc-theme-tooltip: #eee;
	--mdc-theme-tooltip-text: #111;
	--mdc-theme-button-primary: var(--mdc-theme-primary);
	--mdc-theme-on-button-primary: var(--mdc-theme-on-primary);
	--mdc-theme-button-secondary: var(--mdc-theme-primary-alt);
	--mdc-theme-on-button-secondary: #111;
	--mdc-theme-button-hover: color-mix(in srgb, var(--mdc-theme-primary), #000 20%);
}

.theme-dark {
/* not customizable */	
	--mdc-theme-background: #242424;
	--mdc-theme-on-background: #eeeeee; 
	--mdc-theme-on-surface:#eee;
	--mdc-theme-surface: #242424;
	--mdc-theme-text-hint-on-background: #ffffffad;
	--mdc-theme-text-icon-on-background: #ffffffde;
	--mdc-theme-text-disabled-on-background: #ffffff61;
	--mdc-theme-text-primary-on-background: #ffffffde;
	--mdc-theme-text-secondary-on-background: #ffffff8a;
	--mdc-theme-custom-backdrop: #242424bf;
	--mdc-theme-custom-header: #242424f2;
	--mdc-theme-custom-background-accent: #ffffff05;
	--mdc-theme-custom-background-light: #ffffff0a;
	--mdc-theme-custom-background-medium: #ffffff1a;
	--mdc-theme-custom-border: #ffffff29;
	--mdc-theme-custom-border-white: #ffffff29; /* border-color light*/

/* theme-dark variables created by M4 not customizable */
	--mdc-theme-on-surface-transparent: #eeeeee1a;
	--mdc-theme-dimmer: #24242480;
	--mdc-theme-disabled-background: #ffffff1f;
	--mdc-theme-primary-transparent: hwb(from var(--mdc-theme-primary) h w b / 20%);
	--mdc-theme-primary-alt: color-mix(in srgb, var(--mdc-theme-primary), #000 50%);
	--mdc-theme-text-disabled-opaque: #777;
	--mdc-theme-tooltip: #666;
	--mdc-theme-tooltip-text: #eee;
	--mdc-theme-button-primary: var(--mdc-theme-primary);
	--mdc-theme-on-button-primary: var(--mdc-theme-on-primary);
	--mdc-theme-button-secondary: var(--mdc-theme-primary-alt);
	--mdc-theme-on-button-secondary: #eeeeee; 
	--mdc-theme-button-hover: color-mix(in srgb, var(--mdc-theme-primary), #000 30%);
}