:root {
	--table_bg: #dddddd;
	--table_row_2n_bg: #eeeeee;

	--state_color: #1eb080;
	--target_color: #ff445f;
	--demand_color: #f7d43f;
	--consumption_color: #ffa528;
	--storage_color: #ccccff;
	--products_color: #bfece2;
	--recipes_color: #0bdeee;
	--shopping_list_color: #ff6fc0;
	
	--fat_color: #e98b8b;
	--carbs_color: #42b3a7;
	--muscle_color: #2d6f8e;
	
	--circle_diameter: 400px;	
	--circle_radius: 200px;
	--circle_box_font_small: 10px;
	--circle_box_background: #cdcdcd;
}

body {
	background: #f9f9f9;
}

span {
	margin: 5px;
}

button {
	width: 45px;
	height: 45px;
	font-size: 30px;
	text-align: center;
	vertical-align: middle;
	margin: 5px;
}

#wg_Menu_content button {
	width: 100px;
}

input {
	height: 45px;
	vertical-align: middle;
	margin: 5px;
}

select {
	height: 45px;
	vertical-align: middle;
	margin: 5px;
}

table {
	width: 100%;
}

td {
	text-align: center;
}

.datatable_header {
	width: 60px;
}

.graph_scale_text {
	font-size: 15px;
	padding: 2px;
	background: #eeeeee;
	border-radius: 5px;
}

/* NUMBER ENTRY */

.number_entry {
	table-layout: fixed;
	border-collapse: collapse;
}

.number_entry tr {
	padding: 0 !important;
	margin: 0 !important;
}

.number_entry td {
	padding: 0 !important;
	margin: 0 !important;
}

.number_entry button {
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px groove grey;
}

/* MENU */

.circle_menu_img {
	margin-top: -3px;
	width: 20px;
}

.circle_menu_img_tb_corr {
	margin-top: -1px;
}

.menu_user_state {
	background: var(--state_color) !important;
}

.menu_user_target {
	background: var(--target_color) !important;
}

.menu_demand {
	background: var(--demand_color);
}

.menu_consumption {
	background: var(--consumption_color);
}

.menu_storage {
	background: var(--storage_color);
}

.menu_products {
	background: var(--products_color);
}

.menu_recipes {
        background: var(--recipes_color);
}

.menu_shopping_list {
        background: var(--shopping_list_color);
}

/* CIRCLE VIEW */

#circle_view {
	position: relative;
	width: var(--circle_diameter);
	height: var(--circle_diameter);
	margin: auto;
}

#circle_view_bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.circle_view_progressbar_top {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: var(--circle_radius);
        border-top-left-radius: var(--circle_radius);
        border-top-right-radius: var(--circle_radius);
}

.circle_view_progressbar_bottom {
        position: absolute;
        top: var(--circle_radius);
        left: 0px;
        width: 100%;
        height: var(--circle_radius);
        border-bottom-left-radius: var(--circle_radius);
        border-bottom-right-radius: var(--circle_radius);
}

.circle_view_progressbar_bg {
		background: #c3c3c8;
}

#circle_view_progressbar_target_line {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: var(--circle_diameter);
	border-radius: var(--circle_radius);
	background: black;
}

#circle_view_box_top {
	position: absolute;
	top: 16.5%;
	left: 40%;
	width: 20%;
	text-align: center;
	margin: 0px;
	font-weight: bold;
}

#circle_view_box_bottom {
	position: absolute;
	bottom: 16.5%;
	left: 40%;
	width: 20%;
	text-align: center;
	margin: 0px;
	font-weight: bold;
}

#circle_view_box_center {
	position: absolute;
	left: 102px;
	top: 102px;
	width: 196px;
	height: 196px;
	display: table;
}

.circle_view_box_left {
	position: absolute;
	right: 80%;
	font-size: var(--circle_box_font_small);
	font-weight: bold;
}

.circle_view_box_right {
	position: absolute;
	left: 80%;
	font-size: var(--circle_box_font_small);
	font-weight: bold;
}

#circle_view_box_left_0 {
	top: 38.5%;
}

#circle_view_box_right_0 {
	top: 38.5%;
}

#circle_view_box_left_1 {
	top: 48.5%;
}

#circle_view_box_right_1 {
	top: 48.5%;
}

#circle_view_box_left_2 {
	top: 58.5%;
}

#circle_view_box_right_2 {
	top: 58.5%;
}

/* USER STATE */

.user_state input {
        height: 45px;
        max-width: 60px;
        text-align: center;
        vertical-align: middle;
}

