/*
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: block; }

.cell-content {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr auto;
  display: -ms-grid;
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr auto; }
  .cell-content.error {
    border-style: solid;
    border-width: 1px;
    border-color: #F5475B; }
    .cell-content.error .error-icon {
      display: block;
      color: #F5475B;
      padding: 2px; }
      .cell-content.error .error-icon::before {
        font-size: 13px; }
  .cell-content .error-icon {
    display: none; }
  .cell-content span {
    display: inline-block; }
  .cell-content input[type=text] {
    width: 100%;
    height: 19px;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px; }

.readonly {
  white-space: nowrap;
  overflow-x: hidden; }

.readonly, .editable {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  height: 19px;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px; }

.error-icon {
  -ms-grid-row: 1;
  -ms-grid-column: 2; }