html, body { margin: 0px; padding: 0px; background-color: #000; color: #010C14; font-family: 'Lato', 'Helvetica', sans-serif; }

* { box-sizing: border-box; }

.lead { font-size: 110%; }

/**** LAYOUT **************************************************************************/
#APP { width: 100vw; height: 100vh; min-width: 300px; position: relative; background-color: #c0cbcf; background-color: #0c698a; background-image: linear-gradient(to bottom, #0c698a 0%, #05174a 80%); }

#APP > * { position: absolute; }

.desktop-hide { display: none; }

.mobile-hide { display: inherit; }

@media only screen and (max-width: 768px) { .desktop-hide { display: inherit; }
  .mobile-hide { display: none !important; } }
/*
	These classes handle displaying things as either full-screen
	or split-screen showing the area on the left or top where the
	tallies are shown.
*/
.FULL-SCREEN { position: absolute; left: 0px; top: 0px; width: 100vw; min-width: 270px; height: 100vh; overflow: hidden; }

.SPLIT-SCREEN { position: absolute; left: 300px; top: 0px; width: calc( 100vw - 300px ); height: 100vh; overflow: hidden; transition: top .2s ease-in-out; }

/*
	Blocks clicks on a modal dialog.
*/
.CLICK-BLOCKER { background-color: red; opacity: 0.0; pointer-events: auto; }

/*
	A dialog that doesn't cover the side panel.
*/
.MODAL-DIALOG { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; overflow-y: auto; overflow-x: hidden; }

#PLATE-DISPLAY { display: grid; overflow: hidden; }

#PLATE-DISPLAY { grid-template-columns: 300px 1fr; }

@media (orientation: portrait) and (max-width: 1280px) { .SPLIT-SCREEN { left: 0px; top: -2px; width: 100vw; height: auto; z-index: 2; }
  .SPLIT-SCREEN.pushed-down { top: 261; }
  #PLATE-DISPLAY { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 43px; }
  #PLATES { flex-grow: 1; } }
/* ===== Scrollbar CSS ===== */
/* Firefox */
* { scrollbar-width: auto; scrollbar-color: #8f54a0 #ffffff; }

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 12px; position: relative; }

*::-webkit-scrollbar-track { background: #ffffff; }

*::-webkit-scrollbar-thumb { background-color: #8f54a0; border-radius: 10px; border: 1px solid #ffffff; z-index: 10; }

/**** BUTTON STYLES **************************************************************************/
button { outline: 3px solid transparent; }
button:focus { outline-color: #07B; outline-offset: 3px; animation-name: pulsefocus; animation-duration: .5s; animation-iteration-count: infinite; animation-direction: alternate; box-shadow: inset 0 0 10px #5DF; }

div:focus, img:focus, a:focus { outline: 3px solid #07B; }

button.primary-button, button.secondary-button { font-size: 18px; border-radius: 18px; padding: 10px 40px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .05rem; font-weight: bold; transition: transform .3s ease-in-out; }

button.primary-button { background-color: #9A0093; border: 2px solid #9A0093; color: white; }
button.primary-button:hover { color: white; background-color: #dAa0d3; }
button.primary-button:active { color: white; background-color: #5A0053; transform: scale(0.95); }
button.primary-button[disabled] { opacity: 0.25; pointer-events: none; }

button.secondary-button { background-color: white; border: 2px solid #9A0093; color: #9A0093; }
button.secondary-button:hover { background-color: #eAb0e3; color: #5A0053; }
button.secondary-button:active { color: white; background-color: #5A0053; transform: scale(0.95); }
button.secondary-button[disabled] { opacity: 0.25; pointer-events: none; }

.close-button { position: absolute; right: 0px; top: 0px; padding: 0px; width: 40px; height: 40px; border: none; background-color: transparent; color: #404D55; font-weight: bold; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 1; }

button.back-button .mobile-hide { display: inline; }
button.back-button.primary-button, button.back-button.secondary-button { padding: 8px; font-size: 15px; }

.button-container { display: flex; justify-content: center; }
.button-container button { margin: 4px; }

.primary-button#finish-button { border-color: white; }

@media only screen and (max-width: 768px) { button.primary-button, button.secondary-button { font-size: 16px; border-radius: 12px; padding: 8px 12px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .04rem; font-weight: bold; } }
@media only screen and (max-width: 480px) { button.primary-button, button.secondary-button { font-size: 16px; border-radius: 12px; padding: 6px 20px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .04rem; font-weight: bold; } }
/**** MY PLATE TALLY SIDE BAR **************************************************************************/
#SIDEBAR { padding: 1em; display: flex; flex-direction: column; justify-content: center; align-content: space-around; }

#MYDAY-WIDGET { position: relative; background: white; border-radius: 10px; margin-top: 40px; margin-bottom: auto; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }

#META-PANEL { position: relative; display: flex; justify-content: center; padding: 4px; padding-top: 40px; cursor: pointer; }
#META-PANEL p { display: block; text-align: center; margin: 0 auto; }
#META-PANEL p.app-title { font-size: 1.1rem; }
#META-PANEL p.app-title .myplate-title { font-weight: bold; }
#META-PANEL p.app-title .myday-title { font-style: italic; font-family: 'Raleway'; }
#META-PANEL #myplate-icon { position: absolute; top: -40px; height: 80px; width: 40%; text-align: center; left: calc(30% + 5px); margin: auto; transition: transform 0.4s ease-in-out; }
#META-PANEL #myplate-icon img { height: auto; width: 100%; }
#META-PANEL #myplate-icon:hover #myplate-icon { transform: scale(1.1); }

#NUTRITION-TALLY { padding: .0em 1em; display: flex; flex-direction: column; align-items: stretch; }
#NUTRITION-TALLY .entry { margin-bottom: 1em; }
#NUTRITION-TALLY .entry .title { font-weight: bold; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
#NUTRITION-TALLY .amount-display { display: inline; font-size: 15px; }
#NUTRITION-TALLY .amount-display .amount { font-weight: bold; }

#FINISH-PANEL { justify-self: stretch; align-self: stretch; position: relative; display: flex; align-items: center; justify-items: stretch; flex-wrap: wrap; background: transparent; }

#FINISH-PANEL button { flex-grow: 1; padding: 10px; margin: 1% auto; border-radius: 14px; }
#FINISH-PANEL button:focus { outline-color: #5DF; }

#alerts-box { border-top: 1px solid #a8c5c9; padding: .5em; }

@media (orientation: landscape) and (max-width: 1024px) { #PLATE-DISPLAY { grid-template-columns: 260px 1fr; }
  .SPLIT-SCREEN { left: 260px; top: 0px; width: calc( 100vw - 260px ); } }
@media (orientation: portrait) and (max-width: 1280px) { #SIDEBAR { justify-content: flex-start; padding: 0; border-top: 10px solid #9A0093; }
  #FINISH-PANEL { width: 100%; }
  #MYDAY-WIDGET { border-radius: 0; margin-top: 40px; }
  #META-PANEL { position: absolute; padding: 0; left: 0; top: -45px; width: 100%; justify-content: flex-start; background: white; border-bottom: 2px solid #9A0093; }
  #META-PANEL #MYPLATE-LINKOUT { position: relative; padding-left: 80px; height: 43px; align-items: center; display: flex; justify-content: stretch; width: calc(100% - 80px); border-radius: 10px 10px 0 0; }
  #META-PANEL p { display: flex; flex-grow: 1; height: 100%; align-items: center; }
  #META-PANEL p.app-title { margin-left: 0; flex-grow: 3; text-align: left; }
  #META-PANEL p.diet-category { border-left: 2px solid #DFF4F5; text-align: left; padding-left: 15px; }
  #META-PANEL #myplate-icon { top: 0; left: 10px; width: 65px; height: 40px; }
  #NUTRITION-TALLY { padding-top: 10px; flex-flow: row; flex-wrap: wrap; }
  #NUTRITION-TALLY .entry { width: 50%; margin-bottom: 0.5em; }
  #alerts-box { position: absolute; right: 0; bottom: 0; width: calc(50% - 2px); border-top: none; }
  #FINISH-PANEL { position: fixed; bottom: 0; justify-content: center; padding: 0; flex-wrap: nowrap; z-index: 1; }
  #FINISH-PANEL button { margin: auto; border-radius: 0; width: 50%; flex-grow: 1; border: none; } }
@media (orientation: landscape) and (max-height: 520px) { #SIDEBAR { justify-content: flex-start; padding: 0; border-top: 10px solid #9A0093; background: #fff; }
  #MYDAY-WIDGET { border-radius: 0; margin-top: 40px; height: 100vh; }
  #META-PANEL { position: absolute; padding: 0; left: 0; top: -45px; width: 100%; justify-content: flex-start; background: white; border-bottom: 2px solid #9A0093; }
  #META-PANEL #MYPLATE-LINKOUT { position: relative; height: 43px; align-items: center; display: flex; justify-content: stretch; width: calc(100% - 70px); border-radius: 10px 10px 0 0; padding-left: 70px; }
  #META-PANEL p { display: flex; flex-grow: 1; height: 100%; align-items: center; }
  #META-PANEL p.app-title { margin-left: 0; margin-right: 5px; flex-grow: 3; font-size: 1em; text-align: left; }
  #META-PANEL p.diet-category { border-left: 2px solid #DFF4F5; text-align: left; padding-left: 5px; }
  #META-PANEL #myplate-icon { top: 0; left: 10px; width: 60px; height: 38px; }
  #NUTRITION-TALLY { padding: 10px 8px; flex-flow: row; flex-wrap: wrap; }
  #NUTRITION-TALLY .entry { width: 50%; }
  #alerts-box { position: absolute; right: 0; bottom: auto; top: 180px; width: calc(60% - 2px); border-top: none; }
  #FINISH-PANEL { position: absolute; bottom: 0; width: 300px; justify-content: center; padding: 0; z-index: 1; }
  #FINISH-PANEL button { width: 100%; margin: auto; border-radius: 0; }
  .primary-button#finish-button { border: none; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) { #FINISH-PANEL { width: 260px; } }
/***PLATES***************************************************************************************/
#PLATES { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 3px; grid-row-gap: 3px; align-items: stretch; justify-items: stretch; padding: 0em; width: 100%; min-height: 400px; }

#PLATES > div { position: relative; display: grid; align-items: center; justify-items: center; }

.food-button { max-width: 10vw; max-height: 10vh; }

.add-food-prompt { width: 84%; height: 84%; display: grid; align-items: center; justify-items: center; text-align: center; letter-spacing: .03em; color: #404D55; font-size: 1.5rem; margin: 8%; }

.clickable-to-add-food { cursor: pointer; font-style: italic; }

.fork { height: 70%; top: 20%; width: auto; position: absolute; left: -20%; }

#plates > div { position: relative; }

.plate-setting { width: calc(min( 108vw * 0.5 - 150px, 108vh * 0.5 )); height: calc(min( 108vw * 0.5 - 150px, 108vh * 0.5 )); min-width: 200px; min-height: 200px; background: url(../engine-images/plate-setting.png); background-size: 24% 45%; background-repeat: no-repeat; background-position: 1% center; position: absolute; }

.plate { width: calc(min( 100vw * 0.5 - 150px, 100vh * 0.5 )); height: calc(min( 100vw * 0.5 - 150px, 100vh * 0.5 )); min-width: 170px; min-height: 170px; }

.plate { background-image: url(../engine-images/plate.png); background-size: 80% 80%; background-repeat: no-repeat; background-position: center; position: relative; }

.plate .beverage { width: 21%; height: 21%; position: absolute; z-right: 7%; top: 7%; }

.plate .first-beverage { right: 0%; top: 15%; z-index: 1; }

.plate .second-beverage { right: 12%; top: 2%; }

.plate .only-beverage { right: 5%; top: 7%; }

.plate .meal-title { position: absolute; font-weight: bold; letter-spacing: .08em; font-style: italic; font-size: 1.3rem; top: -5px; left: 5%; right: 5%; padding: 4%; color: white; text-align: center; pointer-events: none; }

.plate .foods { position: absolute; width: 66%; height: 66%; left: 17%; top: 17%; }

.plate .foods .entree { position: absolute; width: 50%; height: 75%; }

.plate .foods .side { position: absolute; top: 0px; left: 0px; width: 50%; height: 50%; }

.add-food-button { display: flex; align-items: center; justify-content: center; width: calc(min( 6vw, 6vh )); height: calc(min( 6vw, 6vh)); width: 15%; height: 15%; position: absolute; right: 2vw; right: 5%; left: inherit; top: calc( 50% - 2vw); padding: 2px; background-color: #9A0093; color: white; border-radius: 50%; border: 3px solid #9A0093; font-size: calc(max(1em , 3vh) ); cursor: pointer !important; transition: all .3s ease-in-out; }
.add-food-button:hover { transform: scale(1.1); background: white; color: #9A0093; border-color: #9A0093; }
.add-food-button:active { transform: scale(0.95); }

.plate .beverage, .plate .entree, .plate .side { transition: transform 0.125s ease; cursor: pointer; }

.plate .beverage:hover, .plate .entree:hover, .plate .side:hover { transform: scale(1.2) rotate(2deg); }

.plate .beverage:focus { outline-color: #5DF; }

@media only screen and (min-width: 1281px) { .plate .meal-title { font-size: 1.6rem; } }
@media only screen and (max-width: 768px) { .add-food-button { width: calc(min( 8vw, 8vh )); height: calc(min( 8vw, 8vh)); padding: 2px; bottom: 0; top: calc( 50% - 4vw); font-size: calc( 22px ); }
  .add-food-prompt { width: 90%; margin: auto; font-size: 18px; }
  .plate .meal-title { font-size: 1.1rem; top: 0px; } }
@media (orientation: portrait) and (max-width: 1280px) { #PLATES { height: calc(100vh - 300px); min-height: 200px; padding: 10px 1vw; width: 98vw; margin: auto; }
  .plate { width: calc(min( 98vw * 0.5, 100vh * 0.5 - 143px )); height: calc(min( 98vw * 0.5, 100vh * 0.5 - 143px )); min-height: auto; min-width: auto; }
  .plate-setting { width: calc(min( 105vw * 0.5, 105vh * 0.5 - 143px )); height: calc(min( 105vw * 0.5, 105vh * 0.5 - 143px )); min-height: auto; min-width: auto; }
  .plate .meal-title { top: -1vh; } }
@media (orientation: landscape) and (max-height: 520px) { #PLATES { height: 100vh; }
  .plate .meal-title { font-size: 1rem; top: 0px; }
  .add-food-prompt { font-size: 16px; } }
@media only screen and (max-width: 480px) { .add-food-prompt { font-size: 14px; }
  .plate .meal-title { font-size: .9rem; }
  .plate { min-width: auto; min-height: auto; }
  .plate-setting { min-width: auto; min-height: auto; } }
/*
	=====================================================	CHOOSE A FOOD WINDOW
*/
/*
	Special case - the plate is full!
	Added by CC 4/5/2021
*/
.out-of-room-notice { height: 100%; width: 100%; display: grid; align-items: center; justify-items: center; background-color: rgba(0, 0, 0, 0.5); }

.out-of-room-notice > div { background-color: white; padding: 2em; border-radius: 1em; position: relative; }

.out-of-room-notice .primary-button { width: 100%; }

/*
	End special case
*/
.food-type-header { top: 0; padding: 1em; width: 100%; background-color: #333; color: white; font-weight: bold; margin-top: 1em; }

.food-entry { display: inline-grid; grid-template-rows: 100px 1fr; margin: 2em 0px; align-items: center; justify-items: center; width: 200px; margin: 1em; text-align: center; background-color: #efefff; padding: 20px; border-radius: 20px; cursor: pointer; }

.food-entry.entree { grid-template-rows: 200px 1fr; }

.food-entry img { height: 100px; }

.food-entry.entree img { height: 200px; }

.food-entry > :nth-child(2) { align-self: center; justify-self: stretch; margin-top: 10px; }

#FOOD-CHOICES-DIALOG { width: 100%; height: 100vh; animation: slide-in .3s ease-out; }

@keyframes slide-in { 0% { transform: translateX(100%); margin-right: 100%; opacity: .5; }
  100% { transform: translateX(0); opacity: 1; right: 0; } }
@keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }
#CHOOSE-A-FOOD { padding: 1em 0; background-color: #102540; background-color: #d0dada; width: 100%; height: calc(100% + 180px); }

#choose-a-food-heading { position: absolute; width: calc(100% - 12px); background: rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 98%, rgba(255, 255, 255, 0) 100%); top: 0; left: 0; padding: 1em; height: 130px; z-index: 1; animation: fade-in .3s ease-out; animation-delay: .3s; animation-fill-mode: backwards; }
#choose-a-food-heading h2 { font-weight: normal; width: calc(100% - 180px); margin: 0 auto .5em; text-align: center; font-size: 1.5rem; }
#choose-a-food-heading button.back-button { position: absolute; left: 15px; top: .5em; }

#filters { text-align: center; padding: .5em; border-top: 2px solid #c0cbcf; }

.filters-title { text-transform: uppercase; color: #404D55; font-size: 14px; margin-bottom: .25em; }

#filter-list { display: flex; justify-content: center; width: 100%; }

.filter-category { background: white; flex-grow: 1; padding: 5px; color: #404D55; padding: 4px 8px; font-size: 18px; margin: 0 4px; border: 2px solid #5A0053; color: #5A0053; border-radius: 8px; cursor: pointer; transition: all .3s ease-in-out; }
.filter-category:hover { background: none; color: white; background-color: #5A0053; transform: scale(1.1); }
.filter-category:active { transform: scale(0.95); }
.filter-category.active-filter { position: relative; color: white; background: #9A0093; border-color: white; }
.filter-category.active-filter .filter-checkmark { position: absolute; bottom: -6px; display: flex; display: none; align-items: center; justify-content: center; width: 16px; height: 16px; left: calc(50% - 8px); color: #9A0093; font-size: 16px; border-radius: 50%; }

#filters-toggle .toggle-arrow { transition: transform 0.25s ease; display: inline-block; transform: rotate(0deg); }

#filters-toggle .toggle-arrow.show { transform: rotate(90deg); }

.filter-category.filtering { background-color: #036; color: white; }

.filter-notice { margin: auto; padding: 20px 5px; display: flex; }
.filter-notice p { margin: auto; font-size: 1.1em; }

#FOOD-SELECTOR { position: relative; top: calc(170px + 2em); }

.filtered-category-display { border-top: .5em solid #bbb; padding: .5em 1em 1em 1em; margin: 0px 0px 3px; }

.filtered-food-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; }

.filtered-food-item { position: relative; display: flex; flex-direction: column; align-items: baseline; justify-items: center; width: calc(25% - 20px); height: 190px; background-color: white; border-radius: 3px; padding: 5px; border: 2px solid transparent; text-align: center; margin: 10px; cursor: pointer; outline: 3px solid transparent; transition: all .3s ease-in-out; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
.filtered-food-item:before { position: absolute; left: .5em; top: .5em; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; line-height: 1; padding: 4px 5px; font-size: 14px; background: rgba(255, 255, 255, 0.8); margin: 0; text-align: center; border: 2px solid #9A0093; border-radius: 50%; color: #9A0093; content: '\f067'; font-family: "Font Awesome 5 Free"; }
.filtered-food-item:hover { border-color: #9A0093; }
.filtered-food-item:hover .filtered-food-image { background-size: auto 120%; }
.filtered-food-item:active { transform: scale(0.95); }
.filtered-food-item:focus { box-shadow: 0 0 8px #5DF; outline-offset: 2px; }

.filtered-food-image { width: 130px; height: 130px; margin: 0 auto auto; background-size: auto 100%; background-position: center; background-repeat: no-repeat; transition: all .3s ease-in-out; -webkit-box-shadow: inset 0 0 5px 5px white; -moz-box-shadow: inset 0 0 5px 5px white; box-shadow: inset 0 0 5px 5px white; }

.filtered-food-title { display: flex; align-items: center; margin: auto auto 0; justify-content: center; height: 50px; }

.filtered-category-main-dish { border-color: #37a7b6; }

.filtered-category-fruit { border-color: #df4e55; }

.filtered-category-vegetable { border-color: #4aa07d; }

.filtered-category-protein { border-color: #9450c9; }

.filtered-category-grain { border-color: #d78e36; }

.filtered-category-dairy { border-color: #3074d2; }

.filtered-category-drinks { border-color: #a9a3b6; }

.filtered-category-other { border-color: #a0b3b6; }

.filtered-category-title { font-weight: bold; font-size: 1.4rem; opacity: .7; margin-left: 1em; }

#push-down-button-container { display: none; position: absolute; top: 0; right: 0; z-index: 10; }
#push-down-button-container button { height: 30px; width: 60px; padding: 0; border-radius: 0 0 20px 20px; }

#filters { justify-content: center; display: flex; flex-direction: column; }
#filters > div { margin: auto; }

#filter-list { display: none; top: 10px; }

#filter-list.show { position: relative; display: flex; background: white; border-radius: 10px; padding: .5em; width: 80%; flex-wrap: wrap; justify-content: center; box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); border: 2px solid #9A0093; }
#filter-list.show:before { position: absolute; width: 100%; left: 0; top: -21px; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; line-height: 1; font-size: 30px; margin: 0; text-align: center; color: #9A0093; content: '\f0d8'; font-family: "Font Awesome 5 Free"; }

.filter-category { padding: 6px 14px; margin: 4px; flex-grow: 0; }

@media only screen and (max-width: 960px) { .filtered-food-item { width: calc(33% - 20px); } }
@media only screen and (min-width: 1281px) { .filtered-food-item { width: calc(20% - 20px); } }
@media only screen and (max-width: 768px) { #CHOOSE-A-FOOD { padding: 0; height: calc(100% + 240px); }
  #choose-a-food-heading { left: 0; }
  #choose-a-food-heading button.back-button { left: 10px; height: 40px; width: 40px; padding: 0; border-radius: 50%; border-width: 3px; }
  #choose-a-food-heading h2 { width: calc(100% - 80px); font-size: 1.4rem; }
  #FOOD-SELECTOR { top: calc(220px + 2em); }
  .filtered-category-display { padding: .75em; margin: 0px 0px 10px; border-radius: 0px; }
  .filtered-category-title { font-size: 1.2rem; text-align: center; margin-bottom: 10px; }
  .filtered-food-item { width: calc(50% - 20px); height: 190px; background-color: white; border-radius: 3px; padding: 5px; text-align: center; margin: 1%; } }
@media only screen and (orientation: portrait) and (max-width: 1280px) { #push-down-button-container { display: flex; } }
/*
	================================================	FOOD DETAIL VIEW WINDOW
*/
#FOOD-DETAIL-VIEW { padding: 2vh; display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; height: 100%; width: 100%; overflow: hidden; }

#FOOD-DETAIL-WINDOW { position: relative; background-color: white; border: 1px solid #404D55; display: flex; align-items: flex-start; min-width: 80%; max-width: 100%; overflow: hidden; border-radius: 1em; min-height: 60vh; }

@media (max-width: 768px) { #FOOD-DETAIL-WINDOW { grid-template-columns: 1fr; } }
#NUTRIENT-COLUMN { padding: 1em 0 1em 1em; position: relative; z-index: 1; }

#FOOD-INFO { padding: 1em 1em 2em 0; position: relative; flex-grow: 1; z-index: 1; margin-left: 1.2vw; margin-bottom: 20%; background: rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%); }
#FOOD-INFO h1, #FOOD-INFO h2 { font-size: 2.6rem; letter-spacing: 0.02em; font-weight: 500; margin: .3rem auto .3rem; font-family: 'Raleway', sans-serif; color: #404D55; max-width: 650px; }
#FOOD-INFO p { font-size: 1.1rem; line-height: 1.8rem; max-width: 650px; margin: .3rem auto .5em; color: #404D55; }

#FOOD-PHOTO { position: absolute; bottom: 0; z-index: 0; opacity: 1; top: 10vh; right: 10vw; left: 260px; text-align: center; display: flex; justify-content: center; align-items: flex-start; }

#FOOD-PHOTO > img { position: relative; width: auto; height: 100%; bottom: -10vh; }

#alerts-header { text-align: center; font-weight: bold; margin-bottom: .25em; }

#FOOD-ALERTS { display: flex; flex-wrap: wrap; flex-flow: row; max-width: 650px; margin: auto; margin: auto; }

#FOOD-ALERTS .alert-warning { margin-right: 10px; }

/*
	Nutrition Placards
*/
.nutrition-placard { width: 100%; min-width: 230px; max-width: 250px; position: relative; display: flex; margin: 5px auto 10px; }

.nutrition-placard .gauge-placement { position: absolute; left: 65px; top: 0px; ztransform: scale(0.7); transform-origin: left center; }

.nutrition-placard .card { margin: 10px; background-color: #666; border: 1px solid #666; color: white; padding: 0px; width: calc(100% - 20px); display: grid; border-radius: 2px; }

.nutrition-placard .nutrient-card-row { position: relative; padding: 10px; padding-left: 50px; text-align: left; font-weight: bold; text-transform: uppercase; }

.nutrition-placard .nutrient-name { font-size: 15px; letter-spacing: .02em; }

.nutrition-placard .nutrient-measure { float: right; font-weight: bold; font-size: 17px; }

.nutrition-placard .nutrient-description { padding: 10px; background-color: white; border-radius: 0px 0px 1px 1px; color: #666; }

.nutrition-placard .serving-icon { position: absolute; height: calc(100% - 4px); left: 2px; top: 2px; z-index: 1; padding: 0; background-color: #666; }

.nutrition-placard .serving-icon img { height: 100%; width: auto; }

.fruit-nutrition-placard .card { background-color: #990011; border: 1px solid #990011; }

.fruit-nutrition-placard .nutrient-description { color: #990011; }

.fruit-nutrition-placard .serving-icon, .fruit-achievement .achievement-icon { background-color: #990011; }

.fruit-achievement .achievement-checkmark { background-color: #af0000; }

.vegetables-nutrition-placard .card { background-color: #006600; border: 1px solid #006600; }

.vegetables-nutrition-placard .nutrient-description { color: #006600; }

.vegetables-nutrition-placard .serving-icon, .vegetables-achievement .achievement-icon { background-color: #006600; }

.vegetables-achievement .achievement-checkmark { background-color: #11aa22; }

.protein-nutrition-placard .card { background-color: #4e256f; border: 1px solid #4e256f; }

.protein-nutrition-placard .nutrient-description { color: #4e256f; }

.protein-nutrition-placard .serving-icon, .protein-achievement .achievement-icon { background-color: #4e256f; }

.protein-achievement .achievement-checkmark { background-color: #9020a0; }

.grains-nutrition-placard .card { background-color: #983300; border: 1px solid #983300; }

.grains-nutrition-placard .nutrient-description { color: #983300; }

.grains-nutrition-placard .serving-icon, .grains-achievement .achievement-icon { background-color: #983300; }

.grains-achievement .achievement-checkmark { background-color: #da6a00; }

.dairy-nutrition-placard .card { background-color: #00529B; border: 1px solid #00529B; }

.dairy-nutrition-placard .nutrient-description { color: #00529B; }

.dairy-nutrition-placard .serving-icon, .dairy-achievement .achievement-icon { background-color: #00529B; }

.dairy-achievement .achievement-checkmark { background-color: #0062cB; }

@media only screen and (min-width: 768px) and (max-width: 1024px) { #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-PHOTO { right: 0; align-items: flex-end; }
  #FOOD-PHOTO img { height: 80%; } }
@media only screen and (max-width: 768px) { #FOOD-DETAIL-VIEW { padding: 1vh; }
  #FOOD-INFO { padding-bottom: 5em; }
  #FOOD-INFO h1 { font-size: 1.8rem; margin: .4em auto .4em; }
  #FOOD-INFO p { line-height: 1.4rem; margin: .5em auto; }
  #NUTRIENT-COLUMN { padding: 1em 0 .5em .5em; }
  .nutrition-placard { width: 160px; min-width: 160px; }
  .nutrition-placard .gauge-placement { left: 10px; top: -5px; width: calc(100% - 20px); display: flex; justify-content: center; }
  .nutrition-placard .gauge-container { display: block; }
  .nutrition-placard .gauge { margin: auto; }
  .nutrition-placard .nutrient-card-row { padding: .3em; font-size: 15px; }
  .nutrition-placard .serving-icon { display: none; }
  .nutrition-placard .nutrient-description { font-size: 15px; padding: .3em; }
  #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-ALERTS .alert-warning { margin-right: 5px; height: auto; width: auto; }
  #FOOD-ALERTS .alert-warning .alert-text { display: inline-flex; width: auto; font-size: 14px; margin: auto 0; }
  #FOOD-ALERTS .alert-warning .alert-text > * { margin: 3px; }
  #FOOD-PHOTO { left: 200px; right: 0vw; align-items: flex-end; }
  #FOOD-PHOTO img { height: 70%; bottom: -50px; } }
@media (orientation: landscape) and (max-height: 520px) { #FOOD-DETAIL-VIEW { justify-content: flex-start; align-items: flex-start; overflow-y: auto; }
  #FOOD-INFO { padding-bottom: 5em; }
  #FOOD-INFO h1 { font-size: 1.3rem; margin: .4em auto .4em; }
  #FOOD-INFO p { line-height: 1.2rem; font-size: .95rem; margin: .5em auto; }
  #NUTRIENT-COLUMN { padding: 1em 0 .4em .4em; }
  .nutrition-placard { width: 160px; min-width: 160px; }
  .nutrition-placard .gauge-placement { left: 10px; top: -5px; width: calc(100% - 20px); display: flex; justify-content: center; }
  .nutrition-placard .gauge-container { display: block; }
  .nutrition-placard .gauge { margin: auto; }
  .nutrition-placard .nutrient-name, .nutrition-placard .nutrient-measure { font-size: 14px; }
  .nutrition-placard .nutrient-card-row { padding: .3em; font-size: 14px; }
  .nutrition-placard .serving-icon { display: none; }
  .nutrition-placard .nutrient-description { font-size: 14px; padding: .3em; }
  #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-ALERTS .alert-warning { margin-right: 5px; }
  #FOOD-PHOTO { left: 200px; right: 0vw; align-items: flex-end; }
  #FOOD-PHOTO img { height: 70%; bottom: -50px; } }
/*
	===========================================================	SUMMARY STATE
*/
#SUMMARY { display: grid; position: absolute; width: 100vw; height: 100vh; padding: 2em; align-items: center; justify-items: center; z-index: 2; overflow-y: auto; }

#SUMMARY-WINDOW { position: relative; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 21px; max-width: 60em; margin-top: auto; }
#SUMMARY-WINDOW #summary-window-heading { padding: 1.5em 2em 1em 2em; background: #0c698a; border-radius: 20px 20px 0 0; color: white; }
#SUMMARY-WINDOW #summary-window-heading h2 { margin: 0 auto .25em; text-align: center; font-size: 1.8rem; letter-spacing: 0.05em; margin: 0 auto; color: inherit; font-family: 'Raleway', sans-serif; font-weight: normal; }
#SUMMARY-WINDOW #summary-window-heading p { margin: .25em auto; font-size: 1.2rem; }
#SUMMARY-WINDOW .close-button { color: white; }
#SUMMARY-WINDOW #summary-window-body { padding: 1em 2em 2em 2em; color: #404D55; }
#SUMMARY-WINDOW p, #SUMMARY-WINDOW li { line-height: 1.4rem; }
#SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
#SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
#SUMMARY-WINDOW li { margin-bottom: .5em; }
#SUMMARY-WINDOW .summary-completions { display: flex; justify-content: center; flex-flow: wrap; }
#SUMMARY-WINDOW .achievement-listing-element { max-width: 110px; width: 33%; flex-shrink: 1; }
#SUMMARY-WINDOW p.summary-outtro { text-align: center; }
#SUMMARY-WINDOW .button-container { display: flex; justify-content: space-around; }

@media (orientation: portrait) and (max-width: 1280px) { #SUMMARY { padding: 0 1em; }
  #SUMMARY-WINDOW { width: 98%; left: 0; }
  #SUMMARY-WINDOW #summary-window-heading { padding: 1.5em .5em 1em .5em; }
  #SUMMARY-WINDOW #summary-window-heading h2 { font-size: 1.2rem; }
  #SUMMARY-WINDOW #summary-window-heading p { font-size: 1rem; }
  #SUMMARY-WINDOW #summary-window-body { padding: 1em 1.5em 2em 1.5em; color: #404D55; }
  #SUMMARY-WINDOW p, #SUMMARY-WINDOW li { font-size: .95rem; line-height: 1.4rem; }
  #SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
  #SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
  #SUMMARY-WINDOW li { margin-bottom: .5em; }
  #SUMMARY-WINDOW .button-container { flex-flow: wrap; } }
@media (orientation: landscape) and (max-height: 520px) { #SUMMARY-WINDOW #summary-window-heading { padding: 1.5em 1em 1em 1em; }
  #SUMMARY-WINDOW #summary-window-heading h2 { font-size: 1.2rem; }
  #SUMMARY-WINDOW #summary-window-heading p { font-size: 1rem; }
  #SUMMARY-WINDOW #summary-window-body { padding: 1em 1.5em 2em 1.5em; color: #404D55; }
  #SUMMARY-WINDOW p, #SUMMARY-WINDOW li { font-size: .95rem; line-height: 1.4rem; }
  #SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
  #SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
  #SUMMARY-WINDOW li { margin-bottom: .5em; } }
/*
	=======================================================	ACHIEVEMENT WINDOW
*/
#ACHIEVEMENT { display: grid; position: absolute; width: 100vw; height: 100vh; padding: 2em; align-items: center; justify-items: center; z-index: 2; }

#ACHIEVEMENT-WINDOW { position: relative; background-color: white; border-radius: 21px; max-width: 50em; min-width: 250px; max-height: 90vh; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#ACHIEVEMENT-WINDOW .achievement-window-heading { padding: 1em 1.5em 0 1.5em; border-bottom: 1px solid #404D55; border-color: white; background: #0c698a; color: white; border-radius: 20px 20px 0 0; }
#ACHIEVEMENT-WINDOW .achievement-window-heading h1 { font-size: 1.4rem; letter-spacing: 0.02em; margin: .25em auto .5em; text-align: center; font-family: 'Raleway', sans-serif; letter-spacing: .03em; font-weight: normal; }
#ACHIEVEMENT-WINDOW .achievement-window-body { padding: 0 1.5em 1.5em 1.5em; }
#ACHIEVEMENT-WINDOW .close-button { color: white; }

.star-icon-container { position: absolute; left: calc(50% - 40px); top: -25px; height: 25px; width: 80px; justify-content: center; align-items: flex-start; display: flex; font-size: 30px; background: #0c698a; border-radius: 90px 90px 0 0; border-bottom: 0; color: white; }
.star-icon-container span { margin-top: 7px; text-shadow: 0 2px 5px #002828; }

.achievement-listing { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; min-width: 280px; }

.achievement-listing-element { display: inline-block; width: 46%; max-width: 128.8px; text-align: center; position: relative; margin: 1em 2% 1em 2%; }

.achievement-icon { position: relative; width: 80%; padding-top: 80%; border-radius: 10px; margin: auto; display: flex; }

.achievement-icon img { position: absolute; top: 0; width: 100%; height: auto; border-radius: 10px; padding: 12px; }

.achievement-checkmark { font-size: 150%; width: 1.5em; height: 1.5em; border-radius: 0.75em; background-color: gray; color: white; display: grid; align-items: center; justify-items: center; position: absolute; left: -0.5em; top: -0.5em; border: 2px solid white; }

.achievement-description { margin-top: .25em; }

.achievement-description-nutrient { text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }

.protein-achievement .achievement-description-nutrient { color: #4e256f; }

.vegetables-achievement .achievement-description-nutrient { color: #006600; }

.dairy-achievement .achievement-description-nutrient { color: #00529B; }

.grains-achievement .achievement-description-nutrient { color: #983300; }

.fruit-achievement .achievement-description-nutrient { color: #990011; }

@media (orientation: portrait) and (max-width: 1280px) { .achievement-listing-element { width: 40%; } }
@media (orientation: landscape) and (max-height: 520px) { #ACHIEVEMENT-WINDOW { max-height: 100%; width: auto; max-width: 100%; }
  .achievement-listing { flex-wrap: nowrap; }
  .achievement-listing-element { width: 30%; }
  #ACHIEVEMENT { overflow-y: auto; } }
/*
	====================================================	GAUGUES AND TALLIES
*/
.gauge-container { display: flex; }

.gauge { position: relative; width: 10em; height: 1.1em; background-color: #ccc; outline: 1px solid white; }

.gauge > div { position: absolute; top: 0px; height: 1.1em; }

.gauge .max-value { background-color: #999; width: 100%; left: 0px; }

.gauge .current-value { background-color: black; width: 0px; left: 0px; transition: width 0.5s ease; }

.gauge .division { width: 2px; background-color: white; }

#fruit-tally { color: #990011; }

.fruit-gauge .current-value { background-color: #af0000; }

.fruit-gauge .max-value { background-color: #ffc4d5; }

#vegetables-tally { color: #006600; }

.vegetables-gauge .current-value { background-color: #11aa22; }

.vegetables-gauge .max-value { background-color: #e0f3a7; }

#protein-tally { color: #4e256f; }

.protein-gauge .current-value { background-color: #9020a0; }

.protein-gauge .max-value { background-color: #dbcbe5; }

#grains-tally { color: #983300; }

.grains-gauge .current-value { background-color: #da6a00; }

.grains-gauge .max-value { background-color: #f7ddcb; }

#dairy-tally { color: #00529B; }

.dairy-gauge .current-value { background-color: #0062cB; }

.dairy-gauge .max-value { background-color: #c3e1f5; }

/*
	ALERTS
*/
#alerts-tally { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5px; }

.alert-tally-box { border: 2px solid red; border-radius: 4px; display: grid; grid-template-columns: 2em 1fr; background-color: white; align-items: stretch; justify-items: stretch; height: 2em; }

.alert-tally-box .alert-icon { width: 2em; display: flex; align-items: center; justify-content: center; height: calc(2em); }
.alert-tally-box .alert-icon img { height: 100%; width: auto; }

.alert-tally-box > :nth-child(2) { display: grid; align-items: center; justify-items: center; color: white; font-weight: bold; border-left: 1px solid white; height: calc( 2em ); border-radius: 0; }

.alert-warning { display: inline-flex; height: 36px; padding: 0; min-width: 120px; background: white; border: 2px solid transparent; align-items: stretch; justify-items: stretch; border-radius: 4px; }

#salt-alert, #salt-warning { border: 0; background: #f80a64; background: linear-gradient(90deg, #f83982 10%, #b40a32 90%); }

#sugar-alert, #sugar-warning { border: 0; background: #0ab4be; background: linear-gradient(90deg, #0ab4be 10%, #00646e 90%); }

#fat-alert, #fat-warning { border: 0; background: #dd32c8; background: linear-gradient(90deg, #dd0ac8 10%, #aa0096 90%); }

.alert-icon img { height: 32px; width: 100%; padding: 1px; }

.alert-warning .alert-text { display: flex; align-items: center; justify-items: center; background-color: transparent; color: white; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; padding: 4px 6px; }

@media only screen and (max-width: 768px) { #SUMMARY { padding: 5px; }
  .alert-warning { min-height: 32px; min-width: 90px; font-size: 15px; }
  .gauge { height: 1em; }
  .gauge > div { height: 1em; }
  .gauge .division { width: 1px; } }
/*
	====================================================	NUTRITION LABELS
*/
.servings-infobox { position: relative; border: 1px solid black; display: grid; width: 200px; grid-template-columns: 50px 1fr; background-color: violet; border-radius: 10px; }

.servings-infobox > div:nth-child(1) { background-color: black; color: white; display: grid; grid-template-columns: 1fr 1fr; }

.servings-infobox > div:nth-child(1) img { position: absolute; left: -5px; top: -5px; }

.serving-description { height: 1.9rem; padding-top: 2px; font-size: 1rem; }

.serving-size-container { position: relative; display: flex; flex-wrap: wrap; flex: 1; }

.servings-size { width: calc(100% - 41px); left: 41px; padding: 6px 0 6px; }

.servings-bars { top: -40%; }

.infobox-title { font-size: .9rem; margin: auto auto auto 5px; flex: 1 1 60%; }

.servings-text { font-size: 1.1rem; flex: 0 0 40%; }

.bar-container { border: 1px solid white; margin: 0; }

.servings-icon { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }

.dairy-icon { background-image: url(../engine-images/dairy-icon.png); background-image: url(../engine-images/dairy-icon.svg); }

.protein-icon { background-image: url(../engine-images/protein-icon.png); background-image: url(../engine-images/protein-icon.svg); }

.grains-icon { background-image: url(../engine-images/grains-icon.png); background-image: url(../engine-images/grains-icon.svg); }

.vegetables-icon { background-image: url(../engine-images/vegetables-icon.png); background-image: url(../engine-images/vegetables-icon.svg); }

.fruits-icon { background-image: url(../engine-images/fruits-icon.png); background-image: url(../engine-images/fruits-icon.svg); }

.limit-icon { background-image: url(../engine-images/limit-icon.png); background-image: url(../engine-images/limit-icon.svg); }

.approach { animation: approach-and-settle 0.35s ease-out; }

@keyframes approach-and-settle { 0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); } }
/*
	-----------------------------------------------------------	Loading Screen
*/
#loading-screen { display: grid; align-items: center; justify-items: center; width: 100vw; height: 100vh; position: absolute; left: 0px; top: 0px; background-color: #c0cbcf; transition: all 0.5s ease; }

#loading-panel { padding: 2em; border-radius: 10px; background-color: #ccc; color: #222; max-width: 80vw; transition: all 0.5s ease; }

#loading-panel h1 { text-align: center; font-size: 20px; font-weight: bold; }

/*
	-----------------------------------------------------------	Onboarding
*/
.onboarding-message { position: absolute; background-color: white; padding: 1em; border-radius: 1em; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)); border: 2px solid #010C14; }

.onboarding-message button.secondary-button { border: none !important; margin-top: 2px; font-size: 14px; color: #05174a; }
.onboarding-message button.secondary-button:hover { border: none !important; background: none; text-decoration: underline; }
.onboarding-message button.secondary-button:active { border: none !important; color: #0c698a; background: none; }

.onboarding-message h2 { text-align: center; font-size: 1.8rem; font-weight: normal; font-style: italic; margin: .25em auto; line-height: 1; color: #05174a; }

.onboarding-message p { line-height: 1.5; }

.onboarding-message button { width: 100%; }

#onboarding-one-message { left: 275px; top: 25px; width: calc( 100vw - 300px ); max-width: 300px; }

.onboarding-arrow { position: absolute; display: block; width: 70px; height: 70px; left: -70px; top: 20px; background-size: 100% 100%; background-image: url(../engine-images/arrow-left-bold.svg); z-index: -1; }

#onboarding-two-message { left: 180px; top: 60px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-two-arrow { top: 40px; }

#onboarding-three-message { left: 265px; top: 280px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-three-arrow { top: 180px; }

#onboarding-four-message { left: 105px; bottom: 100px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-four-arrow { top: auto; bottom: -70px; transform: rotate(-90deg); left: auto; }

@media only screen and (max-width: 768px) { #onboarding-one-message { left: 20vw; top: 200px; width: 80vw; max-width: 300px; }
  .onboarding-arrow { transform: rotate(90deg); top: -70px; left: calc(50% - 38px); }
  #onboarding-two-message { left: 20px; top: 160px; width: 80vw; max-width: 300px; }
  #onboarding-two-arrow { top: -70px; left: 50px; }
  #onboarding-three-message { left: auto; right: 50px; top: 330px; width: 80vw; max-width: 300px; }
  #onboarding-three-arrow { top: -70px; left: auto; right: 50px; transform: rotate(270deg) scaleX(-1); }
  #onboarding-four-message { left: 20vw; top: auto; bottom: 125px; width: 80vw; max-width: 300px; }
  #onboarding-four-arrow { top: auto; transform: rotate(270deg) scaleY(-1); bottom: -70px; } }
/*# sourceMappingURL=engine.css.map */
html, body { margin: 0px; padding: 0px; background-color: #000; color: #010C14; font-family: 'Lato', 'Helvetica', sans-serif; }

* { box-sizing: border-box; }

.lead { font-size: 110%; }

/**** LAYOUT **************************************************************************/
#APP { width: 100vw; height: 100vh; min-width: 300px; position: relative; background-color: #c0cbcf; background-color: #0c698a; background-image: linear-gradient(to bottom, #0c698a 0%, #05174a 80%); }

#APP > * { position: absolute; }

.desktop-hide { display: none; }

.mobile-hide { display: inherit; }

@media only screen and (max-width: 768px) { .desktop-hide { display: inherit; }
  .mobile-hide { display: none !important; } }
/*
	These classes handle displaying things as either full-screen
	or split-screen showing the area on the left or top where the
	tallies are shown.
*/
.FULL-SCREEN { position: absolute; left: 0px; top: 0px; width: 100vw; min-width: 270px; height: 100vh; overflow: hidden; }

.SPLIT-SCREEN { position: absolute; left: 300px; top: 0px; width: calc( 100vw - 300px ); height: 100vh; overflow: hidden; transition: top .2s ease-in-out; }

/*
	Blocks clicks on a modal dialog.
*/
.CLICK-BLOCKER { background-color: red; opacity: 0.0; pointer-events: auto; }

/*
	A dialog that doesn't cover the side panel.
*/
.MODAL-DIALOG { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; overflow-y: auto; overflow-x: hidden; }

#PLATE-DISPLAY { display: grid; overflow: hidden; }

#PLATE-DISPLAY { grid-template-columns: 300px 1fr; }

@media (orientation: portrait) and (max-width: 1280px) { .SPLIT-SCREEN { left: 0px; top: -2px; width: 100vw; height: auto; z-index: 2; }
  .SPLIT-SCREEN.pushed-down { top: 261; }
  #PLATE-DISPLAY { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 43px; }
  #PLATES { flex-grow: 1; } }
/* ===== Scrollbar CSS ===== */
/* Firefox */
* { scrollbar-width: auto; scrollbar-color: #8f54a0 #ffffff; }

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 12px; position: relative; }

*::-webkit-scrollbar-track { background: #ffffff; }

*::-webkit-scrollbar-thumb { background-color: #8f54a0; border-radius: 10px; border: 1px solid #ffffff; z-index: 10; }

/**** BUTTON STYLES **************************************************************************/
button.primary-button, button.secondary-button { font-size: 18px; border-radius: 18px; padding: 10px 40px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .05rem; font-weight: bold; transition: transform .3s ease-in-out; }

button.primary-button { background-color: #9A0093; border: 2px solid #9A0093; color: white; }
button.primary-button:hover { color: white; background-color: #dAa0d3; }
button.primary-button:active { color: white; background-color: #5A0053; transform: scale(0.95); }
button.primary-button[disabled] { opacity: 0.25; pointer-events: none; }

button.secondary-button { background-color: white; border: 2px solid #9A0093; color: #9A0093; }
button.secondary-button:hover { background-color: #eAb0e3; color: #5A0053; }
button.secondary-button:active { color: white; background-color: #5A0053; transform: scale(0.95); }
button.secondary-button[disabled] { opacity: 0.25; pointer-events: none; }

.close-button { position: absolute; right: 0px; top: 0px; padding: 0px; width: 40px; height: 40px; border: none; background-color: transparent; color: #404D55; font-weight: bold; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 1; }

button.back-button .mobile-hide { display: inline; }
button.back-button.primary-button, button.back-button.secondary-button { padding: 8px; font-size: 15px; }

.button-container { display: flex; justify-content: center; }
.button-container button { margin: 4px; }

.primary-button#finish-button { border-color: white; }

@media only screen and (max-width: 768px) { button.primary-button, button.secondary-button { font-size: 16px; border-radius: 12px; padding: 8px 12px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .04rem; font-weight: bold; } }
@media only screen and (max-width: 480px) { button.primary-button, button.secondary-button { font-size: 16px; border-radius: 12px; padding: 6px 20px; transition: all 0.1s ease; cursor: pointer; text-transform: uppercase; letter-spacing: .04rem; font-weight: bold; } }
/**** MY PLATE TALLY SIDE BAR **************************************************************************/
#SIDEBAR { padding: 1em; display: flex; flex-direction: column; justify-content: center; align-content: space-around; }

#MYDAY-WIDGET { position: relative; background: white; border-radius: 10px; margin-top: 40px; margin-bottom: auto; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }

#META-PANEL { position: relative; display: flex; justify-content: center; padding: 4px; padding-top: 40px; cursor: pointer; }
#META-PANEL p { display: block; text-align: center; margin: 0 auto; }
#META-PANEL p.app-title { font-size: 1.1rem; }
#META-PANEL p.app-title .myplate-title { font-weight: bold; }
#META-PANEL p.app-title .myday-title { font-style: italic; font-family: 'Raleway'; }
#META-PANEL #myplate-icon { position: absolute; top: -40px; height: 80px; width: 40%; text-align: center; left: calc(30% + 5px); margin: auto; transition: transform 0.4s ease-in-out; }
#META-PANEL #myplate-icon img { height: auto; width: 100%; }
#META-PANEL #myplate-icon:hover #myplate-icon { transform: scale(1.1); }

#NUTRITION-TALLY { padding: .0em 1em; display: flex; flex-direction: column; align-items: stretch; }
#NUTRITION-TALLY .entry { margin-bottom: 1em; }
#NUTRITION-TALLY .entry .title { font-weight: bold; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
#NUTRITION-TALLY .amount-display { display: inline; font-size: 15px; }
#NUTRITION-TALLY .amount-display .amount { font-weight: bold; }

#FINISH-PANEL { justify-self: stretch; align-self: stretch; position: relative; display: flex; align-items: center; justify-items: stretch; flex-wrap: wrap; background: transparent; }

#FINISH-PANEL button { flex-grow: 1; padding: 10px; margin: 1% auto; border-radius: 14px; }

#alerts-box { border-top: 1px solid #a8c5c9; padding: .5em; }

@media (orientation: landscape) and (max-width: 1024px) { #PLATE-DISPLAY { grid-template-columns: 260px 1fr; }
  .SPLIT-SCREEN { left: 260px; top: 0px; width: calc( 100vw - 260px ); } }
@media (orientation: portrait) and (max-width: 1280px) { #SIDEBAR { justify-content: flex-start; padding: 0; border-top: 10px solid #9A0093; }
  #FINISH-PANEL { width: 100%; }
  #MYDAY-WIDGET { border-radius: 0; margin-top: 40px; }
  #META-PANEL { position: absolute; padding: 0; left: 0; top: -45px; width: 100%; justify-content: flex-start; background: white; border-bottom: 2px solid #9A0093; }
  #META-PANEL #MYPLATE-LINKOUT { position: relative; padding-left: 80px; height: 43px; align-items: center; display: flex; justify-content: stretch; width: calc(100% - 80px); border-radius: 10px 10px 0 0; }
  #META-PANEL p { display: flex; flex-grow: 1; height: 100%; align-items: center; }
  #META-PANEL p.app-title { margin-left: 0; flex-grow: 3; text-align: left; }
  #META-PANEL p.diet-category { border-left: 2px solid #DFF4F5; text-align: left; padding-left: 15px; }
  #META-PANEL #myplate-icon { top: 0; left: 10px; width: 65px; height: 40px; }
  #NUTRITION-TALLY { padding-top: 10px; flex-flow: row; flex-wrap: wrap; }
  #NUTRITION-TALLY .entry { width: 50%; margin-bottom: 0.5em; }
  #alerts-box { position: absolute; right: 0; bottom: 0; width: calc(50% - 2px); border-top: none; }
  #FINISH-PANEL { position: fixed; bottom: 0; justify-content: center; padding: 0; flex-wrap: nowrap; z-index: 1; }
  #FINISH-PANEL button { margin: auto; border-radius: 0; width: 50%; flex-grow: 1; border: none; } }
@media (orientation: landscape) and (max-height: 520px) { #SIDEBAR { justify-content: flex-start; padding: 0; border-top: 10px solid #9A0093; background: #fff; }
  #MYDAY-WIDGET { border-radius: 0; margin-top: 40px; height: 100vh; }
  #META-PANEL { position: absolute; padding: 0; left: 0; top: -45px; width: 100%; justify-content: flex-start; background: white; border-bottom: 2px solid #9A0093; }
  #META-PANEL #MYPLATE-LINKOUT { position: relative; height: 43px; align-items: center; display: flex; justify-content: stretch; width: calc(100% - 70px); border-radius: 10px 10px 0 0; padding-left: 70px; }
  #META-PANEL p { display: flex; flex-grow: 1; height: 100%; align-items: center; }
  #META-PANEL p.app-title { margin-left: 0; margin-right: 5px; flex-grow: 3; font-size: 1em; text-align: left; }
  #META-PANEL p.diet-category { border-left: 2px solid #DFF4F5; text-align: left; padding-left: 5px; }
  #META-PANEL #myplate-icon { top: 0; left: 10px; width: 60px; height: 38px; }
  #NUTRITION-TALLY { padding: 10px 8px; flex-flow: row; flex-wrap: wrap; }
  #NUTRITION-TALLY .entry { width: 50%; }
  #alerts-box { position: absolute; right: 0; bottom: auto; top: 180px; width: calc(60% - 2px); border-top: none; }
  #FINISH-PANEL { position: absolute; bottom: 0; width: 300px; justify-content: center; padding: 0; z-index: 1; }
  #FINISH-PANEL button { width: 100%; margin: auto; border-radius: 0; }
  .primary-button#finish-button { border: none; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) { #FINISH-PANEL { width: 260px; } }
/***PLATES***************************************************************************************/
#PLATES { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 3px; grid-row-gap: 3px; align-items: stretch; justify-items: stretch; padding: 0em; width: 100%; min-height: 400px; }

#PLATES > div { position: relative; display: grid; align-items: center; justify-items: center; }

.food-button { max-width: 10vw; max-height: 10vh; }

.add-food-prompt { width: 84%; height: 84%; display: grid; align-items: center; justify-items: center; text-align: center; letter-spacing: .03em; color: #404D55; font-size: 1.5rem; margin: 8%; }

.clickable-to-add-food { cursor: pointer; font-style: italic; }

.fork { height: 70%; top: 20%; width: auto; position: absolute; left: -20%; }

#plates > div { position: relative; }

.plate-setting { width: calc(min( 108vw * 0.5 - 150px, 108vh * 0.5 )); height: calc(min( 108vw * 0.5 - 150px, 108vh * 0.5 )); min-width: 200px; min-height: 200px; background: url(../engine-images/plate-setting.png); background-size: 24% 45%; background-repeat: no-repeat; background-position: 1% center; position: absolute; }

.plate { width: calc(min( 100vw * 0.5 - 150px, 100vh * 0.5 )); height: calc(min( 100vw * 0.5 - 150px, 100vh * 0.5 )); min-width: 170px; min-height: 170px; }

.plate { background-image: url(../engine-images/plate.png); background-size: 80% 80%; background-repeat: no-repeat; background-position: center; position: relative; }

.plate .beverage { width: 21%; height: 21%; position: absolute; z-right: 7%; top: 7%; }

.plate .first-beverage { right: 0%; top: 15%; z-index: 1; }

.plate .second-beverage { right: 12%; top: 2%; }

.plate .only-beverage { right: 5%; top: 7%; }

.plate .meal-title { position: absolute; font-weight: bold; letter-spacing: .08em; font-style: italic; font-size: 1.3rem; top: -5px; left: 5%; right: 5%; padding: 4%; color: white; text-align: center; pointer-events: none; }

.plate .foods { position: absolute; width: 66%; height: 66%; left: 17%; top: 17%; }

.plate .foods .entree { position: absolute; width: 50%; height: 75%; }

.plate .foods .side { position: absolute; top: 0px; left: 0px; width: 50%; height: 50%; }

.add-food-button { display: flex; align-items: center; justify-content: center; width: calc(min( 6vw, 6vh )); height: calc(min( 6vw, 6vh)); width: 15%; height: 15%; position: absolute; right: 2vw; right: 5%; left: inherit; top: calc( 50% - 2vw); padding: 2px; background-color: #9A0093; color: white; border-radius: 50%; border: 3px solid #9A0093; font-size: calc(max(1em , 3vh) ); cursor: pointer !important; transition: all .3s ease-in-out; }
.add-food-button:hover { transform: scale(1.1); background: white; color: #9A0093; border-color: #9A0093; }
.add-food-button:active { transform: scale(0.95); }
.add-food-button:focus { outline-color: #5DF; }

.plate .beverage, .plate .entree, .plate .side { transition: transform 0.125s ease; cursor: pointer; }

.plate .beverage:hover, .plate .entree:hover, .plate .side:hover { transform: scale(1.2) rotate(2deg); }

@media only screen and (min-width: 1281px) { .plate .meal-title { font-size: 1.6rem; } }
@media only screen and (max-width: 768px) { .add-food-button { width: calc(min( 8vw, 8vh )); height: calc(min( 8vw, 8vh)); padding: 2px; bottom: 0; top: calc( 50% - 4vw); font-size: calc( 22px ); }
  .add-food-prompt { width: 90%; margin: auto; font-size: 18px; }
  .plate .meal-title { font-size: 1.1rem; top: 0px; } }
@media (orientation: portrait) and (max-width: 1280px) { #PLATES { height: calc(100vh - 300px); min-height: 200px; padding: 10px 1vw; width: 98vw; margin: auto; }
  .plate { width: calc(min( 98vw * 0.5, 100vh * 0.5 - 143px )); height: calc(min( 98vw * 0.5, 100vh * 0.5 - 143px )); min-height: auto; min-width: auto; }
  .plate-setting { width: calc(min( 105vw * 0.5, 105vh * 0.5 - 143px )); height: calc(min( 105vw * 0.5, 105vh * 0.5 - 143px )); min-height: auto; min-width: auto; }
  .plate .meal-title { top: -1vh; } }
@media (orientation: landscape) and (max-height: 520px) { #PLATES { height: 100vh; }
  .plate .meal-title { font-size: 1rem; top: 0px; }
  .add-food-prompt { font-size: 16px; } }
@media only screen and (max-width: 480px) { .add-food-prompt { font-size: 14px; }
  .plate .meal-title { font-size: .9rem; }
  .plate { min-width: auto; min-height: auto; }
  .plate-setting { min-width: auto; min-height: auto; } }
/*
	=====================================================	CHOOSE A FOOD WINDOW
*/
/*
	Special case - the plate is full!
	Added by CC 4/5/2021
*/
.out-of-room-notice { height: 100%; width: 100%; display: grid; align-items: center; justify-items: center; background-color: rgba(0, 0, 0, 0.5); }

.out-of-room-notice > div { background-color: white; padding: 2em; border-radius: 1em; position: relative; }

.out-of-room-notice .primary-button { width: 100%; }

/*
	End special case
*/
.food-type-header { top: 0; padding: 1em; width: 100%; background-color: #333; color: white; font-weight: bold; margin-top: 1em; }

.food-entry { display: inline-grid; grid-template-rows: 100px 1fr; margin: 2em 0px; align-items: center; justify-items: center; width: 200px; margin: 1em; text-align: center; background-color: #efefff; padding: 20px; border-radius: 20px; cursor: pointer; }

.food-entry.entree { grid-template-rows: 200px 1fr; }

.food-entry img { height: 100px; }

.food-entry.entree img { height: 200px; }

.food-entry > :nth-child(2) { align-self: center; justify-self: stretch; margin-top: 10px; }

#FOOD-CHOICES-DIALOG { width: 100%; height: 100vh; animation: slide-in .3s ease-out; }

@keyframes slide-in { 0% { transform: translateX(100%); margin-right: 100%; opacity: .5; }
  100% { transform: translateX(0); opacity: 1; right: 0; } }
@keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }
#CHOOSE-A-FOOD { padding: 1em 0; background-color: #102540; background-color: #d0dada; width: 100%; height: calc(100% + 180px); }

#choose-a-food-heading { position: absolute; width: calc(100% - 12px); background: rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 98%, rgba(255, 255, 255, 0) 100%); top: 0; left: 0; padding: 1em; height: 130px; z-index: 1; animation: fade-in .3s ease-out; animation-delay: .3s; animation-fill-mode: backwards; }
#choose-a-food-heading h2 { font-weight: normal; width: calc(100% - 180px); margin: 0 auto .5em; text-align: center; font-size: 1.5rem; }
#choose-a-food-heading button.back-button { position: absolute; left: 15px; top: .5em; }

#filters { text-align: center; padding: .5em; border-top: 2px solid #c0cbcf; }

.filters-title { text-transform: uppercase; color: #404D55; font-size: 14px; margin-bottom: .25em; }

#filter-list { display: flex; justify-content: center; width: 100%; }

.filter-category { background: white; flex-grow: 1; padding: 5px; color: #404D55; padding: 4px 8px; font-size: 18px; margin: 0 4px; border: 2px solid #5A0053; color: #5A0053; border-radius: 8px; cursor: pointer; transition: all .3s ease-in-out; }
.filter-category:hover { background: none; color: white; background-color: #5A0053; transform: scale(1.1); }
.filter-category:active { transform: scale(0.95); }
.filter-category.active-filter { position: relative; color: white; background: #9A0093; border-color: white; }
.filter-category.active-filter .filter-checkmark { position: absolute; bottom: -6px; display: flex; display: none; align-items: center; justify-content: center; width: 16px; height: 16px; left: calc(50% - 8px); color: #9A0093; font-size: 16px; border-radius: 50%; }

#filters-toggle .toggle-arrow { transition: transform 0.25s ease; display: inline-block; transform: rotate(0deg); }

#filters-toggle .toggle-arrow.show { transform: rotate(90deg); }

.filter-category.filtering { background-color: #036; color: white; }

.filter-notice { margin: auto; padding: 20px 5px; display: flex; }
.filter-notice p { margin: auto; font-size: 1.1em; }

#FOOD-SELECTOR { position: relative; top: calc(170px + 2em); }

.filtered-category-display { border-top: .5em solid #bbb; padding: .5em 1em 1em 1em; margin: 0px 0px 3px; }

.filtered-food-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; }

.filtered-food-item { position: relative; display: flex; flex-direction: column; align-items: baseline; justify-items: center; width: calc(25% - 20px); height: 190px; background-color: white; border-radius: 3px; padding: 5px; border: 2px solid transparent; text-align: center; margin: 10px; cursor: pointer; transition: all .3s ease-in-out; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
.filtered-food-item:before { position: absolute; left: .5em; top: .5em; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; line-height: 1; padding: 4px 5px; font-size: 14px; background: rgba(255, 255, 255, 0.8); margin: 0; text-align: center; border: 2px solid #9A0093; border-radius: 50%; color: #9A0093; content: '\f067'; font-family: "Font Awesome 5 Free"; }
.filtered-food-item:hover { border-color: #9A0093; }
.filtered-food-item:hover .filtered-food-image { background-size: auto 120%; }
.filtered-food-item:active { transform: scale(0.95); }

.filtered-food-image { width: 130px; height: 130px; margin: 0 auto auto; background-size: auto 100%; background-position: center; background-repeat: no-repeat; transition: all .3s ease-in-out; -webkit-box-shadow: inset 0 0 5px 5px white; -moz-box-shadow: inset 0 0 5px 5px white; box-shadow: inset 0 0 5px 5px white; }

.filtered-food-title { display: flex; align-items: center; margin: auto auto 0; justify-content: center; height: 50px; }

.filtered-category-main-dish { border-color: #37a7b6; }

.filtered-category-fruit { border-color: #df4e55; }

.filtered-category-vegetable { border-color: #4aa07d; }

.filtered-category-protein { border-color: #9450c9; }

.filtered-category-grain { border-color: #d78e36; }

.filtered-category-dairy { border-color: #3074d2; }

.filtered-category-drinks { border-color: #a9a3b6; }

.filtered-category-other { border-color: #a0b3b6; }

.filtered-category-title { font-weight: bold; font-size: 1.4rem; opacity: .7; margin-left: 1em; }

#push-down-button-container { display: none; position: absolute; top: 0; right: 0; z-index: 10; }
#push-down-button-container button { height: 30px; width: 60px; padding: 0; border-radius: 0 0 20px 20px; }

#filters { justify-content: center; display: flex; flex-direction: column; }
#filters > div { margin: auto; }

#filter-list { display: none; top: 10px; }

#filter-list.show { position: relative; display: flex; background: white; border-radius: 10px; padding: .5em; width: 80%; flex-wrap: wrap; justify-content: center; box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); border: 2px solid #9A0093; }
#filter-list.show:before { position: absolute; width: 100%; left: 0; top: -21px; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; line-height: 1; font-size: 30px; margin: 0; text-align: center; color: #9A0093; content: '\f0d8'; font-family: "Font Awesome 5 Free"; }

.filter-category { padding: 6px 14px; margin: 4px; flex-grow: 0; }

@media only screen and (max-width: 960px) { .filtered-food-item { width: calc(33% - 20px); } }
@media only screen and (min-width: 1281px) { .filtered-food-item { width: calc(20% - 20px); } }
@media only screen and (max-width: 768px) { #CHOOSE-A-FOOD { padding: 0; height: calc(100% + 240px); }
  #choose-a-food-heading { left: 0; }
  #choose-a-food-heading button.back-button { left: 10px; height: 40px; width: 40px; padding: 0; border-radius: 50%; border-width: 3px; }
  #choose-a-food-heading h2 { width: calc(100% - 80px); font-size: 1.4rem; }
  #FOOD-SELECTOR { top: calc(220px + 2em); }
  .filtered-category-display { padding: .75em; margin: 0px 0px 10px; border-radius: 0px; }
  .filtered-category-title { font-size: 1.2rem; text-align: center; margin-bottom: 10px; }
  .filtered-food-item { width: calc(50% - 20px); height: 190px; background-color: white; border-radius: 3px; padding: 5px; text-align: center; margin: 1%; } }
@media only screen and (orientation: portrait) and (max-width: 1280px) { #push-down-button-container { display: flex; } }
/*
	================================================	FOOD DETAIL VIEW WINDOW
*/
#FOOD-DETAIL-VIEW { padding: 2vh; display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; height: 100%; width: 100%; overflow: hidden; }

#FOOD-DETAIL-WINDOW { position: relative; background-color: white; border: 1px solid #404D55; display: flex; align-items: flex-start; min-width: 80%; max-width: 100%; overflow: hidden; border-radius: 1em; min-height: 60vh; }

@media (max-width: 768px) { #FOOD-DETAIL-WINDOW { grid-template-columns: 1fr; } }
#NUTRIENT-COLUMN { padding: 1em 0 1em 1em; position: relative; z-index: 1; }

#FOOD-INFO { padding: 1em 1em 2em 0; position: relative; flex-grow: 1; z-index: 1; margin-left: 1.2vw; margin-bottom: 20%; background: rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%); }
#FOOD-INFO h1, #FOOD-INFO h2 { font-size: 2.6rem; letter-spacing: 0.02em; font-weight: 500; margin: .3rem auto .3rem; font-family: 'Raleway', sans-serif; color: #404D55; max-width: 650px; }
#FOOD-INFO p { font-size: 1.1rem; line-height: 1.8rem; max-width: 650px; margin: .3rem auto .5em; color: #404D55; }

#FOOD-PHOTO { position: absolute; bottom: 0; z-index: 0; opacity: 1; top: 10vh; right: 10vw; left: 260px; text-align: center; display: flex; justify-content: center; align-items: flex-start; }

#FOOD-PHOTO > img { position: relative; width: auto; height: 100%; bottom: -10vh; }

#alerts-header { text-align: center; font-weight: bold; margin-bottom: .25em; }

#FOOD-ALERTS { display: flex; flex-wrap: wrap; flex-flow: row; max-width: 650px; margin: auto; margin: auto; }

#FOOD-ALERTS .alert-warning { margin-right: 10px; }

/*
	Nutrition Placards
*/
.nutrition-placard { width: 100%; min-width: 230px; max-width: 250px; position: relative; display: flex; margin: 5px auto 10px; }

.nutrition-placard .gauge-placement { position: absolute; left: 65px; top: 0px; ztransform: scale(0.7); transform-origin: left center; }

.nutrition-placard .card { margin: 10px; background-color: #666; border: 1px solid #666; color: white; padding: 0px; width: calc(100% - 20px); display: grid; border-radius: 2px; }

.nutrition-placard .nutrient-card-row { position: relative; padding: 10px; padding-left: 50px; text-align: left; font-weight: bold; text-transform: uppercase; }

.nutrition-placard .nutrient-name { font-size: 15px; letter-spacing: .02em; }

.nutrition-placard .nutrient-measure { float: right; font-weight: bold; font-size: 17px; }

.nutrition-placard .nutrient-description { padding: 10px; background-color: white; border-radius: 0px 0px 1px 1px; color: #666; }

.nutrition-placard .serving-icon { position: absolute; height: calc(100% - 4px); left: 2px; top: 2px; z-index: 1; padding: 0; background-color: #666; }

.nutrition-placard .serving-icon img { height: 100%; width: auto; }

.fruit-nutrition-placard .card { background-color: #990011; border: 1px solid #990011; }

.fruit-nutrition-placard .nutrient-description { color: #990011; }

.fruit-nutrition-placard .serving-icon, .fruit-achievement .achievement-icon { background-color: #990011; }

.fruit-achievement .achievement-checkmark { background-color: #af0000; }

.vegetables-nutrition-placard .card { background-color: #006600; border: 1px solid #006600; }

.vegetables-nutrition-placard .nutrient-description { color: #006600; }

.vegetables-nutrition-placard .serving-icon, .vegetables-achievement .achievement-icon { background-color: #006600; }

.vegetables-achievement .achievement-checkmark { background-color: #11aa22; }

.protein-nutrition-placard .card { background-color: #4e256f; border: 1px solid #4e256f; }

.protein-nutrition-placard .nutrient-description { color: #4e256f; }

.protein-nutrition-placard .serving-icon, .protein-achievement .achievement-icon { background-color: #4e256f; }

.protein-achievement .achievement-checkmark { background-color: #9020a0; }

.grains-nutrition-placard .card { background-color: #983300; border: 1px solid #983300; }

.grains-nutrition-placard .nutrient-description { color: #983300; }

.grains-nutrition-placard .serving-icon, .grains-achievement .achievement-icon { background-color: #983300; }

.grains-achievement .achievement-checkmark { background-color: #da6a00; }

.dairy-nutrition-placard .card { background-color: #00529B; border: 1px solid #00529B; }

.dairy-nutrition-placard .nutrient-description { color: #00529B; }

.dairy-nutrition-placard .serving-icon, .dairy-achievement .achievement-icon { background-color: #00529B; }

.dairy-achievement .achievement-checkmark { background-color: #0062cB; }

@media only screen and (min-width: 768px) and (max-width: 1024px) { #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-PHOTO { right: 0; align-items: flex-end; }
  #FOOD-PHOTO img { height: 80%; } }
@media only screen and (max-width: 768px) { #FOOD-DETAIL-VIEW { padding: 1vh; }
  #FOOD-INFO { padding-bottom: 5em; }
  #FOOD-INFO h1 { font-size: 1.8rem; margin: .4em auto .4em; }
  #FOOD-INFO p { line-height: 1.4rem; margin: .5em auto; }
  #NUTRIENT-COLUMN { padding: 1em 0 .5em .5em; }
  .nutrition-placard { width: 160px; min-width: 160px; }
  .nutrition-placard .gauge-placement { left: 10px; top: -5px; width: calc(100% - 20px); display: flex; justify-content: center; }
  .nutrition-placard .gauge-container { display: block; }
  .nutrition-placard .gauge { margin: auto; }
  .nutrition-placard .nutrient-card-row { padding: .3em; font-size: 15px; }
  .nutrition-placard .serving-icon { display: none; }
  .nutrition-placard .nutrient-description { font-size: 15px; padding: .3em; }
  #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-ALERTS .alert-warning { margin-right: 5px; height: auto; width: auto; }
  #FOOD-ALERTS .alert-warning .alert-text { display: inline-flex; width: auto; font-size: 14px; margin: auto 0; }
  #FOOD-ALERTS .alert-warning .alert-text > * { margin: 3px; }
  #FOOD-PHOTO { left: 200px; right: 0vw; align-items: flex-end; }
  #FOOD-PHOTO img { height: 70%; bottom: -50px; } }
@media (orientation: landscape) and (max-height: 520px) { #FOOD-DETAIL-VIEW { justify-content: flex-start; align-items: flex-start; overflow-y: auto; }
  #FOOD-INFO { padding-bottom: 5em; }
  #FOOD-INFO h1 { font-size: 1.3rem; margin: .4em auto .4em; }
  #FOOD-INFO p { line-height: 1.2rem; font-size: .95rem; margin: .5em auto; }
  #NUTRIENT-COLUMN { padding: 1em 0 .4em .4em; }
  .nutrition-placard { width: 160px; min-width: 160px; }
  .nutrition-placard .gauge-placement { left: 10px; top: -5px; width: calc(100% - 20px); display: flex; justify-content: center; }
  .nutrition-placard .gauge-container { display: block; }
  .nutrition-placard .gauge { margin: auto; }
  .nutrition-placard .nutrient-name, .nutrition-placard .nutrient-measure { font-size: 14px; }
  .nutrition-placard .nutrient-card-row { padding: .3em; font-size: 14px; }
  .nutrition-placard .serving-icon { display: none; }
  .nutrition-placard .nutrient-description { font-size: 14px; padding: .3em; }
  #FOOD-INFO .button-container { display: flex; flex-flow: column; }
  #FOOD-INFO .button-container button { margin-bottom: .2em; }
  #FOOD-INFO .button-container .secondary-button { order: 2; }
  #FOOD-ALERTS .alert-warning { margin-right: 5px; }
  #FOOD-PHOTO { left: 200px; right: 0vw; align-items: flex-end; }
  #FOOD-PHOTO img { height: 70%; bottom: -50px; } }
/*
	===========================================================	SUMMARY STATE
*/
#SUMMARY { display: grid; position: absolute; width: 100vw; height: 100vh; padding: 2em; align-items: center; justify-items: center; z-index: 2; overflow-y: auto; }

#SUMMARY-WINDOW { position: relative; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 21px; max-width: 60em; margin-top: auto; }
#SUMMARY-WINDOW #summary-window-heading { padding: 1.5em 2em 1em 2em; background: #0c698a; border-radius: 20px 20px 0 0; color: white; }
#SUMMARY-WINDOW #summary-window-heading h2 { margin: 0 auto .25em; text-align: center; font-size: 1.8rem; letter-spacing: 0.05em; margin: 0 auto; color: inherit; font-family: 'Raleway', sans-serif; font-weight: normal; }
#SUMMARY-WINDOW #summary-window-heading p { margin: .25em auto; font-size: 1.2rem; }
#SUMMARY-WINDOW .close-button { color: white; }
#SUMMARY-WINDOW #summary-window-body { padding: 1em 2em 2em 2em; color: #404D55; }
#SUMMARY-WINDOW p, #SUMMARY-WINDOW li { line-height: 1.4rem; }
#SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
#SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
#SUMMARY-WINDOW li { margin-bottom: .5em; }
#SUMMARY-WINDOW .summary-completions { display: flex; justify-content: center; flex-flow: wrap; }
#SUMMARY-WINDOW .achievement-listing-element { max-width: 110px; width: 33%; flex-shrink: 1; }
#SUMMARY-WINDOW p.summary-outtro { text-align: center; }
#SUMMARY-WINDOW .button-container { display: flex; justify-content: space-around; }

@media (orientation: portrait) and (max-width: 1280px) { #SUMMARY { padding: 0 1em; }
  #SUMMARY-WINDOW { width: 98%; left: 0; }
  #SUMMARY-WINDOW #summary-window-heading { padding: 1.5em .5em 1em .5em; }
  #SUMMARY-WINDOW #summary-window-heading h2 { font-size: 1.2rem; }
  #SUMMARY-WINDOW #summary-window-heading p { font-size: 1rem; }
  #SUMMARY-WINDOW #summary-window-body { padding: 1em 1.5em 2em 1.5em; color: #404D55; }
  #SUMMARY-WINDOW p, #SUMMARY-WINDOW li { font-size: .95rem; line-height: 1.4rem; }
  #SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
  #SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
  #SUMMARY-WINDOW li { margin-bottom: .5em; }
  #SUMMARY-WINDOW .button-container { flex-flow: wrap; } }
@media (orientation: landscape) and (max-height: 520px) { #SUMMARY-WINDOW #summary-window-heading { padding: 1.5em 1em 1em 1em; }
  #SUMMARY-WINDOW #summary-window-heading h2 { font-size: 1.2rem; }
  #SUMMARY-WINDOW #summary-window-heading p { font-size: 1rem; }
  #SUMMARY-WINDOW #summary-window-body { padding: 1em 1.5em 2em 1.5em; color: #404D55; }
  #SUMMARY-WINDOW p, #SUMMARY-WINDOW li { font-size: .95rem; line-height: 1.4rem; }
  #SUMMARY-WINDOW .completion-prefix { text-align: center; margin-bottom: .25em; }
  #SUMMARY-WINDOW ul, #SUMMARY-WINDOW ol { margin: 0 auto; padding-left: 1em; }
  #SUMMARY-WINDOW li { margin-bottom: .5em; } }
/*
	=======================================================	ACHIEVEMENT WINDOW
*/
#ACHIEVEMENT { display: grid; position: absolute; width: 100vw; height: 100vh; padding: 2em; align-items: center; justify-items: center; z-index: 2; }

#ACHIEVEMENT-WINDOW { position: relative; background-color: white; border-radius: 21px; max-width: 50em; min-width: 250px; max-height: 90vh; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#ACHIEVEMENT-WINDOW .achievement-window-heading { padding: 1em 1.5em 0 1.5em; border-bottom: 1px solid #404D55; border-color: white; background: #0c698a; color: white; border-radius: 20px 20px 0 0; }
#ACHIEVEMENT-WINDOW .achievement-window-heading h1 { font-size: 1.4rem; letter-spacing: 0.02em; margin: .25em auto .5em; text-align: center; font-family: 'Raleway', sans-serif; letter-spacing: .03em; font-weight: normal; }
#ACHIEVEMENT-WINDOW .achievement-window-body { padding: 0 1.5em 1.5em 1.5em; }
#ACHIEVEMENT-WINDOW .close-button { color: white; }

.star-icon-container { position: absolute; left: calc(50% - 40px); top: -25px; height: 25px; width: 80px; justify-content: center; align-items: flex-start; display: flex; font-size: 30px; background: #0c698a; border-radius: 90px 90px 0 0; border-bottom: 0; color: white; }
.star-icon-container span { margin-top: 7px; text-shadow: 0 2px 5px #002828; }

.achievement-listing { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; min-width: 280px; }

.achievement-listing-element { display: inline-block; width: 46%; max-width: 128.8px; text-align: center; position: relative; margin: 1em 2% 1em 2%; }

.achievement-icon { position: relative; width: 80%; padding-top: 80%; border-radius: 10px; margin: auto; display: flex; }

.achievement-icon img { position: absolute; top: 0; width: 100%; height: auto; border-radius: 10px; padding: 12px; }

.achievement-checkmark { font-size: 150%; width: 1.5em; height: 1.5em; border-radius: 0.75em; background-color: gray; color: white; display: grid; align-items: center; justify-items: center; position: absolute; left: -0.5em; top: -0.5em; border: 2px solid white; }

.achievement-description { margin-top: .25em; }

.achievement-description-nutrient { text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }

.protein-achievement .achievement-description-nutrient { color: #4e256f; }

.vegetables-achievement .achievement-description-nutrient { color: #006600; }

.dairy-achievement .achievement-description-nutrient { color: #00529B; }

.grains-achievement .achievement-description-nutrient { color: #983300; }

.fruit-achievement .achievement-description-nutrient { color: #990011; }

@media (orientation: portrait) and (max-width: 1280px) { .achievement-listing-element { width: 40%; } }
@media (orientation: landscape) and (max-height: 520px) { #ACHIEVEMENT-WINDOW { max-height: 100%; width: auto; max-width: 100%; }
  .achievement-listing { flex-wrap: nowrap; }
  .achievement-listing-element { width: 30%; }
  #ACHIEVEMENT { overflow-y: auto; } }
/*
	====================================================	GAUGUES AND TALLIES
*/
.gauge-container { display: flex; }

.gauge { position: relative; width: 10em; height: 1.1em; background-color: #ccc; outline: 1px solid white; }

.gauge > div { position: absolute; top: 0px; height: 1.1em; }

.gauge .max-value { background-color: #999; width: 100%; left: 0px; }

.gauge .current-value { background-color: black; width: 0px; left: 0px; transition: width 0.5s ease; }

.gauge .division { width: 2px; background-color: white; }

#fruit-tally { color: #990011; }

.fruit-gauge .current-value { background-color: #af0000; }

.fruit-gauge .max-value { background-color: #ffc4d5; }

#vegetables-tally { color: #006600; }

.vegetables-gauge .current-value { background-color: #11aa22; }

.vegetables-gauge .max-value { background-color: #e0f3a7; }

#protein-tally { color: #4e256f; }

.protein-gauge .current-value { background-color: #9020a0; }

.protein-gauge .max-value { background-color: #dbcbe5; }

#grains-tally { color: #983300; }

.grains-gauge .current-value { background-color: #da6a00; }

.grains-gauge .max-value { background-color: #f7ddcb; }

#dairy-tally { color: #00529B; }

.dairy-gauge .current-value { background-color: #0062cB; }

.dairy-gauge .max-value { background-color: #c3e1f5; }

/*
	ALERTS
*/
#alerts-tally { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5px; }

.alert-tally-box { border: 2px solid red; border-radius: 4px; display: grid; grid-template-columns: 2em 1fr; background-color: white; align-items: stretch; justify-items: stretch; height: 2em; }

.alert-tally-box .alert-icon { width: 2em; display: flex; align-items: center; justify-content: center; height: calc(2em); }
.alert-tally-box .alert-icon img { height: 100%; width: auto; }

.alert-tally-box > :nth-child(2) { display: grid; align-items: center; justify-items: center; color: white; font-weight: bold; border-left: 1px solid white; height: calc( 2em ); border-radius: 0; }

.alert-warning { display: inline-flex; height: 36px; padding: 0; min-width: 120px; background: white; border: 2px solid transparent; align-items: stretch; justify-items: stretch; border-radius: 4px; }

#salt-alert, #salt-warning { border: 0; background: #f80a64; background: linear-gradient(90deg, #f83982 10%, #b40a32 90%); }

#sugar-alert, #sugar-warning { border: 0; background: #0ab4be; background: linear-gradient(90deg, #0ab4be 10%, #00646e 90%); }

#fat-alert, #fat-warning { border: 0; background: #dd32c8; background: linear-gradient(90deg, #dd0ac8 10%, #aa0096 90%); }

.alert-icon img { height: 32px; width: 100%; padding: 1px; }

.alert-warning .alert-text { display: flex; align-items: center; justify-items: center; background-color: transparent; color: white; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; padding: 4px 6px; }

@media only screen and (max-width: 768px) { #SUMMARY { padding: 5px; }
  .alert-warning { min-height: 32px; min-width: 90px; font-size: 15px; }
  .gauge { height: 1em; }
  .gauge > div { height: 1em; }
  .gauge .division { width: 1px; } }
/*
	====================================================	NUTRITION LABELS
*/
.servings-infobox { position: relative; border: 1px solid black; display: grid; width: 200px; grid-template-columns: 50px 1fr; background-color: violet; border-radius: 10px; }

.servings-infobox > div:nth-child(1) { background-color: black; color: white; display: grid; grid-template-columns: 1fr 1fr; }

.servings-infobox > div:nth-child(1) img { position: absolute; left: -5px; top: -5px; }

.serving-description { height: 1.9rem; padding-top: 2px; font-size: 1rem; }

.serving-size-container { position: relative; display: flex; flex-wrap: wrap; flex: 1; }

.servings-size { width: calc(100% - 41px); left: 41px; padding: 6px 0 6px; }

.servings-bars { top: -40%; }

.infobox-title { font-size: .9rem; margin: auto auto auto 5px; flex: 1 1 60%; }

.servings-text { font-size: 1.1rem; flex: 0 0 40%; }

.bar-container { border: 1px solid white; margin: 0; }

.servings-icon { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }

.dairy-icon { background-image: url(../engine-images/dairy-icon.png); background-image: url(../engine-images/dairy-icon.svg); }

.protein-icon { background-image: url(../engine-images/protein-icon.png); background-image: url(../engine-images/protein-icon.svg); }

.grains-icon { background-image: url(../engine-images/grains-icon.png); background-image: url(../engine-images/grains-icon.svg); }

.vegetables-icon { background-image: url(../engine-images/vegetables-icon.png); background-image: url(../engine-images/vegetables-icon.svg); }

.fruits-icon { background-image: url(../engine-images/fruits-icon.png); background-image: url(../engine-images/fruits-icon.svg); }

.limit-icon { background-image: url(../engine-images/limit-icon.png); background-image: url(../engine-images/limit-icon.svg); }

.approach { animation: approach-and-settle 0.35s ease-out; }

@keyframes approach-and-settle { 0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); } }
/*
	-----------------------------------------------------------	Loading Screen
*/
#loading-screen { display: grid; align-items: center; justify-items: center; width: 100vw; height: 100vh; position: absolute; left: 0px; top: 0px; background-color: #c0cbcf; transition: all 0.5s ease; }

#loading-panel { padding: 2em; border-radius: 10px; background-color: #ccc; color: #222; max-width: 80vw; transition: all 0.5s ease; }

#loading-panel h1 { text-align: center; font-size: 20px; font-weight: bold; }

/*
	-----------------------------------------------------------	Onboarding
*/
.onboarding-message { position: absolute; background-color: white; padding: 1em; border-radius: 1em; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)); border: 2px solid #010C14; }

.onboarding-message button.secondary-button { border: none !important; margin-top: 2px; font-size: 14px; color: #05174a; }
.onboarding-message button.secondary-button:hover { border: none !important; background: none; text-decoration: underline; }
.onboarding-message button.secondary-button:active { border: none !important; color: #0c698a; background: none; }

.onboarding-message h2 { text-align: center; font-size: 1.8rem; font-weight: normal; font-style: italic; margin: .25em auto; line-height: 1; color: #05174a; }

.onboarding-message p { line-height: 1.5; }

.onboarding-message button { width: 100%; }

#onboarding-one-message { left: 275px; top: 25px; width: calc( 100vw - 300px ); max-width: 300px; }

.onboarding-arrow { position: absolute; display: block; width: 70px; height: 70px; left: -70px; top: 20px; background-size: 100% 100%; background-image: url(../engine-images/arrow-left-bold.svg); z-index: -1; }

#onboarding-two-message { left: 180px; top: 60px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-two-arrow { top: 40px; }

#onboarding-three-message { left: 265px; top: 280px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-three-arrow { top: 180px; }

#onboarding-four-message { left: 105px; bottom: 100px; width: calc( 100vw - 300px ); max-width: 300px; }

#onboarding-four-arrow { top: auto; bottom: -70px; transform: rotate(-90deg); left: auto; }

@media only screen and (max-width: 768px) { #onboarding-one-message { left: 20vw; top: 200px; width: 80vw; max-width: 300px; }
  .onboarding-arrow { transform: rotate(90deg); top: -70px; left: calc(50% - 38px); }
  #onboarding-two-message { left: 20px; top: 160px; width: 80vw; max-width: 300px; }
  #onboarding-two-arrow { top: -70px; left: 50px; }
  #onboarding-three-message { left: auto; right: 50px; top: 330px; width: 80vw; max-width: 300px; }
  #onboarding-three-arrow { top: -70px; left: auto; right: 50px; transform: rotate(270deg) scaleX(-1); }
  #onboarding-four-message { left: 20vw; top: auto; bottom: 125px; width: 80vw; max-width: 300px; }
  #onboarding-four-arrow { top: auto; transform: rotate(270deg) scaleY(-1); bottom: -70px; } }
/*# sourceMappingURL=engine.css.map */

/*# sourceMappingURL=engine.css.map */