:root {
	--basic-font-size: 11pt;
	--basic-background-color:  rgb(164, 184, 194);
	--button-color: rgba(3, 67, 34, 0.6);
	--button-bgcolor: rgba(167, 187, 165, 0.495);
	--title-height: 40px;
	--menu-height: 50px;
	--header-height: 60px;
	--data-height: calc(var(--doc-height) - var(--title-height) - var(--header-height) - var(--menu-height));
}
body {
	background-color: rgb(243, 245, 247);
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--basic-font-size);
	color: black;
}

textarea, input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--basic-font-size);
}

input[type=checkbox] {
	height: 20px;
	width: 20px;
}
#wrapper {
	display: grid;
	box-sizing: border-box;
	grid-template-rows: var(--title-height) 1fr var(--menu-height);
}
#title-area {
	display:grid;
	grid-template-columns: 1fr 1fr;
	height: var(--title-height);
	grid-template-areas: "title search-box";
}
.title {
	grid-area: title;
	color: rgb(20, 4, 57);
	font-size: 24pt;
	text-align: left;
}
.search-box {
	grid-area: search-box;
	border: 2px solid black;
	border-radius: 10px;
	height: 30px;
}
#main-table {
	display: grid;
	grid-template-columns: 150px 250px 1fr;
	grid-template-rows: var(--header-height) 1fr;
	grid-template-areas:
		"main-group-header main-recipe-header main-display-header"
		"main-group-data main-recipe-data main-display-data";
	border: 2px solid black;
	box-sizing: border-box;
}
.main-header {
	color: rgb(2, 1, 5);
	font-size: 16pt;
	text-align: center;
	border-bottom: 2px solid black;
	padding: 10px;
	box-sizing: border-box;
	height: var(--header-height);

}
#main-group-header {
	grid-area: main-group-header;
}
#main-recipe-header {
	grid-area: main-recipe-header;
	display: grid;
	grid-template-rows: 1fr 0.5fr;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
.main-recipe-found {
	font-size: 10pt;
}
#main-display-header {
	grid-area: main-display-header;
	display: grid;
	grid-template-columns: 40px 1fr 100px;
	grid-template-areas: 'main-mark-box main-recipe-name main-scale-recipe';
	overflow: hidden;
}
#main-mark-box {
	grid-area: main-mark-box;
	color: gray;
}
.main-scale-recipe {
	grid-area: main-scale-recipe;
	border: 2px solid black;
	border-radius: 10px;
	height: 30px;
	padding: 3px;
	margin-left: 3px;
	/* margin-top: 5px; */
}
#main-group-data {
	grid-area: main-group-data;
}
.main-group-selected {
	background-color: var(--basic-background-color);
}
#main-recipe-data {
	grid-area: main-recipe-data;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#main-group-data, #main-recipe-data {
	color: black;
	font-size: var(--basic-font-size);
	padding-top: 10px;
	padding-left: 5px;
	height: var(--data-height);
	overflow: auto;
	box-sizing: border-box;
}
.recipe-selected {
	background-color: var(--basic-background-color);
}
#main-display {
	grid-area: main-display-data;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"main-info"
		"main-ingredients"
		"main-directions"
		"main-notes";
	grid-gap: 5px;
	padding: 10px 10px 10px;
	height: var(--data-height);
	/* overflow: auto; */
	box-sizing: border-box;

}
.main-info {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"main-serving-info"
		"main-source-info"
		"main-group-info"
		"main-modified-date";
	padding: 5px;
	border: 1px solid black;

}
.main-food {
	grid-area: main-ingredients;
	display: grid;
	grid-template-areas:
	"main-ingredient-header"
	"main-ingredient-data";
	grid-template-rows: 25px 1fr;
	overflow: auto;
}
.main-ingredient-header {
	grid-area: main-ingredient-header;
	display: grid;
	grid-template-columns: 60px 100px 1fr;
	padding-top: 5px;
	grid-template-areas:
	"main-quantity-header main-unit-header main-desc-header";
	background-color:var(--basic-background-color);
	text-align: center;
	border: 1px solid black;
}
#main-quantity-header {
	grid-area: main-quantity-header;
}
#main-unit-header {
	grid-area: main-unit-header;
}
#main-desc-header {
	grid-area: main-desc-header;
}
.main-ingredient-data {
	grid-area: main-ingredient-data;
	padding: 5px;
	border: 1px solid black;
	overflow: auto;
}
.main-ingredients-data {
	display: grid;
	grid-template-columns: 60px 100px 1fr;
	grid-template-areas:
		"main-quantity main-unit main-description";
}
.main-quantity {
	grid-area: main-quantity;
}
.main-unit {
	grid-area: main-unit;
}
.main-description {
	grid-area: main-description;
}
.main-directions {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25px 1fr;
	grid-template-areas:
	"main-directions-header"
	"main-directions-data"
}
.main-directions-header {
	grid-area: main-directions-header;
	background-color:var(--basic-background-color);
	text-align: center;
	font-size: 14pt;
}
.main-directions-data {
	grid-area: main-directions-data;
	background-color: rgb(243, 245, 247);
	font-size: var(--basic-font-size);
	min-height: 100px;
	overflow: auto;
	resize: vertical;
	padding: 10px;
	border: 1px solid black;
}
.main-notes {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25px 1fr;
	grid-template-areas:
	"main-notes-header"
	"main-notes-data";
	grid-area: main-notes;
	font-size: var(--basic-font-size);
	border: 1px solid black;
}
.main-notes-header {
	background-color:var(--basic-background-color);
	text-align: center;
	font-size: 14pt;
}
.main-notes-data {
	background-color: rgb(243, 245, 247);
	font-size: var(--basic-font-size);
	padding: 10px;
	overflow: auto;
	min-height: 100px;
}

