/*
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-columns: 1fr;
  grid-template-rows: 1fr;
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr; }

.fx-poms-cancellation-ticket-tile {
  display: flex;
  flex-direction: column;
  margin: 3px 2.5px 3px 2.5px;
  position: relative; }
  .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-loading,
  .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content {
    border: 1px solid #666570;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #1F1F1F;
    padding: 5px 5.5px 5px 5px; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-loading:hover,
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content:hover {
      border: 1px solid #FF9933; }
  .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-loading {
    flex: 1;
    flex-basis: auto;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
    min-height: 0;
    display: -ms-grid;
    -ms-grid-columns: 1fr auto 1fr;
    -ms-grid-rows: 1fr auto 1fr; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-loading .loading-body {
      grid-row-start: 2;
      grid-row-end: 3;
      grid-column-start: 2;
      grid-column-end: 3;
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      text-align: center; }
  .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content {
    flex: 1;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    /* fix for IE11 */
    flex-basis: auto; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-header {
      flex: 0;
      flex-basis: auto;
      margin-bottom: 1.75px; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-rate-panel {
      flex: 0;
      flex-basis: auto;
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      margin: 1.75px 0px;
      /* fix for IE11 */
      flex-basis: auto; }
      .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-rate-panel .fx-poms-cancellation-direction-button {
        flex: 1;
        flex-basis: auto;
        max-width: 262px; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-scroll-panel {
      display: flex;
      flex: 1;
      flex-basis: auto; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content fx-poms-cancellation-parent {
      flex: 0;
      flex-basis: auto;
      margin: 1.75px 0px;
      /* fix for IE11 */
      flex-basis: auto; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data {
      flex: 1;
      margin-top: 1.75px;
      display: flex;
      flex-direction: column;
      padding: 1.5px 2px 0px 1.5px;
      border: 1px solid black;
      background-color: #1F1F1F; }
      .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data .fx-poms-cancellation-request-normal-fields {
        flex: 0;
        flex-basis: auto;
        display: grid;
        padding-top: 4px;
        grid-template-columns: 89.5px 15px 63.5px 83px;
        grid-template-areas: 'deal-type deal-type account account'
 'reason-lbl reason-lbl reason-lbl reason-lbl'
 'reason reason reason reason'
 'empty-row empty-row empty-row empty-row';
        grid-gap: 2px 1.5px;
        /* for ie11 */
        -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px;
        -ms-grid-rows: 21px 2px 21px 2px 21px;
        display: -ms-grid; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data .fx-poms-cancellation-request-normal-fields .fx-poms-cancellation-deal-types {
          grid-area: deal-type;
          /* for ie11 */
          -ms-grid-row: 3;
          -ms-grid-column: 1;
          -ms-grid-column-span: 3;
          display: block; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data .fx-poms-cancellation-request-normal-fields .fx-poms-cancellation-account {
          grid-area: account;
          /* for ie11 */
          -ms-grid-row: 3;
          -ms-grid-column: 5;
          -ms-grid-column-span: 3;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data .fx-poms-cancellation-request-normal-fields .fx-poms-cancellation-reason-lbl {
          grid-area: reason-lbl;
          -ms-grid-row: 5;
          -ms-grid-column: 1;
          -ms-grid-column-span: 3;
          display: block; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data .fx-poms-cancellation-request-normal-fields .fx-poms-cancellation-reason {
          grid-area: reason;
          -ms-grid-row: 7;
          -ms-grid-column: 1;
          -ms-grid-column-span: 7;
          display: block;
          opacity: 1; }
    .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action {
      flex: 0;
      flex-basis: auto;
      display: grid;
      grid-template-columns: 89.5px 15px 63.5px 83px;
      grid-template-areas: 'close close submit-area submit-area';
      grid-gap: 2px 1.5px;
      /* for ie11 */
      display: -ms-grid;
      -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px;
      min-height: 0; }
      .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-button-close {
        grid-area: close;
        align-self: flex-end;
        /* for ie11 */
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3; }
      .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area {
        grid-area: submit-area;
        display: flex;
        flex-direction: row;
        align-self: flex-end;
        column-gap: 1.5px;
        /* for ie11 */
        -ms-grid-row: 1;
        -ms-grid-column: 5;
        -ms-grid-column-span: 3; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-submit {
          flex: 1;
          flex-basis: auto; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-print {
          flex: 1;
          flex-basis: auto; }
        .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-confirmdeal {
          flex: 2;
          flex-basis: auto;
          display: none; }
          .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-confirmdeal.RequireEmirConfirm, .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-confirmdeal.AwaitEmirConfirm, .fx-poms-cancellation-ticket-tile .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-action .fx-poms-cancellation-submit-area .fx-poms-cancellation-button-confirmdeal.EmirFail {
            display: block; }
  .fx-poms-cancellation-ticket-tile fx-mini-tile {
    flex: 1;
    flex-basis: auto;
    display: none; }
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--shrink .fx-poms-cancellation-ticket-tile-content {
    display: none; }
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--shrink fx-mini-tile {
    display: grid; }
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--half .fx-poms-cancellation-ticket-tile-content fx-poms-cancellation-parent,
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--half .fx-poms-cancellation-ticket-tile-content .fx-poms-cancellation-request-data {
    display: none; }
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--deal-logged .fx-poms-cancellation-deal-types,
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--deal-logged .fx-poms-cancellation-account,
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--deal-logged .fx-poms-cancellation-reason-lbl,
  .fx-poms-cancellation-ticket-tile.fx-poms-cancellation-ticket-tile--deal-logged .fx-poms-cancellation-reason {
    color: #2498BA; }