/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  display: grid;
  grid-template-columns: 15px 89.5px 83px 63.5px;
  grid-template-areas: 'good-til-lb good-til-lb good-til-lb good-til-lb'
 'cancelled-lb cancelled-lb cancelled-lb cancelled-lb'
 'time-opt datetime datetime location';
  grid-gap: 2px 1.5px;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 15px 1.5px 89.5px 1.5px 83px 1.5px 63.5px;
  -ms-grid-rows: 1fr 2px 1fr 2px 1fr 2px; }
  :host .good-til-lb {
    grid-area: good-til-lb;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 1;
    -ms-grid-column-span: 7;
    -ms-grid-row: 1; }
  :host .cancelled-opt {
    grid-area: cancelled-opt;
    /* fix for IE11 */
    -ms-grid-column: 2;
    -ms-grid-column-span: 6;
    -ms-grid-row: 3; }
  :host .cancelled-lb {
    grid-area: cancelled-lb;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 1;
    -ms-grid-row: 3; }
  :host .time-opt {
    grid-area: time-opt;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 1;
    -ms-grid-row: 5; }
  :host .location {
    grid-area: location;
    margin: 1px 0 0 0;
    /* fix for IE11 */
    display: inline-block;
    -ms-grid-column: 7;
    -ms-grid-row: 5; }
  :host .datetime {
    grid-area: datetime;
    /* fix for IE11 */
    -ms-grid-column: 2;
    -ms-grid-column-span: 5;
    -ms-grid-row: 5; }

:host .good-til-lb.Activated,
:host .cancelled-lb.Activated,
:host .location.Activated {
  color: #1cb31c; }

:host .good-til-lb.Done,
:host .cancelled-lb.Done,
:host .location.Done {
  color: #2498BA; }

:host .good-til-lb.Informed,
:host .cancelled-lb.Informed,
:host .location.Informed {
  color: #FFFFFF; }

:host .location.Disabled {
  color: #666570; }