/* Bottom menu bottoms */

#main-menu-line {
	display: grid;
	grid-template-columns: 400px 1fr;
	height: var(--menu-height);
	grid-template-areas: "main-menu-file main-menu-display";
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	box-sizing: border-box;
}
#main-menu-file {
	grid-area: main-menu-file;
	display: grid;
	grid-template-columns: 80px 100px 80px 80px;
	grid-template-areas: "main-file-open main-file-backup main-file-clear";
	height: var(--menu-height);
	grid-column-gap: 10px;
	padding-left: 10px;
	border-right: 1px solid black;
}
#main-file-backup {
	grid-area: main-file-backup;
	padding-left: 5px;
}
#main-file-clear {
	grid-area: main-file-clear;
}
#main-menu-display {
	grid-area: main-menu-display;
	display: grid;
	grid-template-columns: 100px 100px 100px;
	height: var(--menu-height);
	grid-template-areas: "main-addbutton main-editbutton main-delete-recipe";
	grid-column-gap: 10px;
	padding-left: 10px;
}
.main-menu-buttons {
	font-size: 20pt;
	text-align: center;
	border: 2px solid black;
	background: var(--button-bgcolor);
	color: var(--button-color);
	height: 30px;
	box-shadow: 1px 1px 2px rgba(1, 57, 14, 0.4);
	border-radius: 10px;
	padding: 3px 10px;
	margin-top: 5px;
}
#main-add-recipe {
	grid-area: main-addbutton;
}
#main-edit-recipe{
	grid-area: main-editbutton;
}
#main-delete-recipe {
	grid-area: main-delete-recipe;
	height: 30px;
}

/* Edit display */

.edit-title {
	color: rgb(20, 4, 57);
	font-size: 24pt;
	text-align: left;
}

#edit-action-line {
	display: grid;
	grid-template-columns: 200px 200px 200px;
	height: var(--menu-height);
	grid-template-areas: "edit-savebutton edit-cancelbutton edit-importbutton";
	grid-column-gap: 10px;
	margin-top: 10px;
}
.edit-action-buttons {
	font-size: 20pt;
	text-align: center;
	height: 30px;
	border: 2px solid black;
	background: var(--button-bgcolor);
	color: var(--button-color);
	box-shadow: 1px 1px 2px rgba(1, 57, 14, 0.4);
	border-radius: 10px;
	padding: 3px 10px;
}

#import-visible {
	grid-area: edit-importbutton;
	visibility: visible;
}

#import-hidden {
	grid-area: edit-importbutton;
	visibility: hidden;
}


