/*
** Recipe Manager
** The intention of this software was to create our own web-based tool for managing recipes.
** Copyright (C) 2022-2025 Aurolee Photography
*/

@import url('https://use.typekit.net/dwg8ojb.css');
/* Font Awesome Icon Library */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/*
** 'content' covers the main layout of all pages, incl. searchbar (when visible) and page contents
** 'toolbar' contains the logo, menu bar and sidebar
** 'menubar' contains the menu items on the toolbar
** 'sidebar' (visible only on desktop devices) contains the search bar (25% wide) beside the menu bar
** 'searchbar' (visible only on mobile devices) contains the 100% wide search bar
** 'footer' contains the copyright message at the bottom of page
** OLDIES:
** 'OLD-layout' covers the main layout of all pages, incl. searchbar (when visible) and page contents
** 'OLD-page' defines the page contents of pages like home, list, and view
*/
* {box-sizing: border-box; margin: 0; padding: 0;}
body, html {height: 100%; font-family: "acumin-pro-semi-condensed",sans-serif;}
body {background-color: #FFFFFF; line-height: 25px; word-wrap:break-word;}
.content {position: absolute; top: 60px; bottom: 50px; left: 0; right: 0; overflow-y: auto; background-color: white; padding: 20px; margin: 0 auto 60px;}
#toolbar {width: 100%; display: flex; flex-direction: row; text-align: left; border-bottom: 1px solid #e5e5e5; padding-left: 10px;}
#menubar {width: 70%; padding: 0px; float: left; box-sizing: border-box; text-align: center; display: inline-flex; align-items: center;}
#sidebar {width: 25%; margin-right: 16px;display:block;}
#searchbar {display:none;}
#searchbar input {margin: 10px; max-width: 90%;}
header, footer {background-color: white; 	color: black; padding: 1rem; 	text-align: center; position: fixed; left: 0; right: 0; z-index: 10;}
header {top: 0;}
footer {bottom: 0;}
#page {margin-bottom: 100px;}
/* OLdies */
#OLD-footer {width: 100%; text-align:center; position: fixed; left: 0; bottom: 0;}
#OLD-layout {margin: 0 auto 60px;	padding: 20px; background-color: #FFFFFF;}
#OLD-page {width:100%; float:left; box-sizing: border-box;}

/* Logo text */
#logo {padding-right: 16px;}

/* Copyright line */
#copyright {background-color: white; color: black; min-height: 20px; padding: 5px 20px 5px 20px; border-top: 1px solid #e5e5e5;}

/* List item on the menu bar */
ul.menu {padding-left: 0px;}
ul.menu > li {display: inline; padding: 10px 5px 10px 10px; }
ul.menu > li:hover {background-color: #2779BF;}
ul.menu > li > a {color: black; text-decoration: none; text-transform: uppercase; font-weight: normal; font-size: 0.9rem; font-kerning: none;}

/*
** 'searchbox' element includes the 'searchform' with an input field for the text to be used in search.
** This is used both for the 'searchbar' (width 100% for mobile) and 'sidebar' (width 25% for screen)
*/
#searchbox {
	background-color: #EFEFED;
	vertical-align:middle;
	align-content: center;
}
/* Search form */
#searchform {
	border: 1px solid red;
	width: 100%;
	height: 44px;
	border-radius: 5px;
	display:flex;
	flex-direction:row;
	align-items:center;
}
/* Input field */
input#query {
	all: unset;
	font: 16px system-ui;
	color: #000;
	height: 100%;
	width: 100%;
	padding: 6px 10px;
}
/* Place holder for input text */
::placeholder {
	color: #000;
	opacity: 0.7;
}
/* Search icon (glass icon) */
svg {
	color: #fff;
	fill: currentColor;
	width: 24px;
	height: 24px;
	padding: 0;
}
/* Search activating button */
button {
	all: unset;
	cursor: pointer;
	width: 44px;
	height: 44px;
}

/* Chip tags */
.chips-container {
	display: flex;
	flex-wrap: wrap;
	width: max-content;
}

.chip {
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 20px;
	gap: 5px;
}

.chip-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: grey;
	text-align: center;
	line-height: 23px;
}

.close-icon {
	cursor: pointer;
	margin: 0 8px;
	font-weight: bold;
	color: red;
}

.add-chip {
	display: flex;
	align-items: center;
	width: max-content;
	margin-top: 50px;
}

#nameInput,
#profileIconInput {
	padding: 10px;
	border-radius: 20px;
	border: 1px solid #ccc;
	margin-right: 10px;
}

