:root{
	--app-height: 100vh;
	
	--header-height: 65px;
	--footer-height: 310px;
	--app-page-height: var(--app-height) - var(--header-height);
	
	--sidebar-width: 220px;
	
	--main-color: #ff8700;
	--main-color-opacity: rgba(255, 135, 0, 0.87);
	--main-color-light: #fe9520;
	--main-color-opacity-2: rgba(255, 135, 0, 0.15);
	--admin-color: #0fb9dd;
	
	--color-blue-highlight: #0298d6;
	--color-blue-pastel: rgba(100, 210, 255, 0.15);

	--color-pink-highlight: #da16bf;
	--color-pink-pastel: #fbedf9;
	
	--color-lila-highlight: #0298d6;
	--color-lila-pastel: #edeffe;
	
	--color-yellow-highlight: var(--main-color);
	--color-yellow-pastel: rgba(255, 214, 10, 0.18);
	
	--color-orange-highlight: var(--main-color);
/*	--color-orange-pastel: rgba(250, 222, 189, 0.25);*/
/*	--color-orange-pastel: rgba(253, 202, 154, 0.15);*/
	--color-orange-pastel: rgba(253, 237, 223, 0.40);
	
	--color-green-highlight: #2fcc66;
	--color-green-pastel: rgba(27, 247, 82, 0.07);
	
	--color-red-highlight: #ff0000;
	--color-red-pastel: rgba(255, 0, 0, 0.1);
	
	
	
/*
	--color-pink-highlight: var(--color-orange-highlight);
	--color-pink-pastel: var(--color-orange-pastel);
	
	--color-lila-highlight: var(--color-orange-highlight);
	--color-lila-pastel: var(--color-orange-pastel);
	
	--color-yellow-highlight: var(--color-orange-highlight);
	--color-yellow-pastel: var(--color-orange-pastel);
	
	--color-blue-highlight: var(--color-orange-highlight);
	--color-blue-pastel: var(--color-orange-pastel);
	
	--color-green-highlight: var(--color-orange-highlight);
	--color-green-pastel: var(--color-orange-pastel);
*/
	
	--safe-area-inset-top: env(safe-area-inset-top);
  	--safe-area-inset-bottom: calc(env(safe-area-inset-bottom) + 10px);
  	--safe-area-inset-left: env(safe-area-inset-left);
  	--safe-area-inset-right: env(safe-area-inset-right);
}

body {
	
	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	
	--paragraph-line-height: 1.7;
/*	--paragraph-line-height: 1.8;*/

/*	--header-color: #1b1246;*/
	--header-color: #031043;
	--header-text-color: #fff;

	--header-text-color-2: #444444;
	--header-height: 65px;
	--header-font-size: 15.5px;
	--header-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
	--header-icon-selected-color: #000000;
	
/*	--hover-color: var(--main-color-opacity-2);*/
	--hover-color: #ffedd9; 
	--hover-color-2: #eeeeee;
	--hover-color-3: rgba(238, 238, 238, 0.70);
	
	--footer-color: #031043;
	--footer-text-color: #fff;

	--green-color: #2fcc66;
	--green-color-opacity-1: rgba(47, 204, 102, 0.25);
	--green-color-opacity-2: rgba(47, 204, 102, 0.10);
	--green-color-opacity-3: rgba(47, 204, 102, 0.75);
	--orange-color: #ff8700;
	--red-color: #ff0000;
	--blue-color: #024d9a;
	--light-blue-color: #2775F2;
	--grey-color: #b1b1b1;

	--text-color: #3d3d4e;
	--text-color-grey: #777777;
	
	--headline-color: #ffffff;
	--headline-background-color: var(--main-color);
	--border-top-color: var(--main-color);


	--shadow-elevation-0: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-elevation-1: 0px 0px 5px 0px rgba(0,0,0,0.1), 0px 0px 1px 0px rgba(0,0,0,0.1);
	--shadow-elevation-2: 0px 0px 8px 0px rgba(0,0,0,0.1), 0px 0px 1px 0px rgba(0,0,0,0.1);
	--shadow-elevation-3: 0px 0px 12px 2px rgba(0,0,0,0.1), 0px 0px 2px 0px rgba(0,0,0,0.1);
	--shadow-elevation-4: 0px 0px 24px 4px rgba(0,0,0,0.1), 0px 0px 2px 0px rgba(0,0,0,0.1);
	--shadow-box: 0px 0px 30px 5px rgba(0,0,0,0.05), 0px 0px 2px 0px rgba(255, 255, 255, 0.5);
	
	--background-body-color: #ffffff;
	--background-layer: #f8f5f2;
	--background-layer-grey: #ededed;
	--background-layer-white: #ffffff;
	
	--section-box-color: #ffffff;
	--section-box-border: #ededed;
	--box-color: #ffffff;
	--box-color-hover: #f8f8f8;
	--box-color-done: #effaf7;
	--box-color-opacity-1: rgba(255, 255, 255, 0.85);
	
	--image-loading-background-color: #eeeeee;
	
	--icon-color: #777777;
	
	--green-icon-done-background-color: #ffffff;
	--green-icon-done-shadow:  0 0 5px rgba(47, 204, 102, 0.2);
	
	--button-grey-outline-background-color: #e5e5e5;
	--button-grey-outline-background-color-hover: #e2e2e2;
	
	--input-border-color: #d6d6d6;
	--input-background-color: #fafafa;
	--input-disabled-background-color: #f1f1f1;

	--table-head-background-color: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(0,0,0,0.12) 90%, rgba(0,0,0,0) 100%);
	--table-link-hover-background-color: #ffffff;
	
	--faq-headline-color: #efefef;
	--faq-answer-color: rgba(0, 0, 0, 0.02);
	
	--segment-color: #efefef;
	
	color-scheme: light dark;
}

