/***************************************************************************
 * meals.css
 ***************************************************************************/
.meals {
  position     : relative;
}

.meals-tooltip.uk-tooltip
{
  word-break: break-word;
}

.meals-form-section-title
{
  font-size   : 1.5em;
  font-weight : bold;
  margin      : 0.5em 0;
}

.meals-form-section-content
{
  -ms-border-radius    : 0.25em;
  -moz-border-radius   : 0.25em;
  -o-border-radius     : 0.25em;
  -webkit-border-radius: 0.25em;

  border       : 1px solid #ddd;
  border-radius: 0.5em;
  margin       : 0.5em 0;
  padding      : 0.5em 1em;
}

.meals-form-section-content .field_error {
  white-space  : normal;
}

.meals-form-section-content .meals-form-section-title
{
  font-size   : 1.25em;
  font-weight : bold;
  margin      : 0.5em 0;
}

.meals-field-disabled input,
.meals-field-disabled select,
.meals-field-disabled textarea,
    span.meals-field-disabled,
   input.meals-field-disabled,
  select.meals-field-disabled,
textarea.meals-field-disabled
{
  background-color: #ddd;
  border          : 1px solid #aaa;
  color           : #555;
  font-style      : italic;
}
span.meals-field-disabled
{
  display         : inline-block;
  min-height      : 1.0em;
}

/***************************************************************************
 * meals-form-order
 ***************************************************************************/
.meals-form-order-select_choices
{
  overflow     : auto; /* Maybe needed for small screens or long lists. */
  position     : relative;
  max-height   : 300px;
  max-width    : 100%;
  margin-bottom: 0.5em;
  flex         : 0 1 auto;
  width        : 100%;
}
.calendar_select_box-context_menu .meals-form-order-select_choices {
  max-width : 500px;
}

.meals-form-order-select_choices .price {
}
.meals-form-order-select_choices .price-level {
}
.meals-form-order-select_choices .price-level .price-regular {
  text-decoration : line-through;
}

.meals-form-order-landing {
  margin: 2em 5em 6em 3em;
}
.meals-form-order-landing-welcome {
  font-size: 1.2em;
}
.meals-form-order-landing-left
{
  float        : left;
  font-size    : 1.2em;
  padding-right: 5%;
  width        : 33%;
  min-width    : 200px;
}
.meals-form-order-landing-right
{
  border-left : 1px solid #ccc;
  float       : left;
  font-size   : 1.2em;
  padding-left: 5%;
  width       : 50%;

  min-width    : 300px;
}

@media screen and (max-width: 767px)
{
  .meals-form-order-landing
  {
    margin: 0;
  }
}

@media screen and (max-width: 550px)
{
  .meals-form-order-landing-left
  {
    float        : left;
    font-size    : 1.2em;
    padding-right: 5%;
    width        : 25%;
    min-width    : 150px;
  }
  .meals-form-order-landing-right
  {
    border-left  : none;
    float        : left;
    font-size    : 1.2em;
    padding-left : 0;
    padding-right: 5%;
    width        : 50%;
    min-width    : 300px;
  }
}

.meals-form-order-customer_instructions {
  overflow: hidden;
}
.meals-form-order-customer_instructions-allergies
{
  float: left;
  margin-left: 7%;
  margin-bottom: 2em;
  width: 35%;
  min-width: 250px;
}
.meals-form-order-customer_instructions-requests
{
  float: left;
  margin-left: 7%;
  margin-bottom: 2em;
  width: 42%;
  min-width: 250px;
}

/***************************************************************************
 * meals objects
 ***************************************************************************/
.meals-student_order-status_canceled,
.meals-student_order_product-status_canceled
{
  background-color: #c00;
  border          : 2px solid #a00;
  color           : #fff;
  font-style      : normal;
  font-size       : 0.8em;
  font-weight     : bold;
  float           : left;
  line-height     : 1.4em;
  margin          : 0 0.2em 0 0;
  padding         : 1px 8px;
}

