/*
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 {
  flex-grow: 1;
  flex-basis: 0;
  min-height: 0;
  margin-top: 6px;
  display: flex;
  flex-direction: column; }
  :host .trading-header {
    flex-basis: 20px;
    flex-grow: 0;
    position: relative; }
    :host .trading-header .trading-header-scrollable {
      position: absolute;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
      overflow-y: hidden; }
      :host .trading-header .trading-header-scrollable .trading-row-content {
        flex-basis: 20px;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        border-bottom: 1px black solid;
        margin-bottom: 2px;
        padding: 0 3.5px;
        margin-right: 2.5px; }
        :host .trading-header .trading-header-scrollable .trading-row-content .trading-cell {
          color: grey;
          margin: 0;
          padding: 0;
          flex-grow: 1; }
  :host .trading-content {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 0;
    position: relative; }
    :host .trading-content .trading-scrollable {
      position: absolute;
      height: 100%;
      width: 100%;
      overflow-x: auto;
      overflow-y: auto; }
      :host .trading-content .trading-scrollable .trading-row-content {
        flex-basis: 20px;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        border: 1px solid #666570;
        border-radius: 2px;
        margin-bottom: 5px;
        background-color: #212124;
        padding: 3px 2.5px;
        margin-right: 2.5px; }
        :host .trading-content .trading-scrollable .trading-row-content .trading-cell {
          margin: 0;
          padding: 0;
          font-size: 11px;
          flex-grow: 1; }
  :host .trading-row-content .trading-cell.column-dealtamount, :host .trading-row-content .trading-cell.column-fwd, :host .trading-row-content .trading-cell.column-allin, :host .trading-row-content .trading-cell.column-contra, :host .trading-row-content .trading-cell.column-cost, :host .trading-row-content .trading-cell.column-fwdMarkup {
    text-align: right; }
  :host .trading-row-content .trading-cell .fx-fwd-markup {
    display: inline-block;
    max-width: 55px;
    margin-left: 3px; }
  :host .full-column-mode .trading-row-content {
    width: 960px; }
    :host .full-column-mode .trading-row-content.header {
      position: absolute; }
  :host.ui-state-Done .trading-header .trading-header-scrollable .trading-row-content .trading-cell {
    color: #175F75; }
  :host.ui-state-Done .trading-content .trading-scrollable .trading-row-content .trading-cell {
    color: #2498BA; }