/*
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-rows: 28px 1fr;
  grid-template-columns: 1fr;
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 26px 1fr;
  border: 1px solid #666570;
  border-radius: 2px;
  box-sizing: border-box;
  background-color: #1F1F1F;
  padding: 5px 5.5px 5px 5px;
  margin: 3px 2.5px 3px 2.5px; }
  :host .fx-poms-orders-tools {
    display: flex;
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
    :host .fx-poms-orders-tools .fx-poms-orders-tool {
      margin-left: 4px;
      flex-basis: auto;
      font-size: 12px;
      font-weight: 700;
      line-height: 17px;
      padding: 0px; }
      :host .fx-poms-orders-tools .fx-poms-orders-tool span {
        margin-left: 5px;
        margin-right: 5px; }
    :host .fx-poms-orders-tools .error {
      flex-grow: 1;
      color: #F5475B;
      text-align: right; }
  :host et-grid {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  :host .fx-poms-orders-loading {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11; }
    :host .fx-poms-orders-loading .loading-container {
      display: grid;
      grid-template-rows: 1fr auto 1fr;
      grid-template-columns: 1fr auto 1fr;
      flex: 1;
      background-color: rgba(0, 0, 0, 0.4);
      /* fix for IE11 */
      display: -ms-grid;
      -ms-grid-columns: 1fr auto 1fr;
      -ms-grid-rows: 1fr auto 1fr; }
      :host .fx-poms-orders-loading .loading-container .loading-body {
        text-align: center;
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
        /* fix for IE11 */
        -ms-grid-row: 2;
        -ms-grid-column: 2; }
  :host .fx-poms-orders-chat {
    display: flex;
    position: absolute;
    right: 9px;
    top: 37px;
    width: 250px;
    background: inherit;
    z-index: 4;
    border: 3px solid #4B4B53; }
    :host .fx-poms-orders-chat et-chat {
      width: 100%;
      height: 352px;
      margin-bottom: 0px; }
      :host .fx-poms-orders-chat et-chat.ie {
        height: 342px; }