.meals-student_order-status_noneditable,
.meals-student_order_product-status_noneditable
{
  background-color: #ccc;
  border          : 2px solid #999;
  color           : #555;
  font-style      : normal;
  font-size       : 0.8em;
  font-weight     : bold;
  float           : left;
  line-height     : 1.4em;
  margin          : 0 0.2em 0 0;
  padding         : 1px 8px;
}

.meals-student_order-status_update,
.meals-student_order_product-status_update
{
  background-color: #eee;
  border          : 1px solid #ddd;
  border-radius   : 4px;
  color           : #777;
  font-style      : normal;
  font-size       : 1.0em;
  font-weight     : normal;
  float           : left;
  line-height     : 1.0em;
  margin          : 0 0.0em 0 0;
  padding         : 0px 9px;
}

/***************************************************************************
 * Price Levels:
 ***************************************************************************/
.meals-student_order-pricelevel_code,
.meals-student_order_product-pricelevel_code
{
  background-color: #0a0;
  border          : 2px solid #080;
  border-radius   : 4px;
  color           : #fff;
  display         : inline-block;
  font-style      : normal;
  font-size       : 1em;
  font-weight     : bold;
  line-height     : 1;
  margin          : 0 0.2em 0 0;
  padding         : 2px 4px;
  text-align      : center;
}

.meals_order_report.labelsheet-size-1x2-5_8-qty30 .meals-student_order-pricelevel_code,
.meals_order_report.labelsheet-size-1x2-5_8-qty30 .meals-student_order_product-pricelevel_code
{
  border-width    : 1px;
  margin          : 0 0.2em 1px 0;
  padding         : 0px 2px;
}

.meals-pricelevel_meals-reduced
{
  background-color: #00a;
  border-color    : #008;
  color           : #fff;
}
.meals-pricelevel_meals-reduced-no_payment
{
  background-color: #aa0;
  border-color    : #880;
  color           : #008;
}

.meals-pricelevel_meals-free
{
  background-color: #c80;
  border-color    : #a60;
  color           : #fff;
}
.meals-pricelevel_meals-free-no_payment
{
  background-color: #880;
  border-color    : #660;
  color           : #fff;
}

/***************************************************************************
 * .meals .calendar_month
 ***************************************************************************/
.meals table.calendar_month
{
  box-sizing: border-box;
  height    : 1px; /* This will grow, but it allows .calendar_date{height:100%} to calculate. */
  margin    : 0;
  min-width : 0;
  min-height: 0;
}

.meals table.calendar_month > tbody > tr > td {
  height: 100%; /* Give .calendar_date{height:100%} something to calculate against. */
}

.meals .calendar_month .calendar_entry
{
  cursor    : pointer;
  display   : block;
  height    : 1.5em;
  font-size : 1.0em;
}

.meals .calendar_month .calendar_date
{
  box-sizing : border-box;
  cursor     : zoom-in;
  height     : 100%;

  min-width     : 0;
  min-height    : 50px;
}

.meals .calendar_month .adj_month {
  cursor          : pointer;
}

.meals .calendar_month .empty_date
{
  background-color: #838aa0;
  color           : #000;
  cursor          : zoom-in;
}

.meals .calendar_month .calendar_date:hover {
  background-color: #FFFFE2;
}

.meals .calendar_month .calendar_date.today {
  background-color: #ACB6DC;
  cursor          : pointer;
}

.meals .calendar_month .calendar_date_month.today {
  background-color: #d7e8d7;
  cursor          : pointer;
}


.meals .calendar_month .invalid_date,
.meals .calendar_month .invalid_date:hover
{
  background-color: #838aa0;
  color           : #000;
  cursor          : not-allowed;
}

.meals .calendar_month .calendar_date.adj_month {
  background-color: #D6DBEA;
}

.meals .calendar_month .calendar_date .ui-button-text
{
  font-size : 0.9em;
  padding   : 3px 6px;
}

.meals-calendar-month {
}
.meals-calendar-month > .calendar {
  display: block;
}

.calendar_prev_month,
.calendar_next_month,
.calendar_prev_date,
.calendar_next_date
{
  background-color: #fff;
  font-size: 1.6em;
  line-height: 1.2;
}

