/*
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: 1fr;
  grid-template-rows: 1fr;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr; }
  :host select.Activated[readonly] {
    color: #1cb31c !important;
    pointer-events: none;
    cursor: default;
    opacity: 1;
    outline: none;
    background-color: rgba(60, 60, 66, 0.2);
    box-shadow: none;
    border: 1px solid rgba(10, 10, 10, 0.2); }
  :host select.AwaitingActivation[readonly] {
    color: #1cb31c !important;
    pointer-events: none;
    cursor: default;
    opacity: 1;
    outline: none;
    background-color: rgba(60, 60, 66, 0.2);
    box-shadow: none;
    border: 1px solid rgba(10, 10, 10, 0.2); }
  :host select.Done[readonly] {
    color: #2498BA !important;
    pointer-events: none;
    cursor: default;
    opacity: 1;
    outline: none;
    background-color: rgba(60, 60, 66, 0.2);
    box-shadow: none;
    border: 1px solid rgba(10, 10, 10, 0.2); }
  :host select.Informed[readonly] {
    color: #FFFFFF !important;
    pointer-events: none;
    cursor: default;
    opacity: 1;
    outline: none;
    background-color: rgba(60, 60, 66, 0.2);
    box-shadow: none;
    border: 1px solid rgba(10, 10, 10, 0.2); }