.user_target input {
        height: 45px;
        max-width: 60px;
        text-align: center;
        vertical-align: middle;
}

.user_state tr:nth-child(2n+4) {
	background: var(--table_row_2n_bg);
}

.pal_table tr:nth-child(2n+2) {
	background: var(--table_bg);
}

/* USER TARGET */

.user_target tr:nth-child(2n+3) {
	background: var(--table_row_2n_bg);
}

/* CONSUMPTION */
.consumption select {
	height: 45px;
        max-width: 360px;
        vertical-align: middle;
}

.consumption input {
	height: 45px;
        text-align: center;
        vertical-align: middle;
}

.consumption td:last-child {
	text-align: right;
}

#Consumption_consumption_calc_table {
	border-spacing: 0px;
	border-collapse: collapse;
	background: var(--table_bg);
}

#Consumption_consumption_calc_table td {
	padding: 5px;
}


#Consumption_consumption_calc_table tr:nth-child(0n+2) td {
	font-size: 20px;
	font-weight: bold;
	border-bottom: 2px solid black;
}

#Consumption_consumption_calc_table tr td:nth-child(-n+7) {
	background: var(--demand_color);
}

#Consumption_consumption_calc_table tr td:nth-child(-n+5) {
        background: var(--consumption_color);
}

#Consumption_consumption_calc_table tr td:nth-child(-n+1) {
        background: var(--table_bg);
}

#Consumption_consumption_calc_table tr:nth-child(0n+6) td, #Consumption_consumption_calc_table tr:nth-child(0n+1) td {
        background: var(--table_bg);
}

#Consumption_consumption_calc_table tr:first-child td {
        font-weight: bold;
	border-top: 1px solid black;
	border-bottom: 2px solid black;
}

#Consumption_consumption_calc_table tr:nth-child(0n+5) td, #Consumption_consumption_calc_table tr:nth-child(0n+6) td {
        border-bottom: 2px solid black;
}

#Consumption_consumption_calc_table tr:nth-child(0n+7) td {
        border: 0px solid black;
}

#Consumption_consumption_calc_table td:first-child {
        font-weight: bold;
	border-left: 2px solid black;
	border-right: 2px solid black;
}

#Consumption_consumption_calc_table td {
	text-align: left;
	border-right: 1px solid black;
}

#Consumption_consumption_calc_table tr.consumption_not_calculated td {
	border: 0px;
        background: var(--table_bg);
}

#Consumption_consumption_calc_table tr.consumption_calculated td {
	border: 1px solid black;
}

#Consumption_consumption_ProductsId {
	background: var(--storage_color);
}

.consumption tr:nth-child(2n+5) {
        background: var(--table_row_2n_bg);
}

/* CONSUMPTION CIRCLE */

#consumption_circle_nutrition_container {
		postiion: relavive;
}

.consumption_circle_nutrition_box {
        position: absolute;
        width: 20%;
        text-align: center;
        padding: 1%;
        margin: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: var(--circle_box_font_small);
        font-weight: bold;
        background: var(--circle_box_background);
        border: 1px solid black;
}

.consumption_circle_nutrition_box_tgt {
        position: absolute;
        width: 20%;
        text-align: center;
        padding: 1%;
        margin: 0px;
        font-size: var(--circle_box_font_small);
        font-weight: bold;
		border-radius: 10px;
		border: 1px solid black;
		background: var(--circle_box_background);
}

#consumption_circle_nutrition_fat_box {
        bottom: 5%;
        left: 10%;
}

#consumption_circle_nutrition_fat_box_tgt {
        bottom: 75%;
        left: 10%;
}

#consumption_circle_nutrition_carbs_box {
        bottom: 5%;
        left: 40%;
}

#consumption_circle_nutrition_carbs_box_tgt {
        bottom: 75%;
        left: 40%;
}

#consumption_circle_nutrition_protein_box {
        bottom: 5%;
        left: 70%;
}

#consumption_circle_nutrition_protein_box_tgt {
        bottom: 75%;
        left: 70%;
}

.consumption_circle_nutrition_ind {
	position: absolute;
	width: 20%;
	padding: 1%;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	border: 1px solid black;
}

#consumption_circle_nutrition_fat_box_ind {
	bottom: 13%;
	left: 10%;
	background: var(--fat_color);
}

#consumption_circle_nutrition_carbs_box_ind {
    bottom: 13%;
    left: 40%;
	background: var(--carbs_color);
}

#consumption_circle_nutrition_protein_box_ind {
    bottom: 13%;
    left: 70%;
	background: var(--muscle_color);
}

.consumption_circle_nutrition_img {
	position: absolute;
	width: 20%;
	height: 20%;
	padding: 1%;
}