#addChipForm button {
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 10px 10px;
	cursor: pointer;
}

/* The category popup form - hidden by default */
.form-popup {
	display: none;
	position: fixed;
	top: 70px;
	right: 15px;
	border: 3px solid #f1f1f1;
	z-index: 9;
}

.form-popup h1 {
	font-size: 1.25rem;
	text-decoration: none;
	color: mediumpurple;
}

/* Add styles to the form container */
.form-container {
	max-width: 600px;
	padding: 10px;
	background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
	background-color: #04AA6D;
	color: white;
	padding: 4px 5px;
	border: none;
	cursor: pointer;
	width: 100px;
	margin-bottom:10px;
	opacity: 0.8;
	text-align: center;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
	background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
	opacity: 1;
}

/* Redefine colors for the Font Awesome Icon Library */
.fa.fa-star.checked {
	color: green;
}
.fa.fa-star.normal {
	color: grey;
}
.fa.fa-star-o.normal {
	color: grey;
}

.vertical-scroll {
	height: 700px;
	overflow-y: auto;
}

.div-table {
	display: table;
	width: auto;
}
.div-table-row {
	display: table-row;
	width: auto;
	clear: both;
}
.div-table-col1 {
	float: left; /* fix for  buggy browsers */
	display: table-column;
	width: 200px;
}
.div-table-col2 {
	float: left; /* fix for  buggy browsers */
	display: table-column;
	width: 200px;
}

/* Collapsing sidebar for category popup */
#mysidebar{
	height: 0;
	overflow-y: scroll;
	width: 150px;
}
.form-sidebar{
	height: 0;
	overflow-y: scroll;
	width: 150px;
}
#mydiv{
	overflow-y: scroll;
	width: 150px;
}

/* Sidebar two columns that float next to each other */
.column {
	float: left;
	width: 40%;
	padding: 6px;
	height: 40px;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/*
** Recipe list page
*/
#recipe-list {
	width: 100%; list-style: none; margin: 0 0 5px; padding: 4px 0;
}
/* Href link without underscore */
#recipe-list a {
	font-size: 1.25rem;
	text-decoration: none;
	color: mediumpurple;
}
/* List element with bottom border */
#recipe-list-bottom {
	border-bottom: 1px solid #e5e5e5;
}

/* File selection form */
#fileselectform {
	font-size: 1rem;
}
#fileselectform label, a {
	font-weight: bold;
	font-size: 1rem;
}
#fileselectform option {
	font-size: 1rem;
}

/*
** Home page
*/
#welcome {font-size:1.5rem; font-weight:bolder; text-align: center;}
.home {font-size:1.2rem; font-weight:normal; margin-top: 20px; margin-bottom: 20px;}
.home a {font-size:1.2rem;}

/*
** Recipe view page
*/
#recipe-view {position:relative; text-align:left; color:cadetblue; text-shadow:none; -webkit-text-stroke-width: 1px; display:block;}
#recipe-view img {width:100%; height:200px; object-fit:cover; opacity:0.9;}
#recipe-view p {font-size:1.5rem; font-weight:lighter;}

#recipe-view-heading {width:80%; position:absolute; top:10px; left:16px; margin:0;}
#recipe-view-heading a {display: block; font-size: 1.5em; margin-top: 0.83em;
	margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold;}
#recipe-view-description {position:absolute; top:48px; left:16px; margin:0;font-size:1rem; font-weight:bold;}
#recipe-view-reference {position: absolute; top: 160px; right: 8px; margin:0; font-size:1rem; font-weight:bold; text-shadow:none; -webkit-text-stroke-width: 0; vertical-align: middle;}
#recipe-view-reference a {font-size: 0.9rem;}
#recipe-view-preparation {position: absolute; top: 160px; left: 16px; font-weight:bold; text-shadow:none; -webkit-text-stroke-width: 0; vertical-align: middle;}
#recipe-view-preparation img {width: 16px; height: 16px; visibility: visible;}
#recipe-view-preparation a {font-size: 0.9rem;}

#ingredients {width: 40%; float: left; padding: 5px 10px 5px 10px; color:black; text-shadow:none; box-sizing: border-box;}
#ingredients h2 {padding: 10px 0 5px 0;}
#method {width: 60%; float: left; padding: 5px 10px 5px 10px; color:black; text-shadow:none; box-sizing: border-box;}
#method h2 {padding: 10px 0 5px 0;}

img {	-ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle;}

