/** * PRO LESS MANIFEST * ===================================================================== * * =Reference * =Atoms * =Base * =Molecules * =Components * =Organisms * =Shell & Controls * =Shame */ /* ==================================================================== =Reference ================================================================= */ /** * CONSTANTS * ===================================================================== * * Application constants not available for WLCs. Generally these are for * neutral, or abstract, aspects of the application which don't * influence the theming options. * * These values are also used to derive other variables through LESS * functions within the master variables.less reference file. * * ------------------------------------------------------------------- * DEV NOTES: * * - Derived from variables.less in Bootstrap 2.3.2 (Apache Licence) * - https://github.com/twitter/bootstrap/blob/v2.3.2/less/variables.less * * ------------------------------------------------------------------- * CONTENTS: * * =Defaults * =App Container * =Breakpoints * =Queries * =Base Unit * =View Stack * =Monochrome Palette * =Color Aliases * =Color Palette * =Trading Colors * =Typography * =Forms * =Buttons * =Datagrid * =Spacing * =Border Radius * =Chart * =Toolbar * =List * =Context Menu * =Signup Banner * =Search * =Highchart charts * =Graph height */ /* ==================================================================== =Defaults ================================================================= */ /** * 1. A value must be set for static compilation - the proper value * will be injected by the OpenCSS Server at runtime. */ /* ==================================================================== =App Container ================================================================= */ /* ==================================================================== =Breakpoints ================================================================= */ /* ==================================================================== =Queries ================================================================= */ /** * What we look in the separation of devices is to have a distinct * target for smartphones, touchscreens and for mouse and touch pad devices * * A good article about how to target different devices can be found here: * https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134 */ /** * mouse, touch pad * * since IE11 doesn't support "hover"and "pointer" media features, ie-specific * media queries are used to make the query pass also for IE11 * See this post for more info: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ */ /* smartphones, touchscreens */ /* ==================================================================== =Base Unit ================================================================= */ /** * - All lineheights, gutters, margins and padding should be a * multiplication of the base unit, the based unit will represent 1rem. * * - 0.5rem base-half 4px * - 1rem base-1 8px * - 2rem base-2 16px * - 3rem base-3 24px * - 4rem base-4 32px * - 5rem base-5 40px * - 6rem base-6 48px * * This is being set on the html tag on all apps, and for backwards * compatibility we set a inherited base unit, specific to each app, * on the body element. * * See: common/base/type/type.less */ /* ==================================================================== =View Stack ================================================================= */ /** * Phone workspace */ /** * Underlay and up */ /** * App splash screen and up */ /** * These z-indices are deprecated and should not be imported anymore. */ /* ==================================================================== =Animations ================================================================= */ /* ==================================================================== =Linking Channel Colors ================================================================= */ /* ==================================================================== =Instrument Icons ================================================================= */ /* ==================================================================== =Dealer Boxes (Tradetile) ================================================================= */ /* ==================================================================== =Loader ================================================================= */ /* ==================================================================== =Help ================================================================= */ /* ==================================================================== =Splash ================================================================= */ /* ==================================================================== =ManagedPortfolios (aka SaxoSelect) ================================================================= */ /* ==================================================================== =Strategy ================================================================= */ /* ==================================================================== =My Account ================================================================= */ /* ==================================================================== =Spacing ================================================================= */ /* ==================================================================== =Toolbar ================================================================= */ /* ==================================================================== =List ================================================================= */ /* ==================================================================== =Secondary Session banner ================================================================= */ /* ==================================================================== =Search ================================================================= */ /* ==================================================================== =Divider ================================================================= */ /* ==================================================================== =Performance overview ================================================================= */ /** * 1. Taken from design. */ /* * NEW STYLE GUIDE CONSTANTS * ===================================================================== * */ /* * The following variables define the new style guide which will be used * exclusively by the Investor app, and progressively for new components * shared across all apps. * * https://wiki/display/IPL/Design+-+Responsive+Style+guide */ /* ==================================================================== =Fonts ================================================================= */ /* ==================================================================== =Gutter ================================================================= */ /* ==================================================================== =Colors ================================================================= */ /* * TYPOGRAPHY (Pro) * ===================================================================== * * Pro-specific typography metrics. Applies to both Evergreen and * legacy browsers. * * File should be referenced BEFORE the core dependency (type.less). * This is required so that the app-specific typographic scale is in * place before being referenced by subsequent rulesets. * * ------------------------------------------------------------------- * CONTENTS: * * =App Container * =Variables * =Icon Sizes * =Typographic Scale Mapping * =Forms * =Buttons * =Datagrid * =Spacing * =Chart * =Toolbar * */ /* ==================================================================== =App Container ================================================================= */ /* ==================================================================== =Variables - used in subsequent files for calculations ================================================================= */ /* ==================================================================== =Icon sizes ================================================================= */ /* ==================================================================== =Forms ================================================================= */ /* ==================================================================== =Buttons ================================================================= */ /* ==================================================================== =Tabs ================================================================= */ /* ==================================================================== =Datagrid ================================================================= */ /** * Controls spacing of data grid contents. If altered then the * JavaScript mappings for ALL columns in any derivative Component * (i.e. Watchlist/Positions/Orders) MUST be also updated to * account for the change in padding. See also the JavaScript * View Layer documentation for more details. */ /* ==================================================================== =Spacing ================================================================= */ /* ==================================================================== =Toolbar ================================================================= */ /* ==================================================================== =List ================================================================= */ /* * THEME * ===================================================================== */ /** * The @stock-theme variable is passed directly to the handler by the * OpenCSS App server, alongside any client specific overrides. * * These variables are added to the bottom of the entry less file, * meaning they will override any prior variable (aka the defaults) * as less uses the last definition of any variable during the compilation. */ /** * ROOT CONSTANTS * ===================================================================== * * Application constants not available for WLCs. Generally these are for * neutral, or abstract, aspects of the application which don't * influence the theming options. * * This file imports in theme.less */ :root { /* ==================================================================== =Monochrome Palette ================================================================= */ --white-raw: 255, 255, 255; --gray-near-white-raw: 238, 238, 238; --gray-lightest-raw: 221, 221, 221; --gray-lighter-raw: 204, 204, 204; --gray-near-lighter-raw: 183, 183, 183; --gray-mid-lighter-raw: 187, 187, 187; --gray-light-raw: 170, 170, 170; --gray-semi-light-raw: 153, 153, 153; --gray-mid-raw: 136, 136, 136; --gray-semi-mid-raw: 119, 119, 119; --gray-medium-raw: 102, 102, 102; --gray-semi-dark-raw: 85, 85, 85; --gray-dark-raw: 68, 68, 68; --gray-darker-raw: 51, 51, 51; --gray-mid-darkest-raw: 43, 43, 43; --gray-darkest-raw: 34, 34, 34; --gray-near-black-raw: 17, 17, 17; --black-raw: 0, 0, 0; /* ==================================================================== =Color Aliases ================================================================= */ --red-raw: 233, 62, 51; --dark-red-raw: 165, 42, 42; --orange-raw: 255, 153, 0; --dark-orange-raw: 235, 94, 0; --light-brown-raw: 239, 130, 82; --green-raw: 0, 168, 0; --light-green-raw: 0, 255, 0; --blue-raw: 52, 152, 219; --light-blue-raw: 43, 136, 203; --dark-blue-raw: 0, 0, 139; --gold-raw: 251, 211, 51; --luminous-green-raw: 76, 255, 0; /* ==================================================================== =Color Palette ================================================================= */ /** * Universal colors used across all files. * * 1. Can be overridden in CA Admin. */ --app-primary-bg-raw: 51, 153, 221; --app-primary-color-raw: var(--white-raw); --app-primary-active-bg-raw: 68, 170, 238; --app-primary-active-color-raw: var(--white-raw); --app-link-color-raw: 51, 153, 221; --app-link-active-color-raw: 51, 153, 221; --app-success-bg-raw: 255, 161, 0; --app-warning-bg-raw: 255, 161, 0; --app-warning-active-bg-raw: 255, 187, 0; --app-profit-color-raw: 0, 168, 0; --app-loss-color-raw: 233, 62, 51; /* ==================================================================== =Products Colors ================================================================= */ --product-color-srd-raw: 239, 65, 53; --product-color-fx-raw: 0, 120, 15; --product-color-fx-forward-raw: 10, 95, 180; --product-color-fx-swap-raw: 10, 95, 180; --product-color-fx-metal-raw: 255, 226, 0; --product-color-option-raw: 255, 105, 5; --product-color-future-raw: 80, 95, 130; --product-color-strategy-raw: 255, 105, 5; --product-color-index-raw: 10, 95, 180; --product-color-stock-raw: 230, 160, 40; --product-color-ipo-raw: 230, 160, 40; --product-color-etf-raw: 27, 163, 156; --product-color-mf-raw: 153, 85, 187; --product-color-warrant-raw: 255, 105, 5; --product-color-turbo-raw: 19, 77, 19; --product-color-certificate-raw: 85, 0, 85; --product-color-stock-index-raw: 168, 168, 168; --product-color-cfd-raw: 162, 38, 52; --product-color-interest-raw: 85, 120, 170; --product-color-bond-raw: 85, 120, 170; --product-color-contract-option-raw: 105, 70, 160; --product-color-cash-raw: 171, 171, 171; /* * Satisfaction colors */ --app-emoticon-positive: #08a345; --app-emoticon-slightly-positive: #91d548; --app-emoticon-neutral: #88909a; --app-emoticon-slightly-negative: #ff8a00; --app-emoticon-negative: #d40032; /* ==================================================================== =Trading Colors ================================================================= */ --app-buy-bg-raw: 51, 153, 221; --app-buy-alt-bg-raw: 53, 106, 170; --app-buy-color-raw: var(--white-raw); --app-buy-active-bg-raw: 68, 170, 238; --app-buy-active-alt-bg-raw: 70, 130, 180; --app-buy-active-color-raw: var(--white-raw); --app-sell-bg-raw: 238, 34, 34; --app-sell-alt-bg-raw: 53, 106, 170; --app-sell-color-raw: var(--white-raw); --app-sell-active-bg-raw: 255, 51, 51; --app-sell-active-alt-bg-raw: 70, 130, 180; --app-sell-active-color-raw: var(--white-raw); --app-quicktrade-buy-bg-raw: var(--app-buy-bg-raw); --app-quicktrade-buy-alt-bg-raw: var(--app-buy-alt-bg-raw); --app-quicktrade-buy-color-raw: var(--app-buy-color-raw); --app-quicktrade-buy-active-bg-raw: var(--app-buy-active-bg-raw); --app-quicktrade-buy-active-alt-bg-raw: var(--app-buy-active-alt-bg-raw); --app-quicktrade-buy-active-color-raw: var(--app-buy-active-color-raw); --app-quicktrade-sell-bg-raw: var(--app-sell-bg-raw); --app-quicktrade-sell-alt-bg-raw: var(--app-sell-alt-bg-raw); --app-quicktrade-sell-color-raw: var(--app-sell-color-raw); --app-quicktrade-sell-active-bg-raw: var(--app-sell-active-bg-raw); --app-quicktrade-sell-active-alt-bg-raw: var(--app-sell-active-alt-bg-raw); --app-quicktrade-sell-active-color-raw: var(--app-sell-active-color-raw); --app-live-bg-raw: 0, 170, 0; --app-live-color-raw: var(--white-raw); --app-live-active-bg-raw: 0, 204, 0; --app-live-active-color-raw: var(--white-raw); --app-indicative-bg-raw: 255, 161, 0; --mkt-cfd-bg-raw: 160, 45, 30; --mkt-fx-bg-raw: 0, 120, 15; --mkt-fu-bg-raw: 80, 95, 130; --mkt-eq-bg-raw: 230, 160, 40; --mkt-co-bg-raw: 105, 70, 160; --mkt-etf-bg-raw: 0, 204, 153; --mkt-mf-bg-raw: 153, 85, 187; --mkt-bo-bg-raw: 85, 120, 170; --mkt-idx-bg-raw: 10, 95, 180; --mkt-idx-eq-bg-raw: 168, 168, 168; --mkt-metal-bg-raw: 0, 120, 15; --mkt-all-options-bg-raw: 255, 105, 5; --mkt-sub-color-raw: var(--white-raw); --mkt-sub-option-bg-raw: 255, 105, 5; --mkt-sub-spread-bg-raw: 255, 105, 5; --mkt-sub-etf-bg-raw: 0, 204, 153; --mkt-sub-warrant-bg-raw: 255, 105, 5; --mkt-sub-idx-bg-raw: 10, 95, 180; --mkt-sub-fx-bg-raw: 10, 95, 180; --mkt-sub-idx-exp-bg-raw: 255, 0, 0; --mkt-sub-commodity-bg-raw: 80, 95, 130; --mkt-sub-interest-bg-raw: 85, 120, 170; --mkt-sub-metal-bg-raw: 255, 226, 0; --mkt-sub-fixed-income-bg-raw: 85, 120, 170; --mkt-sub-developed-eq-bg-raw: 230, 160, 40; --mkt-sub-emerging-eq-bg-raw: 226, 107, 10; --mkt-sub-non-trad-bg-raw: 214, 214, 214; --mkt-sub-other-bg-raw: 81, 86, 87; /* ==================================================================== =Spacing and sizing ================================================================= */ --spacing-xxsmall: 1px; --spacing-xsmall: 2px; --spacing-small: 4px; --spacing-medium: 8px; --spacing-large: 16px; --spacing-xlarge: 24px; --spacing-xxlarge: 48px; --app-gutter: var(--spacing-medium); /* ==================================================================== =Gutters ================================================================= */ --gutter-tiny: 2px; --gutter-small: 4px; --gutter-medium: 8px; --gutter-large: 16px; /* ==================================================================== =Border Radius ================================================================= */ --app-border-radius: 2px; --border-radius-action: 2px; --border-radius-card: 6px; --border-radius-dropdown: 2px; --border-radius-input: 2px; --aurora-border-radius-action: 4px; --aurora-border-radius-input: 4px; --aurora-border-radius-card: 10px; --app-scroll-width: 8px; --form-group-label-size: 200px; --form-group-field-size: 255px; --popup-arrow-size: 20px; --popup-inset: var(--spacing-medium); --logo-primary: none; --logo-secondary: none; --logo-splash: none; --logo-primary-pro: none; --logo-secondary-pro: none; --logo-splash-pro: none; --investor-primary-logo: none; --investor-secondary-logo: none; --investor-splash-logo: none; --connect-primary-logo: none; --connect-secondary-logo: none; --connect-splash-logo: none; --logo-default-height: 100px; --logo-primary-height: 1; --logo-primary-width: 0; --logo-secondary-height: 1; --logo-secondary-width: 0; --logo-splash-width: 0; --logo-splash-height: 1; --app-desktop-x: 1024px; --app-desktop-y: 300px; --app-desktop-footer-size: 33px; --app-desktop-fullmodal-width: 512px; --app-tablet-x: 1024px; --app-tablet-y: 768px; --app-tablet-settings-offset: 660px; --app-tablet-footer-size: 40px; --app-tablet-fullmodal-width: 640px; --app-phone-x: 320px; --app-phone-header-size: 40px; --app-phone-nav-offset: 40px; --secondary-session-banner-size: 32px; /** * 1. Spec says PRO needs to be 32px, so quick fix is made below. Perhaps it would be best to keep it 33px like the others. */ --app-masthead-logo-height: 33px; --app-masthead-padding: var(--app-gutter); --app-masthead-size: calc( var(--app-masthead-logo-height) + (2 * var(--app-masthead-padding)) ); --app-pro-masthead-logo-height: 10px; --app-pro-masthead-padding: 9px; --app-pro-header-size: calc( var(--app-pro-masthead-logo-height) + 2 * var(--app-pro-masthead-padding) ); /* ==================================================================== =Fonts ================================================================= */ --default-font-stack: 'Helvetica Neue', Arial, Roboto, sans-serif; /* Win fallback */ --font-family-text-themed: 'CustomFont'; --font-family-heading-themed: 'CustomFont'; --font-family-text: var(--font-family-text-themed), var(--default-font-stack), debug-text; --font-family-heading: var(--font-family-heading-themed), var(--default-font-stack), debug-heading; --font-family-text-inter: var(--font-family-text-themed), 'Inter', var(--default-font-stack), debug-text; --font-family-heading-inter: var(--font-family-heading-themed), 'Inter', var(--default-font-stack), debug-heading; /* ==================================================================== =RGB color variables can be consumed by LESS files ================================================================= */ /** * raw color variables just hold RBG values and they should be used * with CSS native rgb(r,g,b) function instead of LESS rgb() function * as LESS will fail to compile CSS variables. */ /* ==================================================================== =Monochrome Palette ================================================================= */ --white: rgb(var(--white-raw)); --gray-near-white: rgb(var(--gray-near-white-raw)); --gray-lightest: rgb(var(--gray-lightest-raw)); --gray-lighter: rgb(var(--gray-lighter-raw)); --gray-near-lighter: rgb(var(--gray-near-lighter-raw)); --gray-mid-lighter: rgb(var(--gray-mid-lighter-raw)); --gray-light: rgb(var(--gray-light-raw)); --gray-semi-light: rgb(var(--gray-semi-light-raw)); --gray-mid: rgb(var(--gray-mid-raw)); --gray-semi-mid: rgb(var(--gray-semi-mid-raw)); --gray-medium: rgb(var(--gray-medium-raw)); --gray-semi-dark: rgb(var(--gray-semi-dark-raw)); --gray-dark: rgb(var(--gray-dark-raw)); --gray-darker: rgb(var(--gray-darker-raw)); --gray-mid-darkest: rgb(var(--gray-mid-darkest-raw)); --gray-darkest: rgb(var(--gray-darkest-raw)); --gray-near-black: rgb(var(--gray-near-black-raw)); --black: rgb(var(--black-raw)); /* ==================================================================== =Color Aliases ================================================================= */ --red: rgb(var(--red-raw)); --dark-red: rgb(var(--dark-red-raw)); --orange: rgb(var(--orange-raw)); --dark-orange: rgb(var(--dark-orange-raw)); --light-brown: rgb(var(--light-brown-raw)); --green: rgb(var(--green-raw)); --light-green: rgb(var(--light-green-raw)); --blue: rgb(var(--blue-raw)); --light-blue: rgb(var(--light-blue-raw)); --dark-blue: rgb(var(--dark-blue-raw)); --gold: rgb(var(--gold-raw)); --luminous-green: rgb(var(--luminous-green-raw)); --app-buy-bg: rgb(var(--app-buy-bg-raw)); --app-buy-alt-bg: rgb(var(--app-buy-alt-bg-raw)); --app-buy-color: rgb(var(--app-buy-color-raw)); --app-buy-active-bg: rgb(var(--app-buy-active-bg-raw)); --app-buy-active-alt-bg: rgb(var(--app-buy-active-alt-bg-raw)); --app-buy-active-color: rgb(var(--app-buy-active-color-raw)); --app-sell-bg: rgb(var(--app-sell-bg-raw)); --app-sell-alt-bg: rgb(var(--app-sell-alt-bg-raw)); --app-sell-color: rgb(var(--app-sell-color-raw)); --app-sell-active-bg: rgb(var(--app-sell-active-bg-raw)); --app-sell-active-alt-bg: rgb(var(--app-sell-active-alt-bg-raw)); --app-sell-active-color: rgb(var(--app-sell-active-color-raw)); --app-quicktrade-buy-bg: rgb(var(--app-quicktrade-buy-bg-raw)); --app-quicktrade-buy-alt-bg: rgb(var(--app-quicktrade-buy-alt-bg-raw)); --app-quicktrade-buy-color: rgb(var(--app-quicktrade-buy-color-raw)); --app-quicktrade-buy-active-bg: rgb(var(--app-quicktrade-buy-active-bg-raw)); --app-quicktrade-buy-active-alt-bg: rgb(var(--app-quicktrade-buy-active-alt-bg-raw)); --app-quicktrade-buy-active-color: rgb(var(--app-quicktrade-buy-active-color-raw)); --app-quicktrade-sell-bg: rgb(var(--app-quicktrade-sell-bg-raw)); --app-quicktrade-sell-alt-bg: rgb(var(--app-quicktrade-sell-alt-bg-raw)); --app-quicktrade-sell-color: rgb(var(--app-quicktrade-sell-color-raw)); --app-quicktrade-sell-active-bg: rgb(var(--app-quicktrade-sell-active-bg-raw)); --app-quicktrade-sell-active-alt-bg: rgb( var(--app-quicktrade-sell-active-alt-bg-raw) ); --app-quicktrade-sell-active-color: rgb(var(--app-quicktrade-sell-active-color-raw)); --app-live-bg: rgb(var(--app-live-bg-raw)); --app-live-color: rgb(var(--app-live-color-raw)); --app-live-active-bg: rgb(var(--app-live-active-bg-raw)); --app-live-active-color: rgb(var(--app-live-active-color-raw)); --app-indicative-bg: rgb(var(--app-indicative-bg-raw)); --mkt-cfd-bg: rgb(var(--mkt-cfd-bg-raw)); --mkt-fx-bg: rgb(var(--mkt-fx-bg-raw)); --mkt-fu-bg: rgb(var(--mkt-fu-bg-raw)); --mkt-eq-bg: rgb(var(--mkt-eq-bg-raw)); --mkt-co-bg: rgb(var(--mkt-co-bg-raw)); --mkt-etf-bg: rgb(var(--mkt-etf-bg-raw)); --mkt-mf-bg: rgb(var(--mkt-mf-bg-raw)); --mkt-bo-bg: rgb(var(--mkt-bo-bg-raw)); --mkt-idx-bg: rgb(var(--mkt-idx-bg-raw)); --mkt-idx-eq-bg: rgb(var(--mkt-idx-eq-bg-raw)); --mkt-metal-bg: rgb(var(--mkt-metal-bg-raw)); --mkt-all-options-bg: rgb(var(--mkt-all-options-bg-raw)); --mkt-sub-color: rgb(var(--mkt-sub-color-raw)); --mkt-sub-option-bg: rgb(var(--mkt-sub-option-bg-raw)); --mkt-sub-spread-bg: rgb(var(--mkt-sub-spread-bg-raw)); --mkt-sub-etf-bg: rgb(var(--mkt-sub-etf-bg-raw)); --mkt-sub-warrant-bg: rgb(var(--mkt-sub-warrant-bg-raw)); --mkt-sub-idx-bg: rgb(var(--mkt-sub-idx-bg-raw)); --mkt-sub-fx-bg: rgb(var(--mkt-sub-fx-bg-raw)); --mkt-sub-idx-exp-bg: rgb(var(--mkt-sub-idx-exp-bg-raw)); --mkt-sub-commodity-bg: rgb(var(--mkt-sub-commodity-bg-raw)); --mkt-sub-interest-bg: rgb(var(--mkt-sub-interest-bg-raw)); --mkt-sub-metal-bg: rgb(var(--mkt-sub-metal-bg-raw)); --mkt-sub-fixed-income-bg: rgb(var(--mkt-sub-fixed-income-bg-raw)); --mkt-sub-developed-eq-bg: rgb(var(--mkt-sub-developed-eq-bg-raw)); --mkt-sub-emerging-eq-bg: rgb(var(--mkt-sub-emerging-eq-bg-raw)); --mkt-sub-non-trad-bg: rgb(var(--mkt-sub-non-trad-bg-raw)); --mkt-sub-other-bg: rgb(var(--mkt-sub-other-bg-raw)); --signupbanner-size: 24px; --app-disclaimer-size: 15px; --app-primary-bg: rgb(var(--app-primary-bg-raw)); --app-primary-color: rgb(var(--app-primary-color-raw)); --app-primary-active-bg: rgb(var(--app-primary-active-bg-raw)); --app-primary-active-color: rgb(var(--app-primary-active-color-raw)); --app-link-color: rgb(var(--app-link-color-raw)); --app-link-active-color: rgb(var(--app-link-active-color-raw)); --app-success-bg: rgb(var(--app-success-bg-raw)); --app-warning-bg: rgb(var(--app-warning-bg-raw)); --app-warning-active-bg: rgb(var(--app-warning-active-bg-raw)); --app-profit-color: rgb(var(--app-profit-color-raw)); --app-loss-color: rgb(var(--app-loss-color-raw)); /* ==================================================================== =Products Colors ================================================================= */ --product-color-srd: rgb(var(--product-color-srd-raw)); --product-color-fx: rgb(var(--product-color-fx-raw)); --product-color-fx-forward: rgb(var(--product-color-fx-forward-raw)); --product-color-fx-swap: rgb(var(--product-color-fx-swap-raw)); --product-color-fx-metal: rgb(var(--product-color-fx-metal-raw)); --product-color-option: rgb(var(--product-color-option-raw)); --product-color-future: rgb(var(--product-color-future-raw)); --product-color-strategy: rgb(var(--product-color-strategy-raw)); --product-color-index: rgb(var(--product-color-index-raw)); --product-color-stock: rgb(var(--product-color-stock-raw)); --product-color-ipo: rgb(var(--product-color-ipo-raw)); --product-color-etf: rgb(var(--product-color-etf-raw)); --product-color-mf: rgb(var(--product-color-mf-raw)); --product-color-warrant: rgb(var(--product-color-warrant-raw)); --product-color-turbo: rgb(var(--product-color-turbo-raw)); --product-color-certificate: rgb(var(--product-color-certificate-raw)); --product-color-stock-index: rgb(var(--product-color-stock-index-raw)); --product-color-cfd: rgb(var(--product-color-cfd-raw)); --product-color-interest: rgb(var(--product-color-interest-raw)); --product-color-bond: rgb(var(--product-color-bond-raw)); --product-color-contract-option: rgb(var(--product-color-contract-option-raw)); --product-color-cash: rgb(var(--product-color-cash-raw)); } /** * ROOT BLACK THEME FOR CSS VARIABLES * ==================================================================== */ :root { /* ==================================================================== =Raw color variables can be configured from CA Admin Note: These should not be consumed directly ================================================================= */ --app-base-raw: 28, 28, 28; --app-bg-raw: var(--app-base-raw); --app-underlay-bg-raw: var(--black-raw); --app-color-raw: var(--gray-near-white-raw); --app-error-color-raw: 238, 153, 0; --app-etch-color-raw: var(--gray-darkest-raw); --app-inverse-color-raw: var(--white-raw); --app-nav-color-raw: var(--gray-semi-light-raw); --app-nav-active-color-raw: var(--gray-near-white-raw); --pro-app-nav-color-raw: var(--gray-semi-light-raw); --pro-app-nav-active-color-raw: var(--gray-near-white-raw); --pro-app-nav-border-color-raw: var(--gray-dark-raw); --color-primary-raw: 51, 153, 221; --color-primary-hover-raw: 68, 170, 238; --color-buy-raw: 51, 153, 221; --color-sell-raw: 238, 34, 34; --color-positive-raw: var(--app-profit-color-raw); --color-negative-raw: var(--app-loss-color-raw); --color-error-raw: 255, 161, 0; --color-success-raw: 0, 168, 0; --app-scroll-bg-raw: var(--gray-medium-raw); --app-scroll-bg-ie-raw: var(--gray-dark-raw); --app-header-border-raw: var(--app-bg-raw); --border-color-default-raw: 46, 46, 46; --border-color-highlight-raw: 62, 62, 62; --border-color-highlight-inverted-raw: 214, 214, 214; --border-color-dimmed-raw: 19, 19, 19; --border-color-primary-raw: var(--color-primary-raw); --outline-color-default-raw: 238, 238, 238; /* ==================================================================== =Regular Context ================================================================= */ --app-content-bg-raw: 14, 14, 14; --app-active-bg-raw: var(--gray-darkest-raw); --app-hairline-raw: var(--gray-darkest-raw); --app-meta-color-raw: var(--gray-mid-raw); --app-muted-color-raw: var(--gray-medium-raw); --app-transline-raw: var(--app-content-bg-raw); --app-etchline-raw: var(--app-etch-color-raw); --app-related-bg-raw: var(--gray-mid-darkest-raw); --app-highlight-bg-raw: 51, 61, 68; --app-sup-bg-raw: var(--gray-mid-darkest-raw); --app-sup-active-bg-raw: 59, 59, 59; --app-sup-color-raw: var(--gray-near-white-raw); --app-sup-active-color-raw: var(--gray-near-white-raw); --app-sup-border-raw: var(--gray-semi-dark-raw); --app-sub-bg-raw: 0, 0, 0, 0; --app-sub-active-bg-raw: 0, 0, 0, 0; --app-sub-border-raw: 59, 59, 59; --app-sub-color-raw: var(--gray-light-raw); --app-sub-active-color-raw: var(--gray-lightest-raw); --app-sub-deep-bg-raw: var(--gray-darkest-raw); --app-sub-deep-color-raw: var(--gray-light-raw); --app-sub-deep-border-raw: var(--app-alt-transline-raw); /* ==================================================================== =Alternative Context ================================================================= */ --app-alt-related-bg-raw: var(--gray-semi-dark-raw); --app-alt-accent-bg-raw: var(--gray-mid-darkest-raw); --app-alt-active-bg-raw: var(--app-active-bg-raw); --app-alt-keyline-raw: var(--app-hairline-raw); --app-alt-hairline-raw: var(--app-hairline-raw); --app-alt-transline-raw: var(--app-transline-raw); --app-alt-etchline-raw: var(--app-etchline-raw); --app-alt-meta-color-raw: var(--gray-mid-raw); --app-alt-muted-color-raw: var(--gray-medium-raw); --app-alt-sub-color-raw: var(--app-sub-color-raw); --app-related-border-raw: 19, 19, 19; --app-icon-color-raw: var(--app-meta-color-raw); --divider-color-raw: var(--gray-mid-raw); --app-divider-bg-raw: 22, 22, 22; --legacydivider-highlight-color-raw: var(--app-color-raw); --legacydivider-border-raw: var(--app-hairline-raw); --legacydivider-bg-start-raw: 28, 28, 28; --legacydivider-bg-end-raw: 14, 14, 14; --table-bg-accent-raw: var(--gray-dark-raw); --table-border-raw: var(--app-hairline-raw); --btn-clear-bg-raw: 0, 0, 0, 0; --btn-clear-hover-color-raw: var(--white-raw); --btn-disabled-bg-raw: 0, 0, 0, 0; --btn-disabled-color-raw: var(--app-muted-color-raw); --btn-disabled-border-raw: var(--app-hairline-raw); --btn-toggled-color-raw: var(--app-primary-bg-raw); --btn-highlight-color-raw: var(--app-primary-bg-raw); --btn-unchecked-bg-raw: var(--app-sup-bg-raw); --btn-unchecked-color-raw: var(--app-sup-color-raw); --btn-checked-bg-raw: var(--app-sup-active-bg-raw); --btn-checked-color-raw: var(--app-sup-active-color-raw); --actionbtn-bg-raw: var(--app-sup-bg-raw); --actionbtn-color-raw: var(--app-sup-color-raw); --actionbtn-hover-bg-raw: var(--app-sup-active-bg-raw); --actionbtn-hover-color-raw: var(--app-sup-active-color-raw); --actionbtn-active-bg-raw: var(--app-sup-active-bg-raw); --tabs-frame-bg-raw: var(--border-color-default-raw); --tabs-frame-border-raw: var(--gray-dark-raw); --tabs-sub-frame-border-raw: var(--gray-darkest-raw); --tabs-pane-border-raw: 0, 0, 0, 0; --tabs-active-color-raw: var(--gray-near-white-raw); --tabs-inactive-color-raw: var(--gray-mid-raw); --tabs-active-bg-raw: var(--gray-semi-dark-raw); --tabs-pro-frame-bg-raw: var(--gray-dark-raw); --pro-tabs-link-border-raw: var(--gray-darkest-raw); --pro-tabs-active-icon-color-raw: var(--gray-mid-raw); --pro-tabs-panel-header-bg-raw: var(--gray-darker-raw); --text-color-default-raw: 238, 238, 238; --text-color-highlight-raw: 255, 255, 255; --text-color-secondary-raw: 136, 136, 136; --text-color-tertiary-raw: 102, 102, 102; --text-color-inverted-raw: 17, 17, 17; --text-color-banner-image-dark-raw: 17, 17, 17; --text-color-banner-image-light-raw: 238, 238, 238; --background-app-raw: 0, 0, 0; --background-app-inverted-raw: 255, 255, 255; --background-selected-raw: 46, 46, 46; --background-gradient-default-1-raw: 14, 14, 14; --background-gradient-default-2-raw: 14, 14, 14; --background-gradient-highlight-1-raw: 21, 21, 21; --background-gradient-highlight-2-raw: 21, 21, 21; --action-background-default-raw: 43, 43, 43; --action-background-default-hover-raw: 59, 59, 59; --action-background-disabled-raw: 0, 0, 0, 0; --action-background-lighter-raw: 68, 68, 68; --action-background-lighter-hover-raw: 85, 85, 85; --action-background-primary-raw: var(--color-primary-raw); --action-background-primary-hover-raw: var(--color-primary-hover-raw); --action-background-buy-raw: var(--color-buy-raw); --action-background-buy-hover-raw: 68, 170, 238; --action-background-sell-raw: var(--color-sell-raw); --action-background-sell-hover-raw: 255, 51, 51; --action-border-color-highlight-raw: var(--border-color-highlight-raw); --action-border-color-disabled-raw: var(--border-color-default-raw); --action-text-color-default-raw: var(--text-color-default-raw); --action-text-color-primary-raw: 255, 255, 255; --action-text-color-secondary-raw: var(--text-color-secondary-raw); --action-text-color-disabled-raw: var(--text-color-tertiary-raw); --aurora-color-brand-primary-raw: 71, 116, 179; --aurora-border-level-1-raw: 25, 33, 42; /* ==================================================================== =Combo-Input ================================================================= */ --combo-input-color-raw: var(--app-sup-color-raw); /* ==================================================================== =Forms ================================================================= */ --input-color-raw: var(--app-sub-deep-color-raw); --input-border-raw: var(--action-border-color-highlight-raw); --input-placeholder-color-raw: var(--app-muted-color-raw); --input-focus-bg-raw: var(--app-sub-active-bg-raw); --input-focus-color-raw: var(--app-sub-active-color-raw); /* ==================================================================== =Pro Combo Input ================================================================= */ --procomboinput-bg-raw: var(--gray-mid-darkest-raw); --procomboinput-label-color-raw: var(--gray-mid-raw); --procomboinput-value-color-raw: var(--gray-lightest-raw); --procomboinput-value-hover-color-raw: var(--white-raw); --procomboinput-input-focus-bg-raw: var(--gray-near-black-raw); --input-validation-color-raw: var(--app-warning-bg-raw); --input-validation-outline-raw: var(--input-validation-color-raw); --input-validation-message-bg-raw: var(--input-validation-color-raw); --input-validation-message-color-raw: var(--gray-darkest-raw); --input-validation-icon-color-raw: var(--input-validation-color-raw); --select-color-raw: var(--app-sup-color-raw); --select-options-bg-raw: var(--gray-medium-raw); --select-hover-bg-raw: var(--app-sup-active-bg-raw); --select-hover-color-raw: var(--app-sup-active-color-raw); --chart-background-raw: 0, 0, 0, 0; --chart-text-raw: var(--gray-semi-light-raw); --chart-text-background-raw: var(--chart-background-raw); --chart-text-border-raw: var(--gray-semi-light-raw); --chart-color-border-raw: var(--gray-darker-raw); --chart-plot-default-raw: var(--app-primary-bg-raw); --chart-major-axis-line-raw: var(--gray-dark-raw); --chart-minor-axis-line-raw: var(--gray-dark-raw); --chart-axis-background-raw: var(--chart-background-raw); --chart-axis-border-raw: var(--chart-major-axis-line-raw); --chart-candlestick-up-border-raw: var(--green-raw); --chart-candlestick-up-fill-raw: var(--green-raw); --chart-candlestick-up-shadow-raw: var(--green-raw); --chart-candlestick-down-border-raw: var(--red-raw); --chart-candlestick-down-fill-raw: var(--red-raw); --chart-candlestick-down-shadow-raw: var(--red-raw); --chart-ohlc-up-raw: var(--gray-semi-light-raw); --chart-ohlc-down-raw: var(--red-raw); --chart-bol-upper-raw: var(--red-raw); --chart-bol-lower-raw: var(--light-green-raw); --chart-bol-fill-raw: var(--gray-lightest-raw); --chart-cci-main-line-raw: var(--gray-semi-light-raw); --chart-cci-high-raw: var(--red-raw); --chart-cci-middle-raw: var(--gray-semi-light-raw); --chart-cci-low-raw: var(--green-raw); --chart-kch-upper-raw: var(--red-raw); --chart-kch-lower-raw: var(--light-green-raw); --chart-kch-middle-raw: var(--blue-raw); --chart-kch-fill-raw: var(--gray-lightest-raw); --chart-macd-base-raw: var(--light-blue-raw); --chart-macd-trigger-raw: var(--dark-orange-raw); --chart-macd-histogram-raw: var(--gray-semi-light-raw); --chart-rsi-average-raw: var(--gray-semi-light-raw); --chart-rsi-overbought-raw: var(--red-raw); --chart-rsi-middle-raw: var(--gray-semi-light-raw); --chart-rsi-oversold-raw: var(--green-raw); --chart-splitter-color-raw: 0, 0, 0, 0; --chart-stoc-overbought-raw: var(--red-raw); --chart-stock-oversold-raw: var(--gray-semi-light-raw); --chart-stocfk-raw: var(--light-brown-raw); --chart-stocfd-raw: var(--light-green-raw); --chart-stocsk-raw: var(--gray-semi-light-raw); --chart-stocsd-raw: var(--red-raw); --chart-pivot-resistance-raw: var(--dark-red-raw); --chart-pivot-raw: var(--orange-raw); --chart-pivot-support-raw: var(--dark-blue-raw); --chart-label-text-raw: var(--app-primary-color-raw); --chart-label-background-raw: var(--app-primary-bg-raw); --chart-label-border-raw: var(--app-primary-bg-raw); --chart-price-line-color-raw: var(--red-raw); --chart-line-color-raw: var(--color-primary-raw); --chart-infobox-text-background-raw: var(--app-base-raw); --chart-infobox-text-border-raw: var(--app-base-raw); --chart-infobox-text-raw: var(--chart-text-raw); --chart-order-buy-color-raw: var(--app-primary-bg-raw); --chart-order-sell-color-raw: var(--red-raw); --chart-order-buy-distance-color-raw: var(--gray-lightest-raw); --chart-order-sell-distance-color-raw: var(--gray-lightest-raw); --chart-order-buy-entry-type-text-color-raw: var(--white-raw); --chart-order-sell-entry-type-text-color-raw: var(--white-raw); --chart-order-buy-amount-text-color-raw: var(--black-raw); --chart-order-sell-amount-text-color-raw: var(--black-raw); --chart-order-distance-text-background-raw: 0, 0, 0, 0; --chart-order-cost-text-background-raw: var(--gray-dark-raw); --chart-order-buy-text-color-raw: var(--white-raw); --chart-order-sell-text-color-raw: var(--white-raw); --chart-order-buy-not-working-color-raw: var(--orange-raw); --chart-order-sell-not-working-color-raw: var(--orange-raw); --chart-order-buy-label-background-raw: var(--app-content-bg-raw); --chart-order-sell-label-background-raw: var(--app-content-bg-raw); --chart-order-buy-label-text-raw: var(--app-color-raw); --chart-order-sell-label-Text-raw: var(--app-color-raw); --chart-order-group-raw: var(--gray-semi-light-raw); --chart-position-long-amount-text-color-raw: var(--black-raw); --chart-position-short-amount-text-color-raw: var(--black-raw); --chart-position-triangle-border-raw: var(--gray-near-black-raw); --chart-bid-label-text-raw: var(--app-primary-bg-raw); --chart-bid-label-background-raw: var(--chart-text-background-raw); --chart-bid-label-border-raw: var(--app-primary-bg-raw); --chart-ask-label-text-raw: var(--red-raw); --chart-ask-label-background-raw: var(--gray-darkest-raw); --chart-ask-label-border-raw: var(--red-raw); --chart-ask-price-line-color-raw: var(--red-raw); --chart-bid-price-line-color-raw: var(--app-primary-bg-raw); --chart-indicative-prices-color-raw: var(--chart-text-raw); --chart-indicative-prices-background-color-raw: var(--chart-text-background-raw); --chart-annotation-overlay-raw: var(--gray-mid-raw); --chart-annotation-overlay-message-raw: var(--app-primary-bg-raw); --chart-wpr-main-line-raw: var(--gray-semi-light-raw); --chart-adx-raw: var(--gray-semi-light-raw); --chart-collapsed-panel-background-raw: var(--app-content-bg-raw); --chart-trade-signals-buy-raw: var(--app-buy-bg-raw); --chart-trade-signals-sell-raw: var(--app-sell-bg-raw); --chart-trade-signals-target-raw: var(--app-muted-color-raw); --chart-positionsummarybox-bg-raw: 34, 34, 34, 0.8; --chart-count-down-timer-text-color-raw: var(--white-raw); --chart-trackball-arrow-color-raw: var(--white-raw); --chart-overview-chart-price-line-color-raw: var(--color-primary-raw); --chart-overview-chart-prev-close-color-raw: var(--color-primary-raw); --chart-overview-chart-volume-color-raw: var(--border-color-default-raw); --chart-overview-chart-price-line-color-aurora-raw: var( --aurora-color-brand-primary-raw ); --chart-overview-chart-prev-close-color-aurora-raw: var( --aurora-color-brand-primary-raw ); --chart-overview-chart-volume-color-aurora-raw: var(--aurora-background-level-2-raw); --chart-overview-chart-grid-color-aurora-raw: var(--aurora-border-level-1-raw); --tradebtn-default-bg-raw: var(--gray-mid-darkest-raw); --tradebtn-default-hover-bg-raw: 59, 59, 59; --tradebtn-default-color-raw: var(--white-raw); --tradebtn-disabled-active-bg-raw: 255, 255, 255, 0.05; --depthtraderbtn-disabled-active-bg-raw: var(--tradebtn-disabled-active-bg-raw); --cardcarousel-bullet-color-raw: var(--gray-dark-raw); --cardcarousel-bullet-active-color-raw: var(--app-meta-color-raw); --cardcarousel-border-raw: var(--gray-darker-raw); --prodealingbox-tradebtn-default-hover-bg-raw: var(--gray-semi-light-raw); --prodealingbox-tradebtn-default-color-raw: var(--white-raw); --prodealingbox-tradebtn-disabled-active-bg-raw: 255, 255, 255, 0.05; --marketoverview-header-bg-raw: var(--tabs-frame-bg-raw); --demodialog-hairline-raw: var(--gray-darker-raw); --masthead-background-raw: var(--background-app-raw); --masthead-border-color-raw: var(--border-color-default-raw); --masthead-actions-text-color-raw: var(--text-color-secondary-raw); --masthead-tabs-text-color-raw: var(--text-color-secondary-raw); --masthead-tabs-text-color-selected-raw: var(--text-color-default-raw); --masthead-tabs-border-color-raw: var(--text-color-default-raw); --masthead-icon-text-color-raw: var(--white-raw); --footer-bg-raw: var(--tabs-frame-bg-raw); --overlay-bg-raw: 0, 0, 0, 0.75; --notification-item-meta-color-raw: var(--gray-light-raw); --load-color-raw: var(--app-meta-color-raw); --load-subtle-dot-color-1-raw: var(--gray-darker-raw); --load-subtle-dot-color-2-raw: var(--gray-dark-raw); --load-subtle-dot-color-3-raw: var(--gray-medium-raw); --datepicker-bg-raw: 0, 0, 0, 0; --datepicker-hover-bg-raw: var(--app-active-bg-raw); --datepicker-color-raw: var(--gray-mid-raw); --datepicker-border-color-raw: var(--app-hairline-raw); --radio-checkbox-icon-color-raw: var(--gray-near-white-raw); --radio-checkbox-icon-disabled-color-raw: var(--gray-medium-raw); --modulepicker-border-raw: var(--gray-dark-raw); --modulepicker-inner-border-raw: var(--gray-darkest-raw); --ua-head-bg-raw: var(--gray-mid-darkest-raw); --ua-body-bg-raw: var(--gray-dark-raw); --ua-well-bg-raw: var(--gray-darker-raw); --ua-well-border-raw: var(--gray-mid-darkest-raw); --backgound-transparent-gradient-raw: 0, 0, 0, 0; --datagrid-active-bg-raw: var(--app-active-bg-raw); --datagrid-header-color-raw: var(--app-meta-color-raw); --datagrid-selectable-row-bg-raw: var(--app-active-bg-raw); --datagrid-selectable-row-color-raw: var(--app-color-raw); --popup-bg-raw: 0, 0, 0, 0.5; --popup-session-bg-raw: 0, 0, 0, 0.8; --popup-pane-bg-raw: var(--app-content-bg-raw); --popup-border-raw: var(--gray-dark-raw); --popup-content-border-raw: var(--gray-darkest-raw); /* ==================================================================== =RGB color variables can be consumed by LESS files ================================================================= */ /** * raw color variables just hold RBG values and they should be used * with CSS native rgb(r,g,b) function instead of LESS rgb() function * as LESS will fail to compile CSS variables. */ --app-base: rgb(var(--app-base-raw)); --app-bg: rgb(var(--app-bg-raw)); --partner-app-bg: rgb(var(--partner-app-bg-raw)); --app-underlay-bg: rgb(var(--app-underlay-bg-raw)); --app-color: rgb(var(--app-color-raw)); --app-error-color: rgb(var(--app-error-color-raw)); --app-etch-color: rgb(var(--app-etch-color-raw)); --app-inverse-color: rgb(var(--app-inverse-color-raw)); --app-nav-color: rgb(var(--app-nav-color-raw)); --app-nav-active-color: rgb(var(--app-nav-active-color-raw)); --pro-app-nav-color: rgb(var(--pro-app-nav-color-raw)); --pro-app-nav-active-color: rgb(var(--pro-app-nav-active-color-raw)); --pro-app-nav-border-color: rgb(var(--pro-app-nav-border-color-raw)); --color-primary: rgb(var(--color-primary-raw)); --color-primary-hover: rgb(var(--color-primary-hover-raw)); --color-buy: rgb(var(--color-buy-raw)); --color-sell: rgb(var(--color-sell-raw)); --color-positive: rgb(var(--color-positive-raw)); --color-negative: rgb(var(--color-negative-raw)); --color-error: rgb(var(--color-error-raw)); --color-success: rgb(var(--color-success-raw)); --app-scroll-bg: rgb(var(--app-scroll-bg-raw)); --app-scroll-bg-ie: rgb(var(--app-scroll-bg-ie-raw)); --app-header-border: rgb(var(--app-header-border-raw)); --border-color-default: rgb(var(--border-color-default-raw)); --border-color-highlight: rgb(var(--border-color-highlight-raw)); --border-color-highlight-inverted: rgb(var(--border-color-highlight-inverted-raw)); --border-color-dimmed: rgb(var(--border-color-dimmed-raw)); --border-color-primary: rgb(var(--border-color-primary-raw)); --outline-color-default: rgb(var(--outline-color-default-raw)); /* ==================================================================== =Regular Context ================================================================= */ --app-content-bg: rgb(var(--app-content-bg-raw)); --app-active-bg: rgb(var(--app-active-bg-raw)); --app-hairline: rgb(var(--app-hairline-raw)); --app-meta-color: rgb(var(--app-meta-color-raw)); --app-muted-color: rgb(var(--app-muted-color-raw)); --app-transline: rgb(var(--app-transline-raw)); --app-etchline: rgb(var(--app-etchline-raw)); --app-related-bg: rgb(var(--app-related-bg-raw)); --app-highlight-bg: rgb(var(--app-highlight-bg-raw)); --app-sup-bg: rgb(var(--app-sup-bg-raw)); --app-sup-active-bg: rgb(var(--app-sup-active-bg-raw)); --app-sup-color: rgb(var(--app-sup-color-raw)); --app-sup-active-color: rgb(var(--app-sup-active-color-raw)); --app-sup-border: rgb(var(--app-sup-border-raw)); --app-sub-bg: rgba(var(--app-sub-bg-raw)); --app-sub-active-bg: rgba(var(--app-sub-active-bg-raw)); --app-sub-border: rgb(var(--app-sub-border-raw)); --app-sub-color: rgb(var(--app-sub-color-raw)); --app-sub-active-color: rgb(var(--app-sub-active-color-raw)); --app-sub-deep-bg: rgb(var(--app-sub-deep-bg-raw)); --app-sub-deep-color: rgb(var(--app-sub-deep-color-raw)); --app-sub-deep-border: rgb(var(--app-sub-deep-border-raw)); /* ==================================================================== =Alternative Context ================================================================= */ --app-alt-related-bg: rgb(var(--app-alt-related-bg-raw)); --app-alt-accent-bg: rgb(var(--app-alt-accent-bg-raw)); --app-alt-active-bg: rgb(var(--app-alt-active-bg-raw)); --app-alt-keyline: rgb(var(--app-alt-keyline-raw)); --app-alt-hairline: rgb(var(--app-alt-hairline-raw)); --app-alt-transline: rgb(var(--app-alt-transline-raw)); --app-alt-etchline: rgb(var(--app-alt-etchline-raw)); --app-alt-meta-color: rgb(var(--app-alt-meta-color-raw)); --app-alt-muted-color: rgb(var(--app-alt-muted-color-raw)); --secondary-color-1-raw: 160, 156, 255; --secondary-color-1: rgb(var(--secondary-color-1-raw)); --secondary-color-2-raw: 107, 223, 242; --secondary-color-2: rgb(var(--secondary-color-2-raw)); --secondary-color-3-raw: 226, 122, 245; --secondary-color-3: rgb(var(--secondary-color-3-raw)); --secondary-color-4-raw: 255, 233, 89; --secondary-color-4: rgb(var(--secondary-color-4-raw)); --app-alt-sub-color: rgb(var(--app-alt-sub-color-raw)); --app-related-border: rgb(var(--app-related-border-raw)); --app-in-money-bg: rgba(var(--app-primary-bg-raw), 10%); --app-icon-color: rgb(var(--app-icon-color-raw)); --app-icon-runin-gutter: var(--spacing-small); --divider-color: rgb(var(--divider-color-raw)); --app-divider-bg: rgb(var(--app-divider-bg-raw)); --legacydivider-highlight-color: rgb(var(--legacydivider-highlight-color-raw)); --legacydivider-border: rgb(var(--legacydivider-border-raw)); --legacydivider-bg-start: rgb(var(--legacydivider-bg-start-raw)); --legacydivider-bg-end: rgb(var(--legacydivider-bg-end-raw)); --table-bg-accent: rgb(var(--table-bg-accent-raw)); --table-border: rgb(var(--table-border-raw)); --btn-clear-bg: rgba(var(--btn-clear-bg-raw)); --btn-clear-hover-color: rgb(var(--btn-clear-hover-color-raw)); --btn-disabled-bg: rgba(var(--btn-disabled-bg-raw)); --btn-disabled-color: rgb(var(--btn-disabled-color-raw)); --btn-disabled-border: rgb(var(--btn-disabled-border-raw)); --btn-toggled-color: rgb(var(--btn-toggled-color-raw)); --btn-highlight-color: rgb(var(--btn-highlight-color-raw)); --btn-unchecked-bg: rgb(var(--btn-unchecked-bg-raw)); --btn-unchecked-color: rgb(var(--btn-unchecked-color-raw)); --btn-checked-bg: rgb(var(--btn-checked-bg-raw)); --btn-checked-color: rgb(var(--btn-checked-color-raw)); --actionbtn-bg: rgb(var(--actionbtn-bg-raw)); --actionbtn-color: rgb(var(--actionbtn-color-raw)); --actionbtn-hover-bg: rgb(var(--actionbtn-hover-bg-raw)); --actionbtn-hover-color: rgb(var(--actionbtn-hover-color-raw)); --actionbtn-active-bg: rgb(var(--actionbtn-active-bg-raw)); --actionbtn-border-radius: var(--border-radius-action); --tabs-frame-bg: rgb(var(--tabs-frame-bg-raw)); --tabs-frame-border: rgb(var(--tabs-frame-border-raw)); --tabs-sub-frame-border: rgb(var(--tabs-sub-frame-border-raw)); --tabs-pane-border: rgba(var(--tabs-pane-border-raw)); --tabs-active-color: rgb(var(--tabs-active-color-raw)); --tabs-inactive-color: rgb(var(--tabs-inactive-color-raw)); --tabs-active-bg: rgb(var(--tabs-active-bg-raw)); --tabs-pro-frame-bg: rgb(var(--tabs-pro-frame-bg-raw)); --pro-tabs-link-border: rgb(var(--pro-tabs-link-border-raw)); --pro-tabs-active-icon-color: rgb(var(--pro-tabs-active-icon-color-raw)); --pro-tabs-panel-header-bg: rgb(var(--pro-tabs-panel-header-bg-raw)); --app-sub-deep-border-size: 0; /* * The following variables define the new style guide which will be used * exclusively by the Investor app, and progressively for new components * shared across all apps. * * https://wiki/display/IPL/Design+-+Responsive+Style+guide */ --text-color-default: rgb(var(--text-color-default-raw)); --text-color-highlight: rgb(var(--text-color-highlight-raw)); --text-color-secondary: rgb(var(--text-color-secondary-raw)); --text-color-tertiary: rgb(var(--text-color-tertiary-raw)); --text-color-inverted: rgb(var(--text-color-inverted-raw)); --text-color-banner-image-dark: rgb(var(--text-color-banner-image-dark-raw)); --text-color-banner-image-light: rgb(var(--text-color-banner-image-light-raw)); --background-app: rgb(var(--background-app-raw)); --background-app-inverted: rgb(var(--background-app-inverted-raw)); --background-selected: rgb(var(--background-selected-raw)); --background-gradient-default-1: rgb(var(--background-gradient-default-1-raw)); --background-gradient-default-2: rgb(var(--background-gradient-default-2-raw)); --background-gradient-highlight-1: rgb(var(--background-gradient-highlight-1-raw)); --background-gradient-highlight-2: rgb(var(--background-gradient-highlight-2-raw)); --background-banner-image-mask: linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) ); --action-background-default: rgb(var(--action-background-default-raw)); --action-background-default-hover: rgb(var(--action-background-default-hover-raw)); --action-background-disabled: rgba(var(--action-background-disabled-raw)); --action-background-lighter: rgb(var(--action-background-lighter-raw)); --action-background-lighter-hover: rgb(var(--action-background-lighter-hover-raw)); --action-background-primary: rgb(var(--action-background-primary-raw)); --action-background-primary-hover: rgb(var(--action-background-primary-hover-raw)); --action-background-buy: rgb(var(--action-background-buy-raw)); --action-background-buy-hover: rgb(var(--action-background-buy-hover-raw)); --action-background-sell: rgb(var(--action-background-sell-raw)); --action-background-sell-hover: rgb(var(--action-background-sell-hover-raw)); --action-border-color-highlight: rgb(var(--action-border-color-highlight-raw)); --action-border-color-disabled: rgb(var(--action-border-color-disabled-raw)); --action-text-color-default: rgb(var(--action-text-color-default-raw)); --action-text-color-primary: rgb(var(--action-text-color-primary-raw)); --action-text-color-secondary: rgb(var(--action-text-color-secondary-raw)); --action-text-color-disabled: rgb(var(--action-text-color-disabled-raw)); --input-validation-color: rgb(var(--input-validation-color-raw)); --input-validation-outline: rgb(var(--input-validation-outline-raw)); --input-validation-message-bg: rgb(var(--input-validation-message-bg-raw)); --input-validation-message-color: rgb(var(--input-validation-message-color-raw)); --input-validation-icon-color: rgb(var(--input-validation-icon-color-raw)); --select-color: rgb(var(--select-color-raw)); --select-options-bg: rgb(var(--select-options-bg-raw)); --select-hover-bg: rgb(var(--select-hover-bg-raw)); --select-hover-color: rgb(var(--select-hover-color-raw)); /* ==================================================================== =Combo-Input ================================================================= */ --combo-input-color: rgb(var(--combo-input-color-raw)); /* ==================================================================== =Forms ================================================================= */ --input-color: rgb(var(--input-color-raw)); --input-border: rgb(var(--input-border-raw)); --input-placeholder-color: rgb(var(--input-placeholder-color-raw)); --input-placeholder-style: italic; --input-placeholder-weight: normal; --input-focus-bg: rgba(var(--input-focus-bg-raw)); --input-focus-color: rgb(var(--input-focus-color-raw)); /* ==================================================================== =Pro Combo Input ================================================================= */ --procomboinput-bg: rgb(var(--procomboinput-bg-raw)); --procomboinput-label-color: rgb(var(--procomboinput-label-color-raw)); --procomboinput-value-color: rgb(var(--procomboinput-value-color-raw)); --procomboinput-value-hover-color: rgb(var(--procomboinput-value-hover-color-raw)); --procomboinput-input-focus-bg: rgb(var(--procomboinput-input-focus-bg-raw)); /* ==================================================================== =Non-color theme dependent variables ================================================================= */ --shadow-default: 0 2px 2rem rgba(0, 0, 0, 0.25); --shadow-soft: none; /* ==================================================================== =Cross theme colors ================================================================= */ --persistent-white: #fff; /* ==================================================================== =Aurora Platform Facelift (defined in HEX as they aren't yet WLC customizable) ================================================================= */ --aurora-canvas-color-raw: 1, 9, 19; --aurora-canvas-color: rgb(var(--aurora-canvas-color-raw)); --aurora-background-inverted-raw: 239, 245, 250; --aurora-background-inverted: rgb(var(--aurora-background-inverted-raw)); --aurora-background-level-1-raw: 13, 21, 30; --aurora-background-level-1: rgb(var(--aurora-background-level-1-raw)); --aurora-background-level-1-hover-raw: 28, 46, 66; --aurora-background-level-1-hover: rgb(var(--aurora-background-level-1-hover-raw)); --aurora-background-level-2-raw: 25, 33, 42; --aurora-background-level-2: rgb(var(--aurora-background-level-2-raw)); --aurora-background-level-2-hover-raw: 44, 58, 74; --aurora-background-level-2-hover: rgb(var(--aurora-background-level-2-hover-raw)); --aurora-background-level-3-raw: 40, 47, 56; --aurora-background-level-3: rgb(var(--aurora-background-level-3-raw)); --aurora-border-level-1-raw: 40, 47, 56; --aurora-border-level-1: rgb(var(--aurora-border-level-1-raw)); --aurora-border-level-2-raw: 60, 66, 74; --aurora-border-level-2: rgb(var(--aurora-border-level-2-raw)); --aurora-border-level-3-raw: 79, 85, 93; --aurora-border-level-3: rgb(var(--aurora-border-level-3-raw)); --aurora-text-color-primary-raw: 255, 255, 255; --aurora-text-color-primary: rgb(var(--aurora-text-color-primary-raw)); --aurora-text-color-secondary-raw: 192, 196, 201; --aurora-text-color-secondary: rgb(var(--aurora-text-color-secondary-raw)); --aurora-text-color-tertiary-raw: 123, 131, 143; --aurora-text-color-tertiary: rgb(var(--aurora-text-color-tertiary-raw)); --aurora-text-color-highlight-raw: 239, 245, 250; --aurora-text-color-highlight: rgb(var(--aurora-text-color-highlight-raw)); --aurora-text-color-inverted-raw: 1, 9, 19; --aurora-text-color-inverted: rgb(var(--aurora-text-color-inverted-raw)); --aurora-color-buy-raw: 71, 116, 179; --aurora-color-buy: rgb(var(--aurora-color-buy-raw)); --aurora-color-buy-hover-raw: 109, 150, 208; --aurora-color-buy-hover: rgb(var(--aurora-color-buy-hover-raw)); --aurora-color-sell-raw: 195, 55, 44; --aurora-color-sell: rgb(var(--aurora-color-sell-raw)); --aurora-color-sell-hover-raw: 158, 45, 36; --aurora-color-sell-hover: rgb(var(--aurora-color-sell-hover-raw)); --aurora-color-brand-primary: rgb(var(--aurora-color-brand-primary-raw)); --aurora-color-brand-primary-alpha-10: rgba( var(--aurora-color-brand-primary-raw), 0.1 ); --aurora-color-brand-primary-hover-raw: 105, 143, 195; --aurora-color-brand-primary-hover: rgb(var(--aurora-color-brand-primary-hover-raw)); --aurora-color-brand-secondary-raw: 42, 62, 91; --aurora-color-brand-secondary: rgb(var(--aurora-color-brand-secondary-raw)); --aurora-color-brand-secondary-hover-raw: 35, 52, 77; --aurora-color-brand-secondary-hover: rgb( var(--aurora-color-brand-secondary-hover-raw) ); --aurora-color-brand-tertiary-raw: 100, 144, 206; --aurora-color-brand-tertiary: rgb(var(--aurora-color-brand-tertiary-raw)); --aurora-color-brand-tertiary-hover-raw: var(--aurora-color-brand-primary-raw); --aurora-color-brand-tertiary-hover: rgb( var(--aurora-color-brand-tertiary-hover-raw) ); --aurora-color-brand-error-raw: 239, 58, 58; --aurora-color-brand-error: rgb(var(--aurora-color-brand-error-raw)); --aurora-color-brand-warning-raw: 255, 161, 51; --aurora-color-brand-warning: rgb(var(--aurora-color-brand-warning-raw)); --aurora-color-brand-success-raw: 40, 178, 95; --aurora-color-brand-success: rgb(var(--aurora-color-brand-success-raw)); --aurora-color-brand-positive-raw: 40, 178, 95; --aurora-color-brand-positive: rgb(var(--aurora-color-brand-positive-raw)); --aurora-color-brand-negative-raw: 239, 58, 58; --aurora-color-brand-negative: rgb(var(--aurora-color-brand-negative-raw)); --aurora-card-shadow: none; --aurora-card-shadow-hover: none; --aurora-card-shadow-toggled: none; --aurora-popup-shadow: 0px 0px 42px rgba(1, 9, 19, 0.4); --aurora-popup-underlay: rgba(1, 9, 19, 0.5); --aurora-action-text-color-default-raw: var(--aurora-text-color-primary-raw); --aurora-action-text-color-default: rgb(var(--aurora-action-text-color-default-raw)); --aurora-action-text-color-primary-raw: var(--aurora-text-color-primary-raw); --aurora-action-text-color-primary: rgb(var(--aurora-action-text-color-primary-raw)); --aurora-action-text-color-disabled-raw: var(--aurora-text-color-tertiary-raw); --aurora-action-text-color-disabled: rgb( var(--aurora-action-text-color-disabled-raw) ); --aurora-action-background-default-raw: var(--aurora-background-level-2-raw); --aurora-action-background-default: rgb(var(--aurora-action-background-default-raw)); --aurora-action-background-default-hover-raw: var( --aurora-background-level-2-hover-raw ); --aurora-action-background-default-hover: rgb( var(--aurora-action-background-default-hover-raw) ); --aurora-action-background-lighter-raw: var(--aurora-action-background-default-raw); --aurora-action-background-lighter: rgb(var(--aurora-action-background-lighter-raw)); --aurora-action-background-lighter-hover-raw: var( --aurora-action-background-default-hover-raw ); --aurora-action-background-lighter-hover: rgb( var(--aurora-action-background-lighter-hover-raw) ); --aurora-action-background-primary-raw: var(--aurora-color-brand-primary-raw); --aurora-action-background-primary: rgb(var(--aurora-action-background-primary-raw)); --aurora-action-background-primary-hover-raw: var( --aurora-color-brand-primary-hover-raw ); --aurora-action-background-primary-hover: rgb( var(--aurora-action-background-primary-hover-raw) ); --aurora-action-background-disabled-raw: var(--aurora-background-level-2-raw); --aurora-action-background-disabled: rgb( var(--aurora-action-background-disabled-raw) ); --aurora-action-background-buy-raw: var(--aurora-color-buy-raw); --aurora-action-background-buy: rgb(var(--aurora-action-background-buy-raw)); --aurora-action-background-buy-hover-raw: var(--aurora-color-buy-hover-raw); --aurora-action-background-buy-hover: rgb( var(--aurora-action-background-buy-hover-raw) ); --aurora-action-background-sell-raw: var(--aurora-color-sell-raw); --aurora-action-background-sell: rgb(var(--aurora-action-background-sell-raw)); --aurora-action-background-sell-hover-raw: var(--aurora-color-sell-hover-raw); --aurora-action-background-sell-hover: rgb( var(--aurora-action-background-sell-hover-raw) ); --aurora-masthead-background-raw: var(--aurora-background-level-1-raw); --aurora-masthead-background: rgb(var(--aurora-masthead-background-raw)); --aurora-masthead-border-color-raw: var(--aurora-border-level-1-raw); --aurora-masthead-border-color: rgb(var(--aurora-masthead-border-color-raw)); --aurora-masthead-tabs-text-color-raw: var(--aurora-text-color-tertiary-raw); --aurora-masthead-tabs-text-color: rgb(var(--aurora-masthead-tabs-text-color-raw)); --aurora-masthead-tabs-text-color-selected-raw: var(--aurora-text-color-primary-raw); --aurora-masthead-tabs-text-color-selected: rgb( var(--aurora-masthead-tabs-text-color-selected-raw) ); --aurora-masthead-actions-text-color-raw: var(--aurora-text-color-primary-raw); --aurora-masthead-actions-text-color: rgb( var(--aurora-masthead-actions-text-color-raw) ); --aurora-masthead-actions-text-color-hover-raw: var( --aurora-text-color-secondary-raw ); --aurora-masthead-actions-text-color-hover: rgb( var(--aurora-masthead-actions-text-color-hover-raw) ); --aurora-masthead-dropdown-border-raw: var(--aurora-border-level-2-raw); --aurora-masthead-dropdown-border: rgb(var(--aurora-masthead-dropdown-border-raw)); --aurora-masthead-dropdown-background-raw: var(--aurora-background-level-1-raw); --aurora-masthead-dropdown-background: rgb( var(--aurora-masthead-dropdown-background-raw) ); --aurora-masthead-dropdown-text-color-raw: var(--aurora-text-color-primary-raw); --aurora-masthead-dropdown-text-color: rgb( var(--aurora-masthead-dropdown-text-color-raw) ); --aurora-masthead-color-brand-primary-raw: var(--aurora-color-brand-primary-raw); --aurora-masthead-color-brand-primary: rgb( var(--aurora-masthead-color-brand-primary-raw) ); --aurora-masthead-color-brand-primary-alpha-10: rgba( var(--aurora-masthead-color-brand-primary-raw), 0.1 ); --aurora-masthead-input-placeholder-color-raw: var(--aurora-text-color-secondary-raw); --aurora-masthead-input-placeholder-color: rgb( var(--aurora-masthead-input-placeholder-color-raw) ); --aurora-masthead-input-text-color-raw: var(--aurora-text-color-primary-raw); --aurora-masthead-input-text-color: rgb(var(--aurora-masthead-input-text-color-raw)); --aurora-prodealingbox-tradebtn-default-color-raw: var( --aurora-text-color-primary-raw ); --aurora-prodealingbox-tradebtn-default-color: rgb( var(--aurora-prodealingbox-tradebtn-default-color-raw) ); --aurora-prodealingbox-tradebtn-disabled-color-raw: var( --aurora-text-color-tertiary-raw ); --aurora-prodealingbox-tradebtn-disabled-color: rgb( var(--aurora-prodealingbox-tradebtn-disabled-color-raw) ); --aurora-prodealingbox-tradebtn-default-background-raw: var( --aurora-action-background-default-raw ); --aurora-prodealingbox-tradebtn-default-background: rgb( var(--aurora-prodealingbox-tradebtn-default-background-raw) ); --aurora-prodealingbox-tradebtn-default-hover-bg-raw: var( --aurora-action-background-default-hover-raw ); --aurora-prodealingbox-tradebtn-default-hover-bg: rgb( var(--aurora-prodealingbox-tradebtn-default-hover-bg-raw) ); --aurora-prodealingbox-tradebtn-disabled-active-bg-raw: var( --aurora-background-level-1-hover-raw ); --aurora-prodealingbox-tradebtn-disabled-active-bg: rgb( var(--aurora-prodealingbox-tradebtn-disabled-active-bg-raw) ); --aurora-quicktrade-buy-bg-raw: var(--aurora-color-buy-raw); --aurora-quicktrade-buy-bg: rgb(var(--aurora-quicktrade-buy-bg-raw)); --aurora-quicktrade-buy-active-bg-raw: var(--aurora-color-buy-hover-raw); --aurora-quicktrade-buy-active-bg: rgb(var(--aurora-quicktrade-buy-active-bg-raw)); --aurora-quicktrade-buy-color-raw: 255, 255, 255; --aurora-quicktrade-buy-color: rgb(var(--aurora-quicktrade-buy-color-raw)); --aurora-quicktrade-buy-active-color-raw: 255, 255, 255; --aurora-quicktrade-buy-active-color: rgb( var(--aurora-quicktrade-buy-active-color-raw) ); --aurora-quicktrade-sell-bg-raw: var(--aurora-color-sell-raw); --aurora-quicktrade-sell-bg: rgb(var(--aurora-quicktrade-sell-bg-raw)); --aurora-quicktrade-sell-active-bg-raw: var(--aurora-color-sell-hover-raw); --aurora-quicktrade-sell-active-bg: rgb(var(--aurora-quicktrade-sell-active-bg-raw)); --aurora-quicktrade-sell-color-raw: 255, 255, 255; --aurora-quicktrade-sell-color: rgb(var(--aurora-quicktrade-sell-color-raw)); --aurora-quicktrade-sell-active-color-raw: 255, 255, 255; --aurora-quicktrade-sell-active-color: rgb( var(--aurora-quicktrade-sell-active-color-raw) ); --aurora-quicktrade-live-bg-raw: 0, 170, 0; --aurora-quicktrade-live-bg: rgb(var(--aurora-quicktrade-live-bg-raw)); --aurora-quicktrade-live-active-bg-raw: 0, 204, 0; --aurora-quicktrade-live-active-bg: rgb(var(--aurora-quicktrade-live-active-bg-raw)); --aurora-quicktrade-live-color-raw: 255, 255, 255; --aurora-quicktrade-live-color: rgb(var(--aurora-quicktrade-live-color-raw)); --aurora-quicktrade-live-active-color-raw: 255, 255, 255; --aurora-quicktrade-live-active-color: rgb( var(--aurora-quicktrade-live-active-color-raw) ); --aurora-quicktrade-indicative-bg-raw: 255, 161, 0; --aurora-quicktrade-indicative-bg: rgb(var(--aurora-quicktrade-indicative-bg-raw)); --aurora-quicktrade-buy-alt-bg-raw: var(--aurora-color-buy-raw); --aurora-quicktrade-buy-alt-bg: rgb(var(--aurora-quicktrade-buy-alt-bg-raw)); --aurora-quicktrade-sell-alt-bg-raw: var(--aurora-color-buy-raw); --aurora-quicktrade-sell-alt-bg: rgb(var(--aurora-quicktrade-sell-alt-bg-raw)); --aurora-quicktrade-buy-active-alt-bg-raw: var(--aurora-color-buy-hover-raw); --aurora-quicktrade-buy-active-alt-bg: rgb( var(--aurora-quicktrade-buy-active-alt-bg-raw) ); --aurora-quicktrade-sell-active-alt-bg-raw: var(--aurora-color-buy-hover-raw); --aurora-quicktrade-sell-active-alt-bg: rgb( var(--aurora-quicktrade-sell-active-alt-bg-raw) ); --aurora-icon-hover-brightness: brightness(1.2); /** * NOTE: These may not be used in the CSS but only read by frontend * and delivered to the chart via store. */ --chart-background: rgba(var(--chart-background-raw)); --chart-text: rgb(var(--chart-text-raw)); --chart-text-background: rgba(var(--chart-text-background-raw)); --chart-text-border: rgb(var(--chart-text-border-raw)); --chart-color-border: rgb(var(--chart-color-border-raw)); --chart-plot-default: rgb(var(--chart-plot-default-raw)); --chart-major-axis-line: rgb(var(--chart-major-axis-line-raw)); --chart-minor-axis-line: rgb(var(--chart-minor-axis-line-raw)); --chart-axis-background: rgba(var(--chart-axis-background-raw)); --chart-axis-border: rgb(var(--chart-axis-border-raw)); --chart-candlestick-up-border: rgb(var(--chart-candlestick-up-border-raw)); --chart-candlestick-up-fill: rgb(var(--chart-candlestick-up-fill-raw)); --chart-candlestick-up-shadow: rgb(var(--chart-candlestick-up-shadow-raw)); --chart-candlestick-down-border: rgb(var(--chart-candlestick-down-border-raw)); --chart-candlestick-down-fill: rgb(var(--chart-candlestick-down-fill-raw)); --chart-candlestick-down-shadow: rgb(var(--chart-candlestick-down-shadow-raw)); --chart-ohlc-up: rgb(var(--chart-ohlc-up-raw)); --chart-ohlc-down: rgb(var(--chart-ohlc-down-raw)); --chart-bol-upper: rgb(var(--chart-bol-upper-raw)); --chart-bol-lower: rgb(var(--chart-bol-lower-raw)); --chart-bol-fill: rgb(var(--chart-bol-fill-raw)); --chart-cci-main-line: rgb(var(--chart-cci-main-line-raw)); --chart-cci-high: rgb(var(--chart-cci-high-raw)); --chart-cci-middle: rgb(var(--chart-cci-middle-raw)); --chart-cci-low: rgb(var(--chart-cci-low-raw)); --chart-kch-upper: rgb(var(--chart-kch-upper-raw)); --chart-kch-lower: rgb(var(--chart-kch-lower-raw)); --chart-kch-middle: rgb(var(--chart-kch-middle-raw)); --chart-kch-fill: rgb(var(--chart-kch-fill-raw)); --chart-macd-base: rgb(var(--chart-macd-base-raw)); --chart-macd-trigger: rgb(var(--chart-macd-trigger-raw)); --chart-macd-histogram: rgb(var(--chart-macd-histogram-raw)); --chart-rsi-average: rgb(var(--chart-rsi-average-raw)); --chart-rsi-overbought: rgb(var(--chart-rsi-overbought-raw)); --chart-rsi-middle: rgb(var(--chart-rsi-middle-raw)); --chart-rsi-oversold: rgb(var(--chart-rsi-oversold-raw)); --chart-splitter-color: rgba(var(--chart-splitter-color-raw)); --chart-splitter-height: 18px; --chart-stoc-overbought: rgb(var(--chart-stoc-overbought-raw)); --chart-stock-oversold: rgb(var(--chart-stock-oversold-raw)); --chart-stocfk: rgb(var(--chart-stocfk-raw)); --chart-stocfd: rgb(var(--chart-stocfd-raw)); --chart-stocsk: rgb(var(--chart-stocsk-raw)); --chart-stocsd: rgb(var(--chart-stocsd-raw)); --chart-pivot-resistance: rgb(var(--chart-pivot-resistance-raw)); --chart-pivot: rgb(var(--chart-pivot-raw)); --chart-pivot-support: rgb(var(--chart-pivot-support-raw)); --chart-label-text: rgb(var(--chart-label-text-raw)); --chart-label-background: rgb(var(--chart-label-background-raw)); --chart-label-border: rgb(var(--chart-label-border-raw)); --chart-price-line-color: rgb(var(--chart-price-line-color-raw)); --chart-line-color: rgb(var(--chart-line-color-raw)); --chart-infobox-text-background: rgb(var(--chart-infobox-text-background-raw)); --chart-infobox-text-border: rgb(var(--chart-infobox-text-border-raw)); --chart-infobox-text: rgb(var(--chart-infobox-text-raw)); --chart-plot-line-width: 2px; --chart-order-buy-color: rgb(var(--chart-order-buy-color-raw)); --chart-order-sell-color: rgb(var(--chart-order-sell-color-raw)); --chart-order-buy-distance-color: rgb(var(--chart-order-buy-distance-color-raw)); --chart-order-sell-distance-color: rgb(var(--chart-order-sell-distance-color-raw)); --chart-order-buy-entry-type-text-color: rgb( var(--chart-order-buy-entry-type-text-color-raw) ); --chart-order-sell-entry-type-text-color: rgb( var(--chart-order-sell-entry-type-text-color-raw) ); --chart-order-buy-amount-text-color: rgb( var(--chart-order-buy-amount-text-color-raw) ); --chart-order-sell-amount-text-color: rgb( var(--chart-order-sell-amount-text-color-raw) ); --chart-order-distance-text-background: rgba( var(--chart-order-distance-text-background-raw) ); --chart-order-cost-text-background: rgb(var(--chart-order-cost-text-background-raw)); --chart-order-buy-text-color: rgb(var(--chart-order-buy-text-color-raw)); --chart-order-sell-text-color: rgb(var(--chart-order-sell-text-color-raw)); --chart-order-buy-not-working-color: rgb( var(--chart-order-buy-not-working-color-raw) ); --chart-order-sell-not-working-color: rgb( var(--chart-order-sell-not-working-color-raw) ); --chart-order-buy-label-background: rgb(var(--chart-order-buy-label-background-raw)); --chart-order-sell-label-background: rgb( var(--chart-order-sell-label-background-raw) ); --chart-order-buy-label-text: rgb(var(--chart-order-buy-label-text-raw)); --chart-order-sell-label-Text: rgb(var(--chart-order-sell-label-Text-raw)); --chart-order-group: rgb(var(--chart-order-group-raw)); --chart-position-long-amount-text-color: rgb( var(--chart-position-long-amount-text-color-raw) ); --chart-position-short-amount-text-color: rgb( var(--chart-position-short-amount-text-color-raw) ); --chart-position-triangle-border: rgb(var(--chart-position-triangle-border-raw)); --chart-position-triangle-border-width: var(--spacing-xxsmall); --chart-bid-label-text: rgb(var(--chart-bid-label-text-raw)); --chart-bid-label-background: rgba(var(--chart-bid-label-background-raw)); --chart-bid-label-border: rgb(var(--chart-bid-label-border-raw)); --chart-ask-label-text: rgb(var(--chart-ask-label-text-raw)); --chart-ask-label-background: rgb(var(--chart-ask-label-background-raw)); --chart-ask-label-border: rgb(var(--chart-ask-label-border-raw)); --chart-ask-price-line-color: rgb(var(--chart-ask-price-line-color-raw)); --chart-bid-price-line-color: rgb(var(--chart-bid-price-line-color-raw)); --chart-indicative-prices-color: rgb(var(--chart-indicative-prices-color-raw)); --chart-indicative-prices-background-color: rgba( var(--chart-indicative-prices-background-color-raw) ); --chart-annotation-overlay: rgb(var(--chart-annotation-overlay-raw)); --chart-annotation-overlay-message: rgb(var(--chart-annotation-overlay-message-raw)); --chart-wpr-main-line: rgb(var(--chart-wpr-main-line-raw)); --chart-adx: rgb(var(--chart-adx-raw)); --chart-collapsed-panel-height: 16px; --chart-collapsed-panel-background: rgb(var(--chart-collapsed-panel-background-raw)); --chart-trade-signals-buy: rgb(var(--chart-trade-signals-buy-raw)); --chart-trade-signals-sell: rgb(var(--chart-trade-signals-sell-raw)); --chart-trade-signals-target: rgb(var(--chart-trade-signals-target-raw)); --chart-positionsummarybox-bg: rgba(var(--chart-positionsummarybox-bg-raw)); --chart-count-down-timer-text-color: rgb( var(--chart-count-down-timer-text-color-raw) ); --chart-trackball-arrow-color: rgb(var(--chart-trackball-arrow-color-raw)); --chart-overview-chart-price-line-color: rgb( var(--chart-overview-chart-price-line-color-raw) ); --chart-overview-chart-prev-close-color: rgb( var(--chart-overview-chart-prev-close-color-raw) ); --chart-overview-chart-volume-color: rgb( var(--chart-overview-chart-volume-color-raw) ); --chart-overview-chart-price-line-color-aurora: rgb( var(--chart-overview-chart-price-line-color-aurora-raw) ); --chart-overview-chart-prev-close-color-aurora: rgb( var(--chart-overview-chart-prev-close-color-aurora-raw) ); --chart-overview-chart-volume-color-aurora: rgb( var(--chart-overview-chart-volume-color-aurora-raw) ); --chart-overview-chart-grid-color-aurora: rgb( var(--chart-overview-chart-grid-color-aurora-raw) ); --tradebtn-default-bg: rgb(var(--tradebtn-default-bg-raw)); --tradebtn-default-hover-bg: rgb(var(--tradebtn-default-hover-bg-raw)); --tradebtn-default-color: rgb(var(--tradebtn-default-color-raw)); --tradebtn-disabled-active-bg: rgba(var(--tradebtn-disabled-active-bg-raw)); --depthtraderbtn-disabled-active-bg: rgba( var(--depthtraderbtn-disabled-active-bg-raw) ); --cardcarousel-bullet-color: rgb(var(--cardcarousel-bullet-color-raw)); --cardcarousel-bullet-active-color: rgb(var(--cardcarousel-bullet-active-color-raw)); --cardcarousel-border: rgb(var(--cardcarousel-border-raw)); --prodealingbox-tradebtn-default-hover-bg: rgb( var(--prodealingbox-tradebtn-default-hover-bg-raw) ); --prodealingbox-tradebtn-default-color: rgb( var(--prodealingbox-tradebtn-default-color-raw) ); --prodealingbox-tradebtn-disabled-active-bg: rgba( var(--prodealingbox-tradebtn-disabled-active-bg-raw) ); --marketoverview-header-bg: rgb(var(--marketoverview-header-bg-raw)); --demodialog-hairline: rgb(var(--demodialog-hairline-raw)); --masthead-background: rgb(var(--masthead-background-raw)); --masthead-border-color: rgb(var(--masthead-border-color-raw)); --masthead-actions-text-color: rgb(var(--masthead-actions-text-color-raw)); --masthead-tabs-text-color: rgb(var(--masthead-tabs-text-color-raw)); --masthead-tabs-text-color-selected: rgb( var(--masthead-tabs-text-color-selected-raw) ); --masthead-tabs-border-color: rgb(var(--masthead-tabs-border-color-raw)); --masthead-icon-text-color: rgb(var(--masthead-icon-text-color-raw)); --footer-bg: rgb(var(--footer-bg-raw)); --overlay-bg: rgba(var(--overlay-bg-raw)); --notification-item-meta-color: rgb(var(--notification-item-meta-color-raw)); --load-color: rgb(var(--load-color-raw)); --load-subtle-dot-color-1: rgb(var(--load-subtle-dot-color-1-raw)); --load-subtle-dot-color-2: rgb(var(--load-subtle-dot-color-2-raw)); --load-subtle-dot-color-3: rgb(var(--load-subtle-dot-color-3-raw)); --datepicker-bg: rgba(var(--datepicker-bg-raw)); --datepicker-hover-bg: rgb(var(--datepicker-hover-bg-raw)); --datepicker-color: rgb(var(--datepicker-color-raw)); --datepicker-border-color: rgb(var(--datepicker-border-color-raw)); --radio-checkbox-icon-color: rgb(var(--radio-checkbox-icon-color-raw)); --radio-checkbox-icon-disabled-color: rgb( var(--radio-checkbox-icon-disabled-color-raw) ); --modulepicker-border: rgb(var(--modulepicker-border-raw)); --modulepicker-inner-border: rgb(var(--modulepicker-inner-border-raw)); --ua-head-bg: rgb(var(--ua-head-bg-raw)); --ua-body-bg: rgb(var(--ua-body-bg-raw)); --ua-well-bg: rgb(var(--ua-well-bg-raw)); --ua-well-border: rgb(var(--ua-well-border-raw)); --backgound-transparent-gradient: rgba(var(--backgound-transparent-gradient-raw)); --datagrid-active-bg: rgb(var(--datagrid-active-bg-raw)); --datagrid-header-color: rgb(var(--datagrid-header-color-raw)); --datagrid-selectable-row-bg: rgb(var(--datagrid-selectable-row-bg-raw)); --datagrid-selectable-row-color: rgb(var(--datagrid-selectable-row-color-raw)); --datagrid-animated-row-background: rgb(var(--datagrid-active-bg-raw)); --datagrid-animated-row-background-fade-out: rgba(var(--datagrid-active-bg-raw), 0); --popup-bg: rgba(var(--popup-bg-raw)); --popup-session-bg: rgba(var(--popup-session-bg-raw)); --popup-pane-bg: rgb(var(--popup-pane-bg-raw)); --popup-border: rgb(var(--popup-border-raw)); --popup-content-border: rgb(var(--popup-content-border-raw)); --poc-ws-background-color: #031329; --poc-ws-label-background-color: #1c2c42; --poc-ws-label-color: #f7f8fc; --poc-ws-title-color: #f7f8fc; --poc-ws-body-color: #9aa2b5; --poc-ws-action-color: #1b73ee; --poc-ws-action-border-color: #4d5a70; --poc-ws-cta-primary-color: #f7f8fc; --poc-ws-cta-secondary-border-color: #4d5a70; --poc-ws-cta-secondary-color: #f7f8fc; --poc-ws-close-button-background-color: rgba(3, 19, 41, 0.7); --poc-ws-close-button-color: #f7f8fc; } /* ==================================================================== =Window Frame ================================================================= */ .windowframe--macos { --titlebar-macos-bg-start: #313131; --titlebar-macos-bg-end: #313131; --titlebar-macos-border-top: #666666; --titlebar-macos-border-right: #555555; --titlebar-macos-border-left: #555555; --titlebar-macos-border-bottom: #131313; --content-macos-border: #444444; } .windowframe--macos.is-active { --titlebar-macos-bg-start: #454545; --titlebar-macos-bg-end: #393939; --titlebar-macos-border-top: #777777; --titlebar-macos-border-right: #666666; --titlebar-macos-border-left: #666666; --titlebar-macos-border-bottom: #171717; --content-macos-border: #555555; } .windowframe--macos.windowframe--macos-gt-10 { --titlebar-macos-bg-start: #282828; --titlebar-macos-bg-end: #282828; --titlebar-macos-border-top: #444444; --titlebar-macos-border-right: #4f4f4f; --titlebar-macos-border-left: #4f4f4f; --titlebar-macos-border-bottom: #141414; --content-macos-border: #474747; } .windowframe--macos.windowframe--macos-gt-10.is-active { --titlebar-macos-bg-start: #363636; --titlebar-macos-bg-end: #363636; --titlebar-macos-border-top: #767676; --titlebar-macos-border-right: #4a4a4a; --titlebar-macos-border-left: #4a4a4a; --titlebar-macos-border-bottom: #000000; --content-macos-border: #343434; } /** * STOCK BLACK THEME * ==================================================================== */ /** * Note: This is legacy file, Please use root-black.less for adding any * new CSS variables */ :root { --app-sup-bg-raw: var(--gray-mid-darkest-raw); --app-sup-color-raw: var(--gray-near-white-raw); --app-sup-active-bg-raw: var(--gray-semi-dark-raw); --app-sup-active-color-raw: var(--gray-near-white-raw); --app-sup-border-raw: var(--gray-dark-raw); } /* * TYPOGRAPHY (Pro) * ===================================================================== * * Pro-specific typography metrics. Applies to both Evergreen and * legacy browsers. * * File should be referenced BEFORE the core dependency (type.less). * This is required so that the app-specific typographic scale is in * place before being referenced by subsequent rulesets. */ :root { --chart-handle-width: 450px; --chart-handle-height: 20px; --chart-handle-end-width: 7px; --chart-handle-grip-minwidth: 60px; --chart-handle-grip-maxwidth: 100px; --app-icon-size: 16px; --app-icon-size-sm: calc(var(--app-icon-size) * 0.5); --app-icon-size-lg: calc(var(--app-icon-size) * 1.5); --app-icon-size-xlg: calc(var(--app-icon-size) * 2); --app-masthead-logo-height: var(--app-pro-masthead-logo-height); --logo-default-height: 100px; --logo-primary-pro-height: 1; --logo-primary-pro-width: 0; --logo-secondary-pro-height: 1; --logo-secondary-pro-width: 0; --logo-primary-pro-ratio: calc( var(--logo-primary-pro-width) / var(--logo-primary-pro-height) ); --logo-secondary-pro-ratio: calc( var(--logo-secondary-pro-width) / var(--logo-secondary-pro-height) ); } /* * THEME VARIABLES (PRO EXTENSIONS) * ===================================================================== * * The variables in this file are PRO overrides of the variables already * existing in theme.less (though could also contain all theme variables * unique to PRO). * * Please see respectively: * * - constants.less - hard application defaults * - theme.less - WLC key-value pairings * */ /* ==================================================================== =Stock Theme ================================================================= */ /* ==================================================================== =Splash ================================================================= */ /* * MIXINS * ===================================================================== * * Mixins providing small abstractions to render consistent, * cross-browser rulesets within LESS stylesheets. Complements * theme.less * * Note: Mixins in this file are NOT compiled into the output CSS file. * Please be aware that where required specific classnames (e.g. * `u-display`) may be also referenced as a mixin, with the associated * ruleset added to any existing rules. This should however be a * deliberate course of action, primarily when creating UI abstractions, * as the preferred method is to simply add the class in the HTML. * * Please refer to the documentation for further guidance on these * techniques. * * ------------------------------------------------------------------- * DEV NOTES: * * - Forked from Bootstrap 3 (Apache Licence) * - https://github.com/twbs/bootstrap/blob/3.0.0-wip/less/mixins.less * * ------------------------------------------------------------------- * CONTENTS: * * =Sizing * =Font sizes * =Box Sizing * =Transitions * =Animations * =Transforms * =Backgrounds * =Background contrasts * =User Select * =Forms * =Buttons * =Backgrounds (inc. gradients) * =Disabled state * =Utilities * =IE * =Charts * =Colors */ /* ==================================================================== =Sizing ================================================================= */ /* ==================================================================== =Direction ================================================================= */ /* ==================================================================== =Alignment ================================================================= */ /* ==================================================================== =Borders ================================================================= */ /* ==================================================================== =Transforms ================================================================= */ /** * 1. See https://github.com/twitter/bootstrap/issues/4885 * 2. See https://github.com/twitter/bootstrap/issues/5319 */ /** * Prevent browsers from flickering when using CSS 3D transforms. * - Default value is `visible`, but can be changed to `hidden * - See git pull https://github.com/dannykeane/bootstrap.git * backface-visibility for examples */ /* ==================================================================== =Backgrounds ================================================================= */ /* ==================================================================== =User Select ================================================================= */ /* ==================================================================== =Forms ================================================================= */ /** * Placeholder Text Mixins * NOTE: Cannot stack selectors as rules will then NOT apply! */ #gradient { /** * Horizontal gradient, from left to right * - Creates two color stops, start and end, by specifying a color and position for each color stop. * - Color stops are not available in IE9 and below. */ /** * Vertical gradient, from top to bottom * - Creates two color stops, start and end, by specifying a color and position for each color stop. * - Color stops are not available in IE9 and below. */ } /* ==================================================================== =Utilities ================================================================= */ /** * Null transform hardware accelerator rules for multiple browsers. * Wield judiciously - with great power comes great responsibility! */ /** * Clearfix Mixin * - Source: http://nicolasgallagher.com/micro-clearfix-hack/ * * For modern browsers: * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ /** * Short retina mixin for setting background-image and -size */ /* ==================================================================== =Grab Cursor ================================================================= */ .grab-cursor { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .grab-cursor:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } /* ==================================================================== =Charts ================================================================= */ /* ==================================================================== =Colors ================================================================= */ /** * For adjusting brightness of background colors, images etc. * @value should range from -100 to 100, where * -100 means darken for black theme and lighten for white theme. * and 100 means lighten for black theme and darken for white theme. */ /* ==================================================================== = Profit and Loss color with color inverse support ================================================================= */ /** * For variable --app-profit-color */ /** * For variable --app-loss-color */ /** * Util to set inherit color */ /** * For variable var(--color-positive) */ /** * For variable var(--color-negative) */ /** * Internal color inverse mixins */ /* ==================================================================== =Atoms ================================================================= */ /** * STICKY CARD * ===================================================================== */ .sticky-card { width: 100%; padding: 2rem; position: fixed; box-shadow: var(--shadow-soft); z-index: 210; background-image: linear-gradient( var(--background-gradient-highlight-1), var(--background-gradient-highlight-2), var(--background-gradient-highlight-2), var(--background-gradient-highlight-1) ); background-color: var(--background-gradient-highlight-1); } .sticky-card--top { top: 0; border-bottom: 1px solid var(--border-color-default); } .sticky-card--bottom { bottom: 0; border-top: 1px solid var(--border-color-default); } .sticky-card--aurora { box-shadow: var(--aurora-card-shadow); border-color: var(--aurora-border-level-1); background: var(--aurora-background-level-1); } /* * BADGE * ===================================================================== */ .badge { color: var(--action-text-color-primary); display: inline-flex; padding: 0 0.5rem; justify-content: center; align-items: center; } .badge--small { min-width: 1.5rem; height: 1.5rem; border-radius: 1rem; font-size: 11px; line-height: 2rem; } .badge--medium { min-width: 2rem; height: 2rem; border-radius: 1rem; font-size: 11px; line-height: 2rem; } .badge--large { min-width: 3rem; height: 3rem; border-radius: 1.5rem; font-size: 14px; line-height: 2rem; } .badge--blue { background-color: var(--action-background-primary); } .badge--red { background-color: var(--color-negative); } .badge--green { background-color: var(--color-positive); } .badge--yellow { background-color: var(--color-error); } .badge--gray { color: var(--action-text-color-default); background-color: var(--action-background-default); } .badge--outline { background: none; border: solid 1px currentColor; } .badge--outline.badge--blue { color: var(--action-background-primary); } .badge--outline.badge--red { color: var(--color-negative); } .badge--outline.badge--green { color: var(--color-positive); } .badge--outline.badge--yellow { color: var(--color-error); } .badge--outline.badge--gray { color: var(--text-color-secondary); } .badge--aurora.badge--blue { background-color: var(--aurora-action-background-primary); } .badge--aurora.badge--red { background-color: var(--aurora-color-brand-negative); } .badge--aurora.badge--green { background-color: var(--aurora-color-brand-positive); } .badge--aurora.badge--yellow { background-color: var(--aurora-color-brand-warning); } .badge--aurora.badge--gray { color: var(--aurora-action-text-color-default); background-color: var(--aurora-action-background-default); } .badge--aurora.badge--outline { background: none; } .badge--aurora.badge--outline.badge--blue { color: var(--aurora-action-background-primary); } .badge--aurora.badge--outline.badge--red { color: var(--aurora-color-brand-negative); } .badge--aurora.badge--outline.badge--green { color: var(--aurora-color-brand-positive); } .badge--aurora.badge--outline.badge--yellow { color: var(--aurora-color-brand-warning); } .badge--aurora.badge--outline.badge--gray { color: var(--aurora-text-color-secondary); } /* * BODYTEXT * ===================================================================== */ .body-text--tiny { font-size: 12px; line-height: 120%; font-weight: 400; } .body-text--small { font-size: 14px; line-height: 120%; font-weight: 400; } .body-text--medium { font-size: 14px; line-height: 120%; font-weight: 400; } .body-text--large { font-size: 16px; line-height: 120%; font-weight: 400; } .body-text--secondary { color: var(--text-color-secondary); } .body-text--aurora.body-text--secondary { color: var(--aurora-text-color-secondary); } .body-text a { color: var(--app-link-color); text-decoration: none; cursor: pointer; } .body--aurora .body-text a { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .body--aurora .body-text a:focus, .body--aurora .body-text a:active, .body--aurora .body-text a:hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } .chat-bubble { overflow-wrap: break-word; word-wrap: break-word; padding: var(--spacing-large); border-radius: 20px; background-color: var(--action-background-default); color: var(--text-color-default); min-width: 300px; max-width: 744px; } .chat-bubble--alternate { background-color: var(--app-bg); } .chat-bubble--arrow-top-start { border-top-left-radius: 0; } .chat-bubble--arrow-top-end { border-top-right-radius: 0; } .chat-bubble--arrow-bottom-start { border-bottom-left-radius: 0; } .chat-bubble--arrow-bottom-end { border-bottom-right-radius: 0; } .chat-bubble--shadow { box-shadow: var(--shadow-soft); } .chat-bubble--aurora.chat-bubble { background-color: var(--aurora-background-level-2); color: var(--aurora-text-color-primary); } .chat-bubble--aurora.chat-bubble--alternate { background-color: var(--aurora-background-level-1); } .chat-bubble--aurora.chat-bubble--shadow { box-shadow: -3px 3px 8px rgba(3, 19, 41, 0.2); } /* * AVATAR * ===================================================================== */ @keyframes avatar-activate { 0% { stroke-dashoffset: var(--avatar-circumference); } 100% { stroke-dashoffset: 0; } } .avatar { display: flex; position: relative; border-radius: 50%; align-items: center; justify-content: center; color: var(--text-color-inverted); /** * Sizes */ /** * Aurora */ } .avatar__state { /** * 1. Calcutate offset from radius: 2 * π * 46 */ --avatar-circumference: 289; stroke-width: 3; fill: transparent; stroke-dasharray: var(--avatar-circumference); stroke-dashoffset: var(--avatar-circumference); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .avatar__state--active { stroke-dashoffset: 0; stroke: var(--text-color-inverted); animation: avatar-activate 0.4s ease; } .avatar__image { width: 100%; height: 100%; border-radius: inherit; } .avatar__illustration { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .avatar__badge { right: 0; bottom: 0; position: absolute; } .avatar__placeholder { width: 100%; height: 100%; fill: var(--text-color-inverted); } .avatar--bg-default { background-color: var(--background-app-inverted); } .avatar--bg-brand-primary { background-color: var(--color-primary); } .avatar--bg-secondary-color-1 { background-color: var(--secondary-color-1); } .avatar--bg-secondary-color-2 { background-color: var(--secondary-color-2); } .avatar--bg-secondary-color-3 { background-color: var(--secondary-color-3); } .avatar--bg-secondary-color-4 { background-color: var(--secondary-color-4); } .avatar--small { width: 40px; height: 40px; font-size: 16px; } .avatar--medium { width: 64px; height: 64px; font-size: 26px; } .avatar--large { width: 96px; height: 96px; font-size: 40px; } .avatar--aurora { color: var(--aurora-text-color-inverted); } .avatar--aurora.avatar__state { stroke: var(--aurora-text-color-inverted); } .avatar--aurora.avatar__placeholder { fill: var(--aurora-text-color-inverted); } .avatar--aurora.avatar--bg-default { background-color: var(--aurora-background-inverted); } .avatar--aurora.avatar--bg-brand-primary { background-color: var(--aurora-color-brand-primary); } .avatar--aurora.avatar--bg-secondary-color-1 { background-color: var(--secondary-color-1); } .avatar--aurora.avatar--bg-secondary-color-2 { background-color: var(--secondary-color-2); } .avatar--aurora.avatar--bg-secondary-color-3 { background-color: var(--secondary-color-3); } .avatar--aurora.avatar--bg-secondary-color-4 { background-color: var(--secondary-color-4); } /* * VALIDATION TEXT * ===================================================================== * */ .validation-text { padding-top: 4px; } .validation-text__icon { padding-right: 4px; } /** * Breadcrumbs * ===================================================================== */ .breadcrumbs { color: var(--text-color-secondary); font-weight: 400; font-size: 14px; line-height: 2rem; } .breadcrumbs.breadcrumbs--tiny { font-size: 11px; } .breadcrumbs .breadcrumbs__breadcrumb { text-decoration: underline; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumbs .breadcrumbs__breadcrumb--selected { text-decoration: none; cursor: default; color: var(--text-color-default); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumbs.breadcrumbs--persistent-white, .breadcrumbs.breadcrumbs--persistent-white .breadcrumbs__breadcrumb--selected { color: var(--text-color-banner-image-light); } .breadcrumbs--aurora { color: var(--aurora-text-color-secondary); font-weight: 400; font-size: 14px; line-height: 120%; } .breadcrumbs--aurora.breadcrumbs--tiny { font-size: 11px; } .breadcrumbs--aurora.breadcrumbs--tiny .breadcrumbs__separator { font-size: 11px; } .breadcrumbs--aurora .breadcrumbs__breadcrumb--selected { color: var(--aurora-text-color-primary); } .breadcrumbs--aurora .breadcrumbs__separator { font-size: 12px; } .breadcrumbs--aurora.breadcrumbs--persistent-white, .breadcrumbs--aurora.breadcrumbs--persistent-white .breadcrumbs__breadcrumb--selected { color: var(--text-color-banner-image-light); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .breadcrumbs:not(.breadcrumbs--persistent-white) .breadcrumbs__breadcrumb:hover { color: var(--text-color-default); } .breadcrumbs:not(.breadcrumbs--persistent-white)--aurora .breadcrumbs__breadcrumb:hover { color: var(--aurora-text-color-primary); } } /* * DIVIDER * ===================================================================== * */ .divider { border-top: 1px solid var(--border-color-default); } .divider--aurora { border-top: 1px solid var(--aurora-border-level-2); } /** * GRAPH * ===================================================================== **/ .graphbar { border-radius: 999px; background: var(--aurora-background-level-3); padding: 2px; height: 12px; width: 100%; display: inline-block; margin-right: var(--gutter-small); } .graphbar__fill { border-radius: 4px; height: 100%; width: 100%; background: linear-gradient(to right, #08a345, #08a345); } .graphbar--outline { border: 1px solid var(--aurora-border-level-3); } .graphbar--medium .graphbar__fill { background: linear-gradient(to right, #08a345, #ff8a00); } .graphbar--high .graphbar__fill { background: linear-gradient(to right, #08a345, #ff8a00, #d10011); } .graphbar--rtl .graphbar__fill { float: right; background: linear-gradient(to left, #08a345, #08a345); } .graphbar--rtl.graphbar--medium .graphbar__fill { background: linear-gradient(to left, #08a345, #ff8a00); } .graphbar--rtl.graphbar--high .graphbar__fill { background: linear-gradient(to left, #08a345, #ff8a00, #d10011); } /** * DRAG BAR * ===================================================================== */ .drag-bar { height: 2rem; background: var(--action-background-default); margin-bottom: 1rem; display: flex; } .drag-bar__handle { background: var(--action-text-color-primary); width: 5rem; height: 0.5rem; margin: auto; border-radius: 2px; } /* * ExpandableCard * ===================================================================== * */ .expandable-card { height: 100%; padding: 2rem; border: 1px solid var(--border-color-default); border-radius: var(--border-radius-card); box-shadow: var(--shadow-soft); background-image: linear-gradient( var(--background-gradient-highlight-1), var(--background-gradient-highlight-2), var(--background-gradient-highlight-2), var(--background-gradient-highlight-1) ); background-color: var(--background-gradient-highlight-1); display: flex; position: relative; flex-flow: column nowrap; cursor: pointer; } .expandable-card__header { display: flex; flex: 1 1 auto; align-items: flex-start; justify-content: space-between; } .expandable-card__label { margin-right: 1.5rem; } .expandable-card__options { width: 100%; padding: 1rem 0 0; border-color: inherit; } .expandable-card__option { padding: 1rem 0; border-top: 1px solid; border-color: inherit; } .expandable-card__option:last-child { padding-bottom: 0; } .expandable-card__value { padding-top: 0.75rem; } .expandable-card--show { height: auto; z-index: 90; } .expandable-card--aurora { border-color: var(--aurora-border-level-1); background: var(--aurora-background-level-1); border-radius: var(--aurora-border-radius-card); box-shadow: var(--aurora-card-shadow); } .expandable-card--aurora.expandable-card--show { border-color: var(--aurora-border-level-2); box-shadow: var(--aurora-card-shadow-toggled); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .expandable-card.expandable-card--aurora:hover { border-color: var(--aurora-border-level-2); box-shadow: var(--aurora-card-shadow-hover); } } /** * 1. Position fixed is used here in case a parent is position relative * The underlay should not be bound by a relative position parent * * 2. Visibility is transitioned so it first goes to 0 after opacity change */ .expandable-card-underlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: var(--app-underlay-bg); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.2s, opacity 0.2s linear; } .expandable-card-underlay--show { visibility: visible; opacity: 0.3; transition: visibility 0s linear, opacity 0.2s linear; } .expandable-card-underlay--aurora { background-color: var(--aurora-popup-underlay); } .expandable-card-underlay--aurora .expandable-card-underlay--shown { opacity: 1; } /** * FLAG ICONS * ===================================================================== * Icons are 56 x 32 px sized SVG files. * To update SVGs you should update package.json version number for flag-icon-css, * do `npm install` and finally `grunt copy` to copy the SVGs into the opencss framework. */ /* ==================================================================== =Flags Icon Sprite ================================================================= */ /** * 1. Outline added to increase visibility for flags with a white * background. Outline is used in favor of border for its * dimensionless properties. * 2. Place outline on top of flag. */ .flag { display: inline-block; margin-right: var(--app-icon-runin-gutter); position: relative; outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; /* ==================================================================== =Flag Icon with Siblings ================================================================= */ /* ============================================================================ =Tiny Flag Icon (Temp fix: Will be remove once Instrument Double get refactored =============================================================================== */ /* ==================================================================== =Small Flag Icon ================================================================= */ /* ==================================================================== =Medium Flag Icon ================================================================= */ /* ==================================================================== =Large Flag Icon ================================================================= */ /* ==================================================================== =Huge Flag Icon ================================================================= */ /* ==================================================================== =Flag Icon Mappings ================================================================= */ /** * 1. flag-icon-css doesn't provide an international flag */ } .flag--block { display: block; } .flag--siblings { margin-left: var(--app-icon-runin-gutter); } .flag--tiny { width: 1.75rem; height: 1.33rem; background-size: 1.75rem 1.33rem; } .flag--small { width: 2rem; height: 1.5rem; background-size: 2rem 1.5rem; } .flag--medium { width: 2.666rem; height: 2rem; background-size: 2.666rem 2rem; } .flag--large { width: 4rem; height: 3rem; background-size: 4rem 3rem; } .flag--huge { width: 6.666rem; height: 5rem; background-size: 6.666rem 5rem; } .flag--international { background-image: url(flags/international.svg); } .flag--ad { background-image: url(flags/4x3/ad.svg); } .flag--ae { background-image: url(flags/4x3/ae.svg); } .flag--af { background-image: url(flags/4x3/af.svg); } .flag--ag { background-image: url(flags/4x3/ag.svg); } .flag--ai { background-image: url(flags/4x3/ai.svg); } .flag--al { background-image: url(flags/4x3/al.svg); } .flag--am { background-image: url(flags/4x3/am.svg); } .flag--ao { background-image: url(flags/4x3/ao.svg); } .flag--aq { background-image: url(flags/4x3/aq.svg); } .flag--ar { background-image: url(flags/4x3/ar.svg); } .flag--as { background-image: url(flags/4x3/as.svg); } .flag--at { background-image: url(flags/4x3/at.svg); } .flag--au { background-image: url(flags/4x3/au.svg); } .flag--aw { background-image: url(flags/4x3/aw.svg); } .flag--ax { background-image: url(flags/4x3/ax.svg); } .flag--az { background-image: url(flags/4x3/az.svg); } .flag--ba { background-image: url(flags/4x3/ba.svg); } .flag--bb { background-image: url(flags/4x3/bb.svg); } .flag--bd { background-image: url(flags/4x3/bd.svg); } .flag--be { background-image: url(flags/4x3/be.svg); } .flag--bf { background-image: url(flags/4x3/bf.svg); } .flag--bg { background-image: url(flags/4x3/bg.svg); } .flag--bh { background-image: url(flags/4x3/bh.svg); } .flag--bi { background-image: url(flags/4x3/bi.svg); } .flag--bj { background-image: url(flags/4x3/bj.svg); } .flag--bl { background-image: url(flags/4x3/bl.svg); } .flag--bm { background-image: url(flags/4x3/bm.svg); } .flag--bn { background-image: url(flags/4x3/bn.svg); } .flag--bo { background-image: url(flags/4x3/bo.svg); } .flag--bq { background-image: url(flags/4x3/bq.svg); } .flag--br { background-image: url(flags/4x3/br.svg); } .flag--bs { background-image: url(flags/4x3/bs.svg); } .flag--bt { background-image: url(flags/4x3/bt.svg); } .flag--bv { background-image: url(flags/4x3/bv.svg); } .flag--bw { background-image: url(flags/4x3/bw.svg); } .flag--by { background-image: url(flags/4x3/by.svg); } .flag--bz { background-image: url(flags/4x3/bz.svg); } .flag--ca { background-image: url(flags/4x3/ca.svg); } .flag--cc { background-image: url(flags/4x3/cc.svg); } .flag--cd { background-image: url(flags/4x3/cd.svg); } .flag--cf { background-image: url(flags/4x3/cf.svg); } .flag--cg { background-image: url(flags/4x3/cg.svg); } .flag--ch { background-image: url(flags/4x3/ch.svg); } .flag--ci { background-image: url(flags/4x3/ci.svg); } .flag--ck { background-image: url(flags/4x3/ck.svg); } .flag--cl { background-image: url(flags/4x3/cl.svg); } .flag--cm { background-image: url(flags/4x3/cm.svg); } .flag--cn { background-image: url(flags/4x3/cn.svg); } .flag--co { background-image: url(flags/4x3/co.svg); } .flag--cr { background-image: url(flags/4x3/cr.svg); } .flag--cu { background-image: url(flags/4x3/cu.svg); } .flag--cv { background-image: url(flags/4x3/cv.svg); } .flag--cw { background-image: url(flags/4x3/cw.svg); } .flag--cx { background-image: url(flags/4x3/cx.svg); } .flag--cy { background-image: url(flags/4x3/cy.svg); } .flag--cz { background-image: url(flags/4x3/cz.svg); } .flag--de { background-image: url(flags/4x3/de.svg); } .flag--dj { background-image: url(flags/4x3/dj.svg); } .flag--dk { background-image: url(flags/4x3/dk.svg); } .flag--dm { background-image: url(flags/4x3/dm.svg); } .flag--do { background-image: url(flags/4x3/do.svg); } .flag--dz { background-image: url(flags/4x3/dz.svg); } .flag--ec { background-image: url(flags/4x3/ec.svg); } .flag--ee { background-image: url(flags/4x3/ee.svg); } .flag--eg { background-image: url(flags/4x3/eg.svg); } .flag--eh { background-image: url(flags/4x3/eh.svg); } .flag--er { background-image: url(flags/4x3/er.svg); } .flag--es { background-image: url(flags/4x3/es.svg); } .flag--es-ct { background-image: url(flags/4x3/es-ct.svg); } .flag--et { background-image: url(flags/4x3/et.svg); } .flag--eu { background-image: url(flags/4x3/eu.svg); } .flag--fi { background-image: url(flags/4x3/fi.svg); } .flag--fj { background-image: url(flags/4x3/fj.svg); } .flag--fk { background-image: url(flags/4x3/fk.svg); } .flag--fm { background-image: url(flags/4x3/fm.svg); } .flag--fo { background-image: url(flags/4x3/fo.svg); } .flag--fr { background-image: url(flags/4x3/fr.svg); } .flag--ga { background-image: url(flags/4x3/ga.svg); } .flag--gb { background-image: url(flags/4x3/gb.svg); } .flag--gb-eng { background-image: url(flags/4x3/gb-eng.svg); } .flag--gb-nir { background-image: url(flags/4x3/gb-nir.svg); } .flag--gb-sct { background-image: url(flags/4x3/gb-sct.svg); } .flag--gb-wls { background-image: url(flags/4x3/gb-wls.svg); } .flag--gd { background-image: url(flags/4x3/gd.svg); } .flag--ge { background-image: url(flags/4x3/ge.svg); } .flag--gf { background-image: url(flags/4x3/gf.svg); } .flag--gg { background-image: url(flags/4x3/gg.svg); } .flag--gh { background-image: url(flags/4x3/gh.svg); } .flag--gi { background-image: url(flags/4x3/gi.svg); } .flag--gl { background-image: url(flags/4x3/gl.svg); } .flag--gm { background-image: url(flags/4x3/gm.svg); } .flag--gn { background-image: url(flags/4x3/gn.svg); } .flag--gp { background-image: url(flags/4x3/gp.svg); } .flag--gq { background-image: url(flags/4x3/gq.svg); } .flag--gr { background-image: url(flags/4x3/gr.svg); } .flag--gs { background-image: url(flags/4x3/gs.svg); } .flag--gt { background-image: url(flags/4x3/gt.svg); } .flag--gu { background-image: url(flags/4x3/gu.svg); } .flag--gw { background-image: url(flags/4x3/gw.svg); } .flag--gy { background-image: url(flags/4x3/gy.svg); } .flag--hk { background-image: url(flags/4x3/hk.svg); } .flag--hm { background-image: url(flags/4x3/hm.svg); } .flag--hn { background-image: url(flags/4x3/hn.svg); } .flag--hr { background-image: url(flags/4x3/hr.svg); } .flag--ht { background-image: url(flags/4x3/ht.svg); } .flag--hu { background-image: url(flags/4x3/hu.svg); } .flag--id { background-image: url(flags/4x3/id.svg); } .flag--ie { background-image: url(flags/4x3/ie.svg); } .flag--il { background-image: url(flags/4x3/il.svg); } .flag--im { background-image: url(flags/4x3/im.svg); } .flag--in { background-image: url(flags/4x3/in.svg); } .flag--io { background-image: url(flags/4x3/io.svg); } .flag--iq { background-image: url(flags/4x3/iq.svg); } .flag--ir { background-image: url(flags/4x3/ir.svg); } .flag--is { background-image: url(flags/4x3/is.svg); } .flag--it { background-image: url(flags/4x3/it.svg); } .flag--je { background-image: url(flags/4x3/je.svg); } .flag--jm { background-image: url(flags/4x3/jm.svg); } .flag--jo { background-image: url(flags/4x3/jo.svg); } .flag--jp { background-image: url(flags/4x3/jp.svg); } .flag--ke { background-image: url(flags/4x3/ke.svg); } .flag--kg { background-image: url(flags/4x3/kg.svg); } .flag--kh { background-image: url(flags/4x3/kh.svg); } .flag--ki { background-image: url(flags/4x3/ki.svg); } .flag--km { background-image: url(flags/4x3/km.svg); } .flag--kn { background-image: url(flags/4x3/kn.svg); } .flag--kp { background-image: url(flags/4x3/kp.svg); } .flag--kr { background-image: url(flags/4x3/kr.svg); } .flag--kw { background-image: url(flags/4x3/kw.svg); } .flag--ky { background-image: url(flags/4x3/ky.svg); } .flag--kz { background-image: url(flags/4x3/kz.svg); } .flag--la { background-image: url(flags/4x3/la.svg); } .flag--lb { background-image: url(flags/4x3/lb.svg); } .flag--lc { background-image: url(flags/4x3/lc.svg); } .flag--li { background-image: url(flags/4x3/li.svg); } .flag--lk { background-image: url(flags/4x3/lk.svg); } .flag--lr { background-image: url(flags/4x3/lr.svg); } .flag--ls { background-image: url(flags/4x3/ls.svg); } .flag--lt { background-image: url(flags/4x3/lt.svg); } .flag--lu { background-image: url(flags/4x3/lu.svg); } .flag--lv { background-image: url(flags/4x3/lv.svg); } .flag--ly { background-image: url(flags/4x3/ly.svg); } .flag--ma { background-image: url(flags/4x3/ma.svg); } .flag--mc { background-image: url(flags/4x3/mc.svg); } .flag--md { background-image: url(flags/4x3/md.svg); } .flag--me { background-image: url(flags/4x3/me.svg); } .flag--mf { background-image: url(flags/4x3/mf.svg); } .flag--mg { background-image: url(flags/4x3/mg.svg); } .flag--mh { background-image: url(flags/4x3/mh.svg); } .flag--mk { background-image: url(flags/4x3/mk.svg); } .flag--ml { background-image: url(flags/4x3/ml.svg); } .flag--mm { background-image: url(flags/4x3/mm.svg); } .flag--mn { background-image: url(flags/4x3/mn.svg); } .flag--mo { background-image: url(flags/4x3/mo.svg); } .flag--mp { background-image: url(flags/4x3/mp.svg); } .flag--mq { background-image: url(flags/4x3/mq.svg); } .flag--mr { background-image: url(flags/4x3/mr.svg); } .flag--ms { background-image: url(flags/4x3/ms.svg); } .flag--mt { background-image: url(flags/4x3/mt.svg); } .flag--mu { background-image: url(flags/4x3/mu.svg); } .flag--mv { background-image: url(flags/4x3/mv.svg); } .flag--mw { background-image: url(flags/4x3/mw.svg); } .flag--mx { background-image: url(flags/4x3/mx.svg); } .flag--my { background-image: url(flags/4x3/my.svg); } .flag--mz { background-image: url(flags/4x3/mz.svg); } .flag--na { background-image: url(flags/4x3/na.svg); } .flag--nc { background-image: url(flags/4x3/nc.svg); } .flag--ne { background-image: url(flags/4x3/ne.svg); } .flag--nf { background-image: url(flags/4x3/nf.svg); } .flag--ng { background-image: url(flags/4x3/ng.svg); } .flag--ni { background-image: url(flags/4x3/ni.svg); } .flag--nl { background-image: url(flags/4x3/nl.svg); } .flag--no { background-image: url(flags/4x3/no.svg); } .flag--np { background-image: url(flags/4x3/np.svg); } .flag--nr { background-image: url(flags/4x3/nr.svg); } .flag--nu { background-image: url(flags/4x3/nu.svg); } .flag--nz { background-image: url(flags/4x3/nz.svg); } .flag--om { background-image: url(flags/4x3/om.svg); } .flag--pa { background-image: url(flags/4x3/pa.svg); } .flag--pe { background-image: url(flags/4x3/pe.svg); } .flag--pf { background-image: url(flags/4x3/pf.svg); } .flag--pg { background-image: url(flags/4x3/pg.svg); } .flag--ph { background-image: url(flags/4x3/ph.svg); } .flag--pk { background-image: url(flags/4x3/pk.svg); } .flag--pl { background-image: url(flags/4x3/pl.svg); } .flag--pm { background-image: url(flags/4x3/pm.svg); } .flag--pn { background-image: url(flags/4x3/pn.svg); } .flag--pr { background-image: url(flags/4x3/pr.svg); } .flag--ps { background-image: url(flags/4x3/ps.svg); } .flag--pt { background-image: url(flags/4x3/pt.svg); } .flag--pw { background-image: url(flags/4x3/pw.svg); } .flag--py { background-image: url(flags/4x3/py.svg); } .flag--qa { background-image: url(flags/4x3/qa.svg); } .flag--re { background-image: url(flags/4x3/re.svg); } .flag--ro { background-image: url(flags/4x3/ro.svg); } .flag--rs { background-image: url(flags/4x3/rs.svg); } .flag--ru { background-image: url(flags/4x3/ru.svg); } .flag--rw { background-image: url(flags/4x3/rw.svg); } .flag--sa { background-image: url(flags/4x3/sa.svg); } .flag--sb { background-image: url(flags/4x3/sb.svg); } .flag--sc { background-image: url(flags/4x3/sc.svg); } .flag--sd { background-image: url(flags/4x3/sd.svg); } .flag--se { background-image: url(flags/4x3/se.svg); } .flag--sg { background-image: url(flags/4x3/sg.svg); } .flag--sh { background-image: url(flags/4x3/sh.svg); } .flag--si { background-image: url(flags/4x3/si.svg); } .flag--sj { background-image: url(flags/4x3/sj.svg); } .flag--sk { background-image: url(flags/4x3/sk.svg); } .flag--sl { background-image: url(flags/4x3/sl.svg); } .flag--sm { background-image: url(flags/4x3/sm.svg); } .flag--sn { background-image: url(flags/4x3/sn.svg); } .flag--so { background-image: url(flags/4x3/so.svg); } .flag--sr { background-image: url(flags/4x3/sr.svg); } .flag--ss { background-image: url(flags/4x3/ss.svg); } .flag--st { background-image: url(flags/4x3/st.svg); } .flag--sv { background-image: url(flags/4x3/sv.svg); } .flag--sx { background-image: url(flags/4x3/sx.svg); } .flag--sy { background-image: url(flags/4x3/sy.svg); } .flag--sz { background-image: url(flags/4x3/sz.svg); } .flag--tc { background-image: url(flags/4x3/tc.svg); } .flag--td { background-image: url(flags/4x3/td.svg); } .flag--tf { background-image: url(flags/4x3/tf.svg); } .flag--tg { background-image: url(flags/4x3/tg.svg); } .flag--th { background-image: url(flags/4x3/th.svg); } .flag--tj { background-image: url(flags/4x3/tj.svg); } .flag--tk { background-image: url(flags/4x3/tk.svg); } .flag--tl { background-image: url(flags/4x3/tl.svg); } .flag--tm { background-image: url(flags/4x3/tm.svg); } .flag--tn { background-image: url(flags/4x3/tn.svg); } .flag--to { background-image: url(flags/4x3/to.svg); } .flag--tr { background-image: url(flags/4x3/tr.svg); } .flag--tt { background-image: url(flags/4x3/tt.svg); } .flag--tv { background-image: url(flags/4x3/tv.svg); } .flag--tw { background-image: url(flags/4x3/tw.svg); } .flag--tz { background-image: url(flags/4x3/tz.svg); } .flag--ua { background-image: url(flags/4x3/ua.svg); } .flag--ug { background-image: url(flags/4x3/ug.svg); } .flag--um { background-image: url(flags/4x3/um.svg); } .flag--un { background-image: url(flags/4x3/un.svg); } .flag--us { background-image: url(flags/4x3/us.svg); } .flag--uy { background-image: url(flags/4x3/uy.svg); } .flag--uz { background-image: url(flags/4x3/uz.svg); } .flag--va { background-image: url(flags/4x3/va.svg); } .flag--vc { background-image: url(flags/4x3/vc.svg); } .flag--ve { background-image: url(flags/4x3/ve.svg); } .flag--vg { background-image: url(flags/4x3/vg.svg); } .flag--vi { background-image: url(flags/4x3/vi.svg); } .flag--vn { background-image: url(flags/4x3/vn.svg); } .flag--vu { background-image: url(flags/4x3/vu.svg); } .flag--wf { background-image: url(flags/4x3/wf.svg); } .flag--ws { background-image: url(flags/4x3/ws.svg); } .flag--ye { background-image: url(flags/4x3/ye.svg); } .flag--yt { background-image: url(flags/4x3/yt.svg); } .flag--za { background-image: url(flags/4x3/za.svg); } .flag--zm { background-image: url(flags/4x3/zm.svg); } .flag--zw { background-image: url(flags/4x3/zw.svg); } /** * NOTE * ===================================================================== */ .note { color: var(--text-color-secondary); } .note a { color: var(--app-link-color); text-decoration: none; cursor: pointer; } .body--aurora .note a { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .body--aurora .note a:focus, .body--aurora .note a:active, .body--aurora .note a:hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } .note--tiny { font-size: 11px; line-height: 2rem; } .note--small { font-size: 12px; line-height: 2rem; } /* * TOGGLE * ===================================================================== * */ .toggle { font-size: 14px; position: relative; width: 2em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .toggle__checkbox { display: none; } .toggle__label { display: block; overflow: hidden; cursor: pointer; border-radius: 1em; margin: 0; } .toggle__inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.1s ease-in 0s; } .toggle__inner:before, .toggle__inner:after { content: ''; float: left; width: 50%; height: 1.25rem; cursor: pointer; } .toggle__inner:before { background-color: var(--color-primary); filter: opacity(60%); } .toggle__inner:after { background-color: var(--text-color-default); filter: opacity(60%); } .toggle__switch { display: block; width: 1em; height: 1em; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--text-color-default); position: absolute; border: 0 solid var(--text-color-default); border-radius: 50%; transition: all 0.1s ease-in 0s; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .toggle__switch:hover { filter: brightness(110%); } } .toggle__checkbox:checked + .toggle__label .toggle__inner { margin-left: 0; } .toggle__checkbox:checked + .toggle__label .toggle__switch { left: 1em; background-color: var(--color-primary); } .toggle--tiny { font-size: 11px; } .toggle--tiny .toggle__inner:before, .toggle--tiny .toggle__inner:after { height: 0.75rem; } .toggle--small { font-size: 12px; } .toggle--small .toggle__inner:before, .toggle--small .toggle__inner:after { height: 1rem; } .toggle--large { font-size: 16px; } .toggle--large .toggle__inner:before, .toggle--large .toggle__inner:after { height: 1.5rem; } .toggle--disabled .toggle__switch { background-color: var(--text-color-tertiary); cursor: not-allowed; } .toggle--disabled .toggle__switch:before, .toggle--disabled .toggle__switch:after { background-color: var(--text-color-tertiary); cursor: not-allowed; } .toggle--disabled .toggle__inner:before, .toggle--disabled .toggle__inner:after { cursor: not-allowed; background: none; border-radius: 1em; border: 1px solid var(--text-color-tertiary); } .toggle--disabled .toggle__checkbox:checked + .toggle__label .toggle__switch { background-color: var(--text-color-tertiary); } .toggle--aurora .toggle__inner:before { background-color: var(--aurora-color-brand-secondary); } .toggle--aurora .toggle__inner:after { background-color: var(--aurora-border-level-2); } .toggle--aurora .toggle__switch { background-color: var(--aurora-text-color-tertiary); border: 0 solid var(--aurora-text-color-tertiary); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .toggle--aurora .toggle__switch:hover { background-color: var(--aurora-text-color-tertiary); filter: brightness(110%); } } .toggle--aurora .toggle__checkbox:checked + .toggle__label .toggle__switch { left: 1em; background-color: var(--aurora-color-brand-primary); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .toggle--aurora .toggle__checkbox:checked + .toggle__label .toggle__switch:hover { background-color: var(--aurora-color-brand-primary-hover); } } .toggle--aurora.toggle--disabled .toggle__switch { background-color: var(--aurora-border-level-2); } .toggle--aurora.toggle--disabled .toggle__switch:before, .toggle--aurora.toggle--disabled .toggle__switch:after { background-color: var(--aurora-border-level-2); } .toggle--aurora.toggle--disabled .toggle__inner:before, .toggle--aurora.toggle--disabled .toggle__inner:after { border-color: var(--aurora-border-level-1); background-color: var(--aurora-border-level-1); } .toggle--aurora.toggle--disabled .toggle__checkbox:checked + .toggle__label .toggle__switch { background-color: var(--aurora-border-level-2); } /** * STACK * ===================================================================== */ .stack { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; /** * 1. Apply magic value to trigger correct flexbox behaviour, else * contents liable to overflow width of container, especially in * cases where the content wraps. * Reference : https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */ } .stack--center { align-content: center; } .stack:not(.stack--vertical).stack--top { align-items: flex-start; } .stack:not(.stack--vertical).stack--right { justify-content: flex-end; } .stack:not(.stack--vertical).stack--bottom { align-items: flex-end; } .stack:not(.stack--vertical).stack--left { justify-content: flex-start; } .stack:not(.stack--vertical).stack--baseline { align-items: baseline; } .stack--gutter-tiny > *:not(:first-child) { padding-left: var(--gutter-tiny); } .stack--gutter-tiny > *:not(:last-child) { padding-right: var(--gutter-tiny); } .stack--gutter-small > *:not(:first-child) { padding-left: var(--gutter-small); } .stack--gutter-small > *:not(:last-child) { padding-right: var(--gutter-small); } .stack--gutter-medium > *:not(:first-child) { padding-left: var(--gutter-medium); } .stack--gutter-medium > *:not(:last-child) { padding-right: var(--gutter-medium); } .stack--gutter-large > *:not(:first-child) { padding-left: var(--gutter-large); } .stack--gutter-large > *:not(:last-child) { padding-right: var(--gutter-large); } .stack--vertical { flex-direction: column; /** * 1. Flex basis is needed to allow height 100% children in Safari * Reference: https://github.com/philipwalton/flexbugs/issues/197 */ } .stack--vertical.stack--top { justify-content: flex-start; } .stack--vertical.stack--right { align-items: flex-end; } .stack--vertical.stack--bottom { justify-content: flex-end; } .stack--vertical.stack--left { align-items: flex-start; } .stack--vertical.stack--gutter-tiny > *:not(:first-child) { padding-left: 0; padding-top: var(--gutter-tiny); } .stack--vertical.stack--gutter-tiny > *:not(:last-child) { padding-right: 0; padding-bottom: var(--gutter-tiny); } .stack--vertical.stack--gutter-small > *:not(:first-child) { padding-left: 0; padding-top: var(--gutter-small); } .stack--vertical.stack--gutter-small > *:not(:last-child) { padding-right: 0; padding-bottom: var(--gutter-small); } .stack--vertical.stack--gutter-medium > *:not(:first-child) { padding-left: 0; padding-top: var(--gutter-medium); } .stack--vertical.stack--gutter-medium > *:not(:last-child) { padding-right: 0; padding-bottom: var(--gutter-medium); } .stack--vertical.stack--gutter-large > *:not(:first-child) { padding-left: 0; padding-top: var(--gutter-large); } .stack--vertical.stack--gutter-large > *:not(:last-child) { padding-right: 0; padding-bottom: var(--gutter-large); } .stack--vertical > .stack__item--grow { flex-basis: 0; } .stack--scrollable.stack--vertical { /** * 1. Scrollable component uses `grid--scroll` which expect * height 0 for correct vertical flexbox expansion. Earlier it was * given by `grid`. So this needs to be handled by `stack` now until * grid--scroll` is removed from Scrollable. * 2. Fixes showing unnecessary scrollbar after recalculating dialog * position thus setting container height to maximum possible value. * Similar as fix below (&__item). */ } .stack--scrollable.stack--vertical > .grid--scroll { height: 0; min-height: 0; width: 100%; } .stack--space-between { justify-content: space-between; } .stack--space-around { justify-content: space-around; } .stack--space-evenly { justify-content: space-evenly; } .stack__item { /** * 1. Min-width(for flex items) cannot be unitless in IE */ } .stack__item--start { align-self: flex-start; } .stack__item--end { align-self: flex-end; } .stack__item--stretch { align-self: stretch; } .stack__item--grow { flex-grow: 1; } .stack__item--shrink { flex-shrink: 1; } .stack__item--truncate { min-width: 0%; } .stack__item--hidden { display: none; } .ms { /** * 1. Flex basis can not be 0 in IE * 2. Stack (flex) items need a max-width, height min-width and -height to be able to properly size in IE */ } .ms .stack--vertical > .stack__item--grow { flex-basis: auto; } .ms .stack__item { max-height: 100%; max-width: 100%; min-height: 1px; min-width: 1px; } /* * RADIO BUTTON * ===================================================================== */ .radio-button { display: flex; align-items: center; cursor: pointer; color: var(--text-color-default); position: relative; /** * 1. Prevent shrink so radiobutton always maintains its size */ /** * Small dot positioning inside radio button */ } .radio-button:before { content: ''; width: 1em; height: 1em; border: 0.125rem solid var(--text-color-default); border-radius: 50%; transition: all ease-in-out 150ms; flex-shrink: 0; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .radio-button:not(.radio-button--disabled):hover:before { border-color: var(--color-primary-hover); } .radio-button:not(.radio-button--disabled):hover:after { background-color: var(--color-primary-hover); } } .radio-button:after { top: 50%; left: 0.5em; transition: all ease-in-out 150ms; } .radio-button__input { display: none; } .radio-button--disabled { cursor: default; pointer-events: none; color: var(--text-color-tertiary); } .radio-button--disabled:before, .radio-button--disabled.radio-button--checked:before { border-color: var(--text-color-tertiary); } .radio-button--disabled.radio-button--checked:after { background-color: var(--text-color-tertiary); } .radio-button--checked:before { border-color: var(--color-primary); } .radio-button--checked:after { content: ''; background-color: var(--color-primary); border-radius: 50%; position: absolute; transform: translate(-50%, -50%); } [dir='rtl'] .radio-button--checked:after { transform: translate(50%, -50%); } .radio-button .radio-button__label { margin-left: 0.75rem; } .radio-button--tiny { font-size: 11px; } .radio-button--tiny:after { width: 0.4rem; height: 0.4rem; top: 52%; } .radio-button--small { font-size: 12px; } .radio-button--small:after { width: 0.5rem; height: 0.5rem; } .radio-button--medium { font-size: 14px; } .radio-button--medium:after { width: 0.625rem; height: 0.625rem; } .radio-button--large { font-size: 16px; } .radio-button--large:after { width: 0.75rem; height: 0.75rem; } .radio-button--aurora { color: var(--aurora-text-color-primary); } .radio-button--aurora.radio-button:before { border-color: var(--aurora-border-level-2); background-color: var(--aurora-background-level-1); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .radio-button--aurora:not(.radio-button--disabled):hover:before { border-color: var(--aurora-color-brand-primary); background-color: var(--aurora-color-brand-primary-alpha-10); } .radio-button--aurora:not(.radio-button--disabled):hover.radio-button--checked:before { border-color: var(--aurora-color-brand-primary-hover); } .radio-button--aurora:not(.radio-button--disabled):hover.radio-button--checked:after { background-color: var(--aurora-color-brand-primary-hover); } } .radio-button--aurora.radio-button--disabled { color: var(--aurora-text-color-tertiary); } .radio-button--aurora.radio-button--disabled:before, .radio-button--aurora.radio-button--disabled.radio-button--checked:before { border-color: var(--aurora-border-level-2); } .radio-button--aurora.radio-button--disabled.radio-button--checked:after { background-color: var(--aurora-background-level-2); } .radio-button--aurora.radio-button--checked:before { border-color: var(--aurora-color-brand-primary); } .radio-button--aurora.radio-button--checked:after { background-color: var(--aurora-color-brand-primary); } .radio-button--aurora.radio-button--tiny:after { width: 0.65rem; height: 0.65rem; } .radio-button--aurora.radio-button--small:after { width: 0.8rem; height: 0.8rem; } .radio-button--aurora.radio-button--medium:after { width: 1rem; height: 1rem; } .radio-button--aurora.radio-button--large:after { width: 1.2rem; height: 1.2rem; } /* * CHECKBOX * ===================================================================== */ .checkbox { display: flex; align-items: center; cursor: pointer; color: var(--text-color-default); position: relative; /** * 1. Prevent shrink so checkbox always maintains its size */ /** * 1. Translate it above X-axis and centered around Y-axis * and rotate it to make it checkmark. */ /** * 1. Tweak the Y-axis positioning to optically adjust the small size. */ } .checkbox:before { content: ''; width: 1em; height: 1em; border: 0.125rem solid var(--text-color-default); border-radius: var(--border-radius-input); transition: all ease-in-out 150ms; flex-shrink: 0; } .checkbox:after { top: 50%; left: 0.5em; transition: all ease-in-out 150ms; width: 0.625em; height: 0.3125em; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .checkbox:not(.checkbox--disabled):hover:before, .checkbox:not(.checkbox--disabled):hover:after { border-color: var(--color-primary-hover); } } .checkbox__input { display: none; } .checkbox--disabled { cursor: default; pointer-events: none; color: var(--text-color-tertiary); } .checkbox--disabled:before, .checkbox--disabled.checkbox--checked:before, .checkbox--disabled.checkbox--checked:after { border-color: var(--text-color-tertiary); } .checkbox--checked:before { border-color: var(--color-primary); } .checkbox--checked:after { content: ''; border-bottom: 0.25rem solid var(--color-primary); border-left: 0.25rem solid var(--color-primary); position: absolute; transform: translate(-50%, -65%) rotate(-50deg); } .checkbox--indeterminate { opacity: 0.5; } .checkbox--indeterminate:before { border-color: var(--color-primary); } .checkbox--indeterminate:after { content: ''; border-bottom: 0.25rem solid var(--color-primary); border-left: 0.25rem solid var(--color-primary); position: absolute; transform: translate(-50%, -65%) rotate(-50deg); } .checkbox .checkbox__label { margin-left: 0.75rem; } .checkbox--tiny { font-size: 11px; } .checkbox--tiny.checkbox--checked:after { transform: translate(-50%, -40%) rotate(-50deg); } .checkbox--small { font-size: 12px; } .checkbox--medium { font-size: 14px; } .checkbox--large { font-size: 16px; } .checkbox--aurora { color: var(--aurora-text-color-primary); } .checkbox--aurora.checkbox:before { background-color: var(--aurora-background-level-1); border-color: var(--aurora-border-level-3); border-radius: var(--aurora-border-radius-input); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .checkbox--aurora.checkbox:not(.checkbox--disabled):hover:before { background-color: var(--aurora-color-brand-primary-alpha-10); border-color: var(--aurora-color-brand-primary); } .checkbox--aurora.checkbox:not(.checkbox--disabled):hover:after { border-color: var(--aurora-action-text-color-primary); } .checkbox--aurora.checkbox:not(.checkbox--disabled):hover.checkbox--checked:before { background-color: var(--aurora-color-brand-primary-hover); } } .checkbox--aurora.checkbox--disabled { color: var(--aurora-text-color-tertiary); } .checkbox--aurora.checkbox--disabled:before, .checkbox--aurora.checkbox--disabled.checkbox--checked:before { border-color: var(--aurora-border-level-3); background-color: var(--aurora-border-level-1); } .checkbox--aurora.checkbox--disabled.checkbox--checked:after { border-color: var(--aurora-text-color-inverted); } .checkbox--aurora.checkbox--checked:before { border-color: var(--aurora-color-brand-primary); background-color: var(--aurora-color-brand-primary); } .checkbox--aurora.checkbox--checked:after { border-color: var(--aurora-action-text-color-primary); } /** * DIRECTIONAL NUMBER * ===================================================================== */ .directional-number--positive { color: var(--color-positive); } .inverse-pnl-color .directional-number--positive { color: var(--color-negative); } .directional-number--negative { color: var(--color-negative); } .inverse-pnl-color .directional-number--negative { color: var(--color-positive); } .directional-number--aurora.directional-number--positive { color: var(--aurora-color-brand-positive); } .inverse-pnl-color .directional-number--aurora.directional-number--positive { color: var(--aurora-color-brand-negative); } .directional-number--aurora.directional-number--negative { color: var(--aurora-color-brand-negative); } .inverse-pnl-color .directional-number--aurora.directional-number--negative { color: var(--aurora-color-brand-positive); } /* * RANGE * ===================================================================== */ .range-bar { display: flex; align-items: center; } .range-bar__container { position: relative; min-width: 100px; width: 100%; border-radius: 6px; background: var(--aurora-background-level-3); } .range-bar__filler { position: relative; height: 100%; } .range-bar__filler::after { position: absolute; width: 2px; background-color: var(--aurora-text-color-secondary); content: ''; display: block; right: 0; } .range-bar__label { color: var(--aurora-text-color-primary); } .range-bar--tiny span + span { margin-left: 4px; } .range-bar--tiny .range-bar__container { height: 4px; } .range-bar--tiny .range-bar__filler::after { top: -4px; height: 12px; } .range-bar--tiny .range-bar__label { font-size: 12px; } .range-bar--small span + span { margin-left: 8px; } .range-bar--small .range-bar__container { height: 6px; } .range-bar--small .range-bar__filler::after { top: -5px; height: 16px; } .range-bar--small .range-bar__label { font-size: 14px; } .range-bar--medium span + span { margin-left: 8px; } .range-bar--medium .range-bar__container { height: 8px; } .range-bar--medium .range-bar__filler::after { top: -8px; height: 24px; } .range-bar--medium .range-bar__label { font-size: 14px; } .range-bar--large span + span { margin-left: 16px; } .range-bar--large .range-bar__container { height: 12px; } .range-bar--large .range-bar__filler::after { top: -10px; height: 32px; } .range-bar--large .range-bar__label { font-size: 16px; } /** * QUALITY BAR * ===================================================================== */ .quality-bar { display: inline-block; } .quality-bar__segment { margin-right: 1px; display: inline-block; width: 0.5rem; height: 1rem; background-color: var(--text-color-secondary); } .quality-bar__segment:last-child { margin-right: 0; } /* * HEADING * ===================================================================== */ .heading--large.heading--primary { font-size: 29px; line-height: 4rem; } .heading--large.heading--primary.heading--aurora { font-size: 30px; line-height: 120%; font-weight: 600; } .heading--large.heading--secondary { font-size: 26px; line-height: 4rem; } .heading--large.heading--secondary.heading--aurora { font-size: 24px; line-height: 120%; font-weight: 600; } .heading--large.heading--tertiary { font-size: 20px; line-height: 3rem; } .heading--large.heading--tertiary.heading--aurora { font-size: 20px; line-height: 120%; font-weight: 600; } .heading--medium.heading--primary { font-size: 26px; line-height: 4rem; } .heading--medium.heading--primary.heading--aurora { font-size: 30px; line-height: 120%; font-weight: 600; } .heading--medium.heading--secondary { font-size: 20px; line-height: 3rem; } .heading--medium.heading--secondary.heading--aurora { font-size: 20px; line-height: 120%; font-weight: 600; } .heading--medium.heading--tertiary { font-size: 16px; line-height: 3rem; } .heading--medium.heading--tertiary.heading--aurora { font-size: 16px; line-height: 120%; font-weight: 600; } .heading--small.heading--primary { font-size: 20px; line-height: 3rem; } .heading--small.heading--primary.heading--aurora { font-size: 24px; line-height: 120%; font-weight: 600; } .heading--small.heading--secondary { font-size: 16px; line-height: 3rem; } .heading--small.heading--secondary.heading--aurora { font-size: 20px; line-height: 120%; font-weight: 600; } .heading--small.heading--tertiary { font-size: 14px; line-height: 2rem; } .heading--small.heading--tertiary.heading--aurora { font-size: 16px; line-height: 120%; font-weight: 600; } .heading--tiny.heading--primary.heading--aurora { font-size: 20px; line-height: 120%; font-weight: 600; } .heading--tiny.heading--secondary.heading--aurora { font-size: 16px; line-height: 120%; font-weight: 600; } .heading--tiny.heading--tertiary.heading--aurora { font-size: 14px; line-height: 120%; font-weight: 600; } .highlighter { color: var(--app-color); background: var(--light-blue); } /* * TOOLBAR * ===================================================================== * */ /** * 1. Ensure the correct width when used as a flex item. * 2. Force the element to have a height. * 3. Hides scrollbar for IE and Edge browsers. * 4. Ensure that end items does not shrink in IE * 5. IE11 doesnt respect min-height on flexbox, so this * smart hack fixes it https://github.com/philipwalton/flexbugs/issues/231 * */ .toolbar { width: 100%; overflow: auto; -ms-overflow-style: none; } .toolbar__item { display: flex; align-items: center; } .toolbar__item--start { float: left; margin-right: 1rem; } .toolbar__item--end { float: right; margin-left: 1rem; flex-shrink: 0; } .toolbar__item--fit-content { flex-shrink: 0; } .toolbar__item--truncate { min-width: 0; } .toolbar--fill { display: flex; } .toolbar--fill .toolbar__item { width: 100%; } .toolbar--fill .toolbar__item--start, .toolbar--fill .toolbar__item--end { width: auto; } .toolbar--center { display: flex; justify-content: center; } .toolbar--center .toolbar__item:not(:last-child) { margin-right: 1rem; } .toolbar--small .toolbar__item { min-height: 3rem; } .ie11 .toolbar--small .toolbar__item:after { min-height: inherit; content: ''; font-size: 0; } .toolbar--medium .toolbar__item { min-height: 4rem; } .ie11 .toolbar--medium .toolbar__item:after { min-height: inherit; content: ''; font-size: 0; } .toolbar--large .toolbar__item { min-height: 5rem; } .ie11 .toolbar--large .toolbar__item:after { min-height: inherit; content: ''; font-size: 0; } .toolbar--inset { padding: 0 0.5rem; } /* * TITLE BAR * ===================================================================== * */ .titlebar { display: flex; align-items: center; } .titlebar__section { display: flex; align-items: center; } .titlebar__section--start { flex-basis: 20%; text-align: left; text-align: start; justify-content: flex-start; } .titlebar__section--start .titlebar__element { margin-right: 1rem; } .titlebar__section--end { flex-basis: 20%; text-align: right; text-align: end; justify-content: flex-end; } .titlebar__section--end .titlebar__element { margin-left: 1rem; } .titlebar__section--center { justify-content: center; flex-basis: 60%; text-align: center; } .titlebar__section--center .titlebar__element { margin: 0 0.5rem; } /* * Side Panel * ===================================================================== * */ .side-panel { --side-panel-animation-timer: 0.2s; position: relative; display: flex; /** &__container is used to animate a width change, without altering the width of the content. * 1. Ensure container width is always the set width, not a flexed value. */ /** * 1. Ensure children start at z-index 0 so lifted children wont be above the isOverlapping panel */ } .side-panel--after { flex-flow: row-reverse; } .side-panel--after .side-panel__panel { flex-flow: row-reverse; transform: translateX(0); } .side-panel__container { overflow: hidden; transition: width ease-in-out var(--side-panel-animation-timer); flex: 0 0 auto; } .side-panel__container--overlap { position: absolute; top: 0; bottom: 0; background-color: var(--background-app); z-index: 1; } .side-panel__container--overlap.side-panel__panel--aurora { background-color: var(--aurora-background-level-1); } .side-panel__panel { display: flex; transform: translateX(-100%); height: 100%; transition: transform ease-in-out var(--side-panel-animation-timer); } .side-panel__panel--slide-in { transform: translateX(0); } .side-panel__children { width: 100%; z-index: 0; } .side-panel__divider { border-right: 1px solid var(--border-color-default); } .side-panel__divider--aurora { border-color: var(--aurora-border-level-2); } .side-panel--full-height { height: 100%; } /* * CARD ATOM * ===================================================================== * */ .card { border: 1px solid var(--border-color-default); border-radius: var(--border-radius-card); box-shadow: var(--shadow-soft); overflow: hidden; background-image: linear-gradient( var(--background-gradient-highlight-1), var(--background-gradient-highlight-2), var(--background-gradient-highlight-2), var(--background-gradient-highlight-1) ); background-color: var(--background-gradient-highlight-1); } .card--action { cursor: pointer; } .card--action * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .card--fill-height { height: 100%; } .card--selected { border-color: var(--border-color-primary); } .card--aurora { box-shadow: var(--aurora-card-shadow); border: 1px solid var(--aurora-border-level-1); background: var(--aurora-background-level-1); border-radius: var(--aurora-border-radius-card); } .card--aurora.card--selected { border-color: var(--aurora-color-brand-primary); } .card--aurora.card--highlight { box-shadow: none; background: var(--aurora-background-level-2); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .card--aurora.card--action:hover { border-color: var(--aurora-border-level-2); box-shadow: var(--aurora-card-shadow-hover); } } .card__body { padding: 2rem; height: 100%; } .card__body--tight { padding: 1rem; } /** * PROGRESS BAR * ===================================================================== */ .progress-bar { width: 100%; height: 1em; border: 1px solid var(--border-color-default); border-radius: var(--border-radius-action); } .progress-bar__fill { background-color: var(--color-primary); height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 250ms ease; } .progress-bar--aurora { border-color: var(--aurora-border-level-2); border-radius: var(--aurora-border-radius-action); } .progress-bar--aurora .progress-bar__fill { background-color: var(--aurora-color-brand-secondary); } /* * LABEL * ===================================================================== */ .label { color: var(--text-color-secondary); } .label--tiny { font-size: 11px; line-height: 2rem; } .label--small { font-size: 12px; line-height: 2rem; } .label--medium { font-size: 14px; line-height: 2rem; } .label--large { font-size: 16px; line-height: 3rem; } .label--highlight { font-weight: bold; } .label--aurora { color: var(--aurora-text-color-secondary); font-weight: 400; } .label--aurora.label--tiny { font-size: 11px; line-height: 120%; } .label--aurora.label--small { font-size: 12px; line-height: 120%; } .label--aurora.label--medium { font-size: 14px; line-height: 120%; } .label--aurora.label--large { font-size: 16px; line-height: 120%; } .label--aurora.label--highlight { font-weight: 700; } /* * SVG COMPONENT * ===================================================================== * */ /** * 1. there is a bug in IE that causes issues with propagation * to fix the issue we have set touch-action to 'none' * https://stackoverflow.com/questions/30653533/ie-11-crashes-when-using-dynamic-svg-elements */ .svg { touch-action: none; } /* * TEXT * ===================================================================== * */ .text--center { text-align: center; } .text--start { text-align: left; text-align: start; } .text--end { text-align: right; text-align: end; } .text--lower { text-transform: lowercase; } .text--upper { text-transform: uppercase; } .text--block { display: block; } .text--inline-block { display: inline-block; } .text--inline { display: inline; } .text--tiny { font-size: 11px; } .text--small { font-size: 12px; } .text--medium { font-size: 14px; } .text--large { font-size: 16px; } .text--huge { font-size: 20px; } .text--gigantic { font-size: 24px; } .text-line-height--small { line-height: 100%; } .text-line-height--medium { line-height: 120%; } .text-line-height--large { line-height: 150%; } .text--color-text-primary { color: var(--text-color-default); } .text--color-text-secondary { color: var(--text-color-secondary); } .text--color-text-tertiary { color: var(--text-color-tertiary); } .text--color-text-highlight { color: var(--text-color-highlight); } .text--color-text-inverted { color: var(--text-color-inverted); } .text--color-brand-positive { color: var(--aurora-color-brand-positive); } .text--color-brand-negative { color: var(--aurora-color-brand-negative); } .text--inline { display: inline; } .text--bold { font-weight: bold; } .text--italic { font-style: italic; } .text--tabular { font-feature-settings: 'tnum'; } .text--truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text--selectable, .text--selectable:before, .text--selectable:after, .text--selectable *, .text--selectable *:before, .text--selectable *:after { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: initial; } .text--break { word-wrap: break-word; } .text--aurora.text--color-text-primary { color: var(--aurora-text-color-primary); } .text--aurora.text--color-text-secondary { color: var(--aurora-text-color-secondary); } .text--aurora.text--color-text-tertiary { color: var(--aurora-text-color-tertiary); } .text--aurora.text--color-text-highlight { color: var(--aurora-text-color-highlight); } .text--aurora.text--color-text-inverted { color: var(--aurora-text-color-inverted); } .text--aurora.text--color-brand-positive { color: var(--aurora-color-brand-positive); } .text--aurora.text--color-brand-negative { color: var(--aurora-color-brand-negative); } /* ==================================================================== =Base ================================================================= */ /* Modified version of: ! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css * * ------------------------------------------------------------------- * DEV NOTES: * * - Unused elements from normalize & Bootstrap 2.3.1 are commented out * - Extra normalization rules intespersed in the appropriate section * * ------------------------------------------------------------------- * CONTENTS: * * =Base * =Elements * =Links * =Typography * =Embedded Content * =Figures * =Forms * =Tables */ /* ==================================================================== =Base ================================================================= */ /** * 1. A more consistent box model * - http://paulirish.com/2012/box-sizing-border-box-ftw/ * 2. Disable text selection across the app - primarily to aid usability * by suppressing side-effects (e.g. the loupe in iOS) * 3. Disable touch callouts - feedback via CSS */ *, *:before, *:after { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; -webkit-touch-callout: none; } /** * 1. Prevent text size adjust after orientation change, without * disabling user zoom. * 2. Mitigate custom font stacks being overidden by the browser. */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: sans-serif; } /* ==================================================================== =Elements ================================================================= */ /** * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ details, summary, main { display: block; } /** * 1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Zero-out spacing. * 1. Allows app container element to span entire viewport */ html, body, h1, h2, h3, h4, h5, h6, p, pre, dl, dd, ol, ul, menu, form, table, th, td, caption { margin: 0; padding: 0; } /** * Address `[hidden]` styling not present in IE 10. * Hide the `template` element in IE 10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* ==================================================================== =Links ================================================================= */ /** * Improve readability when focused and also mouse hovered in all * browsers. */ a:active, a:focus, a:hover { outline: 0; } /* ==================================================================== =Typography ================================================================= */ /** * Correct font family set oddly in Safari 5 and Chrome. */ kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * 1. Improve readability of pre-formatted text in all browsers. * 2. Contain overflow in all browsers. */ pre { white-space: pre-wrap; overflow: auto; } /** * Set consistent quote types. */ q { quotes: '\201C''\201D''\2018''\2019'; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 11px; line-height: 0; position: relative; vertical-align: baseline; } /** * There is no counterpart as this is used for decimal places for displaying * prices, and the design does not call for them to be offset from the baseline grid */ sup { top: -0.5em; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /* ==================================================================== =Embedded content ================================================================= */ /** * Remove border when inside `a` element in IE 10. */ img { border: none; } /** * 1. Supress line-height and invisible margins. */ svg { display: block; } /* ==================================================================== =Figures ================================================================= */ /** * Address margin not present in Safari. */ figure { margin: 1em 40px; } /* ==================================================================== =Forms ================================================================= */ fieldset, legend { padding: 0; } /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. * 4. Remove default borders from inputs. */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; border: none; } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * 1. Address inconsistent `text-transform` inheritance for `button` and `select`. * - All other form control elements do not inherit `text-transform` values. * - Correct `button` style inheritance in Firefox, IE 10/11, and Opera. * - Correct `select` style inheritance in Firefox. * 2. Remove outline */ button, select { text-transform: none; outline: 0; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type='button'], input[type='reset'], input[type='submit'] { -webkit-appearance: button; cursor: pointer; } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: none; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 10. * 2. Remove excess padding in IE 10. */ input[type='checkbox'], input[type='radio'] { box-sizing: border-box; padding: 0; } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. */ input[type='search'] { -webkit-appearance: textfield; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove default vertical scrollbar in IE 10/11. */ textarea { overflow: auto; } /** * 1. Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /** * 1. From Bootstrap: Make multiple select elements height not fixed */ select[multiple], select[size] { height: auto; } /* ==================================================================== =Tables ================================================================= */ /** * Remove most spacing between table cells. */ table { border-spacing: 0; border-collapse: separate; } td, th { padding: 0; } /** * 1. Remove default bolding to play nice with WLC `bold` styling (which * may not actually feature emboldened text). */ th { font-weight: normal; } /** * DISPLAY UTILITIES * ===================================================================== * Add to any element. */ /* ==================================================================== =UI States ================================================================= */ /** * Disable all pointer events on the element. * Mainly used during UI transitions to prevent errant clicks. * * 1. On iOS the pointer-events property is sometimes not being unset * when the class is removed. Triggering hardware acceleration solves * the issue. */ .is-inert { pointer-events: none; } .is-inert--hwa { transform: translateZ(0); } /** * UI CHROME * ===================================================================== * Apply to any element to imbue it with a consistent piece of UI chrome * - NOT related to the browser. */ /* ==================================================================== =Lip - Faint drop-shadow at the vertical edge of an element ================================================================= */ /** * Adds lip to bottom edge. * * 1. Required for box-shadow to appear. */ .lip { z-index: 3; border-bottom: 1px solid var(--gray-dark); box-shadow: var(--shadow-default); position: relative; } /** * Adds lip to top edge. */ .lip--reverse { z-index: 3; border-top: 1px solid var(--gray-dark); border-bottom: 0; box-shadow: var(--shadow-default); } /* ==================================================================== =Separator - Faint borders at vertical edges of an element ================================================================= */ .sep { border-color: var(--app-hairline); border-width: 1px 0; border-style: solid; } .well--deep .sep, .well--deep.sep { border-color: var(--app-sub-deep-border); } .sep--top { border-bottom: none; } .sep--bottom { border-top: none; } .sep--left { border-width: 0 0 0 1px; } .sep--right { border-width: 0 1px 0 0; } .sep--none { border-bottom-color: transparent !important; border-top-color: transparent !important; } /* * ANIMATIONS * ===================================================================== * * Reference on any element. * */ /* ==================================================================== =BounceIn ================================================================= */ @keyframes anim-bouncein { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } /* ==================================================================== // Tables // // Unlike the majority of UI components, base `` styles are // applied to the element itself, rather than being shielded behind // a `.table` class. // // The tables presented below are for "vanilla" tabular data which might // appear in long-form content. They are not for datagrids, for which a // separate Block is available (that augments the table styles - LINK?). // // --- // // NOTE: Tables should NEVER be used for layout, especially given the // capabilities of the OpenCSS grid system. // // Markup: //
// // // // // // // // // // // // // // // // // // // // // // //
#MarketSymbolDescription
1FXGBPUSDBritish Pound/US Dollar
2IndiciesFTSE100.1UK 100
// // .table--striped - Striped rows // .table--border - Basic table with a surrounding border // // Styleguide 7 ===================================================================== */ /** * 1. Display empty cells and render their backgrounds; */ table { width: 100%; max-width: 100%; empty-cells: show; } table thead > tr > th, table tbody > tr > th, table thead > tr > td, table tbody > tr > td { padding: 4px; vertical-align: text-top; border-bottom: 1px solid var(--table-border); text-align: left; /** * 1. Override `.well--deep` specificity. */ } table thead > tr > th.no-border, table tbody > tr > th.no-border, table thead > tr > td.no-border, table tbody > tr > td.no-border { border-color: transparent !important; } .well--deep table thead > tr > th, table.well--deep thead > tr > th, .well--deep table tbody > tr > th, table.well--deep tbody > tr > th, .well--deep table thead > tr > td, table.well--deep thead > tr > td, .well--deep table tbody > tr > td, table.well--deep tbody > tr > td { border-color: var(--app-sub-deep-border); } .table--striped > tbody > tr:nth-child(even) > td, .table--striped > tbody > tr:nth-child(even) > th { background-color: var(--table-bg-accent); } .table--border { border: 1px solid var(--table-border); border-bottom: 0; } .table--compact thead > tr > th, .table--compact tbody > tr > th, .table--compact thead > tr > td, .table--compact tbody > tr > td { padding: 0px; } .table--center-y thead > tr > th, .table--center-y tbody > tr > th, .table--center-y thead > tr > td, .table--center-y tbody > tr > td { vertical-align: middle; } /* ==================================================================== // Cell Modifiers // // Table cells have some default padding, and sized naturally to occupy // the available space. There are a number of modifier classes available // to affect their sizing behaviours. // // --- // // NOTE: Cell modifier classes follow the same naming conventions as Grid // Cell modifiers, except with a `c` prefix instead of `g`. // // Markup: // // // // // // // // // //
CellFooBarBaz
// // .c--fill - Each table row is restricted to one flexible fill cell. Other // cells will collapse in size. // .c--fit - Shrink-wrap the contents of a cell whilst retaining vertical // padding. Useful for inline content such as icons. // .c--reset - Force unset default paddings of the cell, for when the contents // of a cell needs to fill its parent. // .c--reset-x - Force unset default right and left paddings of the cell. // .c--reset-y - Force unset default top and bottom paddings of the cell. // .c--wrap - Force wrap cell // // Styleguide 7.1 ==================================================================== */ .c--fill { width: 100%; } .c--reset { padding: 0 !important; } .c--reset-x { padding-left: 0 !important; padding-right: 0 !important; } .c--reset-y { padding-top: 0 !important; padding-bottom: 0 !important; } .c--fit { padding: 4px 0 !important; text-align: center; } .c--wrap { white-space: normal; } /* ==================================================================== // Cell Alignment // // Apply a class of `.c--top` (default), `.c--center` or `.c--bottom` to // affect the vertical alignment of cell contents. // // Markup: // // // // // // // // //
TopCentreBottom
// // Styleguide 7.2 ==================================================================== */ .c--top { vertical-align: top !important; } .c--bottom { vertical-align: bottom !important; } .c--center { vertical-align: middle !important; } /* ==================================================================== // Fixed Table Header // // Applicable to all tables blocks, though generally used with components // built atop of the Datagrid Block. // // --- // // NOTE: the approach to column widths which rely on `` and // `table-layout: fixed`. // // The below example assumes JavaScript has been used in the application // to render columns with appropriate widths. // // ## Implementation details // // - Affixed pseudo header should be placed outside of the scrollview // containing the main `` element. // - To prevent column resizing an inline `width` style reflecting the // desired column size should be added to the corresponding `` // element via JavaScript. // - Any `
` with a `.c--fill` modifier class should have `width: 100%` // applied to it. // // Markup: //
//
// // // // // // // // // // // // // // // //
#MarketSymbolDescription
//
//
//
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
1FXGBPUSDBritish Pound/US Dollar
2IndiciesFTSE100.1UK 100
3CFDAPPL:xnasApple Inc.
4SelectedSYMBOLDescription
//
//
//
// // Styleguide 7.3 ==================================================================== */ /** * SCROLLBARS * ==================================================================== */ /* ==================================================================== =Chrome/Safari 1. All scrollbar changes are currently only selectable with webkit-prefixes, though their changeable values are non-prefixed. ================================================================= */ ::-webkit-scrollbar { width: var(--app-scroll-width); height: var(--app-scroll-width); } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { width: 2px; height: 2px; display: block; background-color: transparent; } ::-webkit-scrollbar-track-piece { border-radius: 0; } ::-webkit-scrollbar-thumb { background-color: var(--app-scroll-bg); border-radius: 0; } ::-webkit-scrollbar-corner { background-color: transparent; } /* ==================================================================== =Internet Explorer 10+ ================================================================= */ body { scrollbar-base-color: var(--app-scroll-bg-ie); scrollbar-face-color: var(--app-scroll-bg-ie); scrollbar-3dlight-color: var(--app-scroll-bg-ie); scrollbar-highlight-color: var(--app-scroll-bg-ie); scrollbar-track-color: var(--app-base); scrollbar-arrow-color: var(--app-scroll-bg-ie); scrollbar-shadow-color: var(--app-scroll-bg-ie); } /* ==================================================================== // Typography // // See type.styl for introductory docs. ===================================================================== */ html { color: var(--app-color); font-family: var(--font-family-text); font-size: 8px; } /* ==================================================================== // Typographic Scale // // Text sizing utility classes which mirror CSS's font-size keywords. // The default is `.t-medium`, and all sizes bar the largest two share // a common leading (line-height) to facilitate a constant vertical // rhythm and baseline content alignment (see Baseline Grid notes). // // .t-insane - Insane // .t-gigantic - Gigantic // .t-huge - Huge // .t-large - Large // .t-medium - Medium (Default: INV, PGO, TGO) // .t-small - Small (Default: DGO, PRO) // .t-tiny - Tiny // // Styleguide 3.1 ===================================================================== */ .t-insane { font-size: 40px; line-height: 6rem; } .t-massive { font-size: 29px; line-height: 4rem; } .t-gigantic { font-size: 26px; line-height: 4rem; } .t-huge { font-size: 20px; line-height: 3rem; } .t-large { font-size: 16px; line-height: 3rem; } .t-medium { font-size: 14px; line-height: 2rem; } .t-small { font-size: 12px; line-height: 2rem; } .t-tiny { font-size: 11px; line-height: 2rem; } .body-typography--inter { font-family: var(--font-family-text-inter); } .body-typography--inter h1, .body-typography--inter h2, .body-typography--inter h3, .body-typography--inter h4, .body-typography--inter h5 { font-family: var(--font-family-heading-inter); } .body-typography--large { font-size: 16px; line-height: 120%; font-weight: 400; } .body-typography--medium { font-size: 14px; line-height: 120%; font-weight: 400; } .body-typography--small { font-size: 14px; line-height: 120%; font-weight: 400; } .body-typography--tiny { font-size: 12px; line-height: 120%; font-weight: 400; } .body-typography--selectable, .body-typography--selectable:before, .body-typography--selectable:after, .body-typography--selectable *, .body-typography--selectable *:before, .body-typography--selectable *:after { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ===================================================================== // Copy // // Long-form copy is not well catered-to in OpenCSS due to the // constant vertical rhythm. However, it is possible to grant specific // bodies of text specific typography settings to facilitate reading. // // Anchors are styled as actions by default. // // Markup: //

// To be, or not to be, that is the question: Whether 'tis // nobler in the mind to suffer the slings and arrows of outrageous // fortune. //

//

// Or to take arms against a sea of troubles. And by // opposing end them. To die – to sleep, No more. //

// // .t-text - Long-form copy (e.g. articles). Tighter leading and paragraph // margins. // .t-meta - Secondary content, styled to be "knocked-back" from principle // content (e.g. instructions, notes, disclaimers). // .t-muted - Tertiary content, also used where associated controls are // disabled. // .t-app-color - For when you need to reset the color of a field inside of a // t-meta or t-muted // // Styleguide 3.2 ===================================================================== */ .t-text, .t-text.grid, .t-text.grid-cell { margin-bottom: 8px; line-height: 1.4; word-wrap: break-word; } .t-text:last-child, .t-text.grid:last-child, .t-text.grid-cell:last-child { margin-bottom: 0; } .t-meta { color: var(--app-meta-color); line-height: 1.25; } .t-muted { color: var(--app-muted-color); } .t-app-color { color: var(--app-color); } a { color: inherit; text-decoration: none; } /* ==================================================================== // Lists // // OpenCSS has basic styling for vanilla lists, but this requires a // specific `.t-list` class. This is because the base `
    ` and `
      ` // styles are reset, and the elements are often used in other UI // constructs. // // Markup: //
        //
      • List item
        • //
      • List item
        • //
      • List item
        • //
      //
        //
      1. List item
        2. //
      2. List item
        3. //
      3. List item
        4. //
// // // Styleguide 3.3 ===================================================================== */ .t-list { padding-left: 24px; list-style-type: disc; } ol.t-list { list-style-type: decimal; } /* ==================================================================== // Headers // // Like text-sizing utilties, headers are also afforded as helper classes // or mixins. The usage of classes for headers (rather than tying them // to a specific element) is known as ["double stranded headers"](http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css). // // Effectively, it allows developers to style any header to reflect its // place in the visual hierarchy of the UI whilst preserving the underlying // semantics. // // Markup: //

// To Sleep, Perchance to Dream //

//

// For in that sleep of death what dreams may come. //

// // .h1 - Primary-level header // .h2 - Secondary-level header // .h3 - Tertiary-level header // .h4 - NOT USED // .h5 - NOT USED // .h6 - NOT USED // // Styleguide 3.4 ===================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--font-family-heading); } .h1, .h2, .h3, .h4, .h5 { margin-bottom: 4px; } h1, .h1 { font-size: 26px; line-height: 4rem; font-weight: normal; } h2, .h2 { font-size: 20px; line-height: 3rem; font-weight: normal; } h3, .h3 { font-size: 16px; line-height: 3rem; font-weight: normal; } h4, h5, h6, .h4, .h5, .h6 { font-size: 14px; line-height: 2rem; font-weight: normal; } /* ==================================================================== // Alignment // // Helpers to align text. These are modelled after flexbox's Main axis // justification values to keep values agnostic between LTR-RTL layours. // // Markup: //

// For in that sleep of death what dreams may come. //

//

// ل في ذلك النوم من الموت ما قد تأتي الأحلام. //

// // .t-start - Left in LTR, Right in RTL // .t-end - Right in LTR, Left in RTL // .t-center - Centered text in both directions // // Styleguide 3.5 ===================================================================== */ /** * Horizontal text alignment */ .t-center { text-align: center; } /** * 1. IE10/11 don't support text-align: start|end, so just use RTL defaults. */ .t-start { text-align: left; text-align: start; } .t-end { text-align: right; text-align: end; } /* ==================================================================== // Formatting // // OpenCSS affords a number of classes to format text // // Markup: //

// The undiscovered country, from whose bourn no traveller returns, // puzzles the will. And makes us rather bear those ills we have. //

// // .t-normal - Standard weight text (default) // .t-bold - Bold text // .t-italic - Italicized text // .t-underline - Underline text // .t-nocase - Standard case text (default) // .t-upper - Uppercase text // .t-lower - Lowercase text // .t-action - Style text like anchors. // .t-error - Inline error message styling // .t-select - Pseudo-select text // .t-selectable - Allow text to be selectable (if by default it is not) // .t-truncate - Truncate text (also `.t-break` to force wrap content) // // Styleguide 3.6 ===================================================================== */ .t-bold, b, strong { font-weight: bold; } .t-normal { font-weight: normal; } .t-italic, .estimate { font-style: italic; } .t-underline { text-decoration: underline; } .t-nocase { text-transform: none; } .t-capitalize { text-transform: capitalize; } .t-upper { text-transform: uppercase; } .t-lower { text-transform: lowercase; } .t-select { background: var(--app-link-color); padding: 0 2px; } .t-selectable, .t-selectable:before, .t-selectable:after, .t-selectable *, .t-selectable *:before, .t-selectable *:after { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: initial; } .t-action { color: var(--app-link-color); } .t-error { color: var(--app-error-color); } /** * Preserve formating * - e.g. When displaying user written input, preserve line breaks * and white space */ .t-preformat { white-space: pre-line; } /** * Text truncation * * Prevent text from wrapping onto multiple lines, and truncate with * an ellipsis. * * 1. Ensure that the node has a maximum width after which truncation * can occur. */ .t-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * Truncation modifier * * Used with t-truncate to make the truncation reversed */ .t-truncate--start { direction: rtl; } .t-break { word-wrap: break-word; } /** * Generic Long Field Hook. * Override at appropriate level. */ .t-long { font-size: 12px; line-height: 2rem; } /** * Secondary `.beta` styled content. * * For beta styled content aligned to the baseline of primary content, * Use */ .beta { font-size: 12px; line-height: 2rem; } /* ==================================================================== // Profit & Loss Values // // OpenCSS defines a simple interface for styling numbers related to // profit and loss. Simply duplicate the target value within a data // attribute on an appropriate wrapper element. // // By default, _only_ loss making values (interpreted as negative values) // are styled. For styled profit values, use the `[data-profit]` // attribute instead of `[data-val]`. // // Placeholder values (`-`) and null values (i.e. `0`, `0.00000`) are not // styled. Null values of up to five decimals are supported. // // Markup: //

- & -

//

0 & 0

//

100 & 100

//

-100 & -100

// // Styleguide 3.7 ===================================================================== */ /* * 1. Since this is always a number, force it to stay ltr * 2. Aurora cannot use the normal-inversed mixin, * due to specificity issues with the inverse-pnl-color class */ [data-profit] { color: var(--app-profit-color); } .inverse-pnl-color [data-profit] { color: var(--app-loss-color); } [data-profit]:before { content: '\202A'; } [data-profit]:after { content: '\202C'; } .body--aurora [data-profit] { color: var(--aurora-color-brand-positive); } .body--aurora.inverse-pnl-color [data-profit] { color: var(--aurora-color-brand-negative); } [data-val^='-'], [data-profit^='-'] { color: var(--app-loss-color); } .inverse-pnl-color [data-val^='-'], .inverse-pnl-color [data-profit^='-'] { color: var(--app-profit-color); } .body--aurora [data-val^='-'], .body--aurora [data-profit^='-'] { color: var(--aurora-color-brand-negative); } .body--aurora.inverse-pnl-color [data-val^='-'], .body--aurora.inverse-pnl-color [data-profit^='-'] { color: var(--aurora-color-brand-positive); } [data-val='-'], [data-val='0'], [data-val='0.0'], [data-val='0.00'], [data-val='0.000'], [data-val='0.0000'], [data-val='0.00000'], [data-profit='-'], [data-profit='0'], [data-profit='0.0'], [data-profit='0.00'], [data-profit='0.000'], [data-profit='0.0000'], [data-profit='0.00000'] { color: inherit; } .inverse-pnl-color [data-val='-'], .inverse-pnl-color [data-val='0'], .inverse-pnl-color [data-val='0.0'], .inverse-pnl-color [data-val='0.00'], .inverse-pnl-color [data-val='0.000'], .inverse-pnl-color [data-val='0.0000'], .inverse-pnl-color [data-val='0.00000'], .inverse-pnl-color [data-profit='-'], .inverse-pnl-color [data-profit='0'], .inverse-pnl-color [data-profit='0.0'], .inverse-pnl-color [data-profit='0.00'], .inverse-pnl-color [data-profit='0.000'], .inverse-pnl-color [data-profit='0.0000'], .inverse-pnl-color [data-profit='0.00000'] { color: inherit; } .body--aurora [data-val='-'], .body--aurora [data-val='0'], .body--aurora [data-val='0.0'], .body--aurora [data-val='0.00'], .body--aurora [data-val='0.000'], .body--aurora [data-val='0.0000'], .body--aurora [data-val='0.00000'], .body--aurora [data-profit='-'], .body--aurora [data-profit='0'], .body--aurora [data-profit='0.0'], .body--aurora [data-profit='0.00'], .body--aurora [data-profit='0.000'], .body--aurora [data-profit='0.0000'], .body--aurora [data-profit='0.00000'] { color: inherit; } .inverse-pnl-color .body--aurora [data-val='-'], .inverse-pnl-color .body--aurora [data-val='0'], .inverse-pnl-color .body--aurora [data-val='0.0'], .inverse-pnl-color .body--aurora [data-val='0.00'], .inverse-pnl-color .body--aurora [data-val='0.000'], .inverse-pnl-color .body--aurora [data-val='0.0000'], .inverse-pnl-color .body--aurora [data-val='0.00000'], .inverse-pnl-color .body--aurora [data-profit='-'], .inverse-pnl-color .body--aurora [data-profit='0'], .inverse-pnl-color .body--aurora [data-profit='0.0'], .inverse-pnl-color .body--aurora [data-profit='0.00'], .inverse-pnl-color .body--aurora [data-profit='0.000'], .inverse-pnl-color .body--aurora [data-profit='0.0000'], .inverse-pnl-color .body--aurora [data-profit='0.00000'] { color: inherit; } .body--aurora.inverse-pnl-color [data-val='-'], .body--aurora.inverse-pnl-color [data-val='0'], .body--aurora.inverse-pnl-color [data-val='0.0'], .body--aurora.inverse-pnl-color [data-val='0.00'], .body--aurora.inverse-pnl-color [data-val='0.000'], .body--aurora.inverse-pnl-color [data-val='0.0000'], .body--aurora.inverse-pnl-color [data-val='0.00000'], .body--aurora.inverse-pnl-color [data-profit='-'], .body--aurora.inverse-pnl-color [data-profit='0'], .body--aurora.inverse-pnl-color [data-profit='0.0'], .body--aurora.inverse-pnl-color [data-profit='0.00'], .body--aurora.inverse-pnl-color [data-profit='0.000'], .body--aurora.inverse-pnl-color [data-profit='0.0000'], .body--aurora.inverse-pnl-color [data-profit='0.00000'] { color: inherit; } .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='-'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0.0'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0.00'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0.000'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0.0000'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-val='0.00000'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='-'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0.0'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0.00'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0.000'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0.0000'], .inverse-pnl-color .body--aurora.inverse-pnl-color [data-profit='0.00000'] { color: inherit; } /* ==================================================================== // Hindu-Arabic/Western Numbers // // Allows western numbers to stay LTR even if language is RTL // Prevents symbols to switch (e.g. "-100" should not become "100-") // - Add class as deep as possible, to prevent layout bugs // - Some times, when grouping values, it makes sense to add the class to the // immediate common ancestor (to also reverse the order to match text label) // // Markup: // -1,337.00% // // Styleguide 3.8 ===================================================================== */ /* * Numbers are LTR always. This class will ensure that a number is always written LTR. * 1. Add Left-to-right isolate character before LTR spicific string * 2. Add Pop directional isolate character to end LTR scope */ .t-num:before { content: '\202A'; } .t-num:after { content: '\202C'; } /* * Tabular numbers all have the same horizontal space * This will only work for font-families that support the feaure ie. Inter */ .t-tabular { font-feature-settings: 'tnum'; } /* ==================================================================== // Colors // // Allows components to use the basic text coloring classes without creating new classes for every case. // // Markup: //

// To be, or not to be, that is the question: Whether 'tis // nobler in the mind to suffer the slings and arrows of outrageous // fortune. //

// // .t-default - Default Color // .t-secondary - Secondary Color // .t-tertiary - Tertiary Color // .t-inverted - Inverted Color // // Styleguide 3.9 ===================================================================== */ .t-default { color: var(--text-color-default); } .t-secondary { color: var(--text-color-secondary); } .t-tertiary { color: var(--text-color-tertiary); } .t-inverted { color: var(--text-color-inverted); } .t-positive { color: var(--color-positive); } .inverse-pnl-color .t-positive { color: var(--color-negative); } /* * TYPOGRAPHY (Desktop Extension) * ===================================================================== * * Desktop specific typography styles (Legacy IE styles are siloed off * into a separate file for inclusion into that bundle). * * File should be referenced just after the core dependency (type.less) * so that any mixin classes receive their final set of rules before * being 'pulled' in by the compiler to other areas of the codebase. * * ------------------------------------------------------------------- * CONTENTS: * * =Mozilla Stack * =Chrome (Win) Stack * */ /* ==================================================================== =Mozilla Stack ================================================================= */ /* * 1. Firefox differentiates between light/regular variants by weight, * not name, hence need to supply a simplified font-stack * declaration and use different weights to specify * semi-light/normal/semi-bold weights. * * - We rely on the app feature detection scripts to echo out the * appropriate classes on a suitable root HTML element. * * 2. Win: Semibold Segoe UI, OSX: Regular Helvetica */ html.moz.mac { font-weight: 200; } .win.moz .t-bold, .win.moz b, .win.moz strong, .win.moz .h1, .win.moz .h2, .win.moz .h3, .win.moz .h4 { font-weight: 600; } .mac.moz .t-bold, .mac.moz b, .mac.moz strong, .mac.moz .h1, .mac.moz .h2, .mac.moz .h3, .mac.moz .h4 { font-weight: 400; } a { transition-property: color; transition-duration: 200ms; } a:focus, a:active, a:hover { color: var(--app-link-active-color); } /* * GRID SYSTEM * ===================================================================== * * Lightweight, flexible grid system based on flexbox. Designed to * support "content-out" bottom-up design (i.e. content is aware of * the necessary/optimal width(s) it requires for display), and to be * used in the creation of reusable layout abstractions (Grid Struts) via * mixins as part of an OOCSS approach (structure vs skin). * * Combine with `grid-cell` modifiers, or components that extend `grid`, * in order to apply particular widths to cells. * * See documentation for many examples. * * ------------------------------------------------------------------- * DEV NOTES: * * - The spec: http://www.w3.org/TR/css3-flexbox * - 'API' inspired heavily by SUIT Grid (MIT Licence) * - https://github.com/necolas/suit-grid * - https://gist.github.com/jayj/4012969 (mixins) * - Helpers are mixins used to generate rulesets. They are NOT for * general use in the codebase (hence they are not located in the * central mixins file). They are intended to be used only in grid * related files. If you need grid behaviours in your implementation * use the framework (i.e. go through the 'API'). * - Support for various flavours of flexbox are separated out into * separate sections aside from a few IE11 specific 'tweener' rules. * This was done to avoid duplication of selectors (small performance * benefit). These rules can be removed as and when support for their * respective UAs are deprecated. * - Refer to the CSS framework handbook for implementation details of * how this Grid system hooks into varying environmental hooks. * - There are no `order` grid-cell modifiers as there have been no * use cases for it so thus far. * - Clearfix hack from Bootstrap * - Spacings on scrollviews should be specified directly on the * element itself, rather than the parent. This keeps the * scrollbars flush with the sides. * - Solution differs to old mobile app which uses three nested divs * (TBC - there is a good reason it does this) * * ------------------------------------------------------------------- * EXAMPLES: * *
*
*
*
* *
*
*
*
* * ------------------------------------------------------------------- * CONTENTS: * * =Grids * =Grid Cells * =Sizing Utilities * =Alignment Utilities * =IE11 Support (additional rules) * */ /* ==================================================================== =Clearfix ================================================================= */ /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; } /* ==================================================================== =Grids (Flex Containers) ================================================================= */ /** * Must only contain `Grid` or `Grid-cell` components as children. * * 1. Constraint child elements to 100% * 2. Ensure consistent default text alignment (RTL lang friendly) * 3. By default vertically expand a grid to the height of its * container if only child. * 4. Defer to flexbox auto-sizing if `grid` is nested or 'shrink-wrapped' * sizing. */ .grid { position: relative; display: flex; flex: 1 0 auto; padding: 0; margin: 0; max-width: 100%; text-align: left; text-align: start; } .grid:only-child { height: 100%; } .grid:not(.grid--y) > .grid, .grid.g--fit { height: auto; } /** * Orient grid vertically on Y-axis. * 1. Trigger flexbox horizontal expansion behaviour * 2. Trigger flexbox vertical expansion behaviour (respect siblings and fit grids) */ .grid--y { flex-direction: column; } .grid > .grid--y { width: 0; } .grid--y > .grid:not(:only-child):not(.g--fit) { height: 0; } /** * Allow wrapping of grid children to new lines. */ .grid--wrap { flex-wrap: wrap; } .grid--wrap > [class*='grid']:not([class*='of']) { flex-basis: 0; max-width: 0; } /** * Pack grid units to the start of the grid container. * - BROWSER DEFAULT (convenience class). */ .grid--main-start { justify-content: flex-start; } /** * Horizontally center all grid cells. */ .grid--main-center { justify-content: center; } /** * Pack grid units to the far end of the grid container. */ .grid--main-end { justify-content: flex-end; } /** * Distribute grid cells evenly within container. */ .grid--main-space, .grid--space { justify-content: space-between; } /** * Align grid units to the start of the grid container's cross axis. */ .grid--cross-start { align-items: flex-start; } /** * Align grid units to the center of the grid container's cross axis. */ .grid--cross-center { align-items: center; } /** * Align grid units to the end of the grid container's cross axis. */ .grid--cross-end { align-items: flex-end; } /** * Align grid units to the baseline of the grid container's cross axis. */ .grid--cross-baseline { align-items: baseline; } /** * Align grid-wrap lines to the start of the grid container's cross axis. */ .grid--lines-start { align-content: flex-start; align-items: flex-start; } /** * Align grid-wrap lines to the end of the grid container's cross axis. */ .grid--lines-end { align-content: flex-end; align-items: flex-end; } /** * Align grid-wrap lines to the center of the grid container's cross axis. */ .grid--lines-center { align-content: center; align-items: center; } /** * Orient grid vertically to align flex items in rows. * - BROWSER DEFAULT (convenience class). */ .grid--x { flex-direction: row; } /** * Scroll the contents of a cell when its height is constrained * - So far only support for vertical layouts. * - Note expected HTML structure, content belongs in *nested* * `grid-cell`. See Grid Scollview for examples. * - Nesting required for IE11, otherwise the height: 0 could * be omitted, and the other styles applied to a standard * `grid-cell` element. * - Expected that a height constraint is placed on the immediate * containing `.grid` element. In the case of a Component this * equates to a max-height of 100%; * * 1. Ensure the view expands to fit its container - a little erratic * 2. Legacy safari rule to trigger correct overflow, primarily to * support iOS6. Will render inert scrollbars in Safari < 7 on OSX, * but minority market share and mitigated by scrollbar styling. * 3. Trigger inertial scrolling. * 4. Set default touch action to panning scrollview vertically. * 5. Offer a way to opt-out of inertial scrolling. * There is a known bug with scrolling on iPads under Safari when child * content has been added or removed. The adopted workaround until a fix is * available is to turn off inertial scrolling, using grid--staticscroll * #908292 */ /** * Warning: Please use `Scrollable` component instead which internally uses * `grid--scroll` for vertical scroll and `grid--scrollX` for horizontal scroll. */ .grid--scroll > [class*='grid'] { width: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; flex: 0 1 auto; } .grid--scrollX > .reactgrid-rows { height: 100%; } .grid--scrollX-hidden ::-webkit-scrollbar { height: 0; } .grid--scrollX > [class*='grid'] { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: auto; } .grid--scrollX.grid--scroll > [class*='grid'] { overflow: auto; touch-action: pan-x pan-y; } .grid--staticscroll > [class*='grid'] { -webkit-overflow-scrolling: auto; } /* * 1. Allow to cut off content in grid for auto sizing case */ .grid--clip { overflow: hidden; } /* ==================================================================== =Grid Cells (Flex Items) ================================================================= */ /** * Cells expand to fill their container by default. Rely on combining * `grid-cell` with a dimension utility or component that extends * `grid`. * * 1. Ensure children (UI components and content blocks) observe * flex-child parent widths and wrap rather than overflowing. * Ref: http://oli.jp/2011/css3-flexbox/ * DO NOT REMOVE! (Disable in struts test to view default behaviour) * 2. Force certain inline elements to be treated as block-level * elements. Enables the use of and elements as grid-cells * in Safari & IE, e.g. in the "flip switch" form control. */ .grid-cell { position: relative; flex: 1 0 auto; width: 0; margin: 0; padding: 0; } span.grid-cell, b.grid-cell { display: block; } /** * Tweak default cell behaviours for vertical layouts * Leave `fit` cells to their own behaviours. * * 1. Expands width of row cells to fill flex container in Chrome. * 2. Ensures cells don't overflow container in IE11 when combining * flex-basis and padding (border-box not respected). * 3. Expands width of row cells to fill flex container in IE10+. Applied * only to vertical layouts as blows-up horizontal variants. */ .grid--y > .grid-cell:not(.g--fit), .grid--y > .grid:not(.g--fit) { width: auto; max-width: 100%; } .grid--y > .grid.grid--y:not(.g--fit) { width: 100%; } /* ==================================================================== =Sizing Utilities ================================================================= */ /** * Expand orphan grids to fill their containers * Leave `fit` and `sized` cells to their own behaviours. * * 1. Ensures only childs expand to fill flex container by default. * 2. Required by IE11 */ .grid:only-child:not(.g--fit):not([class*='of']), .grid-cell:only-child:not(.g--fit):not([class*='of']) { max-width: 100%; width: 100%; } /** * Make cell shrink-wrap its contents. * * 1. Override default cell expanding behaviour. * 2. Collapse cell to shrink-wrap contents. Would be more correct * to employ sizing values here but no support in IE11/EdgeHTML: * - http://dev.w3.org/csswg/css-sizing/ * - http://caniuse.com/#feat=intrinsic-width */ .g--fit { flex: 0 0 auto; width: auto; } /** * Make cell shrink-wrap its contents. */ .g--shrink { flex-shrink: 1; flex-grow: 0; } /** * Make a cell shrink without limit, such that its content may be truncated. * * The content should deal with truncation appropriately, e.g. using ellipsis. * * 1. Collapse cell to shrink-wrap contents. Would be more correct * to employ sizing values here but no support in IE11/EdgeHTML: * - http://dev.w3.org/csswg/css-sizing/ * - http://caniuse.com/#feat=intrinsic-width * 2. Ignore minimum content size (e.g. fixed-size element, text content of nested elements). * Use 0% because IE11 ignores 0. */ .g--truncate { flex-shrink: 1; flex-grow: 0; width: auto; min-width: 0%; } /** * Make cell expand to fill available space. * * 1. Convoluted selector to handle case where we need a `grid-cell` to * expand (as default) to provide a constraint for a child Block * (e.g. a form control). The default for Flex children in * distributed layouts is to shrink-wrap their contents. */ .grid[class*='grid--main'] > .g--fill, .g--fill { flex-grow: 1; } /** * Make cell display as a flex container. */ .g--flex { display: flex; } /** * Cells aligned on the main axis must always be shrink-wrapped. */ .grid--main-start > .grid, .grid--main-center > .grid, .grid--main-end > .grid, .grid--space > .grid, .grid--grail > .grid, .grid--main-start > .grid-cell, .grid--main-center > .grid-cell, .grid--main-end > .grid-cell, .grid--space > .grid-cell, .grid--grail > .grid-cell { width: auto !important; } .grid--main-start > .grid:not(.g--shrink), .grid--main-center > .grid:not(.g--shrink), .grid--main-end > .grid:not(.g--shrink), .grid--space > .grid:not(.g--shrink), .grid--grail > .grid:not(.g--shrink), .grid--main-start > .grid-cell:not(.g--shrink), .grid--main-center > .grid-cell:not(.g--shrink), .grid--main-end > .grid-cell:not(.g--shrink), .grid--space > .grid-cell:not(.g--shrink), .grid--grail > .grid-cell:not(.g--shrink) { flex: 0 0 auto; width: auto; } /** * Proportionally size cell relative to its container with `flex-basis`. * - Allows for more control over cell widths than `flex-grow` integers. * - Can be combined with Grid modifiers to distribute cells within a * flex container. * - Can be as fine-grained as desired, extend as necessary in grid-ext.less * * 1. Override default cell expanding behaviour * 2. This is due to IE11 not respecting box-sizing: border-box in flexbox elements * When we drop IE11 support, this can be replaced by a default flex-grow: 0 */ .grid--space > [class*='of'], .grid--main-start > [class*='of'], .grid--main-end > [class*='of'], .grid--main-center > [class*='of'], .grid--grail > [class*='of'], .grid > [class*='of']:only-child, .grid > [class*='of']:only-child { flex-grow: 0; } .g--1of1 { flex-basis: 100%; max-width: 100%; } .g--1of2, .g--2of4 { flex-basis: 50%; max-width: 50%; } .g--1of3 { flex-basis: 33.33%; max-width: 33.33%; } .g--2of3 { flex-basis: 66.67%; max-width: 66.67%; } .g--1of4 { flex-basis: 25%; max-width: 25%; } .g--3of4 { flex-basis: 75%; max-width: 75%; } /* ==================================================================== =Alignment Utilities ================================================================= */ /* * Applied to Flex Items * - Can mix and match inside same container with latest flexbox support. */ .g--cross-start { align-self: flex-start; } .g--cross-center { align-self: center; } .g--cross-end { align-self: flex-end; } /* ==================================================================== =IE11-flex-box Support (additional rules) ================================================================= */ .g--1of2:only-child, .g--2of4:only-child { max-width: 50%; } .g--1of3:only-child { max-width: 33.33%; } .g--2of3:only-child { max-width: 66.66%; } .g--1of4:only-child { max-width: 25%; } .g--3of4:only-child { max-width: 75%; } .grid--y > .g--1of2, .grid--y > .g--2of4 { max-height: 50%; } .grid--y > .g--1of3 { max-height: 33.33%; } .grid--y > .g--2of3 { max-height: 66.66%; } .grid--y > .g--1of4 { max-height: 25%; } .grid--y > .g--3of4 { max-height: 75%; } /** * GRID SYSTEM EXTENSIONS * ==================================================================== * * Extensions to the core Grid System. * */ /* ==================================================================== =Null Cell ================================================================= */ /** * Ignore null cells inserted for legacy IE's benefit. * See struts test cases for examples. */ .g--null { display: none; } /** * Explicitly set a grid-cell's height to avoid webkit bug * https://bugs.webkit.org/show_bug.cgi?id=26559 */ .g--explicit-height { height: inherit !important; } /* * GRID STRUTS * ===================================================================== * * Useful grid cell arrangement encapsulated in a single class. Helps * lower the number of classes within the markup, especially in * repeating blocks, and enforce consistent layout behaviours. * * All struts can be used in both axes (ordinarily x), and with reverse * modifier (though no fallback for this). Strut arrangements are * doubled up so developers may select the one which best reflects the * design they are implementing, and which will be clear to other * developers. * * ------------------------------------------------------------------- * DEV NOTES: * * - `Struts` chosen to represent concept of structural support within * a screen `layout` (that term being more holisitc in nature). * * ------------------------------------------------------------------- * EXAMPLES: * *
*
*
*
* * ------------------------------------------------------------------- * CONTENT: * * =Media Block * =Spaced Series * =Sectioned Series * =Oversized */ /* ==================================================================== =Media Block ================================================================= */ /* FIT/FILL - aka the OOCSS media object * - Splits Grid into two units, one which wraps its content. * - Expanding cell by default constricts the content, * wrapping/clipping/truncating it if such behaviour is applied. * * * FIT/FILL/FIT - Same as above but with a first & last shrink-wraps * - If more than three cells, other cells are `fill` by default. */ .grid--fit-fill > [class*='grid']:first-child, .grid--fill-fit > [class*='grid']:last-child, .grid--fit-fill-fit > [class*='grid']:first-child, .grid--fit-fill-fit > [class*='grid']:nth-child(3), .grid--fit-all > [class*='grid'] { flex: 0 0 auto; width: auto; } .grid--y.grid--fit-fill > [class*='grid']:first-child:not(.g--fill), .grid--y.grid--fill-fit > [class*='grid']:last-child:not(.g--fill), .grid--y.grid--fit-fill-fit > [class*='grid']:first-child:not(.g--fill), .grid--y.grid--fit-fill-fit > [class*='grid']:nth-child(3):not(.g--fill), .grid--y.grid--fit-all > [class*='grid']:not(.g--fill) { height: auto; } /** * Since fill is the default behaviour we only need to apply it * when an override is required. */ .grid--fit-all > .g--fill, .grid--fit-fill > [class*='grid']:only-child, .grid--fill-fit > [class*='grid']:only-child { flex-grow: 1; } /* ==================================================================== =Spaced Series ================================================================= */ /** * When evenly spaced elements are required */ .grid--series:not(.grid--y) > [class*='grid'] { margin-right: 8px; } .grid--series:not(.grid--y) > [class*='grid']:last-child { margin: 0; } .grid--series.grid--y > [class*='grid'] { margin-bottom: 8px; } .grid--series.grid--y > [class*='grid']:last-child { margin: 0; } .grid--serieslg:not(.grid--y) > [class*='grid'] { margin-right: 16px; } .grid--serieslg:not(.grid--y) > [class*='grid']:last-child { margin: 0; } .grid--serieslg.grid--y > [class*='grid'] { margin-bottom: 16px; } .grid--serieslg.grid--y > [class*='grid']:last-child { margin: 0; } .grid--seriessm:not(.grid--y) > [class*='grid'] { margin-right: 4px; } .grid--seriessm:not(.grid--y) > [class*='grid']:last-child { margin: 0; } .grid--seriessm.grid--y > [class*='grid'] { margin-bottom: 4px; } .grid--seriessm.grid--y > [class*='grid']:last-child { margin: 0; } .grid--seriesxs:not(.grid--y) > [class*='grid'] { margin-right: 1px; } .grid--seriesxs:not(.grid--y) > [class*='grid']:last-child { margin: 0; } .grid--seriesxs.grid--y > [class*='grid'] { margin-bottom: 1px; } .grid--seriesxs.grid--y > [class*='grid']:last-child { margin: 0; } .grid--seriesxlg:not(.grid--y) > [class*='grid'] { margin-right: 24px; } .grid--seriesxlg:not(.grid--y) > [class*='grid']:last-child { margin: 0; } .grid--seriesxlg.grid--y > [class*='grid'] { margin-bottom: 24px; } .grid--seriesxlg.grid--y > [class*='grid']:last-child { margin: 0; } /* ==================================================================== =Sectioned Series ================================================================= */ /** * When evenly spaced and bordered elements are required */ .grid--sections:not(.grid--y) > [class*='grid'] { margin-right: 8px; padding-right: 7px; border-right: 1px solid var(--app-hairline); } .grid--sections:not(.grid--y) > [class*='grid']:last-child { margin: 0; padding: 0; border: none; } .grid--sections.grid--y > [class*='grid'] { margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--app-hairline); } .grid--sections.grid--y > [class*='grid']:last-child { margin: 0; padding: 0; border: none; } .grid--sectionslg:not(.grid--y) > [class*='grid'] { margin-right: 16px; padding-right: 15px; border-right: 1px solid var(--app-hairline); } .grid--sectionslg:not(.grid--y) > [class*='grid']:last-child { margin: 0; padding: 0; border: none; } .grid--sectionslg.grid--y > [class*='grid'] { margin-bottom: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--app-hairline); } .grid--sectionslg.grid--y > [class*='grid']:last-child { margin: 0; padding: 0; border: none; } /* ==================================================================== =Well Series ================================================================= */ /** * Evenly spaced and bordered elements (with consistent paddings) */ .grid--wells:not(.grid--y) > [class*='grid'] { padding-left: 8px; padding-right: 7px; border-right: 1px solid var(--app-hairline); } .well--deep .grid--wells:not(.grid--y) > [class*='grid'], .well--deep.grid--wells:not(.grid--y) > [class*='grid'] { border-color: var(--app-sub-deep-border); } .grid--wells:not(.grid--y) > [class*='grid']:last-child { border: none; } /* ==================================================================== =Oversized ================================================================= */ /** * Useful in instances where two cells both the same size of the * containing `grid` are required, with one or both cells being * translated in/out of view. See phone container for example. * * 1. Various overrides of other base grid rules to ensure * correct expansion behaviours. */ .grid--double { max-width: 200%; width: 200%; } .grid--double > .grid--double { max-width: 100%; width: 100%; } .grid--double > [class*='grid']:not(.grid--double) { flex-basis: 50%; max-width: 50%; } .grid--y > .grid--double:not(.g--fit):not([class*='of']), .grid--double:only-child:not(.g--fit):not([class*='of']) { max-width: 200%; width: 200%; } /* ==================================================================== =Holy Grail (Vertical/Horizontal Center) ================================================================= */ .grid--grail { justify-content: center; align-items: center; } .grid--grail > .grid, .grid--grail > .grid-cell { width: auto !important; } .grid--grail > .grid:not(.g--shrink), .grid--grail > .grid-cell:not(.g--shrink) { flex: 0 0 auto; width: auto; } /** * ICONS * ===================================================================== */ /** * 1. Coloring of svg icons is done on as fill and stroke */ .icon { display: inline-block; fill: currentColor; stroke: currentColor; overflow: visible; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /** * 1. Set min width/height to preserve the values when the Icon is used in * a flex container (eg, in a Dropdown). * 2. Height and width of icon is set slightly larger than the font size. * This allows a more visually pleasing placement when combined with the * vertical alignment of text-bottom. Since the icon now grows from the * bottom of the text, it essentially pushes the icon slightly upwards. * This is especially good for icons that are placed before lines starting * with capital letters, without skewing the icon or making it bad for * icons at the end of text. */ } .icon--block { display: block; } .icon--action { cursor: pointer; transition: fill 200ms; transform: translateZ(0); } .icon__size--tiny { height: 1rem; width: 1rem; min-height: 1rem; min-width: 1rem; } .icon__size--small { height: 1.25rem; width: 1.25rem; min-height: 1.25rem; min-width: 1.25rem; } .icon__size--medium { height: 1.75rem; width: 1.75rem; min-height: 1.75rem; min-width: 1.75rem; } .icon__size--large { height: 2.5rem; width: 2.5rem; min-height: 2.5rem; min-width: 2.5rem; } .icon__size--huge { height: 4rem; width: 4rem; min-height: 4rem; min-width: 4rem; } .icon__size--inherit { height: 1.1em; width: 1.1em; min-height: 1.1em; min-width: 1.1em; vertical-align: text-bottom; } .icon--color { /** * 1. Text color should be the same in light & dark theme regardless of Aurora. */ } .icon--color-text-primary { color: var(--text-color-default); } .icon--color-text-secondary { color: var(--text-color-secondary); } .icon--color-text-tertiary { color: var(--text-color-tertiary); } .icon--color-text-highlight { color: var(--text-color-highlight); } .icon--color-text-inverted { color: var(--text-color-inverted); } .icon--color-brand-primary { color: var(--color-primary); } .icon--color-brand-secondary { color: var(--color-primary); } .icon--color-brand-tertiary { color: var(--color-primary); } .icon--color-brand-error { color: var(--color-negative); } .inverse-pnl-color .icon--color-brand-error { color: var(--color-positive); } .icon--color-brand-warning { color: var(--color-error); } .icon--color-brand-success { color: var(--color-positive); } .inverse-pnl-color .icon--color-brand-success { color: var(--color-negative); } .icon--color-brand-positive { color: var(--color-positive); } .icon--color-brand-negative { color: var(--color-negative); } .icon--color-brand-tipranks { color: #f99d02; } .icon--color-insight-gold { color: var(--gold); } .icon--color-light { color: var(--persistent-white); } .icon--aurora { height: 1.1em; width: 1.1em; min-height: 1.1em; min-width: 1.1em; vertical-align: text-bottom; } .icon--aurora.icon--action { transition: filter 200ms; } .icon--aurora.icon--color-text-primary { color: var(--aurora-text-color-primary); } .icon--aurora.icon--color-text-secondary { color: var(--aurora-text-color-secondary); } .icon--aurora.icon--color-text-tertiary { color: var(--aurora-text-color-tertiary); } .icon--aurora.icon--color-text-highlight { color: var(--aurora-text-color-highlight); } .icon--aurora.icon--color-text-inverted { color: var(--aurora-text-color-inverted); } .icon--aurora.icon--color-brand-primary { color: var(--aurora-color-brand-primary); } .icon--aurora.icon--color-brand-secondary { color: var(--aurora-color-brand-secondary); } .icon--aurora.icon--color-brand-tertiary { color: var(--aurora-color-brand-tertiary); } .icon--aurora.icon--color-brand-error { color: var(--aurora-color-brand-error); } .inverse-pnl-color .icon--aurora.icon--color-brand-error { color: var(--aurora-color-brand-success); } .icon--aurora.icon--color-brand-warning { color: var(--aurora-color-brand-warning); } .icon--aurora.icon--color-brand-success { color: var(--aurora-color-brand-success); } .inverse-pnl-color .icon--aurora.icon--color-brand-success { color: var(--aurora-color-brand-error); } .icon--aurora.icon--color-brand-positive { color: var(--aurora-color-brand-positive); } .icon--aurora.icon--color-brand-negative { color: var(--aurora-color-brand-negative); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .icon:not(.icon--aurora).icon--action:hover { color: var(--text-color-default); } .icon--aurora.icon--action:hover { filter: var(--aurora-icon-hover-brightness); } } /****************************** * AUTO GENERATED FILE * * DO NOT EDIT * * * * Generated by grunt-webfont * ******************************/ @font-face { font-family: 'app-icons'; src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'); font-weight: normal; font-style: normal; } /********************************** * AUTO GENERATED FILE * * DO NOT EDIT * * * * Generated by grunt-image-embed * *********************************/ /** * NEWS ICONS * ===================================================================== * DEV NOTES: * - Icons rendered using SVG sprite * - Optimised for 16x16 pixel display (or multiples thereof) * - Creation procedure in Framework handbook (run "grunt image-embed:icons-news" to generate * source\less\common\base\icons\icons-news.less file, which is included into the bundle. * - Icons injected into DOM through pseudo-elements/classes. * - PNG for low resolution screens, SVG for retina. */ /* ==================================================================== =News Icon Sprite ================================================================= */ /** * 1. Required to provide local positioning context for pseudo-elements */ .legacy-news-icon { position: relative; color: var(--text-color-secondary); /** * 1. Required to enable CSS transforms on glyphs * 2. IE10 doesn't like line-heights on pseudo-elements alone * 3. Suppress sub-pixel antialiasing in webkit/firefox * 4. Text selection is off by default, so suppress caret cursor */ } .legacy-news-icon:before { display: inline-block; position: relative; font-family: 'app-icons'; color: inherit; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: default; vertical-align: text-bottom; content: ''; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NEU4OUMxQzY5RjUxMUU2OEM0Q0RBQTEzRjQ4OTU0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MTA4NTRFQTYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MTA4NTRFOTYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MTA4NTRFNTYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MTA4NTRFNjYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZY37IAAABWSURBVHjaYvz//z8DJYCJgULAAmNUVFSQ5JSOjg5GsAGkasTqApBpMINgJuMC6BZSLwzIDQsWXIFDrBdo6wJsATswLqA4FvAZxESOs5EB44DnRoAAAwDtFzL+QcEHhgAAAABJRU5ErkJggg=='); /* default "newspaper" icon */ background-color: transparent; background-repeat: no-repeat; background-position: 0 0; background-size: 16px 16px; width: 16px; height: 16px; } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .legacy-news-icon:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjcyNiAtNjA0LjEgMjA0OCAyMDQ4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDcyNiAtNjA0LjEgMjA0OCAyMDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0yNjQ2LTM0OC4xSDExMTB2MTI4SDg1NHYxNDA4aDE3OTJWLTM0OC4xeiBNMTg3OCw2NzUuOWgtNTEydi0xMjhoNTEyVjY3NS45eiBNMjM5MCw0MTkuOUgxMzY2di0xMjhoMTAyNA0KCQlWNDE5Ljl6IE0xMzY2LDgwMy45aDUxMnYxMjhoLTUxMlY4MDMuOXogTTIwMDYsOTMxLjl2LTM4NGgzODR2Mzg0SDIwMDZ6IE0yMzkwLDE2My45SDEzNjZ2LTI1NmgxMDI0VjE2My45eiBNOTgyLTkyLjFoMTI4djExNTINCgkJSDk4MlYtOTIuMXoiLz4NCjwvZz4NCjwvc3ZnPg0K'); background-size: 16px 16px; } } /* ==================================================================== =News Icon Mappings (see provider ids in $/TP/Main/FO/News.Service/Source/Iit.News.Feed.AcquireMedia/Sources.xml) ================================================================= */ .np1156:before { /* Johannesburg Stock Exchange (SENS) */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNTdjMTRjNS04ZjYxLTRiMWYtOTc1Yi00ZWFiZDU5NzBiNDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODY0QjRCNTA2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODY0QjRCNEY2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YTU3YzE0YzUtOGY2MS00YjFmLTk3NWItNGVhYmQ1OTcwYjQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmE1N2MxNGM1LThmNjEtNGIxZi05NzViLTRlYWJkNTk3MGI0MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PunlMZgAAAFvSURBVHjaYvr//z8DJZiJgUIANoBxlsl/3vl2/6++uP6DYfLkPwzMzP8ZGBkJY5gBQix/fn/5/Y1Bd1Mc+zQn8V9/zp39zSAgQLwL9vBe/mvF8+U70FcM2Ue7OMNeLmX4ce/2bwZ9/f+EDGAEBwQT4/+ZVQzf75lKM3a8lOAASajwyf4/5TPnt+C8pX8Ynj1jRNPHCcTfGTo6uMAGMEL9E+rC8Du2lI8h6KEKy5//jIzcLJwMVYaJ3ziY2dFdwg3EX4v0onlQDAABH1uGv+VNPIy2t9QJxtD/tDOMLMgCMBc43lYBixNyAYgBVsgI9CEsDPweIMLgqM+C3yvn/2R4+vQ3E9YI0IMG4rlVzN9z/6j+P/aFBxQ4DIEKjr9nmTcxuDo8YL5w4RtOr/z/bwzxgusXXeZ3f1hYGRkYGSZalXx3ZfNlVFO8yfH+/V/i0gFIMw8rF8OF4OU/+M+5MGhrXidKMzwdUJwXBtQAgAADAOGFymxhEFTiAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1156:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgwIiB3aWR0aD0iNjQwIiB2ZXJzaW9uPSIxIj4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iYSI+CiAgICAgIDxwYXRoIGZpbGwtb3BhY2l0eT0iLjY3IiBkPSJNLTcxLjg3My0uMDEyaDY4Mi42OHY1MTIuMDFoLTY4Mi42OHoiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGNsaXAtcGF0aD0idXJsKCNhKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjcuMzc5IC4wMTEpIHNjYWxlKC45Mzc0OCkiPgogICAgPGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjFwdCI+CiAgICAgIDxwYXRoIGQ9Ik0tNzEuODc4IDQwNy44MzdWMTA0LjQyOGwyMjUuODMyIDE1MS42MjctMjI1LjgzMiAxNTEuNzkzeiIvPgogICAgICA8cGF0aCBkPSJNODIuMjE3IDUxMi4xMjFsMjUzLjUzOC0xNzAuNjQ0aDM2MC4zNzJ2MTcwLjY0NEg4Mi4yMTd6IiBmaWxsPSIjMDBjIi8+CiAgICAgIDxwYXRoIGQ9Ik02NS45MTcuMDYybDYzMC4xOS4wMTN2MTcwLjY3MkgzMzUuNzM1UzY5LjI5NS0xLjYyNiA2NS45MTcuMDYyeiIgZmlsbD0icmVkIi8+CiAgICAgIDxwYXRoIGQ9Ik0tNzEuODc4IDY0LjA3NXY0MC4zMjlMMTUzLjk1NCAyNTYuMDMtNzEuODc4IDQwNy44MjN2NDAuMzI3bDI4NC40NC0xOTIuMTItMjg0LjQ0LTE5MS45NTV6IiBmaWxsPSIjZmMwIi8+CiAgICAgIDxwYXRoIGQ9Ik0tNzEuODc4IDY0LjA3NVYuMDYyaDk0Ljg5MWwzMDEuMzEzIDIwMy44OGgzNzEuNzc4djEwNC4yNjFIMzI0LjMyNkwyMy4wMTMgNTEyLjA1M2gtOTQuODlWNDQ4LjE1bDI4NC40MzktMTkyLjEyLTI4NC40NC0xOTEuOTU1eiIgZmlsbD0iIzA5MyIvPgogICAgICA8cGF0aCBkPSJNMjMuMDEzLjA2Mmg1OS4xOTRsMjUzLjUzOCAxNzAuNjczaDM2MC4zNzJ2MzMuMjA3SDMyNC4zMzlMMjMuMDI1LjA2MnpNMjMuMDEzIDUxMi4xMjFoNTkuMTk0bDI1My41MzgtMTcwLjY0NGgzNjAuMzcydi0zMy4yMDZIMzI0LjMzOUwyMy4wMjUgNTEyLjEyeiIgZmlsbD0iI2ZmZiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=='); background-size: 16px 16px; } } .np1603:before { /* Kauppalehden uutiset */ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgWw0KCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPg0KCTwhRU5USVRZIG5zX2FpICJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlSWxsdXN0cmF0b3IvMTAuMC8iPg0KCTwhRU5USVRZIG5zX2dyYXBocyAiaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfaW1yZXAgImh0dHA6Ly9ucy5hZG9iZS5jb20vSW1hZ2VSZXBsYWNlbWVudC8xLjAvIj4NCgk8IUVOVElUWSBuc19zZncgImh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj4NCgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4NCgk8IUVOVElUWSBuc19hZG9iZV94cGF0aCAiaHR0cDovL25zLmFkb2JlLmNvbS9YUGF0aC8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOng9IiZuc19leHRlbmQ7IiB4bWxuczppPSImbnNfYWk7IiB4bWxuczpncmFwaD0iJm5zX2dyYXBoczsiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTYwIDk2MCINCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTYwIDk2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzE5M0M4Nzt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCgk8Zm9yZWlnbk9iamVjdCByZXF1aXJlZEV4dGVuc2lvbnM9IiZuc19haTsiIHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPg0KCQk8aTpwZ2ZSZWYgIHhsaW5rOmhyZWY9IiNhZG9iZV9pbGx1c3RyYXRvcl9wZ2YiPg0KCQk8L2k6cGdmUmVmPg0KCTwvZm9yZWlnbk9iamVjdD4NCgk8ZyBpOmV4dHJhbmVvdXM9InNlbGYiPg0KCQk8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iOTYwIiBoZWlnaHQ9Ijk2MCIvPg0KCQk8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjM0MC4xMiwyNTEuNTQgMzQwLjE3LDMzNi4zIDM2Mi41LDMzNi4yOSAyODkuMzMsNDcxLjUxIDI4OS4yNSwzMjQuODggMjg5LjIxLDI1MS41NyAxNDQsMjUxLjY1IA0KCQkJMTQ0LjA1LDMzNi40MSAxNzUuMzgsMzM2LjM5IDE3NS41NSw2MjMuODkgMTQ0LjIxLDYyMy45MSAxNDQuMjYsNzA4LjY2IDI4OS40Niw3MDguNTggMjg5LjQyLDYzNS4yNyAyODkuMzUsNTEzLjk5IA0KCQkJMzQ3LjU3LDYzMC40MyAzNDcuNjEsNzA4LjU0IDQ5Ni41NCw3MDguNDYgNDk2LjUsNjIzLjM2IDQ3Mi4xNyw2MjMuNzIgMzgzLjgsNDU4LjY5IDQ2Ni4xNiwzMzYuMjMgNDk2LjMzLDMzNi4yMSA0OTYuMjksMjUxLjQ1IA0KCQkJCQkiLz4NCgkJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSI1MTIuNDEsMjUxLjQ0IDUxMi40NiwzMzYuMiA1NDMuNzksMzM2LjE5IDU0My45NSw2MjMuNjggNTEyLjYyLDYyMy43IDUxMi42Nyw3MDguNDUgNjU3Ljg3LDcwOC4zNyANCgkJCTY1Ny44Nyw3MDguMzQgODQwLDcwOC4yNCA4MzkuOSw1MzYuOCA3NzcuMjEsNTM2Ljg0IDc0Ni43Myw2MjQuMTUgNjg4LjE2LDYyNC4xOCA2NTcuODMsNjI0LjIgNjU3LjgyLDYyMy4yNyA2NTcuNjYsMzM2LjQyIA0KCQkJNjg5LjU3LDMzNi40MSA2ODkuNTIsMjUxLjM0IAkJIi8+DQoJPC9nPg0KPC9zdmc+DQo='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1603:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgWw0KCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPg0KCTwhRU5USVRZIG5zX2FpICJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlSWxsdXN0cmF0b3IvMTAuMC8iPg0KCTwhRU5USVRZIG5zX2dyYXBocyAiaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfaW1yZXAgImh0dHA6Ly9ucy5hZG9iZS5jb20vSW1hZ2VSZXBsYWNlbWVudC8xLjAvIj4NCgk8IUVOVElUWSBuc19zZncgImh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj4NCgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4NCgk8IUVOVElUWSBuc19hZG9iZV94cGF0aCAiaHR0cDovL25zLmFkb2JlLmNvbS9YUGF0aC8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOng9IiZuc19leHRlbmQ7IiB4bWxuczppPSImbnNfYWk7IiB4bWxuczpncmFwaD0iJm5zX2dyYXBoczsiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTYwIDk2MCINCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTYwIDk2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzE5M0M4Nzt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCgk8Zm9yZWlnbk9iamVjdCByZXF1aXJlZEV4dGVuc2lvbnM9IiZuc19haTsiIHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPg0KCQk8aTpwZ2ZSZWYgIHhsaW5rOmhyZWY9IiNhZG9iZV9pbGx1c3RyYXRvcl9wZ2YiPg0KCQk8L2k6cGdmUmVmPg0KCTwvZm9yZWlnbk9iamVjdD4NCgk8ZyBpOmV4dHJhbmVvdXM9InNlbGYiPg0KCQk8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iOTYwIiBoZWlnaHQ9Ijk2MCIvPg0KCQk8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjM0MC4xMiwyNTEuNTQgMzQwLjE3LDMzNi4zIDM2Mi41LDMzNi4yOSAyODkuMzMsNDcxLjUxIDI4OS4yNSwzMjQuODggMjg5LjIxLDI1MS41NyAxNDQsMjUxLjY1IA0KCQkJMTQ0LjA1LDMzNi40MSAxNzUuMzgsMzM2LjM5IDE3NS41NSw2MjMuODkgMTQ0LjIxLDYyMy45MSAxNDQuMjYsNzA4LjY2IDI4OS40Niw3MDguNTggMjg5LjQyLDYzNS4yNyAyODkuMzUsNTEzLjk5IA0KCQkJMzQ3LjU3LDYzMC40MyAzNDcuNjEsNzA4LjU0IDQ5Ni41NCw3MDguNDYgNDk2LjUsNjIzLjM2IDQ3Mi4xNyw2MjMuNzIgMzgzLjgsNDU4LjY5IDQ2Ni4xNiwzMzYuMjMgNDk2LjMzLDMzNi4yMSA0OTYuMjksMjUxLjQ1IA0KCQkJCQkiLz4NCgkJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSI1MTIuNDEsMjUxLjQ0IDUxMi40NiwzMzYuMiA1NDMuNzksMzM2LjE5IDU0My45NSw2MjMuNjggNTEyLjYyLDYyMy43IDUxMi42Nyw3MDguNDUgNjU3Ljg3LDcwOC4zNyANCgkJCTY1Ny44Nyw3MDguMzQgODQwLDcwOC4yNCA4MzkuOSw1MzYuOCA3NzcuMjEsNTM2Ljg0IDc0Ni43Myw2MjQuMTUgNjg4LjE2LDYyNC4xOCA2NTcuODMsNjI0LjIgNjU3LjgyLDYyMy4yNyA2NTcuNjYsMzM2LjQyIA0KCQkJNjg5LjU3LDMzNi40MSA2ODkuNTIsMjUxLjM0IAkJIi8+DQoJPC9nPg0KPC9zdmc+DQo='); background-size: 16px 16px; } } .np1615:before, .np1616:before, .np1617:before, .np1618:before, .np1619:before, .np1620:before, .np1621:before, .np1622:before, .np1623:before, .np1624:before, .np1625:before, .np1627:before, .np1626:before, .np1628:before, .np1629:before { /* Dow Jones News */ background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxM2EzZDc7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5uZXdzLWljb24tZGotdXBkYXRlZDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCw0Ni45MVYwTDUxLjY0LjEzbDIuMjEuNTVjMTAuNzEsMi42OCwxOC41Niw5LjUyLDIyLjQsMTkuNTFhMzQuNzYsMzQuNzYsMCwwLDEsMS45Myw4Ljg2bC4xMywyLjA5SDYyLjcxbC0uMTMtMWExNi4zOSwxNi4zOSwwLDAsMC0zLjMyLTguNCwxNi44MiwxNi44MiwwLDAsMC03LjgzLTUuNDhsLTEuNjktLjU4LTM0LS4xMnY2Mi43SDMxLjM0VjkzLjgySDBWNDYuOTFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDMuMTIsODYuMVY3OC4zMmwyLjc5LS4xNEEzMi4wNiwzMi4wNiwwLDAsMCw1MCw3Ny43MywxNy4xLDE3LjEsMCwwLDAsNjAuOSw2OS4xNGMxLjctMy40MywxLjY0LTIuODksMS43My0xNS4yM2wuMDgtMTFINzguMjdsLS4xNiwyMy44N0w3Ny41Nyw2OUEzMS4wOSwzMS4wOSwwLDAsMSw2OSw4NC4zNiwzMS4zNSwzMS4zNSwwLDAsMSw1Ni44Myw5MmEyOS40MiwyOS40MiwwLDAsMS0xMCwxLjc0bC0zLjczLjEyVjg2LjFaIi8+PC9zdmc+'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1615:before, .np1616:before, .np1617:before, .np1618:before, .np1619:before, .np1620:before, .np1621:before, .np1622:before, .np1623:before, .np1624:before, .np1625:before, .np1627:before, .np1626:before, .np1628:before, .np1629:before { background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxM2EzZDc7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5uZXdzLWljb24tZGotdXBkYXRlZDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCw0Ni45MVYwTDUxLjY0LjEzbDIuMjEuNTVjMTAuNzEsMi42OCwxOC41Niw5LjUyLDIyLjQsMTkuNTFhMzQuNzYsMzQuNzYsMCwwLDEsMS45Myw4Ljg2bC4xMywyLjA5SDYyLjcxbC0uMTMtMWExNi4zOSwxNi4zOSwwLDAsMC0zLjMyLTguNCwxNi44MiwxNi44MiwwLDAsMC03LjgzLTUuNDhsLTEuNjktLjU4LTM0LS4xMnY2Mi43SDMxLjM0VjkzLjgySDBWNDYuOTFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDMuMTIsODYuMVY3OC4zMmwyLjc5LS4xNEEzMi4wNiwzMi4wNiwwLDAsMCw1MCw3Ny43MywxNy4xLDE3LjEsMCwwLDAsNjAuOSw2OS4xNGMxLjctMy40MywxLjY0LTIuODksMS43My0xNS4yM2wuMDgtMTFINzguMjdsLS4xNiwyMy44N0w3Ny41Nyw2OUEzMS4wOSwzMS4wOSwwLDAsMSw2OSw4NC4zNiwzMS4zNSwzMS4zNSwwLDAsMSw1Ni44Myw5MmEyOS40MiwyOS40MiwwLDAsMS0xMCwxLjc0bC0zLjczLjEyVjg2LjFaIi8+PC9zdmc+'); background-size: 16px 16px; } } .np1556:before, .np1557:before { /* Trade Views */ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzOCAzOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzggMzg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDE0MDc3O30KCS5zdDF7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3Qye2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qze2ZpbGw6IzAwNjNBRjt9Cgkuc3Q0e2ZpbGw6IzAwOTZEQjt9Cjwvc3R5bGU+CjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIvPgo8ZyBjbGFzcz0ic3QxIj4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMywyNC4zbC0zLjYtOS43SDkuM2MwLjEsMC44LDAuMSwxLjcsMC4xLDIuN3Y3SDguM1YxMy40aDEuOWwzLjQsOWgwLjFsMy40LTloMS45djEwLjloLTEuMnYtNwoJCWMwLTAuOCwwLTEuNywwLjEtMi42aC0wLjFMMTQsMjQuM0gxM3oiLz4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yOC40LDI0LjNsLTEuMy0zLjVoLTQuM2wtMS4zLDMuNWgtMS4zbDQuMi0xMWgxbDQuMiwxMUgyOC40eiBNMjYuNywxOS43bC0xLjItMy40Yy0wLjItMC40LTAuMy0xLTAuNS0xLjYKCQljLTAuMSwwLjUtMC4zLDEtMC41LDEuNmwtMS4zLDMuNEgyNi43eiIvPgo8L2c+CjxnPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTkuNywxMC4xTDUuOSw2LjVjLTMuMSwzLjMtNSw3LjYtNSwxMi42YzAsMS43LDAuMiwzLjEsMC43LDQuNWw1LTEuN2MtMC41LTEtMC41LTEuOS0wLjUtMi45CgkJQzYuMSwxNS41LDcuMywxMi40LDkuNywxMC4xeiIvPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTE4LjMsMUMxMy43LDEuMiw5LjksMi45LDYuOCw1LjVsMy44LDMuOGMyLjEtMS43LDQuOC0yLjksNy42LTIuOVYxeiIvPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTYuNiwyMy4ybC01LDEuN0MzLjksMzIsMTAuNiwzNywxOC43LDM3YzMuMSwwLDYtMC43LDguNi0yLjFsLTIuNi00LjVjLTEuOSwxLTMuOCwxLjQtNiwxLjQKCQlDMTMuMiwzMiw4LjUsMjguMiw2LjYsMjMuMnoiLz4KCTxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik0xOS41LDF2NS4yYzYuNywwLjIsMTIuMiw2LDEyLjIsMTIuOWMwLDQuNS0yLjEsOC4zLTUuNywxMC43bDIuNiw0LjVjNS0zLjEsOC4zLTguOCw4LjMtMTUuMwoJCUMzNi45LDkuMywyOSwxLjUsMTkuNSwxeiIvPgo8L2c+Cjwvc3ZnPgo='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1556:before, .np1557:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzOCAzOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzggMzg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDE0MDc3O30KCS5zdDF7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3Qye2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qze2ZpbGw6IzAwNjNBRjt9Cgkuc3Q0e2ZpbGw6IzAwOTZEQjt9Cjwvc3R5bGU+CjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIvPgo8ZyBjbGFzcz0ic3QxIj4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMywyNC4zbC0zLjYtOS43SDkuM2MwLjEsMC44LDAuMSwxLjcsMC4xLDIuN3Y3SDguM1YxMy40aDEuOWwzLjQsOWgwLjFsMy40LTloMS45djEwLjloLTEuMnYtNwoJCWMwLTAuOCwwLTEuNywwLjEtMi42aC0wLjFMMTQsMjQuM0gxM3oiLz4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yOC40LDI0LjNsLTEuMy0zLjVoLTQuM2wtMS4zLDMuNWgtMS4zbDQuMi0xMWgxbDQuMiwxMUgyOC40eiBNMjYuNywxOS43bC0xLjItMy40Yy0wLjItMC40LTAuMy0xLTAuNS0xLjYKCQljLTAuMSwwLjUtMC4zLDEtMC41LDEuNmwtMS4zLDMuNEgyNi43eiIvPgo8L2c+CjxnPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTkuNywxMC4xTDUuOSw2LjVjLTMuMSwzLjMtNSw3LjYtNSwxMi42YzAsMS43LDAuMiwzLjEsMC43LDQuNWw1LTEuN2MtMC41LTEtMC41LTEuOS0wLjUtMi45CgkJQzYuMSwxNS41LDcuMywxMi40LDkuNywxMC4xeiIvPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTE4LjMsMUMxMy43LDEuMiw5LjksMi45LDYuOCw1LjVsMy44LDMuOGMyLjEtMS43LDQuOC0yLjksNy42LTIuOVYxeiIvPgoJPHBhdGggY2xhc3M9InN0MyIgZD0iTTYuNiwyMy4ybC01LDEuN0MzLjksMzIsMTAuNiwzNywxOC43LDM3YzMuMSwwLDYtMC43LDguNi0yLjFsLTIuNi00LjVjLTEuOSwxLTMuOCwxLjQtNiwxLjQKCQlDMTMuMiwzMiw4LjUsMjguMiw2LjYsMjMuMnoiLz4KCTxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik0xOS41LDF2NS4yYzYuNywwLjIsMTIuMiw2LDEyLjIsMTIuOWMwLDQuNS0yLjEsOC4zLTUuNywxMC43bDIuNiw0LjVjNS0zLjEsOC4zLTguOCw4LjMtMTUuMwoJCUMzNi45LDkuMywyOSwxLjUsMTkuNSwxeiIvPgo8L2c+Cjwvc3ZnPgo='); background-size: 16px 16px; } } .np1420:before, .np1422:before, .np1421:before, .np1423:before, .np1424:before, .np1426:before, .np1427:before, .np1428:before, .np1429:before, .np1430:before, .np1431:before, .np1392:before, .np1393:before, .np1394:before, .np1395:before, .np1396:before, .np1378:before, .np1386:before, .np1385:before { /* NewsEdge Corporate */ /* todo: we do not have an svg for NewsEdge yet, so using existing icon for retina displays. */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDIyQkIyMDBDNDkxMUU2QkM4N0JGQTM0NDdCRDUwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDIyQkIyMTBDNDkxMUU2QkM4N0JGQTM0NDdCRDUwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0MjJCQjFFMEM0OTExRTZCQzg3QkZBMzQ0N0JENTBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0MjJCQjFGMEM0OTExRTZCQzg3QkZBMzQ0N0JENTBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZmF1XQAAAz5JREFUeNqkU91rHFUUP/fOmblzZ2aZ3WbWkJBkN3bzEiRYsUXFNtRayIOofSjUPij0wZdCX+qLIBF8KCIF+1TwoX1oxS8orQ8iFpUEZU2t+SjatEpraozubna33Z3J7nzeGWcCxT+gBy73nsM9v985h/MjSZLAoxjOzs5uPwhJoN9zoTC4H/KD42AVCAwNGJV83jgICSkxxeeShLYk06+b7V61uvg3/Hz3FmAsAsiqIBSAEgJcK4DKCzMUyYlOn8w4viCx6AEkATCGoCB9R5HxClOk14AmHqKsZfRAKYHAt481awszAtzDi9VVuPtHFYikwXBpGsyBnRBFfgYAZk55FUj4lUTwAI5NHQIV9dT3yj9+d/bc9bnz0Gx2od1ues6Wr2btvXS4DLmBqTRWD8IwhkigkkDywpBlHKJE5mCYRQtRujY3/z1c/+Um1Oqbb5fKlXKaO//ErhmYfvF1iLzmwg7mM8vwdURoESpBu+4eRBIKsPK5C59cvvLY6uqtjLBZqUy8v7nZSOdC2nv3H4U4CgBJZFF9x0dJJEwe+pbnA/iSKyMKTPtuKJc+P3s6TX5LlpUFx3EAkVKu6tOGYYH9oAWuFzScXn9ShGJLROJUzwmUXMH7hgLj+364dnW2Xl8fyegNI7+sKHoKIO0KAm/gwf0OZGwQBadp0N/rdttvCiE2+27n33u/d76lXbv1082VS3+lX45kAPk8LgWBDevrtZejKILPLr4HGxstsJ34chjichTz9du362c8N5wcGs4B2q2Ox2KNjI6Mnnxqzyv39ux+/ksjh7CyePULprE/ZSzeyeVlaeVG/0Q6+Z1hsPXxvmesD4+9cWBpamoUyLun5o4Hvji/1mi5E48/+YFlsl7BksZLw3zOMLWipvI1b6sx2bW9WrGYe1ZjYr5cKj6dFvtpeqoYeP684/nPYcKTpeUbYyNj5pq+Qd1azRzUNLkyMsSoafCxifFCl6uyrelawXHiMmPxP4qCgBry39wkILLU1QeL6hEMI9C4DjxdW1WXgak8XWMCwo+hH8cgSVG6+uIMY9K2higFmknpV0VhTYWKCa97n/ieB1RK46lGHqo13r7/9x8aeVQ5/yfAAFsMbJc7Yy8oAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1420:before, .np1422:before, .np1421:before, .np1423:before, .np1424:before, .np1426:before, .np1427:before, .np1428:before, .np1429:before, .np1430:before, .np1431:before, .np1392:before, .np1393:before, .np1394:before, .np1395:before, .np1396:before, .np1378:before, .np1386:before, .np1385:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDIyQkIyMDBDNDkxMUU2QkM4N0JGQTM0NDdCRDUwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDIyQkIyMTBDNDkxMUU2QkM4N0JGQTM0NDdCRDUwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0MjJCQjFFMEM0OTExRTZCQzg3QkZBMzQ0N0JENTBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0MjJCQjFGMEM0OTExRTZCQzg3QkZBMzQ0N0JENTBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZmF1XQAAAz5JREFUeNqkU91rHFUUP/fOmblzZ2aZ3WbWkJBkN3bzEiRYsUXFNtRayIOofSjUPij0wZdCX+qLIBF8KCIF+1TwoX1oxS8orQ8iFpUEZU2t+SjatEpraozubna33Z3J7nzeGWcCxT+gBy73nsM9v985h/MjSZLAoxjOzs5uPwhJoN9zoTC4H/KD42AVCAwNGJV83jgICSkxxeeShLYk06+b7V61uvg3/Hz3FmAsAsiqIBSAEgJcK4DKCzMUyYlOn8w4viCx6AEkATCGoCB9R5HxClOk14AmHqKsZfRAKYHAt481awszAtzDi9VVuPtHFYikwXBpGsyBnRBFfgYAZk55FUj4lUTwAI5NHQIV9dT3yj9+d/bc9bnz0Gx2od1ues6Wr2btvXS4DLmBqTRWD8IwhkigkkDywpBlHKJE5mCYRQtRujY3/z1c/+Um1Oqbb5fKlXKaO//ErhmYfvF1iLzmwg7mM8vwdURoESpBu+4eRBIKsPK5C59cvvLY6uqtjLBZqUy8v7nZSOdC2nv3H4U4CgBJZFF9x0dJJEwe+pbnA/iSKyMKTPtuKJc+P3s6TX5LlpUFx3EAkVKu6tOGYYH9oAWuFzScXn9ShGJLROJUzwmUXMH7hgLj+364dnW2Xl8fyegNI7+sKHoKIO0KAm/gwf0OZGwQBadp0N/rdttvCiE2+27n33u/d76lXbv1082VS3+lX45kAPk8LgWBDevrtZejKILPLr4HGxstsJ34chjichTz9du362c8N5wcGs4B2q2Ox2KNjI6Mnnxqzyv39ux+/ksjh7CyePULprE/ZSzeyeVlaeVG/0Q6+Z1hsPXxvmesD4+9cWBpamoUyLun5o4Hvji/1mi5E48/+YFlsl7BksZLw3zOMLWipvI1b6sx2bW9WrGYe1ZjYr5cKj6dFvtpeqoYeP684/nPYcKTpeUbYyNj5pq+Qd1azRzUNLkyMsSoafCxifFCl6uyrelawXHiMmPxP4qCgBry39wkILLU1QeL6hEMI9C4DjxdW1WXgak8XWMCwo+hH8cgSVG6+uIMY9K2higFmknpV0VhTYWKCa97n/ieB1RK46lGHqo13r7/9x8aeVQ5/yfAAFsMbJc7Yy8oAAAAAElFTkSuQmCC'); background-size: 16px 16px; } } .np1179:before { /* Oslo Børs, Real-time */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2ZDlkMTc5My1kNzUxLTQzYTEtODE0NC02NGIwOTQ4ZDE1MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzBGQTg4REI2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzBGQTg4REE2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGY2MDM1N2YtZTM1YS00Njk2LTk2NjMtNGMxMjE0OGU5MjI5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZkOWQxNzkzLWQ3NTEtNDNhMS04MTQ0LTY0YjA5NDhkMTUxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkO7phsAAACeSURBVHjaYvz//z8DJYCJgULAAiIeyKmiOEPh0W0GHuMuhi9ny0ByODUD1TFS7ALqGMCkqEC+CaBY+I8FcBt1/icCMDCCCGCAkRWXwEBmpNgFsGhkYGJmZvj37Tskel4+hNvyQFweM+C4OBn+/f0Ljm4WeFj8A/qCkRHTnVjEwGqRExIkMP8xMLCxYhqARQysllrpgHHAMxPFBgAEGAAeJKZ8pjEJ7wAAAABJRU5ErkJggg=='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1179:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgwIiB3aWR0aD0iNjQwIiB2ZXJzaW9uPSIxIj4KICA8cGF0aCBmaWxsPSIjZWYyYjJkIiBkPSJNMCAwaDY0MHY0ODBIMHoiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTgwIDBoMTIwdjQ4MEgxODB6Ii8+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMTgwaDY0MHYxMjBIMHoiLz4KICA8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJNMjEwIDBoNjB2NDgwaC02MHoiLz4KICA8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJNMCAyMTBoNjQwdjYwSDB6Ii8+Cjwvc3ZnPgo='); background-size: 16px 16px; } } .np1568:before { /* DZH Financial Research */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAzQBCAEkDPYthAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOUlEQVR42n1SXUiTYRR+znnfvXO1H0lTm0szqAZGSHVXIDQo8CL1Jgiiq6DuMhAqCLuoqMu6qQupkMDowrSbVRcDBRMiGlGJXhSZuqFz7tv8Vltz3/d28W0mET1wDs+Bw+E85zyktV5eK80ms4DG/0DhYG2jX8nltdKTt4nX0yuFoiUZoD8tDGjABoQGACIMnz8kE709/bGoZH71KVUoljQgAKuaNUDAOgDATTSbzDKAeKSrL9LaEfJLhmK4GEpACrgYiqEEFEMRiLSRSkgAB2PRe7G5D98yCgCDNWwNAEywAVtDECzA5aw7PrOkq7h8f+T603d6E/oeTTnZIeMzS2ykkgAev3zTc3vs6pnjeTN19s6zG8MThpm/8uD5x/lFAHNfp1U5ByC7kpQbN5FCBXzehKnzKnTqaNv7me9TC+t1TSEAozfPOT1agzcuWP6RBtDsIy+y+1qCDyfnjhze31pbA+DktcH+wWhl8F8augeGNmtwyu6Bobsjk44GGp2Iv4jPG0YOQHo1vWVHe2vAKuQzBJgFezVr7GqqM4u221f/y0xfOn1CAvjys155G0hrj3ePgL1YZIsDAsBWePwiVbbIJ0zbsmoCAKQTiiEAQDMJECnh2IdZW+wR4Z3bPi/k8oUSAPYEPJUHS+kS5JbkZijBSrJi7XaJyIHgrd69x9oblJIAyY623YIzgklAgxgAqGJBKUVn+/YLnS3xSNfFWLRs2+FgLVXtbfzT053hxniky+HNo2ONfvUbk+kRCOb1AgcAAAAASUVORK5CYII='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1568:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAzQBCAEkDPYthAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOUlEQVR42n1SXUiTYRR+znnfvXO1H0lTm0szqAZGSHVXIDQo8CL1Jgiiq6DuMhAqCLuoqMu6qQupkMDowrSbVRcDBRMiGlGJXhSZuqFz7tv8Vltz3/d28W0mET1wDs+Bw+E85zyktV5eK80ms4DG/0DhYG2jX8nltdKTt4nX0yuFoiUZoD8tDGjABoQGACIMnz8kE709/bGoZH71KVUoljQgAKuaNUDAOgDATTSbzDKAeKSrL9LaEfJLhmK4GEpACrgYiqEEFEMRiLSRSkgAB2PRe7G5D98yCgCDNWwNAEywAVtDECzA5aw7PrOkq7h8f+T603d6E/oeTTnZIeMzS2ykkgAev3zTc3vs6pnjeTN19s6zG8MThpm/8uD5x/lFAHNfp1U5ByC7kpQbN5FCBXzehKnzKnTqaNv7me9TC+t1TSEAozfPOT1agzcuWP6RBtDsIy+y+1qCDyfnjhze31pbA+DktcH+wWhl8F8augeGNmtwyu6Bobsjk44GGp2Iv4jPG0YOQHo1vWVHe2vAKuQzBJgFezVr7GqqM4u221f/y0xfOn1CAvjys155G0hrj3ePgL1YZIsDAsBWePwiVbbIJ0zbsmoCAKQTiiEAQDMJECnh2IdZW+wR4Z3bPi/k8oUSAPYEPJUHS+kS5JbkZijBSrJi7XaJyIHgrd69x9oblJIAyY623YIzgklAgxgAqGJBKUVn+/YLnS3xSNfFWLRs2+FgLVXtbfzT053hxniky+HNo2ONfvUbk+kRCOb1AgcAAAAASUVORK5CYII='); background-size: 16px 16px; } } .np1517:before { /* RANsquawk */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMxRUQ1MkY5NTAxRDExRTc5MzIzQzYzQjk4NzU1NkQzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMxRUQ1MkZBNTAxRDExRTc5MzIzQzYzQjk4NzU1NkQzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzFFRDUyRjc1MDFEMTFFNzkzMjNDNjNCOTg3NTU2RDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzFFRDUyRjg1MDFEMTFFNzkzMjNDNjNCOTg3NTU2RDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5YfJa0AAABWUlEQVR42qTTv0tCURTAcZUKo6AIJCqSaGho9RH9mCIIwrbC0cHXUkN/Qg5B4NTSVi7hoERQtBYNQaS8BikXEWuwoSVoiIJ+PL83jnH98UzwwYfjve+ec8+7XN22bbvaeToqPwzDaLowEI97CSkc3ZpmwrKs33lPK7uQvEJQBfqxw7izrgOHxB5JSmIXUVwiiJOmHZA8QSjAj0OYuMEjQo4dkNhLWMKpTG3gABHM4AILlfWemuRZQhb7+JY255GRcQB3GKsrQPI24Qrj6MMg8hjh1N+JrxjAi76p3sEzPrWxSujW5rrwVfvZfwXYZU9dB2kxw/hNxnm68xHV2ZQwpG9UdQYk3ROmsEbSKHFZzmFRllxjGrmGBaTIB1QXwyhCdbYOVfxBDvXcsYBWKE2YFHOIISyfkvi3gBT5kZu3ijNsqXvAfLalAlLExrFc6Sds6u/d7f6dywIMAOo2Zbr6SrpkAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1517:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ii0yODkgNDEyLjkgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgLTI4OSA0MTIuOSAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzAwQjFCMjt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS0yNzcuNiw0MTMuOGMxLjQsMiwyLjEsNC41LDIuMSw3LjFjMCwyLjYtMC45LDUuMS0yLjMsNy4xbDEuMywwLjljMS42LTIuMiwyLjYtNSwyLjYtNy45DQoJYzAuMS0zLTAuOC01LjctMi40LTguMUwtMjc3LjYsNDEzLjh6IE0tMjgwLDQxNS40YzEsMS42LDEuNiwzLjQsMS42LDUuNGMwLDItMC43LDMuOS0xLjgsNS40bDEuMywwLjljMS4zLTEuOCwyLTMuOSwyLjEtNi4zDQoJYzAtMi4zLTAuNi00LjUtMS44LTYuNEwtMjgwLDQxNS40eiBNLTI4Mi40LDQxN2MwLjcsMS4xLDEuMSwyLjQsMS4xLDMuOGMwLDEuNC0wLjUsMi43LTEuMiwzLjhsMS4zLDAuOWMwLjktMS4zLDEuNS0yLjksMS41LTQuNw0KCWMwLTEuNy0wLjUtMy4zLTEuMy00LjdMLTI4Mi40LDQxN3ogTS0yODMuOSw0MjMuNmMwLjMtMC41LDAuNy0xLjUsMC44LTIuOGMwLjEtMS4yLTAuNS0yLjYtMC42LTIuOWwtNC4xLDIuOUwtMjgzLjksNDIzLjZ6Ii8+DQo8L3N2Zz4NCg=='); background-size: 16px 16px; } } .np1593:before, .np1054:before, .np1053:before, .np334:before { /* Ritzau Finans Premium (including flashes), Real-time */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2tpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDRkE4MzFFNjY5RjUxMUU2QTg1RUQzNTBFQUI1MkVGMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NjRCNEI1NDYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NjRCNEI1MzYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3Yjk0ZDRjMS00ZmVmLTRjMTQtODFhMy02ODA4ZmYxM2VmZmQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0ZBODMxRTY2OUY1MTFFNkE4NUVEMzUwRUFCNTJFRjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5KiR7YAAAAY0lEQVR42mL8//8/AyWAiYFCwAIivpgZYDiD59QFkDhezUA1jBS7gDpe+P/5M1ZJXOJUdQEjNBrJjUtGsBc+aypjyPBev4tVHF0NdQKRkZcXu/twiFM1EKkWCwPnAooNAAgwAFoLHR1VyZbAAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1593:before, .np1054:before, .np1053:before, .np334:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7fQ0KCS5zdDF7ZGlzcGxheTppbmxpbmU7fQ0KCS5zdDJ7ZmlsbDojNDUzRjMyO30NCgkuc3Qze2ZpbGw6I0VDMjIyNzt9DQoJLnN0NHtmaWxsOiNGRkZGRkY7fQ0KCS5zdDV7ZGlzcGxheTpub25lO29wYWNpdHk6MC4zO2ZpbGw6dXJsKCNTVkdJRF8xXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9DQo8L3N0eWxlPg0KPGcgaWQ9IkRLIj4NCgk8Zz4NCgkJPGcgY2xhc3M9InN0MCI+DQoJCQk8ZyBjbGFzcz0ic3QxIj4NCgkJCQk8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNi40LDQ4LjFoNTIuMlYxNS42SDYuNFY0OC4xTDYuNCw0OC4xeiBNNTguNiw0OC4yTDU4LjYsNDguMkw1OC42LDQ4LjJMNTguNiw0OC4yeiBNNi4xLDQ4LjNWMTUuNWg1Mi42DQoJCQkJCXYzMi44djAuMUw2LjEsNDguM0w2LjEsNDguM3oiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8cG9seWdvbiBjbGFzcz0ic3QzIiBwb2ludHM9IjU4LjUsNDguMSA2LjEsNDguMSA2LjEsMTUuNSA1OC41LDE1LjUgCQkiLz4NCgkJPHBvbHlnb24gY2xhc3M9InN0NCIgcG9pbnRzPSI1OC41LDI5LjMgMjguNSwyOS4zIDI4LjUsMTUuNSAyMy4yLDE1LjUgMjMuMiwyOS4zIDYuMSwyOS4zIDYuMSwzNC4yIDIzLjIsMzQuMiAyMy4yLDQ4LjEgDQoJCQkyOC41LDQ4LjEgMjguNSwzNC4yIDU4LjUsMzQuMiAJCSIvPg0KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMyLjMiIHkxPSI0OC4xIiB4Mj0iMzIuMyIgeTI9IjE1LjQyMDgiPg0KCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzAyMDIwMiIvPg0KCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCQk8L2xpbmVhckdyYWRpZW50Pg0KCQk8cG9seWdvbiBjbGFzcz0ic3Q1IiBwb2ludHM9IjU4LjUsNDguMSA2LjEsNDguMSA2LjEsMTUuNSA1OC41LDE1LjUgCQkiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg=='); background-size: 16px 16px; } } .np1073:before, .np1159:before { /* TDN Finans, 25-min delay */ /* todo: we do not have an svg for TDN Finans yet, so using existing icon for retina displays. */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplY2Y0NDk5Ny1lNGQ4LTQ2ZjUtODcxNy0zODFmZGUwNDE4MTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzBGQTg4RDc2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzBGQTg4RDY2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWNmNDQ5OTctZTRkOC00NmY1LTg3MTctMzgxZmRlMDQxODE1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmVjZjQ0OTk3LWU0ZDgtNDZmNS04NzE3LTM4MWZkZTA0MTgxNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoVAw+0AAADhSURBVHjaYvz//z8DJYCJgUIw8AYw6vmXCgBpA3INYIFq3k+JAQyZEa4YEjfuP2Pg5eZk+Pz1OxD/YDhz5S6DlJggg7+TCcP0FbvBavyAbHAY7Dt5FS4IokH8/UAsDdQAonm5OcCWPHv1nsHRXJuhLNkPrBYkDzbgJtA2ZIDOBxlioqMMZ4MAyCCSYgHkFRjomruJIcbXFuwlogxQV5TCcFXtpJVgVzCLa1grAPkJINM0gApBAfb2w2ew5M/ff8CaQfwdRy6CbQQFLMgwkLpLtx6D0wEoGs+TnZCGfmYCCDAAtFVcsIAXk7cAAAAASUVORK5CYII='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1073:before, .np1159:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplY2Y0NDk5Ny1lNGQ4LTQ2ZjUtODcxNy0zODFmZGUwNDE4MTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzBGQTg4RDc2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzBGQTg4RDY2MkQ1MTFFNjg1N0VBN0IyNkJENzRFNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWNmNDQ5OTctZTRkOC00NmY1LTg3MTctMzgxZmRlMDQxODE1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmVjZjQ0OTk3LWU0ZDgtNDZmNS04NzE3LTM4MWZkZTA0MTgxNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoVAw+0AAADhSURBVHjaYvz//z8DJYCJgUIw8AYw6vmXCgBpA3INYIFq3k+JAQyZEa4YEjfuP2Pg5eZk+Pz1OxD/YDhz5S6DlJggg7+TCcP0FbvBavyAbHAY7Dt5FS4IokH8/UAsDdQAonm5OcCWPHv1nsHRXJuhLNkPrBYkDzbgJtA2ZIDOBxlioqMMZ4MAyCCSYgHkFRjomruJIcbXFuwlogxQV5TCcFXtpJVgVzCLa1grAPkJINM0gApBAfb2w2ew5M/ff8CaQfwdRy6CbQQFLMgwkLpLtx6D0wEoGs+TnZCGfmYCCDAAtFVcsIAXk7cAAAAASUVORK5CYII='); background-size: 16px 16px; } } .np1082:before { /* UBS Morning Advisor */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2tpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNTY3NEI3NjY5RjUxMUU2QTZDREMwMDU4RkZDQTU4NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MEZBODhEMzYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MEZBODhEMjYyRDUxMUU2ODU3RUE3QjI2QkQ3NEU1RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjdkMWRiMC1iY2RlLTQ3YWQtYjA5MC01ODRiZDJkNGU1ZjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU2NzRCNzY2OUY1MTFFNkE2Q0RDMDA1OEZGQ0E1ODUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4XPlFLAAAAoklEQVR42mL8//8/AyWAcRgY8MVNH9kERiCG8ROBeD6SnCCULgDieiCeAMSFLEiaHJEUO2IxtB+IL0I1w8QKmUhw7UMgFoCyA4BYEcQgxoD9QPwAiDdAMQish2IBYgwAeacRiM8D8Qeo8wOBWAHkEpgBH6ACDEh8bCAB6vcNUO98YEEK8fXQUAeF7gWk2IDRhlBLNkDFQOo2MI4mZcoNAAgwAOE+PamOkNVeAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1082:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNFRTM0MjY7fQ0KPC9zdHlsZT4NCjxnIGlkPSJVQlMiPg0KCTxnPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTUsMjkuNWMtMi42LTAuOC01LjEtMS45LTUuMS00LjVzMi40LTQuMSw0LjQtNC4xYzMuMywwLDQuOSwyLDUuNSw1LjhINjFsLTAuMi01LjRjLTEuOC0xLTQtMS41LTYuMi0xLjUNCgkJCWMtMy43LDAtNy41LDIuMi03LjUsN2MwLDQuNCwzLjQsNi4zLDYuNiw3LjNjMi45LDEsNS42LDIuMyw1LjYsNS4zcy0yLjUsNC41LTQuOCw0LjVjLTMuNSwwLTUuOS0yLjYtNi4yLTYuN2gtMS4ybDAuMiw2LjINCgkJCWMyLDEuMSw0LjMsMS42LDYuOSwxLjZjNC43LDAsNy45LTMsNy45LTcuNkM2Mi4xLDMyLjMsNTguMywzMC42LDU1LDI5LjV6Ii8+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNy4zLDMxLjVMMzcuMywzMS41YzMuNS0wLjcsNS43LTIuNSw1LjctNS45YzAtMy4zLTIuNS01LjUtNi43LTUuNUgyNnYxLjFoMi43djIyLjJoLTIuOXYxLjFoMTAuMw0KCQkJYzQuMiwwLDcuOS0xLjcsNy45LTYuNkM0NC4xLDMzLjUsNDAuOSwzMS45LDM3LjMsMzEuNXogTTMyLjUsMjEuMmgyLjhjMi44LDAsNC4yLDEuOSw0LjIsNC44YzAsMy41LTEuOSw0LjktNC4yLDQuOWgtMi44VjIxLjJ6DQoJCQkgTTM1LjIsNDMuNGgtMi43VjMyLjFoMi44YzMsMCw1LjEsMS43LDUuMSw1LjVDNDAuNCw0MS40LDM4LjcsNDMuNCwzNS4yLDQzLjR6Ii8+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNy42LDIxLjJoMi43djE0LjVjMCw0LjMtMS4zLDcuNi01LjUsNy42Yy00LjEsMC01LjUtMi43LTUuNS03LjF2LTE1aDIuOXYtMS4xSDIuOXYxLjFoMi43djE1LjQNCgkJCWMwLDQuOCwxLjksOC4zLDguNCw4LjNjNS45LDAsNy44LTMuNyw3LjgtOC44VjIxLjJoMi40di0xLjFoLTYuNkwxNy42LDIxLjJMMTcuNiwyMS4yeiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); background-size: 16px 16px; } } .np1436:before, .np1437:before, .np1438:before, .np1439:before { /* Wallstreet CN News, Real-time */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABa0lEQVR4Aa2TA+xVURzH7+w3ZHPIvmtuyDU1ZWPKtm3bthv628ieModr43vw/F6u7/Z5OPj5CJmqOVcWKfsprylujNexNVH4vvjFCOUUBT+Hn4l873IFBb9JRZqRTM+NFinosU1L0H+vjnvvfDRdoqRFkpozMtleYIPpmxZi7GkDUy+ZGLhPx7BjBuovTJwThVhx+OKQozpGHDc4HdaosNwQXgDkvPLQcJHCL2/Js1Md7RdiFQZj1EkDTJodotY8GWeqHf5/a+zSniIbndaqqQZeMwNuygJefPHBNOigjl67NPgBcKDUQf0FMi4/dDNTdbMMzLxigunGUxetVynYVWhzI/tLHEw6a3zXwOvUxSaLFah2NPdDZQ6W3bFAxddoHTINvE4UMQXujen+ex/NaOtMWsyj5c735mH/d9vYfZMKpikXTf7/VJWD3ru07xkQvzdInOtPXDReHA255TLluyP9z6P8Xx7TPz9nAhVCTM+aABafAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1436:before, .np1437:before, .np1438:before, .np1439:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojMTQ3OEYwO30NCgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGcgaWQ9IlhNTElEXzQ1XyI+DQoJPGcgaWQ9IlhNTElEXzQ2XyI+DQoJCTxwYXRoIGlkPSJYTUxJRF8yXyIgY2xhc3M9InN0MCIgZD0iTTgsMEMzLjYsMCwwLDMuNiwwLDhzMy42LDgsOCw4YzQuNCwwLDgtMy42LDgtOFMxMi40LDAsOCwweiIvPg0KCTwvZz4NCgk8ZyBpZD0iWE1MSURfNTBfIj4NCgkJPHBhdGggaWQ9IlhNTElEXzUxXyIgY2xhc3M9InN0MSIgZD0iTTcuMywxMC4xTDUuOSw2LjdjMCwwLDAtMC4xLDAtMC4yYzAtMC4zLDAuMS0wLjUsMC40LTAuN2MwLDAsMCwwLDAsMGwwLDBIMi44djBjMCwwLDAsMCwwLDANCgkJCWMwLjQsMC4xLDAuOCwwLjQsMSwwLjhsMi43LDYuM2gwLjJsMS41LTMuNkw3LjksOC41TDcuMywxMC4xeiIvPg0KCQk8cGF0aCBpZD0iWE1MSURfNTJfIiBjbGFzcz0ic3QxIiBkPSJNMTEsNC43TDExLDQuN0MxMSw0LjgsMTEsNC44LDExLDQuN2MwLjQsMCwwLjgsMC40LDAuOCwwLjhjMCwwLjEsMCwwLjIsMCwwLjMNCgkJCWMwLDAtMS4zLDMuNC0xLjMsMy40TDkuNiw3TDguNiw5LjNsMS4xLDIuOGgwLjJjMCwwLDIuNS02LjcsMi41LTYuN2MwLjItMC40LDAuNC0wLjYsMC43LTAuN2MwLDAsMCwwLDAsMHYwSDExeiIvPg0KCQk8cGF0aCBpZD0iWE1MSURfNTNfIiBjbGFzcz0ic3QxIiBkPSJNMTAuNywzLjdjMC4xLTAuMywwLjMtMC41LDAuNi0wLjZjMCwwLDAsMCwwLDBIOS41djBjMC4zLDAsMC41LDAuMiwwLjYsMC40YzAsMCwwLDAuMSwwLDAuMw0KCQkJTDkuMiw1LjlMOC45LDUuMWMwLTAuMS0wLjEtMC4zLTAuMS0wLjVjMC0wLjgsMC43LTAuOCwwLjgtMC44YzAsMCwwLDAsMCwwdjBINS44djBjMC42LDAuMiwwLjksMC43LDEsMUw4LjQsOQ0KCQkJQzguNCw5LDEwLjcsMy43LDEwLjcsMy43eiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); background-size: 16px 16px; } } .np1658:before, .np1659:before, .np1660:before { /* Market Insight Macro, Realtime */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKFSURBVDiNxZJbSJNhHMb/7/sddnBzGw3diq0xnFo6KrBAnCWxNEFQ6QTRRRBd6IV5YUQ34VUHyrDIi0oKikQKjELStGBJhmmhkoepc1SzNWXGHH75bd/7vW93XhREdOPv8rl4eHj4AWw06PfAWlph50GpEEXNsJIm3YQo5QIvnAGeuxVl8jwEAgQAgDU345XJsV3rBdk+v5unKBMQy6UY/EUF+Z3jMzOplISinAaqMIUQQazdYOTdc9lraFUynQfEivH6FMxqBZ1YyziUUBGeVVVs5Tl9Emvoa4WSUOnuHd5ivVjRY+A745K5TwHpuvHx83LkKivTpoh4k2fpO74Snzfw7r1FELGDqCqnUmRhqtpc49/v2zc6YirVwtlHcvrUnEx+3Ovv/wAAwCVcLt7CCT6zadPidCh0A3O0rXJbvtW+svzqG2Mfn1p1bYXxGB1aTb0xa9B0l3N7TmBhsT7D4Q5KkfACZ3N6uiwWY/dxt9P0fTnZkpOX6z+9GN5TqRMrI25vuuZnYiVM1Im9eu5yJA2J9kj0gcDhnuhA/ygAAA8UHm6WlC+HIrNdeZm049xUcNaZpZXNArQ3RoMNdUlyUszzVLtmp46OE8xUgJ2U0BMAUAUAgAe36AtbM1nTVbvnrgeB961NV7issoKGpdRXhcH8mKwWDU8Et3bKxBQktAMBHsKM1a+fv3Sk+nBrUg7fX6X4WZa2pdfuePIiLi05rOaoRNLOkWBohFOxGBt8OWkrO+iKBXo//yGSreTABQ6DCwB9YozFGGLHOIxvUwYT0YG+yN9MxAAAMUG5qDPwdZSxOACLUEW9pJW5wf9SGQCg8cq1GnltLZlhMJKWpsaBfynaOH4BepIf9WN+K5MAAAAASUVORK5CYII='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1658:before, .np1659:before, .np1660:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMzQ1LjE1IDI1Ny41NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxzdHlsZT4uY2xzLTMsLmNscy03e2ZpbGw6bm9uZX0uY2xzLTIsLmNscy04e2ZpbGw6IzE5M2Q0NX0uY2xzLTMsLmNscy04e3N0cm9rZTojMTkzZDQ1O3N0cm9rZS13aWR0aDouN3B4fS5jbHMtMywuY2xzLTcsLmNscy04e3N0cm9rZS1taXRlcmxpbWl0OjEwfS5jbHMtNXtmaWxsOiNmZmZ9LmNscy02e2ZpbGw6I2YyNTc0Zn0uY2xzLTd7c3Ryb2tlOiNmMjU3NGY7c3Ryb2tlLXdpZHRoOjVweH08L3N0eWxlPgo8L2RlZnM+CjxwYXRoIGQ9Ik0tMS0xaDM0Ny4xNXYyNTkuNTVILTF6IiBmaWxsPSJub25lIi8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTQ0LjExIDE2Mi41MWwtMjguODUtMjguMDcgMi4zMi0xLjk0IDI4Ljg1IDI4LjA3LTIuMzIgMS45NHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNDQuMTEgMTYyLjUxbC0yOC44NS0yOC4wNyAyLjMyLTEuOTQgMjguODUgMjguMDctMi4zMiAxLjk0eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xNi45NiAxNzQuMWwtMC41My0zIDI2LjM5LTQuNzIgMC41MyAzLTI2LjM5IDQuNzJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE2Ljk2IDE3NC4xbC0wLjUzLTMgMjYuMzktNC43MiAwLjUzIDMtMjYuMzkgNC43MnoiLz4KPHBhdGggY2xhc3M9ImNscy01IiBkPSJtMTMyLjA3IDI1MC4yNWE1LjgxIDUuODEgMCAxIDEgLTQuMjggLTcgNS44MiA1LjgyIDAgMCAxIDQuMjggNyIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMjYuNDIwMDEgMjQ0LjU3OTk5YTQuMyA0LjMgMCAwIDAtMSA4LjQ3IDQgNCAwIDAgMCAxIC4xMyA0LjMgNC4zIDAgMCAwIDEtOC40NyA0LjQ2IDQuNDYgMCAwIDAtMS0uMTNtMCAxMS42MmE3LjMyIDcuMzIgMCAxIDEgMS43Mi0xNC40MyA3LjMyIDcuMzIgMCAwIDEtMS43MiAxNC40MyIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMjYuNDIwMDEgMjQ0LjU3OTk5YTQuMyA0LjMgMCAwIDAtMSA4LjQ3IDQgNCAwIDAgMCAxIC4xMyA0LjMgNC4zIDAgMCAwIDEtOC40NyA0LjQ2IDQuNDYgMCAwIDAtMS0uMTN6bTAgMTEuNjJhNy4zMiA3LjMyIDAgMSAxIDEuNzItMTQuNDMgNy4zMiA3LjMyIDAgMCAxLTEuNzIgMTQuNDN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0ibTE1Ny40NCAyNTAuMjVhNS44MSA1LjgxIDAgMSAxIC00LjI3IC03IDUuODEgNS44MSAwIDAgMSA0LjI3IDciLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTUxLjc5MDAxIDI0NC41Nzk5OWE0LjMgNC4zIDAgMCAwLTEgOC40NyA0IDQgMCAwIDAgMSAuMTMgNC4zIDQuMyAwIDAgMCAxLTguNDcgNC40NiA0LjQ2IDAgMCAwLTEtLjEzbTAgMTEuNjJhNy4zMiA3LjMyIDAgMSAxIDEuNzItMTQuNDMgNy4zMiA3LjMyIDAgMCAxLTEuNzIgMTQuNDMiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTUxLjc5MDAxIDI0NC41Nzk5OWE0LjMgNC4zIDAgMCAwLTEgOC40NyA0IDQgMCAwIDAgMSAuMTMgNC4zIDQuMyAwIDAgMCAxLTguNDcgNC40NiA0LjQ2IDAgMCAwLTEtLjEzem0wIDExLjYyYTcuMzIgNy4zMiAwIDEgMSAxLjcyLTE0LjQzIDcuMzIgNy4zMiAwIDAgMS0xLjcyIDE0LjQzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im00MS44OSAyMDcuNDVsLTIyLjY5LTI1Ljc3IDEuOTEtMi4zNSAyMi42OSAyNS43OC0xLjkxIDIuMzR6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTQxLjg5IDIwNy40NWwtMjIuNjktMjUuNzcgMS45MS0yLjM1IDIyLjY5IDI1Ljc4LTEuOTEgMi4zNHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTIuNzggMTYxLjcxbC0zLTI2LjQyIDMtMC4xMiAzIDI2LjQzLTMgMC4xMXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTIuNzggMTYxLjcxbC0zLTI2LjQyIDMtMC4xMiAzIDI2LjQzLTMgMC4xMXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTMuNCAxMjUuMTJsLTIuNzQtMS4yNyAxNy43NC0zOS43NyAyLjc0IDEuMjctMTcuNzQgMzkuNzd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEzLjQgMTI1LjEybC0yLjc0LTEuMjcgMTcuNzQtMzkuNzcgMi43NCAxLjI3LTE3Ljc0IDM5Ljc3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0zMC4wNSA4NS44NWwtMi4yMS0yLjA3IDM1Ljc3LTM4LjA3IDIuMjEgMi4wNy0zNS43NyAzOC4wN3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMzAuMDUgODUuODVsLTIuMjEtMi4wNyAzNS43Ny0zOC4wNyAyLjIxIDIuMDctMzUuNzcgMzguMDd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTY0LjMxIDQ4LjIzbC0xLjQtMi42OSA1MC42Ny0yNi40MSAxLjQgMi42OC01MC42NyAyNi40MnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNjQuMzEgNDguMjNsLTEuNC0yLjY5IDUwLjY3LTI2LjQxIDEuNCAyLjY4LTUwLjY3IDI2LjQyeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMTIuNjkgMjIuNDZsLTAuNjItMyA0OC43My0xMC4xNyAwLjYyIDMtNDguNzMgMTAuMTd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExMi42OSAyMi40NmwtMC42Mi0zIDQ4LjczLTEwLjE3IDAuNjIgMy00OC43MyAxMC4xN3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjEwLjUxIDE3Ljc2bC01MC43NS01LjgzIDAuMzUtMyA1MC42OSA1Ljg3LTAuMjkgMi45NnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjEwLjUxIDE3Ljc2bC01MC43NS01LjgzIDAuMzUtMyA1MC42OSA1Ljg3LTAuMjkgMi45NnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjQ2LjQxIDMyLjU4bC0zNy0xNS40MSAxLjE2LTIuNzkgMzcgMTUuNDEtMS4xNiAyLjc5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yNDYuNDEgMzIuNThsLTM3LTE1LjQxIDEuMTYtMi43OSAzNyAxNS40MS0xLjE2IDIuNzl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI4MS4xOCA1Ni40OGwtMzUuNjctMjUuMjggMi4xMS0yLjE3IDM1LjY2IDI1LjI4LTIuMSAyLjE3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yODEuMTggNTYuNDhsLTM1LjY3LTI1LjI4IDIuMTEtMi4xNyAzNS42NiAyNS4yOC0yLjEgMi4xN3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjk2LjA4IDk4Ljk4bC0xNS45Mi00My44MSAyLjg0LTEuMDYgMTUuOTEgNDMuODItMi44MyAxLjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yOTYuMDggOTguOThsLTE1LjkyLTQzLjgxIDIuODQtMS4wNiAxNS45MSA0My44Mi0yLjgzIDEuMDV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI4OC4yNCAxNDMuNTVsLTIuODktMC44OCAxMC42My00NS4yMSAyLjg5IDAuODgtMTAuNjMgNDUuMjF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI4OC4yNCAxNDMuNTVsLTIuODktMC44OCAxMC42My00NS4yMSAyLjg5IDAuODgtMTAuNjMgNDUuMjF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI0Ny4zNSAxNjcuMDNsLTEuNDktMi42MyA0MC45NS0yMy4yNiAxLjQ5IDIuNjMtNDAuOTUgMjMuMjZ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI0Ny4zNSAxNjcuMDNsLTEuNDktMi42MyA0MC45NS0yMy4yNiAxLjQ5IDIuNjMtNDAuOTUgMjMuMjZ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE5Ny4xNiAxNjguNzlsLTAuMTMtMyA1MC0yLjE5IDAuMTMgMy01MCAyLjE5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xOTcuMTYgMTY4Ljc5bC0wLjEzLTMgNTAtMi4xOSAwLjEzIDMtNTAgMi4xOXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTk3Ljc3IDE2OC4zM2wtNDEtMTQuNzcgMC44MS0yLjkyIDQxIDE0Ljc3LTAuODEgMi45MnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTk3Ljc3IDE2OC4zM2wtNDEtMTQuNzcgMC44MS0yLjkyIDQxIDE0Ljc3LTAuODEgMi45MnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODMuNzggMjE4LjU0bC00Mi0xMS4zIDAuODgtMi44OSA0MiAxMS4zLTAuODggMi44OXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtODMuNzggMjE4LjU0bC00Mi0xMS4zIDAuODgtMi44OSA0MiAxMS4zLTAuODggMi44OXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODQuMjEgMjE4LjYybC0wLjU0LTMgNDMuNDEtOS41OSAwLjUzIDMtNDMuNCA5LjU5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im04NC4yMSAyMTguNjJsLTAuNTQtMyA0My40MS05LjU5IDAuNTMgMy00My40IDkuNTl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0ibTIyOC4xIDQ5Ljg3YTUuOCA1LjggMCAxIDEgLTUuMDkgLTYuNDQgNS44IDUuOCAwIDAgMSA1LjA5IDYuNDQiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjIyLjMzIDQ0LjkzYTQuMyA0LjMgMCAxIDAgMC41IDAgNC4xOSA0LjE5IDAgMCAwIC0wLjUgMG0wIDExLjYyYTguMjQgOC4yNCAwIDAgMSAtMC44NSAwIDcuMzEgNy4zMSAwIDEgMSAwLjg1IDAiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjIyLjMzIDQ0LjkzYTQuMyA0LjMgMCAxIDAgMC41IDAgNC4xOSA0LjE5IDAgMCAwIC0wLjUgMHptMCAxMS42MmE4LjI0IDguMjQgMCAwIDEgLTAuODUgMCA3LjMxIDcuMzEgMCAxIDEgMC44NSAweiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNTIuNzYgNDIuOTNhNS44MSA1LjgxIDAgMSAxIC01LjA5IC02LjQ0IDUuOCA1LjggMCAwIDEgNS4wOSA2LjQ0Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTE0Ni45OTAwMSAzNy45Mjk5OWE0LjMgNC4zIDAgMSAwIC41IDBoLS41bTAgMTEuNjFhNi4wNiA2LjA2IDAgMCAxLS44NS0uMDUgNy4zIDcuMyAwIDEgMSAuODUuMDUiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTQ2Ljk5MDAxIDM3LjkyOTk5YTQuMyA0LjMgMCAxIDAgLjUgMGgtLjV6bS41IDExLjYxYTYuMDYgNi4wNiAwIDAgMS0uODUtLjA1IDcuMyA3LjMgMCAxIDEgLjg1LjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xMjEuMzcgODkuMDhhNS44MSA1LjgxIDAgMSAxIC01LjEgLTYuNDQgNS44MSA1LjgxIDAgMCAxIDUuMSA2LjQ0Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTExNS41OTAwMSA4NC4xMDk5OWE0LjMgNC4zIDAgMSAwIC41MSAwaC0uNTFtMCAxMS42MmE4LjI3IDguMjcgMCAwIDEtLjg2LS4wNSA3LjMxIDcuMzEgMCAxIDEgLjg2LjA1Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTExNS41OTAwMSA4NC4xMDk5OWE0LjMgNC4zIDAgMSAwIC41MSAwaC0uNTF6bS41MSAxMS42MmE4LjI3IDguMjcgMCAwIDEtLjg2LS4wNSA3LjMxIDcuMzEgMCAxIDEgLjg2LjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xMTEuODggMTg2Ljc1YTUuODEgNS44MSAwIDEgMSAtNS4xIC02LjQ0IDUuODIgNS44MiAwIDAgMSA1LjEgNi40NCIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMDYuMTAwMDEgMTgxLjc3OTk5YTQuMyA0LjMgMCAxIDAgLjUxIDBoLS41MW0wIDExLjYyYTguMjQgOC4yNCAwIDAgMS0uODUtLjA1IDcuMzEgNy4zMSAwIDEgMSAuODUuMDUiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTA2LjEwMDAxIDE4MS43Nzk5OWE0LjMgNC4zIDAgMSAwIC41MSAwaC0uNTF6bS41MSAxMS42MmE4LjI0IDguMjQgMCAwIDEtLjg1LS4wNSA3LjMxIDcuMzEgMCAxIDEgLjg1LjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im01NC41MSAxNjYuNDlhNS44MSA1LjgxIDAgMSAxIC01LjEgLTYuNDQgNS44MiA1LjgyIDAgMCAxIDUuMSA2LjQ0Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQ4Ljc1MDAxIDE2MS41MTk5OWE0LjMgNC4zIDAgMSAwIDMuMzggMS42MyA0LjI1IDQuMjUgMCAwIDAtMi44Ny0xLjZoLS41MW0wIDExLjYyYTguNDMgOC40MyAwIDAgMS0uODYgMCA3LjMyIDcuMzIgMCAwIDEgMS43LTE0LjU0IDcuMzEgNy4zMSAwIDAgMSA2LjQyIDguMTEgNy4zMiA3LjMyIDAgMCAxLTcuMjYgNi40OCIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik00OC43NTAwMSAxNjEuNTE5OTlhNC4zIDQuMyAwIDEgMCAzLjM4IDEuNjMgNC4yNSA0LjI1IDAgMCAwLTIuODctMS42bC0uNTEtLjAzem0uNTEgMTEuNjVhOC40MyA4LjQzIDAgMCAxLS44NiAwIDcuMzIgNy4zMiAwIDAgMSAxLjctMTQuNTQgNy4zMSA3LjMxIDAgMCAxIDYuNDIgOC4xMSA3LjMyIDcuMzIgMCAwIDEtNy43NSA2LjRsLjQ5LjAzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xMDEuMjUgMTI0Ljk5YTUuODEgNS44MSAwIDEgMSAtNS4xIC02LjQ0IDUuODIgNS44MiAwIDAgMSA1LjEgNi40NCIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im05NS41MSAxMjAuMDNhNC4zIDQuMyAwIDEgMCAwLjUxIDBoLTAuNTFtMCAxMS42MWE2LjE1IDYuMTUgMCAwIDEgLTAuODUgMCA3LjMyIDcuMzIgMCAxIDEgMC44NSAwIi8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTk1LjUxIDEyMC4wM2E0LjMgNC4zIDAgMSAwIDAuNTEgMGgtMC41MXptMC41MSAxMS42MWE2LjE1IDYuMTUgMCAwIDEgLTAuODUgMCA3LjMyIDcuMzIgMCAxIDEgMC44NSAweiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im04Ny4xNCA2Ny4xMmE1LjgxIDUuODEgMCAxIDEgLTUuMSAtNi40NSA1LjgxIDUuODEgMCAwIDEgNS4xIDYuNDUiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODEuMzYwMDEgNjIuMTQ5OTlhNC4zIDQuMyAwIDEgMCAzLjM4IDEuNjMgNC4yNSA0LjI1IDAgMCAwLTIuODctMS42aC0uNTFtMCAxMS42MWE2LjI5IDYuMjkgMCAwIDEtLjg2LS4wNSA3LjMyIDcuMzIgMCAxIDEgLjg2LjA1Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgxLjM2MDAxIDYyLjE0OTk5YTQuMyA0LjMgMCAxIDAgMy4zOCAxLjYzIDQuMjUgNC4yNSAwIDAgMC0yLjg3LTEuNmwtLjUxLS4wM3ptLjUxIDExLjY0YTYuMjkgNi4yOSAwIDAgMS0uODYtLjA1IDcuMzIgNy4zMiAwIDEgMSAuODYuMDV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0ibTI3Mi4wOCAxMDAuMDZhNS44IDUuOCAwIDEgMSAtNS4wOSAtNi40NCA1LjggNS44IDAgMCAxIDUuMDkgNi40NCIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yNjYuMzEgOTUuMDlhNC4zMSA0LjMxIDAgMSAwIDAuNSAwIDQuMTkgNC4xOSAwIDAgMCAtMC41IDBtMCAxMS42MmE4LjA4IDguMDggMCAwIDEgLTAuODUgMCA3LjMyIDcuMzIgMCAxIDEgMC44NSAwIi8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI2Ni4zMSA5NS4wOWE0LjMxIDQuMzEgMCAxIDAgMC41IDAgNC4xOSA0LjE5IDAgMCAwIC0wLjUgMHptMCAxMS42MmE4LjA4IDguMDggMCAwIDEgLTAuODUgMCA3LjMyIDcuMzIgMCAxIDEgMC44NSAweiIvPgo8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0yMTYuNTcgODIuMzNhNS44MSA1LjgxIDAgMSAxIC01LjA2IC02LjQgNS44MiA1LjgyIDAgMCAxIDUuMSA2LjQ0Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTIxMC43OTAwMSA3Ny4zNjk5OWE0LjMgNC4zIDAgMSAwIC41IDAgNC4xOSA0LjE5IDAgMCAwLS41IDBtMCAxMS42MWE2LjE1IDYuMTUgMCAwIDEtLjg1LS4wNSA3LjMyIDcuMzIgMCAxIDEgLjg1LjA1Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIxMC43OTAwMSA3Ny4zNjk5OWE0LjMgNC4zIDAgMSAwIC41IDAgNC4xOSA0LjE5IDAgMCAwLS41IDB6bTAgMTEuNjFhNi4xNSA2LjE1IDAgMCAxLS44NS0uMDUgNy4zMiA3LjMyIDAgMSAxIC44NS4wNXoiLz4KPHBhdGggY2xhc3M9ImNscy01IiBkPSJtMTY2LjM5IDExNC43YTUuOCA1LjggMCAxIDEgLTUuMDkgLTYuNDQgNS44IDUuOCAwIDAgMSA1LjA5IDYuNDQiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTYwLjYyMDAxIDEwOS43Mjk5OWE0LjMyIDQuMzIgMCAxIDAgLjUgMCA0LjE5IDQuMTkgMCAwIDAtLjUgMG0wIDExLjYyYTguMjQgOC4yNCAwIDAgMS0uODUtLjA1IDcuMzIgNy4zMiAwIDEgMSAxLjctMTQuNTQgNy4zMiA3LjMyIDAgMCAxIDYuNDIgOC4xMiA3LjMxIDcuMzEgMCAwIDEtNy4yNyA2LjQ3Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTE2MC42MjAwMSAxMDkuNzI5OTlhNC4zMiA0LjMyIDAgMSAwIC41IDAgNC4xOSA0LjE5IDAgMCAwLS41IDB6bTAgMTEuNjJhOC4yNCA4LjI0IDAgMCAxLS44NS0uMDUgNy4zMiA3LjMyIDAgMSAxIDEuNy0xNC41NCA3LjMyIDcuMzIgMCAwIDEgNi40MiA4LjEyIDcuMzEgNy4zMSAwIDAgMS03LjI2IDYuNDdoLS4wMXoiLz4KPHBhdGggY2xhc3M9ImNscy01IiBkPSJtMTU3LjUxIDE4NS4wNWE1LjgxIDUuODEgMCAxIDEgLTUuMDkgLTYuNDUgNS44MSA1LjgxIDAgMCAxIDUuMDkgNi40NSIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xNTEuNzIwMDEgMTgwLjA3OTk5YTQuMzIgNC4zMiAwIDEgMCAuNSAwaC0uNW0wIDExLjYxYTYuMDYgNi4wNiAwIDAgMS0uODUtLjA1IDcuMzIgNy4zMiAwIDEgMSA2LjY0LTExLjgxIDcuMjMgNy4yMyAwIDAgMSAxLjUzIDUuMzkgNy4zMSA3LjMxIDAgMCAxLTcuMjYgNi40NyIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xNTEuNzIwMDEgMTgwLjA3OTk5YTQuMzIgNC4zMiAwIDEgMCAuNSAwaC0uNXptLjUgMTEuNjFhNi4wNiA2LjA2IDAgMCAxLS44NS0uMDUgNy4zMiA3LjMyIDAgMSAxIDYuMTQtMTEuODEgNy4yMyA3LjIzIDAgMCAxIDEuNTMgNS4zOSA3LjMxIDcuMzEgMCAwIDEtNy4zMSA2LjQ3aC40OXoiLz4KPHBhdGggY2xhc3M9ImNscy01IiBkPSJtMjEzLjM0IDEzOS40NWE1LjgxIDUuODEgMCAxIDEgLTUuMSAtNi40NCA1LjgyIDUuODIgMCAwIDEgNS4xIDYuNDQiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjA3LjU2MDAxIDEzNC40Nzk5OWE0LjMgNC4zIDAgMSAwIC41MSAwaC0uNTFtMCAxMS42MmE4LjI3IDguMjcgMCAwIDEtLjg2LS4wNSA3LjMxIDcuMzEgMCAxIDEgLjg2LjA1Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIwNy41NjAwMSAxMzQuNDc5OTlhNC4zIDQuMyAwIDEgMCAuNTEgMGgtLjUxem0uNTEgMTEuNjJhOC4yNyA4LjI3IDAgMCAxLS44Ni0uMDUgNy4zMSA3LjMxIDAgMSAxIC44Ni4wNXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNzYuNzcgOTUuODZsLTQ3LjgyLTEwLjcgMC42Ni0zIDQ3LjgyIDEwLjc3LTAuNjYgMi45M3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNzYuNzcgOTUuODZsLTQ3LjgyLTEwLjcgMC42Ni0zIDQ3LjgyIDEwLjc3LTAuNjYgMi45M3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNjEuNyAxMzQuODZsLTIuNzktMS4xNiAxNi43NS00MC4yOCAyLjc5IDEuMTYtMTYuNzUgNDAuMjh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTYxLjcgMTM0Ljg2bC0yLjc5LTEuMTYgMTYuNzUtNDAuMjggMi43OSAxLjE2LTE2Ljc1IDQwLjI4eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im01OS40NCAxMzYuMTNsLTQ3LjE4LTExLjY1IDEuMDYtMi44NCA0Ny4xOSAxMS42Ni0xLjA3IDIuODN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTU5LjQ0IDEzNi4xM2wtNDcuMTgtMTEuNjUgMS4wNi0yLjg0IDQ3LjE5IDExLjY2LTEuMDcgMi44M3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNzguNjUgOTYuMTlsLTIuMTQtMi4xNCAzMi0zMS45IDIuMTQgMi4xNC0zMiAzMS45eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im03OC42NSA5Ni4xOWwtMi4xNC0yLjE0IDMyLTMxLjkgMi4xNCAyLjE0LTMyIDMxLjl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTExMS4xIDYzLjc0bC0zLTAuMjYgMy44LTQzIDMgMC4yNy0zLjggNDIuOTl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExMS4xIDYzLjc0bC0zLTAuMjYgMy44LTQzIDMgMC4yNy0zLjggNDIuOTl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE4Ni41NyA1My4yN2wtMjUuOS00MSAyLjU2LTEuNjIgMjUuOSA0MS0yLjU2IDEuNjJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE4Ni41NyA1My4yN2wtMjUuOS00MSAyLjU2LTEuNjIgMjUuOSA0MS0yLjU2IDEuNjJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE1My4xIDc4LjE1bC0xLjc2LTIuNDYgMzUuMTctMjUuMTkgMS43NiAyLjQ2LTM1LjE3IDI1LjE5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNTMuMSA3OC4xNWwtMS43Ni0yLjQ2IDM1LjE3LTI1LjE5IDEuNzYgMi40Ni0zNS4xNyAyNS4xOXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTUxLjMyIDc4LjAybC00MS0xMy4xMSAwLjkyLTIuODggNDEgMTMuMTEtMC45MiAyLjg4eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNTEuMzIgNzguMDJsLTQxLTEzLjExIDAuOTItMi44OCA0MSAxMy4xMS0wLjkyIDIuODh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEzMC45MiAxMTUuMTJsLTIuNjMtMS41IDIyLjA5LTM4LjU3IDIuNjIgMS41LTIyLjA4IDM4LjU3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xMzAuOTIgMTE1LjEybC0yLjYzLTEuNSAyMi4wOS0zOC41NyAyLjYyIDEuNS0yMi4wOCAzOC41N3oiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtMTE3LjUxIDE1My4yOGwtMy0wLjUzIDEzLjM3LTQwLjE5IDMgMC41Mi0xMy4zNyA0MC4yeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Im0xMTcuNTEgMTUzLjI4bC0zLTAuNTMgMTMuMzctNDAuMTkgMyAwLjUyLTEzLjM3IDQwLjJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEzMC45NCAxMTQuNDFsLTU1LTE3LjcxIDAuOTItMi44OCA1NSAxNy43MS0wLjkyIDIuODh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEzMC45NCAxMTQuNDFsLTU1LTE3LjcxIDAuOTItMi44OCA1NSAxNy43MS0wLjkyIDIuODh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTExNi41NiAxNTMuNTFsLTU2LjM2LTE3LjQ4IDEuMDgtMi44MiA1Ni4zNyAxNy40Ny0xLjA5IDIuODN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExNi41NiAxNTMuNTFsLTU2LjM2LTE3LjQ4IDEuMDgtMi44MiA1Ni4zNyAxNy40Ny0xLjA5IDIuODN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTgxLjIgMjE2LjE1bC0zLjUzLTQyLjQ2IDMtMC4xOCAzLjU1IDQyLjQyLTMuMDIgMC4yMnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtODEuMiAyMTYuMTVsLTMuNTMtNDIuNDYgMy0wLjE4IDMuNTUgNDIuNDItMy4wMiAwLjIyeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im00Mi44NSAyMDYuNDRsLTIuMjctMiAzNy4xMy0zMS40MSAyLjI2IDItMzcuMTIgMzEuNDF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTQyLjg1IDIwNi40NGwtMi4yNy0yIDM3LjEzLTMxLjQxIDIuMjYgMi0zNy4xMiAzMS40MXoiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtMTkuNzcgMTY5LjQ4bC0wLjg2LTIuOSA0MS44NC0zMy4wNyAwLjg2IDIuOS00MS44NCAzMy4wN3oiLz4KPHBhdGggY2xhc3M9ImNscy03IiBkPSJtMTkuNzcgMTY5LjQ4bC0wLjg2LTIuOSA0MS44NC0zMy4wNyAwLjg2IDIuOS00MS44NCAzMy4wN3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTkwLjEyIDEwMS42NGwtMzguNzktMjMuMTQgMS44Ny0yLjM4IDM4Ljc4IDIzLjE0LTEuODYgMi4zOHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTkwLjEyIDEwMS42NGwtMzguNzktMjMuMTQgMS44Ny0yLjM4IDM4Ljc4IDIzLjE0LTEuODYgMi4zOHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTg5LjExIDEwMC4yMmwtMy4zNS00OS4xNiAzLTAuMjIgMy4zNSA0OS4xNS0zIDAuMjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE4OS4xMSAxMDAuMjJsLTMuMzUtNDkuMTYgMy0wLjIyIDMuMzUgNDkuMTUtMyAwLjIzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xODguMTcgNTIuMjZsLTIuNDgtMS43NCAyNC4xNi0zNC40OSAyLjQ4IDEuNzQtMjQuMTYgMzQuNDl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE4OC4xNyA1Mi4yNmwtMi40OC0xLjc0IDI0LjE2LTM0LjQ5IDIuNDggMS43NC0yNC4xNiAzNC40OXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjQzLjUxIDc0LjAzbC0zLTAuNDcgNC43My00Mi43MyAzIDAuNDctNC43MyA0Mi43M3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjQzLjUxIDc0LjAzbC0zLTAuNDcgNC43My00Mi43MyAzIDAuNDctNC43MyA0Mi43M3oiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtMjQxLjUxIDc0LjE3bC0wLjg3LTIuOSA0MC44Ny0xNy4yNyAwLjg3IDIuODktNDAuODcgMTcuMjh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTI0MS41MSA3NC4xN2wtMC44Ny0yLjkgNDAuODctMTcuMjcgMC44NyAyLjg5LTQwLjg3IDE3LjI4eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0yMzQuMTQgMTIxLjAzbDYuOTMtNDguODMgMy0wLjExLTYuOTEgNDguODQtMy4wMiAwLjF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIzNC4xNCAxMjEuMDNsNi45My00OC44MyAzLTAuMTEtNi45MSA0OC44NC0zLjAyIDAuMXoiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtMjM1LjIyIDEyMi40MmwtNDQuNjQtMjAuOTEgMC44Ni0yLjkgNDQuNjQgMjAuOTEtMC44NiAyLjl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIzNS4yMiAxMjIuNDJsLTQ0LjY0LTIwLjkxIDAuODYtMi45IDQ0LjY0IDIwLjkxLTAuODYgMi45eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0xNTguOTUgMTUxLjY5bC0yLjQ0LTEuNzYgMzQtNTAuODIgMi40MiAxLjgxLTMzLjk4IDUwLjc3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTciIGQ9Im0xNTguOTUgMTUxLjY5bC0yLjQ0LTEuNzYgMzQtNTAuODIgMi40MiAxLjgxLTMzLjk4IDUwLjc3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yNDYuOTIgMTY0LjMxbC0xMi40MS00My41NSAzLTAuNDUgMTIuNDIgNDMuNTUtMy4wMSAwLjQ1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yNDYuOTIgMTY0LjMxbC0xMi40MS00My41NSAzLTAuNDUgMTIuNDIgNDMuNTUtMy4wMSAwLjQ1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yODcuMzEgMTQ0LjA1bC01MS44LTIzLjc2IDEuMzItMi43MiA1MS43OCAyMy43NS0xLjMgMi43M3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjg3LjMxIDE0NC4wNWwtNTEuOC0yMy43NiAxLjMyLTIuNzIgNTEuNzggMjMuNzUtMS4zIDIuNzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTE1NyAxNTIuNzNsLTI4LjE3LTQwIDIuNTQtMS42NSAyOC4xNyA0MC0yLjU0IDEuNjV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTE1NyAxNTIuNzNsLTI4LjE3LTQwIDIuNTQtMS42NSAyOC4xNyA0MC0yLjU0IDEuNjV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEyNC45IDIwNy41NGwtMTAtNTQuODEgMy0wLjMgMTAgNTQuODEtMyAwLjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEyNC45IDIwNy41NGwtMTAtNTQuODEgMy0wLjMgMTAgNTQuODEtMyAwLjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTc4LjQxIDE3NS40N2wtMjAuMDktMzkuNTQgMi42MS0xLjUyIDIwLjA5IDM5LjUyLTIuNjEgMS41NHoiLz4KPHBhdGggY2xhc3M9ImNscy03IiBkPSJtNzguNDEgMTc1LjQ3bC0yMC4wOS0zOS41NCAyLjYxLTEuNTIgMjAuMDkgMzkuNTItMi42MSAxLjU0eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im01MS42OSAxNjAuNzVsLTIuNzUtMS4yNiAxMS4xNS0yNC4zMiAyLjc1IDEuMjYtMTEuMTUgMjQuMzJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTUxLjY5IDE2MC43NWwtMi43NS0xLjI2IDExLjE1LTI0LjMyIDIuNzUgMS4yNi0xMS4xNSAyNC4zMnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNzguODYgMTc3LjAxbC0yNS4xNS04LjQ0IDAuNTYtMyAyNS4xNiA4LjQ0LTAuNTcgM3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNzguODYgMTc3LjAxbC0yNS4xNS04LjQ0IDAuNTYtMyAyNS4xNiA4LjQ0LTAuNTcgM3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNDEuMDcgMjA1LjU1bDYuMTgtMzQuOTMgMy0wLjE1LTYuMTkgMzQuOTMtMi45OSAwLjE1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im00MS4wNyAyMDUuNTVsNi4xOC0zNC45MyAzLTAuMTUtNi4xOSAzNC45My0yLjk5IDAuMTV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTk5LjY3IDE4NC4yNWwtMjIuMTYtOC43MiAxLjUtMi42MyAyMi4xNSA4LjczLTEuNDkgMi42MnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtOTkuNjcgMTg0LjI1bC0yMi4xNi04LjcyIDEuNS0yLjYzIDIyLjE1IDguNzMtMS40OSAyLjYyeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im04NC41MSAyMTYuMzZsLTIuMzItMS45NCAxOS4xLTI0LjU3IDIuMzIgMS45NC0xOS4xIDI0LjU3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im04NC41MSAyMTYuMzZsLTIuMzItMS45NCAxOS4xLTI0LjU3IDIuMzIgMS45NC0xOS4xIDI0LjU3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMjUuNzIgMjA5LjM0bC0xNy4xMi0xOC43NCAyLjIzLTIuMDUgMTcuMTMgMTguNzQtMi4yNCAyLjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xMjUuNzIgMjA5LjM0bC0xNy4xMi0xOC43NCAyLjIzLTIuMDUgMTcuMTMgMTguNzQtMi4yNCAyLjA1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMTAuOTYgMTgxLjE3bC0yLjYxLTEuNTMgNy0yNyAyLjYxIDEuNTMtNyAyN3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTEwLjk2IDE4MS4xN2wtMi42MS0xLjUzIDctMjcgMi42MSAxLjUzLTcgMjd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTc5LjA4IDE3NS45OGwtMC44Mi0yLjkyIDM4LjMxLTIxLjU1IDAuODIgMi45MS0zOC4zMSAyMS41NnoiLz4KPHBhdGggY2xhc3M9ImNscy03IiBkPSJtNzkuMDggMTc1Ljk4bC0wLjgyLTIuOTIgMzguMzEtMjEuNTUgMC44MiAyLjkxLTM4LjMxIDIxLjU2eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMDAuOTUgMTI0LjM1bC0wLjktMi44OSAyOS45My05LjMyIDAuOSAyLjg5LTI5LjkzIDkuMzJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEwMC45NSAxMjQuMzVsLTAuOS0yLjg5IDI5LjkzLTkuMzIgMC45IDIuODktMjkuOTMgOS4zMnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTE0LjY3IDE1My42NGwtMTYuOC0yNCAyLjQ0LTEuNzkgMTYuOCAyNC0yLjQ0IDEuNzl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExNC42NyAxNTMuNjRsLTE2LjgtMjQgMi40NC0xLjc5IDE2LjggMjQtMi40NCAxLjc5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im02MS41MSAxMzYuOTNsLTAuODktMi44OSAyOC41OS04LjggMC44OSAyLjktMjguNTkgOC43OXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNjEuNTEgMTM2LjkzbC0wLjg5LTIuODkgMjguNTktOC44IDAuODkgMi45LTI4LjU5IDguNzl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTkwLjkxIDExOS40bC0xNC41OS0yNCAyLjU5LTEuNTcgMTQuNTkgMjQtMi41OSAxLjU3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im05MC45MSAxMTkuNGwtMTQuNTktMjQgMi41OS0xLjU3IDE0LjU5IDI0LTIuNTkgMS41N3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODAuNTEgMTc1LjY1bC0yLjg3LTEgMTQuODctNDUuNDIgMi44NyAxLTE0Ljg3IDQ1LjQyeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im04MC41MSAxNzUuNjVsLTIuODctMSAxNC44Ny00NS40MiAyLjg3IDEtMTQuODcgNDUuNDJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTk5LjE2IDExOS40MWwtMi42LTEuNTUgMTQuOTUtMjUuMTMgMi42IDEuNTQtMTQuOTUgMjUuMTR6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTk5LjE2IDExOS40MWwtMi42LTEuNTUgMTQuOTUtMjUuMTMgMi42IDEuNTQtMTQuOTUgMjUuMTR6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTQwLjUxIDEwNS4yMmwtNy44OC0xMi42NiAyLjU3LTEuNiA3Ljg4IDEyLjY2LTIuNTcgMS42eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im00MC41MSAxMDUuMjJsLTcuODgtMTIuNjYgMi41Ny0xLjYgNy44OCAxMi42Ni0yLjU3IDEuNnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNTkuMDcgMTM2LjU3bC0xMi44MS0yMS42NCAyLjYtMS41NCAxMi44MSAyMS42My0yLjYgMS41NXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtNTkuMDcgMTM2LjU3bC0xMi44MS0yMS42NCAyLjYtMS41NCAxMi44MSAyMS42My0yLjYgMS41NXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODAuMzYgOTUuMWwtMy0wLjE3IDEuMjktMjMuMyAzIDAuMTYtMS4yOSAyMy4zMXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtODAuMzYgOTUuMWwtMy0wLjE3IDEuMjktMjMuMyAzIDAuMTYtMS4yOSAyMy4zMXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODYuNzQgNjguMjlsLTAuMzctMyAyNC40My0zIDAuMzcgMy0yNC40MyAzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im04Ni43NCA2OC4yOWwtMC4zNy0zIDI0LjQzLTMgMC4zNyAzLTI0LjQzIDN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTc1Ljc0IDYzLjE3bC0xNC0xNi40OCAyLjMxLTIgMTQgMTYuNDgtMi4zMSAyeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im03NS43NCA2My4xN2wtMTQtMTYuNDggMi4zMS0yIDE0IDE2LjQ4LTIuMzEgMnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTExLjk2IDYzLjg2bC0xLjQ1LTIuNjcgMzEtMTYuNiAxLjQzIDIuNjYtMzAuOTggMTYuNjF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExMS45NiA2My44NmwtMS40NS0yLjY3IDMxLTE2LjYgMS40MyAyLjY2LTMwLjk4IDE2LjYxeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xNTAuODEgMzcuMzlsLTIuNzctMS4yMyAxMS42OC0yNi4yMyAyLjc2IDEuMjMtMTEuNjcgMjYuMjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE1MC44MSAzNy4zOWwtMi43Ny0xLjIzIDExLjY4LTI2LjIzIDIuNzYgMS4yMy0xMS42NyAyNi4yM3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTQxLjA0IDQwLjIzbC0yOS41My0xOC4zIDEuNi0yLjU3IDI5LjUyIDE4LjI5LTEuNTkgMi41OHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTQxLjA0IDQwLjIzbC0yOS41My0xOC4zIDEuNi0yLjU3IDI5LjUyIDE4LjI5LTEuNTkgMi41OHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTUwLjczIDc2Ljc1bC00LjQtMjkuMjIgMy0wLjQ1IDQuNCAyOS4yMi0zIDAuNDV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE1MC43MyA3Ni43NWwtNC40LTI5LjIyIDMtMC40NSA0LjQgMjkuMjItMyAwLjQ1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xODYuODUgNTMuMDZsLTM0LjQ4LTguMTkgMC43LTIuOTQgMzQuNDQgOC4xOC0wLjY2IDIuOTV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE4Ni44NSA1My4wNmwtMzQuNDgtOC4xOSAwLjctMi45NCAzNC40NCA4LjE4LTAuNjYgMi45NXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTg2LjQ1IDUyLjc4bC0wLjI0LTMgMjkuNDctMi4zNyAwLjI0IDMtMjkuNDcgMi4zN3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTg2LjQ1IDUyLjc4bC0wLjI0LTMgMjkuNDctMi4zNyAwLjI0IDMtMjkuNDcgMi4zN3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjE4LjYyIDQzLjU1bC05Ljg1LTI2LjQ5IDIuODMtMS4wNiA5LjkxIDI2LjQ5LTIuODkgMS4wNnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjE4LjYyIDQzLjU1bC05Ljg1LTI2LjQ5IDIuODMtMS4wNiA5LjkxIDI2LjQ5LTIuODkgMS4wNnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjI4Ljc2IDQ2LjkzbC0xLjg4LTIuMzcgMTkuNjMtMTUuNTggMS44OCAyLjM3LTE5LjYzIDE1LjU4eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yMjguNzYgNDYuOTNsLTEuODgtMi4zNyAxOS42My0xNS41OCAxLjg4IDIuMzctMTkuNjMgMTUuNTh6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI0MC41MSA3NC43OGwtMTcuNS0xOS44NSAyLjU1LTEuNjIgMTcuNDggMTkuOS0yLjUzIDEuNTd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI0MC41MSA3NC43OGwtMTcuNS0xOS44NSAyLjU1LTEuNjIgMTcuNDggMTkuOS0yLjUzIDEuNTd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE5MS41MSAxMDEuMTdsLTIuNC0xLjgzIDE3LjI2LTEzLjU2IDIuNDEgMS44NC0xNy4yNyAxMy41NXoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTkxLjUxIDEwMS4xN2wtMi40LTEuODMgMTcuMjYtMTMuNTYgMi40MSAxLjg0LTE3LjI3IDEzLjU1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yMDUuNjEgNzcuNzhsLTE5Ljc4LTI2LjUxIDIuNDMtMS44MSAxOS43OCAyNi40Ny0yLjQzIDEuODV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTIwNS42MSA3Ny43OGwtMTkuNzgtMjYuNTEgMi40My0xLjgxIDE5Ljc4IDI2LjQ3LTIuNDMgMS44NXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjE2LjU3IDgxLjM0bC0wLjU4LTMgMjYtOCAwLjU3IDMtMjUuOTkgOHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjE2LjU3IDgxLjM0bC0wLjU4LTMgMjYtOCAwLjU3IDMtMjUuOTkgOHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjMzLjUxIDEyMC42NGwtMjAuNi0zNC4yNCAyLjQzLTEuODEgMjAuNiAzNC4yNS0yLjQzIDEuOHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMjMzLjUxIDEyMC42NGwtMjAuNi0zNC4yNCAyLjQzLTEuODEgMjAuNiAzNC4yNS0yLjQzIDEuOHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTY1LjY1IDExNC40M2wtMC41OC0zIDI2LjU2LTEzLjMgMC41OSAzLTI2LjU3IDEzLjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE2NS42NSAxMTQuNDNsLTAuNTgtMyAyNi41Ni0xMy4zIDAuNTkgMy0yNi41NyAxMy4zeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xNTcuNDMgMTA3Ljg0bC02LjI4LTMxLjA2IDMtMC42IDYuMjggMzEuMDYtMyAwLjZ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE1Ny40MyAxMDcuODRsLTYuMjgtMzEuMDYgMy0wLjYgNi4yOCAzMS4wNi0zIDAuNnoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTU5LjEzIDE1MC45OWwtMy0wLjE4IDItMzEgMyAwLjE3LTIgMzEuMDF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE1OS4xMyAxNTAuOTlsLTMtMC4xOCAyLTMxIDMgMC4xNy0yIDMxLjAxeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMjAuNzggODcuNjZsLTAuODgtMi44OSAzMi4yOS05Ljc0IDAuODggMi45LTMyLjI5IDkuNzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEyMC43OCA4Ny42NmwtMC44OC0yLjg5IDMyLjI5LTkuNzQgMC44OCAyLjktMzIuMjkgOS43M3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTk4LjEzIDE2Ny4xMWwtMi44Mi0xLjEgOC44MS0yMi41NyAyLjgyIDEuMS04LjgxIDIyLjU3eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xOTguMTMgMTY3LjExbC0yLjgyLTEuMSA4LjgxLTIyLjU3IDIuODIgMS4xLTguODEgMjIuNTd6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTIwMi44MyAxMzMuNjZsLTEzLjUzLTMzLjYgMi43MS0xLjM0IDEzLjUgMzMuNjEtMi42OCAxLjMzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yMDIuODMgMTMzLjY2bC0xMy41My0zMy42IDIuNzEtMS4zNCAxMy41IDMzLjYxLTIuNjggMS4zM3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjEzLjEgMTM3LjQ3bC0xLjM2LTIuNyAyNC4yNC0xNyAxLjM2IDIuNzEtMjQuMjQgMTYuOTl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTIxMy4xIDEzNy40N2wtMS4zNi0yLjcgMjQuMjQtMTcgMS4zNiAyLjcxLTI0LjI0IDE2Ljk5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yNDcuNjggMTY0Ljg2bC0zNy4yOS0yMS4wNiAxLjQ4LTIuNjQgMzcuMyAyMS4wNy0xLjQ5IDIuNjN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI0Ny42OCAxNjQuODZsLTM3LjI5LTIxLjA2IDEuNDgtMi42NCAzNy4zIDIxLjA3LTEuNDkgMi42M3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjg1Ljg2IDE0My4zNmwtMTkuMDktMzcuNzYgMi43LTEuMzYgMTkuMDkgMzcuNzYtMi43IDEuMzZ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI4NS44NiAxNDMuMzZsLTE5LjA5LTM3Ljc2IDIuNy0xLjM2IDE5LjA5IDM3Ljc2LTIuNyAxLjM2eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yOTcuNzcgOTcuNjFsLTI2Ljc1IDQuNjggMC42NC0zIDI2Ljc1LTQuNjgtMC42NCAzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yOTcuNzcgOTcuNjFsLTI2Ljc1IDQuNjggMC42NC0zIDI2Ljc1LTQuNjgtMC42NCAzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yNjkuODIgOTQuMjdsLTIuODMtMS4wOSAxMy4xOS0zOC45MyAyLjgyIDEuMDktMTMuMTggMzguOTN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI2OS44MiA5NC4yN2wtMi44My0xLjA5IDEzLjE5LTM4LjkzIDIuODIgMS4wOS0xMy4xOCAzOC45M3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjU5LjgzIDk3LjA0bC0xOS41Ni0yMi42OSAyLTIuMjkgMTkuNTcgMjIuNjktMi4wMSAyLjI5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yNTkuODMgOTcuMDRsLTE5LjU2LTIyLjY5IDItMi4yOSAxOS41NyAyMi42OS0yLjAxIDIuMjl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTIzNi42NiAxMjEuOThsLTItMi4yMyAyNi45NC0xNy4zMyAyIDIuMjMtMjYuOTQgMTcuMzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTIzNi42NiAxMjEuOThsLTItMi4yMyAyNi45NC0xNy4zMyAyIDIuMjMtMjYuOTQgMTcuMzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTMwLjQxIDg1LjA3bC0xLTIuODYgNDUuNjQtMTUuNTEgMSAyLjg3LTQ1LjY0IDE1LjV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTMwLjQxIDg1LjA3bC0xLTIuODYgNDUuNjQtMTUuNTEgMSAyLjg3LTQ1LjY0IDE1LjV6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTExMi44OSA4Mi45M2wtNC43NC0xOSAyLjkzLTAuNzMgNC43NSAxOS0yLjk0IDAuNzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTExMi44OSA4Mi45M2wtNC43NC0xOSAyLjkzLTAuNzMgNC43NSAxOS0yLjk0IDAuNzN6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEyOC4yNiAxMTMuMjRsLTEwLjYxLTE4LjcxIDIuNjMtMS40OSAxMC42MSAxOC43MS0yLjYzIDEuNDl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTEyOC4yNiAxMTMuMjRsLTEwLjYxLTE4LjcxIDIuNjMtMS40OSAxMC42MSAxOC43MS0yLjYzIDEuNDl6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE1NC4yNyAxMTUuMTVsLTI1LTAuM3YtM2wyNSAwLjI5djMuMDF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTE1NC4yNyAxMTUuMTVsLTI1LTAuM3YtM2wyNSAwLjI5djMuMDF6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTg2LjE4IDYyLjMxbC0yLjUxLTEuNjggMjcuNjMtNDEuMjggMi41MiAxLjY4LTI3LjY0IDQxLjI4eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im04Ni4xOCA2Mi4zMWwtMi41MS0xLjY4IDI3LjYzLTQxLjI4IDIuNTIgMS42OC0yNy42NCA0MS4yOHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTQ2Ljc4IDE4MC43NmwtMzIuMzUtMjcuMTkgMi4zMS0xLjk1IDMyLjM1IDI3LjItMi4zMSAxLjk0eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNDYuNzggMTgwLjc2bC0zMi4zNS0yNy4xOSAyLjMxLTEuOTUgMzIuMzUgMjcuMi0yLjMxIDEuOTR6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE1NSAxNzkuNDlsLTIuOTMtMC43NyA0LjgzLTI4LjE5IDIuOTMgMC43Ny00LjgzIDI4LjE5eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNTUgMTc5LjQ5bC0yLjkzLTAuNzcgNC44My0yOC4xOSAyLjkzIDAuNzctNC44MyAyOC4xOXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTE1LjQgMTUzLjU3bC0wLjMyLTMgNDMuMzctMS40OCAwLjMyIDMtNDMuMzcgMS40OHoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTE1LjQgMTUzLjU3bC0wLjMyLTMgNDMuMzctMS40OCAwLjMyIDMtNDMuMzcgMS40OHoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTU3LjY2IDE1Mi4yMWwtMC44OS0yLjg5IDQ0LjMzLTEwLjE2IDAuODkgMi44OS00NC4zMyAxMC4xNnoiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTU3LjY2IDE1Mi4yMWwtMC44OS0yLjg5IDQ0LjMzLTEwLjE2IDAuODkgMi44OS00NC4zMyAxMC4xNnoiLz4KPHBhdGggY2xhc3M9ImNscy04IiBkPSJtMTUzLjM0IDI0Mi40N2gtM3YtNTMuMzFoM3Y1My4zMXoiLz4KPHBhdGggY2xhc3M9ImNscy04IiBkPSJtMTI3LjkzIDI0My42OWgtM3YtMzMuMDZoM3YzMy4wNnoiLz4KPHBhdGggY2xhc3M9ImNscy01IiBkPSJtNTAuMzggMTA5LjkzYTUuODEgNS44MSAwIDEgMSAtNS4wOSAtNi40NCA1LjggNS44IDAgMCAxIDUuMDkgNi40NCIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00NC42MDAwMSAxMDQuOTI5OTlhNC4zMiA0LjMyIDAgMSAwIC41MSAwaC0uNTFtMCAxMS42MWE2LjA2IDYuMDYgMCAwIDEtLjg1LS4wNSA3LjMyIDcuMzIgMCAxIDEgNi41OC0xMS44MSA3LjIzIDcuMjMgMCAwIDEgMS41MyA1LjM5IDcuMzEgNy4zMSAwIDAgMS03LjI2IDYuNDciLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNDQuNjAwMDEgMTA0LjkyOTk5YTQuMzIgNC4zMiAwIDEgMCAuNTEgMGgtLjUxem0uNTEgMTEuNjFhNi4wNiA2LjA2IDAgMCAxLS44NS0uMDUgNy4zMiA3LjMyIDAgMSAxIDYuNTgtMTEuODEgNy4yMyA3LjIzIDAgMCAxIDEuNTMgNS4zOSA3LjMxIDcuMzEgMCAwIDEtNy43NSA2LjVsLjQ5LS4wM3oiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNTAuMzQgMTA4LjE5bC0xLjA4LTIuODMgMjcuMTItMTAuMzEgMS4xMyAyLjg4LTI3LjE3IDEwLjI2eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im01MC4zNCAxMDguMTlsLTEuMDgtMi44MyAyNy4xMi0xMC4zMSAxLjEzIDIuODgtMjcuMTcgMTAuMjZ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEyLjE2IDEyNS41OGwtMC44NC0yLjkxIDI3LjUzLTEyLjY0IDAuODMgMi45LTI3LjUyIDEyLjY1eiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xMi4xNiAxMjUuNThsLTAuODQtMi45MSAyNy41My0xMi42NCAwLjgzIDIuOS0yNy41MiAxMi42NXoiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjIyLjUxIDE4LjQyYTEyLjIgMTIuMiAwIDEgMSAtMTAuNjkgLTEzLjQ5IDEyLjIgMTIuMiAwIDAgMSAxMC42OSAxMy40OSIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xNzMuMzIgMTIuNjFhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjY5IC0xMy41MiAxMi4xOSAxMi4xOSAwIDAgMSAxMC42OSAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMjQuODIgMjIuMDlhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNzUuODkgNDcuMzlhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNDIuMzEgODUuMzlhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjQuMzEgMTI1LjM1YTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MiAxMi4xOSAxMi4xOSAwIDAgMSAxMC43IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTI3LjU2IDE3MC42OGExMi4xOSAxMi4xOSAwIDEgMSAtOS40IC0xMS45IDEyLjE5IDEyLjE5IDAgMCAxIDkuNCAxMS45Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTU1LjEzIDIwNy4xYTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MiAxMi4yMSAxMi4yMSAwIDAgMSAxMC43IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTk1LjY5IDIxNy4zOGExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMiAxMi4yIDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTM4LjI2IDIwOS4yNGExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0xNzAuNDMgMTUyLjkzYTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MiAxMi4yIDEyLjIgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yMTAuMDkgMTY4LjEzYTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MiAxMi4xOSAxMi4xOSAwIDAgMSAxMC43IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI1OS44OCAxNjUuOThhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjk5LjA1IDE0NC42NGExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTMgMTIuMiAxMi4yIDAgMCAxIDEwLjcgMTMuNTMiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMzA5Ljk3IDk3LjcyYTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MiAxMi4xOSAxMi4xOSAwIDAgMSAxMC43IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTI5NC41MSA1Ni44MWExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0yNTMuNzYgNzQuODdhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTk5LjYyIDUzLjU0YTEyLjE5IDEyLjE5IDAgMSAxIC0xMC43IC0xMy41MyAxMi4yIDEyLjIgMCAwIDEgMTAuNyAxMy41MyIvPgo8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0xMjIuMjggNjUuNzZhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtODkuNTEgOTcuMzZhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtNzIuNyAxMzcuMjVhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjIgMTIuMiAwIDAgMSAxMC43IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTkxLjUxIDE3Ni4xOGExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0xNDIuMSAxMTQuOTNhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUzIDEyLjIgMTIuMiAwIDAgMSAxMC43IDEzLjUzIi8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTIwMy4zIDEwMi4yNWExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0yNDcuODEgMTIyYTEyLjIgMTIuMiAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMiAxMi4yIDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy02IiBkPSJtMTI4LjI5IDE1NC44MmExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMiAxMi4yIDAgMCAxIDEwLjcgMTMuNTIiLz4KPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMTY0LjUxIDc5LjExYTEyLjE5IDEyLjE5IDAgMSAxIC0xMC42OSAtMTMuNTIgMTIuMiAxMi4yIDAgMCAxIDEwLjY5IDEzLjUyIi8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI1OS42NSAzMmExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0yNTkuNjUgMzJhMTIuMTkgMTIuMTkgMCAxIDEgLTEwLjcgLTEzLjUyIDEyLjE5IDEyLjE5IDAgMCAxIDEwLjcgMTMuNTJ6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTE1Ny40MiAxODRsLTAuODktMi44OSAzOS4wOC0xNC41MyAwLjkgMi44OS0zOS4wOSAxNC41M3oiLz4KPHBhdGggY2xhc3M9ImNscy0zIiBkPSJtMTU3LjQyIDE4NGwtMC44OS0yLjg5IDM5LjA4LTE0LjUzIDAuOSAyLjg5LTM5LjA5IDE0LjUzeiIvPgo8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0yODIuODIgNTYuNzNsLTAuODctMi45IDQ5LjYyLTMwLjEzIDAuODcgMi44OS00OS42MiAzMC4xNHoiLz4KPHBhdGggY2xhc3M9ImNscy03IiBkPSJtMjgyLjgyIDU1LjczbC0wLjg3LTIuOSA0OS42Mi0zMC4xMyAwLjg3IDIuODktNDkuNjIgMzAuMTR6Ii8+CjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0ibTM0NS4wNyAyNi41MWExMi4xOSAxMi4xOSAwIDEgMSAtMTAuNyAtMTMuNTIgMTIuMTkgMTIuMTkgMCAwIDEgMTAuNyAxMy41MiIvPgo8L3N2Zz4K'); background-size: 16px 16px; } } .np1746:before { /* Refinitiv News Feed, Realtime */ background-image: url('data:image/png;base64,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'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1746:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MDggMjI5LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOCAyMjkuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7fQoJLnN0MXtmaWxsOiMwMDFFRkY7fQo8L3N0eWxlPgo8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iNTA4IiBoZWlnaHQ9IjIyOS40Ii8+CjxnPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQ2Mi40LDE4My44aC0xNC43bC01MS40LTUxLjRINDU1djEwLjNoLTMzLjdMNDYyLjQsMTgzLjh6IE00NTUsOTEuM2gtOTIuNXY5Mi41aDEwLjN2LTgyLjJINDU1VjkxLjN6Ii8+Cgk8cGF0aCBkPSJNNzAuNyw5MS4zaDkuMUw2OS43LDcwLjhsMC4zLTAuMWM1LjMtMS41LDguMy01LjcsOC4yLTExLjZjLTAuMS04LjUtNS40LTEzLjQtMTQuNS0xMy40SDQ1LjZ2NDUuNmg4LjJWNzIuNEg2Mkw3MC43LDkxLjN6CgkJIE01My45LDY1LjlWNTIuMmg4LjRjNS4xLDAsNy44LDIuNCw3LjgsNi44YzAsNC45LTIuNyw2LjgtOS4zLDYuOEg1My45eiBNMTEzLjQsNzAuOXYtNi44SDk3LjZWNTIuNWgyMS44di02LjhoLTMwdjQ1LjZoMzAuN3YtNi44CgkJSDk3LjZWNzAuOUgxMTMuNHogTTE1NSw2NC4xaC0xNS40VjUyLjVoMjAuNnYtNi44aC0yOC45djQ1LjZoOC4yVjcwLjlIMTU1VjY0LjF6IE0xNzAsNDUuNnY0NS42aDguMnYtMi43VjQ1LjZIMTcweiBNMjQxLjQsNDUuNgoJCXY0NS42aDguMnYtMy40VjQ1LjZIMjQxLjR6IE0yOTIuMiw0NS42aC0zMi40djYuOGgxMi4xdjM4LjhoOC4yVjUyLjVoMTIuMVY0NS42eiBNMzAyLjIsNDUuNnY0NS42aDguMnYtMy40VjQ1LjZIMzAyLjJ6CgkJIE0yMTkuOCw0NS42Vjc4aC0wLjFMMjAxLDQ1LjZoLTguOHY0NS42aDcuN1Y1Ny41aDAuMWwxOS40LDMzLjdoOFY0NS42SDIxOS44eiBNMzQ5LjUsNDUuNmwtMTAuNywzN2gtMC4xbC0xMC43LTM3aC04LjFMMzM0LDkxLjMKCQloOS40bDE0LjEtNDUuNkgzNDkuNXoiLz4KPC9nPgo8cGF0aCBkPSJNMzY5LjcsNTEuNmMxLTAuMSwyLTAuNywyLTIuMWMwLTEuMy0wLjktMi4yLTIuMi0yLjJoLTIuN3Y3LjNoMC43di0zaDEuNWwyLDNsMCwwaDAuOUwzNjkuNyw1MS42eiBNMzcxLDQ5LjUKCWMwLDAuOS0wLjYsMS41LTEuNSwxLjVoLTJ2LTNoMkMzNzAuMyw0OCwzNzEsNDguNiwzNzEsNDkuNXoiLz4KPHBhdGggZD0iTTM2OC45LDU3LjJjLTMuNSwwLTYuMy0yLjgtNi4zLTYuM2MwLTMuNSwyLjgtNi4zLDYuMy02LjNzNi4zLDIuOCw2LjMsNi4zQzM3NS4yLDU0LjQsMzcyLjQsNTcuMiwzNjguOSw1Ny4yeiBNMzY4LjksNDUuNAoJYy0zLjEsMC01LjYsMi41LTUuNiw1LjZjMCwzLjEsMi41LDUuNiw1LjYsNS42czUuNi0yLjUsNS42LTUuNkMzNzQuNSw0Ny45LDM3Miw0NS40LDM2OC45LDQ1LjR6Ii8+Cjwvc3ZnPgo='); background-size: 16px 16px; } } .np1745:before { /* Cercle Finance, Realtime. */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKGSURBVDhPZZLrT9pQGMb7ry3Zp31fpqFlThNMNoZaM7L5wS0zYeBcZtRMXHQbLk6dkE1LWxQvlaA1IiQ4hVNqkTvMSwWFYoWWtYjLLr8PJydvnue87znngWr/cVi8cqfPiShP5Yq5cqVRveEvgyd73ksnW12sFmdacAbBgc590O/PhPKXDcVvQ0WWP4ITWBFhQOsEsBMgTgZ2Mspeg4Vbl9jFZP5a2TB8iZw0Y6CVADAOnnjj4+HjuSg/unf0eDWKOMEDHMBEZCN30TCEhFrzckKZ4T7BTDInhYpUP0QlI1Qs/jSCq6261qO8WIFKxaJ11mFyLD6k4h+ipYbwD8Ra7WWQh0lOu5xYzQrQzMx0mxZZIpymlZ0Jx3wydhgKhUiSjMViNE1TFHVRyA9/ne9x+dusc1NbPyCbzdZpMJj6+p6inajBoNfrURQ1Go3t7e0ddXQ63cjg24l3w3du3xqwmCGfzzc++XlwbOz10LCHosasVrPZ3N3dbbFY5uu8GRjof2Ua/WRr0mhm7XZIkqT+QLpjlXu0wvl+qu8giuLp6Wn1BqUyvXuoX+P0rn07e6y+0kQkf5eMdXoz35Kq4R/iQkXvSSo/00SwG7kSJMty6iy/FjkIBOk48OGpi+CZINelZVmmj4pdnpjy8TAGereSQlWCxHIp4F2gsPekfWhvx/1iJ6sh2efbKVMg27OZaHFFWnCAYGHdMscU1ICoI6XjAHOM4Pah4C5tpDP3vodgLKwkQlm1WFhJAOqJ7/JCvWsNEi9L3pXZbe9CYNMZAYEproCux9rcHOJilVOfbSSmD3j+Sr36NRB/lPLThCgKUrUqlotKSYkGey7u5y+jxauydH2dG2q1X2+AXomosYITAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1745:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKGSURBVDhPZZLrT9pQGMb7ry3Zp31fpqFlThNMNoZaM7L5wS0zYeBcZtRMXHQbLk6dkE1LWxQvlaA1IiQ4hVNqkTvMSwWFYoWWtYjLLr8PJydvnue87znngWr/cVi8cqfPiShP5Yq5cqVRveEvgyd73ksnW12sFmdacAbBgc590O/PhPKXDcVvQ0WWP4ITWBFhQOsEsBMgTgZ2Mspeg4Vbl9jFZP5a2TB8iZw0Y6CVADAOnnjj4+HjuSg/unf0eDWKOMEDHMBEZCN30TCEhFrzckKZ4T7BTDInhYpUP0QlI1Qs/jSCq6261qO8WIFKxaJ11mFyLD6k4h+ipYbwD8Ra7WWQh0lOu5xYzQrQzMx0mxZZIpymlZ0Jx3wydhgKhUiSjMViNE1TFHVRyA9/ne9x+dusc1NbPyCbzdZpMJj6+p6inajBoNfrURQ1Go3t7e0ddXQ63cjg24l3w3du3xqwmCGfzzc++XlwbOz10LCHosasVrPZ3N3dbbFY5uu8GRjof2Ua/WRr0mhm7XZIkqT+QLpjlXu0wvl+qu8giuLp6Wn1BqUyvXuoX+P0rn07e6y+0kQkf5eMdXoz35Kq4R/iQkXvSSo/00SwG7kSJMty6iy/FjkIBOk48OGpi+CZINelZVmmj4pdnpjy8TAGereSQlWCxHIp4F2gsPekfWhvx/1iJ6sh2efbKVMg27OZaHFFWnCAYGHdMscU1ICoI6XjAHOM4Pah4C5tpDP3vodgLKwkQlm1WFhJAOqJ7/JCvWsNEi9L3pXZbe9CYNMZAYEproCux9rcHOJilVOfbSSmD3j+Sr36NRB/lPLThCgKUrUqlotKSYkGey7u5y+jxauydH2dG2q1X2+AXomosYITAAAAAElFTkSuQmCC'); background-size: 16px 16px; } } .np1812:before, .np1813:before { /* ABM News Belgium, Realtime. */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAmCAYAAABQ3RJZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0 MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNl SUQ9InhtcC5paWQ6MzdBRjE1OEU2QUJDMTFFMjhCNEZGQ0Y2NkIyRjFDREYiIHhtcE1NOkRvY3Vt ZW50SUQ9InhtcC5kaWQ6MzdBRjE1OEY2QUJDMTFFMjhCNEZGQ0Y2NkIyRjFDREYiPiA8eG1wTU06 RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozN0FGMTU4QzZBQkMxMUUyOEI0 RkZDRjY2QjJGMUNERiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozN0FGMTU4RDZBQkMxMUUy OEI0RkZDRjY2QjJGMUNERiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w bWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrWzFlIAAAIsSURBVHja7JhBTsJQEIZb4gFw4R5PQG9g ewEh0aisgL2JcALoCYDEPWVlTEwoXgC8QblBvUH3LnDGzJBhnEKCK8ybZKC8ee/1m//Ney/B32w2 3qlZxTtBc9AO2kE7aAftoB002hl++L6/bbh+XnTgqw2evz82urIzxJbGHAvwBPoWEA/geUTtH9A2 VHOizVoXX574LS3DOM3Rb93fZhx4eX3DOeoPdzd9S+kn8BC8Ay+rqVho+EiAVkW7hGqL9hp5WCJk VcwrDccEW6WFklUOkDXBx8bEkUhigAmCd/VLcD5cgTJAUDLSbaAo9w3xGfqszPJQkGg5Zda2oAGE J1oB2GBP+QUQL44sXWSYgl8egm7Q94SWB19aA8hcrciQHusMb9RmQAozdEFLb6nKyst5+uBzrGVo T8zTg0qDlcZOqVJf2oCcYzMDGu1qT2JoS+UygZTGDAC8WqZ0U6mUi02kSyQWUKjWFJKWUJ80PhDq rg0BogMlElMyvTJoLo1AZf2rRPgooxWaE0xHqZlRe1CismdtMh0HlRM60RLrcmmKZWQv9pSIPKIs WxvlcozF9I7ejtKg1vbUABUjoWKPNuROiYhLRm6kVCWworrnBGrHEIPaOag9ltAVVRqpGpPKEjEu GbYxJJuVbMa/Ks1qFxp6QpsiVudxTu0RDYoMP4d+fQEX8bXOfSihhGPi2Su5yiOlNs/18x7f/e/h oB20g3bQDtpBO2gH/Q+hvwUYALQCxOjIjzQPAAAAAElFTkSuQmCC'); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1812:before, .np1813:before { background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53 My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTguNzRtbSIgaGVpZ2h0PSI2Ni42M21tIiB2aWV3Qm94 PSIwIDAgMzM2LjU4IDE4OC44NyI+PHBhdGggZD0iTTMzNi42MSwxNDguMTZIMHYtMkgzMzYuNjFa Ii8+PHBhdGggZD0iTTMzNi42MSwxODguNjZIMHYtMkgzMzYuNjFaIi8+PHBhdGggZD0iTTkuMDYs MTc1VjE1Ny45aDkuNDZ2MmgtNy42djUuM0gxNy41djJIMTAuOTJWMTc1WiIvPjxwYXRoIGQ9Ik0z My4yLDE3NVYxNTcuOWgxLjg1VjE3NVoiLz48cGF0aCBkPSJNNTAuMTksMTc1VjE1Ny45aDEuOWw3 LjM3LDEzLjQ2VjE1Ny45aDEuNzdWMTc1aC0xLjlMNTIsMTYxLjU1VjE3NVoiLz48cGF0aCBkPSJN NzQuNzksMTc1LDgwLjIsMTU3LjloMkw4Ny45MywxNzVIODUuOGwtMS42My01LjE4aC01LjlMNzYu NzUsMTc1Wm00LTdoNC43OGwtMS40Ni00LjczYy0uNDUtMS40Ni0uNzgtMi42NC0xLTMuNTVhMjUs MjUsMCwwLDEtLjc3LDMuMjdaIi8+PHBhdGggZD0iTTEwMS4yOCwxNzVWMTU3LjloMS45MWw3LjM3 LDEzLjQ2VjE1Ny45aDEuNzdWMTc1aC0xLjlsLTcuMzYtMTMuNDZWMTc1WiIvPjxwYXRoIGQ9Ik0x MzcuMzgsMTY5bDEuODcuNTdhOCw4LDAsMCwxLTIuMTcsNC4zLDUuMzMsNS4zMywwLDAsMS0zLjc2 LDEuNDIsNS43NSw1Ljc1LDAsMCwxLTMuMzMtMSw2LjY5LDYuNjksMCwwLDEtMi4yNi0zLjA2LDEy LjcsMTIuNywwLDAsMS0uODktNSwxMS41OSwxMS41OSwwLDAsMSwuODktNC43OCw2LjY5LDYuNjks MCwwLDEsMi4zOC0zLDYsNiwwLDAsMSwzLjM3LTEsNS4xNiw1LjE2LDAsMCwxLDMuNDksMS4yNiw2 Ljg5LDYuODksMCwwLDEsMiwzLjcxbC0xLjgyLjUzYy0uNjItMi4zOC0xLjg3LTMuNTYtMy43NS0z LjU2YTQuMTUsNC4xNSwwLDAsMC0yLjQzLjcyLDQuODMsNC44MywwLDAsMC0xLjY0LDIuMjMsMTAu MywxMC4zLDAsMCwwLS42MSwzLjg0QTkuMiw5LjIsMCwwLDAsMTMwLDE3MS42YTMuODQsMy44NCww LDAsMCwzLjI5LDEuNzYsMy41OSwzLjU5LDAsMCwwLDIuNjItMS4wOEE1LjgsNS44LDAsMCwwLDEz Ny4zOCwxNjlaIi8+PHBhdGggZD0iTTE1My44NiwxNzVWMTU3LjloMS44NlYxNzVaIi8+PHBhdGgg ZD0iTTE2OS4zNywxNzVsNS40MS0xNy4xMWgyTDE4Mi41MSwxNzVoLTIuMTNsLTEuNjMtNS4xOGgt NS45TDE3MS4zMywxNzVabTQtN2g0Ljc4bC0xLjQ2LTQuNzNjLS40NS0xLjQ2LS43OC0yLjY0LTEt My41NUEyNSwyNSwwLDAsMSwxNzUsMTYzWiIvPjxwYXRoIGQ9Ik0xOTUuOCwxNzVWMTU3LjloMS44 NlYxNzNoNi45MXYyWiIvPjxwYXRoIGQ9Ik0yMzUuMzksMTc1VjE1Ny45aDEuOWw3LjM3LDEzLjQ2 VjE1Ny45aDEuNzhWMTc1aC0xLjkxbC03LjM2LTEzLjQ2VjE3NVoiLz48cGF0aCBkPSJNMjYxLjU3 LDE3NVYxNTcuOUgyNzEuN3YyaC04LjI4djUuMjNoNy43NnYyaC03Ljc2VjE3M0gyNzJ2MloiLz48 cGF0aCBkPSJNMjg5LDE3NSwyODUuMywxNTcuOWgxLjlsMi4xNCwxMS4yMmMuMjIsMS4xNS40Miwy LjMxLjU5LDMuNWwuNjMtMy4xNywyLjY3LTExLjU1aDIuMjVsMiw4LjY2Yy40OCwyLjExLjg1LDQu MTMsMS4wOSw2LjA2LjE4LTEuMTIuNDEtMi4zNi42OS0zLjczbDIuMjEtMTFoMS44NkwyOTkuNDks MTc1SDI5Ny43bC0zLTEzLS40NC0yYy0uMTQuNzUtLjI3LDEuNDEtLjQxLDJsLTMsMTNaIi8+PHBh dGggZD0iTTMxNi4zNSwxNjkuNWwxLjc1LS4xOWE1LjE4LDUuMTgsMCwwLDAsLjY0LDIuMiwzLjUy LDMuNTIsMCwwLDAsMS40MiwxLjI3LDQuMzksNC4zOSwwLDAsMCwyLjA3LjQ4LDMuNzgsMy43OCww LDAsMCwyLjU4LS44MSwyLjY3LDIuNjcsMCwwLDAsLjkxLTIuMSwyLjU0LDIuNTQsMCwwLDAtLjMz LTEuMzIsMi41MSwyLjUxLDAsMCwwLTEtLjkzLDE5LjI5LDE5LjI5LDAsMCwwLTIuOS0xLDEwLjMx LDEwLjMxLDAsMCwxLTIuODMtMS4xOCw0LjA3LDQuMDcsMCwwLDEtMS4zLTEuNTIsNC41MSw0LjUx LDAsMCwxLS40Ny0yLjA3LDQuNTcsNC41NywwLDAsMSwxLjM0LTMuMzksNC45NCw0Ljk0LDAsMCwx LDMuNjItMS4zMiw1Ljc5LDUuNzksMCwwLDEsMi43My42MkE0LjM3LDQuMzcsMCwwLDEsMzI2LjQs MTYwYTUuNzQsNS43NCwwLDAsMSwuNywyLjcybC0xLjc5LjE2YTMuNjQsMy42NCwwLDAsMC0xLTIu NDcsMy4zNSwzLjM1LDAsMCwwLTIuNC0uOCwzLjY1LDMuNjUsMCwwLDAtMi40MS43LDIuMywyLjMs MCwwLDAtLjgzLDEuODMsMi4xMiwyLjEyLDAsMCwwLC42MSwxLjYxLDcuMzcsNy4zNywwLDAsMCwy LjczLDEuMTUsMTkuMzIsMTkuMzIsMCwwLDEsMi45MiwxLDQuNDksNC40OSwwLDAsMSwyLjU5LDQu MjcsNS4yNiw1LjI2LDAsMCwxLS42OSwyLjY3LDQuNiw0LjYsMCwwLDEtMS44NywxLjg0LDYsNiww LDAsMS0yLjg2LjYzLDUuNTYsNS41NiwwLDAsMS00LjE0LTEuNTZBNiw2LDAsMCwxLDMxNi4zNSwx NjkuNVoiLz48cGF0aCBkPSJNMTA5LjYyLDEzMy4xNEg4NS43Mkw3Ni4xNiwxMDNIMzIuNDZsLTks MzAuMTVIMEw0Mi41MSwwSDY1Ljg2Wk02OS4wNyw4MC40Nyw1NCwzMS4wNiwzOS4yLDgwLjQ3WiIg c3R5bGU9ImZpbGw6IzRkOTRiMSIvPjxwYXRoIGQ9Ik0xMjEuMTUsMGg0My43M3ExNy45MSwwLDI1 LjE5LDMuMjdUMjAyLjM0LDE0LjhhMzUuMzgsMzUuMzgsMCwwLDEsNSwxOC43MSwzNS40MywzNS40 MywwLDAsMS00LjI4LDE3LjM5LDI4LjA3LDI4LjA3LDAsMCwxLTExLjEzLDExLjQ5QTI5LjUxLDI5 LjUxLDAsMCwxLDIwNy4xMiw3NC4ycTUuNDksOC4zNSw1LjQ5LDIwLjM0LDAsMTQuNTMtNywyNC41 N3QtMTYuNTMsMTIuNHEtNi42MywxLjYzLTMwLjc5LDEuNjNIMTIxLjE1Wm0yMiwyMi4xNlY1M2gx NC41M3ExMy4wOCwwLDE2LjE3LS40NmExMy43OCwxMy43OCwwLDAsMCw4LjgxLTQuNzZxMy4xOC0z Ljg3LDMuMTgtMTAuNDlhMTYuMzcsMTYuMzcsMCwwLDAtMi41OS05LjU5QTEwLjc4LDEwLjc4LDAs MCwwLDE3NywyMy4wN3EtMy42OC0uOTEtMjEuMTEtLjkxWm0wLDUzdjM1LjUxaDIwLjQ4cTEzLjQ1 LDAsMTcuMjktMS40YTEyLjksMTIuOSwwLDAsMCw2LjQxLTUuNTMsMTkuMzEsMTkuMzEsMCwwLDAs Mi41OS0xMC40NiwxOS4xNywxOS4xNywwLDAsMC0yLjc3LTEwLjc0LDE0LjIsMTQuMiwwLDAsMC03 LjM3LTUuOHEtNC42LTEuNTctMTguNzktMS41OFoiIHN0eWxlPSJmaWxsOiM0ZDk0YjEiLz48cGF0 aCBkPSJNMjMxLDEzMy4xNFYwaDMzbDE5Ljg1LDkwLjkxTDMwMy40NiwwaDMzLjEyVjEzMy4xNEgz MTYuMDVWMjguMjVMMjk0LjI5LDEzMy4xNEgyNzMuMDhMMjUxLjQ4LDI4LjI1VjEzMy4xNFoiIHN0 eWxlPSJmaWxsOiM0ZDk0YjEiLz48L3N2Zz4='); background-size: 16px 16px; } } .np1802:before { /* ET Net Hong Kong News, Realtime */ background-image: url('data:image/png;base64,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 RK5CYII='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1802:before { background-image: url('data:image/png;base64,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 RK5CYII='); background-size: 16px 16px; } } .np1807:before, .np1831:before { /* CSOP Hong Kong News, Realtime */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC5VBMVEUAAAD39fGuwNbf3dp9 ncTW19ipvdZFWHGRpLfVy78SOWzAxs7//82HkqTr5+P////////g3tzAwseQnrBogqNLcqBSfK1h ibmLp8nX3ufy7+zCxcmhrbmQorRMeKxSgbdoj72yxNrn5eKaprVYep1Lfrlzl8Kzxdn///uAj6FL frlvlcH///+Um6Q/YIdWg7iVr85ufZJtkb1PZoVUf7JdhbNbdJVReKh7j6lniLCPnKs1WIY5Zppv jrLAvblacI5iharh5eyVnahFYIRph6ezv8yKkp1KZIYoTX9+kqmptMHT1degpqxsf5lHZYyTn6+7 v8bc2tn39PGQpbmiscCjrrt5kK06bqA2d60+hLxOlMp5q9K0wcyXpLRQfbI5Yo0pYZgxcak5gLpC kMtTndZlp9uEtd2/ytOQoLJOgbojV44uaJ8zd69Di8NXndJqp9iBt+OPwOiqyuTFx8tvj7NJgL4l UIImW5Eva6Jik72xxtfK1d+0w9GXuNSq0/Gv1fDN1dybqrtQhcBHerUfTIIlWpFRf6vHz9fKztOh t9De5OrJztKuzeKw2PPM2OK5wcpZisFEeLRCXH8eS4IlWY+LpL3R0dJwja92nszv8vXr6uusw9ea x+u+xs5Zib9BdLFEX4IeSYEoWY6puMi7wMZOeayAo8z4+Pnt7e2butWRvuLY3eGkscFLfbY/cKtd g7AeSH8mVImqt8a2vcdJdKheiLne5OvX296Vt9TF1uXU1dZwjbBCdK87a6QlTYIgTIKQo7mzuL9F bJw8bKZ7m8HJ097b3+TO09mEmrZEcqk8bKU4ZZ0bRn5cep+7vsJRbpEyYpo6aKFQeqxlibVVfaw+ bKQ5aKEzYZohSX4pUISap7iNl6IwWoktXZUxYJkyYZozYpsyYZksXJQvX5IfR309YI2irLmDj504 XoYkVYokVo0kVow5Y5I5XIuImK2dpK58jJ9ke5dkfZk0V4VMapF0iKL////Gmx3VAAAAU3RSTlMA AAAAAAAAAAAAAAAAAAAAAjCMyMvLyIw7AxaA4f7+6IEWHLX9/bMWBpL+igZJ7u5JsaHq0/v13cOx ZvfuSRK9oAc82rcePMP9+K8fG4Tf/cxlEV2EGf4AAAABYktHRA8YugDZAAAAB3RJTUUH5QUOAzIm n1m3BwAAARtJREFUGNMBEAHv/gAAAAEQERITFBUWFxgZAgAAAAADGhscHVNUVVYeHyAhBAAABSIj JFdYWVpbXF1eJSYnBgAoKV9gYWJjZGVmZ2hpKissAC0uamtsbW5vcHFyc3R1LzAAMXZ3eHl6e3x9 fn+AgYKDMgAzhIWGh4iJiouMjY6PkJE0AJKTlJWWl5iZmpucjp2enzUAoKGio6SlpqeoqaqrrK2u rwA2sLGys7S1tre4ubq7vL03ADi+v8DBwsPExcbHyMnKyzkAOjvMzc7P0NHS09TV1tc8PQA+P9jZ 2tvc3d7f4OHi40BBAAdCQ+Tl5ufo6erq6+xERQgACQpGR0jt7u/w8fJJSksLAAAADA1MTU7z9PVP UFFSDg8Al2d3MANp188AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDUtMTRUMDM6NTA6MzcrMDA6 MDDxHPGtAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA1LTE0VDAzOjUwOjM3KzAwOjAwgEFJEQAA AABJRU5ErkJggg=='); } @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .np1807:before, .np1831:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC5VBMVEUAAAD39fGuwNbf3dp9 ncTW19ipvdZFWHGRpLfVy78SOWzAxs7//82HkqTr5+P////////g3tzAwseQnrBogqNLcqBSfK1h ibmLp8nX3ufy7+zCxcmhrbmQorRMeKxSgbdoj72yxNrn5eKaprVYep1Lfrlzl8Kzxdn///uAj6FL frlvlcH///+Um6Q/YIdWg7iVr85ufZJtkb1PZoVUf7JdhbNbdJVReKh7j6lniLCPnKs1WIY5Zppv jrLAvblacI5iharh5eyVnahFYIRph6ezv8yKkp1KZIYoTX9+kqmptMHT1degpqxsf5lHZYyTn6+7 v8bc2tn39PGQpbmiscCjrrt5kK06bqA2d60+hLxOlMp5q9K0wcyXpLRQfbI5Yo0pYZgxcak5gLpC kMtTndZlp9uEtd2/ytOQoLJOgbojV44uaJ8zd69Di8NXndJqp9iBt+OPwOiqyuTFx8tvj7NJgL4l UIImW5Eva6Jik72xxtfK1d+0w9GXuNSq0/Gv1fDN1dybqrtQhcBHerUfTIIlWpFRf6vHz9fKztOh t9De5OrJztKuzeKw2PPM2OK5wcpZisFEeLRCXH8eS4IlWY+LpL3R0dJwja92nszv8vXr6uusw9ea x+u+xs5Zib9BdLFEX4IeSYEoWY6puMi7wMZOeayAo8z4+Pnt7e2butWRvuLY3eGkscFLfbY/cKtd g7AeSH8mVImqt8a2vcdJdKheiLne5OvX296Vt9TF1uXU1dZwjbBCdK87a6QlTYIgTIKQo7mzuL9F bJw8bKZ7m8HJ097b3+TO09mEmrZEcqk8bKU4ZZ0bRn5cep+7vsJRbpEyYpo6aKFQeqxlibVVfaw+ bKQ5aKEzYZohSX4pUISap7iNl6IwWoktXZUxYJkyYZozYpsyYZksXJQvX5IfR309YI2irLmDj504 XoYkVYokVo0kVow5Y5I5XIuImK2dpK58jJ9ke5dkfZk0V4VMapF0iKL////Gmx3VAAAAU3RSTlMA AAAAAAAAAAAAAAAAAAAAAjCMyMvLyIw7AxaA4f7+6IEWHLX9/bMWBpL+igZJ7u5JsaHq0/v13cOx ZvfuSRK9oAc82rcePMP9+K8fG4Tf/cxlEV2EGf4AAAABYktHRA8YugDZAAAAB3RJTUUH5QUOAzIm n1m3BwAAARtJREFUGNMBEAHv/gAAAAEQERITFBUWFxgZAgAAAAADGhscHVNUVVYeHyAhBAAABSIj JFdYWVpbXF1eJSYnBgAoKV9gYWJjZGVmZ2hpKissAC0uamtsbW5vcHFyc3R1LzAAMXZ3eHl6e3x9 fn+AgYKDMgAzhIWGh4iJiouMjY6PkJE0AJKTlJWWl5iZmpucjp2enzUAoKGio6SlpqeoqaqrrK2u rwA2sLGys7S1tre4ubq7vL03ADi+v8DBwsPExcbHyMnKyzkAOjvMzc7P0NHS09TV1tc8PQA+P9jZ 2tvc3d7f4OHi40BBAAdCQ+Tl5ufo6erq6+xERQgACQpGR0jt7u/w8fJJSksLAAAADA1MTU7z9PVP UFFSDg8Al2d3MANp188AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDUtMTRUMDM6NTA6MzcrMDA6 MDDxHPGtAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA1LTE0VDAzOjUwOjM3KzAwOjAwgEFJEQAA AABJRU5ErkJggg=='); background-size: 16px 16px; } } /********************************** * AUTO GENERATED FILE * * DO NOT EDIT * * * * Generated by grunt-image-embed * *********************************/ /** * APP ICONS * ===================================================================== * DEV NOTES: * - Logos rendered using SVG images * - Optimised for 16x16 pixel display (or multiples thereof) * - Creation procedure in Framework handbook (run "grunt image-embed:logo" to generate * source\less\common\base\logos\logo.less file, which is included into the bundle. * - Icons injected into DOM through pseudo-elements/classes. * - PNG for low resolution screens, SVG for retina. */ /* ==================================================================== =Autochartist Icon Sprite ================================================================= */ .logo-autochartist:before, .logo-autochartist-alt:before { content: ''; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; background-size: 156px 24px; height: 24px; display: inline-block; } .logo-autochartist:before { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iR09fSWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTU2LjkgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1Ni45IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0yNi44LDE4aDIuOGMxLjgsMCwyLjksMC4zLDIuOSwxLjl2My44aC0wLjl2LTAuNmgwYy0wLjMsMC41LTAuNSwwLjYtMiwwLjZoLTIuM2MtMS40LDAtMS44LTAuNi0xLjgtMS43DQoJCXYtMC40YzAtMS4zLDAuOS0xLjQsMi41LTEuNGgxLjVjMS4yLDAsMS43LDAuMSwyLDAuN2gwdi0xLjFjMC0xLTAuNi0xLjEtMi4xLTEuMWgtMi43IE0zMS42LDIxLjljMC0wLjgtMC43LTAuOS0yLjEtMC45SDI4DQoJCWMtMS4yLDAtMS42LDAuMi0xLjYsMC45djAuMmMwLDAuNiwwLjIsMC45LDEuNSwwLjloMS4yYzEuNywwLDIuNC0wLjEsMi40LTAuOFYyMS45eiIvPg0KCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik00MC41LDIyLjdMNDAuNSwyMi43Yy0wLjQsMC45LTEuMSwxLjEtMi4zLDEuMWgtMS40Yy0xLjgsMC0yLjMtMC45LTIuMy0xLjl2LTMuOGgwLjl2My42DQoJCWMwLDAuOCwwLjIsMS40LDIuMSwxLjRoMC4yYzIuMiwwLDIuNy0wLjQsMi43LTEuN3YtMy4yaDAuOXY1LjZoLTAuOVYyMi43eiIvPg0KCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik00OC42LDIzLjdoLTIuNWMtMS44LDAtMi4yLTAuOS0yLjItMS44di0zLjFoLTEuMnYtMC44aDEuMnYtMS4zaDAuOXYxLjNoMy43djAuOGgtMy43djIuOA0KCQljMCwxLDAuNCwxLjQsMS40LDEuNGgyLjMiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNNTAsMjAuMmMwLTEuOCwxLjMtMi4zLDMuMS0yLjNoMS4zYzEuOCwwLDMuMSwwLjQsMy4xLDIuM3YxLjJjMCwxLjgtMS4zLDIuMy0zLjEsMi4zaC0xLjMNCgkJYy0xLjgsMC0zLjEtMC40LTMuMS0yLjNWMjAuMnogTTU2LjYsMjAuM2MwLTEuMy0wLjgtMS42LTEuOS0xLjZoLTEuOWMtMS4xLDAtMS45LDAuMy0xLjksMS42djEuMWMwLDEuMywwLjgsMS42LDEuOSwxLjZoMS45DQoJCWMxLjEsMCwxLjktMC4zLDEuOS0xLjZWMjAuM3oiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNNjYuMSwyMy43aC00LjZjLTAuOCwwLTIuMy0wLjItMi4zLTIuM3YtMS4yYzAtMiwxLjQtMi4zLDIuOC0yLjNoNC4xdjAuOGgtNC4zYy0wLjksMC0xLjcsMC4xLTEuNywxLjV2MS4yDQoJCWMwLDEuMywwLjgsMS41LDEuOSwxLjVoNC4xVjIzLjd6Ii8+DQoJPHBhdGggZmlsbD0iI0VFRUVFRSIgZD0iTTY3LjgsMTUuN2gwLjlWMTloMGMwLjQtMC45LDEuMS0xLjEsMi4zLTEuMWgxLjNjMS44LDAsMi4zLDAuOSwyLjMsMS45djMuOGgtMC45di0zLjYNCgkJYzAtMC44LTAuMi0xLjQtMi4xLTEuNGgtMC4yYy0yLjIsMC0yLjcsMC40LTIuNywxLjd2My4yaC0wLjlWMTUuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNNzcuOCwxOGgyLjhjMS44LDAsMi45LDAuMywyLjksMS45djMuOGgtMC45di0wLjZoMGMtMC4zLDAuNS0wLjUsMC42LTIsMC42aC0yLjNjLTEuNCwwLTEuOC0wLjYtMS44LTEuNw0KCQl2LTAuNGMwLTEuMywwLjktMS40LDIuNS0xLjRoMS41YzEuMiwwLDEuNywwLjEsMiwwLjdoMHYtMS4xYzAtMS0wLjYtMS4xLTIuMS0xLjFoLTIuNyBNODIuNSwyMS45YzAtMC44LTAuNy0wLjktMi4xLTAuOUg3OQ0KCQljLTEuMiwwLTEuNiwwLjItMS42LDAuOXYwLjJjMCwwLjYsMC4yLDAuOSwxLjUsMC45aDEuMmMxLjcsMCwyLjQtMC4xLDIuNC0wLjhWMjEuOXoiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNOTAuMywxOC43aC0yLjRjLTEsMC0xLjUsMC42LTEuNSwxLjR2My42aC0wLjl2LTUuNmgwLjl2MC44aDBjMC40LTAuNywxLjEtMC45LDEuNy0wLjloMi4yIi8+DQoJPHBhdGggZmlsbD0iI0VFRUVFRSIgZD0iTTk3LjIsMjMuN2gtMi41Yy0xLjgsMC0yLjItMC45LTIuMi0xLjh2LTMuMWgtMS4ydi0wLjhoMS4ydi0xLjNoMC45djEuM2gzLjd2MC44aC0zLjd2Mi44DQoJCWMwLDEsMC40LDEuNCwxLjQsMS40aDIuMyIvPg0KCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik05OSwxNS43aDAuOXYxSDk5VjE1Ljd6IE05OSwxOC4xaDAuOXY1LjZIOTlWMTguMXoiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMTAyLDIzaDQuMWMxLjQsMCwxLjktMC4xLDEuOS0wLjl2MGMwLTAuNS0wLjItMC44LTEuMy0wLjhoLTIuOWMtMS4zLDAtMS44LTAuNC0xLjgtMS41di0wLjMNCgkJYzAtMC45LDAuNS0xLjMsMi44LTEuM2gyLjh2MC44aC0zLjFjLTEuMywwLTEuNiwwLTEuNiwwLjd2MC4yYzAsMC41LDAuMiwwLjcsMS4xLDAuN2gyLjVjMS40LDAsMi40LDAuMSwyLjQsMS43djANCgkJYzAsMS42LTEuNCwxLjYtMi42LDEuNkgxMDIiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMTE4LjcsMjIuM2gxLjJ2MS40aC0xLjJWMjIuM3oiLz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMTMxLjMsMjAuMmMwLTEuOCwxLjMtMi4zLDMuMS0yLjNoMS4zYzEuOCwwLDMuMSwwLjQsMy4xLDIuM3YxLjJjMCwxLjgtMS4zLDIuMy0zLjEsMi4zaC0xLjMNCgkJYy0xLjgsMC0zLjEtMC40LTMuMS0yLjNWMjAuMnogTTEzNy45LDIwLjNjMC0xLjMtMC44LTEuNi0xLjktMS42aC0xLjljLTEuMSwwLTEuOSwwLjMtMS45LDEuNnYxLjFjMCwxLjMsMC44LDEuNiwxLjksMS42aDEuOQ0KCQljMS4xLDAsMS45LTAuMywxLjktMS42VjIwLjN6Ii8+DQoJPHBhdGggZmlsbD0iI0VFRUVFRSIgZD0iTTE0MC43LDE4LjFoMC45djAuN2gwYzAuNC0wLjYsMC45LTAuNywxLjktMC43aDEuNWMwLjksMCwxLjUsMC4zLDEuOCwxYzAuNC0wLjgsMS4xLTEsMi4xLTFoMS4xDQoJCWMxLjUsMCwyLjQsMC43LDIuNCwxLjl2My44aC0wLjlWMjBjMC0wLjYtMC4zLTEuMy0xLjgtMS4zaC0wLjdjLTEuNywwLTEuOSwwLjctMS45LDEuNnYzLjNoLTAuOXYtMy40YzAtMS4xLTAuMy0xLjUtMS44LTEuNWgtMC45DQoJCWMtMS4yLDAtMS44LDAuNS0xLjgsMS40djMuNWgtMC45VjE4LjF6Ii8+DQoJPHBhdGggZmlsbD0iI0VFRUVFRSIgZD0iTTExNiwyMy43aC0yLjVjLTEuOCwwLTIuMi0wLjktMi4yLTEuOHYtMy4xaC0xLjJ2LTAuOGgxLjJ2LTEuM2gwLjl2MS4zaDMuN3YwLjhoLTMuN3YyLjgNCgkJYzAsMSwwLjQsMS40LDEuNCwxLjRoMi4zIi8+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0xNTQuMiwxNi4zaC0wLjV2LTAuMmgxLjN2MC4yaC0wLjV2MS41aC0wLjJWMTYuM3oiLz4NCgkJPHBhdGggZmlsbD0iI0VFRUVFRSIgZD0iTTE1Ni42LDE3LjFjMC0wLjIsMC0wLjUsMC0wLjdoMGMtMC4xLDAuMi0wLjEsMC40LTAuMiwwLjdsLTAuMywwLjhoLTAuMmwtMC4zLTAuOA0KCQkJYy0wLjEtMC4yLTAuMi0wLjUtMC4yLTAuN2gwYzAsMC4yLDAsMC41LDAsMC44bDAsMC43aC0wLjJsMC4xLTEuN2gwLjNsMC4zLDAuOGMwLjEsMC4yLDAuMSwwLjQsMC4yLDAuNmgwYzAtMC4yLDAuMS0wLjQsMC4yLTAuNg0KCQkJbDAuMy0wLjhoMC4zbDAuMSwxLjdoLTAuMkwxNTYuNiwxNy4xeiIvPg0KCTwvZz4NCgk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMTI5LjgsMjMuN2gtNC42Yy0wLjgsMC0yLjMtMC4yLTIuMy0yLjN2LTEuMmMwLTIsMS40LTIuMywyLjgtMi4zaDQuMXYwLjhoLTQuM2MtMC45LDAtMS43LDAuMS0xLjcsMS41DQoJCXYxLjJjMCwxLjMsMC44LDEuNSwxLjksMS41aDQuMVYyMy43eiIvPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMCwyM2MwLDAuNSwwLjQsMSwxLDFoMWMwLjUsMCwxLTAuNCwxLTF2LTEuOWMwLTAuNS0wLjQtMS0xLTFIMWMtMC41LDAtMSwwLjQtMSwxVjIzeiIvPg0KCQk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNNC41LDIzYzAsMC41LDAuNCwxLDEsMWgxYzAuNSwwLDEtMC40LDEtMXYtNy42YzAtMC41LTAuNC0xLTEtMWgtMWMtMC41LDAtMSwwLjQtMSwxVjIzeiIvPg0KCQk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNOS4xLDE2LjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjEyYzAtMC41LTAuNC0xLTEtMWgtMWMtMC41LDAtMSwwLjQtMSwxVjE2LjV6Ii8+DQoJCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0xMy42LDE1YzAsMC41LDAuNCwxLDEsMWgxYzAuNSwwLDEtMC40LDEtMVY3LjRjMC0wLjUtMC40LTEtMS0xaC0xYy0wLjUsMC0xLDAuNC0xLDFWMTV6Ii8+DQoJCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0xOC4yLDExLjhjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjkuOWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVYxMS44eiIvPg0KCQk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMjIuNyw5LjdjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjUuM2MwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY5Ljd6Ii8+DQoJCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0yNy4yLDExLjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjcuMWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVYxMS41eiIvPg0KCQk8cGF0aCBmaWxsPSIjRUVFRUVFIiBkPSJNMzEuOCw5LjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjYuNmMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY5LjV6Ii8+DQoJCTxwYXRoIGZpbGw9IiNFRUVFRUUiIGQ9Ik0zNi4zLDUuNGMwLDAuNSwwLjQsMSwxLDFoMWMwLjUsMCwxLTAuNCwxLTFWMWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY1LjR6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=); } .logo-autochartist-alt:before { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iR09fSWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTU2LjkgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1Ni45IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0yNi44LDE4aDIuOGMxLjgsMCwyLjksMC4zLDIuOSwxLjl2My44aC0wLjl2LTAuNmgwYy0wLjMsMC41LTAuNSwwLjYtMiwwLjZoLTIuM2MtMS40LDAtMS44LTAuNi0xLjgtMS43DQoJCXYtMC40YzAtMS4zLDAuOS0xLjQsMi41LTEuNGgxLjVjMS4yLDAsMS43LDAuMSwyLDAuN2gwdi0xLjFjMC0xLTAuNi0xLjEtMi4xLTEuMWgtMi43IE0zMS42LDIxLjljMC0wLjgtMC43LTAuOS0yLjEtMC45SDI4DQoJCWMtMS4yLDAtMS42LDAuMi0xLjYsMC45djAuMmMwLDAuNiwwLjIsMC45LDEuNSwwLjloMS4yYzEuNywwLDIuNC0wLjEsMi40LTAuOFYyMS45eiIvPg0KCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik00MC41LDIyLjdMNDAuNSwyMi43Yy0wLjQsMC45LTEuMSwxLjEtMi4zLDEuMWgtMS40Yy0xLjgsMC0yLjMtMC45LTIuMy0xLjl2LTMuOGgwLjl2My42DQoJCWMwLDAuOCwwLjIsMS40LDIuMSwxLjRoMC4yYzIuMiwwLDIuNy0wLjQsMi43LTEuN3YtMy4yaDAuOXY1LjZoLTAuOVYyMi43eiIvPg0KCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik00OC42LDIzLjdoLTIuNWMtMS44LDAtMi4yLTAuOS0yLjItMS44di0zLjFoLTEuMnYtMC44aDEuMnYtMS4zaDAuOXYxLjNoMy43djAuOGgtMy43djIuOA0KCQljMCwxLDAuNCwxLjQsMS40LDEuNGgyLjMiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNNTAsMjAuMmMwLTEuOCwxLjMtMi4zLDMuMS0yLjNoMS4zYzEuOCwwLDMuMSwwLjQsMy4xLDIuM3YxLjJjMCwxLjgtMS4zLDIuMy0zLjEsMi4zaC0xLjMNCgkJYy0xLjgsMC0zLjEtMC40LTMuMS0yLjNWMjAuMnogTTU2LjYsMjAuM2MwLTEuMy0wLjgtMS42LTEuOS0xLjZoLTEuOWMtMS4xLDAtMS45LDAuMy0xLjksMS42djEuMWMwLDEuMywwLjgsMS42LDEuOSwxLjZoMS45DQoJCWMxLjEsMCwxLjktMC4zLDEuOS0xLjZWMjAuM3oiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNNjYuMSwyMy43aC00LjZjLTAuOCwwLTIuMy0wLjItMi4zLTIuM3YtMS4yYzAtMiwxLjQtMi4zLDIuOC0yLjNoNC4xdjAuOGgtNC4zYy0wLjksMC0xLjcsMC4xLTEuNywxLjV2MS4yDQoJCWMwLDEuMywwLjgsMS41LDEuOSwxLjVoNC4xVjIzLjd6Ii8+DQoJPHBhdGggZmlsbD0iIzEyMTIxMiIgZD0iTTY3LjgsMTUuN2gwLjlWMTloMGMwLjQtMC45LDEuMS0xLjEsMi4zLTEuMWgxLjNjMS44LDAsMi4zLDAuOSwyLjMsMS45djMuOGgtMC45di0zLjYNCgkJYzAtMC44LTAuMi0xLjQtMi4xLTEuNGgtMC4yYy0yLjIsMC0yLjcsMC40LTIuNywxLjd2My4yaC0wLjlWMTUuN3oiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNNzcuOCwxOGgyLjhjMS44LDAsMi45LDAuMywyLjksMS45djMuOGgtMC45di0wLjZoMGMtMC4zLDAuNS0wLjUsMC42LTIsMC42aC0yLjNjLTEuNCwwLTEuOC0wLjYtMS44LTEuNw0KCQl2LTAuNGMwLTEuMywwLjktMS40LDIuNS0xLjRoMS41YzEuMiwwLDEuNywwLjEsMiwwLjdoMHYtMS4xYzAtMS0wLjYtMS4xLTIuMS0xLjFoLTIuNyBNODIuNSwyMS45YzAtMC44LTAuNy0wLjktMi4xLTAuOUg3OQ0KCQljLTEuMiwwLTEuNiwwLjItMS42LDAuOXYwLjJjMCwwLjYsMC4yLDAuOSwxLjUsMC45aDEuMmMxLjcsMCwyLjQtMC4xLDIuNC0wLjhWMjEuOXoiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNOTAuMywxOC43aC0yLjRjLTEsMC0xLjUsMC42LTEuNSwxLjR2My42aC0wLjl2LTUuNmgwLjl2MC44aDBjMC40LTAuNywxLjEtMC45LDEuNy0wLjloMi4yIi8+DQoJPHBhdGggZmlsbD0iIzEyMTIxMiIgZD0iTTk3LjIsMjMuN2gtMi41Yy0xLjgsMC0yLjItMC45LTIuMi0xLjh2LTMuMWgtMS4ydi0wLjhoMS4ydi0xLjNoMC45djEuM2gzLjd2MC44aC0zLjd2Mi44DQoJCWMwLDEsMC40LDEuNCwxLjQsMS40aDIuMyIvPg0KCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik05OSwxNS43aDAuOXYxSDk5VjE1Ljd6IE05OSwxOC4xaDAuOXY1LjZIOTlWMTguMXoiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMTAyLDIzaDQuMWMxLjQsMCwxLjktMC4xLDEuOS0wLjl2MGMwLTAuNS0wLjItMC44LTEuMy0wLjhoLTIuOWMtMS4zLDAtMS44LTAuNC0xLjgtMS41di0wLjMNCgkJYzAtMC45LDAuNS0xLjMsMi44LTEuM2gyLjh2MC44aC0zLjFjLTEuMywwLTEuNiwwLTEuNiwwLjd2MC4yYzAsMC41LDAuMiwwLjcsMS4xLDAuN2gyLjVjMS40LDAsMi40LDAuMSwyLjQsMS43djANCgkJYzAsMS42LTEuNCwxLjYtMi42LDEuNkgxMDIiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMTE4LjcsMjIuM2gxLjJ2MS40aC0xLjJWMjIuM3oiLz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMTMxLjMsMjAuMmMwLTEuOCwxLjMtMi4zLDMuMS0yLjNoMS4zYzEuOCwwLDMuMSwwLjQsMy4xLDIuM3YxLjJjMCwxLjgtMS4zLDIuMy0zLjEsMi4zaC0xLjMNCgkJYy0xLjgsMC0zLjEtMC40LTMuMS0yLjNWMjAuMnogTTEzNy45LDIwLjNjMC0xLjMtMC44LTEuNi0xLjktMS42aC0xLjljLTEuMSwwLTEuOSwwLjMtMS45LDEuNnYxLjFjMCwxLjMsMC44LDEuNiwxLjksMS42aDEuOQ0KCQljMS4xLDAsMS45LTAuMywxLjktMS42VjIwLjN6Ii8+DQoJPHBhdGggZmlsbD0iIzEyMTIxMiIgZD0iTTE0MC43LDE4LjFoMC45djAuN2gwYzAuNC0wLjYsMC45LTAuNywxLjktMC43aDEuNWMwLjksMCwxLjUsMC4zLDEuOCwxYzAuNC0wLjgsMS4xLTEsMi4xLTFoMS4xDQoJCWMxLjUsMCwyLjQsMC43LDIuNCwxLjl2My44aC0wLjlWMjBjMC0wLjYtMC4zLTEuMy0xLjgtMS4zaC0wLjdjLTEuNywwLTEuOSwwLjctMS45LDEuNnYzLjNoLTAuOXYtMy40YzAtMS4xLTAuMy0xLjUtMS44LTEuNWgtMC45DQoJCWMtMS4yLDAtMS44LDAuNS0xLjgsMS40djMuNWgtMC45VjE4LjF6Ii8+DQoJPHBhdGggZmlsbD0iIzEyMTIxMiIgZD0iTTExNiwyMy43aC0yLjVjLTEuOCwwLTIuMi0wLjktMi4yLTEuOHYtMy4xaC0xLjJ2LTAuOGgxLjJ2LTEuM2gwLjl2MS4zaDMuN3YwLjhoLTMuN3YyLjgNCgkJYzAsMSwwLjQsMS40LDEuNCwxLjRoMi4zIi8+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0xNTQuMiwxNi4zaC0wLjV2LTAuMmgxLjN2MC4yaC0wLjV2MS41aC0wLjJWMTYuM3oiLz4NCgkJPHBhdGggZmlsbD0iIzEyMTIxMiIgZD0iTTE1Ni42LDE3LjFjMC0wLjIsMC0wLjUsMC0wLjdoMGMtMC4xLDAuMi0wLjEsMC40LTAuMiwwLjdsLTAuMywwLjhoLTAuMmwtMC4zLTAuOA0KCQkJYy0wLjEtMC4yLTAuMi0wLjUtMC4yLTAuN2gwYzAsMC4yLDAsMC41LDAsMC44bDAsMC43aC0wLjJsMC4xLTEuN2gwLjNsMC4zLDAuOGMwLjEsMC4yLDAuMSwwLjQsMC4yLDAuNmgwYzAtMC4yLDAuMS0wLjQsMC4yLTAuNg0KCQkJbDAuMy0wLjhoMC4zbDAuMSwxLjdoLTAuMkwxNTYuNiwxNy4xeiIvPg0KCTwvZz4NCgk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMTI5LjgsMjMuN2gtNC42Yy0wLjgsMC0yLjMtMC4yLTIuMy0yLjN2LTEuMmMwLTIsMS40LTIuMywyLjgtMi4zaDQuMXYwLjhoLTQuM2MtMC45LDAtMS43LDAuMS0xLjcsMS41DQoJCXYxLjJjMCwxLjMsMC44LDEuNSwxLjksMS41aDQuMVYyMy43eiIvPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMCwyM2MwLDAuNSwwLjQsMSwxLDFoMWMwLjUsMCwxLTAuNCwxLTF2LTEuOWMwLTAuNS0wLjQtMS0xLTFIMWMtMC41LDAtMSwwLjQtMSwxVjIzeiIvPg0KCQk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNNC41LDIzYzAsMC41LDAuNCwxLDEsMWgxYzAuNSwwLDEtMC40LDEtMXYtNy42YzAtMC41LTAuNC0xLTEtMWgtMWMtMC41LDAtMSwwLjQtMSwxVjIzeiIvPg0KCQk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNOS4xLDE2LjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjEyYzAtMC41LTAuNC0xLTEtMWgtMWMtMC41LDAtMSwwLjQtMSwxVjE2LjV6Ii8+DQoJCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0xMy42LDE1YzAsMC41LDAuNCwxLDEsMWgxYzAuNSwwLDEtMC40LDEtMVY3LjRjMC0wLjUtMC40LTEtMS0xaC0xYy0wLjUsMC0xLDAuNC0xLDFWMTV6Ii8+DQoJCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0xOC4yLDExLjhjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjkuOWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVYxMS44eiIvPg0KCQk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMjIuNyw5LjdjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjUuM2MwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY5Ljd6Ii8+DQoJCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0yNy4yLDExLjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjcuMWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVYxMS41eiIvPg0KCQk8cGF0aCBmaWxsPSIjMTIxMjEyIiBkPSJNMzEuOCw5LjVjMCwwLjUsMC40LDEsMSwxaDFjMC41LDAsMS0wLjQsMS0xVjYuNmMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY5LjV6Ii8+DQoJCTxwYXRoIGZpbGw9IiMxMjEyMTIiIGQ9Ik0zNi4zLDUuNGMwLDAuNSwwLjQsMSwxLDFoMWMwLjUsMCwxLTAuNCwxLTFWMWMwLTAuNS0wLjQtMS0xLTFoLTFjLTAuNSwwLTEsMC40LTEsMVY1LjR6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=); } /** * BUTTON * ===================================================================== */ /** * 1. Allow for position of child elements (eg, loaders) */ .btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; display: block; background-color: var(--action-background-default); color: var(--action-text-color-default); padding: 0 1rem; border-radius: var(--border-radius-action); width: 100%; cursor: pointer; transition-property: background, border, color; transition-duration: 200ms; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; text-align: center; /** * 1. Too expensive for IE. * 2. Lends impression of responsiveness */ /** * 1. box-shadow keeps same size buttons as outline, and it follows border-radius */ /** * 1.This is a modifier we need to make buttons have the correct contrast when the background is lighter. * We would like to avoid having this, but in some cases the buttons doesn't look raised. ie. accountsummary */ /** * Clear and blank check will be removed once clear and blank * buttons will be completely removed from code as part of US #1235521 */ } .ms .btn { transition: none; transition-duration: 0; } .btn[disabled], [disabled] .btn { background-color: var(--action-background-disabled); color: var(--action-text-color-disabled); box-shadow: inset 0 0 0 1px var(--action-border-color-disabled); } .btn.is-invalid { overflow: visible; } .btn.is-invalid .validation-message { position: absolute; right: 0; } .btn--lighter { background-color: var(--action-background-lighter); } .btn--outline { background-color: transparent; color: var(--action-background-primary); border: 1px solid var(--action-background-primary); } .btn--primary { background-color: var(--action-background-primary); color: var(--action-text-color-primary); } .btn--buy { color: var(--action-text-color-primary); background-color: var(--action-background-buy); } .btn--sell { color: var(--action-text-color-primary); background-color: var(--action-background-sell); } .btn--toggled { color: var(--color-primary); } .btn--warning { background-color: var(--color-error); } .btn--clear { color: var(--text-color-secondary); background-color: transparent; } .btn--clear[disabled], [disabled] .btn--clear { box-shadow: none; } .btn--blank { color: transparent; } .btn--blank[disabled] { color: transparent; } .btn--tiny { font-size: 11px; line-height: 2rem; height: 2rem; } .btn--tiny.btn--wrap { height: auto; min-height: 2rem; } .btn--small { font-size: 12px; line-height: 2rem; height: 2.5rem; } .btn--small.btn--wrap { height: auto; min-height: 2.5rem; } .btn--medium { font-size: 14px; line-height: 2rem; height: 4rem; } .btn--medium.btn--wrap { height: auto; min-height: 4rem; } .btn--large { font-size: 16px; line-height: 3rem; height: 5rem; } .btn--large.btn--wrap { height: auto; min-height: 5rem; } .btn--wide { padding: 0 2rem; } .btn--narrow { padding: 0 0.5rem; } .btn--inline { width: auto; display: inline-block; } .btn--nocase { text-transform: none; } .btn--fill { height: 100%; } .btn--wrap { text-align: left; text-align: start; white-space: normal; } .btn--wrap:not(.btn--tiny):not(.btn--small) { padding-top: 1rem; padding-bottom: 1rem; } .btn--aurora:not(.btn--clear).btn { text-transform: initial; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn { border-radius: var(--aurora-border-radius-action); background-color: var(--aurora-action-background-default); color: var(--aurora-action-text-color-default); font-weight: bold; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn[disabled], [disabled] .btn--aurora:not(.btn--clear):not(.btn--blank).btn { background-color: var(--aurora-action-background-disabled); color: var(--aurora-action-text-color-disabled); box-shadow: none; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--primary { background-color: var(--aurora-action-background-primary); color: var(--aurora-action-text-color-primary); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--buy { color: var(--aurora-action-text-color-primary); background-color: var(--aurora-action-background-buy); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--sell { color: var(--aurora-action-text-color-primary); background-color: var(--aurora-action-background-sell); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--lighter { background-color: var(--aurora-action-background-lighter); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--tiny { font-size: 11px; height: 2rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--tiny.btn--wrap { height: auto; min-height: 2rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--small { font-size: 12px; height: 3rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--small.btn--wrap { height: auto; min-height: 3rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--medium { font-size: 14px; height: 3.75rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--medium.btn--wrap { height: auto; min-height: 3.75rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--large { font-size: 16px; height: 5rem; } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--large.btn--wrap { height: auto; min-height: 5rem; } /** * BUTTON (HOVER STYLES) * ====================================================================== */ @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .btn { /** * Clear and blank check will be removed once clear and blank * buttons will be completely removed from code as part of US #1235521 */ } .btn:hover { transition-duration: 0; } .btn:not([disabled]):hover { background: var(--action-background-default-hover); } .btn--outline:not([disabled]):hover { background: rgba(var(--action-background-primary-hover-raw), 0.15); } .btn--lighter:not([disabled]):hover { background: var(--action-background-lighter-hover); } .btn--primary:not([disabled]):hover { background: var(--action-background-primary-hover); } .btn--buy:not([disabled]):hover { background: var(--action-background-buy-hover); } .btn--sell:not([disabled]):hover { background: var(--action-background-sell-hover); } .btn--clear:not([disabled]):hover { background: var(--btn-clear-bg); color: var(--btn-clear-hover-color); } .btn--warning:not([disabled]):hover { background: var(--app-warning-active-bg); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn:not([disabled]):hover { background: var(--aurora-action-background-default-hover); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--primary:not([disabled]):hover { background: var(--aurora-action-background-primary-hover); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--buy:not([disabled]):hover { background: var(--aurora-action-background-buy-hover); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--sell:not([disabled]):hover { background: var(--aurora-action-background-sell-hover); } .btn--aurora:not(.btn--clear):not(.btn--blank).btn--lighter:not([disabled]):hover { background: var(--aurora-action-background-lighter-hover); } } /** * BUTTON (LEGACY STYLES) * * Keep support to old CA Admin color variables, will be removed * once all CA Admin old colors migrates to new color variables. * ===================================================================== */ .btn { background-color: var(--app-sup-bg); /** * 1.This is a modifier we need to make buttons have the correct contrast when the background is lighter. * We would like to avoid having this, but in some cases the buttons doesn't look raised. ie. accountsummary */ } .btn--lighter { background-color: var(--action-background-lighter); } .btn--outline { background-color: transparent; color: var(--app-primary-bg); border: 1px solid var(--app-primary-bg); } .btn--primary { background: var(--app-primary-bg); color: var(--app-primary-color); } .btn--buy { background: var(--app-buy-bg); color: var(--app-buy-color); } .btn--sell { background: var(--app-sell-bg); color: var(--app-sell-color); } .btn--toggled { color: var(--btn-toggled-color); } .btn--clear { background-color: var(--btn-clear-bg); } .btn--warning { background-color: var(--app-warning-bg); } /** * BUTTON (HOVER LEGACY STYLES) * ===================================================================== */ @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .btn:not([disabled]):hover { background: var(--app-sup-active-bg); } .btn--lighter:not([disabled]):hover { background: var(--action-background-lighter-hover); } .btn--outline:not([disabled]):hover { background: rgba(var(--app-primary-bg-raw), 0.3); } .btn--primary:not([disabled]):hover { background: var(--app-primary-active-bg); color: var(--app-primary-active-color); } .btn--buy:not([disabled]):hover { background: var(--app-buy-active-bg); color: var(--app-buy-active-color); } .btn--sell:not([disabled]):hover { background: var(--app-sell-active-bg); color: var(--app-sell-active-color); } .btn--toggled:not([disabled]):hover { color: var(--btn-toggled-color); } .btn--clear:not([disabled]):hover { background-color: var(--btn-clear-bg); } .btn--warning:not([disabled]):hover { background-color: var(--app-warning-active-bg); } } /** * BUTTON GROUP * ===================================================================== */ .button-group { display: inline-flex; align-items: center; color: var(--action-text-color-secondary); background: var(--action-background-default); border-radius: var(--border-radius-action); } .button-group--link { background: transparent; color: var(--color-primary); } .button-group--fill { width: 100%; } .button-group--fill .button-group__divider { width: 100%; } .button-group--fill .button-group__item { justify-content: center; } .button-group--tiny { padding: 0 0.5rem; } .button-group--tiny .button-group__item { font-size: 11px; height: 2rem; line-height: 2rem; padding: 0 0.5rem; } .button-group--small { padding: 0 0.5rem; } .button-group--small .button-group__item { font-size: 12px; height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; } .button-group--medium { padding: 0 1rem; } .button-group--medium .button-group__item { font-size: 14px; height: 4rem; line-height: 4rem; padding: 0 1rem; } .button-group--large { padding: 0 1rem; } .button-group--large .button-group__item { font-size: 16px; height: 5rem; line-height: 5rem; padding: 0 1rem; } .button-group__item { display: flex; align-items: center; cursor: pointer; white-space: nowrap; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .button-group__item:hover { color: var(--action-text-color-default); } } .button-group__item--selected { color: var(--action-text-color-default); } .button-group--aurora { color: var(--aurora-text-color-secondary); background: var(--aurora-background-level-3); border-radius: 4px; } .button-group--aurora .button-group__divider { border-left: 1px solid var(--aurora-border-level-3); border-right: 1px solid var(--aurora-border-level-3); } .button-group--aurora .button-group__divider:first-child { border-left: none; } .button-group--aurora .button-group__divider:last-child { border-right: none; } .button-group--aurora .button-group__divider--selected { border-color: var(--aurora-background-level-3); } .button-group--aurora .button-group__item { border-radius: 4px; color: var(--aurora-text-color-secondary); transition: color 150ms ease-in-out, background-color 150ms ease-in-out; font-weight: 600; /** * 1. To lift box shadow above adjacent button group item */ } .button-group--aurora .button-group__item--selected { background: var(--aurora-background-level-1); color: var(--aurora-text-color-primary); position: relative; } .button-group--aurora .button-group__item--buy { color: var(--persistent-white); background: var(--aurora-color-brand-primary); } .button-group--aurora .button-group__item--sell { color: var(--persistent-white); background: var(--aurora-color-sell); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .button-group--aurora .button-group__item:not(.button-group__item--selected):hover { color: var(--aurora-action-text-color-default); background: var(--aurora-action-background-default-hover); } } .button-group--aurora.button-group--tiny { padding: 2px; } .button-group--aurora.button-group--tiny .button-group__item { padding: 0 8px; height: calc(16px - 2 * 2px); line-height: calc(16px - 2 * 2px); } .button-group--aurora.button-group--tiny .button-group__item--selected { box-shadow: 0 0 0 2px var(--aurora-action-background-default); } .button-group--aurora.button-group--small { padding: 3px; } .button-group--aurora.button-group--small .button-group__item { padding: 0 8px; height: calc(24px - 2 * 3px); line-height: calc(24px - 2 * 3px); } .button-group--aurora.button-group--small .button-group__item--selected { box-shadow: 0 0 0 3px var(--aurora-action-background-default); } .button-group--aurora.button-group--medium { padding: 3px; } .button-group--aurora.button-group--medium .button-group__item { padding: 0 16px; height: calc(28px - 2 * 3px); line-height: calc(28px - 2 * 3px); } .button-group--aurora.button-group--medium .button-group__item--selected { box-shadow: 0 0 0 3px var(--aurora-action-background-default); } .button-group--aurora.button-group--large { padding: 3px; } .button-group--aurora.button-group--large .button-group__item { padding: 0 16px; height: calc(40px - 2 * 3px); line-height: calc(40px - 2 * 3px); } .button-group--aurora.button-group--large .button-group__item--selected { box-shadow: 0 0 0 3px var(--aurora-action-background-default); } .button-group--aurora.button-group--disabled { background: var(--aurora-background-level-2); } .button-group--aurora.button-group--disabled .button-group__item { color: var(--aurora-text-color-tertiary); } .button-group--aurora.button-group--disabled .button-group__item--selected { box-shadow: none; color: var(--aurora-text-color-tertiary); background: var(--aurora-background-level-1); } .button-group--disabled { cursor: default; pointer-events: none; } .button-group--highlight { border: 1px solid var(--aurora-color-brand-primary); } /** * FORM TOOLKIT * ===================================================================== * * Shared size and type resets for form controls. * Apply `.form-control` to any of the following form controls: * * - select * - textarea * - input[type="text"] * - input[type="password"] * - input[type="datetime"] * - input[type="datetime-local"] * - input[type="date"] * - input[type="month"] * - input[type="time"] * - input[type="week"] * - input[type="number"] * - input[type="email"] * - input[type="url"] * - input[type="search"] * - input[type="tel"] * - input[type="color"] * * DEV NOTES * --------------------------------------------------------------------- * - Influenced by Bootstrap 3 (Apache Licence) * - https://github.com/twbs/bootstrap/blob/3.0.0-wip/less/forms.less */ /* ==================================================================== // Forms // // Various form controls and their pseudo-/feedback states. Refer also // to the form layout test cases for prescribed patterns of arranging // these controls in groups. // // ### Default Appearance // // Individual form controls automatically receive some global styling. // All textual ``, ` // //

Select (dropdown)

//
// //
//

Select - disabled

//
// //
// // Styleguide 6.1 /* ===================================================================== /* ==================================================================== =Form Control Base ================================================================= */ /** * 1. Ensure text is interactive, and displays the text caret on :hover */ input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /** * 1. Remove inline 'clear field' x in IE10+ */ ::-ms-clear { display: none; } /** * 1. Remove default heavy inset box-shadow in iOS. */ .form-control { display: block; width: 100%; height: 16px; padding: 1px 6px; color: var(--input-color); background-color: var(--background-app); outline: 0; box-shadow: none; border: 1px solid var(--border-color-highlight); border-radius: var(--border-radius-input); /** Placeholder text and focus ring * 1. Special styles because when browsers invalidate entire lines * if it doesn't understand a selector * 2. HTML5 says that inputs under a fieldset > legend:first-child * won't be disabled if the fieldset is disabled. Due to * implementation difficulty, we don't honor that edge case; * we style them as disabled anyway. */ } .form-control[type='text'], .form-control[type='number'], .form-control[type='search'], textarea.form-control { -webkit-appearance: none; } .form-control[type='text']:focus, .form-control[type='number']:focus, .form-control[type='search']:focus, textarea.form-control:focus { color: var(--input-focus-color); } .form-control[type='search'] { height: 16px; } .form-control--compact { height: 16px; font-size: 12px; line-height: 2rem; } .form-control:-moz-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control::-moz-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control:-ms-input-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control::-webkit-input-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0.35; } textarea.form-control { outline: 0; height: auto; resize: none; } .form-control--aurora { color: var(--aurora-text-color-secondary); border-radius: var(--aurora-border-radius-input); border-color: var(--aurora-border-level-2); background-color: var(--aurora-background-level-1); } .form-control--aurora:-moz-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora::-moz-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora:-ms-input-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora::-webkit-input-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } .form-control--aurora.form-control[type='text']:focus, .form-control--aurora.form-control[type='number']:focus, .form-control--aurora.form-control[type='search']:focus, textarea.form-control--aurora:focus { color: var(--aurora-text-color-primary); border-color: var(--aurora-color-brand-primary); } .form-control--aurora.form-control[disabled], .form-control--aurora.form-control[readonly], fieldset[disabled] .form-control--aurora { color: var(--aurora-text-color-tertiary); background-color: var(--aurora-background-level-2); opacity: 1; } .form-control--aurora.form-control[disabled]:-moz-placeholder, .form-control--aurora.form-control[readonly]:-moz-placeholder, fieldset[disabled] .form-control--aurora:-moz-placeholder { color: var(--aurora-text-color-tertiary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora.form-control[disabled]::-moz-placeholder, .form-control--aurora.form-control[readonly]::-moz-placeholder, fieldset[disabled] .form-control--aurora::-moz-placeholder { color: var(--aurora-text-color-tertiary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora.form-control[disabled]:-ms-input-placeholder, .form-control--aurora.form-control[readonly]:-ms-input-placeholder, fieldset[disabled] .form-control--aurora:-ms-input-placeholder { color: var(--aurora-text-color-tertiary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--aurora.form-control[disabled]::-webkit-input-placeholder, .form-control--aurora.form-control[readonly]::-webkit-input-placeholder, fieldset[disabled] .form-control--aurora::-webkit-input-placeholder { color: var(--aurora-text-color-tertiary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .form-control--aurora:hover:enabled { border-color: var(--aurora-color-brand-primary); background-color: var(--aurora-color-brand-primary-alpha-10); } } .form-control--aurora.form-control--tiny { padding: 0 0.5rem; font-size: 11px; } .form-control--aurora.form-control--small { padding: 0 0.5rem; font-size: 12px; } .form-control--aurora.form-control--medium { padding: 0 1rem; font-size: 14px; } .form-control--aurora.form-control--large { padding: 0 1.5rem; font-size: 16px; } .form-control--aurora.form-control[type='text'].form-control--tiny, .form-control--aurora.form-control[type='number'].form-control--tiny, .form-control--aurora.form-control[type='search'].form-control--tiny { height: 2rem; } .form-control--aurora.form-control[type='text'].form-control--small, .form-control--aurora.form-control[type='number'].form-control--small, .form-control--aurora.form-control[type='search'].form-control--small { height: 3rem; } .form-control--aurora.form-control[type='text'].form-control--medium, .form-control--aurora.form-control[type='number'].form-control--medium, .form-control--aurora.form-control[type='search'].form-control--medium { height: 3.75rem; } .form-control--aurora.form-control[type='text'].form-control--large, .form-control--aurora.form-control[type='number'].form-control--large, .form-control--aurora.form-control[type='search'].form-control--large { height: 5rem; } textarea.form-control--aurora.form-control--tiny { padding: 0 0.5rem; } textarea.form-control--aurora.form-control--small { padding: 0 0.5rem; } textarea.form-control--aurora.form-control--medium { padding: 0.5rem 1rem; } textarea.form-control--aurora.form-control--large { padding: 1rem 1.5rem; } /** * 1. Line-height needs to be relative for centering text. Stupid IE. */ .ms input[type='text'], .ms input[type='password'], .ms input[type='number'], .ms input[type='email'], .ms input[type='url'], .ms input[type='search'], .ms input[type='tel'] { line-height: normal; } /** * 1. Allow elements to be sized by the grid system */ .form-label.grid-cell, .form-control.grid-cell, .form-value.grid-cell { width: 0; } /** * 1. Allow elements in a list to be wrapped */ .list--wrap .form-label { height: auto; } /* ==================================================================== =Form Note ================================================================= */ .form-note { color: var(--app-meta-color); font-size: 12px; line-height: 2rem; } .form-note, .form-note.grid, .form-note.grid-cell { margin-bottom: 8px; line-height: 1.4; word-wrap: break-word; } .form-note:last-child, .form-note.grid:last-child, .form-note.grid-cell:last-child { margin-bottom: 0; } .form-note a { color: var(--app-link-color); text-decoration: none; cursor: pointer; } .body--aurora .form-note a { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .body--aurora .form-note a:focus, .body--aurora .form-note a:active, .body--aurora .form-note a:hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } /* ==================================================================== // Legacy Checkboxes & Radios // // Markup: //

Checkboxes

//
//
// // Forex //
//
// // Bonds //
//
// // Futures //
//
//

Radios

//
// // // //
//

Checkbox Icon

//
// // Unchecked //
//
// // Checked //
//
// // Disabled //
//
// // Disabled & Checked //
//

Radio Icon

//
// // Unchecked //
//
// // Checked //
//
// // Disabled //
//
// // Disabled & Checked //
// // Styleguide 6.2 /* ===================================================================== /* ==================================================================== =Custom Checkbox And Radio ================================================================= */ @keyframes bugfix { from { padding: 0; } to { padding: 0; } } /** * Legacy styles, dependent on an element. * Prefer styles below. */ .legacyradio input[type='radio'] ~ .legacyradio-icon--mifid:before { content: '\e68c'; } .legacyradio input[type='radio']:checked ~ .legacyradio-icon--mifid:before { content: '\e68d'; } .legacyradio input[type='radio']:disabled ~ .legacyradio-icon--mifid:before { color: var(--radio-checkbox-icon-disabled-color); cursor: default; } .legacycheckbox input[type='checkbox'] ~ .legacycheckbox-icon-mifid:before { content: '\e616'; } .legacycheckbox input[type='checkbox']:checked ~ .legacycheckbox-icon-mifid:before { content: '\e617'; } .legacycheckbox input[type='checkbox']:disabled ~ .legacycheckbox-icon-mifid { color: var(--radio-checkbox-icon-disabled-color); cursor: default; } /** * 1. FIX #580757 - Enable radio buttons and checkboxes to work in * iOS9 native app UIWebView. Src: http://freshinbox.com/blog/android-css-general-sibling-selector-bug/ * 2. Hide the actual form el. */ .legacyradio, .legacycheckbox { display: inline; margin-right: 4px; } .ios9 .legacyradio, .ios9 .legacycheckbox { animation: bugfix infinite 1s; } .legacyradio input, .legacycheckbox input { display: none; } .legacyradio-icon, .legacycheckbox-icon { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: text-bottom; margin-right: 4px; } .legacyradio-icon:before, .legacycheckbox-icon:before { font-size: 16px; position: absolute; display: block; width: 16px; height: 16px; color: var(--radio-checkbox-icon-color); line-height: 16px; cursor: pointer; font-family: 'app-icons'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .legacyradio--disabled:before, .legacycheckbox--disabled:before { color: var(--radio-checkbox-icon-disabled-color); cursor: default; } .legacycheckbox-icon { /** * If icon part of an affordance but not already nested in a // // Markup: //

Normal validation block

//
//
// //
//
//
Validation error message
//
//
//

Inline variant

//
// Link which errored out //
// //
Validation error message
//
//
// // Styleguide 6.3 /* ===================================================================== /* ==================================================================== = Validation ================================================================= */ .validation { position: relative; width: 100%; /** * Speech bubble like tool tip that displays the validation message. * Hidden by default, see .is-invalid and .is-message-shown below. * 1. Spcifically setting the value of `text-transform` and `white-space` to their default. * This is done when it's composed inside the button component, which overrides the default behaviour * and tool tip message is not visible */ /** * 1. Ensure specificity is high enough for ClientRenewalDialog dropdown * 2. Use box-shadow instead of outline to account for border-radius */ /** * Styles specific for combobox validation. * * 1. Hide validation outline on input, the select will * be used. */ /** * 1. Respecting padding-top of .form-group and border-top of .form-control. */ } .validation-message { /** * 1. Reverse direction so that the message block grows towards the content * 2. Don't force right-alignment * 3. Override .validation-message icon * 4. Nudge the icon background * 5. Reset direction so that the text is correctly aligned */ /** * 1. Flip the direction of the arrow icon to make it point below */ } .validation-message .message { border: var(--border-color-default) 1px solid; position: absolute; z-index: 1002; top: calc(16px + 2px + 8px); padding: 4px 8px; color: var(--input-validation-message-color); background-color: var(--input-validation-message-bg); box-shadow: var(--shadow-default); text-transform: none; white-space: normal; visibility: hidden; opacity: 0; transition: opacity; transition-duration: 200ms; right: 0; /** * Add arrow-tip to the message * Using css border triangle */ } .validation-message .message:after, .validation-message .message:before { position: absolute; display: block; width: 0; height: 0; content: ''; right: 6px; border: 8px solid transparent; border-bottom-color: var(--input-validation-message-bg); } .validation-message .message:before { border-bottom-color: var(--border-color-default); margin-top: -1px; } .validation-message .message--right:after { left: 6px; } .validation-message__icon { top: 0; opacity: 0; position: absolute; visibility: hidden; z-index: 1; line-height: calc(16px + 2px); padding-right: 6px; right: 0; } .validation-message__icon:before { color: var(--input-validation-icon-color); z-index: 2; } .btn .validation-message__icon { line-height: unset; } .validation-message--inline { display: inline-block; direction: rtl; padding-left: 10px; } .validation-message--inline.validation-message__icon { display: inline-block; position: relative; left: -6px; right: initial; line-height: inherit; padding: 0; } .validation-message--inline.validation-message__icon:before { position: absolute; line-height: 1; } .validation-message--inline .message { right: initial; direction: ltr; } .validation-message--above .message { bottom: calc(24px); top: inherit; } .validation-message--above .message:after { bottom: -16px; top: inherit; transform: rotateX(180deg); } .validation-message--above .message:before { bottom: -16px; top: inherit; transform: rotateX(180deg); margin-bottom: -1px; } .validation .is-invalid, .validation .is-warning { /** * 1. The validation icon appears over of the dropdown icon. It was decided to * hide the icon when the field is marked as invalid or warning. * Using opacity to ensure we don't have text under the invalid/warning icon. */ } .validation .is-invalid ~ .validation-message .validation-message__icon, .validation .is-warning ~ .validation-message .validation-message__icon, .validation .is-invalid ~ .validation-message:hover .message, .validation .is-warning ~ .validation-message:hover .message, .validation .is-invalid.is-message-shown ~ .validation-message .message, .validation .is-warning.is-message-shown ~ .validation-message .message, .validation .is-invalid .validation-message .validation-message__icon, .validation .is-warning .validation-message .validation-message__icon, .validation .is-invalid .validation-message:hover .message, .validation .is-warning .validation-message:hover .message, .validation .is-invalid.is-message-shown .validation-message .message, .validation .is-warning.is-message-shown .validation-message .message { visibility: visible; opacity: 1; transition-delay: 0; transform: scale(1); } .validation .is-invalid .dropdown__select .validation-message__icon, .validation .is-warning .dropdown__select .validation-message__icon { opacity: 0; } .validation .is-invalid, .validation .is-invalid.dropdown, .validation .is-invalid .dropdownbutton, .validation .is-invalid.dropdown .dropdownbutton { box-shadow: inset 0 0 0 1px var(--input-validation-outline); border: none; } .validation.combobox input { box-shadow: none; } .validation.form-group .validation-message .validation-message__icon { top: 9px; } .validation--action-button .validation-message__icon { margin-right: 16px; } .validation--action-button .message { margin-right: 14px; } /* ==================================================================== = Compact Variants ================================================================= */ .form-control--compact[type='text'] { height: 16px; margin: 0; padding: 0 4px; font-size: 12px; line-height: 2rem; } .form-control--compact[type='text']:-moz-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--compact[type='text']::-moz-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--compact[type='text']:-ms-input-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .form-control--compact[type='text']::-webkit-input-placeholder { color: var(--input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } select.form-control--compact { height: 16px; line-height: 16px; } /** * FORM TOOLKIT DESKTOP EXTENSIONS * ===================================================================== */ /* ==================================================================== =Labels ================================================================= */ .moz .form-label { line-height: inherit; } /* ==================================================================== =Checkboxes & Radios ================================================================= */ .moz input[type='radio'], .moz input[type='checkbox'] { margin-top: -2px; } /** * 1. Account for different native UI controls */ .mac input[type='radio'], .mac input[type='checkbox'] { margin-top: 2px; } /* ==================================================================== =Selects ================================================================= */ /** * 1. Impossible to hide the arrow in FF, so extend and clip by parent. * - https://bugzilla.mozilla.org/show_bug.cgi?id=649849 * 2. Prefixed with tilde to prevent processing by compiler. * 3. !important is needed in order to FF32 respect the width. */ .moz .select select { width: calc(100% + 21px) !important; padding-right: 0; } .moz .select--inline select { margin-right: 0; } .select:not(.is-inert) { /** * 1. Prevent custom colors 'bleeding' into UA chrome elements * - Risk that the options become illegible with wrong combination. */ } .select:not(.is-inert) option { color: initial; background-color: initial; } .select:not(.is-inert):active, .select:not(.is-inert):focus, .select:not(.is-inert):hover { background-color: var(--select-hover-bg); color: var(--select-hover-color); transition-property: color, background; transition-duration: 200ms; } .select:not(.is-inert):active.is-disabled, .select:not(.is-inert):focus.is-disabled, .select:not(.is-inert):hover.is-disabled { background-color: transparent; } /* ==================================================================== =Active States ================================================================= */ .select select:focus { /** * 1. Explicit width suppresses drop-down appearing onfocus * in IE10. */ } html:not(.ms) .select select:focus { width: calc(100% + 1px); width: -webkit-calc(100% + 1px); } .select select:focus option { background: var(--select-options-bg); } .form-legend { font-size: 12px; line-height: 2rem; } /** * FOCUS VISIBLE POLYFILL * ===================================================================== */ /* * Part of visible-focus polyfill: https://github.com/WICG/focus-visible */ :focus, :focus, input { outline: none; } /* * Part of visible-focus polyfill: https://github.com/WICG/focus-visible * This will hide the focus indicator if the element receives focus via the mouse, * but it will still show up on keyboard focus. */ .js-focus-visible :focus:not(.focus-visible) .focusmanager { outline: none; } /** * FILE INPUT * ===================================================================== */ .fileinput { padding: 4px; border-radius: var(--border-radius-input); } .fileinput-btn { color: var(--color-primary); cursor: pointer; background: transparent; padding: 0; color: var(--app-link-color); } .fileinput-btn--bold { font-weight: bold; } .fileinput-btn--disabled { color: var(--action-text-color-disabled); cursor: default; } .fileinput-btn--aurora { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .fileinput-btn--aurora:not(.link--disabled):hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } .fileinput-btn--aurora.link--disabled { color: var(--aurora-text-color-tertiary); } .fileinput-btn--secondary { text-decoration: underline; font-weight: 400; } .fileinput-btn--tiny { font-size: 11px; line-height: 2rem; } .fileinput-btn--small { font-size: 12px; line-height: 2rem; } .fileinput-btn--medium { font-size: 14px; line-height: 2rem; } .fileinput-btn--large { font-size: 16px; line-height: 3rem; } .fileinput-btn--disabled { color: var(--app-muted-color); cursor: default; } .fileinput-btn--aurora { color: var(--aurora-color-brand-tertiary); } .fileinput-input { display: none; } .fileinput-files { font-size: 12px; line-height: 2rem; } .fileinput-files-fileitem-name { vertical-align: text-bottom; margin-left: 8px; } .fileinput-extensive { width: 100%; } /* * INTERVAL ICON * ===================================================================== * */ .interval-icon { display: inline-block; min-width: 3rem; height: 2rem; border-radius: 1rem; padding: 0 0.5rem; background: var(--text-color-secondary); font-size: 11px; line-height: 2rem; color: var(--text-color-inverted); font-weight: bold; text-align: center; } .interval-icon--buy { background: var(--color-buy); } .interval-icon--sell { background: var(--color-sell); } /** * CLIENT RENEWAL * ===================================================================== */ .clientrenewal { /* * 1. Override validation so we do not show a border on section validation */ /* * 1. Override validation so we do not show a border on individual file items */ } .clientrenewal-compliance { color: var(--text-color-secondary); } .clientrenewal-heading .is-invalid { box-shadow: none; } .clientrenewal-filefield .is-invalid { box-shadow: none; } .clientrenewal .dropdown { background-color: transparent; border: 1px solid var(--app-sub-border); border-radius: var(--border-radius-dropdown); color: var(--input-color); } /* * CLIENT RENEWAL (PRO EXTENSIONS) * ===================================================================== */ .clientrenewal { font-size: 12px; line-height: 2rem; } .clientrenewal-heading { font-size: 14px; line-height: 2rem; } .clientview { background-image: linear-gradient( var(--background-gradient-default-1), var(--background-gradient-default-2), var(--background-gradient-default-2), var(--background-gradient-default-1) ); background-color: var(--background-gradient-default-1); } .clientview__container { padding: 0 5px; overflow: hidden; } .clientview__container.clientview__bottom { border-top: 8px var(--tabs-pro-frame-bg) solid; } .clientview .account-selector-container { padding: 8px 0; } .clientview .tabs { margin-bottom: 10px; } .clientview__splitter { width: 4px; background-color: var(--tabs-pro-frame-bg); } /* ==================================================================== =Molecules ================================================================= */ /* * DATE SLIDER * ===================================================================== * Note: Since we are using a library for slider, we have certain class restrictions. */ /** * 1. Position is needed for container element so that child elements takes their position accordingly. */ .date-slider { position: relative; height: 90px; } .date-slider__range { position: absolute; top: 4.5rem; left: 0; right: 0; } .date-slider__tooltip { position: absolute; top: 0; font-size: 14px; line-height: 2rem; } .date-slider__tooltip--start { left: 0; } .date-slider__tooltip--end { right: 0; } /* ==================================================================== // Header // // Simple header block with close button for use in Components. Often // used in conjunction with `.sheet-header`. // // Markup: //
//
Title
// //
// // Styleguide 10.1 ===================================================================== */ .header { color: var(--app-meta-color); padding: 4px 8px; position: relative; /* ==================================================================== // Title ==================================================================== */ /** * 1. Prevent the title overlapping the close button * 2. Prevent the header collapsing onto the close button when title empty */ /* ==================================================================== // Close Button ==================================================================== */ /** * 1. Keep the --gray-semi-light */ } .header-title { padding: 0 24px; text-align: center; } .header-title:empty { height: 1em; } .header-close { position: absolute; top: 50%; transform: translateY(-50%); width: auto; color: inherit; right: 0px; } .header-back { position: absolute; top: 50%; transform: translateY(-50%); width: auto; color: inherit; left: 0px; } /* * HEADER BASE BLOCK (PRO EXTENSIONS) * ===================================================================== * */ .header-title { font-size: inherit; } /* ==================================================================== // Well // // Add a frame to an element, or group multiple elements inside a recessed // section. `.well`s are classed as "sunk" content, alongside text inputs, // so reference the @app-sub-* palette for styling. Generally they are // used to differentiate dense summary info sections in the Trade Ticket // or Details Sheets (and hence are shown in an *Alt* context. // // By default `.well`s only offer a different background to their surroundings // to delineate their bounds. Add a border with `.well--outline`, and insert // extra padding with `.well--inset`. // // For multiple Wells together, see `.grid--wells` in the Grid documentation. // // --- // // NOTE: *DON'T* mixin in the `.well` class with the content it contains, // keep it on a wrapper element instead. This maintains the Single Responsibility // Principle behind OOCSS, and ensures the well styles play well with the // content. // // NOTE: Background properties are overridden on some elements inside a well: // // * `.datagrid` // * `.table` // // Deprecated: `well--deep`. This is technical debt and due to be refactored out. // // // // // // Markup: //
//
    //
  • // Limit Buy 25,000 @ 1.0000 //
    • //
  • // Current Price 1.3918 //
    • //
//
// // Styleguide 9.7 ===================================================================== */ .well { background: var(--app-sub-bg); } .well--outline { border: 1px solid var(--app-hairline); } .well--inset { padding: 4px 8px; } .well--deep { border: var(--app-sub-deep-border) solid var(--app-sub-deep-border-size); background: var(--app-sub-deep-bg); } .well .empty-message { background: none; } /* * COLOR BLOCK * ===================================================================== */ /** * 1. Take border into account. */ .color { border: 1px solid var(--chart-color-border); background-color: var(--gray-darker); height: 14px; min-width: 20px; } .color--transparent { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAPUlEQVQI12M48+zMJyB8doaHAQLO/IdCPjQBBhiAanl+RuIMLxDyMJzhATMkgEJgsxAqUbWe4UMX4IFZDwCppkJzSwVrswAAAABJRU5ErkJggg=='); background-color: var(--gray-mid); } /* * CRUMBS BLOCK * ===================================================================== */ .crumbs { list-style-type: none; margin: 4px 0; } .crumbs-item { display: inline; padding-right: 16px; } .crumbs-item:not(.active) { color: var(--gray-medium); } .crumbs-item:last-child:before { display: none; } /* ==================================================================== // Step // // Step block which acts as a progress indicator for guided user journeys. // // `.step-item`s may be side by side or stacked (via `.step--stack`), and // utilize the CSS constants `is-active` and `is-complete` to denote the // current and previously completed steps respectively. // // In the case of numerous `.step-item`s or very long `.step-item` texts, // content may overflow. To avoid this, an implict `max-width` can be set on // `.step-item`s by adding the `.step--*` (e.g. `.step--5`) class to the // `.step` element, where * is a digit corresponding to the number of // `.step-items` (upto 5). // // --- // // NOTE: Ordinarily a `step` block is housed inside of a `.well`. // // // // // Markup: //
    //
  • 1 Short
    • //
  • 2 Medium Length
    • //
  • 3 An extremely long label
    • //
  • 4 Last item
    • //
// // Styleguide 9.8 ===================================================================== */ .step { color: var(--app-meta-color); list-style: none; /** * 1. "Slow burn" effect to reinforce the fact users have progressed * in the journey * 2. Negate above for next active step */ /** * 1. Add a max-width relative to the number of .step-item's * so .step content doesn't overflow */ } .step-item { padding: 4px 8px; font-weight: bold; transition: color; transition-duration: 1.5s; transition-timing-function: ease-in; } .step-item.is-active { transition-duration: 0; color: var(--app-color); } .step-item.is-complete { color: var(--app-muted-color); } .step--stack { flex-direction: column; } .step--compact .step-item { padding: 4px; } .step--2 .step-item { max-width: 50%; } .step--3 .step-item { max-width: 33%; } .step--4 .step-item { max-width: 25%; } .step--5 .step-item { max-width: 20%; } /** * STATUS BLOCK * ===================================================================== */ /** * 1. Stylesheet padding */ .status { position: relative; padding: 1rem; display: flex; align-items: center; /* ==================================================================== =Message Types ================================================================= */ /** * Transparent is deprecated, but still kept in the CSS for legacy support. */ /** * 1. Danger is deprecated, but still kept in the CSS for legacy support. */ } .status__msg { margin: 0 1rem; flex: 1 1 100%; } .status__icon, .status__close { margin-bottom: auto; flex: 0 0 auto; } .status--lift { position: absolute; left: 0; right: 0; z-index: 100; } .status--action { cursor: pointer; } .status--transparent { background-color: none; } .status--success { background-color: var(--app-success-bg); color: var(--gray-darkest); } .status--danger, .status--warning, .status--none { background-color: var(--color-error); color: var(--gray-darkest); } /* ==================================================================== // Loader // // A pure CSS3 spinner to give user feedback the app is "busy". By // default it is sized to the app font-size, with a number of modifiers // to enlarge it. It can also be placed over entire Components, and even // the app itself to indicate changes to larger regions. // // GO developers should use the loader control to insert and control the // lifecycle of a loader Block. // // --- // // NOTE: The animated spinner is not shown at large and extra large sizes // in IE 10/11, nor Edge, due to performance concerns. Essentially, IE // has to re-layout the styles on the spinner for every frame, rather // than compositing it once on the GPU and then rotating the texture // like chrome/safari. This also means that when the UI thread is busy // (i.e. all the time), the spinner is liable to freeze as the next // frame cannot be laid-out and rendered. // // To mitigate this a simple string of 'loading...' inserted via the // content property is displayed. The small spinner is still utilized // in IE as this is employed to give user feedback in the search field // and dealerboxes. // // // // // // // // // // // Markup: //
//
//
//
//
// // Styleguide 9.3 ===================================================================== */ /* ==================================================================== =Animations ================================================================= */ @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .load { text-align: center; line-height: 1; /* ==================================================================== = Hidden State ==================================================================== */ /* ==================================================================== =Left ================================================================= */ /* ==================================================================== =Right ================================================================= */ /* ==================================================================== =Center ================================================================= */ /* ==================================================================== = Inline Modifier ==================================================================== */ /* ==================================================================== = Tiny Modifier ==================================================================== */ /* ==================================================================== = Small Modifier ==================================================================== */ /* ==================================================================== = Medium Modifier ==================================================================== */ /* ==================================================================== = Large Modifier ==================================================================== */ /* ==================================================================== = Mask ==================================================================== */ /* ==================================================================== = Subtle ==================================================================== */ /* * 1. Box shadows point to visible dots which are animated as a result of animation on invisible ('background:transparent') dot at center * because shadows are calculated based on offsets. */ } .load:before { content: ''; display: inline-block; border: 1px solid var(--load-color); border-top: 1px solid transparent; border-left: 1px solid transparent; animation: loading 600ms infinite linear; } .is-hidden .load, .load.is-hidden { visibility: hidden; animation-play-state: paused; } .load--left { position: absolute; top: 50%; left: 6px; height: auto; transform: translate(0, -50%); } .load--right { position: absolute; top: 50%; right: 6px; height: auto; transform: translate(0, -50%); } .load--center { position: absolute; top: 50%; left: 50%; height: auto; transform: translate(-50%, -50%); } .load--inline { display: inline-block; } .load--tiny, .load--tiny:before { height: 1.5rem; } .load--tiny:before { width: 1.5rem; border-radius: 1.5rem; } .load--small, .load--small:before { height: 2rem; } .load--small:before { width: 2rem; border-radius: 2rem; } .load--medium, .load--medium:before { height: 3rem; } .load--medium:before { width: 3rem; border-radius: 3rem; } .load--large, .load--large:before { height: 8rem; } .load--large:before { width: 8rem; border-radius: 8rem; } .load-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; z-index: 100; background: var(--app-content-bg); overflow: hidden; } .load-mask--translucent { filter: opacity(80%); } .load-mask--transparent { background: transparent; } .load-mask--app { z-index: 3000; } .load-mask--action { pointer-events: none; touch-action: none; } .load-mask--tiny { position: relative; height: 1.5rem; } .load-mask--small { position: relative; height: 2rem; } .load-mask--medium { position: relative; height: 3rem; } .load-mask--large { position: relative; height: 8rem; } .load--subtle { width: 4px; height: 4px; border-radius: 50%; background: transparent; box-shadow: -10px 10px 0 var(--load-subtle-dot-color-1), -14px 0 0 var(--load-subtle-dot-color-2), -10px -10px 0 var(--load-subtle-dot-color-3); transform-origin: 50%; animation: loading 1000ms linear infinite; } /* ==================================================================== // Dot Loader // // A animated ellipsis to give the user subtle feedback that the app // is "busy". // // Markup: //
// // Styleguide 9.4 ===================================================================== */ .dotloader { /** * 1. Hairline space for perfect typesetting. * 2. Avoids altering the parent elements height and achieves the same * vertical baseline. * 3. Hides dots when the animation sets a negative text-indent. * 4. Begin animation at the initial step to avoid a flash of unanimated * state. */ } .dotloader:after { content: '\2026'; display: inline-block; width: 1em; margin-left: 1px; text-align: left; text-align: start; vertical-align: bottom; overflow: hidden; animation-name: anim-dotloader; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: steps(1, start); animation-fill-mode: both; } /* ==================================================================== =Animations ================================================================= */ @keyframes anim-dotloader { 0% { text-indent: 0; } 33% { text-indent: -0.66em; } 66% { text-indent: -0.33em; } 100% { text-indent: 0; } } /* ==================================================================== // Graph // // As a small horizontal meter to indicate usage (e.g. margin). The // associated "usage" background is implemented as a gradient, and can // be used to show either a solid fill or a 3 color gradient. // // The visual meter is controlled with an inline width on the `.graph-bar` // child element. Graphs can also be compacted to reduce their vertical // height by applying the `.graph--skinny` modifier (good for inline // graphs). // // Graphs can be reversed in direction by applying the modifier `.graph--rev` // though only on basic Graphs, and not "Heat" Graphs (`.graph--heat`). // // // // // // // // // Markup: //
//
//
// // Styleguide 9.6 ===================================================================== */ .graph { position: relative; height: 1rem; width: 100%; display: inline-block; background-image: linear-gradient( to right, var(--app-sub-active-bg), var(--app-sub-active-bg) 50%, var(--app-sub-active-bg) ); background-repeat: no-repeat; /* ==================================================================== // Bar ==================================================================== */ /* ==================================================================== // Reverse ==================================================================== */ /** * 1. Ensure --rev modifier is respected in datagrids (whose contents * are set LTR) */ /* ==================================================================== // Skinny ==================================================================== */ /* ==================================================================== // Heat Modifier ==================================================================== */ /* ==================================================================== // Fixed Width ==================================================================== */ /* ==================================================================== // Mono ==================================================================== */ } .graph-bar { position: absolute; background: var(--app-alt-related-bg); height: 100%; right: 0; } .graph--rev .graph-bar { left: 0; direction: ltr; } .graph--skinny { height: 0.5rem; } .graph--skinny .graph-bar { height: 0.5rem; } .graph--medium { height: 0.67rem; } .graph--medium .graph-bar { height: 0.67rem; } .graph--heat { background-image: linear-gradient(to right, #6eb739, #faee6a 50%, #e35837); background-repeat: no-repeat; } .graph--heat.graph--rev { background-image: linear-gradient(to right, #e35837, #faee6a 50%, #6eb739); background-repeat: no-repeat; } .graph--fixedwidth { width: 60px; } .graph--mono { background: var(--app-meta-color); } /** * EMPTY MESSAGE * ===================================================================== */ .empty-message { height: 100%; width: 100%; padding: 8px; } .empty-message__close { position: absolute; top: 0; right: 0; } .empty-message--mask { background: var(--aurora-background-level-1); } .empty-message--cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* ==================================================================== // Warning // // Simple warning block to be displayed inside popups/sheets/... // Unlike the warning block used thusfar, the icon is inline with the // warning text. // // Markup: //
// // Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do // eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim // ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut // aliquip //
// // Styleguide 9.10 ==================================================================== */ /** * 1. Nudge the icons vertical position to align it with the first line of text * 2. The default hight of the icon container is bigger than the icon size so we need * to crop that to it´s actual size in order not to distort surrounding text */ .warning { color: var(--app-color); } .warning, .warning.grid, .warning.grid-cell { margin-bottom: 8px; line-height: 1.4; word-wrap: break-word; } .warning:last-child, .warning.grid:last-child, .warning.grid-cell:last-child { margin-bottom: 0; } /** * TILE BLOCK * ===================================================================== **/ .tile { background-color: var(--app-content-bg); padding: 8px 16px; } .tile-desc { font-size: 12px; line-height: 2rem; } .tile-desc, .tile-desc.grid, .tile-desc.grid-cell { margin-bottom: 8px; line-height: 1.4; word-wrap: break-word; } .tile-desc:last-child, .tile-desc.grid:last-child, .tile-desc.grid-cell:last-child { margin-bottom: 0; } /* ==================================================================== // Overlay // // An element to put on top of other elements to block them from user input. // // Markup: //
// // Styleguide 9.13 ===================================================================== */ .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-bg); z-index: 3000; } /* * VERTICAL TABS * ===================================================================== */ .vertical-tabs__tab, .vertical-tabs__selectable-tab { cursor: pointer; line-height: 16px; padding-top: 16px; padding-bottom: 12px; box-shadow: inset 0 -1px var(--border-color-default); } .vertical-tabs__tab { color: var(--text-color-secondary); } .vertical-tabs__tab:hover, .vertical-tabs__tab--active { color: var(--text-color-default); } .vertical-tabs__tab--active { box-shadow: inset 0 -1px var(--text-color-default); } .vertical-tabs__selectable-tab { color: var(--text-color-default); } .vertical-tabs__title, .vertical-tabs__icon { font-size: 16px; line-height: 3rem; } .vertical-tabs__description { font-size: 12px; line-height: 2rem; } .vertical-tabs--aurora .vertical-tabs__tab, .vertical-tabs--aurora .vertical-tabs__selectable-tab { line-height: 120%; box-shadow: inset 0 -1px var(--aurora-border-level-2); } .vertical-tabs--aurora .vertical-tabs__tab { position: relative; color: var(--aurora-text-color-tertiary); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .vertical-tabs--aurora .vertical-tabs__tab:hover { color: var(--aurora-text-color-primary); } } .vertical-tabs--aurora .vertical-tabs__tab--active { color: var(--aurora-text-color-primary); } .vertical-tabs--aurora .vertical-tabs__tab--active::after { left: 0; right: 0; bottom: 0; content: ''; height: 3px; position: absolute; border-radius: 6px; background-color: var(--aurora-color-brand-primary); } .vertical-tabs--aurora .vertical-tabs__selectable-tab { color: var(--aurora-text-color-primary); } .vertical-tabs--aurora .vertical-tabs__title, .vertical-tabs--aurora .vertical-tabs__icon { font-size: 16px; font-weight: 700; } .vertical-tabs--aurora .vertical-tabs__description { font-size: 12px; color: var(--aurora-text-color-secondary); } /* * LINK * ===================================================================== */ /** * 1. Reset browser styles (eg, from // // // // Styleguide 9.9 ===================================================================== */ .legacytoolbar { position: relative; padding: 3px 3px; border-bottom: 1px solid var(--app-hairline); } /* * RANGE * ===================================================================== */ /** * Class names don't support BEM in this file as they have to match * the classes in `rc-range` library. */ .range { position: relative; display: flex; align-items: center; /** * To prevent flickering of cursor while dragging */ } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .range:not(.range--disabled) .range-handle:hover { background-color: var(--color-primary-hover); } } .range-rail { width: 100%; background-color: var(--border-color-default); } .range-handle { position: absolute; background-color: var(--color-primary); transition: background-color ease-in-out 150ms; border-radius: 50%; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .range-handle:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .range-handle:focus { outline: none; } .range-handle-content { height: 100%; color: var(--action-text-color-primary); } .range-track { position: absolute; background-color: var(--color-primary); opacity: 0.48; } .range-mark-text { position: absolute; color: var(--text-color-secondary); font-size: 12px; line-height: 2rem; white-space: nowrap; } .range-dot { position: absolute; width: 1px; background-color: rgba(0, 0, 0, 0.2); } .range--dragging { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .range--disabled .range-handle { background-color: var(--text-color-tertiary); cursor: default; } .range--disabled .range-track { background-color: var(--text-color-tertiary); } .range--disabled .range-rail { background-color: transparent; border: 1px solid; border-color: var(--text-color-tertiary); } .range--tiny { height: 16px; margin: 0 8px; } .range--tiny .range-handle { height: 16px; width: 16px; } .range--tiny .range-track, .range--tiny .range-rail { height: 2px; border-radius: 1px; } .range--tiny .range-dot { margin-top: -2px; height: 4px; } .range--tiny .range-mark-text { margin-top: 10px; font-size: 11px; } .range--tiny .range-handle-content { font-size: 6px; } .range--small { height: 24px; margin: 0 12px; } .range--small .range-handle { height: 24px; width: 24px; } .range--small .range-track, .range--small .range-rail { height: 4px; border-radius: 2px; } .range--small .range-dot { margin-top: -3px; height: 6px; } .range--small .range-mark-text { margin-top: 18px; font-size: 14px; } .range--small .range-handle-content { font-size: 8px; } .range--medium { height: 32px; margin: 0 16px; } .range--medium .range-handle { height: 32px; width: 32px; } .range--medium .range-track, .range--medium .range-rail { height: 6px; border-radius: 3px; } .range--medium .range-dot { margin-top: -4px; height: 8px; } .range--medium .range-mark-text { margin-top: 22px; font-size: 14px; } .range--medium .range-handle-content { font-size: 10px; } .range--large { height: 40px; margin: 0 20px; } .range--large .range-handle { height: 40px; width: 40px; } .range--large .range-track, .range--large .range-rail { height: 10px; border-radius: 5px; } .range--large .range-dot { margin-top: -6px; height: 12px; } .range--large .range-mark-text { margin-top: 34px; font-size: 16px; } .range--large .range-handle-content { font-size: 12px; } .range-with-marks.range--tiny { height: 32px; padding-bottom: 16px; } .range-with-marks.range--small { height: 48px; padding-bottom: 24px; } .range-with-marks.range--medium { height: 56px; padding-bottom: 24px; } .range-with-marks.range--large { height: 72px; padding-bottom: 30px; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .range--aurora:not(.range--disabled) .range-handle:hover { background-color: var(--aurora-color-brand-primary-hover); } } .range--aurora .range-rail { background-color: var(--aurora-background-level-3); } .range--aurora .range-handle { background-color: var(--aurora-color-brand-primary); } .range--aurora .range-track { background-color: var(--aurora-color-brand-primary); opacity: 0.48; } .range--aurora .range-mark-text { color: var(--aurora-text-color-secondary); } .range--aurora.range--disabled .range-handle { background-color: var(--aurora-border-level-3); } .range--aurora.range--disabled .range-track { background-color: var(--aurora-border-level-3); } .range--aurora.range--disabled .range-rail { background-color: var(--aurora-border-level-2); border-color: var(--aurora-border-level-2); } /* * LINK LEGACY * * Keep support to old CA Admin color variables, will be removed * once all CA Admin old colors migrates to new color variables. * ===================================================================== */ .link { color: var(--app-link-color); } .link--disabled { color: var(--app-muted-color); cursor: default; } .link--aurora { color: var(--aurora-color-brand-tertiary); } /* * SLIDER * ===================================================================== */ /** * Class names don't support BEM in this file as they have to match * the classes in `rc-slider` library. */ .slider { position: relative; display: flex; align-items: center; /** * 1. 50% of the max slide size value available. */ /** * To prevent flickering of cursor while dragging */ } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .slider:not(.slider--disabled) .slider-handle-content:hover { background-color: var(--color-primary-hover); } } .slider-rail { width: 100%; border-radius: 0.75rem; background-color: var(--border-color-default); } .slider-handle { position: absolute; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .slider-handle:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .slider-handle:focus { outline: none; } .slider-handle-content { transition: background-color ease-in-out 150ms; border-radius: 50%; background-color: var(--color-primary); color: var(--action-text-color-primary); } .slider-handle-value { position: absolute; margin-top: 6px; width: 100%; text-align: center; color: var(--text-color-secondary); } .slider-track { position: absolute; } .slider.slider--fill .slider-track { background-color: var(--color-primary); opacity: 0.48; } .slider-mark-text { position: absolute; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: var(--text-color-secondary); font-size: 12px; line-height: 2rem; } .slider-dot { position: absolute; width: 1px; background-color: rgba(0, 0, 0, 0.2); } .slider--dragging { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .slider--disabled .slider-handle-content { background-color: var(--text-color-tertiary); cursor: default; } .slider--disabled .slider-track { background-color: var(--text-color-tertiary); } .slider--disabled .slider-rail { background-color: transparent; border: 1px solid; border-color: var(--text-color-tertiary); } .slider--tiny { height: 16px; margin: 0 8px; } .slider--tiny .slider-handle-content { height: 16px; width: 16px; } .slider--tiny .slider-track, .slider--tiny .slider-rail { height: 2px; } .slider--tiny .slider-dot { margin-top: -2px; height: 4px; } .slider--tiny .slider-mark-text { margin-top: 10px; font-size: 11px; } .slider--tiny .slider-handle-value { margin-top: 2px; font-size: 11px; } .slider--tiny .slider-handle-content { font-size: 6px; } .slider--small { height: 24px; margin: 0 12px; } .slider--small .slider-handle-content { height: 24px; width: 24px; } .slider--small .slider-track, .slider--small .slider-rail { height: 4px; } .slider--small .slider-dot { margin-top: -3px; height: 6px; } .slider--small .slider-mark-text { margin-top: 18px; font-size: 14px; } .slider--small .slider-handle-value { font-size: 14px; } .slider--small .slider-handle-content { font-size: 8px; } .slider--medium { height: 32px; margin: 0 16px; } .slider--medium .slider-handle-content { height: 32px; width: 32px; } .slider--medium .slider-track, .slider--medium .slider-rail { height: 6px; } .slider--medium .slider-dot { margin-top: -4px; height: 8px; } .slider--medium .slider-mark-text { margin-top: 22px; font-size: 14px; } .slider--medium .slider-handle-value { font-size: 14px; } .slider--medium .slider-handle-content { font-size: 10px; } .slider--large { height: 40px; margin: 0 20px; } .slider--large .slider-handle-content { height: 40px; width: 40px; } .slider--large .slider-track, .slider--large .slider-rail { height: 10px; } .slider--large .slider-dot { margin-top: -6px; height: 12px; } .slider--large .slider-mark-text { margin-top: 34px; font-size: 16px; } .slider--large .slider-handle-value { margin-top: 14px; font-size: 16px; } .slider--large .slider-handle-content { font-size: 12px; } .slider-with-marks.slider--tiny { height: 32px; padding-bottom: 16px; } .slider-with-marks.slider--small { height: 48px; padding-bottom: 24px; } .slider-with-marks.slider--medium { height: 56px; padding-bottom: 24px; } .slider-with-marks.slider--large { height: 72px; padding-bottom: 30px; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .slider--aurora:not(.slider--disabled) .slider-handle-content:hover { background-color: var(--aurora-color-brand-primary-hover); } } .slider--aurora.slider--fill .slider-track { background-color: var(--aurora-color-brand-primary); opacity: 0.48; } .slider--aurora .slider-rail { background-color: var(--aurora-background-level-3); } .slider--aurora .slider-handle-content { background-color: var(--aurora-color-brand-primary); } .slider--aurora .slider-mark-text, .slider--aurora .slider-handle-value { color: var(--aurora-text-color-secondary); } .slider--aurora.slider--disabled .slider-handle-content { background-color: var(--aurora-border-level-3); } .slider--aurora.slider--disabled .slider-rail { background-color: var(--aurora-border-level-2); border-color: var(--aurora-border-level-2); } .slider--aurora.slider--disabled.slider--fill .slider-track { background-color: var(--aurora-border-level-3); } .slider--aurora.slider--tiny .slider-handle-content { font-size: 6px; } .slider--aurora.slider--small .slider-handle-content { font-size: 8px; } .slider--aurora.slider--medium .slider-handle-content { font-size: 10px; } .slider--aurora.slider--large .slider-handle-content { font-size: 12px; } .squawk { display: flex; } .squawk__text-side { width: 60%; position: relative; font-size: 16px; line-height: 3rem; padding-right: 3rem; } .squawk__timestamp { font-size: 14px; line-height: 2rem; color: var(--text-color-secondary); margin-bottom: 2rem; margin-top: 0.2rem; } .squawk__author-side { width: 40%; padding: 0 3rem; border-left: 1px solid var(--border-color-highlight-inverted); display: flex; align-items: center; } .squawk--stacked { flex-wrap: wrap; } .squawk--stacked .squawk__text-side { width: 100%; padding-right: 0rem; padding-bottom: 2rem; } .squawk--stacked .squawk__author-side { width: 100%; padding: 2rem 0 1rem 0; margin-left: 4rem; margin-right: 2rem; border-left: 0rem; border-top: 1px solid var(--border-color-highlight-inverted); } .squawk--aurora .squawk__timestamp { color: var(--aurora-text-color-secondary); } .squawk--aurora .squawk__author { border-color: var(--aurora-border-level-1); } .squawk--aurora .squawk--stacked .squawk__author-side { border-color: var(--aurora-border-level-1); } /* * ILLUSTRATION COMPONENT * ===================================================================== * */ /** * 1. The SVG should not grow outside its container as the default width is 300px * * 2. Ensure the SVG has a height in IE11 */ .illustration { max-width: 100%; height: 100%; } .illustration--small { height: 3rem; } .illustration--medium { height: 5rem; } .illustration--large { height: 8rem; } .illustration--huge { height: 11rem; } .illustration--gigantic { height: 14rem; } .illustration--insane { height: 17rem; } .illustration--auto { height: auto; } .illustration--boxed { border: 1px solid var(--border-color-default); border-radius: var(--border-radius-action); } /* ==================================================================== // Key/Value block // // Block for displaying Key/Value data pairs (inc. sub-data columns). // // - The Block has been implemented atop the Flexbox grid system, // rather than `
` pairings, or a `` // - Reason is `.grid-cell` Flex Items by default stretch to span // the height of `.grid` Flex Containers, regardless of height // - This renders the illusion of complete rows, whilst also // retaining the ability to implement more demanding layouts as // the design demands (in relation to distribution of space/alignment) // - To illustrate, try reducing the width of a highlighted section so // that the contents of the "key" columns breaks to multiple lines. // - Notice that the height of the adjacent column(s) (i.e. the // "value") auto-expands to match the height of the first column. // // // // // // // // // // // // // // // // // // Markup: //
Title
//
    //
  • //
    Label 1
    //
    Value 1
    //
    • //
  • //
    Label 2
    //
    Value 2
    //
    • //
//
Another title
//
    //
  • //
    Label 1
    //
    Value 1
    //
    • //
  • //
    Really long key with a lot of text which is totally not realistic but could maybe happen
    //
    Really long val with a lot of text which is totally not realistic but could maybe happen
    //
    • //
// // Styleguide 10.5 ===================================================================== */ .kv { list-style-type: none; font-size: 12px; line-height: 2.5rem; /* ==================================================================== =Title ================================================================= */ /* ==================================================================== =KV Groups ================================================================= */ /* ==================================================================== =Key ================================================================= */ /* ==================================================================== =Value ================================================================= */ /* ==================================================================== =Centered Labels ================================================================= */ /* ==================================================================== =Split Pair ================================================================= */ /* ==================================================================== =Hairline Separator ================================================================= */ /* ==================================================================== =Total ================================================================= */ /** * 1. Cover previous kv--lines bottom border */ /* ==================================================================== =Border List ================================================================= */ /* ==================================================================== =Table Layout ================================================================= */ /* ==================================================================== =Wrap ================================================================= */ /** * 1. Make room for the 2nd line of the key, so only the first * line will wrap. The .kv-key's padding-bottom will ensure the * li element's height is maintained. */ /* ==================================================================== =Skinny ================================================================= */ /* ==================================================================== =Base ================================================================= */ /* ==================================================================== =Outline ================================================================= */ /* ==================================================================== =Edge ================================================================= */ /* ==================================================================== =Light ================================================================= */ /* ==================================================================== =Compact ================================================================= */ /* ==================================================================== =Mute ================================================================= */ /* ==================================================================== =Highlight ================================================================= */ } .kv-title { border-bottom: 1px solid var(--app-hairline); font-size: 12px; line-height: 3rem; /** * Add visual seperation */ } .kv-title--sep { padding-top: 8px; } .kv--group + .kv--group { border-top: 1px solid var(--app-alt-hairline); } .kv-key { padding: 4px 8px; color: var(--app-meta-color); word-wrap: break-word; } .kv-val { position: relative; padding: 4px 8px; /** * 1. Pull highlighted 'value' left so contents align with * standard columns. * Since this is always (?) ltr, don't bother with margin-start() */ /** * 2. Text needs to be selectable for specific list values (e.g. IBAN number) * */ } .kv-val > .part { margin-left: 4px; } .kv-val--selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .kv--center .kv-key { text-align: right; text-align: end; padding-right: 4px; } .kv--center .kv-val { padding-left: 4px; } .kv--split { /** * 1. Ensure `grid-cell` doesn't collapse */ } .kv--split .kv-key, .kv--split .kv-val { width: auto; } .kv--split .kv-key { padding-right: 4px; } .kv--split .kv-val { text-align: right; text-align: end; padding-left: 4px; } .kv--lines { border-bottom: 1px solid var(--app-hairline); } .kv--lines .kv-key, .kv--lines .kv-val { line-height: 3rem; } .well .kv--lines { border-bottom: 0; } .kv--lines > :not(:first-child) .kv-key, .kv--lines > :not(:first-child) .kv-val, .kv--lines > :not(:first-child) .btn { border-top: 1px solid var(--app-hairline); } .well .kv--lines > :not(:first-child) .kv-key, .well .kv--lines > :not(:first-child) .kv-val, .well .kv--lines > :not(:first-child) .btn, .well.kv--lines > :not(:first-child) .kv-key, .well.kv--lines > :not(:first-child) .kv-val, .well.kv--lines > :not(:first-child) .btn { border-color: var(--app-hairline); } .well--deep .kv--lines > :not(:first-child) .kv-key, .well--deep .kv--lines > :not(:first-child) .kv-val, .well--deep .kv--lines > :not(:first-child) .btn, .well--deep.kv--lines > :not(:first-child) .kv-key, .well--deep.kv--lines > :not(:first-child) .kv-val, .well--deep.kv--lines > :not(:first-child) .btn { border-color: var(--app-sub-deep-border); } .kv--total { border-top: 1px solid var(--app-alt-keyline); } .kv--total .kv-key, .kv--total .kv-val { color: var(--app-color); font-weight: bold; } .kv--lines + .kv--total { margin-top: -1px; } .kv--border { border: 1px solid var(--app-alt-hairline); } .kv--table tbody > tr > td { border-bottom: 0; padding: 0 0 0 8px; } .kv--table tbody > tr > td:first-child { padding-left: 0; } .kv--wrap > li:before, .kv--wrap > li:after { content: ' '; display: table; } .kv--wrap > li:after { clear: both; } .kv--wrap .kv-val { padding-bottom: 0; text-align: right; text-align: end; float: right; } .kv--skinny .kv-val, .kv--skinny .kv-key { padding: 2px 0; } .kv--base .kv-key, .kv--base .kv-val { font-weight: bold; padding: 4px 8px; } .kv--base > :not(:first-child) .kv-key, .kv--base > :not(:first-child) .kv-val { border-top: 1px solid var(--gray-darkest); } .kv--base .kv-key { color: var(--gray-semi-light); } .kv--base .kv-val { position: relative; text-align: right; text-align: end; /** * 1. Pull highlighted 'value' left so contents align with * standard columns. */ } [dir='ltr'] .kv--base .kv-val.is-selected { border-right: 1px solid var(--gray-darkest); } [dir='rtl'] .kv--base .kv-val.is-selected { border-left: 1px solid var(--gray-darkest); } .kv--base .kv-val > .part { margin-left: 4px; } .kv--outline { border: 1px solid var(--gray-darkest); } .kv--outline.kv--light { border: 1px solid var(--gray-dark); } .kv--edge .kv-key { padding-left: 0; } .kv--edge .kv-val { padding-right: 0; } .kv--light .kv-key, .kv--light .kv-val { font-weight: normal; color: var(--gray-semi-light); } .kv--light > :not(:first-child) .kv-val, .kv--light > :not(:first-child) .kv-key { border-color: var(--gray-dark); } .kv--compact .kv-key, .kv--compact .kv-val { font-size: 12px; line-height: 2rem; padding: 1px 4px; } .kv--mute .kv-key, .kv--mute .kv-val { font-weight: normal; color: var(--app-muted-color); } .kv .is-highlighted .kv-key, .kv .is-highlighted .kv-val { color: var(--app-color); } /** * KV BLOCK (PRO EXTENSIONS) * ===================================================================== */ /** * 1. We no longer need padding on the sides since we're not using `wells` */ .kv { font-size: 11px; /** * 1. Ensure the rows don't become too slender */ } .kv-title { font-size: 11px; } .kv-key, .kv-val { padding: 4px 0; } .kv--skinny .kv-val, .kv--skinny .kv-key { padding: 2px 0; } /** * LOGO BLOCK * ===================================================================== */ .logo { display: inline-block; height: var(--logo-default-height); background-size: contain; background-repeat: no-repeat; background-position: center center; } .logo--primary { width: calc( var(--logo-default-height) * (var(--logo-primary-width) / var(--logo-primary-height)) ); background-image: var(--logo-primary); } .logo--secondary { width: calc( var(--logo-default-height) * (var(--logo-secondary-width) / var(--logo-secondary-height)) ); background-image: var(--logo-secondary); } .logo--splash { width: calc( var(--logo-default-height) * (var(--logo-splash-width) / var(--logo-splash-height)) ); background-image: var(--logo-splash); } /** * LOGO BLOCK (PRO) * ===================================================================== */ .logo--primary { width: calc(var(--logo-default-height) * var(--logo-primary-pro-ratio)); background-image: var(--logo-primary-pro); } .logo--secondary { width: calc(var(--logo-default-height) * var(--logo-secondary-pro-ratio)); background-image: var(--logo-secondary-pro); } .logo--splash { background-image: var(--logo-splash-pro); background-position: center; background-repeat: no-repeat; } /* ==================================================================== // Divider // // Simple Block to section content. The divider label is _optional_, and // it can be increased in vertical height by adding the modifier // `.legacydivider--large`. It can also be emphasized through adding the CSS // constant `.is-highlighted`. // // // // // Markup: //
Divider example
//

Some content

//
//

More content

// // Styleguide 10.2 ===================================================================== */ /** * 1. Borders are excluded of the height. * 2. Account for border width. */ .legacydivider { height: 22px; line-height: 21px; border-top: 1px solid var(--legacydivider-border); border-bottom: 1px solid var(--legacydivider-border); background-image: linear-gradient( to right, var(--legacydivider-bg-start) 0%, var(--legacydivider-bg-end) 100% ); background-repeat: repeat-x; font-size: 12px; line-height: 2rem; font-weight: normal; color: var(--divider-color); /** * 1. Chrome tile the background-image on the child element (!), so reset to a solid colour in * these instances. * ref: https://code.google.com/p/chromium/issues/detail?id=122988 * ex: http://codepen.io/CreativeJuiz/details/aOZyVJ/ * 2. Firefox (see bug #794381) suffers from strange rendering bugs, so reset to a solid color * 3. Rendering bugs when applying a background color to tr element, applying it to tds fixes this. */ /** * 1. Merge into surrounding frame * 2. Empty dividers simply section content, rather than act * as headers, so match them to tab frames */ } tr.legacydivider { background-attachment: fixed; /** * 1. Use divider border color on table cells when the table row is a * divider. */ } tr.legacydivider th, tr.legacydivider td { border-color: var(--legacydivider-border); } .chrome tr.legacydivider, .moz tr.legacydivider { background-image: none; } .chrome tr.legacydivider > td, .moz tr.legacydivider > td { background-color: var(--legacydivider-bg-start); } .legacydivider:empty { height: 10px; margin: 0 -1px; border-color: var(--tabs-pane-border); background-color: var(--tabs-frame-bg); background-image: none; } .legacydivider--large { height: 38px; line-height: 37px; } .legacydivider--large:empty { height: 19px; } .legacydivider.is-highlighted { color: var(--legacydivider-highlight-color); } /** * DIVIDER BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ .legacydivider--large { height: 28px; line-height: 27px; } .legacydivider--large:empty { height: 14px; } /* ==================================================================== // List // // Block mixin providing some default behaviours for a menu of items. // Can be mixed into derivative Blocks, e.g. Search Results, or provide // the basis for a Component. // // Base styles encapsulated: // // - Item spacing: increased line-height of list item. // - Sub-item (one level): Identify nested items with the class `.list-sub-item` // - Hover state: enabled by default, can be disabled with `.list--inert` // - Selected state: Add the CSS constant `is-selected` to a `.list-item` // - Disabled state: Add the CSS constant `is-disabled` to a `.list-item` // - Highlight state: Add the CSS constant `is-highlighted` to a `.list-item` // // A list can have an optional `.list-title`, and can be section by // mixing in a `.legacydivider` Block with a `.list-item`. // // --- // // NOTE: Like other Blocks/Components, `.list` assumes the correct // background and border is provided via a parent wrapper such as // `.oui-card` or `.oui-popup`. // // // // // // // // Markup: //
    //
  • List Title
    • //
  • Standard list item
    • //
  • Standard list item
    • //
  • Sub-list item one
    • //
  • Sub-list item two
    • //
  • Selected list item
    • //
  • Disabled list item
    • //
  • Divider Mixin
    • //
  • An extremely long list item which is either truncated or wrapped depending on the modifier applied, and if the width of the list item is too short to show the label
    • //
  • //
    //
    Category label
    //
    // //
    //
    //
    • //
// // Markup, list with virtual layout support: // //
//
//
// ... //
//
List Title
//
//
//
Standard list item
//
//
//
Standard list item
//
// .... //
//
//
// // Styleguide 10.4 ===================================================================== */ .list { position: relative; list-style-type: none; /** * 1. Ensure items truncate their content in < IE 11 */ /* ==================================================================== // Actions ==================================================================== */ /* ==================================================================== // Links ==================================================================== */ /* ==================================================================== // Sub-item ==================================================================== */ /* ==================================================================== // Title ==================================================================== */ /* ==================================================================== // Divider ==================================================================== */ /* ==================================================================== // Lines ==================================================================== */ /* ==================================================================== // Item Wrapping ==================================================================== */ /** * 1. Allow contents of list items to wrap */ /* ==================================================================== // Compact ==================================================================== */ /* ==================================================================== // Bottom border ==================================================================== */ } .list-item, .list-sub-item, .list-title { padding: 4px 8px; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-item:not(.grid), .list-sub-item:not(.grid), .list-title:not(.grid) { display: block; } .list-item, .list-title, .list-sub-item { /** * 1. Optical placement */ } .list--action .list-item, .list--action .list-title, .list--action .list-sub-item { padding-right: 40px; } .list-item--action .btn, .list-title--action .btn, .list-sub-item--action .btn, .list--action .list-item .btn, .list--action .list-title .btn, .list--action .list-sub-item .btn { position: absolute; top: 2px; right: 8px; } .list-item.is-disabled, .list-title.is-disabled, .list-sub-item.is-disabled { color: var(--app-muted-color); } .list-item.is-selected, .list-title.is-selected, .list-sub-item.is-selected { background: var(--app-active-bg); color: var(--app-color); } .list--link, .list-item--link { color: var(--app-color); } .list-sub-item { padding-left: 32px; } .list-title { font-weight: bold; } .list .legacydivider { padding: 0 16px; } .list .legacydivider + .list-item { border-top: 0; } .list--lines { /** * 1. Implemented in long-hand style so derivative Blocks/Components * do not need to reference colour values when specifying extra * borders. Instead, they can simply specify a width. */ } .list--lines:not(:last-child), .list--lines :not(.list-layout__item--last) > .list-item, .list--lines :not(.list-layout__item--last) > .list-title { border-bottom: 1px solid var(--app-hairline); } .list--lines .list-item, .list--lines .list-title { border-color: var(--app-hairline); border-style: solid; border-width: 1px 0 0 0; } .list--lines .list-item:first-child, .list--lines .list-title:first-child { border-top-width: 0; } .list--lines .list-layout__item > .list-item.is-open, .list--lines .list-layout__item > .list-title.is-open { border-bottom-width: 0; } .list--lines + .list--lines .list-item:only-child { border-top-width: 1px; } .list--wrap .list-item, .list--wrap .list-sub-item, .list--wrap .list-title { white-space: normal; overflow: visible; } .list--compact .list-title, .list--compact .list-item { padding: 4px 8px; } .list--border-bottom .list-item:last-child { border-bottom: 1px solid var(--app-hairline); } /** * LIST BASE BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ .list { /* ==================================================================== =Items ================================================================= */ /** * 1. Ensure items truncate their content in < IE 11 */ /* ==================================================================== =Divider ================================================================= */ } .list-sub-item { padding-left: 16px; } .list:not(.list--inert) .list-item:not(.is-disabled):hover, .list:not(.list--inert) .list-title:not(.is-disabled):hover, .list:not(.list--inert) .list-sub-item:not(.is-disabled):hover { background: var(--app-active-bg); color: var(--app-color); cursor: pointer; /** * 1. content overrides to avoid using !important */ } .list:not(.list--inert) .list-item:not(.is-disabled):hover .instr-desc, .list:not(.list--inert) .list-title:not(.is-disabled):hover .instr-desc, .list:not(.list--inert) .list-sub-item:not(.is-disabled):hover .instr-desc, .list:not(.list--inert) .list-item:not(.is-disabled):hover .beta, .list:not(.list--inert) .list-title:not(.is-disabled):hover .beta, .list:not(.list--inert) .list-sub-item:not(.is-disabled):hover .beta, .list:not(.list--inert) .list-item:not(.is-disabled):hover .is-marked, .list:not(.list--inert) .list-title:not(.is-disabled):hover .is-marked, .list:not(.list--inert) .list-sub-item:not(.is-disabled):hover .is-marked { color: var(--app-color); } .list:not(.list--inert) .list-item .btn, .list:not(.list--inert) .list-title .btn, .list:not(.list--inert) .list-sub-item .btn { top: 1px; } .list .legacydivider { padding: 0 8px; } /** * DATAGRID BASE BLOCK * ===================================================================== * * - Extends tables.less base styles. * - Provides solid foundation for dense 'live' data sets presented in * Watchlist, Positions and Open Orders components. * - As a pseudo-block, `.data-grid` *is* knowlegeable about other UI * blocks which may be nested within it, so provides a few base * behavioural rules to ensure they appear consistently. * - These rules should be mirrored in any derivative Components * e.g. Watchlist, and map to component-specific variables * to allow per-component WLC overrides. * - Column widths determined by inline widths" * - More brittle approach but based on fact that each column has * an associated explicit width equal to the max num of chars * it needs to accommodate. * - Also speeds up rendering of such tables as column widths * are set by the first row * Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout * - `val-*` classes are reserved for JavaScript bindings - DO NOT * hook any presentational CSS to these, as they are liable to * change at the whim of a JavaScript developer. * - s are limited in how they can be animated, as dimensions * cannot be set on them (e.g. height: 0). Translates do work * however. * * CONTENTS * --------------------------------------------------------------------- * * =Animations * =Headers * =Selected Item * =Highlighted Item * =Product Headers * =Content Behaviours * =Action Buttons * =Price Status Icon */ /* ==================================================================== =Animations ================================================================= */ @keyframes highlight { 5%, 95% { background-color: var(--app-highlight-bg); } } .datagrid { /** * 1. Required for the fixed column solution via to * function. */ /** * 1. Mask swipe menu if present beneath row * 2. Numbers always need to be LTR (so minus sign/currency always appears on the left) * 3. Cells are always aligned to the right, except for those with a t-start override * 4. The t-start override * 5. Vertical padding only for data cells (not column headers). These * are implemented via line-heights to ensure all characters are * displayed correctly. */ /* ==================================================================== =Slim ================================================================= */ /* ==================================================================== =Alpha ================================================================= */ /** * Short for alphabetical, start aligns all cells * * 1. Required as targeting th seems to have no effect in relation * to text-alignment. */ /* ==================================================================== =Headers ================================================================= */ /* ==================================================================== =Sortable Header ================================================================= */ /** * 1. Allow space for sorting icon */ /* ==================================================================== =Selected Item ================================================================= */ /** * 1. Setting background color on tr element causes rendering bug * when collapsing and expanding, applying it to contained tds fixes this. */ /* ==================================================================== =Highlight Item ================================================================= */ /* ==================================================================== =Product Headers ================================================================= */ /* ==================================================================== =Collapsible Section Content ================================================================= */ /* ==================================================================== =Content Behaviours ================================================================= */ /** * Icon columns */ /** * 1. Ensure proper vertical aligment by inherit the line-height from the * datagrid. */ /** * 1. Prevent fields from wrapping, helps browser lay out cells * optimally. */ /** * Handle aligned content */ /** * Account for empty

tags which otherwise collapse * to height zero. * * 1. Ensures empty primary

pushes the secondary content in * double-row mode to be baseline aligned with the rest of * the row. * TODO: Will be fix once React Grid Component migration completes. * 2. If only `.beta` sized content exists in the cell, size * appropriately (otherwise row is too large and creates gaps). */ /** * Optical placements * * 1. Baseline align content. * 2. Ensure icon blocks don't push adjacent content off baseline * grid. */ /* ==================================================================== =Action Buttons ================================================================= */ /** * OVERRIDES: ActionBtn Block * 1. Buttons in a datagrid should take full available height. * 2. Collapse injected whitespace (no RTL as always LTR-aligned) * 3. Ensure the height of the action button in webkit with empty paragraphs * by top aligning the inline content. */ /* ==================================================================== =Indicator ==================================================================*/ } table.datagrid { table-layout: fixed; } .datagrid thead > tr:not(.legacydivider):not(.is-selected), .datagrid tbody > tr:not(.legacydivider):not(.is-selected) { background-color: var(--app-content-bg); } .datagrid thead > tr > th, .datagrid tbody > tr > th, .datagrid thead > tr > td, .datagrid tbody > tr > td { position: relative; direction: ltr; text-align: right; } .datagrid thead > tr > th.t-start, .datagrid tbody > tr > th.t-start, .datagrid thead > tr > td.t-start, .datagrid tbody > tr > td.t-start { direction: ltr; } .datagrid thead > tr > td, .datagrid tbody > tr > td { padding: 2px 4px; } .datagrid--slim { font-size: 13px; } .datagrid--alpha thead > tr > th, .datagrid--alpha tbody > tr > th, .datagrid--alpha thead > tr > td, .datagrid--alpha tbody > tr > td { vertical-align: middle; text-align: left; text-align: start; } .datagrid--alpha thead > tr > th p, .datagrid--alpha tbody > tr > th p, .datagrid--alpha thead > tr > td p, .datagrid--alpha tbody > tr > td p { text-align: left; text-align: start; } .datagrid-header th, .datagrid .table-header th { padding: 0 4px; color: var(--datagrid-header-color); /** * 1. Position underneath high sort icon */ } .datagrid-header th .icon--low, .datagrid .table-header th .icon--low { margin-left: -8px; } .datagrid-header th:not(.t-start) .icon--high + .icon--low, .datagrid .table-header th:not(.t-start) .icon--high + .icon--low { margin-left: -8px; margin-right: 0; } .datagrid-header th[data-sortdir='high'].icon--high:before, .datagrid .table-header th[data-sortdir='high'].icon--high:before, .datagrid-header th[data-sortdir='high'] .icon--high:before, .datagrid .table-header th[data-sortdir='high'] .icon--high:before { color: var(--app-inverse-color) !important; } .datagrid-header th[data-sortdir='low'].icon--low:before, .datagrid .table-header th[data-sortdir='low'].icon--low:before, .datagrid-header th[data-sortdir='low'] .icon--low:before, .datagrid .table-header th[data-sortdir='low'] .icon--low:before { color: var(--app-inverse-color) !important; } .datagrid-header th.is-active p:not(.beta) { color: var(--app-color); } .datagrid-sortable-header { cursor: pointer; } .datagrid-sortable-header.is-sorted { padding-right: 16px; } .datagrid .is-selected { /** * 1. Action buttons in a selected row is styled as its hover state. */ } .datagrid .is-selected > td { background: var(--datagrid-active-bg); } .datagrid .is-selected .actionbtn:not([disabled]) { background-color: var(--actionbtn-hover-bg); color: var(--actionbtn-hover-color); transition-property: color, background-color; transition-duration: 200ms; } .datagrid .is-highlight { animation-name: highlight; animation-duration: 1000ms; } .datagrid .legacydivider td { border-top: 0; line-height: 21px; padding: 0 4px; text-align: left; text-align: start; direction: ltr; } .datagrid colgroup + .datagrid-divider > tr > td { border-top: 0; line-height: 21px; } .datagrid-section { opacity: 1; transition-property: opacity; transition-duration: 1ms; transition-timing-function: ease-in; } .datagrid-section.is-hidden { display: none; } .datagrid-section.is-shown { opacity: 1; transition-duration: 200ms; } .datagrid .c--fit { padding: 2px 2px 1px 2px !important; } .datagrid p { line-height: inherit; } .datagrid th:not(.c--wrap) p, .datagrid td:not(.c--wrap) p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .datagrid sub { white-space: nowrap; } .datagrid .t-start p { text-align: left; text-align: start; } .datagrid .t-center p { text-align: center; } .datagrid .instr { direction: ltr !important; text-align: left; } .datagrid .beta:not(:only-child) { position: relative; } .datagrid tr:not(.legacydivider) p:empty:first-child, .datagrid p:first-child b:empty, .datagrid .is-empty { height: 20px; display: block; } .datagrid p.beta:empty:only-child { height: 12px; } .datagrid p + .beta { min-height: 12px; } .datagrid .c--bottom .beta:only-child { margin-bottom: -4px; } .datagrid .actionbtn { height: 100%; vertical-align: top; } .ms .datagrid .actionbtn { float: left; } .datagrid .actionbtn .beta { color: inherit; } .datagrid .actionbtn.is-hidden { display: none; } .datagrid .indicator { position: absolute; top: 2px; left: 4px; bottom: 0; } .datagrid .indicator--right { right: 4px; left: auto; } /** * DATAGRID BASE BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ .datagrid { /* ==================================================================== =Slim ================================================================= */ /* ==================================================================== =Selectable ================================================================= */ /* ==================================================================== =Collapsible Section Content ================================================================= */ /* ==================================================================== =Content ================================================================= */ /** * 1. "Pinch" the secondary content leading to visually * associate the content together in double-row mode */ /** * 1. Make up for the lack of height caused by -2px margin on * instrument description */ /** * 1. Force small font for specific elements */ } .datagrid thead { font-size: 12px; line-height: 2rem; } .datagrid-header th[data-sortkey]:hover { cursor: pointer; } .datagrid-header th[data-sortkey]:hover p:not(.beta) { color: var(--app-color); } .datagrid--slim { font-size: 12px; line-height: 2rem; } .datagrid--selectable tbody tr:hover td { background: var(--datagrid-selectable-row-bg); color: var(--datagrid-selectable-row-color); cursor: pointer; } .datagrid-section { opacity: 0.5; /** * 1. IE cannot handle the animation */ } .moz .datagrid-section { transition-property: none; } .ms .datagrid-section { opacity: 0.99; } .datagrid-section.is-shown { transition-duration: 100ms; /** * 1. Tiny anim to trigger animationend */ } .ms .datagrid-section.is-shown { transition-duration: 0.01s; } .datagrid .beta { font-size: 12px; line-height: 2rem; } .datagrid .beta:not(:only-child) { line-height: 1; } .datagrid .instr-desc { padding-bottom: 2px; } .datagrid .actionbtn--text, .datagrid .acctselector { font-size: 12px; line-height: 2rem; } /** * DATAGRID BASE BLOCK (PRO EXTENSIONS) * ===================================================================== */ .datagrid { /** * Shift baseline, so it's optically aligned better */ /** * 1. In actuality, this means every c--fit class can be removed from markup. */ /* ==================================================================== =Product Headers ================================================================= */ /* ==================================================================== =Buttons and icons ================================================================= */ } .datagrid thead { font-size: 11px; line-height: 2rem; } .datagrid th, .datagrid td { height: 16px; line-height: 16px; } .datagrid p { position: relative; top: 1px; } .datagrid th:not(.c--wrap) p { height: 16px; } .datagrid .c--fit { padding: 2px 4px !important; } .datagrid .legacydivider td { height: 16px; line-height: 16px; padding: 0 4px; } .datagrid colgroup + .datagrid-divider > tr > td { line-height: 20px; } .datagrid .btn { padding: 0; vertical-align: top; } /** * CAROUSEL COMPONENT * ===================================================================== */ .carousel__bullets { height: 3rem; } .carousel { flex-grow: 1; width: 100%; position: relative; } .carousel__inner { padding-bottom: 1rem; overflow: hidden; } .carousel__track { display: flex; flex-wrap: nowrap; width: 100%; transition: transform 250ms ease-out; } .carousel__track--dragging { transition: none; pointer-events: none; } .carousel__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .carousel__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--action-text-color-secondary); margin-bottom: 1rem; flex-shrink: 0; } .carousel__dot--active { background: var(--text-color-default); } .carousel__dot + .carousel__dot { margin-left: 2rem; } .carousel--aurora .carousel__dot { background: var(--aurora-border-level-3); } .carousel--aurora .carousel__dot--active { background: var(--aurora-text-color-secondary); } .carousel-item { flex-shrink: 0; } .carousel-item + .carousel-item { margin-left: 2rem; } .carousel-item--width-25 { width: calc((100% - 6rem) / 4); } .carousel-item--width-33 { width: calc((100% - 4rem) / 3); } .carousel-item--width-50 { width: calc((100% - 2rem) / 2); } .carousel-item--width-100 { width: 100%; } .carousel-item--width-75 { width: 75%; } /** * REACT DATAGRID BASE STYLES * ===================================================================== * Provides minimal styling for the reactgrid control. As the control is * content agnostic it strives NOT to include any styles which affects * the content it houses. * * This said, as ReactGrid is coupled to OpenCSS, it can provide some * sensible defaults which can be overridden on a per application-basis. * * Such overrides should target separate classes applied to rows and * columns to maintain a clean separation of concerns. Custom classes * can be passed as props to for rows, columns and headers. */ @keyframes reactgrid-highlight { 5%, 95% { background-color: var(--app-highlight-bg); } } .reactgrid { font-feature-settings: 'tnum'; /* ==================================================================== =Header ================================================================= */ /* ==================================================================== =Row flash updates ================================================================= */ /* ==================================================================== =Rows ================================================================= */ /* ==================================================================== =Linked rows ================================================================= */ /* ==================================================================== =Keyboard navigation ================================================================= */ /** * 1. Prevent showing default browser/chromium outline for focused grid * when navigating with keyboard between selected rows */ /* ==================================================================== =Sticky row ================================================================= */ /* ==================================================================== =Cells (Columns) ================================================================= */ /* ==================================================================== =Dragging Item ================================================================= */ /* ==================================================================== =Resizing Item ================================================================= */ /* ==================================================================== =Column Splitter ================================================================= */ /** * 1. Prioritise splitter handle over other column content (e.g. sortable * header). */ /** * UI follows tabPanel splitter styles * * 1. Display splitter above rows. * 2. Don't block event input to splitterbars in header. */ /* ==================================================================== =Highlight Item ================================================================= */ /* ==================================================================== =Swipe Menu ================================================================= */ /* ==================================================================== =Divider ================================================================= */ /* ==================================================================== =Cell ================================================================= */ /* ==================================================================== =Content Behaviours ================================================================= */ /** * 1. "Pinch" the secondary content leading to visually * associate the content together in double-row mode * - Shaves ~6px off overall height of each row */ /** * 1. In some cases `instr-name` overlaps space in reactgrid-row. To prevent that, stretch `instr-name` to fit * the row height **/ /** * 1. Fill the cell vertically regardless of contents with 2px margins on top & bottom * 2. Center align vertically based on button height * 3. Safari and IE have issues with calculated line-height, 100% keeps it vertically centered for all */ /** * 1. Fix numerical value cut in action button in grid row in ie11 */ /** * 1. Fix vertical alignment in grid row **/ /* ==================================================================== =Cell border ================================================================= */ /* ==================================================================== =Tiny ================================================================= */ /* ==================================================================== =Small ================================================================= */ /* ==================================================================== =Medium ================================================================= */ /* ==================================================================== =Fixed Header ================================================================= */ /* ==================================================================== =Blocky Modifier ================================================================= */ /* ==================================================================== =Card Modifier ================================================================= */ /* ==================================================================== =Aurora Modifier ================================================================= */ } .reactgrid-header { font-size: 12px; line-height: 2rem; border-bottom: 1px solid var(--border-color-default); color: var(--text-color-secondary); /** * 1. Position underneath high sort icon */ } .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir='high'] .icon--high:before, .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir='high'] p:not(.beta) { color: var(--app-inverse-color) !important; } .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir='low'] .icon--low:before, .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir='low'] p:not(.beta) { color: var(--app-inverse-color) !important; } .reactgrid-header .icon--low { margin-left: -8px; } .reactgrid-header.reactgrid-header--nodivider .reactgrid-cell { border-width: 0; } .reactgrid-header.reactgrid-header--nointeraction .reactgrid-cell { border-width: 0; } .reactgrid-header .reactgrid-draggable-header .is-dragging { cursor: move; border-color: var(--app-hairline); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid-header .reactgrid-draggable-header .reactgrid-cell:hover { border-color: var(--app-hairline); } } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir]:hover { cursor: pointer; } .reactgrid-header:not(.reactgrid-header--nointeraction) [data-sortdir]:hover p:not(.beta) { color: var(--app-color); } } .reactgrid-sort { color: var(--text-color-secondary); } .reactgrid .animated-row-appear, .reactgrid .animated-row-enter, .reactgrid .animated-row-appear .reactgrid-cell--sticky, .reactgrid .animated-row-enter .reactgrid-cell--sticky { background-color: red; transition-property: background-color; transition-duration: 2000ms; transition-timing-function: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'; } .reactgrid .animated-row-appear-active, .reactgrid .animated-row-enter-active, .reactgrid .animated-row-appear-active .reactgrid-cell--sticky, .reactgrid .animated-row-enter-active .reactgrid-cell--sticky { background-color: red; } .reactgrid-row { background: transparent; border-bottom: 1px solid var(--border-color-default); transition-property: background-color; transition-duration: 200ms, 0; /** * 1. We remove the bottom border and apply our desired top border on the next sub row. * When a row is not followed by a sub row, we want to keep the bottom border. */ /** * Account for empty

tags which otherwise collapse * to height zero. * * 1. Ensures empty primary

pushes the secondary content in * double-row mode to be baseline aligned with the rest of * the row. * TODO: Will be fix once React Grid Component migration completes. * 2. If only `.beta` sized content exists in the cell, size * appropriately (otherwise row is too large and creates gaps). */ } .reactgrid-row-content--sticky { background-color: var(--background-gradient-default-1); border-right: 1px solid var(--border-color-highlight); z-index: 1; height: 100%; float: left; overflow: hidden; } .reactgrid-row--sub { border-top: 1px solid var(--border-color-dimmed); background-color: transparent; } .reactgrid-row--sub:not(:last-child) { border-bottom: 0; } .reactgrid-row--sub:last-child { border-bottom: 1px solid var(--app-hairline); } .reactgrid-row--sub + :not(.reactgrid-row--sub) { border-top: 1px solid var(--app-hairline); } .reactgrid-row--draggable.is-draggable { cursor: move; } .reactgrid-row--draggable.is-draggable.is-active { box-shadow: var(--shadow-default); } .reactgrid-row--highlighted { font-weight: bold; } .reactgrid-row--indented { color: var(--text-color-secondary); } @media (min-width: 500px) and (max-width: 768px), (min-width: 769px) and (max-width: 1439px), (min-width: 1440px) { .reactgrid-row--indented .reactgrid-cell--first-child { padding-left: 20px; } } .reactgrid-row:not(.reactgrid-row--sub) + .reactgrid-row--sub { border-top: 0; } .reactgrid-row.is-pannable { cursor: move; } .reactgrid-row.animated-row-appear, .reactgrid-row.animated-row-enter, .reactgrid-row.animated-row-appear .reactgrid-cell--sticky, .reactgrid-row.animated-row-enter .reactgrid-cell--sticky { background-color: red; transition-property: background-color; transition-duration: 2000ms; transition-timing-function: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'; } .reactgrid-row.animated-row-appear-active, .reactgrid-row.animated-row-enter-active, .reactgrid-row.animated-row-appear-active .reactgrid-cell--sticky, .reactgrid-row.animated-row-enter-active .reactgrid-cell--sticky { background-color: red; } .reactgrid-row.is-animate { z-index: 1; transition-property: background-color; transition-duration: 200ms; transition-timing-function: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'; } .reactgrid-row.is-expanded { border-bottom: 1px dashed var(--border-color-highlight); } .reactgrid-row.is-open:not(.reactgrid-row--sub) { border-bottom: 1px dashed var(--border-color-highlight); } .reactgrid-row.is-selected { /** * 1. Action buttons in a selected row are styled as :hover */ } .reactgrid-row.is-selected, .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--app-active-bg); } .reactgrid-row.is-selected .actionbtn:not([disabled]) { background-color: var(--actionbtn-hover-bg); color: var(--actionbtn-hover-color); transition-property: color, background-color; transition-duration: 200ms; } .reactgrid-row--clickable { cursor: pointer; } .reactgrid-row p:empty:first-child, .reactgrid-row p:first-child b:empty, .reactgrid-row .is-empty { height: 20px; display: block; } .reactgrid-row p.beta:empty:only-child { height: 12px; } .reactgrid-row p + .beta { min-height: 12px; } .reactgrid-row--link-first .reactgrid-cell--first-child:before, .reactgrid-row--link-second .reactgrid-cell--first-child:before { content: ''; display: block; position: absolute; width: 4px; height: 32px; border-color: var(--mkt-idx-eq-bg); border-style: solid; left: 0px; } .reactgrid-row--link-first { border-bottom: 0; } .reactgrid-row--link-first .reactgrid-cell--first-child:before { border-top-width: 1px; border-bottom-width: 0; top: 50%; border-right-width: 0; border-left-width: 1px; } .reactgrid-row--link-second .reactgrid-cell--first-child:before { border-top-width: 0; border-bottom-width: 1px; top: auto; bottom: 50%; border-right-width: 0; border-left-width: 1px; } .reactgrid-row--link-fx .reactgrid-cell--first-child:before { border-color: var(--mkt-fx-bg); } .reactgrid-row--link-fu .reactgrid-cell--first-child:before { border-color: var(--mkt-fu-bg); } .reactgrid-row--link-eq .reactgrid-cell--first-child:before { border-color: var(--mkt-eq-bg); } .reactgrid-row--link-cfd .reactgrid-cell--first-child:before { border-color: var(--mkt-cfd-bg); } .reactgrid-row--link-bo .reactgrid-cell--first-child:before { border-color: var(--mkt-bo-bg); } .reactgrid-row--link-co .reactgrid-cell--first-child:before { border-color: var(--mkt-idx-eq-bg); } .reactgrid-row--link-srd .reactgrid-cell--first-child:before { border-color: var(--product-color-srd); } .reactgrid-row--link-wa .reactgrid-cell--first-child:before { border-color: var(--product-color-warrant); } .reactgrid-row--link-tu .reactgrid-cell--first-child:before { border-color: var(--product-color-turbo); } .reactgrid-row--link-ce .reactgrid-cell--first-child:before { border-color: var(--product-color-certificate); } .reactgrid [tabindex]:focus { outline: 0; } .reactgrid-stickyrow { position: absolute; top: 0; left: 0; } .reactgrid-cell--fit { padding-left: 0 !important; padding-right: 0 !important; } .reactgrid .is-selectable { cursor: pointer; } .reactgrid .is-dragging { background-color: rgba(var(--background-gradient-highlight-1), 0.75); cursor: move; z-index: 1; border: 1px solid var(--app-sub-border); border-width: 0 1px; } .reactgrid .is-dragging [data-sortdir] { pointer-events: none; } .reactgrid .is-animatable { pointer-events: none; transition-property: transform; transition-duration: 100ms; transition-timing-function: ease-in; } .reactgrid .is-resizing { pointer-events: none; background-color: rgba(var(--background-gradient-highlight-1), 0.75); } .reactgrid-splitter-handle { cursor: col-resize; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 0; left: 4px; z-index: 1; width: 8px; height: 100%; } .reactgrid-splitter { position: absolute; width: 1px; background-color: var(--app-sup-border); z-index: 1; pointer-events: none; opacity: 0; transition: opacity; transition-duration: 200ms; transition-delay: 0; } .reactgrid-splitter.is-active { opacity: 0.5; transition-delay: 200ms; } .reactgrid .is-highlight { animation-name: reactgrid-highlight; animation-duration: 1000ms; } .reactgrid .swipemenu { background: var(--app-sub-bg); } .reactgrid-divider { font-weight: bold; color: var(--divider-color); border-bottom: 1px solid var(--border-color-default); /** * 1. Supress the .btn background color, by the react grid row color */ } .reactgrid-divider .btn { background-color: inherit; } .reactgrid-divider.is-selected, .reactgrid-divider.is-selected .reactgrid-cell--sticky, .reactgrid-divider.is-selected .reactgrid-row-content--sticky { background: var(--background-selected); } .reactgrid-divider--toggle { cursor: pointer; } .reactgrid-cell { padding: 0 4px; /** * 1. Provide wrapper divs sans classes (aka React mounting elements) * with a context for positioned children. Parent cells are already * absolutely positioned. * 2. Allow to spread to 100% height in case when vertical align of the title * is necessary */ /** * 1. For action icons, there should be only `4px` padding between * icon and the next icon. */ /** * 1. Using float instead of inline-block positioning helps tackling issues * with proper sizing of sticky grid cells under mobile Safari, see * http://cep/1341507 issue and its PR for more details */ } .reactgrid-cell--border-right { border-right: 1px solid var(--border-color-default); } .reactgrid-cell--border-left { border-left: 1px solid var(--border-color-default); } .reactgrid-cell > div:not([class]) { position: relative; height: 100%; } .reactgrid-cell--action { padding-right: 0; } .reactgrid-cell--vertical-center { display: flex; align-items: center; } .reactgrid-cell--sticky { background-color: var(--background-gradient-default-1); z-index: 1; float: left; } .reactgrid-cell--sticky-start { border-right: 1px solid var(--border-color-highlight); } .reactgrid-cell--sticky-end { border-left: 1px solid var(--border-color-highlight); } .reactgrid p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /** * TODO: Assert needed as not

s when * applied to a
* Account for empty

tags which otherwise collapse * to height zero. * * 1. Ensures empty primary

pushes the secondary content in * double-row mode to be baseline aligned with the rest of * the row. * TODO: Will be fix once React Grid Component migration completes. */ } .reactgrid p:empty:first-child { height: 20px; display: block; } .reactgrid .beta:not(:only-child) { position: relative; } .reactgrid sub { white-space: nowrap; } .reactgrid .instr-name { height: 100%; } .reactgrid .actionbtn { height: calc(100% - 4px); margin: 2px 0; line-height: 100%; } .reactgrid .actionbtn p { line-height: initial; } .ie11 .reactgrid .actionbtn--number p { overflow: visible; } .reactgrid .procomboinput--compact { margin-top: 2px; } .reactgrid-cell-border .reactgrid-header .reactgrid-cell { border-left: 1px solid transparent; border-right: 1px solid var(--app-hairline); } .reactgrid-cell-border .reactgrid-header .reactgrid-cell--border-start { border-right-color: transparent; border-left-color: var(--border-color-default); } .reactgrid-cell-border .reactgrid-header .reactgrid-cell--border-end { border-right-color: var(--border-color-default); border-left-color: transparent; } .reactgrid-cell-border .reactgrid-header .reactgrid-cell--border-start-end { border-color: transparent var(--border-color-default); } .reactgrid-cell-border .reactgrid-header .reactgrid-cell--border-transparent { border-color: transparent; } .reactgrid--tiny { /** * 1. Fix vertical alignment in grid row **/ } .reactgrid--tiny .reactgrid-header { font-size: 11px; line-height: 2rem; } .reactgrid--tiny .reactgrid-divider { font-size: 11px; line-height: 2rem; } .reactgrid--tiny .procomboinput--compact { height: 16px; } .reactgrid--tiny .procomboinput--compact .procomboinput-value, .reactgrid--tiny .procomboinput--compact .procomboinput-icon { line-height: initial; } .reactgrid--tiny .procomboinput--compact .procomboinput-icon:before { height: 16px; } .reactgrid--small .reactgrid-header { font-size: 12px; line-height: 2rem; } .reactgrid--small .reactgrid-divider { font-size: 12px; line-height: 2rem; } .reactgrid--medium { /** * 1. Fix vertical alignment in grid row **/ } .reactgrid--medium .reactgrid-header { font-size: 14px; line-height: 2rem; } .reactgrid--medium .reactgrid-divider { font-size: 14px; line-height: 2rem; } .reactgrid--medium .procomboinput { margin-top: 4px; } .reactgrid-fixedheader { top: 0; position: fixed; border-bottom: 1px solid var(--border-color-default); background-image: linear-gradient( var(--background-gradient-highlight-1), var(--background-gradient-highlight-2), var(--background-gradient-highlight-2), var(--background-gradient-highlight-1) ); background-color: var(--background-gradient-highlight-1); } .reactgrid--blocky .reactgrid-header { border-bottom: none; } .reactgrid--blocky .reactgrid-row { background-color: var(--border-color-default); border-radius: var(--border-radius-action); border-bottom: none; } .reactgrid--blocky .reactgrid-row.is-selected, .reactgrid--blocky .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid--blocky .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--border-color-highlight); } .reactgrid--card .reactgrid-header { background-color: var(--background-selected); border-bottom: 1px solid var(--border-color-highlight); } .reactgrid--card .reactgrid-row { background-color: transparent; border-bottom: 1px solid var(--border-color-highlight); } .reactgrid--card .reactgrid-row.is-selected, .reactgrid--card .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid--card .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--background-selected); } .reactgrid--horizontal-scroll .reactgrid-headers { overflow: hidden; } .reactgrid--horizontal-scroll .reactgrid-headers--inset { margin-right: calc(var(--app-scroll-width)); } .reactgrid--aurora { /** * 1. These numbers are to adjust action buttons with button height. This will be removed once we migrate action button to button */ } .reactgrid--aurora .reactgrid-fixedheader { top: 0; position: fixed; background-color: var(--aurora-background-level-1); border-bottom: 1px solid var(--aurora-border-level-1); } .reactgrid--aurora .reactgrid-header { font-size: inherit; background-color: transparent; border-bottom: 1px solid var(--aurora-border-level-2); color: var(--aurora-text-color-secondary); text-transform: capitalize; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora .reactgrid-header:not(.reactgrid-header--nointeraction) .reactgrid-cell--sortable-header:hover { background-color: var(--aurora-background-level-2); } } .reactgrid--aurora .reactgrid-header.reactgrid-header--notexttransform { text-transform: none; } .reactgrid--aurora .reactgrid-row { background-color: transparent; color: var(--aurora-text-color-primary); border-bottom: 1px solid var(--aurora-border-level-2); } .reactgrid--aurora .reactgrid-row--indented { color: var(--aurora-text-color-secondary); } .reactgrid--aurora .reactgrid-row.animated-row-appear, .reactgrid--aurora .reactgrid-row.animated-row-enter, .reactgrid--aurora .reactgrid-row.animated-row-appear .reactgrid-cell--sticky, .reactgrid--aurora .reactgrid-row.animated-row-enter .reactgrid-cell--sticky { background-color: red; transition-property: background-color; transition-duration: 2000ms; transition-timing-function: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'; } .reactgrid--aurora .reactgrid-row.animated-row-appear-active, .reactgrid--aurora .reactgrid-row.animated-row-enter-active, .reactgrid--aurora .reactgrid-row.animated-row-appear-active .reactgrid-cell--sticky, .reactgrid--aurora .reactgrid-row.animated-row-enter-active .reactgrid-cell--sticky { background-color: red; } .reactgrid--aurora .reactgrid-row.is-selected, .reactgrid--aurora .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid--aurora .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-2); border-color: var(--aurora-border-level-3); } .reactgrid--aurora .reactgrid-row.is-selected .actionbtn:not([disabled]) { background-color: var(--aurora-action-background-primary); color: var(--aurora-action-text-color-primary); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora .reactgrid-row.is-selected .actionbtn:not([disabled]):not(.actionbtn--invalid):hover { background-color: var(--aurora-action-background-primary-hover); color: var(--aurora-action-text-color-primary); } } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora .reactgrid-row.is-selected:hover, .reactgrid--aurora .reactgrid-row.is-selected:hover .reactgrid-cell--sticky, .reactgrid--aurora .reactgrid-row.is-selected:hover .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-3); } } .reactgrid--aurora .reactgrid-row.is-expanded { background-color: var(--aurora-background-level-2); } .reactgrid--aurora .reactgrid-row--sub { border-top: 1px solid var(--aurora-border-level-1); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora .reactgrid-row--clickable:hover, .reactgrid--aurora .reactgrid-row--clickable:hover .reactgrid-cell--sticky, .reactgrid--aurora .reactgrid-row--clickable:hover .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-2); } } .reactgrid--aurora .reactgrid-cell--sticky-start, .reactgrid--aurora .reactgrid-cell--sticky-end { border-color: var(--aurora-border-level-3); } .reactgrid--aurora .reactgrid-divider { font-size: inherit; } .reactgrid--aurora.reactgrid--tiny .reactgrid-header, .reactgrid--aurora.reactgrid--tiny .reactgrid-divider { font-size: 11px; } .reactgrid--aurora.reactgrid--tiny .actionbtn { font-size: 11px; } .reactgrid--aurora.reactgrid--small .reactgrid-header, .reactgrid--aurora.reactgrid--small .reactgrid-divider { font-size: 12px; } .reactgrid--aurora.reactgrid--small .actionbtn { font-size: 14px; height: calc(100% - 6px); margin: 3px 0; } .reactgrid--aurora.reactgrid--medium { /** * 1. Fix vertical alignment in grid row **/ } .reactgrid--aurora.reactgrid--medium .reactgrid-header, .reactgrid--aurora.reactgrid--medium .reactgrid-divider { font-size: 12px; } .reactgrid--aurora.reactgrid--medium .actionbtn { font-size: 14px; height: calc(100% - 8px); margin: 4px 0; } .reactgrid--aurora.reactgrid--medium .procomboinput { margin-top: 4px; } .reactgrid--aurora.reactgrid--card .reactgrid-header { border-radius: var(--aurora-border-radius-action); border-bottom: none; } .reactgrid--aurora.reactgrid--card .reactgrid-header, .reactgrid--aurora.reactgrid--card .reactgrid-header .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--card .reactgrid-header .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-2); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora.reactgrid--card .reactgrid-header:not(.reactgrid-header--nointeraction) .reactgrid-cell--sortable-header:hover { background-color: var(--aurora-background-level-3); } } .reactgrid--aurora.reactgrid--card .reactgrid-row { border-bottom: 1px solid var(--aurora-border-level-2); } .reactgrid--aurora.reactgrid--card .reactgrid-row, .reactgrid--aurora.reactgrid--card .reactgrid-row .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--card .reactgrid-row .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-1); } .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected, .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-2); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected:hover, .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected:hover .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--card .reactgrid-row.is-selected:hover .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-3); } } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .reactgrid--aurora.reactgrid--card .reactgrid-row--clickable:hover, .reactgrid--aurora.reactgrid--card .reactgrid-row--clickable:hover .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--card .reactgrid-row--clickable:hover .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-2); } } .reactgrid--aurora.reactgrid--blocky .reactgrid-header { border-bottom: none; } .reactgrid--aurora.reactgrid--blocky .reactgrid-row { border-bottom: none; background-color: var(--aurora-background-level-2); border-radius: var(--aurora-border-radius-action); } .reactgrid--aurora.reactgrid--blocky .reactgrid-row.is-selected, .reactgrid--aurora.reactgrid--blocky .reactgrid-row.is-selected .reactgrid-cell--sticky, .reactgrid--aurora.reactgrid--blocky .reactgrid-row.is-selected .reactgrid-row-content--sticky { background-color: var(--aurora-background-level-3); } .reactgrid .reactgrid-row.reactgrid-row--noborder { border: none; } .reactgrid .reactgrid-divider.reactgrid-divider--noborder { border: none; color: inherit; } .reactgrid .reactgrid-divider .reactgrid-cell.sticky-divider { position: sticky; left: 0; } /** * Scroller * ===================================================================== */ /** * 1. Make row full width, ignore width from grid.less * 2. Crop content when no scrolling * 3. Put scroll into separated hardware accelerated layer * 4. Disable pointer events only on parent containers inside scroller content */ .scroller { width: 100% !important; } .scroller.g--fit { overflow: hidden; } .scroller__content { will-change: transform; } .scroller__content--is-scrolling > * { pointer-events: none; } /* ==================================================================== // Sheet // // Mixin block for laying out dialogs with a fixed header and _optional_ // footer. e.g. Disclaimers, Adding Filters (alerts, related // orders etc...). Also used as the structure for full features. // // It provides a standardised header and body with optional footer, as // well as a progressively disclosed message (e.g. to show errors). // // Below is a standard example featuring the header Block, Grid // ScrollViews, and call-to-action buttons laid out inside a Grid Series // strut. // // --- // // NOTE: The "hidey bar" sheet-msg is to be deprecated. Check this IxD // pattern with design if you need to progressively disclose content. // // Add the CSS constant `is-shown` to the `.sheet-msg` element to // reveal it (here for completeness). // // Markup: //

//
//
Header
//
//
//
//
// MESSAGE //
//

SCROLLVIEW CONTENT

//
//
//
//
// //
//
// //
//
//
// // .sheet--dialog - If no 'feature' hook to add a min-width, this modifier // sets it to the minimum phone width (for use with popups) // // Styleguide 10.3 ===================================================================== */ /** * 1. Provide a positioning context for descendants (eg, card dialogs) * 2. Allow elements to animate in (eg, card dialogs) */ .sheet { position: relative; overflow: hidden; background-image: linear-gradient( var(--background-gradient-default-1), var(--background-gradient-default-2), var(--background-gradient-default-2), var(--background-gradient-default-1) ); background-color: var(--background-gradient-default-1); /** * 1. For compatibilty with Stack */ /** * 1. Lift the header over the message block and/or positioned * panes (e.g. .ticket) */ /** * 1. Allow component overlay to appear over scrollview */ /** * 1. Position at top of container * 2. Collapse height. NB: This kills the close animation... * 3. Clip nested status message when translated out of view */ /** * 1. Restore styling for nested sheets */ } .sheet:not(.sheet--auto-height) { height: 100%; } .sheet-header { z-index: 3; padding: 8px 8px; border-bottom: 1px solid var(--app-hairline); } .sheet-header--no-border { border: none; } .sheet-body { position: relative; /** * 1. If scrollview, assume content itself contains padding */ } .sheet-body:not(.grid--scroll) { padding: 8px 8px; /** * 1. Override List item spacings to counter general padding * e.g. Notifications */ } .sheet-body:not(.grid--scroll) > .list:only-child { padding-top: 0; } .sheet-body:not(.grid--scroll) > .list-item { padding-left: 0; padding-right: 0; } .sheet-body:not(.grid--scroll) > .list-item:only-child { padding-top: 0; } .sheet-body:not(.grid--scroll).sheet-body--flush-top { padding-top: 0; } .sheet-body:not(.grid--scroll).sheet-body--fixed { padding: 0; } .sheet-body--bg-canvas { background: var(--background-app); } .sheet .grid--scroll > .grid, .sheet .grid--scroll > .grid-cell:not(.scroller__content) { position: static; } .sheet-msg { position: absolute; top: 0; left: 0; right: 0; height: 0; overflow: hidden; } .sheet-summary { margin-bottom: 8px; /** * 1. Optical adjustment */ } .sheet-summary .instr { padding: 8px; } .sheet-summary .instr-name { line-height: 1; margin-bottom: 3px; } .sheet-summary .kv-key, .sheet-summary .kv-val { padding: 0 8px; font-size: 12px; line-height: 2rem; } .sheet-summary .ticket-price-bar-item { padding-left: 8px; padding-right: 8px; } .sheet-actions { padding: 8px 8px; border-top: 1px solid var(--app-hairline); } .sheet-actions a { color: var(--app-link-color); text-decoration: none; cursor: pointer; } .body--aurora .sheet-actions a { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .body--aurora .sheet-actions a:focus, .body--aurora .sheet-actions a:active, .body--aurora .sheet-actions a:hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } .sheet-actions--flush-top { padding-top: 0; } .sheet-actions-item:not(:first-child) { margin-top: 8px; } .sheet-actions--no-border { border: none; } .sheet--ticket { background-color: var(--app-content-bg); } .sheet--ticket .sheet-header { border-bottom-width: 0; } .sheet--ticket .sheet-body { padding: 0 16px 16px; } .sheet--ticket .header-close { right: 8px; } .sheet--ticket .header-back { left: 0; } .sheet--ticket .dropdown-sheet .sheet-header { border-bottom-width: 1px; } .sheet--ticket .dropdown-sheet .list-item { padding-left: 16px; padding-right: 16px; } .sheet--bg-canvas { background: var(--background-app); } .sheet--aurora { background: var(--aurora-background-level-1); } .sheet--aurora, .sheet--aurora .sheet-header, .sheet--aurora .sheet__action { border-color: var(--aurora-border-level-2); } .sheet--aurora .sheet-body--bg-canvas { background: var(--aurora-canvas-color); } .sheet--aurora .header-title { color: var(--aurora-text-color-secondary); } .sheet--aurora.sheet--bg-canvas { background: var(--aurora-canvas-color); } /* * SHEET BASE BLOCK (EXTENSIONS) * ===================================================================== */ .sheet { min-width: var(--app-phone-x); /* ==================================================================== =Dialog ================================================================= */ /* ==================================================================== =Ticket ================================================================= */ /** * 1. Magic number for our min width ticket, somehow not allowing tickets to show properly on phones <400px */ /* ==================================================================== =Dropdown ================================================================= */ /** * 1. The magic number that makes it work */ /** * 1. This serves specific purpose to over-write the main styles * and is required for making pop-ups within pop-ups work correctly. * Treat this whole file as tech debt as this should be, * in fact, the main behaviour of a sheet component. */ } .sheet--dialog { max-width: var(--app-phone-x) !important; } .sheet--ticket { min-width: 400px; } .sheet--dropdown { min-width: 200px; } .sheet--full-width { min-width: auto; } /* * INSTRUMENT UI BLOCK * ===================================================================== * * Rules for common instrument information block. Comprises instrument * icon, Instrument symbol, and full instrument name. * * ------------------------------------------------------------------- * DEVELOPER NOTES * * - Legacy IE requires some extra massaging to enable smart * truncation. * - The use of the Strut `grid--fit-fill` is required to enable smart * truncation. `grid--fit-all` works to some extent, especially when * instrument details are shown more inline (e.g. KV lists), but are * available only in variants. * * ------------------------------------------------------------------- * EXAMPLE: * *
*
*
*
*
*
EURUSDSub-column info
*
Euro/US Dollar
*
*
*/ .instr { /** * 1. Ensure grid-cell shrink-wrapping market icon doesn't expand * larger than line-height (magically gains 3px in chrome) */ /* ==================================================================== =Market Icon ================================================================= */ /* ==================================================================== =Primary Information (Symbol/Name) ================================================================= */ /** * 1. Ensure .instr-name of all search results have the same color. * Required when nested inside list-items in some contexts. */ /* ==================================================================== =Secondary Information (Name/Description) ================================================================= */ /** * Slighty complex layout related to truncating logic for instrument * search UI. * * 1. Optical placement * - Override grid system (known issue in grid system - tech debt) * 2. Flags don't change size between devices */ /* ==================================================================== =Sub-Column ================================================================= */ /* ==================================================================== =Dynamic Icons ================================================================= */ /** * 1. Provide positional context - eg, for loaders * 2. Shrink icons to their natural height - alignment is done with grids */ /* ==================================================================== =Inline Modifier ================================================================= */ /* ==================================================================== =Compact Modifier ================================================================= */ /* ==================================================================== =Wrap Modifier ================================================================= */ /** * 1. Optical placement to align top of icon with ascenders * 2. Reduce leading to compact lines * 3. Negate base truncate rule */ } .instr:not(.instr--xtd) .grid-cell:first-child { line-height: 0; } .instr-market { position: relative; margin-right: 4px; } .instr-name, .instr-desc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .instr-name { position: relative; color: var(--app-color); } .instr-desc { color: var(--app-meta-color); font-size: 12px; line-height: 2rem; } .instr:not(.instr--inline):not(.instr--ext):not(.instr--wrap) .instr-desc { margin-top: -2px; } .instr--ext .instr-desc { margin-top: -7px; } .instr-type, .instr-xchg { color: var(--app-meta-color); } .instr-type { text-align: right; text-align: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .instr-xchg { margin-top: -2px !important; font-size: 12px; line-height: 2rem; padding-right: calc(16px + var(--app-icon-runin-gutter)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; text-align: end; } .instr-xchg .flag { position: absolute; top: 2px; right: 0; margin-right: 0; } .instr-name sub { color: var(--gray-semi-light); margin-left: 4px; } .instr-desc sub { margin-left: 4px; } .instr-price sub { margin-left: 0; } .instr-icons .btn { position: relative; } .instr--inline .instr-name, .instr--inline .instr-desc { display: inline; } .instr--inline .instr-market, .instr--inline .instr-name, .instr--inline .instr-desc { vertical-align: middle; } .instr--inline > .grid-cell:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .instr--compact .instr-name, .instr--compact .instr-desc { font-size: 11px; line-height: 2rem; } .instr--wrap .instr-name { margin-top: -1px; } .instr--wrap .instr-name, .instr--wrap .instr-desc { word-wrap: break-word; line-height: 1.1; white-space: normal; } /* * INSTRUMENT UI BLOCK (DESKTOP EXTENSIONS) * ===================================================================== * * Rules for common instrument information block. Comprises instrument * con, Instrument symbol, and full instrument name. */ /** * 1. "Pinch" the secondary content leading to visually associate * the content. Shaves 6px off overall height of each row. */ .instr { /* ==================================================================== =Compact Modifier ================================================================= */ /* ==================================================================== =Wrap Modifier ================================================================= */ /** * 1. Undo base optical placement */ } .ms .instr:not(.instr--inline) .instr-desc { margin-top: -2px; padding-bottom: 2px; } .instr--compact .instr-name, .instr--compact .instr-desc { font-size: 12px; line-height: 2rem; } .instr--wrap .instr-name { margin-top: 0; } /** * 1. Optical adjustment * - Custom adjustment for PRO to keep it a bit lower (to be intact with description) */ .instr-xchg { margin-top: -4px !important; } .instr-desc, .instr-xchg { font-size: 11px; line-height: 2rem; } /* * ALLOCATION CHART COMPONENT * ===================================================================== * * 1. dynamically generate allocation chart color classes * 2. Add 16px of gap between items, while negating outer margins */ .allocation-chart { display: flex; flex-wrap: wrap; justify-content: center; margin: -8px; /** * 3. Make sure items do not overlap for long labels in IE11 * Block level child is supposed to occupy the full width of the parent. * Chrome understands this. IE11 wants an explicit value. * @see bug #931190 * @see https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11 * * 4. 380px card width to turn into vertical view: * 2px borders + 32px card padding + 120px chart + 16px space between chart and data + 211px data = 381px width card won't wrap, 380px card wraps. */ /** * The highchart tooltip is an SVG rendered by highchart, relative CSS styles would be: * 5. box-shadow * 6. background-color * 7. border-color * 8. border-width */ } .allocation-chart .allocation-chart--data-color-1, .allocation-chart__highchart .allocation-chart--data-color-1 { fill: #888; stroke: #888; } .allocation-chart .allocation-chart--data-color-1::before, .allocation-chart__highchart .allocation-chart--data-color-1::before { background-color: #888; } .allocation-chart .allocation-chart--data-color-2, .allocation-chart__highchart .allocation-chart--data-color-2 { fill: #39d; stroke: #39d; } .allocation-chart .allocation-chart--data-color-2::before, .allocation-chart__highchart .allocation-chart--data-color-2::before { background-color: #39d; } .allocation-chart .allocation-chart--data-color-3, .allocation-chart__highchart .allocation-chart--data-color-3 { fill: #049; stroke: #049; } .allocation-chart .allocation-chart--data-color-3::before, .allocation-chart__highchart .allocation-chart--data-color-3::before { background-color: #049; } .allocation-chart .allocation-chart--data-color-4, .allocation-chart__highchart .allocation-chart--data-color-4 { fill: #5cf; stroke: #5cf; } .allocation-chart .allocation-chart--data-color-4::before, .allocation-chart__highchart .allocation-chart--data-color-4::before { background-color: #5cf; } .allocation-chart .allocation-chart--data-color-5, .allocation-chart__highchart .allocation-chart--data-color-5 { fill: #07b; stroke: #07b; } .allocation-chart .allocation-chart--data-color-5::before, .allocation-chart__highchart .allocation-chart--data-color-5::before { background-color: #07b; } .allocation-chart .allocation-chart--data-color-6, .allocation-chart__highchart .allocation-chart--data-color-6 { fill: #aaa; stroke: #aaa; } .allocation-chart .allocation-chart--data-color-6::before, .allocation-chart__highchart .allocation-chart--data-color-6::before { background-color: #aaa; } .allocation-chart .allocation-chart--product-color-1, .allocation-chart__highchart .allocation-chart--product-color-1 { fill: #888; stroke: #888; } .allocation-chart .allocation-chart--product-color-1::before, .allocation-chart__highchart .allocation-chart--product-color-1::before { background-color: #888; } .allocation-chart .allocation-chart--product-color-2, .allocation-chart__highchart .allocation-chart--product-color-2 { fill: var(--product-color-fx); stroke: var(--product-color-fx); } .allocation-chart .allocation-chart--product-color-2::before, .allocation-chart__highchart .allocation-chart--product-color-2::before { background-color: var(--product-color-fx); } .allocation-chart .allocation-chart--product-color-3, .allocation-chart__highchart .allocation-chart--product-color-3 { fill: var(--product-color-fx-forward); stroke: var(--product-color-fx-forward); } .allocation-chart .allocation-chart--product-color-3::before, .allocation-chart__highchart .allocation-chart--product-color-3::before { background-color: var(--product-color-fx-forward); } .allocation-chart .allocation-chart--product-color-4, .allocation-chart__highchart .allocation-chart--product-color-4 { fill: var(--product-color-fx-metal); stroke: var(--product-color-fx-metal); } .allocation-chart .allocation-chart--product-color-4::before, .allocation-chart__highchart .allocation-chart--product-color-4::before { background-color: var(--product-color-fx-metal); } .allocation-chart .allocation-chart--product-color-5, .allocation-chart__highchart .allocation-chart--product-color-5 { fill: var(--product-color-option); stroke: var(--product-color-option); } .allocation-chart .allocation-chart--product-color-5::before, .allocation-chart__highchart .allocation-chart--product-color-5::before { background-color: var(--product-color-option); } .allocation-chart .allocation-chart--product-color-6, .allocation-chart__highchart .allocation-chart--product-color-6 { fill: var(--product-color-future); stroke: var(--product-color-future); } .allocation-chart .allocation-chart--product-color-6::before, .allocation-chart__highchart .allocation-chart--product-color-6::before { background-color: var(--product-color-future); } .allocation-chart .allocation-chart--product-color-7, .allocation-chart__highchart .allocation-chart--product-color-7 { fill: var(--product-color-strategy); stroke: var(--product-color-strategy); } .allocation-chart .allocation-chart--product-color-7::before, .allocation-chart__highchart .allocation-chart--product-color-7::before { background-color: var(--product-color-strategy); } .allocation-chart .allocation-chart--product-color-8, .allocation-chart__highchart .allocation-chart--product-color-8 { fill: var(--product-color-index); stroke: var(--product-color-index); } .allocation-chart .allocation-chart--product-color-8::before, .allocation-chart__highchart .allocation-chart--product-color-8::before { background-color: var(--product-color-index); } .allocation-chart .allocation-chart--product-color-9, .allocation-chart__highchart .allocation-chart--product-color-9 { fill: var(--product-color-stock); stroke: var(--product-color-stock); } .allocation-chart .allocation-chart--product-color-9::before, .allocation-chart__highchart .allocation-chart--product-color-9::before { background-color: var(--product-color-stock); } .allocation-chart .allocation-chart--product-color-10, .allocation-chart__highchart .allocation-chart--product-color-10 { fill: var(--product-color-etf); stroke: var(--product-color-etf); } .allocation-chart .allocation-chart--product-color-10::before, .allocation-chart__highchart .allocation-chart--product-color-10::before { background-color: var(--product-color-etf); } .allocation-chart .allocation-chart--product-color-11, .allocation-chart__highchart .allocation-chart--product-color-11 { fill: var(--product-color-mf); stroke: var(--product-color-mf); } .allocation-chart .allocation-chart--product-color-11::before, .allocation-chart__highchart .allocation-chart--product-color-11::before { background-color: var(--product-color-mf); } .allocation-chart .allocation-chart--product-color-12, .allocation-chart__highchart .allocation-chart--product-color-12 { fill: var(--product-color-warrant); stroke: var(--product-color-warrant); } .allocation-chart .allocation-chart--product-color-12::before, .allocation-chart__highchart .allocation-chart--product-color-12::before { background-color: var(--product-color-warrant); } .allocation-chart .allocation-chart--product-color-13, .allocation-chart__highchart .allocation-chart--product-color-13 { fill: var(--product-color-stock-index); stroke: var(--product-color-stock-index); } .allocation-chart .allocation-chart--product-color-13::before, .allocation-chart__highchart .allocation-chart--product-color-13::before { background-color: var(--product-color-stock-index); } .allocation-chart .allocation-chart--product-color-14, .allocation-chart__highchart .allocation-chart--product-color-14 { fill: var(--product-color-cfd); stroke: var(--product-color-cfd); } .allocation-chart .allocation-chart--product-color-14::before, .allocation-chart__highchart .allocation-chart--product-color-14::before { background-color: var(--product-color-cfd); } .allocation-chart .allocation-chart--product-color-15, .allocation-chart__highchart .allocation-chart--product-color-15 { fill: var(--product-color-bond); stroke: var(--product-color-bond); } .allocation-chart .allocation-chart--product-color-15::before, .allocation-chart__highchart .allocation-chart--product-color-15::before { background-color: var(--product-color-bond); } .allocation-chart .allocation-chart--product-color-16, .allocation-chart__highchart .allocation-chart--product-color-16 { fill: var(--product-color-contract-option); stroke: var(--product-color-contract-option); } .allocation-chart .allocation-chart--product-color-16::before, .allocation-chart__highchart .allocation-chart--product-color-16::before { background-color: var(--product-color-contract-option); } .allocation-chart .allocation-chart--product-color-17, .allocation-chart__highchart .allocation-chart--product-color-17 { fill: var(--product-color-cash); stroke: var(--product-color-cash); } .allocation-chart .allocation-chart--product-color-17::before, .allocation-chart__highchart .allocation-chart--product-color-17::before { background-color: var(--product-color-cash); } .allocation-chart .allocation-chart--product-color-18, .allocation-chart__highchart .allocation-chart--product-color-18 { fill: var(--product-color-srd); stroke: var(--product-color-srd); } .allocation-chart .allocation-chart--product-color-18::before, .allocation-chart__highchart .allocation-chart--product-color-18::before { background-color: var(--product-color-srd); } .allocation-chart .allocation-chart--product-color-19, .allocation-chart__highchart .allocation-chart--product-color-19 { fill: var(--product-color-turbo); stroke: var(--product-color-turbo); } .allocation-chart .allocation-chart--product-color-19::before, .allocation-chart__highchart .allocation-chart--product-color-19::before { background-color: var(--product-color-turbo); } .allocation-chart__item { display: flex; } .allocation-chart__item::before { content: ''; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex: 0 0 auto; position: relative; top: 1px; } .allocation-chart__donutchart { margin: 8px; } .allocation-chart__details { margin: 8px; width: 100%; flex: 1 1 211px; } .allocation-chart__highchart.highcharts-tooltip { filter: drop-shadow(var(--aurora-card-shadow)); } .allocation-chart__highchart.highcharts-tooltip .allocation-chart__item { display: block; text-align: center; } .allocation-chart__highchart.highcharts-tooltip .allocation-chart__item::before { display: inline-block; } .allocation-chart__highchart-box { fill: var(--aurora-background-level-1); stroke: var(--aurora-border-level-1); stroke-width: 1px; } /* ==================================================================== // Action Buttons // // Button which expands to horizontally to fill its container, and which // can contain various sub-elements nested inside (as opposed to // ordinary Buttons). // // Ordinarily embedded within Datagrid rows with an Indicator Block to // display price movements. // // --- // // NOTE: The base .actionbtn adds only internal spacing. // These are overwritten when the Block is placed inside of a // `.datagrid` (context overriding). // // // // // // Markup: // // // // // Styleguide 9.2 ===================================================================== */ /** * 1. Negate formatting context (http://stackoverflow.com/a/23529464) which * inserts extra space beneath the Action Button within a datagrid. */ .actionbtn { position: relative; min-width: 100%; padding: 0 4px; color: var(--actionbtn-color); background-color: var(--actionbtn-bg); border-radius: var(--actionbtn-border-radius); text-align: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; /** * 1. Afford a reasonably sized hit target. */ /** * 2. Stops Icon elements within adding ellipsis when SVGs work with Aurora styling */ } .actionbtn--text { font-size: 12px; line-height: 2rem; text-align: center; text-transform: uppercase; font-weight: bold; } .actionbtn--aligned { display: flex; justify-content: center; align-items: center; min-width: 100%; } .actionbtn--number { text-align: right; text-align: end; } .actionbtn--inline { min-width: 30px; } .actionbtn--icon { text-overflow: initial; } .actionbtn[disabled] { background-color: transparent; } .actionbtn--invalid { border: 1px solid var(--app-warning-bg); } .actionbtn-error { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @keyframes flash-update-neg { 0%, 100% { background: var(--color-negative); color: var(--white); } } @keyframes flash-update-pos { 0%, 100% { background: var(--color-positive); color: var(--white); } } @keyframes flash-update-neg-aurora { 0%, 100% { background: var(--aurora-color-brand-negative); color: var(--white); } } @keyframes flash-update-pos-aurora { 0%, 100% { background: var(--aurora-color-brand-positive); color: var(--white); } } .actionbtn--flash-update-pos { animation: flash-update-pos 1200ms; } .inverse-pnl-color .actionbtn--flash-update-pos { animation: flash-update-neg 1200ms; } .actionbtn--flash-update-neg { animation: flash-update-neg 1200ms; } .inverse-pnl-color .actionbtn--flash-update-neg { animation: flash-update-pos 1200ms; } .actionbtn--aurora { background-color: var(--aurora-action-background-default); color: var(--aurora-action-text-color-default); border-radius: var(--aurora-border-radius-action); text-transform: none; } .actionbtn--aurora.actionbtn--text { font-weight: normal; } .actionbtn--aurora[disabled] { background-color: var(--aurora-action-background-disabled); color: var(--aurora-action-text-color-disabled); } .actionbtn--aurora.actionbtn--flash-update-pos { animation: flash-update-pos-aurora 1200ms; } .inverse-pnl-color .actionbtn--aurora.actionbtn--flash-update-pos { animation: flash-update-neg-aurora 1200ms; } .actionbtn--aurora.actionbtn--flash-update-neg { animation: flash-update-neg-aurora 1200ms; } .inverse-pnl-color .actionbtn--aurora.actionbtn--flash-update-neg { animation: flash-update-pos-aurora 1200ms; } /** * ACTION BUTTON BLOCK (EXTENSIONS) * ===================================================================== */ .actionbtn:not([disabled]):focus { background-color: var(--actionbtn-hover-bg); } .actionbtn:not([disabled]):active { background-color: var(--actionbtn-active-bg); } .actionbtn:not([disabled]):hover { background-color: var(--actionbtn-hover-bg); } /** * ACTION BUTTON BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ .actionbtn { transition-property: color, background; transition-duration: 200ms; /** * Too expensive for IE... */ /** * 1. Lends impression of responsiveness */ } .ms .actionbtn { transition: none; } .actionbtn:focus, .actionbtn:active, .actionbtn:hover { transition-duration: 0; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .actionbtn:not([disabled]):not(.actionbtn--invalid):hover { background-color: var(--actionbtn-hover-bg); color: var(--actionbtn-hover-color); } .actionbtn--aurora:not([disabled]):not(.actionbtn--invalid):hover { background-color: var(--aurora-action-background-default-hover); color: var(--aurora-action-text-color-default); } } /** * ACTION BUTTON BLOCK (PRO EXTENSIONS) * ===================================================================== */ .actionbtn--text { font-size: 11px; line-height: 2rem; } /** * INDICATOR * ===================================================================== */ @keyframes indicator-pos { 0%, 100% { opacity: 1; } } @keyframes indicator-neg { 0%, 100% { opacity: 1; } } /** * 1. The easiest way of 'restarting' the animation when the direction changes, * is to use two differently labeled, but otherwise identical keyframes. */ .indicator { opacity: 0; font-size: 11px; line-height: 2rem; } .indicator--pos { animation: indicator-pos 1200ms; } .indicator--neg { animation: indicator-neg 1200ms; } /* ==================================================================== // Account Selector // // Generic Component, used whenever an account needs to be selected. // Based off the `.list` mixin Block and `.dropdown` Control, it supports // grouped accounts, as well as highlighted and disabled select elements // (plus menu items) via the List and Dropdown APIs respectively. // // An account can have an optional currency associated with it, as well // as a trading floor icon indicating a TF linked account. Inspect the // source for the HTML interface. // // --- // // NOTE: When a user only has one account, the convention is to disable the // control so they cannot trigger a dropdown/panel with only one option, // // // // //
//
//
// //
//
//
//
//
//
//
Select Account
// //
//
//
    //
  • // EUR // All Accounts //
    • //
  • // USD // INET_1234567890 //
    • //
  • // Sub_4753845482 //
    • //
  • // USD // Sub_2496963357 //
    • //
  • // // EUR // INET_0987654321 //
    • //
//
//
//
// // Styleguide 12.1 ===================================================================== */ .acctselector { max-width: 180px; /* ==================================================================== // Item ==================================================================== */ /* ==================================================================== // Currency ==================================================================== */ /* ==================================================================== // Single Account ==================================================================== */ /** * 1. Do not show toggle icon when < 2 accounts. * 2. Remove space for toggle icon. * 3. Replace padding due to missing toggle icon. */ /* ==================================================================== // Highlight ==================================================================== */ /* ==================================================================== // Full width ==================================================================== */ } .acctselector-item.list-sub-item { padding-right: 8px; } .acctselector-item.acctselector-item--title { font-weight: bold; } .acctselector-item.acctselector-item--sub-item { padding-left: 16px; } .acctselector-currency { float: right; margin-left: 8px; color: var(--combo-input-color); } .acctselector .dropdown.is-disabled:before { display: none; } .acctselector .dropdown.is-disabled .dropdown-input { opacity: 1; padding-right: 0; } .acctselector .dropdown.is-disabled .dropdown-input .acctselector-item { padding-right: 8px; } .acctselector.is-highlight .dropdown-input { animation-name: highlight; animation-duration: 1000ms; } .acctselector--fullwidth { width: 100%; max-width: 100%; } /* * ACCOUNT SELECTOR BLOCK (DESKTOP EXTENSIONS) * ===================================================================== * * 1. Firefox do not inherit the truncation * */ .acctselector { /** * 1. Removes hover state when the selector is disabled. */ } .acctselector-item.list-sub-item { padding-right: 8px; } .acctselector:hover .is-disabled { background-color: transparent; } /* ==================================================================== // Instrument Search ===================================================================== */ /* ==================================================================== // Legacy Search Input ==================================================================== */ /** * 1. Explicit width is needed to make it full width inside flex container */ .legacysearch { position: relative; width: 100%; /** * 1. Create space for the search icon */ /** * 1. Vertical centering against input component */ /** * 1. Override width of button */ /** * 1. Create space for the clear icon * 2. Create space for the clear and warning icon */ /** * 1. Create space for the chevron and load * 2. Position the load before the chevron */ /** * This modifier only serves the purpose of running an A/B test */ } .legacysearch input[type='search'] { padding-left: 28px; text-overflow: ellipsis; } .legacysearch .icon--search, .legacysearch__icon, .legacysearch .icon--close, .legacysearch-chevron, .legacysearch-close, .legacysearch .mkt, .legacysearch-product-icon { position: absolute; top: 50%; transform: translateY(-50%); } .legacysearch .icon--close { right: 4px; opacity: 0; transition-property: opacity; transition-duration: 0.3s; transition-timing-function: ease-in; } .legacysearch .icon--search, .legacysearch__icon { left: 8px; pointer-events: none; } .legacysearch .mkt, .legacysearch-product-icon { left: 8px; pointer-events: none; } .legacysearch-chevron { right: 4px; width: auto; padding: 0; } .legacysearch-close { right: 0; width: 20px; } .legacysearch .load { pointer-events: none; right: 4px; } .legacysearch .load:before { border-right-color: var(--input-color); border-bottom-color: var(--input-color); } .legacysearch--instr input[type='search'] { color: var(--app-color); } .legacysearch--clear input[type='search'] { padding-right: 20px; } .legacysearch--clear .icon--close { opacity: 1; pointer-events: auto; } .legacysearch--clear--validated input[type='search'] { padding-right: 36px; } .legacysearch--chevron input[type='search'] { padding-right: 36px; } .legacysearch--chevron .load { width: 16px; right: 20px; } .legacysearch--chevron-test input[type='search'] { padding-right: 0; padding-left: 100px; } .legacysearch--chevron-test .icon--search { left: 80px; } .legacysearch--chevron-test .legacysearch-chevron { left: 0; max-width: 72px; } .legacysearch-results { /** * 1. Start padding inset provided by expand/collapse button * 2. Align secondary listing content with parent primary listing */ /** * 1. Override list border for the secondary items parent. */ /** * 1. Override list border color for secondary items. */ /** * 1. Get rid of padding on list item as we set a fixed height * 2. Toggle button and parent cell as 100% height of row, fixes tapping outside of the button */ } .legacysearch-results-none { padding: 4px 8px; text-align: center; } .legacysearch-results .list-layout__item--first .legacydivider { border-top: 0; } .legacysearch-results--border-top .list-layout__item--first > :first-child { border-top-width: 1px; } .legacysearch-results--border-bottom .list-layout__item--last > :first-child { border-bottom-width: 1px; } .legacysearch-results .list-item.is-more { border-top-width: 1px; } .legacysearch-results--tree .legacysearch-results-item { padding-left: 0; } .legacysearch-results--tree .legacysearch-results-item > .instr { padding-left: 32px; } .legacysearch-results-secondary-item .product-icon { margin-left: 1rem; } .legacysearch-results-item.is-open { border-bottom: 1px dashed var(--app-sub-border) !important; } .legacysearch-results-secondary-item { border-color: var(--app-related-border) !important; } .legacysearch-results-item { padding-top: 0px; padding-bottom: 0px; } .legacysearch-results-item .toggle-cell { height: 100%; } .legacysearch-results-item .toggle-cell .btn { height: 100%; } /** * LEGACY SEARCH BLOCK (EXTENSIONS) * ===================================================================== */ .legacysearch { /** * 1. Just smaller than trade ticket so doesn't overrun TT bounds * 2. Keep scroll position during expand of item */ } .legacysearch-results--truncated { min-width: 380px; } .legacysearch-results--truncated .scroller__content { max-height: 500px; } /** * LEGACY SEARCH BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ .legacysearch-results { /** * 1. Align secondary listing content with parent primary listing * 2. Do not allow height change when border is removed, keep until migration to sizes will be done, required by virtual layout */ } .legacysearch-results--tree .legacysearch-item > .instr { padding-left: 32px; } .legacysearch-results .legacydivider { height: 18px; line-height: 18px; } .legacysearch-results-item { height: 39px; } .legacysearch-results .list-item.is-more { height: 26px; } /** * LEGACY SEARCH BLOCK (PRO EXTENSIONS) * ===================================================================== */ .legacysearch input[type='search'] { padding-left: 20px; } .legacysearch .icon--search { left: 4px; width: 12px; height: 12px; } .legacysearch .icon--close { width: 12px; height: 12px; } .legacysearch .mkt, .legacysearch-product-icon { left: 0; } .legacysearch-results { /** * 1. Do not allow height change when border is removed, keep until migration to sizes will be done, required by virtual layout */ } .legacysearch-results .legacydivider { height: 18px; line-height: 18px; } .legacysearch-results-item { height: 39px; } .legacysearch-results .list-item.is-more { height: 26px; } /* ==================================================================== // Search Input ==================================================================== */ .search { position: relative; display: flex; align-items: center; width: 100%; border: 1px solid var(--border-color-highlight); border-radius: var(--border-radius-input); background-color: var(--background-app); /** * Must be declared after aurora in order to clear border radius * 1. Enable z-index stacking */ } .search__close { visibility: hidden; opacity: 0; transition: all ease-in-out 150ms; display: flex; align-items: center; height: 100%; } .search__input { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; width: 100%; color: var(--text-color-secondary); outline: none; padding: 0 1rem; } .search__input::placeholder { color: var(--text-color-secondary); } .search--disabled { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: var(--border-color-default); color: var(--text-color-tertiary); } .search--disabled .search__input::placeholder { color: var(--text-color-tertiary); } .search--focused .search__input { color: var(--text-color-default); } .search--focused .search__input::placeholder { color: var(--text-color-default); } .search--tiny { font-size: 11px; height: 2rem; padding: 0 0.5rem; } .search--small { font-size: 12px; height: 2.5rem; padding: 0 1rem; } .search--medium { font-size: 14px; height: 4rem; padding: 0 1rem; } .search--large { font-size: 16px; height: 5rem; padding: 0 1.5rem; } .search--clear { padding-right: 0; } .search--clear .search__close { opacity: 1; visibility: visible; padding: 0 1rem; } .search--clear .search__input { padding-right: 0; } .search--aurora { border-color: var(--aurora-border-level-2); border-radius: var(--aurora-border-radius-input); background-color: var(--aurora-background-level-1); /** * This modifier is needed specifically for the aurora masthead in investor, * since it follows its own 'dark theme' regardless of the theme user setting. * Colors are directly set to the dark theme variants of the regular aurora dropdown. */ } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .search--aurora:not(.search--disabled):hover { border-color: var(--aurora-color-brand-primary); } .search--aurora:not(.search--disabled):hover::after { content: ''; background: var(--aurora-masthead-color-brand-primary-alpha-10); position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; } } .search--aurora.search--investor-masthead { background-color: var(--aurora-masthead-dropdown-background); border-color: var(--aurora-masthead-dropdown-border); transition: background-color 150ms ease-in-out, border 150ms ease-in-out; } .search--aurora.search--investor-masthead.search--focused { border-color: var(--aurora-masthead-color-brand-primary); } .search--aurora.search--investor-masthead.search--focused .search__input { color: var(--aurora-masthead-input-text-color); } .search--aurora.search--investor-masthead.search--focused .search__input:-moz-placeholder { color: var(--aurora-masthead-input-text-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead.search--focused .search__input::-moz-placeholder { color: var(--aurora-masthead-input-text-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead.search--focused .search__input:-ms-input-placeholder { color: var(--aurora-masthead-input-text-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead.search--focused .search__input::-webkit-input-placeholder { color: var(--aurora-masthead-input-text-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } .search--aurora.search--investor-masthead .search__input { color: var(--aurora-masthead-input-text-color); } .search--aurora.search--investor-masthead .search__input:-moz-placeholder { color: var(--aurora-masthead-input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead .search__input::-moz-placeholder { color: var(--aurora-masthead-input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead .search__input:-ms-input-placeholder { color: var(--aurora-masthead-input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora.search--investor-masthead .search__input::-webkit-input-placeholder { color: var(--aurora-masthead-input-placeholder-color); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } .search--aurora.search--investor-masthead .icon--aurora { color: var(--aurora-masthead-input-text-color); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .search--aurora.search--investor-masthead:not(.search--disabled):hover { border-color: var(--aurora-masthead-color-brand-primary); } .search--aurora.search--investor-masthead:not(.search--disabled):hover::after { display: none; } } .search--aurora .search__input { color: var(--aurora-text-color-primary); } .search--aurora .search__input:-moz-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora .search__input::-moz-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora .search__input:-ms-input-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); } .search--aurora .search__input::-webkit-input-placeholder { color: var(--aurora-text-color-secondary); font-style: var(--input-placeholder-style); font-weight: var(--input-placeholder-weight); opacity: 1; } .search--aurora.search--disabled { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: var(--aurora-border-level-2); background-color: var(--aurora-background-level-2); } .search--aurora.search--disabled .search__input { color: var(--aurora-text-color-tertiary); } .search--aurora.search--disabled .search__close { visibility: hidden; opacity: 0; transition: all ease-in-out 150ms; } .search--aurora.search--disabled .search__input::placeholder { color: var(--aurora-text-color-tertiary); } .search--aurora.search--focused { border-color: var(--aurora-color-brand-primary); background-color: var(--aurora-background-level-1); } .search--aurora.search--focused .search__input { color: var(--aurora-text-color-primary); } .search--aurora.search--focused .search__input::placeholder { color: var(--aurora-text-color-primary); } .search--aurora.search--tiny { height: 2rem; font-size: 11px; } .search--aurora.search--small { height: 3rem; font-size: 12px; } .search--aurora.search--medium { height: 3.75rem; font-size: 14px; } .search--aurora.search--large { height: 5rem; font-size: 16px; } .search--first-segment { position: relative; border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .search--first-segment:hover { z-index: 1; } } .search--first-segment.search--focused { z-index: 1; } .segmented-input { display: flex; } .segmented-input__item { transition: width 300ms ease-in-out; } .segmented-input__item--first { width: 180px; } .segmented-input__item--last { width: 140px; } .segmented-input__item--collapsed { width: 0; overflow: hidden; } .segmented-input--full-width .segmented-input__item { flex-grow: 1; } /* ==================================================================== // Dealerbox // // DEVELOPER NOTES: // - Trade Buttons do not follow the BEM naming convention (i.e. // `dealerbox-btn` since they themselves have many sub-elements. // - This is akin to the Data Grid where individual cell contents // define their own "naming context" as they are decoupled // from their parent containers. // - Trade Buttons have a hard-coded (but relative) height, as opposed // to being sized by their content. This is by (and in the) design. // // // // // Markup: //
// //
// 0,4 //
// //
//
// //
// //
// // quicktrade-disabled - Quicktrade (disabled) // quicktrade-enabled - Quicktrade (enabled) // live-disabled - Live trade (disabled) // live-enabled - Live trade (enabled) // rfq-required - RFQ (disabled) // rfq-running - RFQ (waiting) // no-price - No prices available // // Styleguide 12.3 ===================================================================== */ /* ==================================================================== =Trade Button ================================================================= */ /** * 1. Overide browser stylesheet of inline-block on ios6 * 2. Contents of dealerboxes are always LTR due to number direction */ .tradebtn { position: relative; display: block; height: 72px; background-color: var(--tradebtn-default-bg); color: var(--tradebtn-default-color); direction: ltr; transition-property: background; transition-duration: 200ms; /* * Elements auto align vertically as children of a // //
    //
  • //
    // //
    //
    1x2
    //
    • //
  • //
    // //
    //
    2x1
    //
    • //
// // // Styleguide 11.4 ===================================================================== */ .multiplechartsmenu { min-width: 160px; } /** * CLASSIFICATION STATUS * ===================================================================== */ .classificationstatus-textbox { padding-left: 20px; } /** * TRADING CONDITIONS LINK COMPONENT * ===================================================================== */ /** * 1. Position the loader to the right of the label text while still allowing text to wrap. * 2. Ensure that the loader to the right positions correctly in relation to the label text element. */ .trading-conditions-link { padding-right: 24px; position: relative; /** * 1. Making sure the default styling for secondary text is applied, rather than trading conditions font color */ } .trading-conditions-link .btn { text-align: left; text-align: start; } .trading-conditions-link sub { color: var(--gray-semi-light); margin-left: 4px; } /** * INITIAL WORKSPACE CHOICE DIALOG * ===================================================================== * */ .initialworkspacechoice-body { padding: 8px 0 0 0; } .initialworkspacechoice-label { padding: 0 8px; } .initialworkspacechoice-list { max-height: 600px; } .initialworkspacechoice-session { padding: 8px; cursor: pointer; opacity: 0.5; transition: opacity; transition-duration: 200ms; } .initialworkspacechoice-session.is-selected { opacity: 1; } .initialworkspacechoice-session-details { margin-left: 24px; margin-top: 8px; } /** * FOCUS MANAGER COMPONENT * ===================================================================== */ .focusmanager { /* * Part of visible-focus polyfill: https://github.com/WICG/focus-visible */ /* * Focus within shouldn't render outline for it's visible focused elements. */ /* * Hidden state for focusmanager element. Allows for focusing into element, without rendering focus. */ /* * Overrides for prodealingbox * 1. Deeper outline offset is required for quick trade buttons to skip border. Otherwise outline is hidden behind borders. */ /* * Overrides for input * 1. Disables default behaviour (with focus-visible polyfill) of rendering outline for input. */ /* * Forces disabled outline. Useful if we don't want to render outline, even if it focus was initiated from a keyboard. * Example use case: React grid, which shouldn't render focus outlines for it's children parts. * Important statement is required to override focus-visible polyfill style. */ /* * Overrides for btn-link. In needs to be placed inside focus manager to keep correct specificity. * Otherwise it might get reset by base .focus-visible. * 1. Links needs to have bigger outline, otherwise there is almost no margin between letters and outline lines. */ } .focusmanager .focus-visible { outline: 1px solid var(--outline-color-default); outline-offset: -1px; } .focusmanager-within .focus-visible { outline: none; } .focusmanager--hidden { width: 1px; height: 0; padding: 0; overflow: hidden; position: fixed; outline: none; top: 0; left: 0; } .focusmanager--outline-deep .focus-visible { outline-offset: -2px; } .focusmanager input.focus-visible { outline: none; } .focusmanager--no-outline.focus-visible, .focusmanager--no-outline .focus-visible { outline: none; } .focusmanager .btn--link.focus-visible, .focusmanager .link.focus-visible { outline-offset: 2px; } /** * OPTION STRATEGIES TICKET * ===================================================================== */ .optionstrategiesticket { /** * 1. Visual adjustment. Turn off grid bottom margin as toolbar's margin is already sufficient. */ /** * 1. Visual adjustment of the dropdown to the buy/sell buttons */ /** * 1. Spread height to 100% so the action button can calculate it's height * 2. In Option Strategies module, validation messages inherit font-size from depth-trader and native validation * module, make sure it has consistent font-size across the whole module. */ /** * Validations in Option Strategies Ticket legs grid * 1. For legs grid header we do not want to show outline * 2. We have small headers, original icon cannot fit, thus we rescale it to 75% * 3. We want to display tooltips in grid but inside it we have various z-indexed elements * and hidden overflow. We need to reposition tooltips to be placed outside grid (above * headers. * 4. For legs grid headers notifications we want to display tooltips above the icon and header just * to avoid overlapping with grid content. * 5. Make some additional space for Call/Put column */ /** * 1. This height is set to make sure the loader and notice do not collapse. */ } .optionstrategiesticket-head.legacytoolbar { border-bottom: none; } .optionstrategiesticket-head.legacytoolbar.grid { margin-bottom: 0; } .optionstrategiesticket .market-status-bar { padding-left: 4px; padding-right: 4px; } .optionstrategiesticket-dropdown { width: 137px; } .optionstrategiesticket-form { margin-top: 8px; padding: 0 4px; /** * 1. Visual adjustments for the text within the buy/sell button (which has not a standard layout because of the * `procomboinput` class. For now we don't have any class resetting padding hence manual adjustment has to be * made. */ /** * 1. Restore custom `top` value to normal (overwritten in depthtrader) */ /** * 1. Override form validation style. * 2. Center the icon vertically */ } .optionstrategiesticket-form .btn.btn--buy, .optionstrategiesticket-form .btn.btn--sell { padding: 0; } .optionstrategiesticket-form .validation-message--above .message { top: unset; } .optionstrategiesticket-form__label { box-shadow: none !important; font-size: 12px; line-height: 2rem; color: var(--app-meta-color); line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .optionstrategiesticket-form__label .validation-message__icon { top: -4px; } .optionstrategiesticket .t-action { cursor: pointer; } .optionstrategiesticket-details { margin-top: 8px; margin-bottom: 4px; padding: 0 4px; overflow: hidden; height: 2.5rem !important; } .optionstrategiesticket-details-item { max-width: none !important; } .optionstrategiesticket-details.details--horizontal .details-val { display: inline; } .optionstrategiesticket .error-outline { border: 1px solid var(--input-validation-outline); } .optionstrategiesticket .validation.add-leg { height: 100%; } .optionstrategiesticket .validation .message { font-size: 14px; line-height: 2rem; text-align: left; text-align: start; } .optionstrategiesticket .validation-header .is-invalid { box-shadow: none; } .optionstrategiesticket .validation-header .validation-message__icon { padding-right: 1px; } .optionstrategiesticket .validation-header .validation-message .message { top: initial; bottom: 32px; transform: translateX(8px) !important; } .optionstrategiesticket--dialog { min-height: 280px; } .optionstrategiesticket .list-layout__item--last { border-bottom: none; } /** * TRADE ALLOCATIONS * ===================================================================== */ .tradeallocations__container { padding: 0 4px 4px; } .tradeallocations__allocation-settings .layout__item--extra-wide { margin: 0 2px 4px 0; } .tradeallocations .layout__section--inset { padding: 0; } .tradeallocations .tabs.tabs--primary .tabs__tab { margin-left: 0; padding: 4px; min-height: 2rem; } .tradeallocations__precheck-stack { border-bottom: 1px solid var(--border-color-default); transform: translate(0, 1px); } .tradeallocations__precheck-stack--aurora { transform: translate(0, 2px); } .tradeallocations__precheck-stack__timestamp-label { padding-right: 4px; color: var(--text-color-secondary); } .tradeallocations__group-section, .tradeallocations--narrow-view .oui-card { width: 315px; } .tradeallocations__group-list { margin-top: 2rem; } .tradeallocations__narrow-menu-bar { padding-top: 8px; } .tradeallocations__group-item { cursor: pointer; } .tradeallocations__group-item--is-selected { background-color: var(--background-selected); } .tradeallocations__group-item .more-options-btn { background: transparent; display: flex; align-items: center; justify-items: center; padding: 4px; } .tradeallocations__group-item .stack__item--grow { overflow: hidden; max-height: 2rem; } .tradeallocations__allocation-name-input { height: 100%; padding: 2px 4px; } .tradeallocations__block-account-selector { width: 250px; margin-bottom: 8px; } .tradeallocations .error-cell .is-invalid { box-shadow: none; } .tradeallocations .error-cell .validation-message .message { top: initial; bottom: 32px; transform: translateX(8px) !important; line-height: 2rem; } .tradeallocations__instrument-picker { min-height: 9rem; } .tradeallocations__grid-section-name { display: flex; align-items: center; min-height: 3rem; padding-left: 4px; border-color: var(--border-color-default); border-style: solid; border-width: 0; } .tradeallocations__grid-section-name--main { border-width: 0 1px; } .tradeallocations__precheck-result { display: flex; align-items: center; } .tradeallocations__precheck-result .label { flex: 1; } .tradeallocations__splitter { width: 4px; background-color: var(--tabs-pro-frame-bg); } /** * TRADE ALLOCATIONS HISTORY * ===================================================================== */ .tradeallocationshistory__container { padding: 1rem; } /** * SHELL UPDATE DIALOG COMPONENT * ===================================================================== * * Shell update dialog component with a message, a radio group and a confirmation button */ .shellUpdateDialog { /* ==================================================================== =Icons ================================================================= */ /** * 1. Allow individual elements stretch to full width and height to draw edge to edge borders and touch the bottom edge */ } .shellUpdateDialog .sheet-body { padding: 0; /** * 1. Layout individual form elements * 2. Draw borders between individual form elements */ /** * 1. Offset the icons from the text underneath, the downloading one looks better with medium spacing */ } .shellUpdateDialog .sheet-body .form-group { padding: 0; border: none; } .shellUpdateDialog .sheet-body .form-group .grid-cell { margin: 0; padding: 4px 8px; border-top: 1px solid var(--app-hairline); } .shellUpdateDialog .sheet-body .form-group .grid-cell:last-child { border-bottom: 1px solid var(--app-hairline); } .shellUpdateDialog .sheet-body i:before { margin-bottom: 16px; } .shellUpdateDialog .sheet-body .isInProgressAnimation .icon { animation: updateProgressFlicker 7s infinite; } @keyframes updateProgressFlicker { 0%, 30%, 70%, 100% { opacity: 1; } 50% { opacity: 0; } } .shellUpdateDialog .sheet-body .icon--download { color: var(--app-primary-bg); margin-bottom: 8px; } .shellUpdateDialog .sheet-body .icon--checkmark { color: var(--light-green); } .shellUpdateDialog a { color: var(--app-link-color); text-decoration: none; cursor: pointer; } .body--aurora .shellUpdateDialog a { font-weight: 600; color: var(--aurora-color-brand-tertiary); transition: color ease-in-out 150ms; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .body--aurora .shellUpdateDialog a:focus, .body--aurora .shellUpdateDialog a:active, .body--aurora .shellUpdateDialog a:hover { text-decoration: underline; color: var(--aurora-color-brand-tertiary-hover); } } /** * TRADE SIGNALS COMPONENT * ===================================================================== */ /** * 1. Override grid style */ .tradesignals { /** * 1. Put the autochartist label a few pixels above the * logo center height */ } .tradesignals-sidebar { width: 230px; border-right: 1px solid var(--app-hairline); } .tradesignals-sidebar-links { padding: 8px; border-top: 1px solid var(--app-hairline); } .tradesignals-details { /** * 1. Override sheet-body padding so that the middle border covers all * signal details height */ /** * 1. Place reset button on the bottom of the chart canvas, which is * directly above the reset button container, subtracting the icon height */ } .tradesignals-details-popup .tradesignals-details { padding: 0; } .tradesignals-details-overview { padding: 16px; border-right: 1px solid var(--app-hairline); } .tradesignals-details-description, .tradesignals-details-powerstats { padding: 2px 8px; border-bottom: 1px solid var(--app-sub-deep-border); } .tradesignals-details-powerstats { font-size: 12px; line-height: 2rem; color: var(--app-meta-color); padding-top: 8px; line-height: 16px; } .tradesignals-details-powerstats-checkbox { height: 16px; margin: 0; } .tradesignals-details-ticket { padding: 16px 0; } .tradesignals-details-ticket .btn[disabled] { outline: 0; } .tradesignals-details-list { padding: 0 8px; } .tradesignals-details-list .kv-key, .tradesignals-details-list .kv-val { padding: 0; } .tradesignals-details-list-orders { margin-bottom: 8px; } .tradesignals-details-list-orders-action { margin-top: 2px; margin-left: 8px; } .tradesignals-details-list-direction-up { color: var(--app-buy-bg); } .tradesignals-details-list-direction-down { color: var(--app-sell-bg); } .tradesignals-details-reset-chart-btn { background: transparent; color: var(--app-meta-color); position: absolute; top: -18px; right: 8px; } .tradesignals-header { border-bottom: 1px solid var(--app-hairline); } .tradesignals-header-col { color: var(--datagrid-header-color); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tradesignals-header-col[data-sortdir] { color: var(--app-color); } .tradesignals-tooltip { /** * 1. Optical placement */ } .tradesignals-tooltip-popup { max-width: 500px; } .tradesignals-tooltip-btn { position: relative; top: -2px; padding: 0 2px; margin-left: 4px; } .tradesignals-row.selected { background: var(--app-active-bg); } .tradesignals-row:not(:last-child) { border-bottom: 1px solid var(--app-hairline); } .tradesignals-bar { padding: 0 4px; border-bottom: 1px solid var(--app-hairline); } .tradesignals-bar-filter-button > .tradesignals-bar-filter-icon:before { color: var(--app-primary-active-bg); } .tradesignals-autochartist { padding: 4px 0; } .tradesignals-autochartist-label { font-size: 11px; line-height: 2rem; margin-top: -2px; color: var(--app-meta-color); } .tradesignals-autochartist-logo:before { width: 156px; color: var(--app-color); } /** * SIGNAL DETAILS MODULE * ===================================================================== */ .signal-details--direction-up { color: var(--color-buy); } .signal-details--direction-down { color: var(--color-sell); } .signal-details__reset-chart { background: transparent; color: var(--app-meta-color); position: absolute; bottom: 0; right: 0; } /** * SIGNAL DETAILS MODULE (EXTENSIONS) * ===================================================================== */ .signal-details { /** * 1. Signal details renders a sheet (pro trade ticket) within a sheet, * so the padding on the outer sheet needs to be custom. */ /** * 2. Pro trade ticket width as defined in Saxotrader. */ } .signal-details.sheet-body { padding: 0; } .signal-details__ticket { width: 379px; border-left: 1px solid var(--app-hairline); } /** * ACCOUNT CHART * ===================================================================== */ .account-chart { position: relative; } .account-chart__header { display: flex; padding: 1rem; } @media (max-width: 499px), (max-height: 499px) { .account-chart__header::before { content: ''; flex: 1; } .account-chart__header-link { flex: 1; text-align: right; text-align: end; line-height: 3rem; } } /** * RETURN CHART * ===================================================================== */ .return-chart { position: relative; } .return-chart__header { display: flex; padding: 1rem; } @media (max-width: 499px), (max-height: 499px) { .return-chart__header::after { content: ''; flex: 1; } .return-chart__header-link { line-height: 3rem; flex: 1; } } .return-chart__benchmark { padding: 1rem; } .support-dialog { border: none; } .support-dialog__body { height: calc(100% - (4px + 4px + 0px + 2rem)); padding: 0; } .support-dialog__body-fullHeight { height: 100%; padding: 0; } .support-dialog__tab-container { margin-bottom: 2rem; } .support-dialog__chat-container { height: calc(100% - (2.75rem + 2rem + 2rem)); top: 0; } .support-dialog__chat-container-fullHeight { height: 100%; top: 0; } .support-dialog--card .support-dialog__body { height: calc(100% - (20px + 0px + 3rem)); } .support-dialog--card .support-dialog__chat-container { height: calc(100% - (2.75rem + 0px + 2rem + 3rem)); } .support-dialog--pro { height: 100%; width: 100%; right: 0; position: relative; } .support-dialog--pro .support-dialog__body { height: calc(100% - (20px + 1px + 3rem)); } .support-dialog--pro .support-dialog__chat-container { height: calc(100% - (3rem + 2rem)); } .support-dialog--tablet .support-dialog__chat-container { height: calc(100% - (2.75rem + 3rem + 2rem)); } .support-dialog--investor .support-dialog__body { height: calc(100% - (16px + 0px + 3rem)); } .support-dialog--investor .support-dialog__chat-container { height: calc(100% - 0px); } .support-help { padding: 0 8px; height: 100%; overflow-y: auto; text-align: left; text-align: start; } .support-help__subheading { padding: 8px 0; } .support-help__section { margin-bottom: 1rem; } .support-help__help-link { line-height: 3rem; } /* * Welcome Screen * ===================================================================== * * This is a POC and no styles should be re-used from this file * */ .welcomescreen { position: relative; max-height: 576px; background: var(--poc-ws-background-color); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .welcomescreen__video { width: 100%; height: 180px; min-height: 180px; } .welcomescreen__video iframe { height: 100%; width: 100%; border: none; } .welcomescreen__image { width: 100%; height: 180px; min-height: 180px; position: relative; } .welcomescreen__image img { object-fit: cover; object-position: center; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .welcomescreen__header { height: 56px; } .welcomescreen__body { width: 320px; min-height: 0; padding: 20px 20px 0 20px; display: flex; flex-direction: column; font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; color: var(--poc-ws-body-color); } .welcomescreen__body a { font-weight: bold; color: var(--poc-ws-action-color); cursor: pointer; } .welcomescreen__labels { padding-bottom: 12px; } .welcomescreen__label { display: inline-block; padding: 4px 8px; background: var(--poc-ws-label-background-color); border-radius: 12px; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--poc-ws-label-color); } .welcomescreen__title { font-style: normal; font-weight: bold; font-size: 24px; line-height: 28px; margin-bottom: 12px; color: var(--poc-ws-title-color); } .welcomescreen__scrollable::-webkit-scrollbar { background-color: #314056; width: 8px; height: var(--app-scroll-width); } .welcomescreen__scrollable::-webkit-scrollbar-button:start:decrement, .welcomescreen__scrollable::-webkit-scrollbar-button:end:increment { width: 2px; height: 2px; display: block; background-color: transparent; } .welcomescreen__scrollable::-webkit-scrollbar-track-piece { border-radius: 0; } .welcomescreen__scrollable::-webkit-scrollbar-thumb { background-color: var(--app-scroll-bg); border-radius: 4px; } .welcomescreen__scrollable::-webkit-scrollbar-corner { background-color: transparent; } .welcomescreen__bodytext { padding-bottom: 20px; } .welcomescreen__ctas { display: flex; flex-direction: column; padding: 20px; border-top: 1px solid var(--poc-ws-action-border-color); text-align: right; } .welcomescreen__ctas .welcomescreen__cta--primary { color: var(--poc-ws-cta-primary-color); } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .welcomescreen__ctas .welcomescreen__cta--primary:focus, .welcomescreen__ctas .welcomescreen__cta--primary:active, .welcomescreen__ctas .welcomescreen__cta--primary:hover { color: var(--poc-ws-cta-primary-color); } } .welcomescreen__cta { display: inline-block; font-weight: bold; cursor: pointer; } .welcomescreen__cta--button { line-height: 40px; padding: 0 16px; height: 40px; border-radius: 4px; text-align: center; } .welcomescreen__cta--primary { background: var(--poc-ws-action-color); width: 100%; } .welcomescreen__cta--secondary { border: solid 1px var(--poc-ws-cta-secondary-border-color); background: none; } .welcomescreen__cta--secondary a { color: var(--poc-ws-cta-secondary-color); cursor: pointer; } .welcomescreen__cta:not(:first-child) { margin-top: 16px; } .welcomescreen__closebutton { position: fixed; top: 8px; right: 8px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; background: var(--poc-ws-close-button-background-color); border-radius: 4px; font-size: 16px; color: var(--poc-ws-close-button-color); cursor: pointer; } @media (min-width: 769px) and (max-width: 1439px), (min-width: 1440px) { .welcomescreen { max-height: 712px; } .welcomescreen__video { height: 360px; min-height: 360px; } .welcomescreen__image { height: 360px; min-height: 360px; } .welcomescreen__header { height: 60px; } .welcomescreen__body { width: 640px; padding-top: 24px; display: flex; flex-direction: column; font-size: 16px; line-height: 24px; } .welcomescreen__labels { padding-bottom: 16px; } .welcomescreen__title { font-size: 32px; line-height: 40px; margin-bottom: 16px; } .welcomescreen__bodytext { padding-bottom: 24px; } .welcomescreen__ctas { flex-direction: row-reverse; padding: 24px; } .welcomescreen__cta--primary { width: auto; } .welcomescreen__cta:not(:first-child) { margin: 0px 16px 0 0; } .welcomescreen__closebutton { top: 16px; right: 16px; height: 32px; width: 32px; font-size: 16px; } } .risk-graph-container .risk-graph-chart-container { height: 30rem; font-size: 10px; } .risk-graph-container .risk-graph-chart-container .gridline-x { stroke: var(--text-color-tertiary); } .risk-graph-container .risk-graph-chart-container .line { stroke: var(--color-primary); stroke-width: 2px; fill: none; } .risk-graph-container .risk-graph-chart-container .area { opacity: 0.4; } .risk-graph-container .risk-graph-chart-container .profit-area { fill: var(--color-positive); } .risk-graph-container .risk-graph-chart-container .loss-area { fill: var(--color-negative); } .risk-graph-container .risk-graph-chart-container .y-axis path, .risk-graph-container .risk-graph-chart-container .y-axis line, .risk-graph-container .risk-graph-chart-container .x-axis path, .risk-graph-container .risk-graph-chart-container .x-axis line { fill: none; stroke: var(--text-color-secondary); } .risk-graph-container .risk-graph-chart-container .y-axis text, .risk-graph-container .risk-graph-chart-container .x-axis text { fill: var(--text-color-secondary); } .risk-graph-container .risk-graph-chart-container .current-price-marker { opacity: 0.6; fill: var(--color-primary); } .risk-graph-container .risk-graph-chart-container .current-price-text { text-anchor: middle; fill: white; font-size: 12px; } .risk-graph-container .risk-graph-chart-container .strike-marker { text-anchor: middle; dominant-baseline: central; font-size: 12px; fill: white; } .risk-graph-container .risk-graph-chart-container .strike-marker > path { opacity: 0.6; } .risk-graph-container .risk-graph-chart-container .long { fill: var(--color-positive); } .risk-graph-container .risk-graph-chart-container .short { fill: var(--color-negative); } .risk-graph-container .gross-pl-text { text-align: right; padding-left: 1rem; padding-right: 1rem; } .risk-graph-container .risk-graph-sidebar { min-width: 120px; } html:not([dir='rtl']) .risk-graph-container .risk-graph-sidebar { margin-right: 1rem; } [dir='rtl'] .risk-graph-container .risk-graph-sidebar { margin-left: 1rem; } /* ==================================================================== =Shell & Controls ================================================================= */ /** * PRO SHELL * ===================================================================== * * LESS manifest bundle for the pro application and global container * styles * * ------------------------------------------------------------------- * NOTES: * - Inspiration for scrollbars: http://beautifulpixels.com/wp-content/uploads/2010/03/style.css * * ------------------------------------------------------------------- * CONTENTS: * * =Manifest * =Viewport * =App * =Header * =Workspace * =Trade Panel * =Info Panel * =Overview Panel * =Ticket Panel * =Settings Panel * =Footer * =Scrollbars */ /* ==================================================================== =Viewport ================================================================= */ /** * 1. Required to expand app to edges of viewport * 2. Always suppress viewport scrollbars, even if not large enough to * display minimum size of app. * 3. Specify the arrow is default cursor, even over text * (as non-selectable). Caret cursor only for valid inputs. */ html, body { width: 100%; height: 100%; overflow: hidden; cursor: default; } /* ==================================================================== =Pre-app onboarding Container ================================================================= */ #pre-app { width: 100%; height: 100%; } /* ==================================================================== =App Container ================================================================= */ /** * 1. Required to hide offcanvas elements inside #app while in * 'app-settings' mode. * 2. Move any open popups (e.g. Notifications) along with the #app * - See popup.js for further details * 3. Transparent background so that dragged-out sub-windows can have * workspace-panel--bordered when they're not in a frame, without * showing a visible extra border */ #app { width: 100%; height: 100%; min-width: var(--app-desktop-x); min-height: var(--app-desktop-y); background-color: var(--app-bg); overflow: hidden; z-index: 1; } #app.app--undocked { min-width: inherit; min-height: inherit; background-color: transparent; } #app.app--undocked #workspace { padding: 0; } /* ==================================================================== =Header ================================================================= */ /** * 1. Specify height to avoid reflow once content injected. * Ref: http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ */ #header { height: var(--app-pro-header-size); margin: 0 4px 4px 4px; } /* ==================================================================== =Workspace ================================================================= */ /** * 1. Every panel also adds 2px, so this adds up to 4px * 2. We set this height to 16px to give the disclaimer additional space * around the disclaimer link so it looks padded * 3. Offset panel margin, so it doesn't add to distance to masthead */ #main { padding: 0 2px; --disclaimer-footer-height: 16px; height: calc( 100% - calc(var(--disclaimer-footer-height) + var(--app-pro-header-size)) ); margin-top: -2px; width: 100%; position: relative; } #main.is-secondary-session { height: calc( 100% - calc(var(--disclaimer-footer-height) + var(--app-pro-header-size)) - 32px ); } /* * POPUP UI BLOCK * ===================================================================== * * Generic popup utility to display floating content above the * application with modal-esque behaviours. * * ------------------------------------------------------------------- * CONTENTS: * * =Floating Pane * =Display/Transitions * =Lift Popover * =Popup Group * =Arrow (origin indicator) */ /** * 1. The display property is controlled by JavaScript in order * to trigger the associated CSS animations. */ .popup { width: 100%; height: 100%; position: absolute; z-index: 1200; top: 0; left: 0; display: none; /** * 1. Prefer opacity on a pseudo-element for a lightbox * popup, to background-color on the "real" popup element, as * animating opacity can be performed on the GPU at no extra cost */ /* ==================================================================== =Floating Pane ================================================================= */ /** * 1. top/left offsets calculated and inlined by JavaScript. * 2. #790242 avoid edge rendering bug where dialog contents aren't shown */ /** * 1. Clip any extraneous content */ /* ==================================================================== =Display/Transitions ================================================================= */ /** * 1. Override default grid sizing * - Useful for when the parent container does not provide * a constraining height, or needs to dynamically measure * the 'real' height in order to shrink-wrap it, e.g. * the popup. * - JS dynamically adds/removes this class to expand the * content for measuring. See popup.js for implementation. */ /* ==================================================================== =Lift ================================================================= */ /** * 1. Lifts above other popups in the same z-index stack (i.e. body) * * - Does NOT lift above other popups in splash */ /* ==================================================================== =Message ================================================================= */ /** * 1. Lifts above other popups and panels * */ /* ==================================================================== =Splash (above other popovers) ================================================================= */ /* ==================================================================== =Draggable ================================================================= */ /* ==================================================================== =Arrow (origin indicator) ================================================================= */ /** * 1. Arrow painted with two arrows, one for the stroke (border), * and one for the fill (`.popup-pane` background color). */ } .popup:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; opacity: 0; transition-property: opacity; transition-duration: 200ms; background: var(--popup-bg); } .ms .popup:before, .edge .popup:before { transition-duration: 0; } .popup--session:before { background: var(--popup-session-bg); } .popup-pane { position: absolute; opacity: 0; background: var(--popup-pane-bg); border: 1px solid var(--popup-border); box-shadow: var(--shadow-default); transition-property: opacity, transform; transition-duration: 200ms; /** * 1. Tiny anim to trigger animationend */ } html:not(.edge) .popup-pane { transform: scale(0); } .popup-pane.is-animating { transition-property: opacity, transform, top, left; } .ms .popup-pane, .edge .popup-pane { transition-duration: 0.01s; } .popup-content { border: 1px solid var(--popup-content-border); overflow: hidden; height: 100%; } .popup.is-loading .popup-pane .grid { height: auto !important; } .ms .popup.is-loading .popup-pane .grid--scroll { height: 100% !important; } .popup.is-shown .popup-pane { transform: scale(1); opacity: 1; } .popup.is-shown.popup--lightbox:before { opacity: 1; } .popup.is-shown.popup--session { z-index: 1800; } .popup.is-shown.popup--session:before { opacity: 1; } .popup--lift { z-index: 1300; } .popup--message { z-index: 1600; } .popup--splash { z-index: 1700; } .popup--draggable .sheet-header { cursor: move; } .popup-arrow { position: absolute; width: var(--popup-arrow-size); height: var(--popup-arrow-size); } .popup-arrow:before, .popup-arrow:after { content: ''; position: absolute; top: 0; left: -2px; height: 0; width: 0; border: calc(var(--popup-arrow-size) / 2 + 2px) solid transparent; border-top-color: var(--popup-border); } .popup-arrow:after { left: 0; border-width: calc(var(--popup-arrow-size) / 2); border-top-color: var(--popup-pane-bg); } .popup-arrow--top { top: calc(-1 * var(--popup-arrow-size)); left: var(--popup-inset); transform: rotate(180deg); } .popup-arrow--bottom { bottom: calc(-1 * var(--popup-arrow-size)); left: var(--popup-inset); transform: rotate(0deg); } .popup-arrow--left { top: var(--popup-inset); left: calc(-1 * var(--popup-arrow-size)); transform: rotate(90deg); } .popup-arrow--right { top: var(--popup-inset); right: calc(-1 * var(--popup-arrow-size)); transform: rotate(270deg); } /* * UNDERLAY BLOCK * ===================================================================== * * =States * =Content */ /** * 1. Scale is used "hide" the underlay (in inert state) rather than * `display` as it reduces app layouts and potential reflows */ .underlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; transform: scale(1); transition-property: opacity; transition-duration: 200ms; /** * 1. Prefer opacity on a pseudo-element for a lightbox * popup to opacity on the "real" underlay element, as * latter can be manipulated via JS, but former allows for * smoother transitons between states. */ /* ==================================================================== =Splash Mode ================================================================= */ /* ==================================================================== =States ================================================================= */ /** * 1. Need to perform a minor transition of the main element's opacity * so browser dispatches a `transitionend` event. In Chrome * transitions bubble from the psuedo-elements, but not so in MS. */ /** * 2. To handle opacity in IE i.e same as chrome, * because it was overridden by 1 */ /* ==================================================================== =Content ================================================================= */ /** * This class must be applied to the element to be displayed * above the underlay. */ } .underlay:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; opacity: 0; transition-property: opacity; transition-duration: 200ms; background: var(--black); /** * 1. Tiny anim to trigger animationend */ } .ms .underlay:before { transition-duration: 0.01s; } .underlay--splash:before { background: var(--app-bg); } .ms .underlay.is-shown { opacity: 0.49; } .underlay.is-shown:before { opacity: 0.5; } .ms .underlay.is-shown.underlay--session { opacity: 0.8; } .underlay.is-shown.underlay--session:before { opacity: 0.8; } .underlay.is-shown.underlay--cover:before { opacity: 1; } .underlay.is-hidden { transform: scale(0); } .underlay.is-fading { transition: none; } .underlay-content { z-index: 1001; } /* ==================================================================== // Drill // // A wrapper element allowing infinite nestable sections of content // that can be navigated to by sliding back and forth. // // To drill down, apply the modifier `.drill--down` class to the topmost // `.drill` element (steps down one level). The modifier `.drill--fade` // can also be applied to the same class to alter the transition from a // linear movement to a cross-fade. // // // // // // Markup: //
//
//

1st LEVEL CONTENT

//
//
//
//
//

2nd LEVEL CONTENT

//
//
//

3rd LEVEL CONTENT

//
//
//
//
// // Optionally this can be wrapped in a container to control overflow: //
//
//
//
//
//
//
Menu
// //
//
//
    //
  • // Some Action //
    • //
  • // Another Action //
    • //
  • // Final Action //
    • //
//
//
//
//
//
// // Styleguide 11.4 ===================================================================== */ /** * 1. overwrite .sheet as it's width default is 320px */ .contextmenu, .contextmenu .sheet { min-width: 250px; } .contextmenu .header-title { font-size: inherit; } .contextmenu .instr-name { color: var(--app-meta-color); } /** * SORTABLE COMPONENT * ===================================================================== */ /** * 1. Ensure items are positioned relative to top-left registration point, * regardless of writing direction (in RTL it is top-right) by default. */ .is-draggable:not(.reactgrid-row--draggable) { left: 0; top: 0; cursor: move; transition-property: transform; transition-duration: 300ms; transition-timing-function: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'; } .is-draggable:not(.reactgrid-row--draggable):not(tr):before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; transition: opacity; transition-duration: 300ms; opacity: 0; box-shadow: var(--shadow-default); } .is-draggable:not(.reactgrid-row--draggable).is-active { z-index: 1; } .is-draggable:not(.reactgrid-row--draggable).is-active:before { opacity: 1; } .is-unsortable { cursor: default; } /** * DATE TIME PICKER CONTROLLER CSS * ==================================================================== * History * * 2015-01-29: XHRJ - Initial Version * ==================================================================== * * Adds Desktop specific styles to the styles defined in the datetimepicker-common.less * */ /** * DATE TIME PICKER CONTROLLER CSS * ==================================================================== * History * * 2015-01-29: XHRJ - Initial Version * ==================================================================== * * Common styles for all variants Phone, Tablet and Desktop * * DO NOT IMPORT THIS FILE DIRECTLY, USE ONE OF THE VARIANTS. * */ .date-time-picker-container { border-top: 1px solid var(--app-alt-etchline); } .date-time-picker .picker-daynames { font-size: 12px; line-height: 2rem; color: var(--text-color-secondary); } .date-time-picker div { /** * 1. set width to prevent dialog from squashing content */ } .date-time-picker div.time-picker td { text-align: center; width: 54px; height: 44px; line-height: 44px; } .date-time-picker div.time-picker td.hour, .date-time-picker div.time-picker td.minute, .date-time-picker div.time-picker td.meridian { cursor: pointer; } .date-time-picker div.time-picker > :not(:first-child) td:not(:last-child) { border-right: 1px solid var(--app-hairline); } .date-time-picker div.time-picker > :not(:first-child) td.hour, .date-time-picker div.time-picker > :not(:first-child) td.minute, .date-time-picker div.time-picker > :not(:first-child) td.meridian { font-size: 1.2em; background-color: var(--datepicker-bg); color: var(--app-color); } .date-time-picker div.time-picker > :not(:first-child) td.hour.active, .date-time-picker div.time-picker > :not(:first-child) td.minute.active, .date-time-picker div.time-picker > :not(:first-child) td.meridian.active { background-color: var(--app-primary-bg); color: var(--app-primary-color); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .date-time-picker div.time-picker > :not(:first-child) td.hour.disabled, .date-time-picker div.time-picker > :not(:first-child) td.minute.disabled, .date-time-picker div.time-picker > :not(:first-child) td.meridian.disabled { background: none; color: var(--datepicker-color); cursor: not-allowed; } .date-time-picker div.date-picker { min-width: 309px; } .date-time-picker div.date-picker .picker-header .prev, .date-time-picker div.date-picker .picker-header .next { vertical-align: middle; } .date-time-picker div.date-picker th, .date-time-picker div.date-picker td { border-color: var(--datepicker-border-color); } .date-time-picker div.date-picker th { text-align: center; color: var(--datepicker-color); width: 44px; height: 24px; line-height: 24px; } .date-time-picker div.date-picker tbody td:not(:last-child) { border-right: 1px solid var(--datepicker-border-color); } .date-time-picker div.date-picker td { text-align: center; width: 44px; height: 34px; line-height: 34px; } .date-time-picker div.date-picker td.day, .date-time-picker div.date-picker td.month, .date-time-picker div.date-picker td.year { font-size: 1.2em; cursor: pointer; background-color: var(--datepicker-bg); color: var(--app-color); } .date-time-picker div.date-picker td.day.old, .date-time-picker div.date-picker td.month.old, .date-time-picker div.date-picker td.year.old, .date-time-picker div.date-picker td.day.new, .date-time-picker div.date-picker td.month.new, .date-time-picker div.date-picker td.year.new, .date-time-picker div.date-picker td.day.disabled, .date-time-picker div.date-picker td.month.disabled, .date-time-picker div.date-picker td.year.disabled { background-color: var(--datepicker-bg); } .date-time-picker div.date-picker td.day.today, .date-time-picker div.date-picker td.month.today, .date-time-picker div.date-picker td.year.today { text-decoration: underline; } .date-time-picker div.date-picker td.day.disabled, .date-time-picker div.date-picker td.month.disabled, .date-time-picker div.date-picker td.year.disabled { color: var(--datepicker-color); cursor: not-allowed; } .date-time-picker div.date-picker td.day.disabled span, .date-time-picker div.date-picker td.month.disabled span, .date-time-picker div.date-picker td.year.disabled span { cursor: not-allowed; } .date-time-picker div.date-picker td.day.current, .date-time-picker div.date-picker td.month.current, .date-time-picker div.date-picker td.year.current { background-color: var(--datepicker-bg); } .date-time-picker div.date-picker td.day.current:not(.active), .date-time-picker div.date-picker td.month.current:not(.active), .date-time-picker div.date-picker td.year.current:not(.active) { background-color: var(--app-sup-bg); } .date-time-picker div.date-picker td.day.active, .date-time-picker div.date-picker td.month.active, .date-time-picker div.date-picker td.year.active { background-color: var(--app-primary-bg); color: var(--app-primary-color); } .date-time-picker-title { text-align: center; font-size: 1.5em; padding: 5px; } .date-time-picker div.time-picker td.hour:hover, .date-time-picker div.time-picker td.minute:hover, .date-time-picker div.time-picker td.meridian:hover { background: var(--datepicker-hover-bg); } .date-time-picker div.time-picker td.hour.disabled:hover, .date-time-picker div.time-picker td.minute.disabled:hover, .date-time-picker div.time-picker td.meridian.disabled:hover { cursor: not-allowed; } .date-time-picker div.date-picker .picker-header .prev, .date-time-picker div.date-picker .picker-header .next { vertical-align: middle; } .date-time-picker div.date-picker td.day:hover:not(.disabled):not(.active), .date-time-picker div.date-picker td.month:hover:not(.disabled):not(.active), .date-time-picker div.date-picker td.year:hover:not(.disabled):not(.active) { background: var(--datepicker-hover-bg); } .date-time-picker div.date-picker td.day.disabled:hover, .date-time-picker div.date-picker td.month.disabled:hover, .date-time-picker div.date-picker td.year.disabled:hover { cursor: not-allowed; } /* * DATE TIME CONTROL * ===================================================================== */ .datetime-control { background-color: var(--action-background-default); border-radius: var(--border-radius-action); border: 1px solid var(--border-color-default); transition: background-color ease-in-out 150ms; cursor: pointer; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .datetime-control:hover { background-color: var(--action-background-default-hover); } } .datetime-control--small { font-size: 11px; height: 2rem; padding: 0 0.5rem; } .datetime-control--medium { font-size: 12px; height: 2.5rem; padding: 0 0.5rem; } .datetime-control--large { font-size: 14px; height: 4rem; padding: 0 1rem; } .datetime-control__date { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .datetime-control--aurora { border-radius: var(--aurora-border-radius-action); background-color: var(--aurora-action-background-default); border-color: var(--aurora-action-background-default); color: var(--aurora-action-text-color-default); font-weight: bold; } .datetime-control--aurora.datetime-control--compact:first-child { border-bottom-left-radius: unset; border-bottom-right-radius: unset; } .datetime-control--aurora.datetime-control--compact:last-child { border-top-left-radius: unset; border-top-right-radius: unset; } @media (hover: hover) and (pointer: fine), (-ms-high-contrast: none), (-ms-high-contrast: active) { .datetime-control--aurora:hover { background-color: var(--aurora-action-background-default-hover); } } /* ==================================================================== // Keypad // // Standalone keypad for entering numeric data on touch devices. In // some cases it also affords a quick amount drop down populated with // common amd historical values. // // To toggle between the list and input views, apply the modifier // `.keypad-display--only` to the `.keypad-display` element. // // To indicate that the maximum number of integers has been entered, // apply the modifier `.keypad-display--limit` to the `.keypad-display` // element. Remove it and re-apply to trigger the animation again. // // To toggle between a decimal separator or triple 000 add the modifier // class `.keypad--decimal` to `.keypad`. // // To toggle the plus/minus sign add the modifier class `.keypad--sign` // to `.keypad`. // // The quick amount pre-generated list is based upon the `.list` Block, // so to indicate a selected item add the CSS constant `is-selected` // to the appropriate `.list-item`. // // --- // // NOTE: The keypad is always in LTR, as values are alaways written in // this direction. // // // // // //
//
//
//
//
Amount
// //
//
//
//
//
// 0 // //
// //
//
//
//
// // // // //
//
// // // // // //
//
// // // // //
//
// // // // //
//
//
//
//
//
    //
      //
    • 1
      • //
    • 10
      • //
    • 100
      • //
    • 500
      • //
    • 1,000
      • //
    • 10,000
      • //
    • 50,000
      • //
    • 100,000
      • //
    //
    //
    //
    //
    //
    //
    //
    // // Styleguide 11.7 ===================================================================== */ /** * 1. Keypad is always LTR, regardless of language */ .keypad { position: relative; overflow: hidden; background-color: var(--app-content-bg); /* ==================================================================== // Popup ==================================================================== */ /** * 1. Class added during popup creation */ /* ==================================================================== // Display ==================================================================== */ /** * 1. Lift above translated (and also lifted) input-list * 2. Fix a perplexing iOS paint glitch. */ /* ==================================================================== // Input Wrapper ==================================================================== */ /** * 1. Make very sure that only one set of inputs are shown at a time */ /** * 1. Suppress 'jiggle' when quick amounts list transitions into view * 2. Override strut as keypad is hardcoded to LTR (and RTL introduces * unwanted margins) */ /** * 1. Color added for interactive states */ /* ==================================================================== // Decimal Mode ==================================================================== */ /** * 1. Toggle period/triple zero button */ /* ==================================================================== // Sign Mode ==================================================================== */ /** * 1. Toggle period/triple zero button */ /* ==================================================================== // Quick Amounts ==================================================================== */ /** * 1. Obscure keypad inputs when amounts scrollview rubber bands */ } .keypad-popup { z-index: 1300; } .keypad-display { position: relative; padding-bottom: 2px; z-index: 2; color: var(--input-color); border-bottom: 1px solid var(--app-hairline); /** * 1. Override base .form-control styles * 2. Clip text selection */ } .ios .keypad-display { transform: translateZ(0); } .keypad-display-toggle { position: absolute; top: 0; right: -4px; height: 100%; } .keypad-display--only .keypad-display-toggle { display: none; } .keypad-display-val { height: 100%; padding-right: 30px; font-size: 20px; line-height: 3rem; font-weight: bold; overflow: hidden; transition-property: background-color, border-color; transition-duration: 500ms; } .keypad-display--only .keypad-display-val { padding-right: 8px; } .keypad-display-val.t-long { font-size: 14px; } .keypad-display-val.off-val { color: var(--input-placeholder-color); font-style: italic; } .keypad-display-val.in-use span:last-child { border-left: 1px solid var(--app-color); margin-left: -1px; } .keypad-display-val .t-select { padding: 0 2px; } .keypad-input { overflow: hidden; } .keypad-input-keys { transform: translateZ(0); } .keypad-input-keys > .grid-cell { margin-left: 0 !important; } .keypad-input-keys > .grid-cell:not(:last-child) { margin-right: 8px; } .keypad-btn { width: 100%; margin-top: 4px; height: 40px; padding: 0; text-transform: uppercase; font-size: 20px; line-height: 3rem; border-bottom: 1px solid transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; /** * 1. By default display the decimal seperator and hide sign btn */ } .keypad-btn--ok { height: 84px; /** * Override for height of aurora button */ } .keypad-btn--ok.keypad-btn.btn--aurora.btn--tiny { height: calc(2rem * 2 + 4px); } .keypad-btn--ok.keypad-btn.btn--aurora.btn--small { height: calc(3rem * 2 + 4px); } .keypad-btn--ok.keypad-btn.btn--aurora.btn--medium { height: calc(3.75rem * 2 + 4px); } .keypad-btn--off { margin-top: 0; width: 100%; height: 36px; font-size: 14px; line-height: 2rem; } .keypad-btn[data-fn='triple-0'], .keypad-btn[data-fn='plusminus'] { display: none; } .keypad--decimal .keypad-btn[data-fn='triple-0'] { display: block; } .keypad--decimal .keypad-btn[data-fn='delimiter'] { display: none; } .keypad--sign .keypad-btn--ok { height: 40px; /** * Override for height of aurora button */ } .keypad--sign .keypad-btn--ok.btn--aurora.btn--medium { height: 3.75rem; } .keypad--sign .keypad-btn--ok.btn--aurora.btn--small { height: 3rem; } .keypad--sign .keypad-btn--ok.btn--aurora.btn--tiny { height: 2rem; } .keypad--sign .keypad-btn[data-fn='plusminus'] { display: block; } .keypad-input-amounts { z-index: 1; position: absolute; left: 0; bottom: 0; right: 0; top: 0; transition-property: transform; transition-duration: 200ms; transition-timing-function: ease-in; transform: translateY(-100%); background-color: var(--app-content-bg); } .keypad-input-amounts .list { text-align: right; text-align: end; font-size: 20px; line-height: 3rem; } .keypad--amounts .keypad-input-amounts { transform: translateY(0); } .keypad-input-amounts .is-selected:before { color: var(--app-inverse-color); } /* ==================================================================== // Tab // // General tabs Control for showing content selectively based on user // choice. // // Like the majority of UI entities in OpenCSS, `.tab` expand to fill // their parent containers. THey in turn provide the size constraints for // OpenCSS UI entities - primarily Components - and therefore expect a // Grid Entity (`.grid-cell` or `.grid` Block) as the _immediate_ child // within each `.tabpanel-pane`. If the direct descendent's are not at least // a `.grid-cell`, the content is broken in IE10. // // Tab panes only provide a container for content, they do not hide content // which overflows its bounds. Components housed inside of `.tabpanel-pane` // items are responsible for respecting and responding to the boundaries // of the pane and overflowing/scrolling their contents (as a Scrollview) // where appropriate. Content is also responsible for adding appropriate // padding to itself (e.g. `.sheet-body`). // // For performance reasons, the JS which supervises the control only // includes one `.tabpanel-pane` in the DOM at a time (to keep the tree pruned). // Ordinarily multiple instances of this are peers within the DOM. // // Tabs also support "action buttons" to hook-up behaviours for the shown // content (e.g. settings), and also optional Trading Floor branding. Also, // as with `.btn`s, tab links only support text _or_ icons, but not both. // // `tabpanel--panel` expects `tabpanel-header` and `tabpanel-content` as _immediate_ descendants // in order to correctly receive styles. // // --- // // NOTE: Active tabs use `.active`, rather than the CSS constant `.is-active`. // This is a hangover from Spine and will be addressed at some point. // // // // Markup: //
    //
    //
    //
      //
    • Active tab link
      • //
    • Tab link
      • //
    • // //
      • //
    //
    //
    //
    //
    //
    //

    TAB CONTENT - SCROLLVIEW

    //
    //
    //
    //
    //
    //
    // // .tabpanel--inset - Inset the tab link labels so they are not flush to the edge. // .tabpanel--panel - Add a frame around the Control. // .tabpanel--sized - Explicitly size the control rather than delegating to flexbox. // // Styleguide 11.5 ===================================================================== */ /** * 1. Ensure the links dropshadow is cropped left and right. */ .tabpanel { overflow: hidden; /** * 1. Ensure tabs are touch friendly size. Also helps smooth out * differences between Tab Panel heights. * 2. Center text vertically */ /* ==================================================================== // Tab Links ==================================================================== */ /* ==================================================================== // Content Pane ==================================================================== */ /** * 1. Constrain width to size of tab content */ /* ==================================================================== // Inset Modifier ==================================================================== */ /* ==================================================================== // Panel Tab Modifier ==================================================================== */ /* ==================================================================== // Sized Tab Modifier ==================================================================== */ /** * 1. Ensure tabs fill container * 2. Enable any z-index rules to work * 3. Allow for height calculation so that scrolling works in IE11 * 4. Prevent inline links from overlapping with tab content * 5. Account for .tabpanel-header borders */ /* ==================================================================== // Compact Tab Modifier ==================================================================== */ /** * 1. Account for .tabpanel-header borders */ /* ==================================================================== // Joined Footer Modifier ==================================================================== */ /** * * 1. If var(--tabs-frame-border) is > 0 then the border overlaps with the footer, * so make it so the panel and the footer are not visually separated by the * panel's border. * 2. Modify height of content based on tabs component height */ } .tabpanel.is-hidden { display: none; } .tabpanel-header { border-top: 1px solid var(--app-hairline); border-bottom: 1px solid var(--app-hairline); } .tabpanel-pane .tabpanel-header { padding: 0 8px; } .tabpanel-links { white-space: nowrap; list-style-type: none; min-height: 20px; line-height: 20px; font-weight: bold; } .tabpanel-links.is-hidden { display: none; } .tabpanel-content.show-disclaimer { position: relative; } .tabpanel-link { position: relative; padding: 0 8px; color: var(--tabs-inactive-color); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; /* ==================================================================== // Trading Floor Branding ==================================================================== */ } .tabpanel-link.is-hidden { display: none; } .tabpanel-link.t-end, .tabpanel-link:last-child { padding-right: 0; } .tabpanel-link:first-child { padding-left: 0; } .tabpanel-link.active { color: var(--tabs-active-color); } .tabpanel-link.active.t-action { color: var(--app-link-color); } .tabpanel-link--btn { cursor: default; border-bottom: 0; /** * 1. Center vertically */ } .tabpanel-link--btn.is-hidden { display: none; } .tabpanel-link--btn > .btn { margin-top: -5px; } .tabpanel-link--icon.active { padding-right: calc(var(--app-icon-size) + var(--app-icon-runin-gutter)); } .tabpanel-link--branding { cursor: default; } .tabpanel-link--branding:hover { color: var(--tabs-inactive-color); } .tabpanel-link--branding .tabpanel-brand { vertical-align: sub; padding-right: 8px; font-size: x-small; } .tabpanel-pane { max-width: 100%; overflow: hidden; } .tabpanel-pane.is-loading { display: none; } .tabpanel--inset .tabpanel-links { padding: 0 8px; } .tabpanel--panel > .tabpanel-header { border: none; background-color: var(--tabs-frame-bg); padding-left: 8px; padding-right: 8px; } .tabpanel--panel > .tabpanel-header--sub { border-bottom: 1px solid var(--tabs-sub-frame-border); padding: 0; } .tabpanel--panel > .tabpanel-header .tabpanel-links { max-width: 100%; background-color: var(--tabs-frame-bg); } .tabpanel--panel > .tabpanel-content { padding: 8px; padding-top: 0; background-color: var(--tabs-frame-bg); } .tabpanel--panel > .tabpanel-content > .tabpanel-pane { background-image: linear-gradient( var(--background-gradient-default-1), var(--background-gradient-default-2), var(--background-gradient-default-2), var(--background-gradient-default-1) ); background-color: var(--background-gradient-default-1); } .tabpanel--panel.tabpanel--sized > .tabpanel-content { height: calc(100% - 20px); } .tabpanel--sized { height: 100%; width: 100%; position: relative; } .ie11 .grid--scroll .tabpanel--sized { height: auto; } .tabpanel--sized .tabpanel-links { height: 20px; line-height: 20px; overflow: hidden; } .tabpanel--sized .tabpanel-link { display: inline-block; } .tabpanel--sized .tabpanel-link.t-end { float: right; } .tabpanel--sized .tabpanel-content { height: calc(100% - 22px); } .tabpanel--sized .tabpanel-pane { height: 100%; } .tabpanel--compact { border: none; } .tabpanel--compact .tabpanel-header { border-bottom: 1px solid var(--app-hairline); border-top: 1px solid var(--app-hairline); height: 20px; } .tabpanel--compact .tabpanel-header .tabpanel-links { height: 18px; line-height: 18px; min-height: 18px; } .tabpanel--compact .tabpanel-header .tabpanel-link { line-height: 18px; } .tabpanel--compact .tabpanel-content { padding: 0; } .tabpanel--compact .tabpanel-content .tabpanel-pane { border: none; } .tabpanel--joined-footer { border-bottom-color: var(--footer-bg); } /* * TAB BLOCK (DESKTOP EXTENSIONS) * ===================================================================== */ /** * 1. Ensure the links dropshadow is cropped left and right. */ .tabpanel-links { min-height: inherit; } .tabpanel-links-nav:hover { color: var(--tabs-active-color); background-color: transparent; } .tabpanel-link { line-height: 20px; transition-property: color; transition-duration: 200ms; /* ================================================================= =Trading Floor Branding =============================================================== */ } .tabpanel-link--btn { /** * 1. Ensure it doesn't blow the line-height of the tabs */ } .tabpanel-link--btn > .btn { margin-bottom: -3px; } .tabpanel-link:hover { color: var(--tabs-active-color); } .tabpanel-link:hover.t-action { color: var(--app-link-color); } .tabpanel-link--branding .tabpanel-brand { vertical-align: inherit; } /* * TAB BLOCK (PRO EXTENSIONS) * ===================================================================== */ .tabpanel { /* ==================================================================== =Compact Tab Modifier ==================================================================== */ } .tabpanel-links { font-size: 14px; line-height: 2rem; } .tabpanel--panel > .tabpanel-header { /** * 1. Add some space so the user still has space to drag-out the entire * tabpanel-panel if the tabs are overflowing. * 2. Remove space between edge of window and Back button that is displayed on tabpanel-header */ border-width: 0; padding-right: 20px; padding-left: 0; background-color: var(--pro-tabs-panel-header-bg); /** * 1. We add border to the tabpanel-filler because we want border-bottom on inactive tabs * Applying it to tabpanel-header would include the active tab as well */ /** * 1. Ensure that tabpanel-links vertically expand regardless of contents, * e.g. whether a "burger menu" is visible or not. * 2. Prevent width of tab link being reduced too far by width of container. */ } .tabpanel--panel > .tabpanel-header .tabpanel-links { flex: 0 1 auto; position: relative; padding: 0; white-space: nowrap; height: 20px; line-height: 20px; background-color: transparent; font-size: 12px; line-height: 2rem; /** * 1. Override default heights of button so that it depends upon overflowable * child height. */ } .tabpanel--panel > .tabpanel-header .tabpanel-links-nav { padding: 0 2px; border-bottom: 1px solid var(--pro-tabs-link-border); height: auto; } .tabpanel--panel > .tabpanel-header .tabpanel-links-nav.is-disabled { cursor: default; } .tabpanel--panel > .tabpanel-header .tabpanel-links-nav--back { border-right: 1px solid var(--pro-tabs-link-border); } .tabpanel--panel > .tabpanel-header .tabpanel-links-nav--fwd { border-left: 1px solid var(--pro-tabs-link-border); border-right: 1px solid var(--pro-tabs-link-border); } .tabpanel--panel > .tabpanel-header .tabpanel-filler { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; border-bottom: 1px solid var(--pro-tabs-link-border); } .tabpanel--panel > .tabpanel-header .tabpanel-link { margin: 0; height: 100%; line-height: 20px; min-width: 40px; padding: 0; transition-property: color, background-color; transition-duration: 200ms, 200ms; /** * 1. drop the text a bit */ /** * 1. Override grid behaviour that ensures children observe * flex-child parent widths and allow them to grow. */ /** * 1. Hide the tabpanel-link-menu unless it's active (see below) */ /** * 1. Rendering hack - when line-height is equal font-size, in reality there is about 1px spare space * when user is resizing PRO window, the content can be displaced by this space 1px up and down. * To prevent the issue, line-height should be 1px smaller * 2. Visual adjustment related with 1. */ /** * 1. Show the tabpanel-link-menu when the tab is active */ } .tabpanel--panel > .tabpanel-header .tabpanel-link:not(.tabpanel-link--btn) { padding-left: 6px; border-right: 1px solid var(--pro-tabs-link-border); padding-top: 2px; padding-bottom: 2px; line-height: 16px; } .tabpanel--panel > .tabpanel-header .tabpanel-link--menu .btn { margin-left: 16px; } .tabpanel--panel > .tabpanel-header .tabpanel-link:not(.tabpanel-link--menu) { padding-right: 16px; } .tabpanel--panel > .tabpanel-header .tabpanel-link--btn .btn { padding: 4.5px 2px; } .tabpanel--panel > .tabpanel-header .tabpanel-link--btn .btn--compact { padding: 2px 2px; } .tabpanel--panel > .tabpanel-header .tabpanel-link-children, .tabpanel--panel > .tabpanel-header .tabpanel-link-menu, .tabpanel--panel > .tabpanel-header .tabpanel-link-icon, .tabpanel--panel > .tabpanel-header .tabpanel-link-text { width: auto; } .tabpanel--panel > .tabpanel-header .tabpanel-link-menu { display: flex; visibility: hidden; } .tabpanel--panel > .tabpanel-header .tabpanel-link-icon { height: 17px; padding-right: 4px; } .tabpanel--panel > .tabpanel-header .tabpanel-link-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; line-height: 13px; padding-top: 1px; } .tabpanel--panel > .tabpanel-header .tabpanel-link.active { background-color: var(--tabs-pro-frame-bg); } .tabpanel--panel > .tabpanel-header .tabpanel-link.active .tabpanel-link-menu { visibility: visible; } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-blue .tabpanel-link-menu__icon { color: var(--app-link-color); } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-yellow .tabpanel-link-menu__icon { color: #fd0; } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-red .tabpanel-link-menu__icon { color: #d03; } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-green .tabpanel-link-menu__icon { color: #4f2; } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-off .tabpanel-link-menu__icon { color: var(--gray-mid); } .tabpanel--panel > .tabpanel-header .tabpanel-link.linking-all .tabpanel-link-menu__icon { color: var(--text-color-default); } .tabpanel--panel > .tabpanel-header .tabpanel-link.is-hidden { display: none; } .tabpanel--panel > .tabpanel-content { padding: 4px; background-color: var(--tabs-pro-frame-bg); } .tabpanel-menu { /** * 1. Override min-width so linking key fits in */ } .tabpanel-menu-sheet { min-width: 200px; } .tabpanel-menu-linking-key { float: right; width: 10px; height: 10px; } .tabpanel-menu-linking-key.linking-blue { color: var(--app-link-color); } .tabpanel-menu-linking-key.linking-yellow { color: #fd0; } .tabpanel-menu-linking-key.linking-red { color: #d03; } .tabpanel-menu-linking-key.linking-green { color: #4f2; } .tabpanel-menu-linking-key.linking-off { color: var(--gray-mid); } .tabpanel-menu-linking-key.linking-all { color: var(--text-color-default); } .tabpanel--compact .tabpanel-header .tabpanel-links { height: 20px; line-height: 20px; min-height: 20px; } /* ==================================================================== // Pro Combo Input ==================================================================== */ .procomboinput { height: 32px; background: var(--procomboinput-bg); /** * 1. Reset and