/*##############################################################################
## Transitions                                                                 #
##############################################################################*/
/*##############################################################################
## Media Queries                                                               #
##############################################################################*/
.mm_scroll, #meal_dashboard #meal_body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; }
  .mm_scroll::-webkit-scrollbar, #meal_dashboard #meal_body::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .mm_scroll::-webkit-scrollbar-button, #meal_dashboard #meal_body::-webkit-scrollbar-button {
    width: 0px;
    height: 0px; }
  .mm_scroll::-webkit-scrollbar-thumb, #meal_dashboard #meal_body::-webkit-scrollbar-thumb {
    background: #f25767;
    background: linear-gradient(165deg, #f25767 0%, #f25767 64%);
    border: 0px none rgba(255, 255, 255, 0);
    border-radius: 0px; }
  .mm_scroll::-webkit-scrollbar-thumb:hover, #meal_dashboard #meal_body::-webkit-scrollbar-thumb:hover {
    background: #f25767;
    background: linear-gradient(90deg, #f25767 0%, #f25767 64%); }
  .mm_scroll::-webkit-scrollbar-thumb:active, #meal_dashboard #meal_body::-webkit-scrollbar-thumb:active {
    background: #f25767;
    background: linear-gradient(90deg, #f25767 0%, #f25767 64%); }
  .mm_scroll::-webkit-scrollbar-track, #meal_dashboard #meal_body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    border: 0px none rgba(255, 255, 255, 0);
    border-radius: 0px; }
  .mm_scroll::-webkit-scrollbar-track:hover, #meal_dashboard #meal_body::-webkit-scrollbar-track:hover {
    background: rgba(255, 255, 255, 0); }
  .mm_scroll::-webkit-scrollbar-track:active, #meal_dashboard #meal_body::-webkit-scrollbar-track:active {
    background: rgba(255, 255, 255, 0); }
  .mm_scroll::-webkit-scrollbar-corner, #meal_dashboard #meal_body::-webkit-scrollbar-corner {
    background: transparent; }

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  width: 100vw;
  height: 100vh;
  overflow: hidden; }
  body h1 {
    font-size: 1.6rem; }
    body h1.grocery_list_title {
      display: flex;
      align-items: center; }
      body h1.grocery_list_title div.date_cont span.m,
      body h1.grocery_list_title div.date_cont span.d {
        padding-right: 4px; }
      body h1.grocery_list_title div.date_cont span.sep {
        padding: 0 calc(24px/3); }
      body h1.grocery_list_title div.cont {
        margin-left: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: calc(24px/3); }
        body h1.grocery_list_title div.cont button {
          height: calc(24px*1.5);
          border: solid 1px #f25767; }
          body h1.grocery_list_title div.cont button.selected {
            background: white;
            color: #f25767; }
          body h1.grocery_list_title div.cont button .fa {
            padding-right: 0px; }
  body h1 button .fa, body h2 button .fa, body h3 button .fa, body h4 button .fa, body h5 button .fa, body h6 button .fa {
    padding-right: 4px; }
  body h2 {
    font-size: 1.4rem; }
  body h3 {
    font-size: 1.2rem; }
  body h4 {
    font-size: 1.0rem; }
  body a {
    text-decoration: none;
    color: #f25767; }
  body ul {
    margin: 0;
    padding: 0; }
    body ul li {
      list-style: none; }
  body a.button,
  body button {
    background: #f25767;
    color: white;
    padding: calc(24px/2);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    height: calc(24px*2.4);
    display: flex;
    align-items: center;
    justify-content: center; }
  body form {
    display: grid;
    grid-gap: calc(24px/2); }
    body form div.form_section {
      display: grid;
      grid-gap: calc(24px/2); }
      body form div.form_section h1 {
        margin: 0;
        text-transform: capitalize; }
      body form div.form_section div.row {
        display: grid;
        grid-gap: calc(24px/2);
        position: relative; }
      body form div.form_section label {
        display: grid;
        grid-gap: 4px; }
        body form div.form_section label span.form_label {
          color: #d3d3d3;
          font-size: 0.8rem;
          text-transform: uppercase; }
        body form div.form_section label input,
        body form div.form_section label select {
          border-radius: 4px;
          border: solid 1px #d3d3d3;
          padding: 0 calc(24px/2);
          height: calc(24px*2);
          display: flex;
          align-items: center; }
          body form div.form_section label input::placeholder,
          body form div.form_section label select::placeholder {
            color: #d3d3d3; }

span.in_body_message {
  background: #ffa000;
  color: white;
  border-radius: 4px;
  height: calc(24px*2.4);
  padding: 0 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600; }
  span.in_body_message .fa {
    padding-right: 4px; }

.default_meal_form h1, form#edit_meal_form h1, ul.unset_meals li div.ajax form h1 {
  font-size: 0.92rem; }
.default_meal_form div#section_1, form#edit_meal_form div#section_1, ul.unset_meals li div.ajax form div#section_1 {
  background: #f9f9f9;
  padding: 24px;
  border: solid 1px #d3d3d3;
  border-radius: 4px; }
.default_meal_form div.item_row, form#edit_meal_form div.item_row, ul.unset_meals li div.ajax form div.item_row {
  display: grid;
  grid-template-columns: 1fr calc(24px*2);
  grid-gap: calc(24px/2); }
  .default_meal_form div.item_row label, form#edit_meal_form div.item_row label, ul.unset_meals li div.ajax form div.item_row label {
    height: 100%; }
    .default_meal_form div.item_row label span.form_label, form#edit_meal_form div.item_row label span.form_label, ul.unset_meals li div.ajax form div.item_row label span.form_label {
      display: none; }
  .default_meal_form div.item_row button, form#edit_meal_form div.item_row button, ul.unset_meals li div.ajax form div.item_row button {
    height: 100%; }
  .default_meal_form div.item_row ul.result, form#edit_meal_form div.item_row ul.result, ul.unset_meals li div.ajax form div.item_row ul.result {
    grid-column: span 2; }