/* Desktop default: bare day number only -- the "Day, Mon D" full label is
   mobile-only, see the @media block below. */
.meals .calendar-static .calendar_day_full
{
  display: none;
}

/* Desktop/print default: a day's choices as a flat list -- the product
   type headings inserted before each type's first choice are mobile-only,
   see the @media block below. Hiding just the heading (rather than
   rendering the list twice) keeps this a single shared rendering. */
.meals .calendar-static .meals-static-calendar-menu-type-heading
{
  display: none;
}

/* .meals-static-calendar-leading-row ("Offered Every Serving Day" as the calendar's
   own first row. Hidden by default here; the @media block below turns it back on. */
.meals-static-calendar-leading-row
{
  display: none;
}

/***************************************************************************
 * Mobile: stack the static calendar into one row per day instead of the
 * multi-column week grid, which gets illegibly cramped on a phone screen.
 ***************************************************************************/
@media screen and (max-width: 599px)
{
  html:not(.meals-print) .meals .calendar-static
  {
    display: block;
  }

/* Below the mobile breakpoint, "Offered Every Serving Day" is presented as the
   calendar's own first row (a real day cell, see .meals-static-calendar-
   leading-row above) instead of this trailing paragraph. */
  html:not(.meals-print) .meals .meals-static-calendar-footer
  {
    display: none;
  }
  html:not(.meals-print) .meals .meals-static-calendar-leading-row
  {
    display: block;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month
  {
  /* Border stays as calendar.css set it (a frame around the whole stacked
     list) -- background darkened a bit for contrast against the white day
     cells. Clipped so the table's own border-radius rounds off the stacked
     rows inside it, instead of their square corners poking past the curve. */
    display         : block;
    table-layout    : auto;
    height          : auto;
    overflow        : hidden;
    background-color: #ddd;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month thead,
  html:not(.meals-print) .meals .calendar-static table.calendar_month thead tr,
  html:not(.meals-print) .meals .calendar-static table.calendar_month thead tr:first-child th
  {
    display: block;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month thead tr:first-child th
  {
    text-align : center;
    font-weight: bold;
    font-size  : 1.3em;
    margin     : 0.5em 0;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month thead tr:last-child
  {
  /* The day-name (Sun/Mon/...) header row -- meaningless once each day is
     its own stacked row rather than a column. */
    display: none;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month tbody,
  html:not(.meals-print) .meals .calendar-static table.calendar_month tbody tr
  {
    display: block;
  }
  html:not(.meals-print) .meals .calendar-static table.calendar_month tbody td
  {
    display   : block;
    width     : 100% !important;
    box-sizing: border-box;
  }
  html:not(.meals-print) .meals .calendar-static .calendar_date
  {
    height       : auto;
    min-height   : 0;
    min-width    : 0;
  /* No radius and no gap between cells -- one flat block per day, one
     right after another, rather than a grid of separated rounded boxes.
     Only the top border survives (a divider from the previous day) -- the
     table itself already has its own outer border on all four sides. */
    border-radius: 0;
    border       : none;
    border-top   : 1px solid gray;
    margin       : 0;
    overflow     : hidden;
  }
  html:not(.meals-print) .meals .calendar-static .calendar_date.adj_month
  {
  /* Adjacent-month filler days pad out a grid's leading/trailing weeks --
     just noise in a linear stacked list, so hide them (and their <td>,
     which carries no border/background of its own to leave behind). */
    display: none;
  }
  html:not(.meals-print) .meals .calendar-static .calendar_date .calendar_day
  {
  /* .calendar_date's own padding is 1.4em 4px 2px 4px (calendar.css) --
     negate the top/left/right of it here so this heading bar spans the
     cell's full width instead of sitting inset with everything else. */
    position        : static;
    display         : block;
    margin          : -1.4em -4px 0.5em -4px;
    padding         : 0.4em 4px;
    text-align      : center;
    font-weight     : bold;
    background-color: #f0f0f0;
    border-bottom   : 1px solid #ccc;
  }
  html:not(.meals-print) .meals .calendar-static .calendar_day_short
  {
    display: none;
  }
  html:not(.meals-print) .meals .calendar-static .calendar_day_full
  {
    display: inline;
  }
  html:not(.meals-print) .meals .calendar-static .meals-static-calendar-menu-type-heading
  {
    display    : block;
    font-weight: bold;
    margin-top : 0.5em;
  }
  html:not(.meals-print) .meals .calendar-static .meals-static-calendar-menu-type-heading:first-child
  {
    margin-top: 0;
  }
  html:not(.meals-print) .meals .calendar-static .meals-static-calendar-cell-content
  {
    padding   : 0 0.5em 0.5em 0.5em;
    box-sizing: border-box;
  }
  html:not(.meals-print) .meals .calendar-static .meals-static-calendar-empty
  {
    padding: 0.25em 0.5em 0.5em 0.5em;
    top    : 0;
  }
}

/***************************************************************************
 * .meals-product-selection-count
 ***************************************************************************/
.meals-product-selection-count
{
  position: relative;
  text-align: center;
  margin-top: 0.6em;
  margin-bottom: 0.4em;
}
@media screen and (max-width: 767px)
{
  .calendar_date_day .meals-product-selection-count
  {
    margin-top: -0.45em;
    margin-bottom: 0.55em;
  }
}
.meals-product-selection-count .uk-badge
{
  background-color: #fff;
  border-color: #9a9a85;
  color: #5d3c3c;
  font-size: 1.0em;
  line-height: 1.5em;
  min-width: 1em;
  border-radius: 50%;
}

/***************************************************************************
 * .meals .meals-calendar-perday
 ***************************************************************************/
.meals-calendar-perday
{
  min-height: 200px;
  margin-top: 1em;
}
@media screen and (min-width: /*768px*/ 0)
{
  .meals-calendar-perday {
    min-height: 0;
  }
}

.meals-your-selections-header
{
  font-weight: bold;
  line-height: 20px;
  padding: 5px 0;
  margin-bottom: 0.5em;
  text-align:center;
}

/***************************************************************************
 * .meals .meals-products-day
 ***************************************************************************/
.meals-products-day .title {
  margin-bottom: 0;
}

/***************************************************************************
 * meals-order
 ***************************************************************************/
.meals-order-instructions {
  font-weight: bold;
}
.meals-order-details {
  font-style: italic;
}

/***************************************************************************
 * meals_order_report_totals
 ***************************************************************************/
.meals_order_report_totals {
  font-size : 0.8em;
}
@media print
{
  .meals_order_report_totals {
  }
  .meals_order_report_totals thead tr
  {
    background: none;
    color     : black;
  }
}

/***************************************************************************
 * meals-report-filter
 ***************************************************************************/
.meals-report-filter-controls
{

}
.meals-report-filter-controls-run_report button,
.meals-report-filter-controls-export_excel button,
.meals-report-filter-controls-print_report button,
.meals-report-filter-controls-print_labels button
{
  font-weight: bold;
  height     : 2.5em;
  line-height: 2.0em;
  overflow   : hidden;
  text-align : left;
  width      : 165px;
}
.meals-report-filter-controls-export_excel img,
.meals-report-filter-controls-print_report img,
.meals-report-filter-controls-print_labels img
{
  float     : right;
  margin-top: 0.333em;
  position  : relative;
}

.meals-report-filter-throbber {
  margin    : 0.75em 0;
  visibility: hidden;
}
.meals-report-filter-throbber-icon
{
  position: relative;
  top     : 0.25em;
}
.meals-report-filter-throbber-message
{
  font-style : italic;
  font-weight: bold;
}

/***************************************************************************
 * meals_order_report
 ***************************************************************************/
.meals_order_report {
  font-size : 0.8em;
}
@media print
{
  .meals_order_report thead tr
  {
    background: none;
    color     : black;
  }
}

.meals_order_report tr td
{
  height        : 2em;
  padding       : 2px 3px;
/*vertical-align: top; Not ready... */
}

.meals_order_report .meal_order_report-product-canceled
{
  background-color: #bbb;
  font-style      : italic;
  text-decoration : line-through;
  line-height     : 1.6em;
}
.meals_order_report .meals-student_order_product-status_canceled {
  margin          : 0 1em 0 0;
}

.meals_order_report .meal_order_report-product-canceled .meals_order_report-student_allergies,
.meals_order_report .meal_order_report-product-canceled .meals_order_report-student_requests
{
  background-color: #ccc;
  font-style      : italic;
  text-decoration : line-through;
}

.meals_order_report-product,
.meals_order_report-product_red,
.meals_order_report-product_blue,
.meals_order_report-product_salad-bar
{
  height       : auto;
  padding      : 3px 6px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  width        : auto;
  box-sizing   : border-box;

  -webkit-box-sizing: border-box;
  -moz-box-sizing   : border-box;
  -ms-box-sizing    : border-box;
  -o-box-sizing     : border-box;
}
.meals_order_report-product_red
{
  background: #fbb;
  border    : 1px solid #f99;
}
.meals_order_report-product_blue
{
  background: #bbf;
  border    : 1px solid #99f;
}
.meals_order_report-product_salad-bar
{
  background: #bfb;
  border    : 1px solid #9d9;
}

.meals_order_report-student_allergies
{
  background-color: #fff;
  border          : 2px solid #aaa;
  float           : left;
  margin          : 0 2% 0.5em 0;
  padding         : 2px 4px;
  width           : 34%;
}
.meals_order_report-student_requests
{
  background-color: #fff;
  border          : 2px solid #aaa;
  float           : right;
  margin          : 0 0 0.5em 0;
  padding         : 2px 4px;
  width           : 60%;
}

.meals-report-conditions {
  min-width : 20em;
}
.meals-report-conditions .field_label {
  min-width: 5em;
}

/***************************************************************************
 * Meals Invoice
 ***************************************************************************/
.meals-invoice_line-date {
}
.meals-invoice_line-student
{
  background: #BDC9CD;
  border    : 1px solid #aaa;
  color     : #000;
  margin    : 0.5em 1em 0 1em;
  padding   : 0.5em 1em;
}

/***************************************************************************
 * Ordering and Checkout Messages
 ***************************************************************************/
.meals-cutoff_warning-notice
{
  background : #fdd;
  border     : 2px solid #a00;
  color      : #a00;
  font-style : italic;
  font-weight: bold;
  margin     : 0.9em 0.25in;
  padding    : 0.5em 0.333in 0.5em 57px;
  position   : relative;

  -webkit-border-radius: 8px;
  -moz-border-radius   : 8px;
  border-radius        : 8px;
}
.meals-cutoff_warning-notice p {
  margin: 0.333em 0; /* for 32px icon */
}
.meals-cutoff_warning-notice-icon
{
  left      : 15px;
  margin-top: -16px;
  position  : absolute;
  top       : 50%;
}

.meals-checkout-review-notice
{
  background : #fdd;
  border     : 2px solid #a00;
  color      : #a00;
  font-style : italic;
  font-weight: bold;
  margin     : 0.9em 0.25in;
  padding    : 0.5em 0.333in 0.5em 57px;
  position   : relative;

  -webkit-border-radius: 8px;
  -moz-border-radius   : 8px;
  border-radius        : 8px;
}
.meals-checkout-review-notice p {
  margin: 0.333em 0; /* for 32px icon */
}
.meals-checkout-review-notice-icon
{
  left      : 15px;
  margin-top: -16px;
  position  : absolute;
  top       : 50%;
}
.meals-checkout-review-notice-email_address
{
  color          : black;
  font-weight    : normal;
  text-decoration: underline;
}
.meals-checkout-review-notice-incomplete {
}
.meals-checkout-review-notice-notifications {
}

.meals-checkout-complete-message
{
  background : #dfd;
  border     : 2px solid #070;
  color      : #070;
  font-style : normal;
  font-weight: bold;
  margin     : 0.9em 0.25in;
  padding    : 0.5em 0.333in 0.5em 89px;
  position   : relative;

  -webkit-border-radius: 8px;
  -moz-border-radius   : 8px;
  border-radius        : 8px;
}
.meals-checkout-complete-message p {
  margin: 1.0em 0; /* for 64px icon */
}
.meals-checkout-complete-message-icon
{
  left      : 15px;
  margin-top: -32px;
  position  : absolute;
  top       : 50%;
}
.meals-checkout-complete-message-email_address
{
  color          : black;
  font-weight    : normal;
  text-decoration: underline;
}
.meals-checkout-complete-message-received {
}
.meals-checkout-review-notice-notifications {
}

/***************************************************************************
 * meals-menu_editor
 ***************************************************************************/
.meals-menu_editor-product_templates-list
{
  max-height : 200px;
  overflow   : auto;
  position   : relative;
}
.meals-menu_editor-product_templates-list table {
  font-size  : 0.8em;
}

.meals_product_calendar {
  overflow   : auto;
}
.meals-menu_editor .meals_product_types
{
  overflow     : hidden;
  white-space  : nowrap;
  text-overflow: ellipsis;
}

.meals-menu_editor .calendar_control_servingDay
{
  display         : block;
  padding         : 2px 2px;
  position        : absolute;
  text-align      : left;
  text-decoration : none !important;
  top             : 0;
  left            : 0;
}

.calendar_select_box-context_menu .title {
  margin-bottom: 0;
}
.calendar_select_box-context_menu > div
{
  width         : 100%;
  height        : 100%;
  display       : flex;
  flex-direction: column;
}
.calendar_select_box-context_menu-choices
{
  overflow     : auto;
  position     : relative;
  max-height   : 300px;
  max-width    : 500px;
  margin-bottom: 0.5em;
  flex         : 0 1 auto;
  width        : 100%;
}
.calendar_select_box-context_menu-choices thead th
{
  padding    : 0 3px;
  text-align : center;
}
.calendar_select_box-context_menu-choices tbody {
  position   : relative;
}

.calendar_select_box-context_menu-save_button {
  text-align : center;
}

/***************************************************************************
 * meals-account
 ***************************************************************************/
.meals-account-student-listing
{
  box-sizing: border-box;
  border : 1px solid #ccc;
  display: inline-block;
  margin : 0 1.0em 1em 0;
  padding: 0.5em 1em;
  width  : 100%;
}

.meals-account-student-listing .meals-student-name
{
  font-size  : 1em;
  font-weight: bold;
}

.meals-controls-student
{
  background : #eee;
  border     : 1px solid #ccc;
  float      : right;
  font-family: Sans-Serif;
  font-size  : 0.8em;
  margin     : 0.5em;
  padding    : 0.5em 1em;
}
.meals-controls-student a
{
  padding    : 0 0.333em;
}

/***************************************************************************
 * meals-school
 ***************************************************************************/
.meals-school {
}
.meals-school-name {
  font-size : 1.25em;
}

/***************************************************************************
 * meals-teacher
 ***************************************************************************/
.meals-teacher {
}
.meals-teacher-name {
  font-size : 1.25em;
}

/***************************************************************************
 * meals-grade
 ***************************************************************************/
.meals-grade {
}
.meals-grade-title {
  font-size : 1.25em;
}

/***************************************************************************
 * meals-student
 ***************************************************************************/
.meals-student {
}
.meals-student-name {
  font-size : 1.25em;
}

/***************************************************************************
 * meals-student_order
 ***************************************************************************/
.meals-student_order {
}

.meals-student_order-number
{
  font-size  : 1.25em;
  font-weight: bold;
  margin     : 0.9em 0;
}

/***************************************************************************
 * meals-student_order-page
 ***************************************************************************/
.meals-student_order-page {
}

.meals-student_order-page .meals-student_order-page-header {
  margin : 0 0 1em 0;
}

.meals-student_order-page .meals-school-name,
.meals-student_order-page .meals-grade-title,
.meals-student_order-page .meals-teacher-name
{
  font-size   : 1em;
  font-weight : normal;
}

.meals-student_order-page .meals-student-name
{
  font-size   : 1.25em;
  font-weight : normal;
}

.meals-student_order-page .meals-student_order-page-invoice {
  margin : 1em 0 0 0;
}