/*
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 {
  position: relative; }

.notification__panel {
  position: relative;
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-width: 0; }
  .notification__panel .notification__panel-message {
    cursor: pointer;
    display: flex;
    max-width: 100%; }
    .notification__panel .notification__panel-message:hover {
      background-color: #4f4f57;
      color: #FFFFFF; }
  .notification__panel > .notification__panel-message > .notification__alert {
    flex: 0;
    position: relative;
    padding: 0 5px;
    /* for ie11 */
    flex-basis: auto; }
    .notification__panel > .notification__panel-message > .notification__alert > .notification__alert-button {
      background: #000000;
      padding: 4px 0px;
      border-radius: 5px;
      font-weight: normal; }
      .notification__panel > .notification__panel-message > .notification__alert > .notification__alert-button > .notification__button {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        color: inherit; }
        .notification__panel > .notification__panel-message > .notification__alert > .notification__alert-button > .notification__button:hover {
          background: none !important; }
        .notification__panel > .notification__panel-message > .notification__alert > .notification__alert-button > .notification__button:focus {
          border: none !important; }
      .notification__panel > .notification__panel-message > .notification__alert > .notification__alert-button > .notification__alert-count {
        display: none;
        padding-right: 5px;
        font-weight: 700; }
  .notification__panel > .empty-space {
    flex: 1;
    flex-basis: auto; }
  .notification__panel > .notification__panel-message > .notification__latest-message {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    padding-left: 5px;
    max-height: 29px;
    color: #FFFFFF;
    /* for ie11 */
    flex-basis: auto; }
    .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text {
      flex: 1;
      font-weight: normal;
      display: flex;
      max-width: 100%;
      /* for ie11 */
      flex-basis: auto; }
      .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: right;
        flex: 1;
        flex-basis: auto;
        cursor: pointer; }
        .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .ccyPair {
          padding-left: 3px;
          font-weight: 700;
          display: inline; }
          .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .ccyPair .dealtCCY {
            text-decoration: underline; }
          .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .ccyPair .seperator {
            padding: 0 1px; }
        .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .executionStyle, .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .direction, .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .detail {
          padding-left: 3px;
          font-size: 12px;
          display: inline; }
          .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .executionStyle .unit-quotation, .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .direction .unit-quotation, .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-text-detail .detail .unit-quotation {
            font-size: 10px;
            line-height: normal; }
      .notification__panel > .notification__panel-message > .notification__latest-message > .notification__item-text > .notification__item-state {
        padding-left: 5px;
        display: inline-block;
        font-weight: 700;
        overflow: hidden;
        cursor: pointer;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto; }
    .notification__panel > .notification__panel-message > .notification__latest-message.completed .notification__item-state, .notification__panel > .notification__panel-message > .notification__latest-message.partial-fill .notification__item-state, .notification__panel > .notification__panel-message > .notification__latest-message.calculating-fix .notification__item-state {
      color: #2498BA; }
    .notification__panel > .notification__panel-message > .notification__latest-message.cancelled .notification__item-state, .notification__panel > .notification__panel-message > .notification__latest-message.timed-out .notification__item-state {
      color: #F5475B; }
  .notification__panel.notification__unread .notification__panel-message > .notification__icon-alert > .notification__alert-count {
    display: block; }
  .notification__panel.notification__unread .notification__panel-message > .notification__alert > .notification__alert-button > .notification__alert-count {
    display: inherit; }
  .notification__panel.no-message .notification__panel-message {
    cursor: default; }
    .notification__panel.no-message .notification__panel-message:hover, .notification__panel.no-message .notification__panel-message > .notification__alert > .notification__alert-button:hover, .notification__panel.no-message .notification__panel-message > .notification__alert > .notification__alert-button {
      background-color: inherit;
      color: inherit; }

.notification__popup {
  position: absolute;
  min-width: 490px;
  top: 100%;
  right: 0;
  padding: 3px 0;
  border: 1px solid #000000;
  background-color: #2E2E33;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 9999;
  cursor: default; }
  .notification__popup > .notification__container {
    max-height: 256px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #C2C2C2; }
    .notification__popup > .notification__container table {
      background: none; }
      .notification__popup > .notification__container table tr.notification__item {
        overflow: hidden;
        white-space: nowrap;
        border: 0;
        height: auto; }
        .notification__popup > .notification__container table tr.notification__item td.notification__item-text {
          padding: 8px 10px;
          font-weight: normal;
          line-height: normal;
          border: 0; }
          .notification__popup > .notification__container table tr.notification__item td.notification__item-text .ccyPair {
            padding-left: 5px;
            font-weight: 700;
            display: inline; }
            .notification__popup > .notification__container table tr.notification__item td.notification__item-text .ccyPair .dealtCCY {
              text-decoration: underline; }
            .notification__popup > .notification__container table tr.notification__item td.notification__item-text .ccyPair .seperator {
              padding: 0 1px; }
          .notification__popup > .notification__container table tr.notification__item td.notification__item-text .executionStyle, .notification__popup > .notification__container table tr.notification__item td.notification__item-text .direction, .notification__popup > .notification__container table tr.notification__item td.notification__item-text .detail {
            padding-left: 5px;
            font-size: 12px;
            display: inline; }
            .notification__popup > .notification__container table tr.notification__item td.notification__item-text .executionStyle .unit-quotation, .notification__popup > .notification__container table tr.notification__item td.notification__item-text .direction .unit-quotation, .notification__popup > .notification__container table tr.notification__item td.notification__item-text .detail .unit-quotation {
              font-size: 10px;
              line-height: normal; }
        .notification__popup > .notification__container table tr.notification__item td.notification__item-state {
          border: 0;
          height: auto;
          position: relative;
          min-width: 80px;
          padding: 0 18px 0 0; }
          .notification__popup > .notification__container table tr.notification__item td.notification__item-state .remove-notification-item {
            position: absolute;
            top: 3px;
            right: 5px;
            cursor: pointer;
            color: #FFFFFF; }
            .notification__popup > .notification__container table tr.notification__item td.notification__item-state .remove-notification-item:before {
              font-size: 12px; }
            .notification__popup > .notification__container table tr.notification__item td.notification__item-state .remove-notification-item:hover {
              font-weight: 700; }
        .notification__popup > .notification__container table tr.notification__item.completed .notification__item-state, .notification__popup > .notification__container table tr.notification__item.partial-fill .notification__item-state, .notification__popup > .notification__container table tr.notification__item.calculating-fix .notification__item-state {
          color: #2498BA; }
        .notification__popup > .notification__container table tr.notification__item.cancelled .notification__item-state, .notification__popup > .notification__container table tr.notification__item.timed-out .notification__item-state {
          color: #F5475B; }
        .notification__popup > .notification__container table tr.notification__item.new-message .notification__item-text {
          color: #FFFFFF; }
        .notification__popup > .notification__container table tr.notification__item:hover {
          background: none;
          color: #C2C2C2; }
  .notification__popup > .notification__clear-all {
    text-align: center;
    display: none; }
    .notification__popup > .notification__clear-all span {
      font-style: italic;
      cursor: pointer;
      text-transform: none; }
      .notification__popup > .notification__clear-all span:hover {
        text-decoration: underline; }
  .notification__popup.notification__clear-all-show .notification__clear-all {
    display: block; }
  .notification__popup.notification__show {
    display: block; }