.results_list, .default_meal_form div.item_row ul.result, form#edit_meal_form div.item_row ul.result, ul.unset_meals li div.ajax form div.item_row ul.result, #meal_form div.row ul.result,
#meal_form div.row_extra ul.result {
  display: none;
  padding: calc(24px/2);
  background: white;
  border: solid 1px #d3d3d3;
  border-radius: 4px; }
  .results_list li, .default_meal_form div.item_row ul.result li, form#edit_meal_form div.item_row ul.result li, ul.unset_meals li div.ajax form div.item_row ul.result li, #meal_form div.row ul.result li,
  #meal_form div.row_extra ul.result li {
    cursor: pointer;
    padding: 0 calc(24px/2);
    height: calc(24px*1.5);
    display: flex;
    align-items: center;
    border-bottom: solid 1px #d3d3d3;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0; }
    .results_list li:hover, .default_meal_form div.item_row ul.result li:hover, form#edit_meal_form div.item_row ul.result li:hover, ul.unset_meals li div.ajax form div.item_row ul.result li:hover, #meal_form div.row ul.result li:hover,
    #meal_form div.row_extra ul.result li:hover {
      background: #d3d3d3; }
    .results_list li:last-child, .default_meal_form div.item_row ul.result li:last-child, form#edit_meal_form div.item_row ul.result li:last-child, ul.unset_meals li div.ajax form div.item_row ul.result li:last-child, #meal_form div.row ul.result li:last-child,
    #meal_form div.row_extra ul.result li:last-child {
      border-bottom: none; }

#login_form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
  #login_form form {
    max-width: 300px;
    width: 100%; }
    #login_form form h1 {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(24px*2);
      text-transform: uppercase; }
    #login_form form label span.form_label {
      display: none; }

#meal_dashboard {
  display: grid;
  grid-template-areas: "navigation header" "navigation body";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 74px 1fr;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: none; }
  @media only screen and (max-width: 600px) {
    #meal_dashboard {
      grid-template-areas: "header" "body" "navigation";
      grid-template-columns: 1fr;
      grid-template-rows: 74px 1fr 100px;
      padding: 0px;
      width: 100vw;
      height: 100%; } }
  #meal_dashboard #meal_navigation {
    grid-area: navigation;
    background: #332a7c;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media only screen and (max-width: 600px) {
      #meal_dashboard #meal_navigation {
        height: 100px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99; } }
    #meal_dashboard #meal_navigation nav {
      display: grid;
      width: 100%; }
      @media only screen and (max-width: 600px) {
        #meal_dashboard #meal_navigation nav {
          height: 100%; } }
      @media only screen and (max-width: 600px) {
        #meal_dashboard #meal_navigation nav ul {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); } }
      #meal_dashboard #meal_navigation nav ul li {
        width: auto;
        height: calc(24px*3);
        display: flex;
        align-items: center;
        justify-content: center; }
        @media only screen and (max-width: 600px) {
          #meal_dashboard #meal_navigation nav ul li {
            width: auto;
            height: 100%; } }
        #meal_dashboard #meal_navigation nav ul li a {
          color: white;
          background: rgba(255, 255, 255, 0);
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center; }
          #meal_dashboard #meal_navigation nav ul li a.active, #meal_dashboard #meal_navigation nav ul li a:hover {
            color: #332a7c;
            background: white;
            border-top: solid 1px #332a7c;
            border-bottom: solid 1px #332a7c; }
          #meal_dashboard #meal_navigation nav ul li a span {
            display: none; }
          #meal_dashboard #meal_navigation nav ul li a .fa {
            position: relative;
            z-index: 99; }
  #meal_dashboard #meal_header {
    grid-area: header;
    border-bottom: solid 1px #f3f3f3;
    display: flex;
    align-items: center;
    padding: 0 24px; }
  #meal_dashboard #meal_body {
    grid-area: body; }
    #meal_dashboard #meal_body div.cont_body {
      padding: 24px;
      width: calc(100% - (24px*2)); }
      @media only screen and (max-width: 600px) {
        #meal_dashboard #meal_body div.cont_body {
          padding: 24px 24px calc(24px*8) 24px; } }

