div.FoodContainer {font-size:13px}

div.FoodContainer:empty {display:none}

div.FoodContainer * {position:relative}

div.FoodContainer div { position: relative; max-width:100%; }

div.FoodContainer [data-collapsed] > a:first-child ~ div {display:none}
div.FoodContainer [data-expanded] > a:first-child ~ span {display:none}

/* DIAGNOSTICS
div.FoodContainer div {background-color:rgba(255, 0,0,0.1)}
*/


div.FoodContainer > div:not([data-collapsed]):not([data-expanded]):not([data-has-toolbox]) {display:flex}
div.FoodContainer > div:not([data-collapsed]):not([data-expanded]) > *:only-child {flex-grow:1}

	div.FoodContainer { display: flex; flex-wrap: wrap; }
	div.FoodContainer > * {flex-basis:auto; flex-grow:1}

	div.FoodContainer div > a ~ div {flex-basis:100%}

div.FoodContainer > div { background-color:white; border-bottom:1px solid #6C0; margin:5px; box-shadow:rgba(0,0,0,0.06) 5px 5px 5px}

div.FoodContainer div[class] {align-items:center; overflow:hidden}


div.FoodContainer /*>*/ div[data-collapsed] {display:flex; align-items:stretch}


/* Second subgroup */
div.FoodContainer > div[class] > div[class][data-expanded] {background:rgba(0,0,0,0.1); border-radius:5px;
															margin-left:5px; margin-right:5px}
div.FoodContainer > div[class] > div[class][data-expanded] + div[class][data-expanded] {margin-top:5px}
div.FoodContainer > div[class] > div[class][data-expanded]:last-child {margin-bottom:5px;}


div.FoodContainer div.group[data-collapsed] > a.expander {font-weight:bold}


/* Expander */
div.FoodContainer a.expander {display:flex; align-items:center; flex-grow:1; padding:10px}
div.FoodContainer [data-expanded] > a:first-child {color:#6C0; font-weight:bold; font-size:15px}


/* Toolbox */
div.FoodContainer a.toolbox-link {display:flex; padding:10px; width:100%; align-items:center}
div.FoodContainer a.toolbox-link[data-text-only] {display:block}
div.FoodContainer a.toolbox-link:not([data-text-only]) {max-width:calc(100vw - 6px - 10px);}


/* No Toolbox */
div.FoodContainer [data-food-name]:not([data-has-toolbox]) {display:flex; padding:10px}



div.FoodContainer::before {flex-basis:100%; flex-grow:1; display:block;}

div.FoodContainer::before {padding:0px; padding-bottom:3px; font-size:12px}


/* LEGACY - Container date */
#JourneyEngine div.FoodContainer > .date {display:block; background-color:lightgrey; color:black; border:none; width:100%; text-align:right;
						   box-shadow:none; margin:0px; padding:2px; line-height:1; flex-basis:100%; padding:0px; padding-bottom:3px; font-size:12px}



/* Food Name and Emojis */
div.FoodContainer span.food-name {flex-grow:1; overflow:hidden}
div.FoodContainer [data-emoji]::before {content:attr(data-emoji); font-family:'Segoe UI Emoji'; flex-basis:auto;
										flex-grow:0; flex-shrink:0; margin-right:3px; display:flex; align-items:center}
div.FoodContainer a.toolbox-link[data-text-only][data-emoji]::before {display:inline}
div.FoodContainer > div[class] > div[data-food-name] + div[data-food-name] {border-top:1px solid rgba(0,0,0,0.03)}

div.FoodContainer span.emoji {display:inline-block}


/* Kcal and Grams */
div.FoodContainer span[class] {display:flex; align-items:center}
div.FoodContainer span.kcal,
div.FoodContainer span.grams {flex-shrink:0; flex-basis:auto; font-family:'Courier New'; font-size:11px; color:#555 }

div.FoodContainer /*>*/ div[class] > span.kcal {margin-right:10px}
div.FoodContainer span.kcal::after {content:' kcal'}
div.FoodContainer span.grams + span.kcal::before {content:'('}
div.FoodContainer span.grams + span.kcal::after {content:' kcal)'}



div.FoodContainer span.grams::after {content:'g'}

div.FoodContainer span + span {margin-left:10px}



div.FoodContainer > div {border-radius:4px}


/* Add more foods */
div.FoodContainer div.add-more-foods { align-items: stretch; font-size: 14px; background-color: lightgrey; }
div.FoodContainer div.add-more-foods a {display:flex; align-items:center; justify-content:center; padding:3px; color:black }
div.FoodContainer div.add-more-foods span.emoji {margin-right:4px}
div.FoodContainer div.add-more-foods a:hover {color:white}



/* Mini forms */
div.FoodContainer form {display:block; margin:3px; padding:3px; background-color:rgba(0,0,0,0.1); border-radius:3px;}
div.FoodContainer form,
div.FoodContainer form input:not([type='submit']),
div.FoodContainer form select {font-size:13px}

div.FoodContainer form input:not([type='submit']),
div.FoodContainer form select {border:none}