#edit-table {
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: var(--header-height) 1fr;
	grid-template-areas:
		"edit-group-header edit-display-header "
		"edit-group-data edit-display-data";
	border: 2px solid black;
	box-sizing: border-box;
}
.edit-header {
	color: rgb(2, 1, 5);
	font-size: 20pt;
	text-align: center;
	border-bottom: 2px solid black;
	padding: 10px 20px 10px 20px;
	box-sizing: border-box;
	height: var(--header-height);
}
#edit-group-header {
	grid-area: edit-group-header;
}
#edit-display-header {
	grid-area: edit-display-header;
	overflow: auto;
}
#edit-group-data, #edit-display-data {
	height: var(--data-height);
	overflow: auto;
	box-sizing: border-box;
}
#edit-group-data {
	grid-area: edit-group-data;
	color: black;
	font-size: var(--basic-font-size);
	padding-top: 10px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding-left: 5px;
	padding-bottom: 10px;
}
#edit-display-data {
	grid-area: edit-display-data;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"edit-info"
		"edit-ingredients"
		"edit-directions"
		"edit-notes";
	grid-gap: 5px;
	padding: 10px 10px 10px;
}
.edit-info {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-areas:
		"edit-serving-label edit-serving-data"
		"edit-source-label edit-source-data"
		"edit-group-label edit-group-data";
	padding: 5px;
	border: 1px solid black;
}
.edit-food {
	grid-area: edit-ingredients;
	padding: 5px;
	border: 1px solid black;
	display: grid;
	grid-template-areas:
	"edit-ingredient-header"
	"edit-ingredient-data";
	grid-template-rows: 25px 1fr;
	overflow: auto;
}
.edit-ingredient-header {
	grid-area: edit-ingredient-header;
	display: grid;
	grid-template-columns: 70px 100px 1fr 1fr;
	grid-template-areas:
	"edit-quantity-header edit-unit-header edit-desc-header edit-prep-header";
	background-color:var(--basic-background-color);
	text-align: center;
	border: 1px solid black;
}
#edit-quantity-header {
	grid-area: edit-quantity-header;
	padding-top: 1px;
	border: 1px solid black;
	box-sizing: border-box;
}
#edit-unit-header {
	grid-area: edit-unit-header;
	padding-top: 1px;
	border: 1px solid black;
	box-sizing: border-box;
}
#edit-desc-header {
	grid-area: edit-desc-header;
	padding-top: 1px;
	border: 1px solid black;
	box-sizing: border-box;
}
#edit-prep-header {
	grid-area: edit-prep-header;
	display: grid;
	grid-template-columns: 1fr 30px;
	grid-template-areas: "text add";
	padding-top: 1px;
	border: 1px solid black;
	box-sizing: border-box;
}
#edit-prep-header-text {
	grid-area: text;
}
#edit-add-ingredient-button {
	grid-area: add;
	font-weight: bold;
	background-color: rgb(250, 250, 67);
}
.edit-ingredient-data {
	grid-area: edit-ingredient-data;
	overflow: auto;
}
.edit-ingredients-data {
	display: grid;
	grid-template-columns: 70px 100px 1fr 1fr;
	grid-template-areas:
	"edit-quantity edit-unit edit-description edit-prepnote";
}
.edit-prepnote {
	grid-area: edit-prepnote;
	display: grid;
	grid-template-columns: 1fr 30px;
	grid-template-areas: "preptext delete";

}
.edit-prep-note-text {
	grid-area: preptext;
}
#edit-delete-ingredient-button {
	grid-area: delete;
	font-size: var(--basic-font-size);
	font-weight: bold;
	color: red;
	background: white;
}
.edit-directions {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25px 1fr;
	grid-template-areas:
	"edit-directions-header"
	"edit-directions-data"
}
.edit-directions-header {
	grid-area: edit-directions-header;
	background-color:var(--basic-background-color);
	text-align: center;
	font-size: 14pt;
}
.edit-directions-data {
	grid-area: edit-directions-data;
	font-size: var(--basic-font-size);
	min-height: 100px;
	max-width: 1 fr;
	overflow: auto;
	resize: vertical;
	padding: 10px;
	border: 1px solid black;
}
.edit-notes {
	display: grid;
	grid-area: edit-notes;
	grid-template-columns: 1fr;
	grid-template-rows: 25px 1fr;
	grid-template-areas:
	"edit-notes-header"
	"edit-notes-data";
	font-size: var(--basic-font-size);
	border: 1px solid black;
}
.edit-notes-header {
	background-color:var(--basic-background-color);
	text-align: center;
	font-size: 14pt;
}
.edit-notes-data {
	font-size: var(--basic-font-size);
	padding: 10px;
	resize: vertical;
	overflow: auto;
	min-height: 100px;
}
#read-file-label {
	grid-area: main-file-open;
}
#read-file-input {
	border: 2px solid black;
	border-radius: 10px;
}
.input-file-button {
	overflow: hidden;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	background: var(--button-bgcolor);
	color: var(--button-color);
	border-radius: 10px;
	padding: 3px 10px;
	margin-top: 5px;
	border: 2px solid black;
	font-size: 18pt;
	height: 40px;
	float: left;
}

.input-file-button [type=file] {
	display: block;
	cursor: inherit;
	filter: alpha(opacity=0);
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	position: absolute;
	right: 0;
	text-align: right;
	top: 0;
}
#import-button {
	grid-area: edit-importbutton;
}
#import-file-label {
	width: 100%;
	/* grid-area: edit-importbutton; */
}
#import-file-input {
	/* grid-area: edit-importbutton; */
	border: 2px solid black;
	border-radius: 10px;
}
.import-file-button {
	overflow: hidden;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	background: var(--button-bgcolor);
	color: var(--button-color);
	border-radius: 10px;
	padding: 3px 20px;
	/* margin-top: 5px; */
	border: 2px solid black;
	font-size: 20pt;
	height: 40px;
	float: left;
}

.import-file-button [type=file] {
	display: block;
	cursor: inherit;
	filter: alpha(opacity=0);
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	position: absolute;
	right: 0;
	text-align: right;
	top: 0;
}