#meal_form div.row,
#meal_form div.row_extra {
  display: grid;
  grid-template-columns: 1fr 1fr calc(24px*2);
  grid-gap: calc(24px/4);
  border: solid 1px #d3d3d3;
  border-radius: 4px;
  padding: 24px;
  background: #f9f9f9; }
  #meal_form div.row button.add_extra,
  #meal_form div.row button.remove_extra,
  #meal_form div.row button.remove_meal,
  #meal_form div.row button.add_meal,
  #meal_form div.row_extra button.add_extra,
  #meal_form div.row_extra button.remove_extra,
  #meal_form div.row_extra button.remove_meal,
  #meal_form div.row_extra button.add_meal {
    height: calc(24px*2);
    align-self: end;
    position: relative;
    top: -1px; }
  #meal_form div.row label span.form_label,
  #meal_form div.row_extra label span.form_label {
    display: none; }
  #meal_form div.row ul.result,
  #meal_form div.row_extra ul.result {
    grid-column: span 3; }
#meal_form div.row_extra {
  grid-template-columns: 1fr calc(24px*2); }

ul.unset_meals {
  margin-bottom: 24px; }
  ul.unset_meals li {
    display: grid;
    grid-gap: calc(24px/2.4);
    border: solid 1px #d3d3d3;
    border-radius: 4px;
    padding: 0 24px 24px 24px; }
    ul.unset_meals li h2.head {
      display: flex;
      align-items: center;
      margin: calc(24px/2) 0 0 0;
      font-size: 0.98rem;
      height: calc(24px*2); }
      ul.unset_meals li h2.head button {
        font-size: 0.78rem;
        margin-left: auto;
        height: calc(24px*1.4); }
    ul.unset_meals li h2.did_you_mean_to_say {
      font-size: 0.92rem;
      background: #ffa000;
      margin: 0;
      padding: 0 24px;
      height: calc(24px*2);
      border-radius: 4px;
      color: white;
      display: flex;
      align-items: center; }
    ul.unset_meals li ul.did_you_mean_to_say li {
      display: grid;
      grid-template-columns: 1fr calc(24px*2);
      padding: 0 24px;
      height: calc(24px*2); }
      ul.unset_meals li ul.did_you_mean_to_say li span {
        display: flex;
        align-items: center; }
      ul.unset_meals li ul.did_you_mean_to_say li button {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: auto;
        position: relative;
        top: calc(24px/2);
        background: white;
        border: solid 1px #f25767;
        color: #f25767; }

ul.your_meals {
  display: grid;
  grid-gap: calc(24px/3); }
  ul.your_meals li a {
    background: #f25767;
    color: white;
    padding: 0 calc(24px/2);
    height: calc(24px*2);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: solid 1px #f25767;
    font-weight: 600; }
    ul.your_meals li a:hover {
      background: white;
      color: #f25767; }
    ul.your_meals li a span.m,
    ul.your_meals li a span.d {
      padding-right: 4px; }
    ul.your_meals li a span.sep {
      padding: 0 calc(24px/3); }
    ul.your_meals li a .fa {
      margin-left: auto; }

ul.view_meal {
  display: none; }
  ul.view_meal div.view_meal_cont {
    display: grid;
    grid-gap: calc(24px/2); }
    ul.view_meal div.view_meal_cont li button {
      padding: 0;
      height: calc(24px*2);
      display: grid;
      grid-gap: 24px;
      grid-template-columns: 1fr 50px;
      position: relative;
      border-radius: 4px;
      width: 100%; }
      ul.view_meal div.view_meal_cont li button:hover {
        background: white;
        border: solid 1px #f25767;
        color: #f25767; }
        ul.view_meal div.view_meal_cont li button:hover div.cont span.date {
          background: #f25767;
          color: white; }
      ul.view_meal div.view_meal_cont li button:focus {
        outline: none; }
      ul.view_meal div.view_meal_cont li button div.cont {
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 600; }
        ul.view_meal div.view_meal_cont li button div.cont span.date {
          display: grid;
          height: 100%;
          margin-right: calc(24px/2);
          padding: 0 calc(24px/2);
          background: rgba(255, 255, 255, 0.2); }
          ul.view_meal div.view_meal_cont li button div.cont span.date span.m {
            text-transform: uppercase;
            font-size: 0.64rem;
            display: flex;
            align-items: flex-end; }
          ul.view_meal div.view_meal_cont li button div.cont span.date span.d {
            font-size: 1.0rem; }
          ul.view_meal div.view_meal_cont li button div.cont span.date span.y {
            display: none; }
    ul.view_meal div.view_meal_cont li ul.view_items {
      display: none;
      border: solid 1px #d3d3d3;
      border-radius: 4px;
      padding: calc(24px/2) 24px;
      margin-top: calc(24px/2); }
      ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont {
        display: grid; }
        ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont li {
          border-bottom: solid 1px #d3d3d3;
          height: calc(24px*2);
          display: flex;
          align-items: center;
          font-size: 0.8rem; }
          ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont li:last-child {
            border-bottom: none; }
          ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont li span.count {
            margin-left: auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "ex numb"; }
            ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont li span.count span {
              grid-area: ex;
              font-size: 0.72rem;
              display: flex;
              align-items: center;
              justify-content: center; }
            ul.view_meal div.view_meal_cont li ul.view_items div.itm_cont li span.count div {
              grid-area: numb; }
  ul.view_meal div.extra_items_list {
    padding: 24px;
    background: #f9f9f9;
    border: solid 1px #d3d3d3;
    border-radius: 4px; }
    ul.view_meal div.extra_items_list li {
      border-bottom: solid 1px #d3d3d3;
      height: calc(24px*2);
      display: flex;
      align-items: center; }
      ul.view_meal div.extra_items_list li span.count {
        margin-left: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        font-size: 0.8rem; }
      ul.view_meal div.extra_items_list li:last-child {
        border: none; }

ul.grocery_list {
  margin: 24px 0; }
  ul.grocery_list div.itm_cont {
    display: grid;
    grid-gap: calc(24px/2); }
    ul.grocery_list div.itm_cont li {
      display: flex;
      align-items: center; }
      ul.grocery_list div.itm_cont li label {
        width: 100%;
        height: 100%;
        padding: 0 calc(24px/2);
        cursor: pointer;
        border: solid 1px #d3d3d3;
        border-radius: 4px;
        height: calc(24px*2);
        font-size: 0.74rem; }
        ul.grocery_list div.itm_cont li label:hover {
          border-color: #f25767; }
        ul.grocery_list div.itm_cont li label.checked_1 {
          background: #f25767;
          color: white;
          border-color: #f25767; }
          ul.grocery_list div.itm_cont li label.checked_1 span.item_name,
          ul.grocery_list div.itm_cont li label.checked_1 span.count {
            text-decoration: line-through; }
        ul.grocery_list div.itm_cont li label span.form_label {
          display: grid;
          grid-gap: calc(24px/3);
          grid-template-areas: "count name check";
          grid-template-columns: calc(24px/2) 1fr 28px;
          height: 100%; }
          ul.grocery_list div.itm_cont li label span.form_label span {
            display: flex;
            align-items: center; }
          ul.grocery_list div.itm_cont li label span.form_label span.item_name {
            grid-area: name; }
          ul.grocery_list div.itm_cont li label span.form_label span.count {
            grid-area: count;
            margin-left: auto;
            font-size: 0.72rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "numb ex"; }
            ul.grocery_list div.itm_cont li label span.form_label span.count span {
              grid-area: ex; }
            ul.grocery_list div.itm_cont li label span.form_label span.count div {
              grid-area: numb; }
          ul.grocery_list div.itm_cont li label span.form_label span.sudo_checkbox {
            grid-area: check; }
            ul.grocery_list div.itm_cont li label span.form_label span.sudo_checkbox div {
              display: flex;
              align-items: center;
              justify-content: center;
              background: white;
              margin: 0 0 0 auto;
              height: 24px;
              width: 24px;
              position: relative;
              border: solid 1px #f25767;
              border-radius: 50%;
              color: white; }
        ul.grocery_list div.itm_cont li label input {
          display: none; }
        ul.grocery_list div.itm_cont li label input[type=checkbox]:checked + span.form_label span.sudo_checkbox div {
          background: white;
          border-color: white;
          text-decoration: none !important;
          color: #f25767; }

#edit_user_objects ul {
  display: grid;
  grid-gap: calc(24px/3); }
  #edit_user_objects ul li a {
    background: #f25767;
    border-radius: 4px;
    height: calc(24px*2);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 calc(24px/2); }
  #edit_user_objects ul.edit_user_meals {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1px; }
    #edit_user_objects ul.edit_user_meals li a {
      border-radius: 0; }

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