/*
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*/
.fx-header {
  display: flex;
  height: 19.5px;
  flex-direction: row; }
  .fx-header .fx-symbol {
    flex: 0;
    /* fix for IE11 */
    flex-basis: auto; }
    .fx-header .fx-symbol .btn, .fx-header .fx-symbol .btn:disabled, .fx-header .fx-symbol .btn:hover, .fx-header .fx-symbol .btn:focus {
      color: #FF9933;
      font-weight: bold;
      opacity: 1;
      font-size: 14px;
      background-image: none !important;
      outline: none !important;
      box-shadow: none;
      border-width: 0 0 0 0;
      background-color: Transparent;
      border: none !important; }
    .fx-header .fx-symbol .btn.active {
      text-decoration: underline; }
    .fx-header .fx-symbol .dealBaseBtn {
      padding-right: 1px; }
    .fx-header .fx-symbol .dealCcySeparator {
      padding: 0px;
      min-width: 0; }
    .fx-header .fx-symbol .dealTermBtn {
      padding-left: 1px; }
    .fx-header .fx-symbol .chooseDealtCcy {
      display: flex;
      flex-direction: row; }
    .fx-header .fx-symbol.multi-instrument {
      line-height: 9px;
      margin-top: -1px; }
      .fx-header .fx-symbol.multi-instrument .instrument-name {
        font-size: 9px;
        padding-left: 5px; }
      .fx-header .fx-symbol.multi-instrument .instrument-overflow {
        max-width: 81px;
        overflow: hidden;
        text-overflow: ellipsis; }
      .fx-header .fx-symbol.multi-instrument .btn, .fx-header .fx-symbol.multi-instrument .btn:disabled, .fx-header .fx-symbol.multi-instrument .btn:hover, .fx-header .fx-symbol.multi-instrument .btn:focus {
        font-size: 11px;
        height: 14px; }
      .fx-header .fx-symbol.multi-instrument .chooseDealtCcy {
        margin-top: -2px; }
  .fx-header .space-front, .fx-header .space-end {
    flex: 1; }
  .fx-header .close-btn {
    flex: 0;
    min-width: 18px;
    color: #FFFFFF; }
    .fx-header .close-btn.close-btn-hidden {
      visibility: hidden; }
  .fx-header.fx-block-ticket .memoBtn .icon-feedback::before {
    font-size: 17px; }
  .fx-header.fx-block-ticket .chatBtn {
    margin-left: 4px; }
    .fx-header.fx-block-ticket .chatBtn coral-icon {
      font-size: 17px; }
  .fx-header .memoBtn.memo-hidden {
    visibility: hidden; }
  .fx-header .memoBtn.memoFilled {
    color: #FF9933; }
  .fx-header .chatBtn.chat-hidden {
    visibility: hidden; }
  .fx-header .chatBtn.blink {
    color: #FF9933;
    animation: blinker 1s linear infinite; }
  .fx-header .unitQuotation {
    flex: 0;
    font-size: 10px;
    font-weight: 100;
    min-width: 80px;
    padding-top: 2px;
    padding-right: 3px;
    text-align: right; }
  .fx-header .midPrice {
    flex: 0;
    padding-top: 2px;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    min-width: 82px;
    max-width: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid black;
    vertical-align: middle;
    display: none;
    margin-bottom: 1.1px;
    margin-left: 4px;
    text-indent: 5%; }
  .fx-header .gidId {
    display: none;
    flex: 0;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    vertical-align: -40%; }
    .fx-header .gidId.gid-hidden {
      visibility: hidden; }
  .fx-header.Disabled .close-btn, .fx-header.Disabled .memoBtn {
    visibility: hidden; }
  .fx-header.Disabled .gidId, .fx-header.Disabled .midPrice {
    display: none; }
  .fx-header.Negotiate .close-btn, .fx-header.Negotiate .memoBtn {
    display: none; }
  .fx-header.Negotiate .gidId {
    display: inline; }
  .fx-header.Negotiate .midPrice {
    display: inline;
    background-color: #DEC763;
    color: black; }
  .fx-header.Done .close-btn.shown-on-done, .fx-header.Done .memoBtn.shown-on-done {
    display: inline-block; }
  .fx-header.Done .close-btn, .fx-header.Done .memoBtn {
    display: none; }
  .fx-header.Done .gidId.shown-on-done {
    display: none; }
  .fx-header.Done .gidId {
    display: inline;
    color: #2498BA; }
  .fx-header.Done .midPrice {
    display: inline;
    background-color: #2498BA;
    color: white; }
  .fx-header.displayGidID .close-btn, .fx-header.displayGidID .memoBtn {
    display: none; }
  .fx-header.displayGidID .gidId {
    display: inline; }
  .fx-header.small-ccy .fx-symbol .btn, .fx-header.small-ccy .fx-symbol .btn:disabled, .fx-header.small-ccy .fx-symbol .btn:hover, .fx-header.small-ccy .fx-symbol .btn:focus {
    font-size: 11px; }
  .fx-header.OneClickLive .midPrice {
    margin-right: 55px;
    display: inline;
    background-color: #DEC763;
    color: black; }
  .fx-header.OneClickFrozen .midPrice {
    margin-right: 55px;
    display: inline;
    background-color: #b09e4f;
    color: black; }
  .fx-header.OneClickSubmitFailed .midPrice {
    margin-right: 55px;
    display: inline;
    background-color: #b6c8d9;
    color: black; }
  .fx-header.OneClickCreditFailed .midPrice {
    margin-right: 55px;
    display: inline;
    background-color: #ffbedc;
    color: black; }