/*
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*/
.requirements-row-content {
  display: flex;
  flex-direction: row;
  padding-bottom: 2px; }
  .requirements-row-content.header {
    border-bottom: 1px black solid;
    margin-bottom: 2px;
    margin-left: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column; }
    .requirements-row-content.header .requirements-header-absolute {
      display: flex;
      flex-direction: row;
      flex: 1;
      flex-basis: auto; }
  .requirements-row-content .requirements-cell {
    flex-grow: 0;
    flex-basis: auto;
    padding: 0px;
    margin: 0 2px 0 0; }
    .requirements-row-content .requirements-cell.header {
      color: grey; }
      .requirements-row-content .requirements-cell.header[draggable="true"] {
        cursor: move; }
    .requirements-row-content .requirements-cell.dragover-left {
      border-left: 3px orange solid; }
    .requirements-row-content .requirements-cell.dragover-right {
      border-right: 3px orange solid; }
    .requirements-row-content .requirements-cell.column-id {
      flex-basis: 19px;
      text-align: center; }
    .requirements-row-content .requirements-cell.column-tradetype {
      flex-basis: 85px; }
    .requirements-row-content .requirements-cell.column-account {
      flex-basis: 148px; }
    .requirements-row-content .requirements-cell.column-dealtamount {
      flex-basis: 148px;
      flex-grow: 1;
      height: 21px; }
    .requirements-row-content .requirements-cell.column-date {
      flex-basis: 148px;
      flex-grow: 1; }
    .requirements-row-content .requirements-cell.column-direction {
      flex-basis: 30px; }
    .requirements-row-content .requirements-cell.column-si {
      padding-left: 3px;
      flex-basis: 23px; }
    .requirements-row-content .requirements-cell.column-isnpft {
      flex-basis: 37px; }
    .requirements-row-content .requirements-cell.column-close {
      position: relative;
      min-width: 25px;
      flex-basis: 25px; }
      .requirements-row-content .requirements-cell.column-close button {
        position: absolute;
        right: 0; }

:host {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s;
  height: 36px; }
  :host .requirements-row {
    display: flex;
    flex-direction: column;
    border: 1px solid #666570;
    border-radius: 2px;
    padding: 5px 0 1px 1px;
    margin: 0 2.5px 5px 2.5px;
    background-color: #212124; }
    :host .requirements-row .requirements-row-content {
      flex-grow: 0;
      position: relative; }
      :host .requirements-row .requirements-row-content.requirements-row-2 {
        display: none; }
      :host .requirements-row .requirements-row-content .column-date1, :host .requirements-row .requirements-row-content .column-date2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr; }
    :host .requirements-row .requirements-row-si {
      height: 50px;
      display: none;
      position: relative; }
      :host .requirements-row .requirements-row-si fx-si-detail {
        position: absolute;
        height: 100%;
        width: 260px; }
      :host .requirements-row .requirements-row-si .fx-block-remark-label {
        position: absolute;
        text-align: right;
        padding-right: 7px;
        width: 100px; }
      :host .requirements-row .requirements-row-si .fx-block-remark {
        position: absolute;
        height: 42px; }
    :host .requirements-row.ui-state-Disabled .requirements-row-content label.column-id, :host .requirements-row.ui-state-Disabled .requirements-row-content select.column-tradetype, :host .requirements-row.ui-state-Disabled .requirements-row-content button[readonly] {
      color: #C2C2C2; }
    :host .requirements-row.ui-state-Disabled .requirements-row-content a.column-direction {
      text-decoration: none;
      cursor: default; }
    :host .requirements-row.ui-state-Disabled .requirements-row-si textarea.fx-block-remark, :host .requirements-row.ui-state-Disabled .requirements-row-si .fx-block-remark-label {
      color: #C2C2C2;
      pointer-events: auto; }
    :host .requirements-row.ui-state-Negotiate .requirements-row-content label.column-id, :host .requirements-row.ui-state-Negotiate .requirements-row-content select.column-tradetype, :host .requirements-row.ui-state-Negotiate .requirements-row-content button[readonly] {
      color: #C2C2C2; }
    :host .requirements-row.ui-state-Negotiate .requirements-row-content a.column-direction {
      text-decoration: none;
      cursor: default; }
    :host .requirements-row.ui-state-Negotiate .requirements-row-si textarea.fx-block-remark, :host .requirements-row.ui-state-Negotiate .requirements-row-si .fx-block-remark-label {
      color: #C2C2C2;
      pointer-events: auto; }
    :host .requirements-row.ui-state-Done .requirements-row-content label.column-id, :host .requirements-row.ui-state-Done .requirements-row-content select.column-tradetype {
      color: #2498BA; }
    :host .requirements-row.ui-state-Done .requirements-row-content a.column-direction {
      text-decoration: none;
      cursor: default; }
    :host .requirements-row.ui-state-Done .requirements-row-si textarea.fx-block-remark, :host .requirements-row.ui-state-Done .requirements-row-si .fx-block-remark-label {
      color: #2498BA;
      pointer-events: auto; }
  :host.is-two-rows {
    height: 60px; }
    :host.is-two-rows .requirements-row .requirements-row-content.requirements-row-2 {
      display: flex; }
  :host.is-expand {
    height: 86px; }
    :host.is-expand.is-two-rows {
      height: 110px; }
      :host.is-expand.is-two-rows.is-double-si {
        height: 160px; }
    :host.is-expand .requirements-row .requirements-row-si {
      display: block; }
  :host.is-deleting {
    height: 0; }
  :host.last-row {
    opacity: 0.4; }
    :host.last-row .requirements-row .requirements-row-content .requirements-cell.column-close button {
      display: none; }
  :host .requirements-row .requirements-row-content .column-direction.requirements-cell.error {
    border: 1px solid #F5475B; }
  :host.hide-si .requirements-row .requirements-row-content .requirements-cell.column-si {
    pointer-events: none !important;
    text-decoration: none !important; }
  :host.hide-remark .requirements-row .requirements-row-si .fx-block-remark-label, :host.hide-remark .requirements-row .requirements-row-si .fx-block-remark {
    display: none; }
  :host.browser-Firefox {
    transition: none; }