#consumption_circle_nutrition_fat_img {
	top: 45%;
	left: 10%;
}

#consumption_circle_nutrition_carbs_img {
    top: 45%;
    left: 40%;
}

#consumption_circle_nutrition_protein_img {
    top: 45%;
    left: 70%;
}

#consumption_circle_nutrition_target_line {
	position: absolute;
	left: -1px;
	bottom: 78%;
	width: 100%;
	height: 1px;
	border: 2px solid black;
	background: #000000;
}

/* STORAGE */
.storage input {
	height: 45px;
        max-width: 60px;
        text-align: center;
        vertical-align: middle;
}

#Storage_storage_ProductsId, #Storage_storage_ProductsSourceId, #Storage_storage_ProductsId_input, #Storage_storage_ProductsId_list {
	height: 45px;
	min-width: 250px;
	max-width: 350px;
	vertical-align: middle;
}

#Storage_storage_ProductsId_input {
	background: var(--products_color);
}

#Storage_storage_ProductsSourceId {
	background: var(--shopping_list_color);
}

.storage tr:nth-child(2n+3) {
        background: var(--table_row_2n_bg);
}


/* PRODUCTS */
.products input {
        height: 45px;
        max-width: 60px;
        text-align: center;
        vertical-align: middle;
}

#Products_products_Name {
        min-width: 300px;
        max-width: 360px;
}

.products tr:nth-child(2n+3) {
        background: var(--table_row_2n_bg);
}


/* RECIPES */

.recipes_cg_demand_table tr:nth-child(2n) {
	background: var(--table_row_2n_bg);
}

.recipes_cg_table td {
	padding: 5px;
	border-bottom: 1px dashed black;
}

.datatable_header_recipes {
	width: 30px;
}

#wg_Recipes_content div {
	text-align: center;
}

.recipes_sub_menu button {
	width: 100px;
}

.recipes_cg_agg_table td {
        padding: 5px;
        border-bottom: 2px solid black;
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+22) {
	background: #ffffff;
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+16) {
        background: var(--muscle_color);
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+13) {
        background: var(--carbs_color);
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+10) {
        background: var(--fat_color);
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+7) {
        background: #ffffff;
}

.recipes_cg_agg_table tr:first-child td:nth-child(-n+1) {
	background: var(--products_color);
}

.recipes_cg_agg_table td:first-child {
        background: var(--products_color);
}

.recipes_cg_agg_table td:nth-child(3n+1) {
        border-right: 2px solid black;
}

.recipes_cg_agg_table td:nth-child(3n+3) {
        background: var(--table_row_2n_bg);
}

div.recipes_product_in_storage {
	background: var(--storage_color) !important;
}

/* SHOPPING LIST */

.shopping_list_ebon tr:nth-child(2n+0) {
	background: var(--table_row_2n_bg);
}

.shopping_list_ebon tr:first-child td:nth-child(-n+5) {
	background: var(--shopping_list_color);
}

.shopping_list_ebon_to_storage tr:first-child td:nth-child(-n+4) {
        background: var(--products_color) !important;
}

.shopping_list_ebon_to_storage tr td:nth-child(1) select {
	min-width: 100px;
	max-width: 100px;
}

.shopping_list_ebon_to_storage tr td:nth-child(2) select {
	min-width: 250px;
	max-width: 250px;
	margin: 0px;
}

.shopping_list_ebon_to_storage tr td:nth-child(2) input {
	min-width: 250px;
        max-width: 250px;
}


.shopping_list tr:nth-child(2n+0) {
	background: var(--table_row_2n_bg);
}

.shopping_list tr:first-child td:nth-child(-n+5) {
        background: var(--products_color);
}

.shopping_list tr:first-child td:nth-child(-n+3) {
        background: var(--shopping_list_color);
}

.shopping_list tr:first-child td:nth-child(-n+1) {
        background: #ffffff;
}

/* ------- */
.pal_header td {
	border-bottom: 1px solid black;
	font-weight: bold;
	font-size: 30px;
}

.pal_footer td {
	border-top: 1px solid black;
	font-weight: bold;
	font-size: 30px;
}

.pal_2 {
	width: 20%;
}

.pal_3 {
	border-right: 1px solid black;
	width: 45px;
}

.pal_result {
	color: #ffffff;
	background: #000000;
	vertical-align: middle;
	margin: 5px;
	padding: 5px;
}

.pal_table {
	background: #cccccc;
	padding: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
}

.subset {
	background: #cccccc;
	padding: 5px;
	margin-bottom: 5px;
}