* {
  box-sizing: border-box;
}

html {
  font-size: min(4vw, 3vh);
  font-family: Roboto, sans-serif;
  color: #333366;
}

h2 {
  font-size: 1.3em;
}

input {
  font-size: 1.1rem;
}

textarea {
  font-size: 1rem;
  font-family: Roboto, sans-serif;
}

button {
  cursor: pointer;
  font-size: 1rem;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  outline: none;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  background-color: #35b2dc;
  color: white;
  padding: 0.3em 2em;
  max-height: 2em;
}
button:hover {
  text-decoration: none;
}
button:disabled {
  color: #ffffff88;
}
button.delete:not(:disabled) {
  background: red;
}
button.complete:not(:disabled) {
  background: green;
}
button.share:not(:disabled) {
  background: #35b2dc;
}

body {
  margin: 0;
  padding: 0;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#root header {
  position: fixed;
  z-index: 2;
  width: 100%;
  display: flex;
  padding: 0 1em;
  background: #35b2dc;
  color: white;
  height: 2.5em;
}
#root header > * {
  margin-top: 0.2rem;
}
#root header h1 {
  flex-grow: 1;
  margin: 0.3em 0;
  font-size: 1.4em;
  margin-bottom: 0.4em;
}
#root header .logged-in-info {
  font-size: 0.5rem;
}
#root header .logged-in-info * {
  vertical-align: top;
}
#root header .logged-in-info .logout {
  color: white;
  margin-left: 1em;
  text-decoration: underline;
}
#root header .logged-in-info .sync-status .symbol {
  margin-left: 0.5em;
  transition: all 0.5s;
  cursor: pointer;
  font-size: 2.5em;
}
#root header .logged-in-info .sync-status.up-to-date .symbol {
  color: #4aea4a;
  font-size: 1em;
}
#root header .logged-in-info .sync-status.offline .symbol, #root header .logged-in-info .sync-status.sync-pending .symbol {
  color: #ed4444;
}

.dropshadow, button, #root header {
  box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.16);
}

.dropshadow-shallow, #shopping .shopping-list > .suggestions > a {
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.16);
}

.textshadow, #root header .logged-in-info .sync-status.offline .symbol, #root header .logged-in-info .sync-status.sync-pending .symbol {
  text-shadow: -1px 2px 6px rgba(0, 0, 0, 0.3);
}

a {
  color: #35b2dc;
  cursor: pointer;
}

#shopping {
  margin-top: 2.5em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 1em;
}
#shopping .lists {
  padding: 0 1em;
}
#shopping.shopping .shopping-list:not(.shopping) {
  max-height: 0;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}
