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

.fx-ticket-tile {
  margin: 3px 2.5px 3px 2.5px;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  position: relative;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr; }
  .fx-ticket-tile .fx-ticket-tile-loading, .fx-ticket-tile .fx-ticket-tile-content {
    border: 1px solid #666570;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #1F1F1F;
    padding: 5px 5.5px 5px 5px; }
  .fx-ticket-tile .fx-ticket-tile-loading {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    min-height: 0;
    /* fix for IE11 */
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr auto 1fr; }
    .fx-ticket-tile .fx-ticket-tile-loading .loading-body {
      grid-row-start: 2;
      grid-row-end: 3;
      text-align: center;
      /* fix for IE11 */
      -ms-grid-row: 2;
      -ms-grid-column: 1; }
  .fx-ticket-tile .fx-ticket-tile-loaded {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 0;
    /* fix for IE11 */
    flex-basis: auto;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr; }
  .fx-ticket-tile .fx-block-mini-tile {
    display: none; }
  .fx-ticket-tile .fx-ticket-tile-content {
    display: flex;
    flex-direction: column; }
    .fx-ticket-tile .fx-ticket-tile-content fx-header {
      margin-bottom: 1.75px;
      flex-grow: 0;
      flex-basis: auto;
      /* fix for IE11 */ }
      .fx-ticket-tile .fx-ticket-tile-content fx-header div[spot-rate] {
        padding-left: 5px; }
        .fx-ticket-tile .fx-ticket-tile-content fx-header div[spot-rate] .delimiter {
          padding: 0 2px;
          color: #FF9933;
          font-size: 12px; }
        .fx-ticket-tile .fx-ticket-tile-content fx-header div[spot-rate].hideBid {
          margin-left: 30px; }
        .fx-ticket-tile .fx-ticket-tile-content fx-header div[spot-rate].hideAsk {
          margin-right: 30px; }
      .fx-ticket-tile .fx-ticket-tile-content fx-header .exportToSheetBtn {
        margin: 0 4px; }
        .fx-ticket-tile .fx-ticket-tile-content fx-header .exportToSheetBtn .icon-excel::before {
          font-size: 14px; }
      .fx-ticket-tile .fx-ticket-tile-content fx-header .exportBtn .icon-export::before {
        font-size: 14px; }
      .fx-ticket-tile .fx-ticket-tile-content fx-header .r2md-label {
        padding-right: 8px; }
    .fx-ticket-tile .fx-ticket-tile-content .fx-block-memo, .fx-ticket-tile .fx-ticket-tile-content .fx-block-chat {
      display: flex;
      position: absolute;
      top: 25px;
      width: 250px;
      border: 3px solid #4B4B53;
      z-index: 1; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-memo .triangle, .fx-ticket-tile .fx-ticket-tile-content .fx-block-chat .triangle {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #4B4B53;
        top: -8px; }
    .fx-ticket-tile .fx-ticket-tile-content .fx-block-memo {
      right: 5px;
      height: 100px; }
    .fx-ticket-tile .fx-ticket-tile-content .fx-block-chat {
      right: 0px;
      bottom: 0px;
      background-color: inherit; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-chat et-chat {
        margin-bottom: 0px;
        width: 100%; }
    .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary {
      flex-grow: 0;
      flex-basis: auto;
      /* fix for IE11 */
      display: grid;
      grid-template-columns: 107px 107px 55px 80px 45px 45px 50px 1fr 65px 145px;
      grid-auto-rows: 19px;
      /* fix for IE11 */
      display: -ms-grid;
      -ms-grid-columns: 107px 3px 107px 3px 55px 3px 80px 3px 45px 3px 45px 3px 50px 3px 1fr 1fr 3px 65px 3px 145px;
      -ms-grid-rows: 19px 3px 19px 3px 19px;
      grid-template-areas: 'summary-btn summary-btn total-buy-lb  total-buy-value  .   .  client-name-lb   client-name  tabs-area  tabs-area          tabs-area            '
 'summary-btn summary-btn total-sell-lb total-sell-value .   .  .                .            .          total-cost-base-lb total-cost-base-value'
 'reset-btn   submit-btn  total-net-lb  total-net-value  .   .  spot-lb          spot-price   spot-price total-cost-term-lb total-cost-term-value';
      grid-gap: 3px;
      padding: 3px;
      border: 1px solid black; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary label {
        display: block; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary.add-markup {
        grid-template-columns: 105px 105px 50px 80px 45px 28px 33px 1fr 1fr 63px 130px;
        /* fix for IE11 */
        -ms-grid-columns: 105px 3px 105px 3px 50px 3px 80px 3px 28px 3px 28px 3px 33px 3px 1fr 3px 1fr 3px 63px 3px 130px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-block-summary-btn {
        grid-area: summary-btn;
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row-span: 3;
        font-size: 9px;
        font-weight: normal;
        color: yellow;
        height: 100%; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-button-reset {
        grid-area: reset-btn;
        -ms-grid-column: 1;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-timeout-bar {
        grid-area: reset-btn;
        -ms-grid-column: 1;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-button-submit {
        grid-area: submit-btn;
        -ms-grid-column: 3;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-button-withdraw {
        grid-area: submit-btn;
        -ms-grid-column: 3;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-button-reject {
        grid-area: submit-btn;
        -ms-grid-column: 3;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn {
        grid-area: reset-btn/reset-btn/submit-btn/submit-btn;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row: 5;
        display: flex; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-confirmdeal {
          flex: 2;
          flex-basis: 0;
          margin-left: 3px;
          display: none; }
          .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-confirmdeal.RequireEmirConfirm, .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-confirmdeal.EmirFail {
            display: inline-block; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-print {
          margin-left: 3px;
          flex: 1;
          flex-basis: 0; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-markup {
          margin-left: 3px;
          flex: 2;
          flex-basis: 0; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-confirm-print-btn .fx-button-close {
          flex: 1;
          flex-basis: 0;
          max-width: 105px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area {
        display: block;
        grid-area: tabs-area;
        -ms-grid-column: 17;
        -ms-grid-column-span: 5;
        -ms-grid-row: 1;
        text-align: right; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-requirements-label, .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-trading-label {
          margin-left: 5px;
          padding-top: 2px; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-requirements-label, .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-trading-label {
          color: #FF9933;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important; }
          .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-requirements-label.active, .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-trading-label.active {
            text-decoration: underline; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-markup-checkbox {
          display: inline-block; }
          .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-markup-checkbox label {
            display: inline-block; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-buy-label {
        grid-area: total-buy-lb;
        -ms-grid-column: 5;
        -ms-grid-row: 1;
        padding-left: 2px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-sell-label {
        grid-area: total-sell-lb;
        -ms-grid-column: 5;
        -ms-grid-row: 3;
        padding-left: 2px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-net-label {
        grid-area: total-net-lb;
        -ms-grid-column: 5;
        -ms-grid-row: 5;
        padding-left: 2px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-buy-value {
        grid-row: 1;
        -ms-grid-row: 1;
        text-align: right; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-sell-value {
        grid-row: 2;
        -ms-grid-row: 3;
        text-align: right; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-net-value {
        grid-row: 3;
        -ms-grid-row: 5;
        text-align: right; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-buy-ccy-label {
        grid-row: 1;
        -ms-grid-row: 1; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-sell-ccy-label {
        grid-row: 2;
        -ms-grid-row: 3; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-net-ccy-label {
        grid-row: 3;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-client-name-label {
        grid-area: client-name-lb;
        -ms-grid-column: 13;
        -ms-grid-row: 1; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-client-name {
        grid-area: client-name;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 95px;
        -ms-grid-column: 15;
        -ms-grid-row: 1; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-spot-label {
        grid-area: spot-lb;
        -ms-grid-column: 13;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-spot-price-block {
        grid-area: spot-price;
        -ms-grid-column: 15;
        -ms-grid-column-span: 3;
        -ms-grid-row: 5;
        display: flex; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-spot-price-block .fx-spot-price {
          font-size: 11px;
          flex: 1;
          text-align: center; }
        .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-spot-price-block .fx-spot-markup {
          font-size: 11px;
          display: block;
          flex: 0;
          min-width: 55px;
          margin-left: 3px; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-cost-base-label {
        grid-area: total-cost-base-lb;
        -ms-grid-column: 19;
        -ms-grid-row: 3; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-cost-term-label {
        grid-area: total-cost-term-lb;
        -ms-grid-column: 19;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-cost-base-value {
        grid-area: total-cost-base-value;
        text-align: right;
        -ms-grid-column: 21;
        -ms-grid-row: 3; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-total-cost-term-value {
        grid-area: total-cost-term-value;
        text-align: right;
        -ms-grid-column: 21;
        -ms-grid-row: 5; }
      .fx-ticket-tile .fx-ticket-tile-content .fx-block-summary .fx-error {
        grid-column: 7 / span 4;
        grid-row: 3;
        text-align: right;
        color: #F5475B;
        -ms-grid-column: 13;
        -ms-grid-row: 6;
        -ms-grid-column-span: 7;
        -ms-grid-row-span: 3; }
    .fx-ticket-tile .fx-ticket-tile-content et-proxy-unregister-panel {
      padding-bottom: 5px;
      padding-top: 5px;
      flex-grow: 0;
      flex-basis: auto;
      border-bottom: 1px black solid; }
  .fx-ticket-tile.fx-block-tile--close-of-day fx-close-of-day {
    display: grid;
    display: -ms-grid;
    flex-grow: 1;
    flex-basis: 0px;
    min-height: 0; }
  .fx-ticket-tile.fx-block-tile--close-of-day .fx-ticket-tile-content fx-block-requirements, .fx-ticket-tile.fx-block-tile--close-of-day .fx-ticket-tile-content fx-block-trading {
    display: none; }
  .fx-ticket-tile .fx-block-confirm-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2; }
    .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner {
      position: absolute;
      top: 25px;
      left: 4px;
      width: 221px;
      height: 69px;
      margin: 3px;
      background-color: #2e2e33; }
      .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-message {
        position: absolute;
        top: 12px;
        color: #ffffff;
        font-size: 1.3rem;
        margin: 0 12px; }
      .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row {
        position: absolute;
        bottom: 0;
        display: inline-block;
        text-align: right;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 2px; }
        .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row .confirm-yes,
        .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row .confirm-no {
          min-width: 50px;
          font-size: 1.3rem;
          font-weight: normal;
          padding: 0 8px;
          margin: 0 2px;
          height: 23px; }
        .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row .confirm-yes {
          background-color: #ff9933;
          color: #0a0a0a; }
          .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row .confirm-yes:hover {
            background-color: #ffa64d !important; }
        .fx-ticket-tile .fx-block-confirm-backdrop .confirm-banner .confirm-btn-row .confirm-no {
          background-color: #3c3c42;
          color: #c2c2c2; }
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-buy-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-sell-label,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-buy-value, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-sell-value,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-net-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-net-value,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-client-name-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-client-name,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-buy-ccy-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-sell-ccy-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-net-ccy-label,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-spot-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-spot-price,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-cost-base-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-cost-term-label,
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-cost-base-value, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .fx-total-cost-term-value {
    color: #2498BA; }
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary.markup-completed .fx-markup-checkbox input[type="checkbox"] + label {
    opacity: 1;
    color: #2498BA; }
  .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-requirements-label, .fx-ticket-tile.ui-state-Done .fx-ticket-tile-content .fx-block-summary .tabs-area .fx-trading-label {
    color: white; }
  .fx-ticket-tile.ui-state-Negotiate .fx-ticket-tile-content .fx-block-summary .fx-spot-price {
    background-color: #DEC763;
    color: black;
    text-align: center; }
  .fx-ticket-tile.ui-state-Negotiate .fx-ticket-tile-content .fx-block-summary .fx-total-cost-base-value, .fx-ticket-tile.ui-state-Negotiate .fx-ticket-tile-content .fx-block-summary .fx-total-cost-term-value {
    background-color: #DEC763;
    color: black; }
  .fx-ticket-tile.fx-block-tile--shrink .fx-ticket-tile-loaded .fx-ticket-tile-content {
    display: none; }
  .fx-ticket-tile.fx-block-tile--shrink .fx-ticket-tile-loaded .fx-block-mini-tile {
    display: grid;
    display: -ms-grid; }