body.dark-theme {
	/*	DARKMODE*/

	--header-color: #21262d;
	--header-text-color: #ffffff;
	--header-text-color-2: #ffffff;
	--header-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
	--header-icon-selected-color: #ffffff;

	--hover-color: #2c3138;
	--hover-color-2: #2c3138;
	--hover-color-3: rgba(44, 49, 56, 0.70);

	--footer-color: #ff8700;
	--footer-text-color: #ffffff;

	--text-color: #c9d0d9;
	--text-color-grey: #8d98a7;

	--headline-color: #ffffff;
	--headline-background-color: #2c3138;
	--border-top-color: #2c3138;
	
	--shadow-elevation-0: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-elevation-1: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-elevation-2: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-elevation-3: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-elevation-4: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
	--shadow-box: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);

	--background-body-color: #0d1117;
	--background-layer: #0d1117;
	--background-layer-grey: #0d1117;
	--background-layer-white: #0d1117;

	--section-box-color: #161b22;
	--section-box-border: var(--background-layer);
	--box-color: #21262d;
	--box-color-hover: #2c3138;
	--box-color-done: #21262d;
	--box-color-opacity-1: rgba(33, 38, 45, 0.85);
	
	--image-loading-background-color: var(--box-color);

	--icon-color: #ffffff;

	--green-icon-done-background-color: #2c3138;
	--green-icon-done-shadow: none;
	
	--button-grey-outline-background-color: var(--box-color-hover);
	--button-grey-outline-background-color-hover: var(--hover-color-3);

	--input-border-color: var(--box-color-hover);
	--input-background-color: var(--box-color-hover);
	--input-disabled-background-color: #2c3138;

	--table-head-background-color: linear-gradient(to bottom, #21262d 0%, #21262d 90%, #ff8700 90%, #ff8700 calc(90% + 1px), rgba(0,0,0,0) calc(90% + 1px), rgba(0,0,0,0) 100%);
	--table-link-hover-background-color: #565a60;
	
	--faq-headline-color: var(--headline-background-color);
	--faq-answer-color: var(--box-color);
	
	--segment-color: var(--box-color);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        /*	DARKMODE*/

		--header-color: #21262d;
		--header-text-color: #ffffff;
		--header-text-color-2: #ffffff;
		--header-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
		--header-icon-selected-color: #ffffff;

		--hover-color: #2c3138;
		--hover-color-2: #2c3138;
		--hover-color-3: rgba(44, 49, 56, 0.70);

		--footer-color: #ff8700;
		--footer-text-color: #ffffff;

		--text-color: #c9d0d9;
		--text-color-grey: #8d98a7;

		--headline-color: #ffffff;
		--headline-background-color: #2c3138;
		--border-top-color: #2c3138;
		
		--shadow-elevation-0: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
		--shadow-elevation-1: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
		--shadow-elevation-2: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
		--shadow-elevation-3: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
		--shadow-elevation-4: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);
		--shadow-box: 0px 0px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.1);

		--background-body-color: #0d1117;
		--background-layer: #0d1117;
		--background-layer-grey: #0d1117;
		--background-layer-white: #0d1117;

		--section-box-color: #161b22;
		--section-box-border: var(--background-layer);
		--box-color: #21262d;
		--box-color-hover: #2c3138;
		--box-color-done: #21262d;
		--box-color-opacity-1: rgba(33, 38, 45, 0.85);
		
		--image-loading-background-color: var(--box-color-hover);

		--icon-color: #ffffff;

		--green-icon-done-background-color: #2c3138;
		--green-icon-done-shadow: none;
		
		--button-grey-outline-background-color: var(--box-color-hover);
		--button-grey-outline-background-color-hover: var(--hover-color-3);

		--input-border-color: var(--box-color-hover);
		--input-background-color: var(--box-color);
		--input-disabled-background-color: #2c3138;

		--table-head-background-color: linear-gradient(to bottom, #21262d 0%, #21262d 90%, #ff8700 90%, #ff8700 calc(90% + 1px), rgba(0,0,0,0) calc(90% + 1px), rgba(0,0,0,0) 100%);
		--table-link-hover-background-color: #565a60;
		
		--faq-headline-color: var(--headline-background-color);
		--faq-answer-color: var(--box-color);
		
		--segment-color: var(--box-color);
    }

}