#shopping .editable-row-with-buttons, #shopping .shopping-list .item, #shopping .shopping-list h2 {
  display: flex;
}
#shopping .editable-row-with-buttons .name, #shopping .shopping-list .item .name, #shopping .shopping-list h2 .name {
  width: 100%;
}
#shopping .editable-row-with-buttons .name:not([contenteditable=true]), #shopping .shopping-list .item .name:not([contenteditable=true]), #shopping .shopping-list h2 .name:not([contenteditable=true]) {
  cursor: pointer;
}
#shopping .editable-row-with-buttons .controls, #shopping .shopping-list .item .controls, #shopping .shopping-list h2 .controls {
  display: flex;
  font-size: 0.7em;
  margin-left: 1em;
}
#shopping .editable-row-with-buttons .controls button, #shopping .shopping-list .item .controls button, #shopping .shopping-list h2 .controls button {
  margin-right: 0.5em;
  padding: 0.3em 1em;
}
#shopping .editable-row-with-buttons .name[contenteditable=true], #shopping .shopping-list .item .name[contenteditable=true], #shopping .shopping-list h2 .name[contenteditable=true] {
  padding: 0 0.1em;
}
#shopping .shopping-list {
  transition: max-height 0.5s, opacity 0.5s;
  max-height: 100rem;
}
#shopping .shopping-list h2 a.shopping {
  margin-left: 0.7rem;
  font-size: 1rem;
  white-space: nowrap;
}
#shopping .shopping-list h2 a.shopping :first-of-type {
  margin-left: 1em;
}
#shopping .shopping-list h2 .icon.shopping, #shopping .shopping-list h2 .shopping.checkbox {
  vertical-align: top;
  margin-right: 0.4em;
  margin-top: 0.05em;
  background-image: url("/shopping_cart-24px.6e395c27.svg");
}
#shopping .shopping-list h2 .icon.settings, #shopping .shopping-list h2 .settings.checkbox {
  vertical-align: top;
  margin-top: 0.05em;
  margin-left: 0.2em;
  font-size: 0.7em;
  cursor: pointer;
  background-image: url("/settings-24px.4b408441.svg");
}
#shopping .shopping-list .list-settings {
  font-size: 0.7em;
  margin-bottom: 1em;
  margin-top: -1em;
}
#shopping .shopping-list .share .icon, #shopping .shopping-list .share .checkbox {
  background-image: url("/icon-share.54a11247.svg");
  display: inline-block;
  height: 0.5em;
  width: 0.5em;
  margin-left: 0.2em;
  cursor: pointer;
}
#shopping .shopping-list.shopping .item {
  font-size: 1.5em;
}
#shopping .shopping-list .category:not(:first-of-type) {
  margin-top: 0.5em;
}
#shopping .shopping-list .department {
  margin-bottom: 0.5em;
  font-size: 0.6em;
  border-bottom: 1px solid #cccccc;
}
#shopping .shopping-list .item {
  margin-bottom: 0.2em;
  transition: font-size 0.2s;
}
#shopping .shopping-list .item .checkbox {
  margin-right: 0.4em;
}
#shopping .shopping-list .item .name {
  text-transform: capitalize;
}
#shopping .shopping-list .item .name[contenteditable=true] {
  font-size: 1.5em;
}
#shopping .shopping-list .item .location {
  font-size: 0.6em;
  white-space: nowrap;
  opacity: 0.8;
}
#shopping .shopping-list .item.checked .name {
  text-decoration: line-through;
  opacity: 0.5;
}
#shopping .shopping-list > .placeholder {
  display: flex;
  margin-top: 0.5em;
}
#shopping .shopping-list > .placeholder .input-area {
  width: 100%;
  display: inline-block;
  position: relative;
}
#shopping .shopping-list > .placeholder .input-area input {
  width: 100%;
}
#shopping .shopping-list > .placeholder .input-area .autocomplete {
  text-transform: capitalize;
  z-index: 1;
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: white;
  padding: 2px;
  padding-right: 1em;
  border-bottom: 1px solid #888888;
  border-left: 1px solid #888888;
  border-right: 1px solid #888888;
}
#shopping .shopping-list > .placeholder .input-area .autocomplete .item {
  cursor: pointer;
}
#shopping .shopping-list > .placeholder button {
  margin-left: 0.3em;
}
#shopping .shopping-list > .placeholder.editing {
  font-size: 1.5rem;
}
#shopping .shopping-list > .placeholder.editing input {
  height: 3rem;
  font-size: 1.5rem;
}
#shopping .shopping-list > .suggestions {
  margin-top: 0.5em;
}
#shopping .shopping-list > .suggestions > a {
  text-transform: capitalize;
  background-color: #35b2dc;
  color: #fff;
  font-size: 0.8em;
  margin-left: 0.3em;
  padding: 0.1em 0.5em;
  border-radius: 1em;
  display: inline-block;
  margin-bottom: 0.3em;
}
#shopping .shopping-list > .suggestions > a:first-of-type {
  margin-left: 0.6em;
}
#shopping .shopping-list > .suggestions > a .icon, #shopping .shopping-list > .suggestions > a .checkbox {
  vertical-align: text-top;
  display: inline-block;
  margin-left: 0.2em;
  font-size: 1.2em;
}
#shopping .shopping-list > .suggestions.empty {
  display: none;
}
#shopping .shopping-list:not(:last-of-type) {
  padding-bottom: 1em;
  border-bottom: 1px solid #789eab;
}

#bottom-bar {
  width: 100%;
  padding-top: 0.5em;
  padding-left: 1em;
  padding-bottom: 0.5em;
}
#bottom-bar > button {
  background: none;
  color: #35b2dc;
  padding-right: 1.5em;
  font-size: 1em;
  padding: 0;
  box-shadow: none;
}
#bottom-bar > button > .icon, #bottom-bar > button > .checkbox {
  margin-right: 0.2em;
}

.icon, .checkbox {
  display: inline-block;
  width: 1em;
  min-width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon.delete, .delete.checkbox {
  background-image: url(/cross-2.bd0ad50b.svg);
  cursor: pointer;
}

.icon.add, .add.checkbox {
  vertical-align: top;
  margin-right: 0.4em;
  margin-top: 0.05em;
  background-image: url("/plus-circled.67957fef.svg");
}

.checkbox {
  background-image: url(/unchecked-checkbox.df97efa4.png);
  cursor: pointer;
  width: initial;
  min-width: 1em;
  padding-left: 1.5em;
  color: #333366;
  /* to prevent link-like coloring for contained text */
}
.checkbox.checked {
  background-image: url(/checked-checkbox.a05252c4.png);
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.9);
  color: #333366;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup .popup-content {
  min-height: 10em;
  display: flex;
  flex-direction: column;
}
.popup .popup-content input,
.popup .popup-content button,
.popup .popup-content textarea,
.popup .popup-content p {
  display: block;
  min-width: 10em;
  max-width: 20em;
  margin: 0;
  margin-bottom: 1em;
}
.popup .popup-content input[type=email] {
  font-size: 1em;
  min-width: 15em;
}
.popup .popup-content small {
  margin-top: -0.5em;
  margin-bottom: 1em;
  font-size: 0.8em;
  opacity: 0.7;
}

.recipe-view {
  margin-bottom: 1em;
}
.recipe-view h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recipe-view h2 .backLink {
  font-size: 0.7em;
}
.recipe-view .header {
  display: flex;
  gap: 0.5em;
}
.recipe-view .header input {
  flex-grow: 1;
}
.recipe-view .ingredients {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.recipe-view .ingredients .amount {
  opacity: 0.5;
  float: right;
}
.recipe-view .addToList {
  margin-top: 1em;
}

/*# sourceMappingURL=/src.53f7ac45.css.map */