/* Reset */

:root {
	box-sizing: border-box;

	--breakpoint-xs: 0;
    --breakpoint-sm: 600px;
    --breakpoint-md: 960px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1920px;
}

*,
::before,
::after {
	box-sizing: inherit;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricprecision;
	text-shadow: 0 0 1px rgba(0,0,0,0.2);
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.ht-ripple-container {
	position: relative;
	overflow: hidden;
}

/* Themes */

.light {
	--app-font-family: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--app-bg-color: #fff;
	--app-color: #000;

	--header-default-color: #000;
	--header-primary-color: #fff;
	--header-accent-color: #fff;
	--header-warning-color: #fff;

	--header-default-bg-color: #fafafa;
	--header-primary-bg-color: #0d47a1;
	--header-accent-bg-color: #388e3c;
	--header-warning-bg-color: #b71c1c;

	--header-shadow: 0 2px 4px -1px #00000033, 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f;

	--sidenav-color: #f5f5f5;
	--sidenav-shadow: 0 2px 4px -1px #00000033, 0 4px 5px 0px #00000024, 0 1px 10px 0 #0000001f;
	--sidenav-resize-color: #0d47a1;	

	--list-item-font-family: Arial, Helvetica, sans-serif;

	--backdrop-color: #0000001f;

	--snackbar-rounded-bg-color: #f5f5f5;
	--snackbar-shadow: 0 2px 4px -1px #00000033, 0 4px 5px 0px #00000024, 0 1px 10px 0 #0000001f;

	--card-bg-color: #fff;
	--card-shadow: 0 11px 15px -7px #00000033, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f;
	--card-shadow-raised: 0 5px 5px -3px #00000033, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
	--card-outline-border-color: #0000001f;

	--btn-font-family: Arial, Helvetica, sans-serif;
	--btn-border-radius: 0.15rem;
	--btn-transition-duration: 0.2s;
	--btn-stroked-border: 1px solid #0000001f;
	--btn-stroked-disabled-border: 1px solid #00000042;
	--btn-raised-box-shadow: 0px 3px 1px -2px #00000033, 0px 2px 2px 0px #00000024, 0px 1px 5px 0px #0000001f;
	--btn-raised-hover-box-shadow: 0px 2px 4px -1px #00000033, 0px 4px 5px 0px #00000024, 0px 1px 10px 0px #0000001f;
	--btn-disabled-color: #9e9e9e;
	--btn-disabled-bg-color: #e0e0e0;
	--checkbox-border-color: #616161;

	--input-color: #000;
	--input-placeholder-color: #00000061;
	--input-label-color: #000000c7;
	--input-disabled-color: #00000061;
	--input-disabled-line: linear-gradient(90deg,#0000006b 0,#0000006b 33%,transparent 0);

	--select-search-bg-color: #0000001a;

	--divider-default-color: #0000002f;
	--divider-primary-color: #0d48a19f;
	--divider-accent-color: #388e3c9f;
	--divider-warning-color: #b71c1c9f;
	
	--btn-basic-default-color: #000000de;
	--btn-basic-default-focus-bg-color: #eeeeee;
	--btn-basic-default-hover-bg-color: #e0e0e0;
	--btn-basic-default-ripple-color: currentColor;
	--btn-raised-default-color: #000000de;
	--btn-raised-default-bg-color: #fafafa;
	--btn-raised-default-border: none;
	--btn-raised-default-ripple-color: currentColor;
	--btn-raised-default-focus-bg-color: #eeeeee;
	--btn-raised-default-hover-bg-color: #e0e0e0;
	--progressbar-default-stripe-color: #ffffff40;
	--checkbox-default-color: #fff;
	--checkbox-default-bg-color: #616161; 
	--card-title-raised-default-color: #000000de;
	--card-title-default-bg-color: #fafafa;
	--card-subtitle-default-color: #616161;

	--btn-basic-primary-color: #0d47a1;
	--btn-basic-primary-focus-bg-color: #0d47a10f;
	--btn-basic-primary-hover-bg-color: #0d47a11a;
	--btn-basic-primary-ripple-color: #0d47a180;
	--btn-raised-primary-color: #fff;
	--btn-raised-primary-bg-color: #0d47a1;
	--btn-raised-primary-border: none;
	--btn-raised-primary-ripple-color: #fff;
	--btn-raised-primary-focus-bg-color: #1976d2;
	--btn-raised-primary-hover-bg-color: #1565c0;
	--progressbar-primary-stripe-color: #ffffff40;
	--checkbox-primary-color: #fff;
	--checkbox-primary-bg-color: #0d47a1; 
	--card-title-primary-color: #fff;
	--card-title-primary-bg-color: #0d47a1;
	--card-subtitle-primary-color: #bdbdbd;

	--btn-basic-accent-color: #388e3c;
	--btn-basic-accent-focus-bg-color: #398e3d0f;
	--btn-basic-accent-hover-bg-color: #388e3c1a;
	--btn-basic-accent-ripple-color: #388e3c80;
	--btn-raised-accent-color: #fff;
	--btn-raised-accent-bg-color: #388e3c;
	--btn-raised-accent-border: none;
	--btn-raised-accent-ripple-color: #fff;
	--btn-raised-accent-focus-bg-color: #4caf50;
	--btn-raised-accent-hover-bg-color: #43a047;
	--progressbar-accent-stripe-color: #ffffff40;
	--checkbox-accent-color: #fff;
	--checkbox-accent-bg-color: #388e3c; 
	--card-title-accent-color: #fff;
	--card-title-accent-bg-color: #388e3c;
	--card-subtitle-accent-color: #e0e0e0;	

	--btn-basic-warning-color: #b71c1c;
	--btn-basic-warning-focus-bg-color: #b71c1c0f;
	--btn-basic-warning-hover-bg-color: #b71c1c1a;
	--btn-basic-warning-ripple-color: #b71c1c80;
	--btn-raised-warning-color: #fff;
	--btn-raised-warning-bg-color: #b71c1c;
	--btn-raised-warning-border: none;
	--btn-raised-warning-ripple-color: #fff;
	--btn-raised-warning-focus-bg-color: #d32f2f;
	--btn-raised-warning-hover-bg-color: #c62828;
	--progressbar-warning-stripe-color: #ffffff40;
	--checkbox-warning-color: #fff;
	--checkbox-warning-bg-color: #b71c1c;
	--card-title-warning-color: #fff;
	--card-title-warning-bg-color: #b71c1c;
	--card-subtitle-warning-color: #e0e0e0;	

	--chip-default-color: #000;
	--chip-primary-color: #fff;
	--chip-accent-color: #fff;
	--chip-warning-color: #fff;

	--chip-default-bg-color: #e0e0e0;
	--chip-primary-bg-color: #1976d2;
	--chip-accent-bg-color: #4caf50;
	--chip-warning-bg-color: #d32f2f;

	--indicator-default-color: #8b959c;
	--indicator-default-shadow-color-phase1: #8b959c66;
	--indicator-default-shadow-color-phase2: #8b959c00;

	--indicator-primary-color: #0d47a1;
	--indicator-primary-shadow-color-phase1: #0d47a166;
	--indicator-primary-shadow-color-phase2: #0d47a100;

	--indicator-accent-color: #388e3c;
	--indicator-accent-shadow-color-phase1: #388e3c66;
	--indicator-accent-shadow-color-phase2: #388e3c00;

	--indicator-warning-color: #b71c1c;
	--indicator-warning-shadow-color-phase1: #b71c1c66;
	--indicator-warning-shadow-color-phase2: #b71c1c00;

	--tooltip-default-color: #e0e0e0;
	--tooltip-primary-color: #fff;
	--tooltip-accent-color: #fff;
	--tooltip-warning-color: #fff;

	--tooltip-default-bg-color: #2c2c2c;
	--tooltip-primary-bg-color: #1976d2;
	--tooltip-accent-bg-color: #4caf50;
	--tooltip-warning-bg-color: #d32f2f;

	--tooltip-font-size: 0.875rem;
	--tooltip-border-radius: 0.15rem;
	--tooltip-transition-duration: 300ms;
	--tooltip-show-duration: 1s;
	--tooltip-arrow-size: 0.5rem;

	--tab-color: #0000008a;
	--tab-slider-default-color: #0000008a;
	--tab-slider-primary-color: #0d47a1;
	--tab-slider-accent-color: #388e3c;
	--tab-slider-warning-color: #b71c1c;	

	--scrollbar-track-width: 12px;
	--scrollbar-track-radius: initial;
	--scrollbar-track-opacity: 1;
	--scrollbar-track-bg-color: initial;
	--scrollbar-track-shadow: initial;
	--scrollbar-track-active-bg-color: #0000001a;
	--scrollbar-track-active-border-color: #00000033;

	--scrollbar-thumb-radius: 0.25rem;
	--scrollbar-thumb-width: 6px;
	--srollbar-thumb-opacity: 0.5;
	--scrollbar-thumb-background: gray;
	--scrollbar-thumb-shadow: initial;
	--scrollbar-thumb-active-width: 10px;
	--scrollbar-thumb-active-radius: 0.5rem;

	--switch-default-color: #000000de;
	--switch-primary-color: #0d47a1;
	--switch-accent-color: #388e3c;
	--switch-warning-color: #b71c1c;
	--switch-track-inactive: #00000061;
	--switch-track-disabled: #0000001f;
	--switch-thumb-inactive: #ffffff;
	--switch-thumb-disabled: #fafafa;
}

.dark {
	--app-font-family: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--app-bg-color: #101010;
	--app-color: #fff;

	--header-default-color: #fff;
	--header-primary-color: #fff;
	--header-accent-color: #fff;
	--header-warning-color: #fff;

	--header-default-bg-color: #424242;
	--header-primary-bg-color: #2196f3;
	--header-accent-bg-color: #26a69a;
	--header-warning-bg-color: #f44336;

	--header-shadow: none;

	--sidenav-color: #212121;
	--sidenav-shadow: none;
	--sidenav-resize-color: #2196f3;

	--list-item-font-family: Arial, Helvetica, sans-serif;

	--backdrop-color: #746d6d1f;

	--snackbar-rounded-bg-color: #212121;
	--snackbar-shadow: none;

	--card-bg-color: #212121;	
	--card-shadow: none;
	--card-shadow-raised: none;
	--card-outline-border-color: #616161;	

	--btn-font-family: Arial, Helvetica, sans-serif;
	--btn-border-radius: 0.2rem;
	--btn-transition-duration: 0.2s;
	--btn-stroked-border: 1px solid #616161;
	--btn-stroked-disabled-border: 1px solid #757575;
	--btn-raised-box-shadow: none;
	--btn-raised-hover-box-shadow: none;
	--btn-disabled-color: #ffffff4d;
	--btn-disabled-bg-color: #ffffff1f;
	--checkbox-border-color: #757575;

	--input-color: #fff;
	--input-label-color: #ffffff;
	--input-placeholder-color: #ffffff80;
	--input-disabled-color: #ffffff80;
	--input-disabled-line: linear-gradient(90deg,#ffffffb3 0,#ffffffb3 33%,transparent 0);

	--select-search-bg-color: rgba(0, 0, 0, 0.3);

	--divider-default-color: #ffffff3f;
	--divider-primary-color: #2196f39f;
	--divider-accent-color: #26a69a9f;
	--divider-warning-color: #f443369f;

	--btn-basic-default-color: #fff;
	--btn-basic-default-focus-bg-color: #75757533;
	--btn-basic-default-hover-bg-color: #75757540;
	--btn-basic-default-ripple-color: #75757580;
	--btn-raised-default-color: #fff;
	--btn-raised-default-bg-color: #424242;
	--btn-raised-default-border: none;
	--btn-raised-default-ripple-color: #fff;
	--btn-raised-default-focus-bg-color: #757575;
	--btn-raised-default-hover-bg-color: #616161;
	--progressbar-default-stripe-color: #00000040;
	--checkbox-default-color: #fff;
	--checkbox-default-bg-color: #757575; 	
	--card-title-default-color: #fff;
	--card-title-default-bg-color: #424242;
	--card-subtitle-default-color: #e0e0e0;

	--btn-basic-primary-color: #2196f3;
	--btn-basic-primary-focus-bg-color: #2196f333;
	--btn-basic-primary-hover-bg-color: #2196f340;	
	--btn-basic-primary-ripple-color: #2196f3b3;
	--btn-raised-primary-color: #fff;
	--btn-raised-primary-bg-color: #2196f3;
	--btn-raised-primary-border: none;
	--btn-raised-primary-ripple-color: #fff;
	--btn-raised-primary-focus-bg-color: #1976d2;
	--btn-raised-primary-hover-bg-color: #1e88e5;
	--progressbar-primary-stripe-color: #ffffff40;
	--checkbox-primary-color: #fff;
	--checkbox-primary-bg-color: #2196f3; 
	--card-title-primary-color: #fff;
	--card-title-primary-bg-color: #1976d2;
	--card-subtitle-primary-color: #e0e0e0;

	--btn-basic-accent-color: #26a69a;
	--btn-basic-accent-focus-bg-color: #607d8b33;
	--btn-basic-accent-hover-bg-color: #607d8b40;
	--btn-basic-accent-ripple-color: #607c8ab3;
	--btn-raised-accent-color: #fff;
	--btn-raised-accent-bg-color: #607d8b;
	--btn-raised-accent-border: none;
	--btn-raised-accent-ripple-color: #fff;
	--btn-raised-accent-focus-bg-color: #455a64;
	--btn-raised-accent-hover-bg-color: #546e7a;
	--progressbar-accent-stripe-color: #ffffff40;
	--checkbox-accent-color: #fff;
	--checkbox-accent-bg-color: #607d8b; 
	--card-title-accent-color: #fff;
	--card-title-accent-bg-color: #546e7a;
	--card-subtitle-accent-color: #e0e0e0;

	--btn-basic-warning-color: #f44336;
	--btn-basic-warning-focus-bg-color: #f4433633;
	--btn-basic-warning-hover-bg-color: #f4433640;
	--btn-basic-warning-ripple-color: #f44336b3;
	--btn-raised-warning-color: #fff;
	--btn-raised-warning-bg-color: #f44336;
	--btn-raised-warning-border: none;
	--btn-raised-warning-ripple-color: #fff;
	--btn-raised-warning-focus-bg-color: #d32f2f;
	--btn-raised-warning-hover-bg-color: #e53935;
	--progressbar-warning-stripe-color: #ffffff40;
	--checkbox-warning-color: #fff;
	--checkbox-warning-bg-color: #f44336; 
	--card-title-warning-color: #fff;
	--card-title-warning-bg-color: #d32f2f;
	--card-subtitle-warning-color: #e0e0e0;

	--chip-default-color: #fff;
	--chip-primary-color: #fff;
	--chip-accent-color: #fff;
	--chip-warning-color: #fff;

	--chip-default-bg-color: #ffffff4d;
	--chip-primary-bg-color: #1976d2;
	--chip-accent-bg-color: #455a64;
	--chip-warning-bg-color: #d32f2f;

	--indicator-default-color: #8b959c;
	--indicator-default-shadow-color-phase1: #8b959c66;
	--indicator-default-shadow-color-phase2: #8b959c00;

	--indicator-primary-color: #2196f3;
	--indicator-primary-shadow-color-phase1: #2196f366;
	--indicator-primary-shadow-color-phase2: #2196f300;

	--indicator-accent-color: #26a69a;
	--indicator-accent-shadow-color-phase1: #26a69a66;
	--indicator-accent-shadow-color-phase2: #26a69a00;

	--indicator-warning-color: #f44336;
	--indicator-warning-shadow-color-phase1: #f4433666;
	--indicator-warning-shadow-color-phase2: #f4433600;
		
	--tooltip-default-color: #e0e0e0;
	--tooltip-primary-color: #fff;
	--tooltip-accent-color: #fff;
	--tooltip-warning-color: #fff;

	--tooltip-default-bg-color: #353535;
	--tooltip-primary-bg-color: #1976d2;
	--tooltip-accent-bg-color: #4caf50;
	--tooltip-warning-bg-color: #d32f2f;

	--tooltip-font-size: 0.875rem;
	--tooltip-border-radius: 0.15rem;
	--tooltip-transition-duration: 300ms;
	--tooltip-show-duration: 1s;
	--tooltip-arrow-size: 0.5rem;

	--tab-color: #ffffff4d;
	--tab-slider-default-color: #ffffff4d;	
	--tab-slider-primary-color: #2196f3;
	--tab-slider-accent-color: #26a69a;
	--tab-slider-warning-color: #f44336;	

	--scrollbar-track-width: 12px;
	--scrollbar-track-radius: initial;
	--scrollbar-track-opacity: 1;
	--scrollbar-track-bg-color: initial;
	--scrollbar-track-shadow: initial;
	--scrollbar-track-active-bg-color: #ffffff33;
	--scrollbar-track-active-border-color: #ffffff4d;

	--scrollbar-thumb-radius: 0.25rem;
	--scrollbar-thumb-width: 6px;
	--srollbar-thumb-opacity: 0.5;
	--scrollbar-thumb-background: #ffffff99;
	--scrollbar-thumb-shadow: initial;
	--scrollbar-thumb-active-width: 10px;
	--scrollbar-thumb-active-right: 2px;

	--switch-default-color: #424242;
	--switch-primary-color: #2196f3;
	--switch-accent-color: #607d8b;
	--switch-warning-color: #f44336;
	--switch-track-inactive: #ffffff4d;
	--switch-track-disabled: #ffffff33;
	--switch-thumb-inactive: #ffffff;
	--switch-thumb-disabled: #fafafa;
}