/*
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: flex;
  width: auto; }

.siContainer {
  flex-grow: 1;
  border: 1px solid black;
  padding: 1.5px 2px 0 1.5px;
  display: flex;
  flex-direction: column; }
  .siContainer.siContainer--showloading .si-account-detail {
    display: none; }
  .siContainer.siContainer--showloading .si-loading {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto 1fr; }
  .siContainer.siContainer--showremark .si-account-detail .accountRow {
    grid-template-columns: 106px 1fr 18px;
    /* fix for IE11 */
    display: -ms-grid;
    -ms-grid-column: 1;
    -ms-grid-columns: 106px 1fr 18px;
    -ms-grid-row: 1; }
    .siContainer.siContainer--showremark .si-account-detail .accountRow > :nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1; }
    .siContainer.siContainer--showremark .si-account-detail .accountRow > :nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 2; }
    .siContainer.siContainer--showremark .si-account-detail .accountRow > :nth-child(3) {
      -ms-grid-row: 1;
      -ms-grid-column: 3; }
    .siContainer.siContainer--showremark .si-account-detail .accountRow .icon-feedback {
      display: block; }
  .siContainer .si-account-detail {
    flex: 1;
    display: grid;
    grid-template-rows: 23px 1fr 21px;
    min-height: 100%;
    display: -ms-grid;
    -ms-grid-rows: 23px 1fr 21px;
    -ms-grid-columns: 1fr; }
  .siContainer .si-remark-panel {
    display: none; }
  .siContainer .si-account-detail .siDetail {
    overflow: hidden;
    position: relative;
    -ms-grid-column: 1;
    -ms-grid-row: 2; }
    .siContainer .si-account-detail .siDetail .siDetail-container {
      position: absolute;
      width: 100%; }
  .siContainer .si-account-detail .accountRow, .siContainer .si-account-detail .buttonRow, .siContainer .si-account-detail .detailRow {
    display: grid;
    grid-template-columns: 106px 1fr;
    grid-gap: 0 1.5px;
    position: relative;
    height: 23px; }
  .siContainer .si-account-detail .fieldSetSi {
    margin: 0;
    border-width: 1px 0 0 0;
    padding-bottom: 0; }
    .siContainer .si-account-detail .fieldSetSi .lineText {
      padding: 0 5px;
      font-size: 11px; }
  .siContainer .si-account-detail .accountRow .icon-feedback {
    cursor: pointer;
    color: #fff;
    display: none; }
  .siContainer .si-account-detail .accountRow .si-remark-button--active {
    color: #FF9933; }
  .siContainer .si-account-detail .accountRow .si-remark-button--active:hover {
    color: #fff; }
  .siContainer .si-account-detail .accountRow label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; }
  .siContainer .si-account-detail .buttonRow {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    display: -ms-grid;
    -ms-grid-columns: 106px 1.5px 1fr;
    -ms-grid-rows: 1fr; }
    .siContainer .si-account-detail .buttonRow .sdCancelBtn {
      -ms-grid-column: 1;
      -ms-grid-row: 1; }
    .siContainer .si-account-detail .buttonRow .sdSaveBtn {
      -ms-grid-column: 3;
      -ms-grid-row: 1; }
  .siContainer .si-account-detail .detailRow {
    display: -ms-grid;
    -ms-grid-columns: 106px 1fr;
    -ms-grid-rows: 1fr; }
    .siContainer .si-account-detail .detailRow > label {
      display: inline-block;
      -ms-grid-column: 1;
      -ms-grid-row: 1; }
    .siContainer .si-account-detail .detailRow .selectSI {
      overflow: auto;
      display: inline-block;
      -ms-grid-column: 2;
      -ms-grid-row: 1; }
    .siContainer .si-account-detail .detailRow .toggleLegButton {
      text-align: left;
      padding-left: 7px;
      padding-right: 18px;
      /* fix for IE11 */
      -ms-grid-column: 2;
      -ms-grid-row: 1; }
      .siContainer .si-account-detail .detailRow .toggleLegButton .toggleLegIcon {
        position: absolute;
        top: 1px;
        right: 1px; }
  .siContainer .si-loading {
    display: none; }
    .siContainer .si-loading .loading-body {
      grid-row-start: 2;
      grid-row-end: 3;
      text-align: center; }

.siContainer--editingsiremark {
  padding: 0px; }
  .siContainer--editingsiremark .si-remark-panel {
    display: flex;
    min-height: 100%; }
  .siContainer--editingsiremark .si-account-detail {
    display: none; }

.siContainer.siContainer--embedded {
  border: none; }
  .siContainer.siContainer--embedded .si-account-detail {
    display: grid;
    display: -ms-grid;
    grid-template-rows: 1fr;
    -ms-grid-rows: 1fr; }
    .siContainer.siContainer--embedded .si-account-detail .siDetail {
      -ms-grid-column: 1;
      -ms-grid-row: 1; }
    .siContainer.siContainer--embedded .si-account-detail .accountRow, .siContainer.siContainer--embedded .si-account-detail .buttonRow {
      display: none; }

.ui-state-Disabled .select-si-row label {
  color: #C2C2C2; }

.ui-state-Done .select-si-row label {
  color: #2498BA; }