/*
** Recipe edit page
*/
.edit-form-column {display: inline-block; width: 50%; vertical-align: top; margin-right: 20px;}
.edit-form-column label {font-size: 16px; font-weight: bold;}
.edit-form-column input[type="text"], input[type="number"] {font-size: 16px; width: 50%;}
.edit-form-column textarea {font-size: 16px; width: 100%;}

.edit-form-buttons {font-size: 16px;}
.edit-form-buttons input[type="submit"] {width: 100px; height: 30px; border: 2px solid #04AA6D; color: green; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
.edit-form-buttons button {
	width: 100px; height: 30px; border: 2px solid #f44336; color: red; text-align: center;
	text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor:
	pointer;" onclick="javascript:redirect():return false; }

/*
** Layout alternatives for various devices and screen sizes
*/
@media screen and (min-width: 1224px) {
	#layout {width: 85%;}
}
@media screen and (min-width: 1044px) and (max-width: 1224px) {
	#layout {width: 90%;}
}
@media screen and (min-width: 844px) and (max-width: 1044px) {
	#layout {width: 95%;}
}
@media screen and (max-width: 844px) {
	.content {width: auto; margin: 0;float:left;}
	#page {margin-bottom: 10px;}
	#sidebar {display:none;}
	#searchbar {display:block;}
	header, footer {padding: 0.5rem !important;}

	/* Oldies */
	#OLD-layout {width: auto; margin: 0;}
	#OLD-page {float:left; width:100%;}

	#welcome {font-size:1rem; font-weight:bolder; text-align: left; margin-top: 10px;}
	.home {font-size:0.875rem; font-weight:normal; margin-top: 10px; margin-bottom: 10px;}
	.home a {font-size:0.875rem;}

	.vertical-scroll {height: 100%; overflow-y: auto;}

	#recipe-view {position:static; text-align: left; color: black !important; text-shadow: none !important; -webkit-text-stroke-width: 0; display:block;}
	#recipe-view img {width:100%; height:100px; object-fit: cover; opacity:1;}
	#recipe-view-heading {color: black; text-shadow: none;}
	#recipe-view p {font-size:1rem; font-weight: normal; color: black; text-shadow: none;}
	#recipe-view-heading {width:80%; position:static; margin:0;}
	#recipe-view-description {position:static; margin:0;}
	#recipe-view-reference {position:static; margin:0; color: black !important; font-weight: normal !important; text-shadow: none;}
	#recipe-view-reference a {color: black !important; font-weight: normal !important; text-shadow: none;}
	#recipe-view-preparation {position: static; margin:0; font-size:0.875rem; font-weight: normal; color: black; text-shadow: none;}
	#recipe-view-preparation img {width: 16px; height: 16px; visibility: visible;}
	#ingredients {float:left; width:100%;}
	#method {float:left; width:100%;}
}

@media print {
	#body {width: 100% !important; color: black; text-shadow: none; !important;}
	.content {width: 100% !important; color: black; text-shadow: none; margin-bottom: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; overflow-y: visible; !important;}
	#page {margin: 0;}
	#toolbar {display:none !important;}
	#searchbar {display:none !important;}
	header {display:none !important;}
	footer {display:none !important;}
	/* Oldies */
	#OLD-footer {display:none !important;}
	#OLD-layout {color: black; text-shadow: none; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; !important;}
	#OLD-page {color: black; text-shadow: none; margin-bottom: 0 !important;}

	.chips-container {display:none !important;}
	.form-popup {display:none !important;}
	#recipe-view img {width:0; height:0; display:none !important;}
	#recipe-view-reference {display:none !important;}

	.vertical-scroll {height: 100%; overflow-y: visible;}

	#recipe-view {position:static; text-align: left; color: black; text-shadow: none !important; display:block !important;}
	#recipe-view p {font-size:1rem; color: black; text-shadow: none; font-weight: normal !important;}
	#recipe-view-heading {width:80%; position:static; margin:0; color: black; text-shadow: none;}
	#recipe-view-description {position:static; margin:10px 0 5px 0; color: black !important; text-shadow: none !important; font-size:1rem; font-weight: normal !important;}
	#recipe-view-preparation {position: static; margin:0; color: black !important; text-shadow: none !important; font-size:0.875rem; font-weight: normal !important;}
	#recipe-view-preparation img {width: 16px; height: 16px; visibility: visible;}

	#ingredients {!important; padding: 5px 5px 5px 0 !important;}
	#method {padding: 5px 5px 5px 0 !important;}

	.fa.fa-star.checked {color: black;}
	.fa.fa-star-o.unchecked {color: grey;}

}