/* 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; min-height: 0; /* fix for IE11 */ display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; } .fx-loms-ticket-tile.ui-state-Activated .fx-label, .fx-loms-ticket-tile.ui-state-Activated .fx-textarea, .fx-loms-ticket-tile.ui-state-Activated .fx-input-text, .fx-loms-ticket-tile.ui-state-Activated .fx-span { color: #1cb31c; } .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-label, .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-textarea, .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-input-text, .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-span { color: #1cb31c; } .fx-loms-ticket-tile.ui-state-Activated .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-activate, .fx-loms-ticket-tile.ui-state-Informed .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-activate, .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-activate { display: none; } .fx-loms-ticket-tile.ui-state-Activated .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-print, .fx-loms-ticket-tile.ui-state-Informed .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-print, .fx-loms-ticket-tile.ui-state-AwaitingActivation .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-print { display: inline-block; flex: 1; } .fx-loms-ticket-tile.ui-state-Done .fx-label, .fx-loms-ticket-tile.ui-state-Done .fx-textarea, .fx-loms-ticket-tile.ui-state-Done .fx-input-text, .fx-loms-ticket-tile.ui-state-Done .fx-span { color: #2498BA; } .fx-loms-ticket-tile.ui-state-Done .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-activate { display: none; } .fx-loms-ticket-tile.ui-state-Done .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-print { display: inline-block; flex: 1; } .fx-loms-ticket-tile { display: flex; flex-direction: column; margin: 3px 2.5px 3px 2.5px; position: relative; -ms-grid-column: 1; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-ticket-tile-loading, .fx-loms-ticket-tile .fx-loms-full-tile { border: 1px solid #666570; border-radius: 2px; box-sizing: border-box; background-color: #1F1F1F; padding: 5px 5.5px 5px 5px; } .fx-loms-ticket-tile .fx-loms-ticket-tile-loading:hover, .fx-loms-ticket-tile .fx-loms-full-tile:hover { border: 1px solid #FF9933; } .fx-loms-ticket-tile .fx-loms-ticket-tile-loading { flex: 1; display: grid; 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-loms-ticket-tile .fx-loms-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-loms-ticket-tile .fx-loms-ticket-tile-loaded { flex: 1; 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-loms-ticket-tile .fx-loms-mini-tile { display: none; } .fx-loms-ticket-tile .fx-loms-full-tile { display: flex; flex-direction: column; } .fx-loms-ticket-tile .fx-loms-full-tile fx-header { margin-bottom: 1.75px; flex: 0; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-rate-panel { flex-direction: row; margin: 1.75px 0px; flex: 0; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; /* fix for IE11 */ flex-basis: auto; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-rate-panel fx-rate-button-group { flex-grow: 1; } .fx-loms-ticket-tile .fx-loms-full-tile fx-loms-banner { flex-grow: 0; flex-basis: 50px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-unavailable-banner { flex-grow: 0; flex-basis: 50px; display: grid; display: ms-grid; grid-template-rows: 18px 18px; -ms-grid-rows: 18px 18px; color: #FFFFFF; padding: 5px 10px 5px 10px; margin-top: 2px; margin-bottom: 4px; min-height: 0; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-unavailable-banner.error { background-color: #FF0000; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-unavailable-banner.warn { background-color: #FF9933; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-unavailable-banner .title { font-size: 15px; font-weight: bold; height: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; grid-column: 1; grid-row: 1; -ms-grid-column: 1; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-unavailable-banner .description { -ms-grid-column: 1; -ms-grid-row: 2; grid-column: 1; grid-row: 2; height: 32px; text-overflow: ellipsis; overflow: hidden; white-space: initial; font-size: 13px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data { flex: 1; display: flex; flex-direction: column; padding: 1.5px 2px 0px 1.5px; border: 1px solid black; background-color: #1F1F1F; grid-gap: 2px 1.5px; margin-top: 1.75px; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-scroll-panel { display: flex; flex: 1; flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields { flex: 0; display: grid; grid-template-columns: 89.5px 15px 63.5px 83px; grid-template-areas: 'deal-type deal-type account account' 'tenor-lb tenor-lb tenor-date tenor-date' 'dealt-ccy-lbl dealt-ccy-lbl dealt-amount dealt-amount' '. . conversion-rate conversion-rate' 'rate-lbl rate-lbl spot-rate spot-rate'; column-gap: 1.5px; /* fix for IE11 */ display: -ms-grid; -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px; -ms-grid-rows: 1fr 2px 1fr 2px 1fr 2px 1fr; flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-deal-types { grid-area: deal-type; margin-top: 2px; /* fix for IE11 */ -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-account { grid-area: account; margin-top: 2px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-tenor-label { grid-area: tenor-lb; margin-top: 2px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-tenor-label .validation-tooltip { color: #F5475B; position: absolute; margin-left: 3px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-tenor-date { grid-area: tenor-date; margin-top: 2px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 3; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-dealt-ccy-lbl { grid-area: dealt-ccy-lbl; margin-top: 2px; /* fix for IE11 */ -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 5; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-dealt-ccy-lbl LABEL { display: inline-block; width: 100%; box-sizing: border-box; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-dealt-ccy-lbl LABEL SPAN { float: right; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-dealt-amount { grid-area: dealt-amount; min-width: 0px; margin-top: 2px; /* fix for IE11 */ -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 5; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-conversion-rate { grid-area: conversion-rate; margin-top: 2px; -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 7; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-rate-lbl { grid-area: rate-lbl; margin-top: 2px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 9; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-rate-lbl.Disabled { color: #4A4A52; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-normal-fields .fx-loms-rate { grid-area: spot-rate; min-width: 0px; margin-top: 2px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 9; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section { flex: 0; flex-basis: auto; display: grid; grid-template-columns: 89.5px 15px 63.5px 83px; grid-template-areas: 'markup-lbl markup-lbl markup markup'; grid-gap: 2px 1.5px; /* fix for IE11 */ display: -ms-grid; -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px; -ms-grid-rows: 1fr; flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-lbl-section { grid-area: markup-lbl; min-width: 0px; display: flex; flex-direction: row; /* fix for IE11 */ -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-lbl-section .fx-loms-markup-lbl { flex-grow: 1; min-height: 0; /* fix for IE11 */ display: inline-block; overflow: hidden; white-space: nowrap; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-lbl-section .fx-loms-markup-lbl.Disabled { color: #4A4A52; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-lbl-section .tooltip-icon { flex-grow: 0; flex-basis: 15px; /* fix for IE11 */ display: inline-block; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-refresh { grid-area: markup; min-width: 0px; /* fix for IE11 */ display: inline-block; -ms-grid-column: 5; -ms-grid-column-span: 5; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-refresh .fx-loms-markup { display: inline-block; width: 129px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-refresh .fx-markup-refresh-btn { width: 18px; min-width: 15px; padding: 2px 0px 0px 0px; margin: 0px 0px 2px 0px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-markup-section .fx-loms-markup-refresh .fx-markup-refresh-btn .icon-refresh::before { font-size: 12px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area { margin-top: 1.5px; margin-bottom: 3px; flex: 0; flex-basis: auto; display: none; grid-template-columns: 89.5px 15px 63.5px 83px; grid-template-rows: 21px 21px 21px 21px; grid-template-areas: 'fixing-lbl fixing-lbl fixing-date fixing-date' 'fixing-detail-area fixing-detail-area fixing-detail-area fixing-detail-area' 'fixing-detail-area fixing-detail-area fixing-detail-area fixing-detail-area' 'fixing-detail-area fixing-detail-area fixing-detail-area fixing-detail-area'; grid-gap: 2px 1.5px; /* fix 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 2px 21px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area .fx-loms-fixing-lbl { grid-area: fixing-lbl; /* fix for IE11 */ display: inline-block; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area .fx-loms-fixing-date { grid-area: fixing-date; /* fix for IE11 */ -ms-grid-column: 5; -ms-grid-column-span: 3; -ms-grid-row: 1; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area .fx-fixing-detail-area { grid-area: fixing-detail-area; /* fix for IE11 */ -ms-grid-column: 1; -ms-grid-column-span: 7; -ms-grid-row: 3; -ms-grid-row-span: 5; background: #1A1A1C; border: 1px solid #212124; padding: 5px; white-space: pre-wrap; overflow: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area .fx-fixing-detail-area:hover { border-color: #666570; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area .fx-fixing-detail-area .fx-label { padding: 0; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .good-til, .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fixing-order { flex: 0; margin-top: 20px; display: grid; /* fix for IE11 */ display: -ms-grid; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data et-custom-fields { margin-top: 10px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .empty-row { flex: 1; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-tall { flex: 0; display: none; grid-template-rows: 1fr; grid-template-columns: 1fr; /* fix for IE11 */ -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action { flex: 0; display: none; grid-template-columns: 89.5px 15px 63.5px 83px; grid-template-areas: 'close close submit-area submit-area'; grid-gap: 2px 1.5px; /* fix for IE11 */ flex-basis: auto; -ms-grid-columns: 89.5px 1.5px 15px 1.5px 63.5px 1.5px 83px; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-button-close { grid-area: close; align-self: flex-end; /* fix for IE11 */ -ms-grid-column: 1; -ms-grid-column-span: 3; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area { grid-area: submit-area; display: flex; flex-direction: row; align-self: flex-end; /* fix for IE11 */ -ms-grid-column: 5; -ms-grid-column-span: 3; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-trade-options { flex: 0; margin-right: 3px; margin-left: -1px; /* fix for IE11 */ display: inline-block; flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-activate { flex: 1; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action .fx-loms-submit-area .fx-loms-button-print { display: none; /* fix for IE11 */ flex-basis: auto; } .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-si-detail, .fx-loms-ticket-tile .fx-loms-full-tile .fx-loms-memo { flex: 1; z-index: 1; background-color: #1F1F1F; display: none; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--si-detail .fx-loms-rate-panel, .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--si-detail .fx-loms-request-data { display: none; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--si-detail .fx-loms-si-detail { display: flex; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--memo .fx-loms-request-data { display: none; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--memo .fx-loms-memo { display: flex; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--hide-request-action .fx-loms-request-action { visibility: hidden; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--hide-request-action .validation-tooltip { visibility: hidden; } .fx-loms-ticket-tile.fx-loms-tile--shrink.fx-loms-tile--activated .fx-loms-memo { display: flex; } .fx-loms-ticket-tile.fx-loms-tile--shrink .fx-loms-full-tile { display: none; } .fx-loms-ticket-tile.fx-loms-tile--shrink .fx-loms-mini-tile { display: grid; flex: 1; /* fix for IE11 */ display: -ms-grid; } .fx-loms-ticket-tile.fx-loms-tile--half .fx-loms-full-tile .fx-loms-request-data { display: none; } .fx-loms-ticket-tile.fx-loms-tile--half.fx-loms-tile--memo .fx-loms-full-tile .fx-loms-memo { display: none; } .fx-loms-ticket-tile.fx-loms-tile--regular .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action, .fx-loms-ticket-tile.fx-loms-tile--regular .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area { display: grid; /* fix for IE11 */ display: -ms-grid; } .fx-loms-ticket-tile.fx-loms-tile--tall .fx-loms-full-tile .fx-loms-request-data .fx-loms-request-action, .fx-loms-ticket-tile.fx-loms-tile--tall .fx-loms-full-tile .fx-loms-request-data .fx-loms-fixing-area { display: grid; /* fix for IE11 */ display: -ms-grid; } .fx-loms-ticket-tile.fx-loms-tile--tall.display-fixing-area .fx-loms-full-tile .fx-loms-request-data .good-til, .fx-loms-ticket-tile.fx-loms-tile--tall.display-fixing-area .fx-loms-full-tile .fx-loms-request-data .fixing-order { margin-top: 2px; } .fx-loms-ticket-tile.fx-loms-tile--si-detail .fx-loms-full-tile .fx-loms-rate-panel, .fx-loms-ticket-tile.fx-loms-tile--si-detail .fx-loms-full-tile .fx-loms-request-data { display: none; } .fx-loms-ticket-tile.fx-loms-tile--si-detail .fx-loms-full-tile .fx-loms-si-detail { display: flex; } .fx-loms-ticket-tile.fx-loms-tile--memo .fx-loms-full-tile .fx-loms-request-data { display: none; } .fx-loms-ticket-tile.fx-loms-tile--memo .fx-loms-full-tile .fx-loms-memo { display: flex; } .fx-loms-ticket-tile.fx-loms-tile--hide-request-action .fx-loms-full-tile .fx-loms-request-action { visibility: hidden; } .fx-loms-ticket-tile.fx-loms-tile--hide-request-action .fx-loms-full-tile .validation-tooltip { visibility: hidden; } .fx-loms-ticket-tile.fx-loms-tile--close-of-day.fx-loms-tile--half .fx-loms-ticket-tile-loaded .fx-loms-full-tile .fx-loms-rate-panel { padding-top: 0px; display: none; } .fx-loms-ticket-tile.fx-loms-tile--close-of-day fx-close-of-day { display: grid; flex: 1; flex-basis: 0; min-height: 0; } .fx-loms-ticket-tile.fx-loms-tile--close-of-day .fx-loms-ticket-tile-loaded .fx-loms-full-tile .fx-loms-request-data { display: none; }