@layer reset, utility, library, theme, assets;
@layer library {
:root {
--p500-global-focus-ring-color: var(--outline-main)
}
}
@layer theme {
@layer typography {
:root {
--ds-font-family-plain: "Roboto", "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif-light, sans-serif;
--ds-font-weight-regular: 400;
--ds-font-weight-medium: 500;
--ds-font-weight-bold: 600;
--ds-headline-large-font-size: 2rem;
--ds-headline-large-line-height: 1.0625;
--ds-headline-large-letter-spacing: 0;
--ds-headline-large-font-family: var(--ds-font-family-plain);
--ds-headline-large-font-weight: var(--ds-font-weight-medium);
--ds-headline-medium-font-size: 1.75rem;
--ds-headline-medium-line-height: 1.142857;
--ds-headline-medium-letter-spacing: 0;
--ds-headline-medium-font-family: var(--ds-font-family-plain);
--ds-headline-medium-font-weight: var(--ds-font-weight-medium);
--ds-headline-small-font-size: 1.5rem;
--ds-headline-small-line-height: 1.083334;
--ds-headline-small-letter-spacing: 0;
--ds-headline-small-font-family: var(--ds-font-family-plain);
--ds-headline-small-font-weight: var(--ds-font-weight-medium);
--ds-title-large-font-size: 1.375rem;
--ds-title-large-line-height: 1.09091;
--ds-title-large-letter-spacing: 0;
--ds-title-large-font-family: var(--ds-font-family-plain);
--ds-title-large-font-weight: var(--ds-font-weight-regular);
--ds-title-medium-font-size: 1rem;
--ds-title-medium-line-height: 1.5;
--ds-title-medium-letter-spacing: .15px;
--ds-title-medium-font-family: var(--ds-font-family-plain);
--ds-title-medium-font-weight: var(--ds-font-weight-medium);
--ds-title-small-font-size: .875rem;
--ds-title-small-line-height: 1.42857;
--ds-title-small-letter-spacing: .1px;
--ds-title-small-font-family: var(--ds-font-family-plain);
--ds-title-small-font-weight: var(--ds-font-weight-medium);
--ds-label-large-font-size: .875rem;
--ds-label-large-line-height: 1.42857;
--ds-label-large-letter-spacing: .1px;
--ds-label-large-font-family: var(--ds-font-family-plain);
--ds-label-large-font-weight: var(--ds-font-weight-medium);
--ds-label-medium-font-size: .75rem;
--ds-label-medium-line-height: 1.333333;
--ds-label-medium-letter-spacing: .5px;
--ds-label-medium-font-family: var(--ds-font-family-plain);
--ds-label-medium-font-weight: var(--ds-font-weight-medium);
--ds-label-small-font-size: .6875rem;
--ds-label-small-line-height: 1.45455;
--ds-label-small-letter-spacing: .5px;
--ds-label-small-font-family: var(--ds-font-family-plain);
--ds-label-small-font-weight: var(--ds-font-weight-medium);
--ds-body-large-font-size: 1rem;
--ds-body-large-line-height: 1.5;
--ds-body-large-letter-spacing: .5px;
--ds-body-large-font-family: var(--ds-font-family-plain);
--ds-body-large-font-weight: var(--ds-font-weight-regular);
--ds-body-medium-font-size: .875rem;
--ds-body-medium-line-height: 1.42857;
--ds-body-medium-letter-spacing: .25px;
--ds-body-medium-font-family: var(--ds-font-family-plain);
--ds-body-medium-font-weight: var(--ds-font-weight-regular);
--ds-body-small-font-size: .75rem;
--ds-body-small-line-height: 1.333333;
--ds-body-small-letter-spacing: .4px;
--ds-body-small-font-family: var(--ds-font-family-plain);
--ds-body-small-font-weight: var(--ds-font-weight-regular);
--ds-caption-large-font-size: .6875rem;
--ds-caption-large-line-height: 1.45455;
--ds-caption-large-letter-spacing: .4px;
--ds-caption-large-font-family: var(--ds-font-family-plain);
--ds-caption-large-font-weight: var(--ds-font-weight-regular);
--ds-caption-medium-font-size: .625rem;
--ds-caption-medium-line-height: 1.4;
--ds-caption-medium-letter-spacing: .5px;
--ds-caption-medium-font-family: var(--ds-font-family-plain);
--ds-caption-medium-font-weight: var(--ds-font-weight-regular);
--ds-caption-small-font-size: .5625rem;
--ds-caption-small-line-height: 1.44444;
--ds-caption-small-letter-spacing: .5px;
--ds-caption-small-font-family: var(--ds-font-family-plain);
--ds-caption-small-font-weight: var(--ds-font-weight-regular);
--ds-headline-bold-large-font-size: 2rem;
--ds-headline-bold-large-line-height: 1.0625;
--ds-headline-bold-large-letter-spacing: 0;
--ds-headline-bold-large-font-family: var(--ds-font-family-plain);
--ds-headline-bold-large-font-weight: var(--ds-font-weight-bold);
--ds-headline-bold-medium-font-size: 1.75rem;
--ds-headline-bold-medium-line-height: 1.142857;
--ds-headline-bold-medium-letter-spacing: 0;
--ds-headline-bold-medium-font-family: var(--ds-font-family-plain);
--ds-headline-bold-medium-font-weight: var(--ds-font-weight-bold);
--ds-headline-bold-small-font-size: 1.5rem;
--ds-headline-bold-small-line-height: 1.083334;
--ds-headline-bold-small-letter-spacing: 0;
--ds-headline-bold-small-font-family: var(--ds-font-family-plain);
--ds-headline-bold-small-font-weight: var(--ds-font-weight-bold);
--ds-title-bold-large-font-size: 1.375rem;
--ds-title-bold-large-line-height: 1.09091;
--ds-title-bold-large-letter-spacing: 0;
--ds-title-bold-large-font-family: var(--ds-font-family-plain);
--ds-title-bold-large-font-weight: var(--ds-font-weight-bold);
--ds-title-bold-medium-font-size: 1rem;
--ds-title-bold-medium-line-height: 1.5;
--ds-title-bold-medium-letter-spacing: .15px;
--ds-title-bold-medium-font-family: var(--ds-font-family-plain);
--ds-title-bold-medium-font-weight: var(--ds-font-weight-bold);
--ds-title-bold-small-font-size: .875rem;
--ds-title-bold-small-line-height: 1.42857;
--ds-title-bold-small-letter-spacing: .1px;
--ds-title-bold-small-font-family: var(--ds-font-family-plain);
--ds-title-bold-small-font-weight: var(--ds-font-weight-bold);
--ds-label-bold-large-font-size: .875rem;
--ds-label-bold-large-line-height: 1.42857;
--ds-label-bold-large-letter-spacing: .1px;
--ds-label-bold-large-font-family: var(--ds-font-family-plain);
--ds-label-bold-large-font-weight: var(--ds-font-weight-bold);
--ds-label-bold-medium-font-size: .75rem;
--ds-label-bold-medium-line-height: 1.333333;
--ds-label-bold-medium-letter-spacing: .5px;
--ds-label-bold-medium-font-family: var(--ds-font-family-plain);
--ds-label-bold-medium-font-weight: var(--ds-font-weight-bold);
--ds-label-bold-small-font-size: .6875rem;
--ds-label-bold-small-line-height: 1.45455;
--ds-label-bold-small-letter-spacing: .5px;
--ds-label-bold-small-font-family: var(--ds-font-family-plain);
--ds-label-bold-small-font-weight: var(--ds-font-weight-bold);
--ds-body-bold-large-font-size: 1rem;
--ds-body-bold-large-line-height: 1.5;
--ds-body-bold-large-letter-spacing: .5px;
--ds-body-bold-large-font-family: var(--ds-font-family-plain);
--ds-body-bold-large-font-weight: var(--ds-font-weight-bold);
--ds-body-bold-medium-font-size: .875rem;
--ds-body-bold-medium-line-height: 1.42857;
--ds-body-bold-medium-letter-spacing: .25px;
--ds-body-bold-medium-font-family: var(--ds-font-family-plain);
--ds-body-bold-medium-font-weight: var(--ds-font-weight-bold);
--ds-body-bold-small-font-size: .75rem;
--ds-body-bold-small-line-height: 1.333333;
--ds-body-bold-small-letter-spacing: .4px;
--ds-body-bold-small-font-family: var(--ds-font-family-plain);
--ds-body-bold-small-font-weight: var(--ds-font-weight-bold);
--ds-caption-bold-large-font-size: .6875rem;
--ds-caption-bold-large-line-height: 1.45455;
--ds-caption-bold-large-letter-spacing: .4px;
--ds-caption-bold-large-font-family: var(--ds-font-family-plain);
--ds-caption-bold-large-font-weight: var(--ds-font-weight-bold);
--ds-caption-bold-medium-font-size: .625rem;
--ds-caption-bold-medium-line-height: 1.4;
--ds-caption-bold-medium-letter-spacing: .5px;
--ds-caption-bold-medium-font-family: var(--ds-font-family-plain);
--ds-caption-bold-medium-font-weight: var(--ds-font-weight-bold);
--ds-caption-bold-small-font-size: .5625rem;
--ds-caption-bold-small-line-height: 1.44444;
--ds-caption-bold-small-letter-spacing: .5px;
--ds-caption-bold-small-font-family: var(--ds-font-family-plain);
--ds-caption-bold-small-font-weight: var(--ds-font-weight-bold)
}
}@layer units {
:root {
--ds-corner-none: 0;
--ds-corner-x-small: .25rem;
--ds-corner-small: .5rem;
--ds-corner-medium: .75rem;
--ds-corner-large: 1rem;
--ds-corner-x-large: 1.5rem;
--ds-corner-xx-large: 2rem;
--ds-corner-full: 62.5rem;
--ds-icon-small: 1rem;
--ds-icon-medium: 1.25rem;
--ds-icon-regular: 1.5rem;
--ds-spacing-none: 0;
--ds-spacing-xx-small: .125rem;
--ds-spacing-x-small: .25rem;
--ds-spacing-small: .5rem;
--ds-spacing-medium: .75rem;
--ds-spacing-large: 1rem;
--ds-spacing-x-large: 1.5rem;
--ds-spacing-xx-large: 2rem;
--ds-spacing-xxx-large: 3rem
}
}
}
@layer library {
@layer typography {
:root {
--p500-font-size-icon-small: var(--ds-icon-small);
--p500-font-size-icon-medium: var(--ds-icon-medium);
--p500-font-size-icon-regular: var(--ds-icon-regular)
}
}
}
@layer library {
@layer button {
:root {
--p500-button-gap: .5rem;
--p500-button-spacing-y: .125rem;
--p500-button-spacing-x: 1.5em;
--p500-button-border-size: 1px;
--p500-button-font-family: var(--ds-font-family-plain);
--p500-button-text-color: var(--on-primary-regular);
--p500-button-border-color: transparent;
--p500-button-bg-color: var(--surface-primary-medium);
--p500-button-bg-image: none;
--p500-button-text-color-hover: var(--on-primary-regular);
--p500-button-border-color-hover: transparent;
--p500-button-bg-color-hover: var(--surface-button-primary-focused);
--p500-button-bg-image-hover: none;
--p500-button-outline-color: none;
--p500-button-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-small-label-font-size: var(--ds-label-small-font-size);
--p500-button-small-label-font-weight: var(--ds-label-small-font-weight);
--p500-button-small-label-line-height: var(--ds-label-small-line-height);
--p500-button-small-label-letter-spacing: var(--ds-label-small-letter-spacing);
--p500-button-medium-label-font-size: var(--ds-label-medium-font-size);
--p500-button-medium-label-font-weight: var(--ds-label-medium-font-weight);
--p500-button-medium-label-line-height: var(--ds-label-medium-line-height);
--p500-button-medium-label-letter-spacing: var(--ds-label-medium-letter-spacing);
--p500-button-large-label-font-size: var(--ds-label-large-font-size);
--p500-button-large-label-font-weight: var(--ds-label-large-font-weight);
--p500-button-large-label-line-height: var(--ds-label-large-line-height);
--p500-button-large-label-letter-spacing: var(--ds-label-large-letter-spacing);
--p500-button-radius: var(--ds-corner-small);
--p500-button-radius-pill: var(--ds-corner-full);
--p500-button-cta-text-color: var(--on-primary-regular);
--p500-button-cta-border-color: transparent;
--p500-button-cta-bg-color: var(--surface-secondary-fixed);
--p500-button-cta-bg-image: linear-gradient(to right, transparent 0%, var(--surface-tertiary-fixed) 100%);
--p500-button-cta-text-color-hover: var(--on-primary-regular);
--p500-button-cta-border-color-hover: transparent;
--p500-button-cta-bg-color-hover: var(--surface-tertiary-fixed);
--p500-button-cta-bg-image-hover: linear-gradient(to right, transparent 0%, var(--surface-tertiary-fixed) 100%);
--p500-button-cta-outline-color: none;
--p500-button-cta-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-primary-text-color: var(--on-primary-regular);
--p500-button-primary-border-color: transparent;
--p500-button-primary-bg-color: var(--surface-primary);
--p500-button-primary-bg-image: none;
--p500-button-primary-text-color-hover: var(--on-primary-regular);
--p500-button-primary-border-color-hover: transparent;
--p500-button-primary-bg-color-hover: var(--surface-button-primary-focused);
--p500-button-primary-bg-image-hover: none;
--p500-button-primary-outline-color: none;
--p500-button-primary-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-secondary-text-color: var(--on-surface-regular);
--p500-button-secondary-border-color: transparent;
--p500-button-secondary-bg-color: var(--surface-button-secondary);
--p500-button-secondary-bg-image: none;
--p500-button-secondary-text-color-hover: var(--on-surface-regular);
--p500-button-secondary-border-color-hover: transparent;
--p500-button-secondary-bg-color-hover: var(--surface-button-secondary-focused);
--p500-button-secondary-bg-image-hover: none;
--p500-button-secondary-outline-color: none;
--p500-button-secondary-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-outline-text-color: var(--on-surface-primary);
--p500-button-outline-border-color: var(--outline-button);
--p500-button-outline-bg-color: transparent;
--p500-button-outline-bg-image: none;
--p500-button-outline-text-color-hover: var(--on-primary-regular);
--p500-button-outline-border-color-hover: var(--surface-tertiary-fixed);
--p500-button-outline-bg-color-hover: var(--surface-tertiary-fixed);
--p500-button-outline-bg-image-hover: none;
--p500-button-outline-outline-color: none;
--p500-button-outline-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-text-text-color: var(--on-surface-regular);
--p500-button-text-border-color: transparent;
--p500-button-text-bg-color: transparent;
--p500-button-text-bg-image: none;
--p500-button-text-text-color-hover: var(--on-surface-regular);
--p500-button-text-border-color-hover: transparent;
--p500-button-text-bg-color-hover: var(--surface-button-secondary-focused);
--p500-button-text-bg-image-hover: none;
--p500-button-text-outline-color: none;
--p500-button-text-outline-color-focus: var(--outline-link-highlighted-focused);
--p500-button-link-text-color: var(--on-surface-link);
--p500-button-link-border-size: 0;
--p500-button-link-border-color: transparent;
--p500-button-link-bg-color: transparent;
--p500-button-link-bg-image: none;
--p500-button-link-text-color-hover: var(--on-surface-link-focused);
--p500-button-link-border-color-hover: transparent;
--p500-button-link-bg-color-hover: transparent;
--p500-button-link-bg-image-hover: none;
--p500-button-link-outline-color: none;
--p500-button-link-outline-color-focus: var(--outline-link-highlighted-focused)
}
}
}
@layer library {
@layer checkbox {
:root {
--p500-checkbox-height: 1.25rem;
--p500-checkbox-font-family: var(--ds-font-family-plain);
--p500-checkbox-label-color: var(--on-surface-regular);
--p500-checkbox-label-font-size: 1rem;
--p500-checkbox-border-size: 1px;
--p500-checkbox-border-radius: var(--ds-corner-x-small);
--p500-checkbox-border-color: var(--outline-medium);
--p500-checkbox-bg-color: var(--surface-main);
--p500-checkbox-bg-color-checked: var(--surface-input-active);
--p500-checkbox-border-color-checked: transparent;
--p500-checkbox-sign-color: var(--on-primary-regular);
--p500-checkbox-disabled-opacity: .5
}
}
}
@layer library {
@layer chip-small {
:root {
--p500-chip-small-block-spacing: var(--ds-spacing-x-small);
--p500-chip-small-inline-spacing: var(--ds-spacing-medium);
--p500-chip-small-has-icon-spacing: var(--ds-spacing-x-small);
--p500-chip-small-gap: var(--ds-spacing-x-small);
--p500-chip-small-border-radius: var(--ds-corner-small);
--p500-chip-small-bg-color: var(--surface-container-active-extra-light);
--p500-chip-small-color: var(--on-surface-primary-medium);
--p500-chip-small-border-size: 0;
--p500-chip-small-border-color: transparent;
--p500-chip-small-label-font-weight: var(--ds-label-bold-small-font-weight);
--p500-chip-small-label-font-size: var(--ds-label-bold-small-font-size);
--p500-chip-small-label-line-height: normal;
--p500-chip-small-label-font-family: var(--ds-label-bold-small-font-family);
--p500-chip-small-label-letter-spacing: var(--ds-label-bold-small-letter-spacing);
--p500-chip-small-primary-soft-bg-color: var(--surface-container-active-extra-light);
--p500-chip-small-primary-soft-color: var(--on-surface-primary-medium);
--p500-chip-small-primary-soft-border-color: transparent;
--p500-chip-small-primary-soft-border-size: 0;
--p500-chip-small-primary-soft-hover-bg-color: var(--surface-container-active-light);
--p500-chip-small-primary-soft-focus-bg-color: var(--surface-container-active-light-focused);
--p500-chip-small-primary-soft-active-bg-color: var(--surface-container-active-light-focused);
--p500-chip-small-primary-soft-disabled-bg-color: var(--surface-disabled-light);
--p500-chip-small-primary-soft-disabled-color: var(--on-surface-disabled);
--p500-chip-small-primary-soft-disabled-border-color: transparent;
--p500-chip-small-primary-hollow-bg-color: var(--surface-container-active-extra-light);
--p500-chip-small-primary-hollow-color: var(--on-surface-primary-medium);
--p500-chip-small-primary-hollow-border-color: var(--outline-primary-light);
--p500-chip-small-primary-hollow-border-size: 1px;
--p500-chip-small-primary-hollow-hover-bg-color: var(--surface-container-active-light);
--p500-chip-small-primary-hollow-focus-bg-color: var(--surface-container-active-light-focused);
--p500-chip-small-primary-hollow-active-bg-color: var(--surface-container-active-light-focused);
--p500-chip-small-primary-hollow-disabled-bg-color: transparent;
--p500-chip-small-primary-hollow-disabled-color: var(--on-surface-disabled);
--p500-chip-small-primary-hollow-disabled-border-color: var(--outline-light);
--p500-chip-small-primary-solid-bg-color: var(--surface-primary);
--p500-chip-small-primary-solid-color: var(--on-primary-regular);
--p500-chip-small-primary-solid-border-color: transparent;
--p500-chip-small-primary-solid-border-size: 0;
--p500-chip-small-primary-solid-hover-bg-color: var(--surface-primary-medium);
--p500-chip-small-primary-solid-focus-bg-color: var(--surface-container-active);
--p500-chip-small-primary-solid-active-bg-color: var(--surface-container-active);
--p500-chip-small-primary-solid-disabled-bg-color: var(--surface-disabled);
--p500-chip-small-primary-solid-disabled-color: var(--on-surface-disabled);
--p500-chip-small-primary-solid-disabled-border-color: transparent
}
}
}
@layer library {
@layer divider {
:root {
--trustProequity-divider-block-spacing: var(--ds-spacing-none);
--trustProequity-divider-text-block-spacing: var(--ds-spacing-x-small);
--trustProequity-divider-text-inline-spacing: var(--ds-spacing-medium);
--trustProequity-divider-line-min-horizontal-size: 1rem;
--trustProequity-divider-line-type-solid: solid;
--trustProequity-divider-line-type-dashed: dashed;
--trustProequity-divider-line-size: 1px;
--trustProequity-divider-line-color: var(--outline-light);
--trustProequity-divider-font-family: var(--ds-caption-medium-font-family);
--trustProequity-divider-font-size: var(--ds-caption-medium-font-size);
--trustProequity-divider-font-weight: var(--ds-caption-medium-font-weight);
--trustProequity-divider-line-height: var(--ds-caption-medium-line-height);
--trustProequity-divider-letter-spacing: var(--ds-caption-medium-letter-spacing);
--trustProequity-divider-text-color: var(--on-surface-light);
--trustProequity-divider-inset-none: var(--ds-spacing-none);
--trustProequity-divider-inset-x-small: var(--ds-spacing-x-small);
--trustProequity-divider-inset-small: var(--ds-spacing-small);
--trustProequity-divider-inset-medium: var(--ds-spacing-medium);
--trustProequity-divider-inset-large: var(--ds-spacing-large);
--trustProequity-divider-inset-x-large: var(--ds-spacing-x-large)
}
}
}
@layer library {
@layer icon {
:root {
--p500-icon-default-font-size-icon: var(--p500-font-size-icon-regular);
--p500-icon-font-family: var(--icomoon-font-family);
--p500-icon-badge-text-color: var(--on-primary-regular);
--p500-icon-badge-bg: var(--surface-primary-medium);
--p500-icon-badge-alert-text-color: var(--on-primary-regular);
--p500-icon-badge-alert-bg: var(--surface-alert);
--p500-icon-badge-success-text-color: var(--on-primary-regular);
--p500-icon-badge-success-bg: var(--surface-success);
--p500-icon-badge-warning-text-color: var(--on-primary-regular);
--p500-icon-badge-warning-bg: var(--surface-warning)
}
}
}
@layer library {
@layer progress-spinner {
:root {
--p500-circular-progress-color-primary: var(--surface-primary);
--p500-circular-progress-color-secondary: var(--surface-container-primary-light)
}
}
}
@layer library {
@layer radio {
:root {
--p500-radio-font-family: var(--ds-font-family-plain);
--p500-radio-label-color: var(--on-surface-regular);
--p500-radio-label-font-size: 1rem;
--p500-radio-size: 1.25rem;
--p500-radio-bg-color: var(--surface-main);
--p500-radio-border-size: 1px;
--p500-radio-border-radius: var(--ds-corner-full);
--p500-radio-border-color: var(--outline-medium);
--p500-radio-border-color-checked: var(--surface-input-active);
--p500-radio-bullet-size: .5rem;
--p500-radio-disabled-opacity: .5
}
}
}
@layer library {
@layer radio-group {
:root {
--p500-radio-group-row-spacing: var(--ds-spacing-small);
--p500-radio-group-column-spacing: var(--ds-spacing-large)
}
}
}
@layer library {
@layer snackbar {
:root {
--p500-snackbar-font-family: var(--ds-font-family-plain);
--p500-snackbar-z-index: 8000;
--p500-snackbar-font-size: 1rem;
--p500-snackbar-text-color: var(--on-primary-regular);
--p500-snackbar-bg-color: var(--surface-container-primary-medium-fixed);
--p500-snackbar-icon-color: var(--on-primary-regular);
--snackbar-close-button-size: 1.5rem;
--p500-snackbar-button-text-color: var(--on-primary-regular);
--p500-snackbar-border-size: 0;
--p500-snackbar-border-color: transparent;
--p500-snackbar-border-radius: var(--ds-corner-none);
--p500-snackbar-shadow-color: #00000080;
--p500-snackbar-info-text-color: var(--on-primary-regular);
--p500-snackbar-info-bg-color: var(--surface-container-primary-medium-fixed);
--p500-snackbar-info-border-size: 0;
--p500-snackbar-info-border-color: transparent;
--p500-snackbar-info-button-text-color: var(--on-primary-regular);
--p500-snackbar-neutral-bg-color: var(--surface-main);
--p500-snackbar-neutral-text-color: var(--on-surface-primary);
--p500-snackbar-neutral-border-size: 2px;
--p500-snackbar-neutral-icon-color: var(--on-surface-primary);
--p500-snackbar-neutral-border-color: var(--outline-primary);
--p500-snackbar-neutral-button-text-color: var(--on-surface-primary);
--p500-snackbar-alert-text-color: var(--on-primary-regular);
--p500-snackbar-alert-bg-color: var(--surface-alert);
--p500-snackbar-alert-border-size: 0;
--p500-snackbar-alert-border-color: transparent;
--p500-snackbar-alert-button-text-color: var(--on-primary-regular);
--p500-snackbar-warning-text-color: var(--on-primary-regular);
--p500-snackbar-warning-bg-color: var(--surface-warning);
--p500-snackbar-warning-border-size: 0;
--p500-snackbar-warning-border-color: transparent;
--p500-snackbar-warning-button-text-color: var(--on-primary-regular);
--p500-snackbar-success-text-color: var(--on-primary-regular-invert);
--p500-snackbar-success-bg-color: var(--surface-success);
--p500-snackbar-success-border-size: 0;
--p500-snackbar-success-border-color: transparent;
--p500-snackbar-success-button-text-color: var(--on-primary-regular-invert)
}
}
}
.snackbar-stack {
bottom: 2rem;
display: flex;
flex-direction: column;
gap: .625rem;
inset-inline: 0;
margin: auto;
position: fixed;
width: min(480px, 90%)
}
@layer library {
@layer stepper-item {
:root {
--p500-stepper-item-block-spacing: var(--ds-spacing-small);
--p500-stepper-item-gap: var(--ds-spacing-x-small);
--p500-stepper-item-border-radius: var(--ds-corner-medium);
--p500-stepper-item-content-background: transparent;
--p500-stepper-item-hover-content-background: var(--surface-container-main);
--p500-stepper-item-content-x-gap: var(--ds-spacing-none);
--p500-stepper-item-content-y-gap: var(--ds-spacing-none);
--p500-stepper-item-content-inline-spacing: var(--ds-spacing-medium) var(--ds-spacing-small);
--p500-stepper-item-content-block-spacing: var(--ds-spacing-xx-small) var(--ds-spacing-x-small);
--p500-stepper-item-headline-color: var(--on-surface-primary);
--p500-stepper-item-headline-font-family: var(--ds-body-bold-large-font-family);
--p500-stepper-item-headline-font-size: var(--ds-body-bold-large-font-size);
--p500-stepper-item-headline-font-weight: var(--ds-body-bold-large-font-weight);
--p500-stepper-item-headline-line-height: var(--ds-body-bold-large-line-height);
--p500-stepper-item-headline-letter-spacing: var(--ds-body-bold-large-letter-spacing);
--p500-stepper-item-supportive-text-color: var(--on-surface-light);
--p500-stepper-item-supportive-text-font-family: var(--ds-body-medium-font-family);
--p500-stepper-item-supportive-text-font-size: var(--ds-body-medium-font-size);
--p500-stepper-item-supportive-text-font-weight: var(--ds-body-medium-font-weight);
--p500-stepper-item-supportive-text-letter-spacing: var(--ds-body-medium-letter-spacing);
--p500-stepper-item-supportive-text-line-height: var(--ds-body-medium-line-height);
--p500-stepper-item-icon-size: var(--ds-icon-regular);
--p500-stepper-item-connector-size: .125rem;
--p500-stepper-item-connector-bg-color: var(--outline-light);
--p500-stepper-item-leading-elm-size: 2.25rem;
--p500-stepper-item-leading-elm-border-size: .125rem;
--p500-stepper-item-leading-elm-border-color: transparent;
--p500-stepper-item-leading-elm-outline-color: var(--outline-tertiary-light);
--p500-stepper-item-leading-elm-background-color: transparent;
--p500-stepper-item-leading-elm-font-family: var(--ds-body-bold-large-font-family);
--p500-stepper-item-leading-elm-font-size: var(--ds-body-bold-large-font-size);
--p500-stepper-item-leading-elm-font-weight: var(--ds-body-bold-large-font-weight);
--p500-stepper-item-leading-elm-line-height: var(--ds-body-bold-large-line-height);
--p500-stepper-item-leading-elm-letter-spacing: var(--ds-body-bold-large-letter-spacing);
--p500-stepper-item-leading-elm-text-color: var(--on-surface-primary);
--p500-stepper-item-trailing-element-spacing: var(--ds-spacing-xx-small) var(--ds-spacing-none);
--p500-stepper-item-trailing-element-color: var(--on-surface-light);
--p500-stepper-item-regular-headline-color: var(--on-surface-primary);
--p500-stepper-item-regular-leading-elm-background-color: transparent;
--p500-stepper-item-regular-leading-elm-outline-color: var(--outline-tertiary-light);
--p500-stepper-item-regular-leading-elm-text-color: var(--on-surface-primary);
--p500-stepper-item-positive-headline-color: var(--on-surface-primary-extra-light);
--p500-stepper-item-positive-leading-elm-background-color: var(--surface-success-light);
--p500-stepper-item-positive-leading-elm-outline-color: var(--outline-success-light);
--p500-stepper-item-positive-leading-elm-text-color: var(--on-surface-success)
}
}
}
@layer library {
@layer switch {
:root {
--p500-switch-height: 1.75rem;
--p500-switch-font-family: var(--ds-font-family-plain);
--p500-switch-label-color: var(--on-surface-regular);
--p500-switch-label-font-size: 1rem;
--p500-switch-border-size: 1px;
--p500-switch-border-color: var(--outline-medium);
--p500-switch-border-radius: var(--ds-corner-full);
--p500-switch-background: var(--surface-main);
--p500-switch-thumb-color: var(--on-surface-extra-light);
--p500-switch-background-disabled: var(--surface-main);
--p500-switch-thumb-color-disabled: var(--surface-button-disabled);
--p500-switch-background-checked: var(--surface-switch-active);
--p500-switch-thumb-color-checked: var(--surface-main);
--p500-switch-background-checked-disabled: var(--surface-button-disabled);
--p500-switch-thumb-color-checked-disabled: var(--surface-main);
--p500-switch-disabled-opacity: .5
}
}
}
@layer library {
@layer tooltip {
:root {
--trustProequity-tooltip-max-width: 12.5rem;
--trustProequity-tooltip-z-index: 6500;
--trustProequity-tooltip-arrow-size: 16px;
--trustProequity-tooltip-arrow-offset: -8px;
--trustProequity-tooltip-arrow-offset-size: 14px;
--trustProequity-tooltip-background-color: var(--surface-tooltip-regular);
--trustProequity-tooltip-spacing: var(--ds-spacing-medium) var(--ds-spacing-medium) calc(var(--ds-spacing-medium) + 1px);
--trustProequity-tooltip-border-radius: var(--ds-corner-small);
--trustProequity-tooltip-text-color: var(--on-primary-regular);
--trustProequity-tooltip-font-weight: var(--ds-body-small-font-weight);
--trustProequity-tooltip-font-size: var(--ds-body-small-font-size);
--trustProequity-tooltip-line-height: var(--ds-body-small-line-height);
--trustProequity-tooltip-font-family: var(--ds-body-small-font-family);
--trustProequity-tooltip-letter-spacing: var(--ds-body-small-letter-spacing);
--trustProequity-tooltip-touch-max-width: min(100%, 20rem);
--trustProequity-mobile-outer-spacing: var(--ds-spacing-large);
--trustProequity-tooltip-overlay-color: var(--overlay-regular);
--trustProequity-tooltip-touch-spacing: var(--ds-spacing-large) var(--ds-spacing-x-large);
--trustProequity-tooltip-touch-border-radius: var(--ds-corner-xx-large);
--trustProequity-tooltip-touch-font-weight: var(--ds-body-large-font-weight);
--trustProequity-tooltip-touch-font-size: var(--ds-body-large-font-size);
--trustProequity-tooltip-touch-line-height: var(--ds-body-large-line-height);
--trustProequity-tooltip-touch-font-family: var(--ds-body-large-font-family);
--trustProequity-tooltip-touch-letter-spacing: var(--ds-body-large-letter-spacing);
--trustProequity-tooltip-close-button-top-spacing: var(--ds-spacing-x-large);
--trustProequity-tooltip-close-button-font-size: var(--ds-body-small-font-size);
--trustProequity-tooltip-close-button-font-weight: var(--ds-body-small-font-weight);
--trustProequity-tooltip-close-button-line-height: var(--ds-body-small-font-size);
--trustProequity-tooltip-close-button-font-family: var(--ds-body-small-font-family);
--trustProequity-tooltip-close-button-letter-spacing: var(--ds-body-small-letter-spacing);
--trustProequity-tooltip-close-button-color: var(--on-primary-medium)
}
}
}
@layer library {
@layer tooltip-button {
:root {
--trustProequity-tooltip-button-border-radius: var(--ds-corner-full);
--trustProequity-tooltip-button-bg-color: transparent;
--trustProequity-tooltip-button-color: var(--on-surface-primary);
--trustProequity-tooltip-button-outline: none;
--trustProequity-tooltip-button-outline-focus: var(--outline-link-highlighted-focused);
--trustProequity-tooltip-button-disabled-opacity: .5
}
}
}
.trustProequity-headline-small {
font: var(--ds-headline-small-font-weight) var(--ds-headline-small-font-size)/var(--ds-headline-small-line-height) var(--ds-headline-small-font-family);
letter-spacing: var(--ds-headline-small-letter-spacing)
}
.trustProequity-headline-bold-small {
font: var(--ds-headline-bold-small-font-weight) var(--ds-headline-bold-small-font-size)/var(--ds-headline-bold-small-line-height) var(--ds-headline-bold-small-font-family);
letter-spacing: var(--ds-headline-bold-small-letter-spacing)
}
.trustProequity-headline-medium {
font: var(--ds-headline-medium-font-weight) var(--ds-headline-medium-font-size)/var(--ds-headline-medium-line-height) var(--ds-headline-medium-font-family);
letter-spacing: var(--ds-headline-medium-letter-spacing)
}
.trustProequity-headline-bold-medium {
font: var(--ds-headline-bold-medium-font-weight) var(--ds-headline-bold-medium-font-size)/var(--ds-headline-bold-medium-line-height) var(--ds-headline-bold-medium-font-family);
letter-spacing: var(--ds-headline-bold-medium-letter-spacing)
}
.trustProequity-headline-large {
font: var(--ds-headline-large-font-weight) var(--ds-headline-large-font-size)/var(--ds-headline-large-line-height) var(--ds-headline-large-font-family);
letter-spacing: var(--ds-headline-large-letter-spacing)
}
.trustProequity-headline-bold-large {
font: var(--ds-headline-bold-large-font-weight) var(--ds-headline-bold-large-font-size)/var(--ds-headline-bold-large-line-height) var(--ds-headline-bold-large-font-family);
letter-spacing: var(--ds-headline-bold-large-letter-spacing)
}
.trustProequity-title-small {
font: var(--ds-title-small-font-weight) var(--ds-title-small-font-size)/var(--ds-title-small-line-height) var(--ds-title-small-font-family);
letter-spacing: var(--ds-title-small-letter-spacing)
}
.trustProequity-title-bold-small {
font: var(--ds-title-bold-small-font-weight) var(--ds-title-bold-small-font-size)/var(--ds-title-bold-small-line-height) var(--ds-title-bold-small-font-family);
letter-spacing: var(--ds-title-bold-small-letter-spacing)
}
.trustProequity-title-medium {
font: var(--ds-title-medium-font-weight) var(--ds-title-medium-font-size)/var(--ds-title-medium-line-height) var(--ds-title-medium-font-family);
letter-spacing: var(--ds-title-medium-letter-spacing)
}
.trustProequity-title-bold-medium {
font: var(--ds-title-bold-medium-font-weight) var(--ds-title-bold-medium-font-size)/var(--ds-title-bold-medium-line-height) var(--ds-title-bold-medium-font-family);
letter-spacing: var(--ds-title-bold-medium-letter-spacing)
}
.trustProequity-title-large {
font: var(--ds-title-large-font-weight) var(--ds-title-large-font-size)/var(--ds-title-large-line-height) var(--ds-title-large-font-family);
letter-spacing: var(--ds-title-large-letter-spacing)
}
.trustProequity-title-bold-large {
font: var(--ds-title-bold-large-font-weight) var(--ds-title-bold-large-font-size)/var(--ds-title-bold-large-line-height) var(--ds-title-bold-large-font-family);
letter-spacing: var(--ds-title-bold-large-letter-spacing)
}
.trustProequity-label-small {
font: var(--ds-label-small-font-weight) var(--ds-label-small-font-size)/var(--ds-label-small-line-height) var(--ds-label-small-font-family);
letter-spacing: var(--ds-label-small-letter-spacing)
}
.trustProequity-label-bold-small {
font: var(--ds-label-bold-small-font-weight) var(--ds-label-bold-small-font-size)/var(--ds-label-bold-small-line-height) var(--ds-label-bold-small-font-family);
letter-spacing: var(--ds-label-bold-small-letter-spacing)
}
.trustProequity-label-medium {
font: var(--ds-label-medium-font-weight) var(--ds-label-medium-font-size)/var(--ds-label-medium-line-height) var(--ds-label-medium-font-family);
letter-spacing: var(--ds-label-medium-letter-spacing)
}
.trustProequity-label-bold-medium {
font: var(--ds-label-bold-medium-font-weight) var(--ds-label-bold-medium-font-size)/var(--ds-label-bold-medium-line-height) var(--ds-label-bold-medium-font-family);
letter-spacing: var(--ds-label-bold-medium-letter-spacing)
}
.trustProequity-label-large {
font: var(--ds-label-large-font-weight) var(--ds-label-large-font-size)/var(--ds-label-large-line-height) var(--ds-label-large-font-family);
letter-spacing: var(--ds-label-large-letter-spacing)
}
.trustProequity-label-bold-large {
font: var(--ds-label-bold-large-font-weight) var(--ds-label-bold-large-font-size)/var(--ds-label-bold-large-line-height) var(--ds-label-bold-large-font-family);
letter-spacing: var(--ds-label-bold-large-letter-spacing)
}
.trustProequity-body-small {
font: var(--ds-body-small-font-weight) var(--ds-body-small-font-size)/var(--ds-body-small-line-height) var(--ds-body-small-font-family);
letter-spacing: var(--ds-body-small-letter-spacing)
}
.trustProequity-body-bold-small {
font: var(--ds-body-bold-small-font-weight) var(--ds-body-bold-small-font-size)/var(--ds-body-bold-small-line-height) var(--ds-body-bold-small-font-family);
letter-spacing: var(--ds-body-bold-small-letter-spacing)
}
.trustProequity-body-medium {
font: var(--ds-body-medium-font-weight) var(--ds-body-medium-font-size)/var(--ds-body-medium-line-height) var(--ds-body-medium-font-family);
letter-spacing: var(--ds-body-medium-letter-spacing)
}
.trustProequity-body-bold-medium {
font: var(--ds-body-bold-medium-font-weight) var(--ds-body-bold-medium-font-size)/var(--ds-body-bold-medium-line-height) var(--ds-body-bold-medium-font-family);
letter-spacing: var(--ds-body-bold-medium-letter-spacing)
}
.trustProequity-body-large {
font: var(--ds-body-large-font-weight) var(--ds-body-large-font-size)/var(--ds-body-large-line-height) var(--ds-body-large-font-family);
letter-spacing: var(--ds-body-large-letter-spacing)
}
.trustProequity-body-bold-large {
font: var(--ds-body-bold-large-font-weight) var(--ds-body-bold-large-font-size)/var(--ds-body-bold-large-line-height) var(--ds-body-bold-large-font-family);
letter-spacing: var(--ds-body-bold-large-letter-spacing)
}
.trustProequity-caption-small {
font: var(--ds-caption-small-font-weight) var(--ds-caption-small-font-size)/var(--ds-caption-small-line-height) var(--ds-caption-small-font-family);
letter-spacing: var(--ds-caption-small-letter-spacing)
}
.trustProequity-caption-bold-small {
font: var(--ds-caption-bold-small-font-weight) var(--ds-caption-bold-small-font-size)/var(--ds-caption-bold-small-line-height) var(--ds-caption-bold-small-font-family);
letter-spacing: var(--ds-caption-bold-small-letter-spacing)
}
.trustProequity-caption-medium {
font: var(--ds-caption-medium-font-weight) var(--ds-caption-medium-font-size)/var(--ds-caption-medium-line-height) var(--ds-caption-medium-font-family);
letter-spacing: var(--ds-caption-medium-letter-spacing)
}
.trustProequity-caption-bold-medium {
font: var(--ds-caption-bold-medium-font-weight) var(--ds-caption-bold-medium-font-size)/var(--ds-caption-bold-medium-line-height) var(--ds-caption-bold-medium-font-family);
letter-spacing: var(--ds-caption-bold-medium-letter-spacing)
}
.trustProequity-caption-large {
font: var(--ds-caption-large-font-weight) var(--ds-caption-large-font-size)/var(--ds-caption-large-line-height) var(--ds-caption-large-font-family);
letter-spacing: var(--ds-caption-large-letter-spacing)
}
.trustProequity-caption-bold-large {
font: var(--ds-caption-bold-large-font-weight) var(--ds-caption-bold-large-font-size)/var(--ds-caption-bold-large-line-height) var(--ds-caption-bold-large-font-family);
letter-spacing: var(--ds-caption-bold-large-letter-spacing)
}
@font-face {
font-display: block;
font-family: icoplus;
font-style: normal;
font-weight: 400;
src: url(/131711/Resources/dist/Resources/fonts/icoplus.woff2?2st92) format("woff2")
}
.icoplus:before, [class*=" icon-"] [class^=path]:before, [class*=" icon-"]:before, [class^=icon-] [class^=path]:before, [class^=icon-]:before {
font-family: icoplus !important;
speak: never;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-drag_handle:before {
content: "\ea2e"
}
.icon-alert-circle:before {
content: "\e91b"
}
.icon-alert-triangle:before {
content: "\e91f"
}
.icon-arrow-down:before {
content: "\e98b"
}
.icon-arrow-down-circle:before, .icon-menu-home-screen:before {
content: "\e98c"
}
.icon-arrow-left:before {
content: "\e98d"
}
.icon-arrow-left-circle:before {
content: "\e98e"
}
.icon-arrow-right:before {
content: "\e98f"
}
.icon-arrow-right-circle:before {
content: "\e990"
}
.icon-arrow-up:before {
content: "\e991"
}
.icon-arrow-up-circle:before {
content: "\e992"
}
.icon-bar-chart:before, .icon-highestwinningpositionsrate:before {
content: "\e94d"
}
.icon-bar-chart-2:before, .icon-position-rate:before {
content: "\e94e"
}
.icon-bookmark:before, .icon-mostfollowers:before {
content: "\e993"
}
.icon-briefcase:before, .icon-broker-briefcase:before {
content: "\e994"
}
.icon-camera:before {
content: "\e995"
}
.icon-camera-off:before {
content: "\e996"
}
.icon-caret-down:before, .icon-chevron-down:before {
content: "\e999"
}
.icon-caret-left:before, .icon-chevron-left:before {
content: "\e99a"
}
.icon-caret-right:before, .icon-chevron-right:before {
content: "\e99b"
}
.icon-caret-up:before, .icon-chevron-up:before {
content: "\e99c"
}
.icon-clipboard:before {
content: "\e920"
}
.icon-copy:before {
content: "\e99d"
}
.icon-credit-card:before {
content: "\e99e"
}
.icon-dollar-sign:before {
content: "\e99f"
}
.icon-edit:before {
content: "\e902"
}
.icon-edit-2:before, .icon-pencil:before {
content: "\e9a0"
}
.icon-edit-3:before {
content: "\e9a1"
}
.icon-eye:before, .icon-mostviewers:before {
content: "\e9a2"
}
.icon-eye-off:before {
content: "\e919"
}
.icon-file:before {
content: "\e9a3"
}
.icon-file-plus:before {
content: "\e9a4"
}
.icon-file-text:before, .icon-menu-reports:before {
content: "\e9a5"
}
.icon-broker-filter:before, .icon-filter:before {
content: "\e95c"
}
.icon-gift:before, .icon-menu-bonusaccount:before, .icon-menu-invitefriendwithbonus:before {
content: "\e9a6"
}
.icon-globe:before, .icon-menu-notification-settings:before {
content: "\e905"
}
.icon-help-circle:before, .icon-menu-help:before {
content: "\e9a7"
}
.icon-inbox:before {
content: "\e9a8"
}
.icon-layers:before {
content: "\e9a9"
}
.icon-list:before {
content: "\e9aa"
}
.icon-lock:before {
content: "\e9ab"
}
.icon-contactus-email:before, .icon-mail:before {
content: "\e9ac"
}
.icon-map:before, .icon-menu-platform-tour:before {
content: "\e917"
}
.icon-map-pin:before {
content: "\e9ad"
}
.icon-menu:before {
content: "\e938"
}
.icon-message-square:before {
content: "\e9ae"
}
.icon-minimize-2:before {
content: "\e9af"
}
.icon-minus:before {
content: "\e9b0"
}
.icon-moon:before {
content: "\e939"
}
.icon-more-vertical:before {
content: "\e9b1"
}
.icon-move:before {
content: "\e9b2"
}
.icon-contactus-phonedialer:before, .icon-phone:before {
content: "\e9b3"
}
.icon-plus:before {
content: "\e9b4"
}
.icon-menu-switch:before, .icon-repeat:before, .icon-switch:before {
content: "\e9b5"
}
.icon-floppy-o:before, .icon-save:before {
content: "\e9b6"
}
.icon-search:before {
content: "\e9b7"
}
.icon-gear:before, .icon-menu-settings:before, .icon-settings:before {
content: "\e9b8"
}
.icon-menu-security-settings:before, .icon-shield:before {
content: "\e9b9"
}
.icon-star-o:before, .icon-star1:before {
content: "\e9ba"
}
.icon-tag:before {
content: "\e903"
}
.icon-menu-demo-mode:before, .icon-target2:before {
content: "\e9bb"
}
.icon-trash-2:before, .icon-trash-o:before {
content: "\e904"
}
.icon-mostsellpositions:before, .icon-trending-down:before {
content: "\e94f"
}
.icon-mostbuypositions:before, .icon-trending-up:before {
content: "\e950"
}
.icon-menu-account:before, .icon-user1:before, .icon-user2:before {
content: "\e9bc"
}
.icon-menu-verificationcenter:before, .icon-user-check:before {
content: "\e9bd"
}
.icon-menu-invitefriend:before, .icon-users:before {
content: "\e9be"
}
.icon-video:before {
content: "\e9bf"
}
.icon-volume-2:before {
content: "\e925"
}
.icon-error:before, .icon-times:before, .icon-x:before {
content: "\e9c0"
}
.icon-x-circle:before {
content: "\e93b"
}
.icon-search-plus:before, .icon-zoom-in:before {
content: "\e9c1"
}
.icon-search-minus:before, .icon-zoom-out:before {
content: "\e9c2"
}
.icon-business-center:before {
content: "\ea3d"
}
.icon-outline-folder:before {
content: "\ea37"
}
.icon-live-off:before {
content: "\ea31"
}
.icon-company-document:before {
content: "\ea2d"
}
.icon-sticky-note:before {
content: "\ea29"
}
.icon-search-activity:before {
content: "\ea25"
}
.icon-expand-content:before {
content: "\ea1f"
}
.icon-baseline-domain:before {
content: "\ea1e"
}
.icon-subdirectory-arrow:before {
content: "\ea1d"
}
.icon-menu-move-trade:before, .icon-move-trade:before {
content: "\ea1a"
}
.icon-menu-invitebroker:before {
content: "\ea16"
}
.icon-menu-managebrokers:before {
content: "\ea17"
}
.icon-add-column-right:before {
content: "\ea0d"
}
.icon-expand-all:before {
content: "\ea0b"
}
.icon-date-range:before {
content: "\ea05"
}
.icon-user-account:before {
content: "\e9fa"
}
.icon-manager-account:before {
content: "\e9fb"
}
.icon-sales-account:before {
content: "\e9fc"
}
.icon-offices-account:before {
content: "\e9fd"
}
.icon-firm-account:before {
content: "\e9fe"
}
.icon-achagreement:before {
content: "\e9f6"
}
.icon-additionalriskdisclosure:before {
content: "\e9f7"
}
.icon-applicationform:before {
content: "\e9f8"
}
.icon-voidcheck:before {
content: "\e9f9"
}
.icon-dashboard:before, .icon-menu-dashboard:before {
content: "\e9f2"
}
.icon-view-week:before {
content: "\e960"
}
.icon-summarize:before {
content: "\e9f0"
}
.icon-snippet-folder:before {
content: "\e9f1"
}
.icon-shopping-bag:before {
content: "\e9ee"
}
.icon-folder-open:before {
content: "\e9ef"
}
.icon-monetization-on:before {
content: "\e9e9"
}
.icon-receipt-long:before {
content: "\e9ea"
}
.icon-download:before {
content: "\e9eb"
}
.icon-find-in-page:before {
content: "\e9ec"
}
.icon-draggable-up-down:before {
content: "\ea30"
}
.icon-price-type-buy .path1:before {
color: #000;
content: "\e957"
}
.icon-price-type-buy .path2:before {
color: #000;
content: "\e958";
margin-left: -1em;
opacity: .5
}
.icon-price-type-sell .path1:before {
color: #000;
content: "\e9d2"
}
.icon-price-type-sell .path2:before {
color: #000;
content: "\e9d3";
margin-left: -1em;
opacity: .5
}
.icon-chart-info:before {
content: "\e93a"
}
.icon-annotation:before {
content: "\e964"
}
.icon-arrow:before {
content: "\e965"
}
.icon-average:before {
content: "\e966"
}
.icon-channel .path1:before {
color: #000;
content: "\e967";
opacity: .25
}
.icon-channel .path2:before {
color: #000;
content: "\e968";
margin-left: -1em
}
.icon-clear:before {
content: "\e969"
}
.icon-continuous .path1:before {
color: #000;
content: "\e96a"
}
.icon-continuous .path2:before {
color: #000;
content: "\e96b";
margin-left: -1em;
opacity: .35
}
.icon-crossline:before {
content: "\e96c"
}
.icon-ellipse .path1:before {
color: #000;
content: "\e96d"
}
.icon-ellipse .path2:before {
color: #000;
content: "\e96e";
margin-left: -1em;
opacity: .25
}
.icon-fibarc .path1:before {
color: #000;
content: "\e96f";
opacity: .35
}
.icon-fibarc .path2:before {
color: #000;
content: "\e970";
margin-left: -1em
}
.icon-fibfan .path1:before {
color: #000;
content: "\e971";
opacity: .35
}
.icon-fibfan .path2:before {
color: #000;
content: "\e972";
margin-left: -1em
}
.icon-fibonacci .path1:before {
color: #000;
content: "\e973";
opacity: .1
}
.icon-fibonacci .path2:before {
color: #000;
content: "\e974";
margin-left: -1em;
opacity: .35
}
.icon-fibonacci .path3:before {
color: #000;
content: "\e975";
margin-left: -1em
}
.icon-fibtimezone .path1:before {
color: #000;
content: "\e976"
}
.icon-fibtimezone .path2:before {
color: #000;
content: "\e977";
margin-left: -1em;
opacity: .35
}
.icon-fibtimezone .path3:before {
color: #000;
content: "\e978";
margin-left: -1em;
opacity: .13
}
.icon-fibtimezone .path4:before {
color: #000;
content: "\e979";
margin-left: -1em;
opacity: .06
}
.icon-freeform:before {
content: "\e97a"
}
.icon-gartley .path1:before {
color: #000;
content: "\e97b"
}
.icon-gartley .path2:before {
color: #020101;
content: "\e97c";
margin-left: -1em;
opacity: .35
}
.icon-horizontal .path1:before {
color: #000;
content: "\e97d";
opacity: .35
}
.icon-horizontal .path2:before {
color: #000;
content: "\e97e";
margin-left: -1em
}
.icon-line:before {
content: "\e97f"
}
.icon-measure:before {
content: "\e980"
}
.icon-none:before {
content: "\e981"
}
.icon-pitchfork:before {
content: "\e982"
}
.icon-ray:before {
content: "\e983"
}
.icon-rectangle .path1:before {
color: #000;
content: "\e984";
opacity: .25
}
.icon-rectangle .path2:before {
color: #000;
content: "\e985";
margin-left: -1em
}
.icon-regression:before {
content: "\e986"
}
.icon-segment:before {
content: "\e987"
}
.icon-vertical .path1:before {
color: #000;
content: "\e988"
}
.icon-vertical .path2:before {
color: #000;
content: "\e989";
margin-left: -1em;
opacity: .35
}
.icon-chart-indicators:before, .icon-chartiq-indicators:before {
content: "\e92c"
}
.icon-chart-grid:before, .icon-grid:before {
content: "\e95a"
}
.icon-chart-range:before, .icon-range-selector:before {
content: "\e955"
}
.icon-candles:before, .icon-chart-candles:before {
content: "\e93d"
}
.icon-chart-minimize:before, .icon-close-zoom:before {
content: "\e941"
}
.icon-chart-crosshairs:before, .icon-crosshair1:before {
content: "\e946"
}
.icon-chart-draw:before, .icon-draw:before {
content: "\e947"
}
.icon-chart-save:before, .icon-save11:before {
content: "\e948"
}
.icon-chart-settings:before, .icon-settings11:before {
content: "\e949"
}
.icon-chart-fullscreen:before, .icon-zoom:before {
content: "\e94a"
}
.icon-financial-news:before {
content: "\ea42"
}
.icon-cake:before {
content: "\ea3f"
}
.icon-football:before {
content: "\ea40"
}
.icon-heart:before {
content: "\ea41"
}
.icon-menu-logout:before {
content: "\ea3e"
}
.icon-hamburger-menu:before {
content: "\ea3b"
}
.icon-hamburger-menu-open:before {
content: "\ea3c"
}
.icon-small-arrow-right:before {
content: "\ea39"
}
.icon-small-arrow-left:before {
content: "\ea3a"
}
.icon-small-arrow-down:before {
content: "\ea38"
}
.icon-tier-ambassador:before {
content: "\ea33"
}
.icon-tier-elite:before {
content: "\ea34"
}
.icon-tier-premium:before {
content: "\ea35"
}
.icon-user-account-fill:before {
content: "\ea36"
}
.icon-corellian-analysis:before, .icon-menu-corelliananalysis:before {
content: "\ea32"
}
.icon-trader-points:before {
content: "\ea2c"
}
.icon-menu-premium:before, .icon-premium:before {
content: "\e910"
}
.icon-shield-plus:before {
content: "\ea2f"
}
.icon-monetary-history:before {
content: "\ea2a"
}
.icon-mailoutline-verified:before {
content: "\ea27"
}
.icon-house-verified:before {
content: "\ea28"
}
.icon-hand-new:before {
content: "\ea24"
}
.icon-piechart:before {
content: "\ea26"
}
.icon-contactus-imessage:before, .icon-imessage:before {
content: "\ea23"
}
.icon-risk-sl:before {
content: "\ea20"
}
.icon-risk-tp:before {
content: "\ea21"
}
.icon-risk-ts:before {
content: "\ea22"
}
.icon-contactus-line:before, .icon-line-fill:before {
content: "\ea1b"
}
.icon-contactus-viber:before, .icon-viber-fill:before {
content: "\ea1c"
}
.icon-accredited-investor:before, .icon-menu-accreditedinvestor:before {
content: "\ea19"
}
.icon-plus-box:before {
content: "\ea18"
}
.icon-chat-new:before, .icon-contactus-chat:before {
content: "\ea15"
}
.icon-account_circle:before {
content: "\ea14"
}
.icon-basline-description-outline:before {
content: "\ea0e"
}
.icon-baseline-password:before {
content: "\ea0f"
}
.icon-cancel_circle_outline:before {
content: "\ea10"
}
.icon-place:before {
content: "\ea11"
}
.icon-Id_Card:before {
content: "\ea12"
}
.icon-clock-time-eight-outline:before {
content: "\ea13"
}
.icon-trailing-stop:before {
content: "\ea0c"
}
.icon-help:before {
content: "\ea0a"
}
.icon-row-layout:before {
content: "\ea09"
}
.icon-market-closed-filled:before {
content: "\ea08"
}
.icon-dark-mode:before {
content: "\ea07"
}
.icon-equalizer:before {
content: "\ea06"
}
.icon-phone-msg:before {
content: "\ea03"
}
.icon-replay:before {
content: "\ea04"
}
.icon-contact-form:before, .icon-contactus-contactform:before {
content: "\e9ff"
}
.icon-menu-sms:before, .icon-sms:before {
content: "\ea00"
}
.icon-support-agent:before {
content: "\ea01"
}
.icon-contactus-whatsapp:before, .icon-whatsapp:before {
content: "\ea02"
}
.icon-copy-new:before {
content: "\e9f4"
}
.icon-invite-share:before, .icon-share:before {
content: "\e9f5"
}
.icon-menu-professionalaccount:before, .icon-pro-account-new:before {
content: "\e9f3"
}
.icon-mobile-phone:before {
content: "\e9e7"
}
.icon-computer:before {
content: "\e9e8"
}
.icon-check-square:before {
content: "\e998"
}
.icon-check-circle:before {
content: "\e997"
}
.icon-check:before, .icon-checked:before {
content: "\e901"
}
.icon-display-settings-new:before, .icon-menu-display-settings:before {
content: "\e9e6"
}
.icon-verify-location:before {
content: "\e9e3"
}
.icon-verify-selfie:before {
content: "\e9e4"
}
.icon-verify-id:before {
content: "\e9e5"
}
.icon-menu-watchlists:before, .icon-watchlist-settings:before {
content: "\e9e2"
}
.icon-cancel-o:before {
content: "\e9e0"
}
.icon-rejected-o:before {
content: "\e9e1"
}
.icon-funds-history:before {
content: "\e9df"
}
.icon-take-profit:before {
content: "\e9dd"
}
.icon-hand:before {
content: "\e9de"
}
.icon-moderate:before {
content: "\e9dc"
}
.icon-error-new:before {
content: "\e9db"
}
.icon-position-force-close:before {
content: "\e9da"
}
.icon-menu-plusme:before, .icon-plus-me:before {
content: "\e9d6"
}
.icon-invite-lock:before, .icon-lock-open:before {
content: "\e9d7"
}
.icon-crown:before {
content: "\e9d8"
}
.icon-thumbs-up:before {
content: "\e9d9"
}
.icon-tag3:before {
content: "\e9d5"
}
.icon-fire:before {
content: "\e9d4"
}
.icon-account-margin:before {
content: "\e9d0"
}
.icon-settings-new:before {
content: "\e9d1"
}
.icon-clock-time-expire:before {
content: "\e9cf"
}
.icon-timer:before {
content: "\e931"
}
.icon-check-circle-full:before {
content: "\e961"
}
.icon-warning-new:before {
content: "\e962"
}
.icon-warning-new-full:before {
content: "\e98a"
}
.icon-live-alt:before {
content: "\e9c7"
}
.icon-live:before {
content: "\e9c9"
}
.icon-timer-fill:before {
content: "\e9cc"
}
.icon-chart-settings-new:before {
content: "\e9cd"
}
.icon-theme-settings:before {
content: "\e9ce"
}
.icon-key:before {
content: "\e95d"
}
.icon-funds:before, .icon-menu-funds:before {
content: "\e9ed"
}
.icon-whatshot:before {
content: "\e95f"
}
.icon-info:before {
content: "\e95e"
}
.icon-insights:before, .icon-menu-insights:before {
content: "\e945"
}
.icon-heighest-loss:before, .icon-highestpositionloss:before {
content: "\e952"
}
.icon-heighest-porfit:before, .icon-highestpositionprofit:before {
content: "\e953"
}
.icon-heighest-profit-loss:before, .icon-highest-position:before {
content: "\e954"
}
.icon-most-buy-sell:before, .icon-trending-down-up:before {
content: "\e959"
}
.icon-bar-chart-3:before, .icon-highestlosingpositionsrate:before {
content: "\e951"
}
.icon-rejected:before {
content: "\e93c"
}
.icon-menu-newsandmarketinsights:before, .icon-news:before {
content: "\e934"
}
.icon-menu-real-mode:before, .icon-real-mode:before {
content: "\e935"
}
.icon-real-mode-lock:before {
content: "\e936"
}
.icon-target-lock:before {
content: "\e937"
}
.icon-outline-security:before {
content: "\e930"
}
.icon-transfer-funds:before {
content: "\e92f"
}
.icon-pro-account:before {
content: "\e933"
}
.icon-positionopened:before {
content: "\e926"
}
.icon-brokerorderexpired:before {
content: "\e928"
}
.icon-brokerorderfulfill:before {
content: "\e92d"
}
.icon-positionclosed:before {
content: "\e92e"
}
.icon-repeat-locked:before, .icon-switch-locked:before {
content: "\e918"
}
.icon-academy:before, .icon-menu-trading-academy:before {
content: "\e907"
}
.icon-account-balance:before, .icon-menu-funds-general:before {
content: "\e90c"
}
.icon-account-snapshot:before, .icon-menu-accountsnapshot:before {
content: "\e911"
}
.icon-comission-history:before, .icon-menu-commissionshistory:before {
content: "\e912"
}
.icon-deposit:before, .icon-menu-deposit:before {
content: "\e913"
}
.icon-menu-paymentmethods:before, .icon-payment-methods:before {
content: "\e914"
}
.icon-menu-rebates:before, .icon-rebates:before {
content: "\e915"
}
.icon-menu-withdraw:before, .icon-withdraw:before {
content: "\e916"
}
.icon-display-settings:before {
content: "\e9c3"
}
.icon-documents:before, .icon-menu-terms:before {
content: "\e9c4"
}
.icon-global-offices:before, .icon-menu-offices:before {
content: "\e9c5"
}
.icon-menu-contact-us:before {
content: "\e9c6"
}
.icon-menu-qa-view:before, .icon-qa-view:before {
content: "\e9c8"
}
.icon-menu-tools:before, .icon-tools:before {
content: "\e9ca"
}
.icon-menu-privacysettings:before, .icon-user-privacy:before {
content: "\e9cb"
}
.icon-broker-history:before, .icon-history:before, .icon-menu-broker-history:before {
content: "\e906"
}
.icon-briefcase-o:before, .icon-broker-briefcase-full:before {
content: "\e900"
}
.icon-apply-all:before, .icon-check-multi-square:before {
content: "\e908"
}
.icon-in-apps:before {
content: "\e909"
}
.icon-celebration:before, .icon-chartiq-view:before {
content: "\e90a"
}
.icon-before-rollover:before, .icon-target:before {
content: "\e90b"
}
.icon-tradingactivity:before {
content: "\e90d"
}
.icon-passport:before, .icon-photoid:before {
content: "\e90e"
}
.icon-book:before, .icon-menu-orders:before, .icon-tag2:before {
content: "\e90f"
}
.icon-closed:before, .icon-menu-broker-positions:before, .icon-menu-closed-positions:before, .icon-suitcase:before {
content: "\ea2b"
}
.icon-EconomicCalendar:before, .icon-calendar1:before, .icon-menu-economiccalendar:before {
content: "\e91a"
}
.icon-coins:before, .icon-money_1:before {
content: "\e91c"
}
.icon-home1:before {
content: "\e91d"
}
.icon-candleChart:before, .icon-mosttradedinstruments:before, .icon-trade_icon:before {
content: "\e91e"
}
.icon-add-alert:before, .icon-bell-add:before {
content: "\e921"
}
.icon-info-circle:before, .icon-info-icon:before {
content: "\e922"
}
.icon-bell-o:before, .icon-bell:before, .icon-menu-alerts:before {
content: "\e927"
}
.icon-bell-full:before, .icon-bell-o2:before {
content: "\e929"
}
.icon-profile-menu:before, .icon-user:before {
content: "\e92a"
}
.icon-discount:before, .icon-percent:before {
content: "\e92b"
}
.icon-chat-disabled:before {
content: "\e932"
}
.icon-chat:before, .icon-livechat:before {
content: "\e93e"
}
.icon-box-checked:before {
content: "\e93f"
}
.icon-box-error:before {
content: "\e940"
}
.icon-star:before {
content: "\e942"
}
.icon-calendar:before {
content: "\e943"
}
.icon-guaranteed-stop:before {
content: "\e944"
}
.icon-drag:before {
content: "\e95b"
}
.icon-log-in:before, .icon-power-off:before {
content: "\e963"
}
.icon-plus-thin:before {
content: "\e956"
}
.icon-graph:before, .icon-menu-trade:before, .icon-stats:before {
content: "\e923"
}
.icon-list-alt:before, .icon-menu-positions:before, .icon-trade2:before {
content: "\e924"
}
.icon-warning:before {
content: "\f071"
}
.icon-chest-closed:before {
content: "\e94b"
}
.icon-chest-open:before {
content: "\e94c"
}
.icon-file-pdf:before {
content: "\e606"
}
.icon-question-circle:before {
content: "\f059"
}
.icon-exclamation-circle:before {
content: "\f06a"
}
body {
margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden], template {
display: none
}
a:active, a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
svg:not(:root) {
overflow: hidden
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
button {
overflow: visible
}
button, select {
text-transform: none
}
button, input[type=reset], input[type=submit] {
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
@layer theme {
@layer color {
:root {
--black: #000;
--on-primary-alert: #ff6464;
--on-primary-disabled: hsla(0, 0%, 100%, .4);
--on-primary-extra-light: hsla(0, 0%, 100%, .302);
--on-primary-light: hsla(0, 0%, 100%, .502);
--on-primary-light-invert: hsla(0, 0%, 100%, .502);
--on-primary-link-highlighted: #589efe;
--on-primary-medium: hsla(0, 0%, 100%, .698);
--on-primary-nav-selected: hsla(0, 0%, 100%, .698);
--on-primary-pending: #f1dd33;
--on-primary-regular: hsla(0, 0%, 100%, .949);
--on-primary-regular-invert: hsla(0, 0%, 100%, .949);
--on-primary-secondary-fixed: #11afff;
--on-primary-success: #8ac552;
--on-primary-warning: #f79433;
--on-surface-alert: #d93e3e;
--on-surface-alert-dark: #ae3232;
--on-surface-alert-focused: #e16565;
--on-surface-contact-us-premium: #7d5700;
--on-surface-contact-us-sub-title: #0c2780;
--on-surface-disabled: rgba(0, 0, 0, .4);
--on-surface-disabled-light: rgba(0, 0, 0, .2);
--on-surface-extra-light: rgba(0, 0, 0, .251);
--on-surface-light: rgba(0, 0, 0, .502);
--on-surface-link: #0c2780;
--on-surface-link-focused: #256bcb;
--on-surface-link-highlighted: #2e86fe;
--on-surface-link-highlighted-focused: #589efe;
--on-surface-medium: rgba(0, 0, 0, .698);
--on-surface-medium-fixed: rgba(0, 0, 0, .698);
--on-surface-pending: #beaa00;
--on-surface-pending-dark: #8e7f00;
--on-surface-pending-focused: #edd400;
--on-surface-primary: #0c2780;
--on-surface-primary-extra-light: #9ea9cc;
--on-surface-primary-extra-light-2: #ced4e6;
--on-surface-primary-fixed: #0c2780;
--on-surface-primary-focused: #2e86fe;
--on-surface-primary-light: #6d7db3;
--on-surface-primary-medium: #3d5299;
--on-surface-primary-medium-fixed: #3d5299;
--on-surface-registration: #936dff;
--on-surface-regular: rgba(0, 0, 0, .898);
--on-surface-secondary-fixed: #11afff;
--on-surface-secondary-fixed-focused: #0e8ccc;
--on-surface-success: #0f6a3e;
--on-surface-success-dark: #13844e;
--on-surface-success-focused: #429d71;
--on-surface-tertiary-fixed: #2e86fe;
--on-surface-tertiary-fixed-focused: #256bcb;
--on-surface-verify: #ff5963;
--on-surface-warning: #f57900;
--on-surface-warning-dark: #c46100;
--on-surface-warning-focused: #f79433;
--on-surface-warning-light: #f79433;
--outline-alert: #d93e3e;
--outline-alert-light: #f9e2e2;
--outline-button: #93a5bc;
--outline-button-focused: #768496;
--outline-focus: #abcfff;
--outline-light: #dfdddf;
--outline-link-highlighted: #2e86fe;
--outline-link-highlighted-focused: #589efe;
--outline-main: #938f94;
--outline-medium: #bebcbf;
--outline-on-primary-extra-light: hsla(0, 0%, 100%, .302);
--outline-on-primary-regular: hsla(0, 0%, 100%, .8);
--outline-pending: #edd400;
--outline-pending-light: #fcf9d9;
--outline-primary: #0c2780;
--outline-primary-dark: #0c2780;
--outline-primary-extra-light: #ced4e6;
--outline-primary-fixed: #0c2780;
--outline-primary-light: #9ea9cc;
--outline-primary-medium: #6d7db3;
--outline-primary-medium-fixed: #3d5299;
--outline-secondary-fixed: #2e86fe;
--outline-strong: #000;
--outline-success: #13844e;
--outline-success-light: #dcede4;
--outline-tertiary-fixed: #2e86fe;
--outline-tertiary-light: #abcfff;
--outline-tertiary-light-fixed: #abcfff;
--outline-warning: #f57900;
--outline-warning-light: #feebd9;
--overlay-light: rgba(12, 28, 52, .102);
--overlay-loading: hsla(0, 0%, 100%, .502);
--overlay-regular: rgba(12, 28, 52, .4);
--plans-on-primary-regular: #061432;
--plans-on-surface-ambassador-highlighted: #f36dff;
--plans-on-surface-ambassador-low: #9b70ff;
--plans-on-surface-ambassador-lower: #f7e5ff;
--plans-on-surface-ambassador-regular: #ff00bf;
--plans-on-surface-elite-highlighted: #00ffc3;
--plans-on-surface-elite-low: #84fbe5;
--plans-on-surface-elite-lower: #d4fff8;
--plans-on-surface-elite-regular: #42bef4;
--plans-on-surface-premium-highlighted: #ffb254;
--plans-on-surface-premium-low: #fbcd84;
--plans-on-surface-premium-lower: #ffe9bf;
--plans-on-surface-premium-regular: #ca6e4a;
--plans-outline-ambassador-main: #9b70ff;
--plans-outline-elite-main: #84fbe5;
--plans-outline-premium-main: #fbcd84;
--plans-surface-container-main: #061432;
--plans-surface-main: #07183d;
--shadow-bottom-arrow: rgba(0, 0, 0, .102);
--shadow-bottom-overlay: rgba(0, 0, 0, .102);
--shadow-container: rgba(0, 0, 0, .051);
--shadow-container-emph: rgba(0, 0, 0, .2);
--shadow-container-focused: rgba(0, 0, 0, .102);
--shadow-container-primary: rgba(12, 39, 128, .2);
--shadow-container-primary-focused: rgba(46, 134, 254, .502);
--shadow-container-primary-light-focused: rgba(12, 39, 128, .2);
--shadow-menu: rgba(0, 0, 0, .102);
--shadow-popup-container: rgba(0, 0, 0, .2);
--shadow-sidebar: rgba(0, 0, 0, .2);
--surface-accent: #63f0eb;
--surface-accent-dark: #57d7f0;
--surface-accent-light: #e0fcfb;
--surface-alert: #d93e3e;
--surface-alert-light: #fbecec;
--surface-alert-light-opacity: rgba(217, 62, 62, .102);
--surface-alert-medium: #e16565;
--surface-alert-soft: #f4c5c5;
--surface-apple-pay: #000;
--surface-badge: #c71f5d;
--surface-bar-disabled: #efeeef;
--surface-bar-primary-extra-light: #ced4e6;
--surface-bar-primary-light: #b6bed9;
--surface-bar-primary-medium: #9ea9cc;
--surface-bar-progress-disabled: #d4d2d4;
--surface-bar-regular: #e9e9ea;
--surface-button-disabled: #dfdddf;
--surface-button-primary: #0c2780;
--surface-button-primary-focused: #2e86fe;
--surface-button-primary-pressed: #256bcb;
--surface-button-registration: #936dff;
--surface-button-registration-focused: #815bed;
--surface-button-secondary: #f3f4f9;
--surface-button-secondary-dark: #dbdfec;
--surface-button-secondary-focused: #eaf3ff;
--surface-button-secondary-pressed: #abcfff;
--surface-button-selectable-focused: #eaf3ff;
--surface-button-selectable-hover: #f5f9ff;
--surface-button-selectable-pressed: #abcfff;
--surface-button-tertiary: #2e86fe;
--surface-button-tertiary-focused: #589efe;
--surface-button-verify: #ff5963;
--surface-button-verify-focused: #eb4b54;
--surface-categories-focused: #f3f4f9;
--surface-categories-selected: #e7e9f2;
--surface-contact-us-premium-button: #e7e1d4;
--surface-contact-us-premium-button-focused: #ddd3bf;
--surface-contact-us-premium-container-main: #f3efe8;
--surface-container-active: #1c5098;
--surface-container-active-extra-light: #f3f4f9;
--surface-container-active-light: #d5e7ff;
--surface-container-active-light-focused: #c0dbff;
--surface-container-dim: #a9a5a9;
--surface-container-dim-dark: #938f94;
--surface-container-dim-extra-light: #e9e9ea;
--surface-container-dim-light: #d4d2d4;
--surface-container-main: #f4f4f4;
--surface-container-main-extra-light: #fff;
--surface-container-main-light: #fff;
--surface-container-main-medium-light: #fff;
--surface-container-primary: #0c2780;
--surface-container-primary-extra-light: #fafbfc;
--surface-container-primary-fixed: #0c2780;
--surface-container-primary-light: #e7e9f2;
--surface-container-primary-light-focused: #dbdfec;
--surface-container-primary-light-highlighted: #e7e9f2;
--surface-container-primary-medium: #3d5299;
--surface-container-primary-medium-fixed: #3d5299;
--surface-container-tertiary-fixed: #2e86fe;
--surface-date-picker-focused: #e0edff;
--surface-date-picker-header-light: #5568a6;
--surface-date-picker-header-main: #3d5299;
--surface-date-picker-selected: #d5e7ff;
--surface-disabled: #dfdddf;
--surface-disabled-light: #e9e9ea;
--surface-forms-header-low: #efeeef;
--surface-forms-header-lower: #f4f4f4;
--surface-forms-header-lowest: #faf9fa;
--surface-forms-header-main: #e9e9ea;
--surface-forms-header-primary: #0c2780;
--surface-forms-header-primary-low: #ced4e6;
--surface-forms-header-primary-lower: #e7e9f2;
--surface-forms-header-primary-lowest: #f3f4f9;
--surface-gold: #d1a841;
--surface-input-active: #3d5299;
--surface-invest-brand: #2096d0;
--surface-main: #fff;
--surface-main-dark: #e9e9ea;
--surface-main-header: #0c2780;
--surface-nav-expanded-hover: #e1f3ff;
--surface-nav-expanded-inner-hover: #e1f3ff;
--surface-nav-expanded-inner-selected: #e1f3ff;
--surface-nav-expanded-inner-topic-highlighted: #e1f3ff;
--surface-nav-expanded-menu: #edf8ff;
--surface-nav-expanded-menu-hover: #e1f3ff;
--surface-nav-expanded-menu-selected: #ecf7ff;
--surface-nav-expanded-selected: #9fd9ff;
--surface-nav-focused: #123666;
--surface-nav-footer: #123666;
--surface-nav-light: #123666;
--surface-nav-light-focused: #17437f;
--surface-nav-main: #0e284c;
--surface-nav-main-light: #fff;
--surface-nav-menu: #fff;
--surface-nav-menu-search: #eaf3ff;
--surface-nav-menu-selected: #eaf3ff;
--surface-nav-pro-badge: #000;
--surface-nav-selected: #1c5098;
--surface-offline-button: #4a484a;
--surface-offline-button-focused: #3b393b;
--surface-offline-main: #585659;
--surface-pagination-regular: #dbdfec;
--surface-pagination-regular-focused: #ced4e6;
--surface-pagination-selected: #3d5299;
--surface-pending: #f4e566;
--surface-pending-light: #fbf6cc;
--surface-pending-medium: #faf2b2;
--surface-platinum: #ada59b;
--surface-plusme-top-section: rgba(206, 212, 230, .051);
--surface-popup-container: #faf9fa;
--surface-popup-container-primary-light: #e7e9f2;
--surface-popup-container-primary-light-focused: #dbdfec;
--surface-popup-header: #f3f4f9;
--surface-popup-main: #fff;
--surface-popup-primary: #0c2780;
--surface-popup-subcontainer: #fff;
--surface-premium: #b38c32;
--surface-premium-light: #faf2b2;
--surface-primary: #0c2780;
--surface-primary-medium: #3d5299;
--surface-processing-overlay: hsla(0, 0%, 100%, .698);
--surface-product-switch-cfd: #6d7db3;
--surface-product-switch-cfd-focused: #9ea9cc;
--surface-product-switch-invest: #0e8ccc;
--surface-product-switch-invest-focused: #11afff;
--surface-row-emph-focused: #f5f9ff;
--surface-row-emph-selected: #eaf3ff;
--surface-row-focused: #fafafc;
--surface-row-inner-row: #fafafc;
--surface-row-inner-row-focused: #f3f4f9;
--surface-row-inner-row-selected: #e7e9f2;
--surface-row-selected: #f3f4f9;
--surface-scrollbar-button: #d4d2d4;
--surface-scrollbar-chart-button: #0c2780;
--surface-scrollbar-chart-main: #dbdfec;
--surface-scrollbar-main: #efeeef;
--surface-secondary-fixed: #11afff;
--surface-segmented-control-active: #fff;
--surface-segmented-control-main: #f4f4f4;
--surface-sidebar-header: #3d5299;
--surface-sidebar-main: #fff;
--surface-silver: #bcbdc1;
--surface-splash-gradient-1: #07174d;
--surface-splash-gradient-2: #0a1f66;
--surface-splash-gradient-3: #051033;
--surface-sub: #2b827b;
--surface-success: #13844e;
--surface-success-light: #f3f9f6;
--surface-success-light-opacity: rgba(19, 132, 78, .102);
--surface-success-medium: #71b595;
--surface-switch-active: #3d5299;
--surface-switch-disabled: #e9e9ea;
--surface-switch-inactive: #dfdddf;
--surface-switch-on-disabled: hsla(0, 0%, 100%, .6);
--surface-tabs-focused: #f3f4f9;
--surface-tabs-regular: #faf9fa;
--surface-tabs-selected: #fff;
--surface-tertiary-fixed: #2e86fe;
--surface-tertiary-light-opacity: rgba(46, 134, 254, .149);
--surface-tooltip-regular: #3b393b;
--surface-warning: #f57900;
--surface-warning-light: #fef2e5;
--surface-warning-medium: #f9af66;
--surface-watchlist-focused: #f5f9ff;
--surface-watchlist-selected: #f3f4f9;
--white: #fff
}
:root.dark-mode {
--black: #000;
--on-primary-alert: #ff3d3d;
--on-primary-disabled: hsla(0, 0%, 100%, .4);
--on-primary-extra-light: hsla(0, 0%, 100%, .302);
--on-primary-light: hsla(0, 0%, 100%, .502);
--on-primary-light-invert: rgba(0, 0, 0, .502);
--on-primary-link-highlighted: #82b6fe;
--on-primary-medium: hsla(0, 0%, 100%, .698);
--on-primary-nav-selected: #82b6fe;
--on-primary-pending: #f1dd33;
--on-primary-regular: hsla(0, 0%, 100%, .898);
--on-primary-regular-invert: rgba(0, 0, 0, .898);
--on-primary-secondary-fixed: #11afff;
--on-primary-success: #a1d175;
--on-primary-warning: #f9af66;
--on-surface-alert: #ff3d3d;
--on-surface-alert-dark: #ff6464;
--on-surface-alert-focused: #ff6464;
--on-surface-contact-us-premium: #d4a231;
--on-surface-contact-us-sub-title: #11afff;
--on-surface-disabled: hsla(0, 0%, 100%, .4);
--on-surface-disabled-light: hsla(0, 0%, 100%, .2);
--on-surface-extra-light: hsla(0, 0%, 100%, .251);
--on-surface-light: hsla(0, 0%, 100%, .502);
--on-surface-link: #589efe;
--on-surface-link-focused: #82b6fe;
--on-surface-link-highlighted: #589efe;
--on-surface-link-highlighted-focused: #82b6fe;
--on-surface-medium: hsla(0, 0%, 100%, .698);
--on-surface-medium-fixed: rgba(0, 0, 0, .698);
--on-surface-pending: #edd400;
--on-surface-pending-dark: #edd400;
--on-surface-pending-focused: #f1dd33;
--on-surface-primary: hsla(0, 0%, 100%, .898);
--on-surface-primary-extra-light: hsla(0, 0%, 100%, .4);
--on-surface-primary-extra-light-2: hsla(0, 0%, 100%, .2);
--on-surface-primary-fixed: #589efe;
--on-surface-primary-focused: #589efe;
--on-surface-primary-light: hsla(0, 0%, 100%, .502);
--on-surface-primary-medium: hsla(0, 0%, 100%, .698);
--on-surface-primary-medium-fixed: #6d7db3;
--on-surface-registration: #936dff;
--on-surface-regular: hsla(0, 0%, 100%, .898);
--on-surface-secondary-fixed: #11afff;
--on-surface-secondary-fixed-focused: #41bfff;
--on-surface-success: #a1d175;
--on-surface-success-dark: #8ac552;
--on-surface-success-focused: #b9dc97;
--on-surface-tertiary-fixed: #589efe;
--on-surface-tertiary-fixed-focused: #82b6fe;
--on-surface-verify: #ff5963;
--on-surface-warning: #f57900;
--on-surface-warning-dark: #f79433;
--on-surface-warning-focused: #f79433;
--on-surface-warning-light: #f9af66;
--outline-alert: #d93e3e;
--outline-alert-light: #f9e2e2;
--outline-button: #767276;
--outline-button-focused: #938f94;
--outline-focus: #3b424b;
--outline-light: #4a484a;
--outline-link-highlighted: #589efe;
--outline-link-highlighted-focused: #82b6fe;
--outline-main: #767276;
--outline-medium: #767276;
--outline-on-primary-extra-light: hsla(0, 0%, 100%, .302);
--outline-on-primary-regular: hsla(0, 0%, 100%, .8);
--outline-pending: #edd400;
--outline-pending-light: #fcf9d9;
--outline-primary: #586371;
--outline-primary-dark: #1d1d1e;
--outline-primary-extra-light: #3b424b;
--outline-primary-fixed: #3d5299;
--outline-primary-light: #586371;
--outline-primary-medium: #768496;
--outline-primary-medium-fixed: #589efe;
--outline-secondary-fixed: #41bfff;
--outline-strong: #fff;
--outline-success: #8ac552;
--outline-success-light: #edf6e5;
--outline-tertiary-fixed: #2e86fe;
--outline-tertiary-light: #3b424b;
--outline-tertiary-light-fixed: #82b6fe;
--outline-warning: #f57900;
--outline-warning-light: #feebd9;
--overlay-light: rgba(0, 0, 0, .102);
--overlay-loading: rgba(29, 29, 30, .502);
--overlay-regular: rgba(0, 0, 0, .4);
--plans-on-primary-regular: #061432;
--plans-on-surface-ambassador-highlighted: #f36dff;
--plans-on-surface-ambassador-low: #9b70ff;
--plans-on-surface-ambassador-lower: #f7e5ff;
--plans-on-surface-ambassador-regular: #ff00bf;
--plans-on-surface-elite-highlighted: #00ffc3;
--plans-on-surface-elite-low: #84fbe5;
--plans-on-surface-elite-lower: #d4fff8;
--plans-on-surface-elite-regular: #42bef4;
--plans-on-surface-premium-highlighted: #ffb254;
--plans-on-surface-premium-low: #fbcd84;
--plans-on-surface-premium-lower: #ffe9bf;
--plans-on-surface-premium-regular: #ca6e4a;
--plans-outline-ambassador-main: #9b70ff;
--plans-outline-elite-main: #84fbe5;
--plans-outline-premium-main: #fbcd84;
--plans-surface-container-main: #061432;
--plans-surface-main: #07183d;
--shadow-bottom-arrow: rgba(0, 0, 0, .2);
--shadow-bottom-overlay: rgba(0, 0, 0, .302);
--shadow-container: rgba(0, 0, 0, .2);
--shadow-container-emph: rgba(0, 0, 0, .4);
--shadow-container-focused: rgba(0, 0, 0, .4);
--shadow-container-primary: rgba(0, 0, 0, .4);
--shadow-container-primary-focused: rgba(0, 0, 0, .6);
--shadow-container-primary-light-focused: rgba(0, 0, 0, .4);
--shadow-menu: rgba(0, 0, 0, .102);
--shadow-popup-container: rgba(0, 0, 0, .6);
--shadow-sidebar: rgba(0, 0, 0, .502);
--surface-accent: #63f0eb;
--surface-accent-dark: #57d7f0;
--surface-accent-light: #2b4747;
--surface-alert: #ff3d3d;
--surface-alert-light: #4d1212;
--surface-alert-light-opacity: rgba(217, 62, 62, .149);
--surface-alert-medium: #cc3131;
--surface-alert-soft: #992525;
--surface-apple-pay: #fff;
--surface-badge: #c71f5d;
--surface-bar-disabled: #3b393b;
--surface-bar-primary-extra-light: #4a535e;
--surface-bar-primary-light: #586371;
--surface-bar-primary-medium: #677484;
--surface-bar-progress-disabled: #585659;
--surface-bar-regular: #3b393b;
--surface-button-disabled: #585659;
--surface-button-primary: #256bcb;
--surface-button-primary-focused: #2e86fe;
--surface-button-primary-pressed: #256bcb;
--surface-button-registration: #936dff;
--surface-button-registration-focused: #815bed;
--surface-button-secondary: #3b424b;
--surface-button-secondary-dark: #4a535e;
--surface-button-secondary-focused: #2c3238;
--surface-button-secondary-pressed: #586371;
--surface-button-selectable-focused: #2c3238;
--surface-button-selectable-hover: #25292f;
--surface-button-selectable-pressed: #586371;
--surface-button-tertiary: #2e86fe;
--surface-button-tertiary-focused: #589efe;
--surface-button-verify: #ff5963;
--surface-button-verify-focused: #eb4b54;
--surface-categories-focused: #2c2b2c;
--surface-categories-selected: #3b393b;
--surface-contact-us-premium-button: #564932;
--surface-contact-us-premium-button-focused: #655433;
--surface-contact-us-premium-container-main: #463f33;
--surface-container-active: #3b424b;
--surface-container-active-extra-light: #2c3238;
--surface-container-active-light: #2c3238;
--surface-container-active-light-focused: #586371;
--surface-container-dim: #3b393b;
--surface-container-dim-dark: #4a484a;
--surface-container-dim-extra-light: #3b393b;
--surface-container-dim-light: #3b393b;
--surface-container-main: #2c2b2c;
--surface-container-main-extra-light: #3b393b;
--surface-container-main-light: #1d1d1e;
--surface-container-main-medium-light: #252425;
--surface-container-primary: #161516;
--surface-container-primary-extra-light: #2c2b2c;
--surface-container-primary-fixed: #0c2780;
--surface-container-primary-light: #25292f;
--surface-container-primary-light-focused: #3b424b;
--surface-container-primary-light-highlighted: #589efe;
--surface-container-primary-medium: #3b393b;
--surface-container-primary-medium-fixed: #3d5299;
--surface-container-tertiary-fixed: #256bcb;
--surface-date-picker-focused: #17437f;
--surface-date-picker-header-light: #3b393b;
--surface-date-picker-header-main: #2c2b2c;
--surface-date-picker-selected: #1c5098;
--surface-disabled: #2c2b2c;
--surface-disabled-light: #4a484a;
--surface-forms-header-low: #3b393b;
--surface-forms-header-lower: #2c2b2c;
--surface-forms-header-lowest: #252425;
--surface-forms-header-main: #4a484a;
--surface-forms-header-primary: #0f0e0f;
--surface-forms-header-primary-low: #2c3238;
--surface-forms-header-primary-lower: #25292f;
--surface-forms-header-primary-lowest: #1d2126;
--surface-gold: #d1a841;
--surface-input-active: #205eb2;
--surface-invest-brand: #2096d0;
--surface-main: #1d1d1e;
--surface-main-dark: #0f0e0f;
--surface-main-header: #161516;
--surface-nav-expanded-hover: #5f8299;
--surface-nav-expanded-inner-hover: #354955;
--surface-nav-expanded-inner-selected: #26343d;
--surface-nav-expanded-inner-topic-highlighted: #4c687a;
--surface-nav-expanded-menu: #56758a;
--surface-nav-expanded-menu-hover: #5f8299;
--surface-nav-expanded-menu-selected: #394e5c;
--surface-nav-expanded-selected: #4c687a;
--surface-nav-focused: #2c3238;
--surface-nav-footer: #2c2b2c;
--surface-nav-light: #2c2b2c;
--surface-nav-light-focused: #3b393b;
--surface-nav-main: #0f0e0f;
--surface-nav-main-light: #2c2b2c;
--surface-nav-menu: #2c2b2c;
--surface-nav-menu-search: #4a484a;
--surface-nav-menu-selected: #585659;
--surface-nav-pro-badge: #000;
--surface-nav-selected: #4a535e;
--surface-offline-button: #4a484a;
--surface-offline-button-focused: #585659;
--surface-offline-main: #333234;
--surface-pagination-regular: #586371;
--surface-pagination-regular-focused: #768496;
--surface-pagination-selected: #589efe;
--surface-pending: #edd400;
--surface-pending-light: #474000;
--surface-pending-medium: #f1dd33;
--surface-platinum: #ada59b;
--surface-plusme-top-section: hsla(0, 0%, 100%, .051);
--surface-popup-container: #3b393b;
--surface-popup-container-primary-light: #424043;
--surface-popup-container-primary-light-focused: #4a484a;
--surface-popup-header: #4a484a;
--surface-popup-main: #333234;
--surface-popup-primary: #2c2b2c;
--surface-popup-subcontainer: #4a484a;
--surface-premium: #b38c32;
--surface-premium-light: #faf2b2;
--surface-primary: #4a484a;
--surface-primary-medium: #3b393b;
--surface-processing-overlay: rgba(29, 29, 30, .698);
--surface-product-switch-cfd: #3d5299;
--surface-product-switch-cfd-focused: #6d7db3;
--surface-product-switch-invest: #0e8ccc;
--surface-product-switch-invest-focused: #11afff;
--surface-row-emph-focused: #3b393b;
--surface-row-emph-selected: #333234;
--surface-row-focused: #2c2b2c;
--surface-row-inner-row: #2c2b2c;
--surface-row-inner-row-focused: #4a484a;
--surface-row-inner-row-selected: #585659;
--surface-row-selected: #3b393b;
--surface-scrollbar-button: #585659;
--surface-scrollbar-chart-button: #938f94;
--surface-scrollbar-chart-main: #3b393b;
--surface-scrollbar-main: #333234;
--surface-secondary-fixed: #11afff;
--surface-segmented-control-active: #4a484a;
--surface-segmented-control-main: #2c2b2c;
--surface-sidebar-header: #2c2b2c;
--surface-sidebar-main: #1d1d1e;
--surface-silver: #bcbdc1;
--surface-splash-gradient-1: #07174d;
--surface-splash-gradient-2: #0a1f66;
--surface-splash-gradient-3: #051033;
--surface-sub: #2b827b;
--surface-success: #6e9e42;
--surface-success-light: #08351f;
--surface-success-light-opacity: rgba(110, 158, 66, .149);
--surface-success-medium: #6e9e42;
--surface-switch-active: #205eb2;
--surface-switch-disabled: #3b393b;
--surface-switch-inactive: #4a484a;
--surface-switch-on-disabled: hsla(0, 0%, 100%, .2);
--surface-tabs-focused: #3b393b;
--surface-tabs-regular: #2c2b2c;
--surface-tabs-selected: #1d1d1e;
--surface-tertiary-fixed: #2e86fe;
--surface-tertiary-light-opacity: rgba(46, 134, 254, .2);
--surface-tooltip-regular: #767276;
--surface-warning: #f57900;
--surface-warning-light: #4a2400;
--surface-warning-medium: #f57900;
--surface-watchlist-focused: #4a484a;
--surface-watchlist-selected: #424043;
--white: #fff
}
}
}
@layer assets {
@layer icon {
:root {
--icomoon-font-family: icoplus;
--icomoon-font-path: /Resources/ fonts;
--icon-drag-handle: "\ea2e";
--icon-alert-circle: "\e91b";
--icon-alert-triangle: "\e91f";
--icon-arrow-down: "\e98b";
--icon-arrow-down-circle: "\e98c";
--icon-menu-home-screen: "\e98c";
--icon-arrow-left: "\e98d";
--icon-arrow-left-circle: "\e98e";
--icon-arrow-right: "\e98f";
--icon-arrow-right-circle: "\e990";
--icon-arrow-up: "\e991";
--icon-arrow-up-circle: "\e992";
--icon-bar-chart: "\e94d";
--icon-highestwinningpositionsrate: "\e94d";
--icon-bar-chart-2: "\e94e";
--icon-position-rate: "\e94e";
--icon-bookmark: "\e993";
--icon-mostfollowers: "\e993";
--icon-briefcase: "\e994";
--icon-broker-briefcase: "\e994";
--icon-camera: "\e995";
--icon-camera-off: "\e996";
--icon-chevron-down: "\e999";
--icon-caret-down: "\e999";
--icon-chevron-left: "\e99a";
--icon-caret-left: "\e99a";
--icon-chevron-right: "\e99b";
--icon-caret-right: "\e99b";
--icon-chevron-up: "\e99c";
--icon-caret-up: "\e99c";
--icon-clipboard: "\e920";
--icon-copy: "\e99d";
--icon-credit-card: "\e99e";
--icon-dollar-sign: "\e99f";
--icon-edit: "\e902";
--icon-edit-2: "\e9a0";
--icon-pencil: "\e9a0";
--icon-edit-3: "\e9a1";
--icon-eye: "\e9a2";
--icon-mostviewers: "\e9a2";
--icon-eye-off: "\e919";
--icon-file: "\e9a3";
--icon-file-plus: "\e9a4";
--icon-file-text: "\e9a5";
--icon-menu-reports: "\e9a5";
--icon-filter: "\e95c";
--icon-broker-filter: "\e95c";
--icon-gift: "\e9a6";
--icon-menu-bonusaccount: "\e9a6";
--icon-menu-invitefriendwithbonus: "\e9a6";
--icon-globe: "\e905";
--icon-menu-notification-settings: "\e905";
--icon-help-circle: "\e9a7";
--icon-menu-help: "\e9a7";
--icon-inbox: "\e9a8";
--icon-layers: "\e9a9";
--icon-list: "\e9aa";
--icon-lock: "\e9ab";
--icon-mail: "\e9ac";
--icon-contactus-email: "\e9ac";
--icon-map: "\e917";
--icon-menu-platform-tour: "\e917";
--icon-map-pin: "\e9ad";
--icon-menu: "\e938";
--icon-message-square: "\e9ae";
--icon-minimize-2: "\e9af";
--icon-minus: "\e9b0";
--icon-moon: "\e939";
--icon-more-vertical: "\e9b1";
--icon-move: "\e9b2";
--icon-phone: "\e9b3";
--icon-contactus-phonedialer: "\e9b3";
--icon-plus: "\e9b4";
--icon-repeat: "\e9b5";
--icon-switch: "\e9b5";
--icon-menu-switch: "\e9b5";
--icon-save: "\e9b6";
--icon-floppy-o: "\e9b6";
--icon-search: "\e9b7";
--icon-settings: "\e9b8";
--icon-gear: "\e9b8";
--icon-menu-settings: "\e9b8";
--icon-shield: "\e9b9";
--icon-menu-security-settings: "\e9b9";
--icon-star-o: "\e9ba";
--icon-star1: "\e9ba";
--icon-tag: "\e903";
--icon-target2: "\e9bb";
--icon-menu-demo-mode: "\e9bb";
--icon-trash-2: "\e904";
--icon-trash-o: "\e904";
--icon-trending-down: "\e94f";
--icon-mostsellpositions: "\e94f";
--icon-trending-up: "\e950";
--icon-mostbuypositions: "\e950";
--icon-user1: "\e9bc";
--icon-user2: "\e9bc";
--icon-menu-account: "\e9bc";
--icon-user-check: "\e9bd";
--icon-menu-verificationcenter: "\e9bd";
--icon-users: "\e9be";
--icon-menu-invitefriend: "\e9be";
--icon-video: "\e9bf";
--icon-volume-2: "\e925";
--icon-x: "\e9c0";
--icon-times: "\e9c0";
--icon-error: "\e9c0";
--icon-x-circle: "\e93b";
--icon-zoom-in: "\e9c1";
--icon-search-plus: "\e9c1";
--icon-zoom-out: "\e9c2";
--icon-search-minus: "\e9c2";
--icon-business-center: "\ea3d";
--icon-outline-folder: "\ea37";
--icon-live-off: "\ea31";
--icon-company-document: "\ea2d";
--icon-sticky-note: "\ea29";
--icon-search-activity: "\ea25";
--icon-expand-content: "\ea1f";
--icon-baseline-domain: "\ea1e";
--icon-subdirectory-arrow: "\ea1d";
--icon-move-trade: "\ea1a";
--icon-menu-move-trade: "\ea1a";
--icon-menu-invitebroker: "\ea16";
--icon-menu-managebrokers: "\ea17";
--icon-add-column-right: "\ea0d";
--icon-expand-all: "\ea0b";
--icon-date-range: "\ea05";
--icon-user-account: "\e9fa";
--icon-manager-account: "\e9fb";
--icon-sales-account: "\e9fc";
--icon-offices-account: "\e9fd";
--icon-firm-account: "\e9fe";
--icon-achagreement: "\e9f6";
--icon-additionalriskdisclosure: "\e9f7";
--icon-applicationform: "\e9f8";
--icon-voidcheck: "\e9f9";
--icon-dashboard: "\e9f2";
--icon-menu-dashboard: "\e9f2";
--icon-view-week: "\e960";
--icon-summarize: "\e9f0";
--icon-snippet-folder: "\e9f1";
--icon-shopping-bag: "\e9ee";
--icon-folder-open: "\e9ef";
--icon-monetization-on: "\e9e9";
--icon-receipt-long: "\e9ea";
--icon-download: "\e9eb";
--icon-find-in-page: "\e9ec";
--icon-draggable-up-down: "\ea30";
--icon-price-type-buy-path1: "\e957";
--icon-price-type-buy-path2: "\e958";
--icon-price-type-sell-path1: "\e9d2";
--icon-price-type-sell-path2: "\e9d3";
--icon-chart-info: "\e93a";
--icon-annotation: "\e964";
--icon-arrow: "\e965";
--icon-average: "\e966";
--icon-channel-path1: "\e967";
--icon-channel-path2: "\e968";
--icon-clear: "\e969";
--icon-continuous-path1: "\e96a";
--icon-continuous-path2: "\e96b";
--icon-crossline: "\e96c";
--icon-ellipse-path1: "\e96d";
--icon-ellipse-path2: "\e96e";
--icon-fibarc-path1: "\e96f";
--icon-fibarc-path2: "\e970";
--icon-fibfan-path1: "\e971";
--icon-fibfan-path2: "\e972";
--icon-fibonacci-path1: "\e973";
--icon-fibonacci-path2: "\e974";
--icon-fibonacci-path3: "\e975";
--icon-fibtimezone-path1: "\e976";
--icon-fibtimezone-path2: "\e977";
--icon-fibtimezone-path3: "\e978";
--icon-fibtimezone-path4: "\e979";
--icon-freeform: "\e97a";
--icon-gartley-path1: "\e97b";
--icon-gartley-path2: "\e97c";
--icon-horizontal-path1: "\e97d";
--icon-horizontal-path2: "\e97e";
--icon-line: "\e97f";
--icon-measure: "\e980";
--icon-none: "\e981";
--icon-pitchfork: "\e982";
--icon-ray: "\e983";
--icon-rectangle-path1: "\e984";
--icon-rectangle-path2: "\e985";
--icon-regression: "\e986";
--icon-segment: "\e987";
--icon-vertical-path1: "\e988";
--icon-vertical-path2: "\e989";
--icon-chart-indicators: "\e92c";
--icon-chartiq-indicators: "\e92c";
--icon-chart-grid: "\e95a";
--icon-grid: "\e95a";
--icon-chart-range: "\e955";
--icon-range-selector: "\e955";
--icon-chart-candles: "\e93d";
--icon-candles: "\e93d";
--icon-chart-minimize: "\e941";
--icon-close-zoom: "\e941";
--icon-chart-crosshairs: "\e946";
--icon-crosshair1: "\e946";
--icon-chart-draw: "\e947";
--icon-draw: "\e947";
--icon-chart-save: "\e948";
--icon-save11: "\e948";
--icon-chart-settings: "\e949";
--icon-settings11: "\e949";
--icon-chart-fullscreen: "\e94a";
--icon-zoom: "\e94a";
--icon-financial-news: "\ea42";
--icon-cake: "\ea3f";
--icon-football: "\ea40";
--icon-heart: "\ea41";
--icon-menu-logout: "\ea3e";
--icon-hamburger-menu: "\ea3b";
--icon-hamburger-menu-open: "\ea3c";
--icon-small-arrow-right: "\ea39";
--icon-small-arrow-left: "\ea3a";
--icon-small-arrow-down: "\ea38";
--icon-tier-ambassador: "\ea33";
--icon-tier-elite: "\ea34";
--icon-tier-premium: "\ea35";
--icon-user-account-fill: "\ea36";
--icon-corellian-analysis: "\ea32";
--icon-menu-corelliananalysis: "\ea32";
--icon-trader-points: "\ea2c";
--icon-premium: "\e910";
--icon-menu-premium: "\e910";
--icon-shield-plus: "\ea2f";
--icon-monetary-history: "\ea2a";
--icon-mailoutline-verified: "\ea27";
--icon-house-verified: "\ea28";
--icon-hand-new: "\ea24";
--icon-piechart: "\ea26";
--icon-imessage: "\ea23";
--icon-contactus-imessage: "\ea23";
--icon-risk-sl: "\ea20";
--icon-risk-tp: "\ea21";
--icon-risk-ts: "\ea22";
--icon-line-fill: "\ea1b";
--icon-contactus-line: "\ea1b";
--icon-viber-fill: "\ea1c";
--icon-contactus-viber: "\ea1c";
--icon-accredited-investor: "\ea19";
--icon-menu-accreditedinvestor: "\ea19";
--icon-plus-box: "\ea18";
--icon-chat-new: "\ea15";
--icon-contactus-chat: "\ea15";
--icon-account-circle: "\ea14";
--icon-basline-description-outline: "\ea0e";
--icon-baseline-password: "\ea0f";
--icon-cancel-circle-outline: "\ea10";
--icon-place: "\ea11";
--icon-Id-Card: "\ea12";
--icon-clock-time-eight-outline: "\ea13";
--icon-trailing-stop: "\ea0c";
--icon-help: "\ea0a";
--icon-row-layout: "\ea09";
--icon-market-closed-filled: "\ea08";
--icon-dark-mode: "\ea07";
--icon-equalizer: "\ea06";
--icon-phone-msg: "\ea03";
--icon-replay: "\ea04";
--icon-contact-form: "\e9ff";
--icon-contactus-contactform: "\e9ff";
--icon-sms: "\ea00";
--icon-menu-sms: "\ea00";
--icon-support-agent: "\ea01";
--icon-whatsapp: "\ea02";
--icon-contactus-whatsapp: "\ea02";
--icon-copy-new: "\e9f4";
--icon-share: "\e9f5";
--icon-invite-share: "\e9f5";
--icon-pro-account-new: "\e9f3";
--icon-menu-professionalaccount: "\e9f3";
--icon-mobile-phone: "\e9e7";
--icon-computer: "\e9e8";
--icon-check-square: "\e998";
--icon-check-circle: "\e997";
--icon-check: "\e901";
--icon-checked: "\e901";
--icon-display-settings-new: "\e9e6";
--icon-menu-display-settings: "\e9e6";
--icon-verify-location: "\e9e3";
--icon-verify-selfie: "\e9e4";
--icon-verify-id: "\e9e5";
--icon-watchlist-settings: "\e9e2";
--icon-menu-watchlists: "\e9e2";
--icon-cancel-o: "\e9e0";
--icon-rejected-o: "\e9e1";
--icon-funds-history: "\e9df";
--icon-take-profit: "\e9dd";
--icon-hand: "\e9de";
--icon-moderate: "\e9dc";
--icon-error-new: "\e9db";
--icon-position-force-close: "\e9da";
--icon-plus-me: "\e9d6";
--icon-menu-plusme: "\e9d6";
--icon-lock-open: "\e9d7";
--icon-invite-lock: "\e9d7";
--icon-crown: "\e9d8";
--icon-thumbs-up: "\e9d9";
--icon-tag3: "\e9d5";
--icon-fire: "\e9d4";
--icon-account-margin: "\e9d0";
--icon-settings-new: "\e9d1";
--icon-clock-time-expire: "\e9cf";
--icon-timer: "\e931";
--icon-check-circle-full: "\e961";
--icon-warning-new: "\e962";
--icon-warning-new-full: "\e98a";
--icon-live-alt: "\e9c7";
--icon-live: "\e9c9";
--icon-timer-fill: "\e9cc";
--icon-chart-settings-new: "\e9cd";
--icon-theme-settings: "\e9ce";
--icon-key: "\e95d";
--icon-funds: "\e9ed";
--icon-menu-funds: "\e9ed";
--icon-whatshot: "\e95f";
--icon-info: "\e95e";
--icon-insights: "\e945";
--icon-menu-insights: "\e945";
--icon-heighest-loss: "\e952";
--icon-highestpositionloss: "\e952";
--icon-heighest-porfit: "\e953";
--icon-highestpositionprofit: "\e953";
--icon-heighest-profit-loss: "\e954";
--icon-highest-position: "\e954";
--icon-trending-down-up: "\e959";
--icon-most-buy-sell: "\e959";
--icon-bar-chart-3: "\e951";
--icon-highestlosingpositionsrate: "\e951";
--icon-rejected: "\e93c";
--icon-news: "\e934";
--icon-menu-newsandmarketinsights: "\e934";
--icon-real-mode: "\e935";
--icon-menu-real-mode: "\e935";
--icon-real-mode-lock: "\e936";
--icon-target-lock: "\e937";
--icon-outline-security: "\e930";
--icon-transfer-funds: "\e92f";
--icon-pro-account: "\e933";
--icon-positionopened: "\e926";
--icon-brokerorderexpired: "\e928";
--icon-brokerorderfulfill: "\e92d";
--icon-positionclosed: "\e92e";
--icon-repeat-locked: "\e918";
--icon-switch-locked: "\e918";
--icon-academy: "\e907";
--icon-menu-trading-academy: "\e907";
--icon-account-balance: "\e90c";
--icon-menu-funds-general: "\e90c";
--icon-account-snapshot: "\e911";
--icon-menu-accountsnapshot: "\e911";
--icon-comission-history: "\e912";
--icon-menu-commissionshistory: "\e912";
--icon-deposit: "\e913";
--icon-menu-deposit: "\e913";
--icon-payment-methods: "\e914";
--icon-menu-paymentmethods: "\e914";
--icon-rebates: "\e915";
--icon-menu-rebates: "\e915";
--icon-withdraw: "\e916";
--icon-menu-withdraw: "\e916";
--icon-display-settings: "\e9c3";
--icon-documents: "\e9c4";
--icon-menu-terms: "\e9c4";
--icon-global-offices: "\e9c5";
--icon-menu-offices: "\e9c5";
--icon-menu-contact-us: "\e9c6";
--icon-qa-view: "\e9c8";
--icon-menu-qa-view: "\e9c8";
--icon-tools: "\e9ca";
--icon-menu-tools: "\e9ca";
--icon-user-privacy: "\e9cb";
--icon-menu-privacysettings: "\e9cb";
--icon-history: "\e906";
--icon-broker-history: "\e906";
--icon-menu-broker-history: "\e906";
--icon-briefcase-o: "\e900";
--icon-broker-briefcase-full: "\e900";
--icon-apply-all: "\e908";
--icon-check-multi-square: "\e908";
--icon-in-apps: "\e909";
--icon-celebration: "\e90a";
--icon-chartiq-view: "\e90a";
--icon-before-rollover: "\e90b";
--icon-target: "\e90b";
--icon-tradingactivity: "\e90d";
--icon-photoid: "\e90e";
--icon-passport: "\e90e";
--icon-tag2: "\e90f";
--icon-book: "\e90f";
--icon-menu-orders: "\e90f";
--icon-closed: "\ea2b";
--icon-suitcase: "\ea2b";
--icon-menu-closed-positions: "\ea2b";
--icon-menu-broker-positions: "\ea2b";
--icon-calendar1: "\e91a";
--icon-EconomicCalendar: "\e91a";
--icon-menu-economiccalendar: "\e91a";
--icon-money-1: "\e91c";
--icon-coins: "\e91c";
--icon-home1: "\e91d";
--icon-trade-icon: "\e91e";
--icon-candleChart: "\e91e";
--icon-mosttradedinstruments: "\e91e";
--icon-bell-add: "\e921";
--icon-add-alert: "\e921";
--icon-info-circle: "\e922";
--icon-info-icon: "\e922";
--icon-bell-o: "\e927";
--icon-bell: "\e927";
--icon-menu-alerts: "\e927";
--icon-bell-o2: "\e929";
--icon-bell-full: "\e929";
--icon-user: "\e92a";
--icon-profile-menu: "\e92a";
--icon-percent: "\e92b";
--icon-discount: "\e92b";
--icon-chat-disabled: "\e932";
--icon-chat: "\e93e";
--icon-livechat: "\e93e";
--icon-box-checked: "\e93f";
--icon-box-error: "\e940";
--icon-star: "\e942";
--icon-calendar: "\e943";
--icon-guaranteed-stop: "\e944";
--icon-drag: "\e95b";
--icon-log-in: "\e963";
--icon-power-off: "\e963";
--icon-plus-thin: "\e956";
--icon-graph: "\e923";
--icon-stats: "\e923";
--icon-menu-trade: "\e923";
--icon-trade2: "\e924";
--icon-list-alt: "\e924";
--icon-menu-positions: "\e924";
--icon-warning: "\f071";
--icon-chest-closed: "\e94b";
--icon-chest-open: "\e94c";
--icon-file-pdf: "\e606";
--icon-question-circle: "\f059";
--icon-exclamation-circle: "\f06a"
}
}
}
:root {
--medium-up: only screen and (
min-width: 56.063em);
--large-up: only screen and (
min-width: 73.063em);
--theme-color-alert: #d93e3e;
--theme-color-success: #13844e;
--nav-main-width-wide: 5.625rem;
--nav-main-width-narrow: 3.125rem;
--radius-sm: 0.25rem;
--radius: 0.5rem;
--radius-lg: 1rem;
--radius-pill: 62.4375rem;
--header-height: 3.5rem;
--gradient-cta-btn: var(--surface-tertiary-fixed) linear-gradient(90deg, var(--surface-secondary-fixed) 5%, var(--surface-tertiary-fixed) 33%);
--gradient-insights-icon: linear-gradient(to bottom right, var(--surface-accent-dark), var(--surface-tertiary-fixed));
--dir: var(--ltr);
--ltr: var(--dir,);
--rtl: var(--dir,);
--server-img-size-smalllogo: 2rem;
--server-img-size-mediumlogo: 4rem;
--server-img-size-largelogo: 8rem;
--server-img-size-smallicon: 1.5rem;
--server-img-size-mediumicon: 3rem;
--server-img-size-largeicon: 6rem;
--server-img-size-smallillustration: 7.5rem;
--server-img-size-mediumillustration: 15rem;
--server-img-size-largeillustration: 30rem
}
:root body.premium-profile {
--header-height: 3.625rem
}
@media only screen and (min-width: 56.063em)and (max-height: 50em) {
:root {
--nav-main-width-wide: 5.375rem
}
}
:root[dir=rtl] {
--dir: var(--rtl)
}
@layer assets {
@layer images {
:root {
--img-loading: url(/131711/Resources/dist/Resources/images/loading.gif);
--img-loading-dark: url(/131711/Resources/dist/Resources/images/loading_dm.gif);
--img-splash2: url(/131711/Resources/dist/Resources/images/splash2.png);
--img-trustProequity-logo: url(/131711/Resources/dist/Resources/images/trustProequity-logo.svg);
--img-trustProequity-logo-small: url(/131711/Resources/dist/Resources/images/trustProequity-logo-small.svg);
--img-trustProequity-logo-menu: url(/131711/Resources/dist/Resources/images/trustProequity-logo-menu.png);
--img-trustProequity-logo-dark-blue: url(/131711/Resources/dist/Resources/images/trustProequity-logo-dark-blue.png);
--img-cosmos-full-logo-white: url(/131711/Resources/dist/Resources/images/ccp/cosmos-full-logo-white.svg);
--img-cosmos-short-icon: url(/131711/Resources/dist/Resources/images/ccp/cosmos-short-icon.svg);
--img-cosmos-short-logo: url(/131711/Resources/dist/Resources/images/ccp/cosmos-short-logo.svg);
--img-topstep-header-logo: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-header-logo.svg);
--img-topstep-logo-short: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-logo-short.svg);
--img-topstep-small: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-small.svg);
--img-topstep-t-logo: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-t-logo.svg);
--img-topstep-x: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-x.svg);
--img-topstep-logo: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-logo.svg);
--img-topstep-logo-dm: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-logo_dm.svg);
--img-funds-pci-logo: url(/131711/Resources/dist/Resources/images/funds-logos/pci-icon.svg);
--img-funds-ssl-logo: url(/131711/Resources/dist/Resources/images/funds-logos/ssl-icon.svg);
--img-paypal-logo: url(/131711/Resources/dist/Resources/images/paypal-logo.png);
--img-funds-logo-bpay-tall: url(/131711/Resources/dist/Resources/images/funds-logos/logo-bpay-tall.png);
--img-funds-logo-other: url(/131711/Resources/dist/Resources/images/funds-logos/logo-other.png);
--img-funds-logo-card: url(/131711/Resources/dist/Resources/images/funds-logos/logo-card.png);
--img-funds-logo-card-error: url(/131711/Resources/dist/Resources/images/funds-logos/logo-card-error.png);
--img-funds-logo-amex: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-amex.svg);
--img-funds-logo-dankort: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-dankort.svg);
--img-funds-logo-mastercard: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-mastercard.svg);
--img-funds-logo-visa: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-visa.svg);
--img-funds-logo-diners: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-diners.svg);
--img-funds-logo-unionpay: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-unionpay.svg);
--img-funds-logo-discover: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-discover.png);
--img-funds-logo-jcb: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-jcb.svg);
--img-funds-logo-isracard: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-isracard.png);
--img-funds-logo-uatp: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-uatp.png);
--img-funds-logo-maestro: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-maestro.svg);
--img-funds-logo-paypal: url(/131711/Resources/dist/Resources/images/funds-logos/logo-paypal.svg);
--img-funds-logo-paypal-long: url(/131711/Resources/dist/Resources/images/funds-logos/paypal-logo.svg);
--img-funds-logo-skrill: url(/131711/Resources/dist/Resources/images/funds-logos/logo-skrill.svg);
--img-funds-logo-cashu: url(/131711/Resources/dist/Resources/images/funds-logos/logo-cashu.svg);
--img-funds-logo-wire: url(/131711/Resources/dist/Resources/images/funds-logos/logo-wire.svg);
--img-funds-logo-transfer-funds: url(/131711/Resources/dist/Resources/images/funds-logos/logo-transfer-funds.svg);
--img-funds-logo-western-union: url(/131711/Resources/dist/Resources/images/funds-logos/logo-western-union.svg);
--img-funds-logo-giropay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-giropay.svg);
--img-funds-logo-ideal: url(/131711/Resources/dist/Resources/images/funds-logos/logo-ideal.svg);
--img-funds-logo-enets: url(/131711/Resources/dist/Resources/images/funds-logos/logo-enets.svg);
--img-funds-logo-bpay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-bpay.svg);
--img-funds-logo-eps: url(/131711/Resources/dist/Resources/images/funds-logos/logo-eps.png);
--img-funds-logo-poli: url(/131711/Resources/dist/Resources/images/funds-logos/logo-poli.png);
--img-funds-logo-przelewy: url(/131711/Resources/dist/Resources/images/funds-logos/logo-przelewy.png);
--img-funds-logo-sofort: url(/131711/Resources/dist/Resources/images/funds-logos/logo-sofort.svg);
--img-funds-logo-direct-debit: url(/131711/Resources/dist/Resources/images/funds-logos/logo-direct-debit.svg);
--img-funds-logo-epaybg: url(/131711/Resources/dist/Resources/images/funds-logos/logo-epaybg.png);
--img-funds-logo-rapid: url(/131711/Resources/dist/Resources/images/funds-logos/logo-rapid.png);
--img-funds-logo-ing: url(/131711/Resources/dist/Resources/images/funds-logos/logo-ing.svg);
--img-funds-logo-astropay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-astropay.png);
--img-funds-logo-multibanco: url(/131711/Resources/dist/Resources/images/funds-logos/logo-multibanco.png);
--img-funds-logo-neteller: url(/131711/Resources/dist/Resources/images/funds-logos/logo-neteller.png);
--img-funds-logo-trustly: url(/131711/Resources/dist/Resources/images/funds-logos/logo-trustly.svg);
--img-funds-logo-nordea: url(/131711/Resources/dist/Resources/images/funds-logos/logo-nordea.svg);
--img-funds-logo-mybank: url(/131711/Resources/dist/Resources/images/funds-logos/logo-mybank.svg);
--img-funds-logo-klarna: url(/131711/Resources/dist/Resources/images/funds-logos/logo-klarna.svg);
--img-funds-logo-applepay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-applepay.png);
--img-funds-logo-blik: url(/131711/Resources/dist/Resources/images/funds-logos/logo-blik.svg);
--img-funds-logo-paynow: url(/131711/Resources/dist/Resources/images/funds-logos/logo-paynow.svg);
--img-funds-logo-googlepay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-googlepay.svg);
--img-funds-logo-ach: url(/131711/Resources/dist/Resources/images/funds-logos/logo-ach.svg);
--img-funds-logo-billing-system: url(/131711/Resources/dist/Resources/images/funds-logos/logo-billing-system.svg);
--img-funds-logo-open-banking: url(/131711/Resources/dist/Resources/images/funds-logos/logo-open-banking.svg);
--img-funds-logo-barclays: url(/131711/Resources/dist/Resources/images/logo-barclays.png);
--img-funds-logo-leumi: url(/131711/Resources/dist/Resources/images/logo-leumi.png);
--img-funds-logo-abnamro: url(/131711/Resources/dist/Resources/images/logo-abnamro.png);
--img-funds-logo-ibb: url(/131711/Resources/dist/Resources/images/logo-ibb.png);
--img-funds-logo-commonwealthbankofaustralia: url(/131711/Resources/dist/Resources/images/logo-commonwealthbankofaustralia.png);
--img-funds-logo-santander: url(/131711/Resources/dist/Resources/images/logo-santander.png);
--img-funds-logo-eurobank: url(/131711/Resources/dist/Resources/images/logo-eurobank.png);
--img-funds-logo-deutscheBank: url(/131711/Resources/dist/Resources/images/logo-deutscheBank.png);
--img-funds-logo-westpac: url(/131711/Resources/dist/Resources/images/funds-logos/logo-westpac.png);
--img-funds-logo-uob: url(/131711/Resources/dist/Resources/images/funds-logos/logo-uob.png);
--img-logo-investingcom: url(/131711/Resources/dist/Resources/images/logo-investingcom.png);
--img-logo-barchart: url(/131711/Resources/dist/Resources/images/logo-barchart.png);
--img-logo-finanzennet: url(/131711/Resources/dist/Resources/images/logo-finanzennet.png);
--img-setup-2fa: url(/131711/Resources/dist/Resources/images/setup-2fa.svg);
--img-signin-plus-bg: url(/131711/Resources/dist/Resources/images/signin-plus-bg.svg);
--img-contact-us: url(/131711/Resources/dist/Resources/images/contact-us.svg);
--img-pre-push: url(/131711/Resources/dist/Resources/images/pre-push.svg);
--img-old-browser-main: url(/131711/Resources/dist/Resources/images/browserEOLDialog/old-browser-main.png);
--img-chrome-icon: url(/131711/Resources/dist/Resources/images/browserEOLDialog/chrome-icon.png);
--img-edge-icon: url(/131711/Resources/dist/Resources/images/browserEOLDialog/edge-icon.png);
--img-ff-icon: url(/131711/Resources/dist/Resources/images/browserEOLDialog/ff-icon.png);
--img-safari-icon: url(/131711/Resources/dist/Resources/images/browserEOLDialog/safari-icon.png);
--img-gift: url(/131711/Resources/dist/Resources/images/gift.png);
--img-rotate-screen: url(/131711/Resources/dist/Resources/images/rotate-screen.png);
--img-pattern-tile: url(/131711/Resources/dist/Resources/images/pattern-tile-bg.png);
--img-logoTrustProequity: url(/131711/Resources/dist/Resources/images/logoTrustProequity.svg);
--img-singpass: url(/131711/Resources/dist/Resources/images/singpass.svg);
--img-on-boarding-welcome-shield: url(/131711/Resources/dist/Resources/images/on-boarding-welcome-shield.svg);
--img-on-boarding-welcome-mobile: url(/131711/Resources/dist/Resources/images/on-boarding-welcome-mobile.svg);
--img-on-boarding-welcome: url(/131711/Resources/dist/Resources/images/on-boarding-welcome.svg);
--img-center-fallback: url(/131711/Resources/dist/Resources/images/img-center-fallback.svg);
--img-bullet: url(/131711/Resources/dist/Resources/images/bullet.png);
--img-insights-card-bg: url(/131711/Resources/dist/Resources/images/insights-card-bg.svg);
--img-insights-card-bg-rtl: url(/131711/Resources/dist/Resources/images/insights-card-bg-rtl.svg);
--img-gold-badge: url(/131711/Resources/dist/Resources/images/account/gold-badge.svg);
--img-silver-badge: url(/131711/Resources/dist/Resources/images/account/silver-badge.svg);
--img-platinum-badge: url(/131711/Resources/dist/Resources/images/account/platinum-badge.svg);
--img-premium-badge: url(/131711/Resources/dist/Resources/images/account/premium-badge.svg);
--img-premium-logo: url(/131711/Resources/dist/Resources/images/account/premium-logo.svg);
--img-mobile-store-welcome: url(/131711/Resources/dist/Resources/images/mobile-store-welcome.svg);
--img-plus-me-mobile-bg: url(/131711/Resources/dist/Resources/images/plus-me-mobile-bg.svg);
--img-plus-me-bg: url(/131711/Resources/dist/Resources/images/plus-me-bg.svg);
--img-rebates-logo: url(/131711/Resources/dist/Resources/images/rebates-logo.png);
--img-clock-animated: url(/131711/Resources/dist/Resources/images/clock-animated.gif);
--img-hand-coins: url(/131711/Resources/dist/Resources/images/hand-coins.png);
--img-dialog-add-watchlist-bg: url(/131711/Resources/dist/Resources/images/dialog-add-watchlist-bg.svg);
--img-invite-friends-present-disabled: url(/131711/Resources/dist/Resources/images/invite-friends/invite-friends-present-disabled.svg);
--img-invite-friends-megaphone: url(/131711/Resources/dist/Resources/images/invite-friends/invite-friends-megaphone.svg);
--img-invite-friends-present: url(/131711/Resources/dist/Resources/images/invite-friends/invite-friends-present.svg);
--img-invite-friends-present-people: url(/131711/Resources/dist/Resources/images/invite-friends/invite-friends-present-people.svg);
--img-premium-background-desktop: url(/131711/Resources/dist/Resources/images/premium/premium-background-desktop.svg);
--img-elite-background-desktop: url(/131711/Resources/dist/Resources/images/premium/elite-background-desktop.svg);
--img-ambassador-background-desktop: url(/131711/Resources/dist/Resources/images/premium/ambassador-background-desktop.svg);
--img-regular-background-desktop: url(/131711/Resources/dist/Resources/images/premium/regular-background-desktop.svg);
--img-premium-background-mobile: url(/131711/Resources/dist/Resources/images/premium/premium-background-mobile.svg);
--img-elite-background-mobile: url(/131711/Resources/dist/Resources/images/premium/elite-background-mobile.svg);
--img-ambassador-background-mobile: url(/131711/Resources/dist/Resources/images/premium/ambassador-background-mobile.svg);
--img-regular-background-mobile: url(/131711/Resources/dist/Resources/images/premium/regular-background-mobile.svg);
--img-premium-dashboard-icon-img: url(/131711/Resources/dist/Resources/images/premium/premium-dashboard-icon.svg);
--img-elite-dashboard-icon-img: url(/131711/Resources/dist/Resources/images/premium/elite-dashboard-icon.svg);
--img-ambassador-dashboard-icon-img: url(/131711/Resources/dist/Resources/images/premium/ambassador-dashboard-icon.svg);
--img-regular-dashboard-icon-img: url(/131711/Resources/dist/Resources/images/premium/regular-dashboard-icon.svg);
--img-before-rollover: url(/131711/Resources/dist/Resources/images/notifications/before-rollover.svg);
--img-below-margin: url(/131711/Resources/dist/Resources/images/notifications/below-margin.svg);
--img-braze-default: url(/131711/Resources/dist/Resources/images/notifications/braze-default.svg);
--img-cashier-events: url(/131711/Resources/dist/Resources/images/notifications/cashier-events.svg);
--img-document-rejected: url(/131711/Resources/dist/Resources/images/notifications/document-rejected.svg);
--img-earnings-release: url(/131711/Resources/dist/Resources/images/notifications/earnings-release.svg);
--img-financial-events: url(/131711/Resources/dist/Resources/images/notifications/financial-events.svg);
--img-general-events: url(/131711/Resources/dist/Resources/images/notifications/general-events.svg);
--img-margin-alert: url(/131711/Resources/dist/Resources/images/notifications/margin-alert.svg);
--img-position-closed: url(/131711/Resources/dist/Resources/images/notifications/position-closed.svg);
--img-position-opened: url(/131711/Resources/dist/Resources/images/notifications/position-opened.svg);
--img-rate-alert: url(/131711/Resources/dist/Resources/images/notifications/rate-alert.svg);
--img-rebate: url(/131711/Resources/dist/Resources/images/notifications/rebate.svg);
--img-regulated: url(/131711/Resources/dist/Resources/images/notifications/regulated.svg);
--img-regulation-event: url(/131711/Resources/dist/Resources/images/notifications/regulation-event.svg);
--img-system-default: url(/131711/Resources/dist/Resources/images/notifications/system-default.svg);
--img-trading: url(/131711/Resources/dist/Resources/images/notifications/trading.svg);
--img-user-instrument-alert: url(/131711/Resources/dist/Resources/images/notifications/user-instrument-alert.svg);
--img-verification-required: url(/131711/Resources/dist/Resources/images/notifications/verification-required.svg);
--img-withdrawal-approved: url(/131711/Resources/dist/Resources/images/notifications/withdrawal-approved.svg);
--img-sprite-dialog-success: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#success);
--img-sprite-dialog-warning: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#warning);
--img-sprite-dialog-error: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#error);
--img-sprite-dialog-info: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#info);
--img-sprite-dialog-confirmation: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#confirmation);
--img-sprite-empty-open-positions: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#open-positions);
--img-sprite-empty-orders: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#orders);
--img-sprite-empty-positions: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#positions);
--img-sprite-empty-history: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#history);
--img-sprite-empty-alerts: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#alerts);
--img-sprite-empty-reports: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#reports);
--img-sprite-empty-bonus: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#bonus);
--img-sprite-empty-search: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#search);
--img-sprite-empty-watchlists: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#watchlists);
--img-sprite-empty-error: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#error);
--img-sprite-empty-notifications: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#notifications)
}
:root.dark-mode {
--img-loading: url(/131711/Resources/dist/Resources/images/loading_dm.gif);
--img-topstep-logo: url(/131711/Resources/dist/Resources/images/ccp/topstep/topstep-logo_dm.svg);
--img-funds-pci-logo: url(/131711/Resources/dist/Resources/images/funds-logos/pci-icon_dm.svg);
--img-funds-ssl-logo: url(/131711/Resources/dist/Resources/images/funds-logos/ssl-icon_dm.svg);
--img-paypal-logo: url(/131711/Resources/dist/Resources/images/paypal-logo_dm.png);
--img-funds-logo-other: url(/131711/Resources/dist/Resources/images/funds-logos/logo-other_dm.png);
--img-funds-logo-card: url(/131711/Resources/dist/Resources/images/funds-logos/logo-card_dm.png);
--img-funds-logo-visa: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-visa_dm.svg);
--img-funds-logo-diners: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-diners_dm.svg);
--img-funds-logo-isracard: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-isracard_dm.png);
--img-funds-logo-maestro: url(/131711/Resources/dist/Resources/images/funds-cc-type/logo-maestro_dm.svg);
--img-funds-logo-paypal: url(/131711/Resources/dist/Resources/images/funds-logos/logo-paypal_dm.svg);
--img-funds-logo-paypal-long: url(/131711/Resources/dist/Resources/images/funds-logos/paypal-logo_dm.svg);
--img-funds-logo-skrill: url(/131711/Resources/dist/Resources/images/funds-logos/logo-skrill_dm.svg);
--img-funds-logo-cashu: url(/131711/Resources/dist/Resources/images/funds-logos/logo-cashu_dm.svg);
--img-funds-logo-wire: url(/131711/Resources/dist/Resources/images/funds-logos/logo-wire_dm.svg);
--img-funds-logo-transfer-funds: url(/131711/Resources/dist/Resources/images/funds-logos/logo-transfer-funds_dm.svg);
--img-funds-logo-poli: url(/131711/Resources/dist/Resources/images/funds-logos/logo-poli_dm.png);
--img-funds-logo-sofort: url(/131711/Resources/dist/Resources/images/funds-logos/logo-sofort_dm.svg);
--img-funds-logo-direct-debit: url(/131711/Resources/dist/Resources/images/funds-logos/logo-direct-debit_dm.svg);
--img-funds-logo-epaybg: url(/131711/Resources/dist/Resources/images/funds-logos/logo-epaybg_dm.png);
--img-funds-logo-rapid: url(/131711/Resources/dist/Resources/images/funds-logos/logo-rapid_dm.png);
--img-funds-logo-astropay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-astropay_dm.png);
--img-funds-logo-multibanco: url(/131711/Resources/dist/Resources/images/funds-logos/logo-multibanco_dm.png);
--img-funds-logo-trustly: url(/131711/Resources/dist/Resources/images/funds-logos/logo-trustly_dm.svg);
--img-funds-logo-nordea: url(/131711/Resources/dist/Resources/images/funds-logos/logo-nordea_dm.svg);
--img-funds-logo-mybank: url(/131711/Resources/dist/Resources/images/funds-logos/logo-mybank_dm.svg);
--img-funds-logo-applepay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-applepay_dm.png);
--img-funds-logo-paynow: url(/131711/Resources/dist/Resources/images/funds-logos/logo-paynow_dm.svg);
--img-funds-logo-googlepay: url(/131711/Resources/dist/Resources/images/funds-logos/logo-googlepay_dm.svg);
--img-funds-logo-ach: url(/131711/Resources/dist/Resources/images/funds-logos/logo-ach_dm.svg);
--img-funds-logo-billing-system: url(/131711/Resources/dist/Resources/images/funds-logos/logo-billing-system_dm.svg);
--img-funds-logo-open-banking: url(/131711/Resources/dist/Resources/images/funds-logos/logo-open-banking_dm.svg);
--img-funds-logo-abnamro: url(/131711/Resources/dist/Resources/images/logo-abnamro_dm.png);
--img-funds-logo-ibb: url(/131711/Resources/dist/Resources/images/logo-ibb_dm.png);
--img-funds-logo-commonwealthbankofaustralia: url(/131711/Resources/dist/Resources/images/logo-commonwealthbankofaustralia_dm.png);
--img-funds-logo-deutscheBank: url(/131711/Resources/dist/Resources/images/logo-deutscheBank_dm.png);
--img-funds-logo-uob: url(/131711/Resources/dist/Resources/images/funds-logos/logo-uob_dm.png);
--img-pattern-tile: url(/131711/Resources/dist/Resources/images/pattern-tile-bg_dm.png);
--img-logoTrustProequity: url(/131711/Resources/dist/Resources/images/logoTrustProequity_dm.svg);
--img-singpass: url(/131711/Resources/dist/Resources/images/singpass_dm.svg);
--img-center-fallback: url(/131711/Resources/dist/Resources/images/img-center-fallback_dm.svg);
--img-mobile-store-welcome: url(/131711/Resources/dist/Resources/images/mobile-store-welcome_dm.svg);
--img-rebates-logo: url(/131711/Resources/dist/Resources/images/rebates-logo_dm.png);
--img-clock-animated: url(/131711/Resources/dist/Resources/images/clock-animated_dm.gif);
--img-hand-coins: url(/131711/Resources/dist/Resources/images/hand-coins_dm.png);
--img-invite-friends-present-disabled: url(/131711/Resources/dist/Resources/images/invite-friends/invite-friends-present-disabled_dm.svg);
--img-before-rollover: url(/131711/Resources/dist/Resources/images/notifications/before-rollover_dm.svg);
--img-below-margin: url(/131711/Resources/dist/Resources/images/notifications/below-margin_dm.svg);
--img-braze-default: url(/131711/Resources/dist/Resources/images/notifications/braze-default_dm.svg);
--img-cashier-events: url(/131711/Resources/dist/Resources/images/notifications/cashier-events_dm.svg);
--img-document-rejected: url(/131711/Resources/dist/Resources/images/notifications/document-rejected_dm.svg);
--img-earnings-release: url(/131711/Resources/dist/Resources/images/notifications/earnings-release_dm.svg);
--img-financial-events: url(/131711/Resources/dist/Resources/images/notifications/financial-events_dm.svg);
--img-general-events: url(/131711/Resources/dist/Resources/images/notifications/general-events_dm.svg);
--img-margin-alert: url(/131711/Resources/dist/Resources/images/notifications/margin-alert_dm.svg);
--img-position-closed: url(/131711/Resources/dist/Resources/images/notifications/position-closed_dm.svg);
--img-position-opened: url(/131711/Resources/dist/Resources/images/notifications/position-opened_dm.svg);
--img-rate-alert: url(/131711/Resources/dist/Resources/images/notifications/rate-alert_dm.svg);
--img-rebate: url(/131711/Resources/dist/Resources/images/notifications/rebate_dm.svg);
--img-regulated: url(/131711/Resources/dist/Resources/images/notifications/regulated_dm.svg);
--img-regulation-event: url(/131711/Resources/dist/Resources/images/notifications/regulation-event_dm.svg);
--img-system-default: url(/131711/Resources/dist/Resources/images/notifications/system-default_dm.svg);
--img-trading: url(/131711/Resources/dist/Resources/images/notifications/trading_dm.svg);
--img-user-instrument-alert: url(/131711/Resources/dist/Resources/images/notifications/user-instrument-alert_dm.svg);
--img-verification-required: url(/131711/Resources/dist/Resources/images/notifications/verification-required_dm.svg);
--img-withdrawal-approved: url(/131711/Resources/dist/Resources/images/notifications/withdrawal-approved_dm.svg);
--img-sprite-dialog-success: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#success-dm);
--img-sprite-dialog-warning: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#warning-dm);
--img-sprite-dialog-error: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#error-dm);
--img-sprite-dialog-info: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#info-dm);
--img-sprite-dialog-confirmation: url(/131711/Resources/dist/Resources/images/dialog-types-image.svg#confirmation-dm);
--img-sprite-empty-open-positions: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#open-positions-dm);
--img-sprite-empty-orders: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#orders-dm);
--img-sprite-empty-positions: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#positions-dm);
--img-sprite-empty-history: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#history-dm);
--img-sprite-empty-alerts: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#alerts-dm);
--img-sprite-empty-reports: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#reports-dm);
--img-sprite-empty-bonus: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#bonus-dm);
--img-sprite-empty-search: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#search-dm);
--img-sprite-empty-watchlists: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#watchlists-dm);
--img-sprite-empty-error: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#error-dm);
--img-sprite-empty-notifications: url(/131711/Resources/dist/Resources/images/empty_screens_image.svg#notifications-dm)
}
}
}
:root.dark-mode .empty-image {
filter: grayscale(1)
}
@media only screen and (min-width: 56.063em) {
:root {
--server-img-size-smalllogo: 3rem;
--server-img-size-mediumlogo: 4.5rem;
--server-img-size-smallillustration: 8.75rem;
--server-img-size-mediumillustration: 17.5rem
}
}
*, :after, :before {
box-sizing: border-box
}
body, html {
font-size: 16px
}
img {
-ms-interpolation-mode: bicubic
}
html {
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em), only screen and (orientation: portrait)and (max-width: 38em) {
@supports (-webkit-touch-callout:none) {
@supports not (border-start-start-radius:1em) {
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em)and (orientation: landscape)and (max-width: 56em)and (max-height: 38em), only screen and (orientation: portrait)and (max-width: 38em)and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
html {
max-height: -webkit-fill-available
}
}
}@supports (border-start-start-radius:1em) {
html.ios-15:not(.crios) {
height: calc(100vh - 2px)
}
html.ios-15:not(.crios) body {
height: auto
}
html.ios-15:not(.crios) body .wrap {
box-sizing: border-box;
display: flex;
flex-direction: column;
height: calc(var(--composer-vh, 100vh) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
padding: 0
}
}
}
}
body {
color: var(--on-surface-regular);
overflow: clip
}
[data-rtl] {
direction: rtl !important;
unicode-bidi: embed !important
}
a {
color: var(--on-surface-link);
cursor: pointer;
text-decoration: none
}
a:active {
color: var(--on-surface-link-focused);
outline: 0
}
a:visited {
color: var(--on-surface-link)
}
@media only screen and (hover: hover)and (pointer: fine) {
a:hover {
color: var(--on-surface-link-focused);
outline: 0
}
}
button {
outline: 0
}
.button-base {
border-radius: 5rem;
transition: .2s ease-in-out
}
.button-base.wide {
padding: .375rem 1.5rem
}
.button-base.button-gradient {
background: var(--surface-secondary-fixed) linear-gradient(to right, var(--surface-secondary-fixed) 0, var(--surface-tertiary-fixed) 100%) no-repeat;
border: none;
color: var(--on-primary-regular)
}
.button-base.button-border {
background-color: transparent;
border: 1px solid var(--outline-button);
color: var(--on-surface-regular)
}
.button-base.active.button-gradient, .button-base:active.button-gradient, .button-base:hover.button-gradient {
background: var(--surface-tertiary-fixed);
color: var(--on-primary-regular)
}
.button-base.active.button-border, .button-base:active.button-border, .button-base:hover.button-border {
background-color: var(--surface-tertiary-fixed);
border-color: var(--outline-tertiary-fixed);
color: var(--on-primary-regular)
}
.button-base:disabled {
opacity: .4;
pointer-events: none
}
#feature-detection {
background-color: #0c2780;
bottom: 0;
color: hsla(0, 0%, 100%, .949);
display: block;
font-size: 1rem;
left: 0;
overflow: auto;
padding: 1.25rem;
position: absolute;
right: 0;
top: 0;
z-index: 99999
}
#feature-detection .logo {
background-image: url(/131711/Resources/dist/Resources/images/trustProequity-logo.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: auto 100%;
height: 1.8125em;
margin-bottom: 1.5em
}
#feature-detection .main-content {
margin: 0 auto;
max-width: 48rem
}
#feature-detection .main-content .side-image {
background-image: url(/131711/Resources/dist/Resources/images/browserEOLDialog/old-browser-main.png);
background-position: top;
background-repeat: no-repeat;
background-size: auto 100%;
height: 11.4rem;
margin: 0 auto 1rem;
max-width: 22.25rem
}
#feature-detection .main-content .content {
margin: .75rem auto 0;
max-width: 23.75rem;
padding: 0 1rem
}
#feature-detection .main-content .content h4 {
font-size: 1.5rem;
font-weight: 400
}
#feature-detection .main-content .links {
margin-top: 3.75rem;
text-align: center
}
#feature-detection .main-content .browser-link {
background-position: top;
background-repeat: no-repeat;
background-size: auto 4em;
display: inline-block;
font-size: .75rem;
margin-left: 1em;
padding: 5em .25em .25em;
vertical-align: top;
width: 5em
}
#feature-detection .main-content .browser-link:first-child {
margin-left: 0
}
#feature-detection .main-content .browser-link.chrome-icon {
background-image: url(/131711/Resources/dist/Resources/images/browserEOLDialog/chrome-icon.png)
}
#feature-detection .main-content .browser-link.edge-icon {
background-image: url(/131711/Resources/dist/Resources/images/browserEOLDialog/edge-icon.png)
}
#feature-detection .main-content .browser-link.ff-icon {
background-image: url(/131711/Resources/dist/Resources/images/browserEOLDialog/ff-icon.png)
}
#feature-detection .main-content .browser-link.safari-icon {
background-image: url(/131711/Resources/dist/Resources/images/browserEOLDialog/safari-icon.png)
}
#feature-detection a {
color: #589efe
}
#feature-detection .bottom-content {
font-size: .75rem;
margin-top: 5rem;
padding: 0 1rem;
text-align: center
}
@media only screen and (min-width: 56.063em) {
#feature-detection .logo {
margin-bottom: 6rem
}
#feature-detection .main-content .side-image {
height: 14.5rem;
margin-bottom: 0
}
#feature-detection .main-content .content, #feature-detection .main-content .links, #feature-detection .main-content .side-image {
float: left;
width: 100%
}
#feature-detection .main-content .browser-link {
margin-left: 3.5em
}
#feature-detection .bottom-content {
float: left;
margin-top: 10rem;
width: 100%
}
}
.rtl #feature-detection {
direction: rtl
}
.rtl #feature-detection .browser-link {
margin-left: 0;
margin-right: 1em
}
.rtl #feature-detection .browser-link:first-child {
margin-right: 0
}
@media only screen and (min-width: 56.063em) {
.rtl #feature-detection .main-content .content, .rtl #feature-detection .main-content .links, .rtl #feature-detection .main-content .side-image {
float: right
}
.rtl #feature-detection .main-content .browser-link {
margin-right: 3.5em
}
.rtl #feature-detection .bottom-content {
float: right
}
}
button, button[type=submit], input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: none;
background-clip: border-box;
border-style: solid;
border-width: 2px;
font-size: .9375rem;
font-weight: 400;
line-height: 1.333;
margin: 0;
min-height: 2rem;
min-width: 7.5rem;
padding: 4px 8px;
touch-action: manipulation
}
.win-textarea, input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {
background-clip: border-box;
border-radius: 0;
border-style: solid;
border-width: 2px;
box-sizing: border-box;
font-size: .9375rem;
font-weight: 400;
line-height: 1.333;
margin: .5rem 0;
min-width: 4rem;
outline: 0;
padding-block: .1875rem .3125rem;
padding-inline: .625rem .375rem;
-ms-user-select: element;
width: 18.5rem
}
input::-ms-value {
margin: 0;
padding: 0
}
.win-textarea, textarea {
overflow-y: auto;
resize: none
}
select:disabled {
opacity: .7
}
input[type=checkbox], input[type=radio] {
height: 1.625em;
margin: 6px;
width: 1.625em
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
margin-top: 0
}
h1 {
font-size: 2em
}
h2 {
font-size: 1.5em
}
h3 {
font-size: 1.17em
}
button:before {
display: inline-block
}
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
-webkit-appearance: none;
background-color: var(--surface-main);
border: 1px solid var(--outline-medium);
color: var(--on-surface-regular);
font-size: 1rem;
height: auto;
margin: 0;
width: 100%
}
:where(dialog) input[type=email], :where(dialog) input[type=number], :where(dialog) input[type=password], :where(dialog) input[type=search], :where(dialog) input[type=tel], :where(dialog) input[type=text], :where(dialog) input[type=url], :where(dialog) select, :where(dialog) textarea {
background-color: var(--surface-popup-main)
}
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, select:-webkit-autofill, select:-webkit-autofill:focus, select:-webkit-autofill:hover, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:hover {
-webkit-text-fill-color: var(--on-surface-regular);
-webkit-box-shadow: 0 0 0 1000px var(--surface-main) inset
}
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: var(--surface-main);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 35'%3E%3Cpath d='M15.1 13.8 21 21l5.8-7.2z'/%3E%3C/svg%3E");
background-position: var(--ltr, 100%) var(--rtl, 0) center;
background-repeat: no-repeat;
background-size: 30px;
font-family: inherit;
font-size: .875rem;
line-height: normal
}
select option {
padding: .75em
}
select::-ms-expand {
display: none
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.win-contentdialog .win-contentdialog-dialog {
min-height: 160px;
padding: .625rem
}
}
.win-contentdialog .win-contentdialog-commands.custom-button-fix {
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 0
}
.win-contentdialog .win-contentdialog-commands.custom-button-fix > button.win-button {
flex: 1 0 auto;
margin: 8px 4px 0;
max-width: 98%;
min-width: 0
}
.win-contentdialog .win-contentdialog-commands.custom-button-fix > button.win-button:last-child {
flex: 1 0 98%
}
.win-contentdialog .win-contentdialog-scroller {
max-height: 360px
}
.win-contentdialog-content {
padding: 1px 0
}
.win-contentdialog .win-contentdialog-dialog {
flex: 0 0 auto
}
.win-contentdialog .win-contentdialog-column0or1 {
display: none
}
.win-contentdialog.win-contentdialog-verticalalignment {
max-height: 100%
}
@media only screen and (max-width: 56em) {
.win-contentdialog.win-contentdialog-verticalalignment .win-contentdialog-dialog {
max-height: 94%
}
}
.wrap {
height: 100%;
min-width: 20rem
}
@media only screen and (min-width: 56.063em) {
.wrap {
display: flex;
min-height: 570px
}
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.wrap {
min-height: 475px
}
}
.container {
display: flex;
flex-direction: column;
height: 100%;
min-width: 20rem;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.container {
display: block;
width: 100%
}
}
@media only screen and (min-width: 56.063em)and (hover: hover)and (pointer: fine) {
.container {
inset-inline-start: 3.125rem;
position: absolute;
width: calc(100% - 3.125rem)
}
}
::selection {
background: var(--surface-tertiary-fixed);
color: var(--on-primary-regular);
-webkit-text-fill-color: var(--on-primary-regular)
}
::-webkit-selection {
background: var(--surface-tertiary-fixed);
color: var(--on-primary-regular);
-webkit-text-fill-color: var(--on-primary-regular)
}
option:checked, option:checked:hover, select:focus option:checked:hover {
background-color: var(--surface-tertiary-fixed);
color: var(--on-primary-regular-invert)
}
select:focus::-ms-value {
background-color: var(--surface-tertiary-fixed);
color: var(--on-primary-regular-invert)
}
button, input[type=button], input[type=reset], input[type=submit] {
border-width: 1px
}
input[type=text]::-ms-clear {
display: none
}
.hide, [data-hide=true], [data-show=false] {
display: none !important
}
.load-more {
background: var(--img-loading) no-repeat center center;
height: 184px;
padding: 3rem 0 6rem !important
}
.load-more.centered-vp {
left: 50%;
position: fixed;
top: 50%;
width: 3rem
}
.loading {
align-items: center !important;
display: flex;
height: 100%;
inset-inline-start: 0;
justify-content: center !important;
position: absolute;
top: 0;
width: 100%;
z-index: 99999
}
.loading label {
color: var(--on-surface-primary);
font-weight: 700;
padding: 1.25rem
}
.splash-on .loading label {
color: var(--on-primary-light);
margin-top: 10rem
}
.splash-on .loading label .win-ring {
background-image: var(--img-loading-dark)
}
.loading label .win-ring {
background: var(--img-loading) no-repeat center center;
display: inline-block;
height: 40px;
margin-inline-end: .625rem;
vertical-align: -50%;
width: 40px
}
.stores-badges {
display: flex;
justify-content: center
}
@media only screen and (max-width: 35em) {
.stores-badges {
margin-top: .5rem
}
}
.stores-badges > div {
margin: 0 .25rem;
overflow: hidden
}
.stores-badges-ios {
background-size: contain
}
.stores-badges .app-store {
background-position: 50% !important
}
@media only screen and (max-width: 35em) {
.stores-badges .app-store {
background-size: 100px !important;
height: 2rem;
width: 6.5rem
}
}
@media only screen and (min-width: 35.063em) {
.stores-badges .app-store {
height: 2.5rem;
width: 8.5rem
}
}
.stores-badges .google-play {
display: inline-block
}
@media only screen and (max-width: 35em) {
.stores-badges img {
margin: -.375rem -.375rem 0;
width: 7rem
}
}
@media only screen and (min-width: 35.063em) {
.stores-badges img {
margin: -.5625rem -.5rem 0;
width: 9.5rem
}
}
.splash {
animation: splashAnimation 7s ease infinite;
background-image: radial-gradient(circle, var(--surface-splash-gradient-1) 0, var(--surface-splash-gradient-2) 50%, var(--surface-splash-gradient-3) 100%);
background-size: 400% 400%;
height: 100vh;
inset-inline-start: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 99999
}
@media only screen and (max-width: 56em) {
.splash {
height: 100%
}
}
.splash-logo {
background: var(--img-splash2) center/90% auto no-repeat;
height: 100%;
margin: 0 auto;
max-width: 480px;
width: 100%
}
.cosmos-logo .splash-logo {
background-image: var(--img-cosmos-full-logo-white)
}
.splash .splash-video {
bottom: -100rem;
left: -100rem;
margin: auto;
min-height: 100%;
min-width: 100%;
opacity: .03;
position: fixed;
right: -100rem;
top: -100rem;
z-index: -1
}
.splash-text {
align-items: flex-end;
display: none;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 99999
}
@media only screen and (min-width: 56.063em) {
.splash-text {
align-items: center
}
}
.broker-new-user .splash-text {
display: flex
}
.inner-splash-text, .outer-splash-text {
background-color: hsla(0, 0%, 100%, .1);
border-radius: 2rem;
color: var(--on-primary-regular);
display: block;
font-size: 1.25rem;
line-height: 1.5;
margin: 0 1rem 2rem;
padding: 1em;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.inner-splash-text, .outer-splash-text {
margin: 20rem 1rem 0
}
}
@keyframes splashAnimation {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
.overlay {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 7000
}
.overlay, .wrap-login .overlay {
background-color: var(--overlay-loading)
}
.win-contentdialog {
z-index: 7000 !important
}
.win-contentdialog .win-contentdialog-commands {
flex-wrap: wrap;
justify-content: center
}
.win-contentdialog .win-contentdialog-commands > button.win-button {
flex: 0 0 auto;
margin-bottom: 4px;
min-width: 49%;
white-space: normal;
width: auto
}
.win-contentdialog .win-contentdialog-commands > button.win-contentdialog-commandspacer {
border: 0;
flex: 1 1 5%;
margin: 0;
min-height: 1px;
min-width: 0;
padding: 0
}
.win-contentdialog-dialog {
position: relative
}
.main {
flex: 1 1 auto;
height: calc(100% - 5.625rem);
min-height: 20rem;
overflow: hidden
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.main body.with-graph.hide-footer.hide-account-status {
height: 100%
}
.main body.with-graph.hide-footer {
height: calc(100% - 34px)
}
.main {
min-height: inherit
}
}
@media only screen and (min-width: 56.063em) {
.main {
height: calc(100% - 3.5rem)
}
.premium-profile .main {
height: calc(100% - 3.625rem)
}
}
.main > div {
height: 100%
}
.main > div > .pagecontrol {
animation: none !important;
height: 100%
}
.main > div > .pagecontrol > .trade-layout-container, .offcanvas {
height: 100%
}
.offcanvas {
overflow: hidden;
transition: .3s ease-in;
width: 100%;
will-change: auto
}
.offcanvas > div {
display: flex;
height: 100%;
position: relative
}
.sidebar-open .offcanvas {
transition: .5s ease-out
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-open .offcanvas {
transform: translateX(0)
}
}
@media only screen and (min-width: 56.063em) {
.sidebar-open .offcanvas {
transform: translateX(var(--ltr, -470px) var(--rtl, 470px))
}
.no-sidebar .offcanvas {
margin-inline-end: 0
}
}
@media only screen and (min-width: 73.063em) {
.offcanvas {
width: auto
}
.sidebar-open .offcanvas {
margin-inline-end: 30vw;
transform: none
}
}
@media only screen and (min-width: 90.063em) {
.sidebar-open .offcanvas {
margin-inline-end: 470px
}
}
.no-sidebar .offcanvas {
transition-duration: 0s
}
.trading {
flex: 0 0 100%;
height: 100%;
min-height: 100%
}
.trading > div, .trading > div > div {
display: flex;
height: 100%;
width: 100%
}
.trading-header {
display: none;
flex: 1 0 auto
}
.sidebar {
bottom: 34px;
inset-inline-end: 0;
position: absolute;
top: 3.5rem;
transform: translateX(var(--ltr, 100%) var(--rtl, -100%));
transition: .3s ease-in;
width: 100%;
will-change: transform
}
.premium-profile .sidebar {
top: 3.625rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.sidebar {
bottom: 0
}
}
@media only screen and (min-width: 56.063em) {
.sidebar {
bottom: 52px;
width: 470px
}
.no-sidebar .sidebar {
inset-inline-end: 0
}
}
@media only screen and (min-width: 73.063em) {
.sidebar {
width: 30vw
}
}
@media only screen and (min-width: 90.063em) {
.sidebar {
width: 470px
}
}
.sidebar-open .sidebar {
transform: translateX(0);
transition: .5s ease-out
}
.categories-instruments {
display: flex;
flex-direction: column;
height: 100%
}
.categories-instruments > div {
display: flex;
flex: 1 1 25%;
height: auto;
min-height: 25%;
width: 100%
}
.bonus-banner {
align-items: center;
color: var(--on-primary-regular);
cursor: pointer;
display: flex;
flex: 0 0 0px;
height: 0;
justify-content: space-between;
min-height: 0;
overflow: hidden;
padding: 0 .625rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.bonus-banner {
display: none
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.bonus-banner {
transition: all .5s ease-in-out
}
}
.bonus-banner > div {
flex: 3 0 25%
}
.bonus-banner .close {
color: var(--on-primary-regular);
display: inline-flex;
font-size: 1.5rem
}
.bonus-banner .img {
background-position: var(--ltr, 0) var(--rtl, right) 0;
background-repeat: no-repeat;
background-size: contain;
flex: 0 0 2rem;
min-width: 2rem
}
.bonus-banner {
background: var(--surface-secondary-fixed) linear-gradient(to right, var(--surface-secondary-fixed) 0, var(--surface-tertiary-fixed) 100%) no-repeat
}
.bonus-banner[data-show-bonus=true] {
flex: 0 1 auto;
height: auto;
min-height: 1px
}
@media only screen and (hover: hover)and (pointer: fine) {
.bonus-banner:hover {
background: var(--surface-tertiary-fixed)
}
}
.bonus-banner > div {
display: flex;
font-size: 1.125rem;
font-weight: 400;
justify-content: center;
padding: 1rem;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.bonus-banner > div {
font-size: 1.25rem;
padding: 1.5rem
}
}
.bonus-banner > div span {
line-height: 1.15em
}
.bonus-banner > div .icon:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
font-size: 1.5rem;
margin-top: -.25rem
}
@media only screen and (min-width: 56.063em) {
.bonus-banner > div .icon:before {
margin-top: 0
}
}
.bonus-banner > div .icon.register-state:before {
content: var(--ltr, "\e98f") var(--rtl, "\e98d")
}
.bonus-banner > div .icon.verify-state:before {
content: "\e9bd"
}
.bonus-banner > div .icon.deposit-state:before {
content: "\e913"
}
.bonus-banner > div .icon.bonus-state:before {
content: "\e9a6"
}
@media only screen and (min-width: 56.063em) {
.bonus-banner > div .icon.deposit-state:before {
margin-top: -1px
}
}
.bonus-banner .img {
background-image: var(--img-gift)
}
.bonus-banner div div + span {
margin: 0 .875em
}
.margin-warning {
--meter-close-pos: 15%;
--meter-alert-pos: 33%;
align-items: center;
background-color: var(--surface-alert-light);
border-bottom: 1px solid var(--outline-light);
display: grid;
grid-template:"icon title close" auto "content content content" auto "visual visual visual" auto "action action action" auto/min-content 1fr min-content;
justify-items: center
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.margin-warning {
display: none
}
}
.margin-warning:before {
grid-area: icon
}
.margin-warning h2 {
grid-area: title
}
.margin-warning p {
grid-area: content
}
.margin-warning .visual {
grid-area: visual
}
.margin-warning .action {
grid-area: action
}
.margin-warning .close {
grid-area: close
}
.margin-warning:after {
grid-area: content /content/ action / action
}
.margin-warning:after, .margin-warning:before, .margin-warning > * {
padding: 0 .75rem;
transition: all .3s ease-out
}
.margin-warning .action, .margin-warning .close, .margin-warning .visual, .margin-warning h2, .margin-warning p {
width: 100%
}
.margin-warning .action, .margin-warning .visual, .margin-warning p {
max-height: 0;
overflow: hidden;
position: relative;
z-index: 0
}
.open.margin-warning .action, .open.margin-warning .visual, .open.margin-warning p {
max-height: 10rem;
padding: .75rem
}
.margin-warning .visual .margin-meter span, .margin-warning p {
color: var(--on-surface-regular)
}
.margin-warning:before {
align-items: center;
align-self: stretch;
background-color: var(--surface-alert-medium);
color: var(--on-primary-regular);
display: flex;
font-size: 1.125rem
}
.margin-warning:after {
background-color: var(--surface-main);
content: "";
display: block;
height: 100%;
width: 100%
}
.margin-warning h2 {
color: var(--on-surface-alert-dark);
font-size: .875rem;
padding: .75rem
}
.margin-warning p {
font-size: .8125rem;
margin: 0
}
.margin-warning .visual {
align-content: center;
direction: ltr;
display: flex;
flex-wrap: wrap;
max-width: 21rem;
position: relative;
width: 100%;
--meter-color: var(--surface-alert)
}
.margin-warning .visual.med {
--meter-color: var(--surface-warning)
}
.margin-warning .visual.high {
--meter-color: var(--surface-success)
}
@media only screen and (min-width: 56.063em) {
.margin-warning .visual {
max-width: 20rem
}
}
@media only screen and (min-width: 73.063em) {
.margin-warning .visual {
max-width: 24rem
}
}
.margin-warning .visual .start {
color: var(--meter-color);
font-size: .75rem;
padding-bottom: .25rem;
text-align: left
}
.margin-warning .visual .margin-meter {
background-color: var(--surface-container-dim-extra-light);
border-radius: 4px;
flex: 0 0 100%;
height: 8px;
margin-bottom: 1rem;
position: relative
}
.margin-warning .visual .margin-meter span {
font-size: .6875rem;
position: absolute;
white-space: nowrap
}
.margin-warning .visual .margin-meter span:before {
background-color: var(--on-surface-light);
content: "";
display: block;
height: 12px;
left: 0;
position: absolute;
width: 1px
}
.margin-warning .visual .margin-meter span.alert-label, .margin-warning .visual .margin-meter span.close-label {
direction: var(--ltr, ltr) var(--rtl, rtl)
}
.margin-warning .visual .margin-meter span.close-label {
left: 4px;
margin-top: 4px;
top: 100%
}
.margin-warning .visual .margin-meter span.close-label:before {
bottom: 100%
}
.margin-warning .visual .margin-meter span.alert-label {
bottom: 100%;
left: var(--meter-alert-pos);
margin-bottom: 4px
}
.margin-warning .visual .margin-meter span.alert-label:before {
top: 100%
}
.margin-warning .visual .margin-meter-close {
background-color: var(--meter-color);
border-radius: inherit;
height: inherit;
min-width: 10%;
position: absolute;
width: var(--meter-close-pos)
}
.margin-warning .action {
text-align: center
}
.margin-warning .action button {
border-radius: 0
}
.margin-warning .close {
color: var(--on-surface-alert)
}
.margin-warning-container.active ~ section {
flex: none;
height: 0 !important;
min-height: 0
}
@media only screen and (min-width: 56.063em) {
.trading-header .margin-warning {
grid-template:"icon title visual action close" auto "icon content visual action close" auto/min-content minmax(min-content, 33%) 1fr min-content min-content
}
.trading-header .margin-warning:after {
display: none
}
.trading-header .margin-warning h2 {
padding: .75rem .75rem .5rem
}
.trading-header .margin-warning .action, .trading-header .margin-warning .visual, .trading-header .margin-warning p {
background-color: unset;
max-height: 10rem
}
.trading-header .margin-warning p {
color: var(--on-surface-alert-dark);
padding: 0 .75rem .75rem
}
.trading-header .margin-warning .visual {
padding: 1rem
}
.trading-header .margin-warning .visual .margin-meter {
background-color: var(--surface-main)
}
.trading-header .margin-warning .visual .margin-meter-alert {
background-color: var(--surface-alert-soft)
}
.trading-header .margin-warning .action {
padding: 0 2rem
}
}
.trading-header .margin-warning .close {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.trading-header .margin-warning .close:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.trading-header .margin-warning .close.active, .trading-header .margin-warning .close:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.trading-header .margin-warning .close:disabled {
opacity: .4;
pointer-events: none
}
.method-text {
border-top: 1px solid var(--outline-light);
display: flex;
flex-wrap: wrap;
padding: .75rem 0
}
.method-text > div {
align-self: flex-end;
flex: 0 1 100%
}
.method-text p, .method-text ul {
color: var(--on-surface-light);
font-size: .875rem;
margin: 0
}
.method-text ul {
list-style-type: none;
padding: 0
}
.method-text li {
padding-bottom: 1rem
}
.method-text li, .method-text p {
padding: .25rem 0;
padding-inline-start: 1.75rem;
position: relative
}
.method-text li:before, .method-text p:before {
font-size: 1.25rem;
inset-inline-start: 0;
position: absolute
}
.method-text li img, .method-text p img {
height: 2rem;
padding-top: .5rem
}
.method-text .increase-limits {
white-space: nowrap
}
.method-text .increase-limits:before {
content: "[ "
}
.method-text .increase-limits:after {
content: " ]"
}
.valid-text {
display: flex;
flex-wrap: wrap;
padding-inline-start: 0
}
@media only screen and (min-width: 56.063em) {
.valid-text {
padding-inline-start: 40px
}
}
.valid-text > div {
align-self: flex-end;
flex: 0 1 100%
}
.valid-text p {
border-top: 1px solid var(--outline-light);
color: var(--on-surface-light);
font-size: .875rem;
margin: 0;
padding: .75rem 0;
padding-inline-start: 3.75rem;
position: relative
}
.valid-text p:before {
font-size: 1.5rem;
inset-inline-start: 1rem;
position: absolute
}
.data-table {
margin: 1em 0 2em;
width: 100%
}
.data-table tr {
border-top: 1px dotted var(--outline-main);
line-height: 1.75em
}
.data-table td {
padding: .25em .5em
}
@media only screen and (min-width: 56.063em) {
.data-table td {
padding: 0 .5em
}
}
.data-table td:first-child {
color: var(--on-surface-medium)
}
.data-table td:last-child {
text-align: end;
white-space: nowrap
}
.data-table td:last-child a {
color: var(--on-surface-alert)
}
.data-table tfoot tr {
border-top: 1px solid var(--outline-main)
}
.account-validation .data-table th {
padding: .25em .5em;
text-align: start
}
.account-validation .data-table td:last-child {
text-align: start
}
.desktop-tooltip-trigger {
cursor: help;
display: inline-block;
font-size: 1.5rem;
padding: 0 0 0 .5em;
vertical-align: -15%
}
.mobile-tooltips .tooltip-trigger {
cursor: help;
display: inline-block !important;
font-size: 1.25rem;
padding: 0 .25em;
vertical-align: -15%
}
.tooltip-container {
display: inline-block;
height: 0;
overflow: visible;
position: relative;
width: 0
}
.tooltip {
background: var(--surface-tooltip-regular);
border-radius: .75rem;
bottom: 5%;
color: var(--on-primary-regular);
display: none;
font-size: 1rem;
font-weight: 400;
height: -moz-fit-content;
height: fit-content;
left: 10%;
line-height: 1.25em;
margin: auto;
max-height: 90%;
overflow-y: auto;
padding: 1em;
position: fixed;
right: 10%;
top: 5%;
white-space: pre-line;
z-index: 5001
}
.tap-to-close {
color: var(--on-primary-medium);
display: block;
font-size: .875em;
font-weight: 400;
padding: .625rem 0 0;
text-align: end
}
#tooltip-overlay {
background-color: var(--overlay-regular);
display: none;
height: 100%;
left: 0;
position: absolute;
right: auto;
top: 0;
width: 100%;
z-index: 5001
}
.no-phone-landscape {
display: none
}
@media only screen and (max-height: 23em) {
.no-phone-landscape {
background: var(--surface-main) var(--img-rotate-screen) no-repeat center center;
background-size: auto 50%;
display: block;
height: 100%;
left: 0;
position: fixed;
right: auto;
top: 0;
width: 100%;
z-index: 7000
}
}
#genericTooltip {
background: var(--surface-tooltip-regular);
border-radius: 4px;
box-shadow: 0 1px 1px 0 hsla(210, 1%, 43%, .08);
box-sizing: border-box;
color: var(--on-primary-regular);
cursor: default;
font-size: 12px;
overflow-wrap: break-word;
padding: .666em 1em;
pointer-events: none;
position: absolute;
text-align: center;
z-index: 100
}
#genericTooltip:after {
border-left: .625rem solid transparent;
border-right: .625rem solid transparent;
border-top: .625rem solid var(--surface-tooltip-regular);
bottom: -.625rem;
content: "";
height: 0;
left: 50%;
margin-left: -.625rem;
position: absolute;
width: 0
}
#genericTooltip.top:after {
border-bottom: .625rem solid var(--surface-tooltip-regular);
border-top-color: transparent;
bottom: auto;
top: -1.25rem
}
#genericTooltip.left:after {
left: .625rem;
margin: 0
}
#genericTooltip.right:after {
left: auto;
margin: 0;
right: .625rem
}
#genericTooltip.tooltip-in-dialog {
z-index: 6500
}
#livechat-compact-container {
bottom: .3125rem !important;
height: 24px !important;
left: auto !important;
right: .625rem !important;
width: 24px !important
}
@media only screen and (min-width: 56.063em) {
#livechat-compact-container {
bottom: .625rem !important;
height: 2rem !important;
width: 250px !important
}
}
#livechat-compact-view {
top: auto !important;
z-index: 1000 !important
}
#livechat-full {
left: auto !important;
right: 0 !important;
z-index: 1000 !important
}
.form button.icon-chat, .form button.icon-chat-disabled, .form button.icon-phone2, button.icon-chat, button.icon-chat-disabled, button.icon-phone2 {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 5rem;
color: var(--on-primary-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.form button.icon-chat-disabled:hover, .form button.icon-chat:hover, .form button.icon-phone2:hover, button.icon-chat-disabled:hover, button.icon-chat:hover, button.icon-phone2:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.form button.icon-chat-disabled.active, .form button.icon-chat-disabled:active, .form button.icon-chat.active, .form button.icon-chat:active, .form button.icon-phone2.active, .form button.icon-phone2:active, button.icon-chat-disabled.active, button.icon-chat-disabled:active, button.icon-chat.active, button.icon-chat:active, button.icon-phone2.active, button.icon-phone2:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.form button.icon-chat-disabled:disabled, .form button.icon-chat:disabled, .form button.icon-phone2:disabled, button.icon-chat-disabled:disabled, button.icon-chat:disabled, button.icon-phone2:disabled {
opacity: .4;
pointer-events: none
}
.form button.icon-chat-disabled:before, .form button.icon-chat:before, .form button.icon-phone2:before, button.icon-chat-disabled:before, button.icon-chat:before, button.icon-phone2:before {
padding-inline: 0 .3125rem;
position: relative;
top: 2px
}
.funds-chat {
padding: .625rem 0 0;
text-align: end
}
@media only screen and (min-width: 56.063em) {
.funds-chat {
padding: .625rem .625rem 0
}
}
.login-chat {
padding: 0;
text-align: end
}
.form .login-chat button.icon-chat {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.form .login-chat button.icon-chat:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.form .login-chat button.icon-chat.active, .form .login-chat button.icon-chat:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.form .login-chat button.icon-chat:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
body.hide-footer footer {
display: none
}
}
.ui-draggable-handle, .ui-sortable-handle {
touch-action: none
}
.ui-autocomplete {
background-color: var(--surface-popup-main);
border-color: var(--outline-medium);
border-style: solid;
border-width: 1px 2px 2px;
cursor: default;
left: 0;
list-style-type: none;
margin: 0;
max-height: 40vh;
outline: none;
overflow-x: hidden;
overflow-y: auto;
padding: .3125rem 0;
position: absolute;
top: 0
}
.ui-autocomplete.drop-shadow-list {
border-width: 1px 0 0;
box-shadow: 0 23px 80px .3125rem var(--shadow-container-emph)
}
@media only screen and (max-width: 56em) {
.ui-autocomplete {
border: none;
padding: 0
}
}
.ui-autocomplete li {
color: var(--on-surface-primary-medium);
font-size: 1em;
padding: 0
}
.ui-autocomplete li .ui-state-active, .ui-autocomplete li.ui-state-focus, .ui-autocomplete li:hover {
background-color: var(--surface-tertiary-fixed);
color: var(--on-primary-regular)
}
.ui-autocomplete li .ui-state-active span, .ui-autocomplete li.ui-state-focus span, .ui-autocomplete li:hover span {
color: var(--on-primary-regular)
}
.ui-autocomplete li > div {
padding: .3125rem .625rem
}
@media only screen and (max-width: 56em) {
.ui-autocomplete li > div {
padding: .625rem
}
}
.ui-autocomplete li span {
color: var(--on-surface-tertiary-fixed);
font-weight: 600
}
.ui-autocomplete li.has-logo > div {
align-items: center;
display: flex
}
.ui-autocomplete li.has-logo > div .instrument-logo-wrap {
display: block
}
.page {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
-ms-overflow-style: scrollbar
}
.page > div {
flex: 1 1 auto;
height: 100%;
padding-bottom: 0;
width: 100%
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.page > div {
padding: .625rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.page > div {
padding: 2rem 2.25rem
}
}
@media only screen and (min-width: 56.063em) {
.page > div {
display: flex;
flex-direction: column
}
}
.page.clean-layout > div {
padding: 0
}
.page.clean-layout .page-content {
max-width: 100%
}
@media only screen and (min-width: 56.063em) {
.page-layout {
display: flex;
justify-content: center
}
}
.page h2 {
margin: 0 0 .625rem;
padding: 0 0 .3125rem
}
@media only screen and (min-width: 56.063em) {
.page h2 {
flex: 0 1 auto
}
}
.page h2:empty {
margin: 0;
padding: 0
}
@media only screen and (max-width: 56em) {
.page > div > h2 {
display: none
}
}
@media only screen and (min-width: 56.063em) {
.page > div > h2 {
text-align: center
}
.page-content {
flex: 1 1 50%;
max-width: 75%;
min-width: 50%;
padding: 0 1.25rem 1.25rem
}
.page-content.wrapper-content {
padding: 0 0 1.25rem
}
}
@media only screen and (min-width: 73.063em) {
.page-content {
max-width: 66.6666%
}
}
@media only screen and (min-width: 90.063em) {
.page-content {
max-width: 1024px
}
}
.page-content .info-list-page ul .data-label, .page-content .info-list-page ul .value, .page-content .info-list-page ul span + span {
background-color: var(--surface-main)
}
@media only screen and (min-width: 90.063em) {
.page-thin {
margin: 0 auto;
max-width: 75%
}
}
.page .top-title {
padding-bottom: .25em
}
.page.full-height {
overflow-y: hidden
}
.page.full-height .page-layout {
flex: 1 1 50%;
max-height: 100%;
min-height: 50%
}
.page.full-height .page-content {
display: flex;
flex-direction: column
}
@media only screen and (max-width: 56em) {
.page.full-height > div {
display: flex;
flex-direction: column
}
.page.full-height .page-content {
height: 100%
}
.page.full-height .page-layout {
display: flex;
flex-direction: column;
height: 100%
}
.page.full-height .page-content {
flex: 1 1 50%;
max-height: 100%;
min-height: 50%
}
}
@media only screen and (min-width: 56.063em)and (max-width: 73em) {
.wrapper-content {
max-width: none
}
.wrapper-content > div {
margin: 0 auto;
max-width: 75%
}
.clean-layout .wrapper-content > div {
max-width: none
}
.page.full-height .wrapper-content > div {
width: 100%
}
}
@media only screen and (min-width: 73.063em)and (max-width: 90em) {
.wrapper-content {
max-width: none
}
.wrapper-content > div {
margin: 0 auto;
max-width: 66.6666%
}
.clean-layout .wrapper-content > div {
max-width: none
}
.page.full-height .wrapper-content > div {
width: 100%
}
}
@media only screen and (min-width: 56.063em) {
.wrapper-content .wide-page {
margin: 0 auto;
max-width: 1024px
}
}
.panel {
background-color: var(--surface-container-active-extra-light);
color: var(--on-surface-primary);
margin-bottom: .625rem;
padding: 1rem
}
.panel h3 {
font-size: 1rem;
padding-bottom: .25em
}
.panel > div {
align-items: baseline;
display: flex;
flex-wrap: wrap;
font-size: .875rem;
justify-content: flex-end
}
.panel p {
flex: 1 1 75%;
margin: 0;
padding: 0 0 .5em;
padding-inline-end: .5em
}
.panel button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 5rem;
color: var(--on-primary-regular);
flex: 0 0 auto;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.panel button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.panel button.active, .panel button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.panel button:disabled {
opacity: .4;
pointer-events: none
}
.panel button:before {
padding-inline: 0 .3125rem;
position: relative;
top: 2px
}
.dropmenu-link {
background-color: var(--surface-main);
color: var(--on-primary-regular);
display: block;
padding: .5rem
}
@media only screen and (min-width: 56.063em) {
.dropmenu-link {
display: none
}
}
.dropmenu-link:before {
display: block;
float: inline-end
}
#notifications, #notifications-rebate {
bottom: 34px;
display: flex;
flex-direction: column;
gap: .625rem;
inset-inline: 0;
margin: auto;
pointer-events: none;
position: fixed;
width: min(480px, 90%);
z-index: 8000
}
@media only screen and (min-width: 56.063em) {
#notifications, #notifications-rebate {
bottom: 52px
}
}
#notifications .notification, #notifications-rebate .notification {
align-items: center;
color: var(--on-primary-regular);
display: flex;
justify-content: space-between;
opacity: 0;
pointer-events: auto;
transition: all .3s ease-in-out .1s;
width: 90%;
z-index: 8000
}
#notifications .notification:hover, #notifications-rebate .notification:hover {
box-shadow: 0 0 1.25rem rgba(0, 0, 0, .5)
}
#notifications .notification.has-action:hover, #notifications-rebate .notification.has-action:hover {
cursor: pointer
}
#notifications .notification a, #notifications-rebate .notification a {
color: var(--on-primary-regular)
}
#notifications .notification .text-content, #notifications-rebate .notification .text-content {
display: block;
flex: 1 1 auto;
padding: 0 .625rem
}
#notifications .notification .close, #notifications-rebate .notification .close {
cursor: pointer
}
#notifications .notification em, #notifications-rebate .notification em {
font-weight: 400;
padding: 0 .25em
}
#notifications .show-notification, #notifications-rebate .show-notification {
opacity: 1
}
@media only screen and (min-width: 56.063em) {
#notifications #inactivityTimer {
margin-top: -90px
}
}
#notifications-rebate {
bottom: auto;
top: 52px
}
#notifications-rebate .notification, #notifications-rebate .notification a {
color: var(--on-surface-primary)
}
.cookies-policy-disclaimer {
background-color: var(--surface-popup-primary);
bottom: 0;
box-shadow: 0 -.3125rem .3125rem 0 var(--shadow-popup-container);
padding: .75rem;
position: absolute;
width: 100%;
z-index: 6001
}
.cookies-policy-disclaimer .wrapper {
align-items: center;
color: var(--on-primary-medium);
display: flex;
font-size: .875rem;
justify-content: center
}
@media only screen and (max-width: 56em) {
.cookies-policy-disclaimer .wrapper {
align-items: center;
box-shadow: none;
flex-direction: column;
justify-content: center;
width: auto
}
}
.cookies-policy-disclaimer .wrapper span {
flex: 0 1 auto
}
.cookies-policy-disclaimer .wrapper span a {
color: var(--on-primary-medium);
text-decoration: underline
}
.cookies-policy-disclaimer .wrapper button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
color: var(--on-primary-medium);
margin-inline-start: 1rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.cookies-policy-disclaimer .wrapper button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.cookies-policy-disclaimer .wrapper button.active, .cookies-policy-disclaimer .wrapper button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.cookies-policy-disclaimer .wrapper button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-width: 56em) {
.cookies-policy-disclaimer .wrapper button {
margin-top: .75rem
}
}
.close:before {
content: "\e9c0";
font-family: icoplus !important;
font-size: 1.5rem
}
.iframe-scroll-fix {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex
}
@media screen and (hover: hover)and (pointer: fine) {
.hide-scroll-for-desktop {
display: flex
}
}
.skeleton-box {
--anim-opacity: .2;
--anim-opacity-high: .5;
animation: shimmer 2s infinite;
background: hsla(0, 0%, 50%, .1) linear-gradient(90deg, hsla(0, 0%, 100%, 0), rgba(255, 255, 255, var(--anim-opacity)) 7%, rgba(255, 255, 255, var(--anim-opacity-high)) 20%, hsla(0, 0%, 100%, 0) 33%) 50% 0/300% auto;
border-radius: .375rem;
display: inline-block;
height: 3rem;
mix-blend-mode: luminosity;
width: 100%
}
.dark-mode .skeleton-box {
--anim-opacity: .1;
--anim-opacity-high: .25
}
.skeleton-box.inline {
height: auto;
vertical-align: bottom
}
@keyframes shimmer {
to {
background-position: -50% 0
}
}
#userAgreementDialog [data-hide=true], #userAgreementDialog [data-show=false] {
display: none !important
}
@media only screen and (max-width: 56em) {
.hide-for-small {
display: none !important
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
body.with-graph.hide-account-status header {
display: none
}
body.with-graph.hide-footer header {
flex: 0 1 50px;
max-height: 50px;
min-height: 50px
}
body.with-graph.hide-footer header > div {
height: 100%
}
}
header {
background-color: var(--surface-main-header);
color: var(--on-primary-regular);
display: flex;
height: 3.5rem;
max-height: 3.5rem;
min-height: 3.5rem;
padding: 0
}
@media only screen and (max-width: 56em) {
header {
z-index: 4001
}
}
@media only screen and (min-width: 56.063em) {
header {
padding: 0 1rem
}
}
header > div {
height: 3.5rem;
justify-content: space-between;
width: 100%
}
header .logo, header > div {
align-items: center;
display: flex
}
header .logo {
flex: 0 0 3rem;
justify-content: center;
order: 1
}
@media only screen and (min-width: 56.063em) {
header .logo {
flex: 0 0 auto
}
}
header .logo a {
line-height: 0;
order: var(--ltr, 0) var(--rtl, 1)
}
header .logo a.mobile-menu-toggle {
color: var(--on-primary-regular);
flex: 0 0 3rem;
padding: 0 1rem;
position: relative
}
@media only screen and (min-width: 56.063em) {
header .logo a.mobile-menu-toggle {
display: none
}
}
header .logo a.mobile-menu-toggle:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e938";
display: block;
font-size: 1.5rem
}
.badge-on header .logo a.mobile-menu-toggle:after, header .logo a.mobile-menu-toggle.show-badge:after {
background-color: var(--surface-alert);
border: 2px solid var(--outline-primary-dark);
border-radius: 5px;
content: "";
height: 10px;
left: 50%;
position: absolute;
top: -1px;
transform: translateX(4px);
width: 10px
}
header .logo a.logo-container {
display: none
}
@media only screen and (min-width: 56.063em) {
header .logo a.logo-container {
background: var(--img-trustProequity-logo-small) center/contain no-repeat;
display: block;
flex: 0 0 auto;
height: 2rem;
min-width: 3.5rem;
padding: 0
}
}
@media only screen and (min-width: 73.063em) {
header .logo a.logo-container {
background-image: var(--img-trustProequity-logo);
min-width: 7.5rem
}
}
header .select-product {
display: none
}
@media only screen and (min-width: 56.063em) {
header .select-product {
align-items: center;
display: flex;
flex: 1 0 auto;
flex-direction: var(--ltr, row) var(--rtl, row-reverse);
margin-left: .5rem
}
}
@media only screen and (min-width: 73.063em) {
header .select-product {
margin: 0 0 -.625rem .5rem
}
}
header .categories-wrapper {
display: flex;
flex: 2 0 25%;
min-width: 25%;
order: 2
}
header .categories-wrapper h1 {
font-size: 1rem;
margin: 0;
overflow: hidden;
padding: 0;
text-overflow: ellipsis
}
header .categories-wrapper h1 span {
display: inline;
line-height: 1.75em;
text-overflow: ellipsis;
white-space: nowrap
}
@media only screen and (min-width: 56.063em) {
header .categories-wrapper {
display: none
}
}
header .header-login div:last-child {
order: 2
}
header .header-login .logo a {
background: none !important
}
header .toggle-balance {
display: none;
order: 5
}
@media only screen and (min-width: 56.063em) {
header .toggle-balance {
display: block;
flex: 0 0 auto;
margin: 6px 1rem 0
}
}
header .toggle-balance button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
font-size: 1.25rem;
min-height: 1.25rem;
min-width: 1.25rem;
padding: .5em;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
header .toggle-balance button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
header .toggle-balance button.active, header .toggle-balance button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
header .toggle-balance button:disabled {
opacity: .4;
pointer-events: none
}
.hide-balance header .toggle-balance button:before {
content: "\e9a2"
}
.premium-profile header.main-header {
border: 0;
border-bottom: .125rem solid var(--surface-main-header);
border-image: linear-gradient(90deg, var(--local-color-start) 0, var(--local-color-end) 100%) 7;
box-shadow: none;
height: 3.625rem;
max-height: 3.625rem;
min-height: 3.625rem
}
.premium-state-v1 header.main-header {
border-image: linear-gradient(90deg, var(--surface-premium) 33.85%, var(--surface-premium-light) 75%, var(--surface-premium) 100%) 7
}
.premium-state-premium header.main-header {
--local-color-start: var(--plans-on-surface-premium-regular);
--local-color-end: var(--plans-on-surface-premium-low)
}
.premium-state-elite header.main-header {
--local-color-start: var(--plans-on-surface-elite-regular);
--local-color-end: var(--plans-on-surface-elite-low)
}
.premium-state-ambassador header.main-header {
--local-color-start: var(--plans-on-surface-ambassador-low);
--local-color-end: var(--plans-on-surface-ambassador-regular)
}
.ctx-button {
display: flex;
flex: 0 1 auto
}
@media only screen and (min-width: 56.063em) {
.ctx-button {
display: none
}
}
.ctx-button[data-button-function=categories] button.toggle-categories {
display: block
}
.sidebar-open .ctx-button[data-button-function=categories] button.toggle-categories {
display: none
}
.ctx-button[data-button-function=ctxButtonBrokerHistoryInfo] button.toggle-date-filter, .ctx-button[data-button-function=ctxFilterIcon] button.toggle-date-filter, .ctx-button[data-button-function=ctxFilter] button.toggle-date-filter {
display: block
}
.ctx-button[data-button-function=ctxFilterIcon] button.toggle-date-filter:before {
content: "\e95c"
}
.sidebar-open .ctx-button[data-button-function=ctxFilterIcon] button.toggle-date-filter, .sidebar-open .ctx-button[data-button-function=ctxFilter] button.toggle-date-filter {
display: none
}
.ctx-button button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-regular);
display: none;
flex: 0 0 48px;
font-size: 1.5rem;
line-height: 1em;
margin: 0;
min-height: 0;
min-width: 0;
padding: 0 .625rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.ctx-button button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.ctx-button button.active, .ctx-button button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.ctx-button button:disabled {
opacity: .4;
pointer-events: none
}
.ctx-button .ctx-info {
display: none;
flex: 0 0 48px
}
.ctx-button .ctx-info > span:before {
cursor: help;
font-size: 1.5rem
}
.ctx-button .ctx-info span, .mobile-tooltips .ctx-button .ctx-info > span:before {
display: none
}
.ctx-button .ctx-info .tooltip-trigger {
line-height: 1;
padding-top: .2em;
vertical-align: top
}
.ctx-button .ctx-info .tooltip-trigger:before {
content: "\e922";
display: block;
vertical-align: top
}
.ctx-button[data-button-function=ctxButtonBrokerHistoryInfo] .ctx-info, .ctx-button[data-button-function=ctxButtonBrokerHistoryInfo] .ctx-info .broker-commission-history-tooltip {
display: block
}
.search {
flex: 0 0 38px;
height: 2rem;
min-width: 2rem;
order: 3;
padding: 0
}
.search.side-bar-search {
flex: 0 1 auto;
padding: .625rem .625rem 0
}
.search.side-bar-search .phone-search-button {
min-height: 29px
}
@media only screen and (min-width: 56.063em) {
.search {
flex: 2 1 16.6666%;
max-width: 33.3333%;
padding-inline-start: .625rem
}
.search.side-bar-search {
max-width: 100%
}
.search.side-bar-search .phone-search-button {
color: var(--on-surface-medium);
inset-inline-end: 2px;
top: 2px
}
}
.search-box {
display: none !important
}
.search-box-phone {
display: flex;
position: relative;
z-index: 4001
}
.phone-search-button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
min-width: 2rem;
transition: .2s ease-in-out;
width: 36px
}
@media only screen and (hover: hover)and (pointer: fine) {
.phone-search-button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.phone-search-button.active, .phone-search-button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.phone-search-button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-width: 56em) {
.phone-search-button {
background-color: transparent;
border: none;
color: var(--on-primary-regular);
font-size: 19px;
line-height: 1;
min-width: 38px;
padding: 0;
z-index: 4002
}
}
@media only screen and (min-width: 56.063em) {
.phone-search-button {
border-width: 0;
inset-inline-end: 0;
position: absolute;
top: 0
}
}
header input[type=text].ui-autocomplete-input {
background-color: transparent !important;
border-width: 0;
border-bottom: 1px solid var(--outline-primary-extra-light);
color: var(--on-primary-medium);
font-size: 1rem;
margin: 0;
min-width: 0;
padding: 0;
width: 100%
}
@media only screen and (min-width: 56.063em) {
header input[type=text].ui-autocomplete-input {
height: 2rem;
padding-inline: .625rem 2rem;
width: 100%
}
}
header input[type=text].ui-autocomplete-input::placeholder {
color: var(--on-primary-light)
}
header input[type=text].ui-autocomplete-input:-ms-input-placeholder {
color: var(--on-primary-light)
}
header input[type=text].ui-autocomplete-input::-ms-input-placeholder {
color: var(--on-primary-light)
}
@media only screen and (max-width: 56em) {
header .ui-autocomplete-input-focus {
left: 0;
position: absolute;
top: 0;
z-index: 4003
}
header .ui-autocomplete-input-focus input[type=text].ui-autocomplete-input {
background-color: var(--surface-container-primary) !important;
border: none;
min-height: 3.5rem;
min-width: 100vw;
padding: .625rem 1rem;
padding-inline-end: 3.25rem;
z-index: 4002
}
header .ui-autocomplete-input-focus .phone-search-button {
bottom: .625rem;
inset-inline-end: .625rem;
position: absolute
}
}
header .ui-autocomplete {
border: none;
box-shadow: 0 0 1.25rem .3125rem var(--shadow-popup-container)
}
@media only screen and (max-width: 56em) {
header .ui-autocomplete {
box-shadow: none
}
}
header .ui-autocomplete.ui-front {
z-index: 4001
}
header .ui-autocomplete.ui-front.ui-widget-content li .ui-state-active, header .ui-autocomplete.ui-front.ui-widget-content li.ui-state-focus {
background-color: var(--surface-tertiary-fixed)
}
#product-switcher-overlay, #search-overlay {
background-color: transparent;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 4000
}
@media only screen and (max-width: 56em) {
#product-switcher-overlay, #search-overlay {
background-color: var(--overlay-regular)
}
}
#product-switcher-overlay {
z-index: 5003
}
.product-switcher {
background-color: var(--surface-popup-primary);
border-radius: 4px;
box-shadow: 0 0 8px 0 var(--shadow-popup-container);
color: var(--on-primary-regular);
padding: .25rem 1.5rem;
position: absolute;
text-align: center
}
@media only screen and (max-width: 56em) {
.product-switcher {
bottom: 2.125rem;
margin-bottom: 1rem
}
#cfd .product-switcher {
inset-inline-start: .625rem
}
#broker .product-switcher {
inset-inline-start: 2rem
}
}
@media only screen and (min-width: 56.063em) {
.product-switcher {
inset-inline-start: var(--ltr, 7.5rem) var(--rtl, 3.5rem);
margin-top: 1rem;
top: 3.5rem
}
.premium-profile .product-switcher {
top: 3.625rem
}
}
@media only screen and (min-width: 73.063em) {
.product-switcher {
inset-inline-start: var(--ltr, 11.5rem) var(--rtl, 4rem)
}
}
.product-switcher:before {
background-color: inherit;
border-radius: 1px;
content: "";
height: .75rem;
inset-inline-start: 1rem;
position: absolute;
transform: rotate(45deg);
width: .75rem
}
@media only screen and (max-width: 56em) {
.product-switcher:before {
bottom: -.37rem;
inset-inline-start: 2.5rem
}
}
@media only screen and (min-width: 56.063em) {
.product-switcher:before {
top: -.37rem
}
}
.product-switcher .product-switcher-buttons {
align-items: center;
display: flex;
margin: 1rem 0 1.25rem
}
.product-switcher .product-switcher-buttons a {
background-color: var(--surface-product-switch-invest);
border-radius: .25rem .25rem .25rem 0;
color: var(--on-primary-regular);
font-size: .8125rem;
font-weight: 600;
line-height: 1.5;
min-width: 4rem;
padding: 3px 6px;
text-transform: uppercase;
transition: .3s ease-in-out;
-webkit-user-select: none;
user-select: none
}
.product-switcher .product-switcher-buttons a:first-child {
background-color: var(--surface-product-switch-cfd)
}
@media only screen and (hover: hover)and (pointer: fine) {
.product-switcher .product-switcher-buttons a:not(.product-disabled):hover {
background-color: var(--surface-product-switch-invest-focused)
}
}
.product-switcher .product-switcher-buttons a.product-disabled {
cursor: default;
opacity: .5
}
.product-switcher .product-switcher-buttons span {
margin: 0 1rem
}
.product-switcher .product-switcher-bottom-line {
font-size: .6875rem;
margin-bottom: .25rem
}
.account-status {
display: none;
order: 4
}
@media only screen and (min-width: 56.063em) {
.account-status {
display: block;
flex: 0 0 58.3333%
}
}
.account-status ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.account-status ul {
align-items: center;
display: flex;
justify-content: space-around
}
}
.account-status ul li {
color: var(--on-primary-regular);
font-size: 1rem;
font-weight: 300;
margin: 0;
min-width: 4.5em;
padding: 0;
position: relative;
white-space: nowrap
}
.account-status ul li span, .account-status ul li strong, .account-status ul li:before {
transition: all .3s ease-in
}
@media only screen and (min-width: 56.063em) {
.account-status ul li {
font-size: 1.625vw;
padding-inline-start: .625rem
}
}
@media only screen and (min-width: 73.063em) {
.account-status ul li {
font-size: 1.375vw;
padding-inline-start: 40px
}
}
@media only screen and (min-width: 90.063em) {
.account-status ul li {
font-size: 1.25rem
}
}
.account-status ul li:before {
align-items: center;
color: var(--on-primary-light);
content: "â—â—â—â—â—â—";
display: flex;
font-size: 1.25rem;
height: 100%;
opacity: 0;
overflow: hidden;
position: absolute;
transform: scale(0)
}
.account-status ul li strong {
color: var(--on-primary-medium);
cursor: help;
display: block;
font-size: .75rem;
font-weight: 400
}
.account-status ul li span {
cursor: help
}
.account-status ul li .icon-warning {
cursor: default
}
.account-status ul li .icon-warning:before {
color: var(--on-primary-alert);
font-size: .875rem
}
.account-status ul li .icon-warning.pending:before {
color: var(--on-primary-pending)
}
.account-status ul li .icon-warning ~ a {
color: var(--on-primary-regular);
text-decoration: underline
}
.account-status ul li .icon-warning ~ a strong {
cursor: pointer
}
.account-status ul li span, .account-status ul li strong {
opacity: 1;
transform: scale(1)
}
@media only screen and (min-width: 56.063em) {
.account-status ul.has-bonus li {
font-size: 1.5vw
}
}
@media only screen and (min-width: 73.063em) {
.account-status ul.has-bonus li {
font-size: 1.25vw
}
}
@media only screen and (min-width: 90.063em) {
.account-status ul.has-bonus li {
font-size: 1.25rem
}
}
.hide-balance .account-status ul li:not(.exclude-balance) {
cursor: default
}
.hide-balance .account-status ul li:not(.exclude-balance):before {
opacity: .5;
transform: scale(1)
}
.hide-balance .account-status ul li:not(.exclude-balance) trustProequity-tooltip, .hide-balance .account-status ul li:not(.exclude-balance) span, .hide-balance .account-status ul li:not(.exclude-balance) strong {
opacity: 0;
transform: scale(0)
}
.account-status trustProequity-tooltip {
display: block
}
.account-status .account-balance-vertical-carousel {
align-items: center;
display: flex;
height: 3.5rem;
max-height: 3.5rem;
position: relative
}
.account-status .account-balance-vertical-carousel .scroll-section {
align-items: center;
display: flex;
flex-direction: column;
gap: .25rem;
height: 100%;
justify-content: center;
margin-inline: .75rem;
width: 1rem
}
.account-status .account-balance-vertical-carousel .scroll-section.margin-alert {
gap: 0
}
.account-status .account-balance-vertical-carousel .scroll-section .icon-warning {
color: var(--on-primary-alert);
height: .75rem;
margin-bottom: .25rem
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
cursor: pointer;
font-size: 1rem;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.active, .account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow:disabled {
opacity: .4;
pointer-events: none
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.disabled {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-disabled);
cursor: default;
pointer-events: none;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.disabled:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-disabled)
}
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.disabled.active, .account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.disabled:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-disabled)
}
.account-status .account-balance-vertical-carousel .scroll-section .scroll-arrow.disabled:disabled {
opacity: .4;
pointer-events: none
}
.account-status .account-balance-vertical-carousel .pop-over {
display: none;
height: -moz-fit-content;
height: fit-content;
inset-inline-start: -6rem;
position: absolute;
top: 100%;
z-index: 1000;
z-index: 6001
}
@media only screen and (min-width: 73.063em) {
.account-status .account-balance-vertical-carousel .pop-over {
inset-inline-start: 0
}
}
.account-status .account-balance-vertical-carousel .pop-over:before {
border-color: transparent transparent var(--surface-popup-main) transparent;
border-style: solid;
border-width: 0 .5rem .5rem;
content: "";
inset-inline-start: 25%;
position: absolute;
top: -.5rem;
transform: translateX(-50%)
}
@media only screen and (min-width: 73.063em) {
.account-status .account-balance-vertical-carousel .pop-over:before {
inset-inline-start: 15%
}
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over {
background-color: var(--surface-popup-main);
border-radius: .5rem;
box-shadow: 0 .25rem .5rem 0 var(--shadow-popup-container);
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title {
align-items: center;
display: flex;
font-size: .9375rem;
gap: 1rem;
justify-content: space-between;
padding-inline-end: 1.5rem;
padding-bottom: 1rem;
padding-inline-start: 2rem;
padding-top: 1rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-trade {
color: var(--on-surface-regular);
font-weight: 700
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a {
align-items: center;
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary-fixed);
display: flex;
gap: .5rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a.active, .account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a:disabled {
opacity: .4;
pointer-events: none
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-title .account-balance-pop-over-title-funds a:before {
font-size: 1.5rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-accounts-rows {
border-bottom: 1px dashed var(--outline-medium);
border-top: 1px dashed var(--outline-medium);
display: flex;
flex-direction: column;
justify-content: center;
max-height: calc(100dvh - 11.5rem);
overflow-y: auto
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between;
padding-inline-end: 1.5rem;
padding-bottom: .75rem;
padding-inline-start: 2rem;
padding-top: .75rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-type {
color: var(--on-surface-primary-medium);
font-size: .9375rem;
font-weight: 700;
min-width: 7rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-type.account-total {
color: var(--on-surface-regular)
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values {
flex: 1 1 auto
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul {
gap: .5rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul li {
flex: 1 1 25%;
padding: 0;
text-align: center
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul li span, .account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul li strong {
pointer-events: none
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul li span {
color: var(--on-surface-regular);
font-size: .9375rem;
font-weight: 600
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row-values ul li strong {
color: var(--on-surface-medium);
font-size: .75rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row .icon-check {
font-size: 1.5rem;
height: 1.5rem;
visibility: hidden;
width: 1.5rem
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row:hover {
background-color: var(--surface-row-emph-focused)
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row.selected {
background-color: var(--surface-row-emph-selected)
}
.account-status .account-balance-vertical-carousel .pop-over .account-balance-pop-over .account-balance-pop-over-row.selected .icon-check {
color: var(--on-surface-primary-fixed);
visibility: visible
}
.account-status .account-balance-vertical-carousel .sub-accounts-pop-over-overlay {
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 6000
}
.account-status .account-balance-vertical-carousel .account-cards-container {
height: 100%;
overflow: hidden;
width: 100%
}
.account-status .account-balance-vertical-carousel .account-cards-container .wrapper {
height: 100%;
position: relative;
transform: translateY(var(--carouselOffsetY, 0));
transition: transform .5s ease-in-out;
width: 100%
}
.account-status .account-balance-vertical-carousel .account-cards-container .wrapper .account-card {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
justify-content: space-between;
padding-bottom: .5rem;
padding-top: .5rem;
width: 100%
}
.account-status .account-balance-vertical-carousel .account-cards-container .wrapper .account-card .account-title {
align-items: center;
align-self: stretch;
color: var(--on-primary-medium);
display: flex;
font-size: clamp(.75rem, 1.5vw, 1rem);
font-weight: 700;
margin-bottom: -.5rem;
padding-inline-end: .75rem;
padding-bottom: .5rem
}
.account-status .account-balance-vertical-carousel .account-cards-container .wrapper .account-card .account-values {
width: 100%
}
.account-status .account-balance-vertical-carousel.is-desktop .pop-over:hover, .account-status .account-balance-vertical-carousel.is-desktop:has(.account-title:hover) .pop-over {
display: block
}
.account-status .account-balance-vertical-carousel.is-desktop .pop-over {
z-index: 1000
}
.account-status .account-balance-vertical-carousel.is-mobile-active .pop-over {
border-radius: .5rem;
display: block
}
.account-status .account-balance-vertical-carousel.is-mobile-active .sub-accounts-pop-over-overlay {
display: block
}
@media only screen and (min-width: 56.063em)and (max-width: 90em) {
.account-status .hide-small-desktop {
display: none
}
}
.notification-center {
display: block;
flex: 0 0 auto;
font-size: .8125rem;
height: 2rem;
margin-inline-end: 1rem;
min-width: 2rem;
order: 6
}
@media only screen and (min-width: 56.063em) {
.notification-center {
margin-inline-end: .5rem
}
}
.notification-center-button {
height: 100%;
width: 2rem
}
.notification-center-button .nc-counter {
align-items: center;
background-color: hsla(0, 0%, 100%, 0);
border-radius: 5rem;
cursor: pointer;
display: inline-flex;
font-size: .75rem;
height: 2rem;
justify-content: center;
position: relative;
transition: .3s ease-in-out;
width: 2rem;
z-index: 4002
}
.notification-center-button .nc-counter span {
opacity: .3;
pointer-events: none;
position: relative;
transition: .3s ease-in-out;
z-index: 100
}
.notification-center-button .nc-counter:after, .notification-center-button .nc-counter:before {
border: 2px solid hsla(0, 0%, 100%, .3);
border-radius: 5rem;
bottom: 0;
content: "";
display: block;
left: 0;
margin: auto;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transition: .6s ease-in-out
}
.notification-center-button .nc-counter:before {
border-color: hsla(0, 0%, 100%, .8);
height: 1.875rem;
margin-top: .065rem;
width: 1.875rem
}
.notification-center-button .nc-counter:after {
height: 1.5rem;
opacity: 0;
width: 1.5rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.notification-center-button .nc-counter:hover span {
opacity: 1
}
.notification-center-button .nc-counter:hover:after {
animation: notificationAnim 1.5s ease-in-out infinite
}
}
.notification-center-button .nc-counter.has-notification {
background-color: var(--surface-badge);
color: var(--on-primary-regular)
}
.notification-center-button .nc-counter.has-notification span {
opacity: 1;
pointer-events: auto
}
.notification-center-button .nc-counter.has-notification:before {
opacity: 0
}
.notification-center-button .nc-counter.has-notification:after {
animation: notificationAnim 3s ease-in-out infinite;
border-color: var(--surface-badge)
}
.notification-center.remove-z-index .notification-center-button .nc-counter {
z-index: auto
}
.notification-center-overlay {
background-color: transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 6000
}
.notification-center-dropdown {
background-color: var(--surface-popup-main);
box-shadow: 0 0 1.25rem .3125rem var(--shadow-popup-container);
height: 66%;
inset-inline-end: .625rem;
inset-inline-start: .625rem;
position: absolute;
top: 2.875rem;
z-index: 6001
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown {
height: auto;
inset-inline-end: 1.1rem;
inset-inline-start: auto
}
}
.notification-center-dropdown:before {
background: var(--surface-popup-main);
content: "";
display: block;
height: .875rem;
inset-inline-end: .9375rem;
position: absolute;
top: -.3125rem;
transform: rotate(45deg);
width: .875rem;
z-index: 6001
}
.notification-center-dropdown .nc-title {
align-items: center;
border-bottom: 1px solid var(--outline-medium);
color: var(--on-surface-regular);
display: flex;
font-size: .875rem;
height: 2.875rem;
justify-content: space-between;
padding: .5625rem .625rem;
position: relative;
z-index: 6001
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown .nc-title {
font-size: .75rem;
height: auto
}
}
.notification-center-dropdown .nc-title div {
text-align: end
}
.notification-center-dropdown .nc-title div button {
background: none;
border: none;
color: var(--on-surface-extra-light);
font-size: 1.375rem;
min-height: 1.625rem;
min-width: 1.625rem;
padding: 0;
position: relative
}
.notification-center-dropdown .nc-title div button:hover {
color: var(--on-surface-primary-fixed)
}
.notification-center-dropdown .nc-title div .icon-repeat {
font-size: 1.25rem;
margin-inline-end: .625rem
}
.notification-center-dropdown .nc-title div .icon-repeat:before {
top: 0
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown .nc-title div .icon-repeat {
font-size: 1.25rem;
margin-inline-end: .5rem;
top: -1px
}
}
.notification-center-dropdown .nc-scroll {
height: calc(100% - 2.875rem);
overflow-x: hidden;
overflow-y: auto
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown .nc-scroll {
max-height: 40.25vh;
min-height: 308px;
width: 350px
}
}
.notification-center-dropdown .nc-scroll .nc-no {
color: var(--on-surface-light);
display: block;
text-align: center
}
.notification-center-dropdown .nc-scroll .nc-no .empty-image {
aspect-ratio: 2/1;
background: var(--img-sprite-empty-notifications) no-repeat center;
margin: 15% auto 1rem;
width: 75%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.notification-center-dropdown .nc-scroll .nc-no .empty-image {
margin-top: 1rem;
width: 25%
}
}
@supports not (aspect-ratio:2/1) {
.notification-center-dropdown .nc-scroll .nc-no .empty-image:before {
content: "";
display: block;
padding-bottom: 50%
}
}
.notification-center-dropdown .nc-scroll .nc-no strong {
color: var(--on-surface-primary-extra-light);
display: block;
font-weight: 600;
margin: 1rem auto 0;
width: 54%
}
.notification-center-dropdown .nc-scroll .nc-refresh-bar {
animation: fadein 1s;
background-color: var(--surface-container-dim);
display: block;
font-size: 12px;
padding: 2px 9px .3125rem;
text-align: center
}
.notification-center-dropdown ul {
list-style: none;
margin: 0;
padding: 0
}
.notification-center-dropdown li {
background-color: var(--surface-row-emph-selected);
border-bottom: 1px solid var(--outline-primary-extra-light);
display: flex;
margin: 0;
padding: 6px 12px 12px;
transition: .3s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.notification-center-dropdown li:hover {
transition: .1s ease-in-out
}
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown li {
padding: .25rem .5625rem .675rem
}
}
.notification-center-dropdown li:hover {
background-color: var(--surface-row-emph-focused) !important;
cursor: pointer
}
.notification-center-dropdown li.was-engaged {
background-color: transparent
}
.notification-center-dropdown li.was-engaged:hover {
background-color: var(--surface-row-emph-focused) !important
}
.notification-center-dropdown li:last-child {
border: none
}
.notification-center-dropdown .icon-nc {
color: var(--on-surface-primary-medium);
flex: 0 1 2.875rem;
font-size: 1.625rem;
height: 2.875rem;
line-height: 0;
min-width: 2.875rem;
padding-top: .625rem;
text-align: center
}
.notification-center-dropdown .icon-nc.icon-calendar {
padding-top: .5625rem
}
.notification-center-dropdown .icon-nc.icon-exclamation-circle {
padding-inline-start: .25rem;
padding-top: .4375rem
}
.notification-center-dropdown .icon-nc.icon-coins {
padding-top: .25rem
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown .icon-nc {
flex: 0 1 2rem;
font-size: 1.375rem;
height: 2rem;
min-width: 2rem;
padding-top: .3125rem
}
.notification-center-dropdown .icon-nc.icon-calendar {
padding-top: .25rem
}
.notification-center-dropdown .icon-nc.icon-exclamation-circle {
font-size: 1.5rem;
padding-top: .1875rem
}
.notification-center-dropdown .icon-nc.icon-coins, .notification-center-dropdown .icon-nc.icon-coins-success {
padding-top: 0
}
}
.notification-center-dropdown .nc-content {
flex: 1 1 auto;
padding-inline-start: .8125rem
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown .nc-content {
padding-inline-start: .625rem
}
}
.notification-center-dropdown .nc-content p {
color: var(--on-surface-regular);
margin: 0;
padding: 0
}
.notification-center-dropdown .nc-content small {
color: var(--on-surface-primary-medium)
}
.notification-center-dropdown .in-apps-notification {
color: var(--on-surface-primary);
font-size: 1.5rem
}
.notification-center-dropdown .in-apps-notification:before {
display: block;
margin-top: -.25rem;
margin-inline-end: -.25rem;
margin-inline-start: .25rem
}
.notification-center-dropdown-rebrush {
--footer-height: 1.9375rem;
--notification-spacing: 1rem;
background-color: var(--surface-popup-main);
border-radius: .625rem;
box-shadow: 0 0 1.25rem .3125rem var(--shadow-popup-container);
display: flex;
flex-direction: column;
gap: 1rem;
margin: calc(var(--notification-spacing) / 2);
max-height: calc(100% - var(--header-height) - var(--footer-height) - var(--notification-spacing));
position: absolute;
top: var(--header-height);
width: calc(100% - var(--notification-spacing));
z-index: 6001
}
.notification-center-dropdown-rebrush > div {
margin-inline: calc(var(--notification-spacing) / 2)
}
.notification-center-dropdown-rebrush > div.nc-scroll {
margin-inline: 0;
padding-inline: calc(var(--notification-spacing) / 2)
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown-rebrush {
inset-inline-end: var(--notification-spacing);
inset-inline-start: auto;
margin: var(--notification-spacing);
margin-inline-end: .5rem;
max-height: calc(80% - var(--header-height) - var(--notification-spacing));
width: 28.4375rem
}
}
.notification-center-dropdown-rebrush .filter-buttons {
display: flex;
flex: 0 0 auto;
gap: .5rem;
padding-inline: calc(var(--notification-spacing) / 2)
}
.notification-center-dropdown-rebrush .filter-buttons button {
align-items: center;
background-color: var(--surface-container-dim-extra-light);
border: 0;
border-radius: 1rem;
color: var(--on-surface-medium);
flex: 0 0 auto;
font-size: .875rem;
height: 2.5rem;
justify-content: center;
letter-spacing: .25px;
line-height: 1.25rem;
min-width: auto;
padding: .625rem 1rem
}
.notification-center-dropdown-rebrush .filter-buttons button.selected {
background-color: var(--surface-button-primary);
color: var(--on-primary-regular);
cursor: default
}
.notification-center-dropdown-rebrush .filter-buttons button:not(.selected):hover {
background-color: var(--surface-button-selectable-hover)
}
.notification-center-dropdown-rebrush .nc-title {
align-items: center;
color: var(--on-surface-regular);
display: flex;
flex: 0 0 auto;
font-size: 1.125rem;
font-weight: 600;
height: 2.875rem;
justify-content: space-between;
padding-block-start: var(--notification-spacing);
padding-inline: calc(var(--notification-spacing) / 2);
position: relative;
z-index: 6001
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown-rebrush .nc-title {
height: auto
}
}
.notification-center-dropdown-rebrush .nc-title div {
text-align: end
}
.notification-center-dropdown-rebrush .nc-title div button {
background: none;
border: none;
color: var(--on-surface-medium);
font-size: 1.375rem;
min-height: 1.625rem;
min-width: 1.625rem;
padding: 0;
position: relative
}
.notification-center-dropdown-rebrush .nc-title div button:hover {
color: var(--on-surface-primary-fixed)
}
.notification-center-dropdown-rebrush .nc-title div .icon-repeat {
font-size: 1.25rem;
margin-inline-end: .625rem
}
.notification-center-dropdown-rebrush .nc-title div .icon-repeat:before {
top: 0
}
@media only screen and (min-width: 56.063em) {
.notification-center-dropdown-rebrush .nc-title div .icon-repeat {
font-size: 1.25rem;
margin-inline-end: .5rem;
top: -1px
}
}
.notification-center-dropdown-rebrush .nc-scroll {
flex: 1 1 100%;
height: calc(100% - 2.875rem);
overflow-x: hidden;
overflow-y: auto
}
.notification-center-dropdown-rebrush .nc-scroll .nc-no {
color: var(--on-surface-light);
display: block;
padding-block-end: 3rem;
text-align: center
}
.notification-center-dropdown-rebrush .nc-scroll .nc-no .empty-image {
aspect-ratio: 2/1;
background: var(--img-sprite-empty-notifications) no-repeat center;
margin: 15% auto 1rem;
width: 75%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.notification-center-dropdown-rebrush .nc-scroll .nc-no .empty-image {
margin-top: 1rem;
width: 25%
}
}
.notification-center-dropdown-rebrush .nc-scroll .nc-no strong {
color: var(--on-surface-primary-extra-light);
display: block;
font-weight: 600;
margin: 1rem auto 0;
width: 54%
}
.notification-center-dropdown-rebrush .nc-scroll .nc-refresh-bar {
animation: fadein 1s;
background: var(--img-loading) no-repeat center center;
height: 4.375rem;
margin-block-end: .5rem
}
@keyframes fadein {
0% {
height: 0;
opacity: 0
}
to {
height: 4.375rem;
opacity: 1
}
}
.notification-center-dropdown-rebrush ul {
display: flex;
flex-direction: column;
gap: calc(var(--notification-spacing) / 2);
list-style: none;
margin: 0;
padding: 0
}
.notification-center-dropdown-rebrush li {
background: var(--surface-popup-container-primary-light);
border: 1px solid transparent;
border-radius: .625rem;
display: flex;
gap: .75rem;
margin: 0;
padding: calc(var(--notification-spacing) / 2);
transition: .3s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.notification-center-dropdown-rebrush li:hover {
transition: .1s ease-in-out
}
}
.notification-center-dropdown-rebrush li.captioned-image {
flex-direction: column
}
.notification-center-dropdown-rebrush li.captioned-image .image-nc {
aspect-ratio: 439/170;
height: auto;
width: 100%
}
.notification-center-dropdown-rebrush li .logo-container {
font-size: 2.5rem;
margin-inline-end: 0
}
.notification-center-dropdown-rebrush li .logo-container .instrument-logo {
border-radius: .5rem
}
.notification-center-dropdown-rebrush li:hover {
background-color: var(--surface-popup-container-primary-light-focused);
border: 1px solid var(--outline-primary-extra-light);
cursor: pointer
}
.notification-center-dropdown-rebrush li.was-engaged {
background: inherit;
border: 1px solid var(--outline-light)
}
.notification-center-dropdown-rebrush li:last-child {
margin-block-end: .5rem
}
.notification-center-dropdown-rebrush .image-nc {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: .625rem;
display: flex;
flex: 0 0 auto;
height: 2.5rem;
width: 2.5rem
}
.notification-center-dropdown-rebrush .icon-nc {
flex: 0 0 2.5rem
}
.notification-center-dropdown-rebrush .nc-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: .25rem;
min-width: 0;
padding-inline-end: calc(var(--notification-spacing) / 2)
}
.notification-center-dropdown-rebrush .nc-content h3 {
color: var(--on-surface-regular);
font-size: .9375rem;
font-weight: 600
}
.notification-center-dropdown-rebrush .nc-content p {
color: var(--on-surface-regular);
font-size: .875rem;
line-height: 1.25rem;
margin: 0;
overflow-wrap: break-word;
padding: 0
}
.notification-center-dropdown-rebrush .nc-content small {
color: var(--on-surface-light);
font-size: .75rem;
letter-spacing: .4px;
line-height: 1rem
}
@keyframes notificationAnim {
0% {
border-width: .25rem;
opacity: 0;
transform: scale(1.5)
}
30% {
opacity: .8
}
to {
border-width: .25rem;
opacity: 0;
transform: scale(2.5)
}
}
.notify-img-before-rollover {
background: var(--img-before-rollover) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-below-margin {
background: var(--img-below-margin) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-braze-default {
background: var(--img-braze-default) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-cashier-events {
background: var(--img-cashier-events) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-document-rejected {
background: var(--img-document-rejected) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-earnings-release {
background: var(--img-earnings-release) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-financial-events {
background: var(--img-financial-events) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-general-events {
background: var(--img-general-events) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-margin-alert {
background: var(--img-margin-alert) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-position-closed {
background: var(--img-position-closed) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-position-opened {
background: var(--img-position-opened) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-rate-alert {
background: var(--img-rate-alert) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-rebate {
background: var(--img-rebate) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-regulated {
background: var(--img-regulated) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-regulation-event {
background: var(--img-regulation-event) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-system-default {
background: var(--img-system-default) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-trading {
background: var(--img-trading) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-user-instrument-alert {
background: var(--img-user-instrument-alert) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-verification-required {
background: var(--img-verification-required) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
.notify-img-withdrawal-approved {
background: var(--img-withdrawal-approved) no-repeat center/cover;
height: 2.5rem;
width: 2.5rem
}
#main-menu-overlay {
background-color: var(--overlay-light);
display: none;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 4002
}
@media only screen and (max-width: 56em) {
#main-menu-overlay {
z-index: 4001
}
}
@media only screen and (min-width: 56.063em) {
#main-menu-overlay {
inset-inline-start: 76px
}
}
.nav-menu {
height: 100%;
inset-inline-start: 0;
max-width: 0;
position: absolute;
right: auto;
top: 0;
transition: .3s ease-in-out;
width: 90%;
will-change: max-width;
z-index: 5001
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.nav-menu.open {
max-width: 21rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.nav-menu.open {
max-width: 26rem
}
}
@media only screen and (min-width: 56.063em) {
.nav-menu {
inset-inline-end: auto;
inset-inline-start: var(--nav-main-width-wide)
}
}
@media only screen and (min-width: 56.063em)and (hover: hover)and (pointer: fine) {
.nav-menu {
inset-inline-start: 3.75rem;
transition: .2s ease-in-out
}
.nav-menu.open {
inset-inline-start: var(--nav-main-width-wide)
}
}
.menu-wrap {
background-color: var(--surface-nav-menu);
display: block;
height: 100%;
overflow: hidden;
width: 100%;
z-index: 1
}
@media only screen and (min-width: 35.063em) {
.menu-wrap {
max-width: 0;
transition: max-width .3s ease-in-out;
width: auto
}
.open .menu-wrap {
max-width: 380px
}
}
.open .menu-wrap {
box-shadow: var(--ltr, 3rem) var(--rtl, -3rem) 0 4rem var(--shadow-menu)
}
.menu {
flex-direction: column;
height: 100%;
text-transform: capitalize
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.menu {
visibility: hidden
}
.open .menu {
display: flex;
visibility: visible
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.menu {
display: flex
}
}
.menu-hub {
flex: 1 1 auto;
min-height: 100px;
overflow-x: hidden;
overflow-y: auto
}
.menu-section {
color: var(--on-surface-primary)
}
.menu-section > ul li {
margin: 0;
padding: 0;
width: 100%
}
.menu-section > ul li, .menu-section > ul li a {
color: var(--on-surface-primary);
font-size: 1rem
}
.menu-section > ul li a {
align-items: center;
border-radius: .25rem;
display: flex;
font-weight: 400;
margin-top: .5rem;
padding: .625rem;
position: relative;
transition: .1s ease-in-out
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.menu-section > ul li a {
min-height: 2.5rem
}
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li a {
padding: .75rem 1rem
}
}
.menu-section > ul li a:before {
display: inline-flex;
font-size: 1rem;
justify-content: center;
margin-inline-end: 1rem;
position: absolute;
width: 1rem
}
.menu-section > ul li a.folder {
margin-top: 0;
padding-inline-end: 2rem
}
.menu-section > ul li a.folder:after {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--on-surface-primary-medium);
content: "\e999";
font-size: 1.125rem;
inset-inline-end: .625rem;
position: absolute
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li a.folder:after {
inset-inline-end: 1rem
}
}
.menu-section > ul li a.folder.open {
color: var(--on-surface-primary-light)
}
.menu-section > ul li a.folder.open:after {
color: var(--on-surface-primary-light);
content: "\e99c"
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-section > ul li a:hover {
background-color: var(--surface-container-tertiary-fixed)
}
.menu-section > ul li a:hover, .menu-section > ul li a:hover:after, .menu-section > ul li a:hover:before {
color: var(--on-primary-regular)
}
.menu-section > ul li a.open:hover {
background: none
}
.menu-section > ul li a.open:hover, .menu-section > ul li a.open:hover:after, .menu-section > ul li a.open:hover:before {
color: var(--on-surface-primary-fixed)
}
}
.menu-section > ul li a:active {
background-color: var(--surface-container-tertiary-fixed)
}
.menu-section > ul li a:active, .menu-section > ul li a:active:after {
color: var(--on-primary-regular)
}
.menu-section > ul li a.open:active {
background: none
}
.menu-section > ul li a.open:active, .menu-section > ul li a.open:active:after, .menu-section > ul li a.open:active:before {
color: var(--surface-container-tertiary-fixed)
}
.menu-section > ul li a.has-notifyicon {
padding-inline-end: 2.5rem;
position: relative
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li a.has-notifyicon {
padding-inline-end: 2.5rem
}
}
.menu-section > ul li a.has-notifyicon strong {
background-color: var(--surface-sub);
border-radius: .25rem;
color: var(--on-primary-regular);
font-size: .75rem;
inset-inline-end: .5rem;
line-height: 1;
padding: .25rem .375rem;
position: absolute;
top: .625rem
}
.menu-section > ul li a.has-notifyicon strong.menu-warning {
background-color: var(--surface-alert);
font-size: 12px;
height: 1.25rem;
text-align: center;
width: 1.25rem
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li a.has-notifyicon strong {
inset-inline-end: 1rem;
top: .75rem
}
}
.menu-section > ul li a.emphasized span {
font-weight: 700
}
.menu-section > ul li a .item-badge {
background-color: var(--surface-alert);
border-radius: .25rem;
display: none;
height: 6px;
inset-inline-start: var(--ltr, 1.5rem) var(--rtl, .375rem);
position: absolute;
top: 50%;
transform: translateY(-10px);
width: 6px
}
.badge-on .menu-section > ul li a.icon-menu-account .item-badge, .badge-on .menu-section > ul li a.icon-menu-plusme .item-badge, .menu-section > ul li a.show-badge .item-badge {
display: block
}
.menu-section > ul li.folder-container {
background-color: var(--surface-popup-container);
border-radius: .25rem;
margin-top: .5rem
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li ul li a {
padding: .5rem
}
}
.menu-section > ul li ul li a.folder:after {
inset-inline-end: .625rem
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul li ul li a.folder:after {
inset-inline-end: .5rem
}
}
.menu-section > ul li ul li ul {
padding: 0 .5rem .5rem
}
.menu-section > ul li ul li ul li {
padding-inline-start: 1.5rem
}
.menu-section > ul li ul li ul li a:before {
display: none
}
.menu-section > ul > li > a {
padding-inline-start: 2.625rem
}
.menu-section > ul > li > a:before {
inset-inline-start: .625rem
}
.menu-section > ul > li > a.icon-menu-funds:before, .menu-section > ul > li > a.icon-menu-insights:before {
font-size: 18px
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul > li > a {
padding-inline-start: 3rem
}
.menu-section > ul > li > a:before {
inset-inline-start: 1rem
}
.menu-section > ul > li > a.folder {
padding-inline-end: 2.5rem
}
.menu-section > ul > li > a .item-badge {
inset-inline-start: var(--ltr, 1.875rem) var(--rtl, .75rem)
}
}
.menu-section > ul > li > div > ul > li > a {
padding-inline-start: 2.625rem
}
.menu-section > ul > li > div > ul > li > a:before {
inset-inline-start: .625rem
}
@media only screen and (min-width: 56.063em) {
.menu-section > ul > li > div > ul > li > a {
padding-inline-start: 2.5rem
}
.menu-section > ul > li > div > ul > li > a:before {
inset-inline-start: .5rem
}
.menu-section > ul > li > div > ul > li > a .item-badge {
inset-inline-start: var(--ltr, 1.5rem) var(--rtl, .3125rem)
}
}
.menu-section ul {
list-style-type: none;
margin: 0;
padding: 0 .625rem .625rem
}
@media only screen and (min-width: 56.063em) {
.menu-section ul {
padding: 0 1rem 1rem
}
.menu-section .icon-menu-demo-mode:before, .menu-section .icon-menu-economiccalendar:before, .menu-section .icon-menu-home-screen:before, .menu-section .icon-menu-notification-settings:before, .menu-section .icon-menu-privacysettings:before, .menu-section .icon-menu-qa-view:before, .menu-section .icon-menu-security-settings:before {
transform: translateY(-1px)
}
.menu-section .icon-menu-layers:before {
content: "\e9a9"
}
.menu-section .folder:before {
transform: translateY(-1px)
}
}
.menu-footer {
background-color: var(--surface-nav-footer);
flex: 1 0 auto;
min-height: 6.675rem
}
@media only screen and (min-width: 56.063em) {
.menu-footer {
background-color: transparent;
flex: 0 0 auto;
min-height: 0
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.menu-footer {
display: none
}
}
.menu-footer ul {
display: grid;
grid-template-columns:1fr 1fr;
list-style-type: none;
margin: 0;
padding: .875rem;
grid-gap: .875rem;
gap: .875rem
}
@media only screen and (min-width: 56.063em) {
.menu-footer ul {
display: none
}
}
.menu-footer ul.has-bonus li, .menu-footer ul.has-pending li {
font-size: 1rem
}
.menu-footer ul li {
color: var(--on-primary-regular);
display: flex;
flex-direction: column;
font-size: .9375rem;
font-weight: 300;
margin: 0
}
.menu-footer ul li:before {
align-items: center;
color: var(--on-primary-light);
content: "â—â—â—â—â—â—";
display: flex;
font-size: 1.25rem;
opacity: 0;
overflow: hidden;
position: absolute;
transform: scale(0)
}
.menu-footer ul li span, .menu-footer ul li strong, .menu-footer ul li:before {
transition: all .3s ease-in
}
.menu-footer ul li span, .menu-footer ul li strong {
display: inline-block;
flex: 0 1 auto;
opacity: 1;
transform: scale(1)
}
.menu-footer ul li strong {
color: var(--on-primary-extra-light);
font-size: .8125rem;
font-weight: 400
}
.menu-footer ul li span {
cursor: help;
text-align: var(--ltr, start) var(--rtl, end)
}
.menu-footer ul li span.sum {
min-width: 6em
}
.menu-footer ul li .icon-warning {
cursor: default
}
.menu-footer ul li .icon-warning:before {
color: var(--on-primary-alert);
font-size: .875rem
}
.menu-footer ul li .icon-warning.pending:before {
color: var(--on-primary-pending)
}
.menu-footer ul li .icon-warning ~ a {
color: var(--on-primary-regular);
text-decoration: underline
}
.menu-footer ul li .icon-warning ~ a strong {
cursor: pointer
}
.hide-balance .menu-footer ul li:not(.exclude-balance) {
cursor: default
}
.hide-balance .menu-footer ul li:not(.exclude-balance):before {
opacity: .5;
transform: scale(1)
}
.hide-balance .menu-footer ul li:not(.exclude-balance) span, .hide-balance .menu-footer ul li:not(.exclude-balance) strong {
opacity: 0;
transform: scale(0)
}
.menu-footer .toggle-balance {
display: block;
height: 0;
overflow: visible;
padding-inline-end: .375rem;
position: relative;
text-align: end;
z-index: 5002
}
@media only screen and (min-width: 56.063em) {
.menu-footer .toggle-balance {
display: none
}
}
.menu-footer .toggle-balance button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
font-size: 1.25rem;
min-height: 1.25rem;
min-width: 1.25rem;
padding: .5em;
padding-inline-start: .25em;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .toggle-balance button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.menu-footer .toggle-balance button.active, .menu-footer .toggle-balance button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.menu-footer .toggle-balance button:disabled {
opacity: .4;
pointer-events: none
}
.hide-balance .menu-footer .toggle-balance button:before {
content: "\e9a2"
}
.menu-footer .quick-action {
padding: 1rem;
text-align: center
}
@media only screen and (max-width: 56em) {
.menu-footer .quick-action {
padding-bottom: .25rem
}
}
.menu-footer .quick-action button {
background: none;
border: none;
color: inherit;
display: block;
font-size: 1rem;
line-height: inherit;
max-width: 100%;
min-width: 0;
padding: 0;
width: 100%
}
.menu-footer .quick-action .text-line {
display: none;
font-size: .875rem;
margin: .5rem 0
}
@media only screen and (min-width: 56.063em) {
.menu-footer .quick-action .text-line {
display: block
}
}
.menu-footer .quick-action strong {
align-items: center;
background-color: var(--surface-button-primary);
border: 0 solid transparent;
border-radius: 5rem;
color: var(--on-primary-regular);
display: flex;
font-size: 1rem;
height: 3rem;
justify-content: center;
overflow: hidden;
padding: .25em 2.25em;
padding-inline-start: 3.5em;
position: relative;
transform: translateZ(0);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .quick-action strong:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.menu-footer .quick-action strong.active, .menu-footer .quick-action strong:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.menu-footer .quick-action strong:disabled {
opacity: .4;
pointer-events: none
}
.menu-footer .quick-action strong > span {
align-items: center;
display: flex;
justify-content: center;
position: relative
}
.menu-footer .quick-action strong > span:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.5rem;
inset-inline-start: -2.5rem;
position: absolute
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.menu-footer .quick-action strong > span:before {
transform: translateY(-1px)
}
}
.menu-footer .quick-action strong:before {
background: linear-gradient(315deg, transparent 25%, hsla(0, 0%, 100%, .8) 50%, transparent 75%, transparent);
content: "";
height: 100%;
left: 0;
opacity: .5;
position: absolute;
top: 0;
transform: translateX(100%);
width: 100%;
z-index: 1
}
.menu-footer .quick-action.register-state {
color: var(--on-surface-registration)
}
.menu-footer .quick-action.register-state strong {
background-color: var(--surface-button-registration)
}
.open .menu-footer .quick-action.register-state strong {
animation: scale .4s ease-in-out .3s
}
.open .menu-footer .quick-action.register-state strong:before {
animation: shine 4s cubic-bezier(.38, .06, 0, .99) .7s
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .quick-action.register-state strong:hover {
background-color: var(--surface-button-registration-focused)
}
}
.menu-footer .quick-action.register-state strong:active {
background-color: var(--surface-button-registration-focused)
}
.menu-footer .quick-action.register-state strong > span:before {
content: var(--ltr, "\e98f") var(--rtl, "\e98d")
}
.menu-footer .quick-action.verify-state {
color: var(--on-surface-verify)
}
.menu-footer .quick-action.verify-state strong {
background-color: var(--surface-button-verify)
}
.open .menu-footer .quick-action.verify-state strong {
animation: scale .4s ease-in-out .3s
}
.open .menu-footer .quick-action.verify-state strong:before {
animation: shine 4s cubic-bezier(.38, .06, 0, .99) .7s
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .quick-action.verify-state strong:hover {
background-color: var(--surface-button-verify)
}
}
.menu-footer .quick-action.verify-state strong:active {
background-color: var(--surface-button-verify)
}
.menu-footer .quick-action.verify-state strong > span:before {
content: "\e9bd"
}
.menu-footer .quick-action.deposit-state, .menu-footer .quick-action.share-state {
color: var(--on-surface-link)
}
.menu-footer .quick-action.deposit-state strong, .menu-footer .quick-action.share-state strong {
background-color: var(--surface-button-tertiary)
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .quick-action.deposit-state strong:hover, .menu-footer .quick-action.share-state strong:hover {
background-color: var(--surface-button-tertiary-focused)
}
}
.menu-footer .quick-action.deposit-state strong:active, .menu-footer .quick-action.share-state strong:active {
background-color: var(--surface-button-tertiary-focused)
}
.menu-footer .quick-action.deposit-state strong > span:before, .menu-footer .quick-action.share-state strong > span:before {
content: "\e913"
}
.menu-footer .quick-action.share-state strong > span:before {
content: "\e9be"
}
@keyframes scale {
50% {
transform: scaleY(1.1) scaleX(1.05)
}
}
@keyframes shine {
0% {
opacity: 1;
transform: translateX(-100%) scaleX(.5)
}
to {
opacity: 0;
transform: translateX(100%) scaleX(2)
}
}
.menu-footer .toggle-balance {
display: none
}
.menu-footer .account-balance-footer {
display: flex;
flex-direction: column;
gap: .625rem;
padding: .5rem 1rem 1rem
}
@media only screen and (min-width: 56.063em) {
.menu-footer .account-balance-footer {
display: none
}
}
.menu-footer .account-balance-footer-item {
align-items: center;
display: flex;
gap: .375rem;
justify-content: space-between
}
.menu-footer .account-balance-footer-item-title {
color: var(--on-primary-medium);
display: flex;
font-size: .875rem;
gap: inherit;
width: 100%
}
.menu-footer .account-balance-footer-item-title:after {
border-bottom: 1px dashed var(--outline-primary-light);
content: "";
flex: 1;
margin-bottom: .125rem
}
.menu-footer .account-balance-footer-item-value {
align-items: center;
color: var(--on-primary-regular);
display: flex;
font-size: .875rem;
gap: .375rem;
white-space: nowrap
}
.menu-footer .account-balance-footer-item-value a {
color: var(--on-primary-regular);
text-decoration: underline
}
.menu-footer .account-balance-footer-item-value a:hover {
color: var(--on-primary-medium)
}
.menu-footer .account-balance-footer-item-value .tooltip-icon {
color: var(--on-primary-medium);
font-size: 1.125rem;
padding: 0
}
.menu-footer .account-balance-footer-item-value .tooltip-icon:before {
display: block
}
.menu-footer .account-balance-footer-item-value .icon-warning {
color: var(--on-primary-pending);
font-size: 1rem
}
.menu-footer .account-balance-horizontal-carousel {
align-items: center;
display: flex;
flex-direction: column;
gap: .25rem;
height: 100%;
max-width: 100%;
padding-bottom: .875rem;
padding-top: .75rem;
position: relative;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.menu-footer .account-balance-horizontal-carousel {
display: none
}
}
.menu-footer .account-balance-horizontal-carousel .scroll-section {
align-items: center;
display: flex;
gap: .25rem;
height: 1rem;
justify-content: space-between;
padding-inline: 1rem;
width: 100%
}
.menu-footer .account-balance-horizontal-carousel .scroll-section.margin-alert {
gap: 0
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .account-title {
align-items: center;
align-self: stretch;
color: var(--on-primary-medium);
display: flex;
font-size: clamp(1rem, 1.5vw, 1.5rem);
font-style: normal;
font-weight: 700;
line-height: normal;
padding-inline-end: .75rem
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .icon-warning {
color: var(--on-primary-alert);
height: .75rem;
margin-bottom: .25rem
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
cursor: pointer;
font-size: 1rem;
transition: .2s ease-in-out;
width: -moz-fit-content;
width: fit-content
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.active, .menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow:disabled {
opacity: .4;
pointer-events: none
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.disabled {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-disabled);
cursor: default;
pointer-events: none;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.disabled:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-disabled)
}
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.disabled.active, .menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.disabled:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-disabled)
}
.menu-footer .account-balance-horizontal-carousel .scroll-section .scroll-arrow.disabled:disabled {
opacity: .4;
pointer-events: none
}
.menu-footer .account-balance-horizontal-carousel .account-cards-container {
overflow: hidden;
width: 100%
}
.menu-footer .account-balance-horizontal-carousel .account-cards-container .wrapper {
display: flex;
height: 100%;
position: relative;
transform: translateX(var(--ltr, var(--carouselOffsetX, 0)) var(--rtl, calc(var(--carouselOffsetX, 0) * -1)));
transition: transform .5s ease-in-out;
width: 100%
}
.menu-footer .account-balance-horizontal-carousel .account-cards-container .wrapper .account-card {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
height: 100%;
justify-content: space-between;
max-width: 100%;
min-width: 100%;
padding-bottom: .5rem;
padding-top: .5rem
}
.menu-footer .account-balance-horizontal-carousel .account-cards-container .wrapper .account-card .account-values {
width: 100%
}
.menu-footer .account-balance-horizontal-carousel .pagination-dots {
align-items: center;
display: flex;
gap: .3125rem;
justify-content: center
}
.menu-footer .account-balance-horizontal-carousel .pagination-dots .dot {
background-color: var(--on-primary-regular);
border-radius: .3125rem;
height: .3125rem;
opacity: .3;
transition: opacity .3s ease-in-out, width .3s linear;
width: .3125rem
}
.menu-footer .account-balance-horizontal-carousel .pagination-dots .active-dot {
opacity: 1;
width: .75rem
}
.menu-profile {
position: relative
}
.menu-profile ul {
padding: 1.5rem 1rem
}
.menu-profile .clickable {
cursor: pointer
}
.menu-profile-container {
align-items: center;
display: flex;
gap: .75rem;
text-transform: none
}
@media only screen and (min-width: 56.063em) {
.menu-profile-container {
padding-inline-end: 1rem
}
}
.menu-profile .profile-progress-bar {
flex: 0 0 auto
}
.menu-profile .profile-account-info {
align-items: flex-start;
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0
}
.menu-profile .profile-details {
padding-inline-start: .375rem
}
.menu-profile .profile-badges, .menu-profile .profile-details {
align-items: flex-start;
align-self: stretch;
display: flex;
flex-direction: column
}
.menu-profile .profile-badges {
flex-wrap: wrap;
gap: .375rem .25rem
}
@media only screen and (min-width: 56.063em) {
.menu-profile .profile-badges {
flex-direction: row
}
}
.menu-profile .profile-name {
color: var(--on-surface-regular);
font-size: .9375rem;
font-style: normal;
font-weight: 700;
line-height: normal
}
.menu-profile .profile-email, .menu-profile .profile-name {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.menu-profile .profile-email {
color: var(--on-surface-light);
font-size: .875rem;
font-weight: 400;
letter-spacing: .015625rem;
line-height: 1.25rem
}
.menu-profile .profile-chevron {
flex: 0 0 auto;
margin-inline-start: .75rem;
padding-inline-end: .25rem
}
@media only screen and (min-width: 56.063em) {
.menu-profile .profile-chevron {
padding-inline-end: 0
}
}
.menu-profile .profile-chevron:before {
content: var(--ltr, "\e99b") var(--rtl, "\e99a")
}
.menu .uncapitalize {
text-transform: none
}
.menu.demo-mode #menuAccountDetailsLi, .menu.demo-mode #menuAccountQuestionnaireLi, .menu.demo-mode #menuAccountUploadDocsLi, .menu.demo-mode #menuFundsBonusAccountLi, .menu.demo-mode #menuFundsMonetaryHistoryLi, .menu.demo-mode #menuFundsReportsLi {
display: none !important
}
.menu.real-mode #menuAccountValidationCenterLi {
display: block !important
}
.darkmode-menu-switch .dm-switch-wrapper, .nav-main a.switch-mode .switch-mode-wrapper {
background: var(--surface-nav-light);
border-radius: 5em;
flex: 0 0 3.125em;
height: 3.125em;
overflow: hidden;
width: 1.875em;
--switch-active-x-transform: var(--ltr, 1.25em) var(--rtl, -1.25em)
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.darkmode-menu-switch .dm-switch-wrapper, .nav-main a.switch-mode .switch-mode-wrapper {
flex: 0 0 1.875em;
height: 1.875em;
width: 3.125em
}
}
.nav-main {
background-color: var(--surface-nav-main);
display: none;
font-size: 1rem;
height: 100%;
min-width: var(--nav-main-width-wide);
width: var(--nav-main-width-wide);
z-index: 5002
}
@media only screen and (min-width: 56.063em) {
.nav-main {
display: block
}
}
@media only screen and (min-width: 56.063em)and (max-height: 50em) {
.nav-main {
font-size: .875rem
}
}
.nav-main > div {
height: 100%;
justify-content: space-between;
width: 100%
}
.nav-main ul, .nav-main > div {
display: flex;
flex-direction: column
}
.nav-main ul {
list-style-type: none
}
.nav-main li, .nav-main ul {
margin: 0;
padding: 0
}
.nav-main a {
align-items: center;
border-radius: .4375em;
color: var(--on-primary-medium);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
margin: .3125em;
min-height: 4.125em;
padding: .25em;
position: relative;
text-align: center
}
.nav-main a.active {
background-color: var(--surface-nav-selected)
}
.nav-main a:before {
direction: ltr;
display: inline-block;
font-size: 1.25em
}
@media only screen and (hover: hover)and (pointer: fine) {
.nav-main a:hover:not(.active) {
background-color: var(--surface-nav-focused);
color: var(--on-primary-regular) !important
}
.nav-main a:hover:not(.active) .menu-nav-btn:after {
border-color: var(--surface-nav-focused)
}
.nav-main a:hover:active {
color: var(--on-primary-nav-selected)
}
.nav-main a.menu-nav-btn-wrapper:hover .menu-nav-btn div {
background-color: var(--on-primary-regular)
}
.nav-main a.menu-nav-btn-wrapper:hover .menu-nav-btn-middle:before {
background-color: var(--on-primary-regular);
transform: translateY(1px)
}
.nav-main a.menu-nav-btn-wrapper:hover .menu-nav-btn-middle:after {
background-color: var(--on-primary-regular);
transform: translateY(-1px)
}
}
.nav-main a.active {
color: var(--on-primary-nav-selected)
}
.nav-main a.active strong {
background-color: var(--surface-sub)
}
.nav-main a.icon-bars:before, .nav-main a.icon-funds:before, .nav-main a.icon-insights:before, .nav-main a[class*=icon-ccp-]:before {
font-size: 1.5em
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.nav-main a.icon-bars:before, .nav-main a.icon-funds:before, .nav-main a.icon-insights:before, .nav-main a[class*=icon-ccp-]:before {
font-size: 1.25em
}
}
.nav-main a.icon-funds {
color: var(--on-primary-secondary-fixed)
}
.nav-main a.icon-funds.active {
color: var(--on-primary-nav-selected)
}
.nav-main a.icon-funds span {
color: var(--on-primary-regular)
}
.nav-main a.icon-ccp-risk-monitor > strong {
background: var(--surface-button-primary-focused);
color: var(--white)
}
.nav-main a span {
display: block;
font-size: .6875em;
font-weight: 400;
line-height: 1.125;
padding: 0 .1875em;
transform: translateY(.375em);
width: calc(var(--nav-main-width-wide) - 1.125em)
}
.nav-main a strong {
background-color: var(--surface-sub);
border-radius: .25em;
font-size: .75em;
inset-inline-end: -.5em;
padding: .2em .375em;
position: absolute;
top: .1875em
}
.nav-main a strong:empty {
display: none
}
.nav-main a strong.menu-warning {
background-color: var(--surface-alert);
color: var(--on-primary-regular);
text-align: center;
width: 1.6125em
}
.nav-main a .menu-nav-btn {
height: 19px;
position: relative;
width: 22px
}
.nav-main a .menu-nav-btn div {
background-color: var(--on-primary-medium);
display: block;
height: 2px;
transform: translateY(0);
transform-origin: center;
transition: .1s ease-in-out;
width: 22px
}
.nav-main a .menu-nav-btn-middle {
margin: 6px 0
}
.nav-main a .menu-nav-btn-middle:after, .nav-main a .menu-nav-btn-middle:before {
background-color: var(--on-primary-medium);
content: "";
display: block;
height: 2px;
left: 0;
margin: auto;
position: absolute;
right: 0;
transform: translateY(0);
transform-origin: center;
transition: .1s ease-in-out;
width: 22px
}
.nav-main a .menu-nav-btn-middle:before {
top: -8px
}
.nav-main a .menu-nav-btn-middle:after {
bottom: -8px
}
.nav-main a .menu-nav-btn:after {
background-color: var(--surface-badge);
border: 2px solid var(--surface-nav-main);
border-radius: 5px;
content: "";
display: none;
height: 10px;
position: absolute;
right: -5px;
top: -7px;
width: 10px
}
.badge-on .nav-main a .menu-nav-btn:after, .nav-main a .menu-nav-btn.show-badge:after {
display: block
}
.nav-main a.switch-mode {
margin-top: 1em
}
@media only screen and (min-width: 56.063em)and (max-height: 50em) {
.nav-main a.switch-mode {
margin-top: .5em
}
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.nav-main a.switch-mode {
margin-top: 0
}
}
.nav-main a.switch-mode.navigation {
height: auto
}
.nav-main a.switch-mode .switch-mode-wrapper {
margin: 3px 0 4px
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.nav-main a.switch-mode .switch-mode-wrapper {
margin: .125em 0
}
}
.nav-main a.switch-mode .switch-mode-icon {
border-radius: 5em;
display: flex;
height: 1.625em;
justify-content: stretch;
margin: .125em;
position: relative;
transition: transform .2s ease-in-out;
width: 1.625em
}
.nav-main a.switch-mode .switch-mode-icon:after, .nav-main a.switch-mode .switch-mode-icon:before {
content: "";
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
align-items: center;
display: flex;
font-size: 1.375em;
height: 100%;
justify-content: center;
position: absolute;
transition: opacity .2s ease-in-out;
width: 100%
}
.nav-main a.switch-mode .switch-mode-icon:before {
content: "\e935"
}
.nav-main a.switch-mode .switch-mode-icon:after {
content: "\e9bb"
}
.nav-main a.switch-mode.locked .switch-mode-icon:before {
content: "\e936"
}
.nav-main a.switch-mode.locked .switch-mode-icon:after {
content: "\e937"
}
.nav-main a.switch-mode.real .switch-mode-icon:after {
opacity: 0
}
.nav-main a.switch-mode.demo .switch-mode-icon {
transform: translateY(1.25em)
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.nav-main a.switch-mode.demo .switch-mode-icon {
transform: translateX(var(--switch-active-x-transform))
}
}
.nav-main a.switch-mode.demo .switch-mode-icon:before {
opacity: 0
}
@media only screen and (hover: hover)and (pointer: fine) {
.nav-main a.switch-mode:hover {
background: none !important
}
.nav-main a.switch-mode:hover .switch-mode-wrapper {
background: var(--surface-nav-light-focused)
}
.nav-main a.switch-mode:hover span {
transition: opacity .2s ease-in-out, max-height .3s ease
}
}
.nav-main a.switch-mode span {
line-height: 11px;
opacity: .5;
transform: none;
transition: opacity .2s ease-in-out, max-height .3s ease
}
.nav-main a.switch-mode span.active {
opacity: 1
}
.nav-main a.switch-mode .current-mode-text {
display: none
}
@media only screen and (min-width: 56.063em)and (max-height: 50em) {
.nav-main a.navigation-chat {
height: auto
}
}
.nav-main a.navigation-chat strong {
background-color: var(--surface-badge);
border-radius: .375em;
height: .75em;
inset-inline-start: 50%;
margin-inline-start: var(--ltr, .375em) var(--rtl, -.75rem);
padding: 0;
top: 50%;
transform: translateY(-1.25em);
width: .75em
}
.chat-new-message .nav-main a.navigation-chat strong {
display: block
}
.open + .nav-main .menu-nav-btn-wrapper {
background-color: var(--surface-nav-light-focused);
color: var(--on-primary-regular) !important
}
.open + .nav-main .menu-nav-btn-wrapper .menu-nav-btn:after {
border-color: var(--surface-nav-light-focused)
}
.open + .nav-main .menu-nav-btn-middle {
width: 0
}
.open + .nav-main .menu-nav-btn-middle:before {
transform: rotate(45deg) translate(5px, 5px) !important
}
.open + .nav-main .menu-nav-btn-middle:after {
transform: rotate(-45deg) translate(6px, -6px) !important
}
.nav-main .icon-bars:before {
display: none
}
@media only screen and (hover: hover)and (pointer: fine) {
.nav-main {
min-width: auto;
transition: width .3s ease;
width: var(--nav-main-width-narrow);
z-index: 5002
}
.nav-main a {
transition: .1s ease
}
.nav-main a:before {
align-items: center;
border-radius: .375rem;
display: flex;
height: 2em;
justify-content: center;
transform: scale(1);
transition: .2s ease-out;
width: 2em
}
.nav-main a span {
max-height: 0;
min-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .3s ease, opacity .3s ease .1s
}
.nav-main a.switch-mode span, .nav-main a.switch-mode span.active {
opacity: 0
}
.nav-main a strong {
transition: transform .3s ease
}
.nav-main a.navigation-chat strong {
transform: translateY(-.875rem);
transition-delay: .1s
}
.nav-main a .menu-nav-btn:after {
transition: .1s ease-out
}
.nav-main a.icon-bars:before, .nav-main a.icon-funds:before, .nav-main a.icon-insights:before, .nav-main a[class*=icon-ccp-]:before {
height: 1.6667em;
width: 1.6667em
}
.nav-main a.active {
background-color: transparent
}
.nav-main a.active:before {
background-color: var(--surface-nav-selected)
}
.nav-main a.active:hover, .nav-main a.active:hover:before {
background-color: var(--surface-nav-focused)
}
.nav-main:hover, .nav-menu.open + .nav-main {
width: var(--nav-main-width-wide)
}
.nav-main:hover a, .nav-menu.open + .nav-main a {
transition: .2s ease-out
}
.nav-main:hover a:before, .nav-menu.open + .nav-main a:before {
height: 1em !important
}
.nav-main:hover a:not(.switch-mode) span, .nav-menu.open + .nav-main a:not(.switch-mode) span {
opacity: 1;
transition: opacity .3s ease .1s
}
.nav-main:hover a span, .nav-menu.open + .nav-main a span {
max-height: 3rem;
transition: max-height .3s ease
}
.nav-main:hover a.switch-mode span, .nav-menu.open + .nav-main a.switch-mode span {
opacity: .5
}
.nav-main:hover a.switch-mode span.active, .nav-menu.open + .nav-main a.switch-mode span.active {
opacity: 1
}
.nav-main:hover a.navigation-chat strong, .nav-menu.open + .nav-main a.navigation-chat strong {
transform: translateY(-1.25rem);
transition: none
}
.nav-main:hover a strong, .nav-menu.open + .nav-main a strong {
transform: translateY(-.375rem)
}
.nav-main:hover a .menu-nav-btn:after, .nav-menu.open + .nav-main a .menu-nav-btn:after {
transition: .2s ease-out
}
.nav-main:hover a.active, .nav-menu.open + .nav-main a.active {
background-color: var(--surface-nav-selected)
}
.nav-main:hover a.active:before, .nav-menu.open + .nav-main a.active:before {
background-color: transparent
}
.nav-main:hover a.active:hover, .nav-menu.open + .nav-main a.active:hover {
background-color: var(--surface-nav-focused)
}
}
.darkmode-menu-switch {
display: flex
}
.darkmode-menu-switch .dmicon-sunmoon {
border-radius: 5em;
height: 1.875em;
overflow: hidden;
position: relative;
transform: translateY(0);
transition: .2s ease-in-out;
width: 1.875em
}
.darkmode-menu-switch .dmicon-sunmoon:after, .darkmode-menu-switch .dmicon-sunmoon:before {
border-radius: 5em;
bottom: 0;
content: "";
height: 1.125em;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 1.125em
}
.darkmode-menu-switch .dmicon-sunmoon:before {
background-color: var(--on-primary-medium);
transform: scale(.8);
transition: .2s ease-in-out
}
.darkmode-menu-switch .dmicon-sunmoon:after {
background: var(--surface-nav-light);
transform: translate(.75em, -.75em);
transition: transform .2s ease-in-out
}
.darkmode-menu-switch .dmicon-sunshine {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
transform: scale(.8);
transform-origin: center;
transition: .2s ease-in-out .3s;
z-index: 1
}
.darkmode-menu-switch .dmicon-sunshine path {
fill: var(--on-primary-medium)
}
.darkmode-menu-switch.darkmode-active .dmicon-sunmoon {
transform: translateY(1.25em)
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.darkmode-menu-switch.darkmode-active .dmicon-sunmoon {
transform: translateX(var(--switch-active-x-transform))
}
}
.darkmode-menu-switch.darkmode-active .dmicon-sunmoon:before {
transform: scale(1)
}
.darkmode-menu-switch.darkmode-active .dmicon-sunmoon:after {
transform: translate(.375em, -.313em)
}
.darkmode-menu-switch.darkmode-active .dmicon-sunshine {
opacity: 0;
transform: scale(.6);
transition: .15s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.darkmode-menu-switch:hover {
background: none !important
}
.darkmode-menu-switch:hover .dmicon-sunmoon:before {
background: var(--on-primary-regular)
}
.darkmode-menu-switch:hover .dmicon-sunshine path {
fill: var(--on-primary-regular)
}
.darkmode-menu-switch:hover .dm-switch-wrapper, .darkmode-menu-switch:hover .dmicon-sunmoon:after {
background: var(--surface-nav-light-focused)
}
}
@media only screen and (min-width: 56.063em)and (max-height: 50em) {
.nav-main a {
height: 3.8em;
margin-bottom: 0;
margin-top: 0;
min-height: 3.8em
}
}
@media only screen and (min-width: 56.063em)and (max-height: 38em)and (orientation: landscape)and (pointer: coarse) {
.nav-main a {
height: 3.5em;
margin-bottom: 0;
margin-top: 0;
min-height: 3.5em
}
.nav-main a:before {
font-size: 1em;
height: 1em !important
}
.nav-main a .menu-nav-btn {
height: 15px;
transform: scale(.75)
}
.nav-main a.navigation-chat strong {
height: .5em;
margin-top: .25em;
width: .5em
}
.nav-main a.darkmode-menu-switch {
display: none
}
}
.section-table, .section-table-empty {
display: flex;
flex-direction: column;
width: 100%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.with-graph .section-table, .with-graph .section-table-empty {
display: block
}
}
@media only screen and (min-width: 56.063em) {
.section-table, .section-table-empty {
font-size: .75rem
}
}
@media only screen and (min-width: 73.063em) {
.section-table, .section-table-empty {
font-size: .875rem
}
}
@media only screen and (min-width: 90.063em) {
.section-table, .section-table-empty {
font-size: .9375rem
}
}
@media only screen and (min-width: 56.063em) {
.section-table.two-d-table .section-table-head div div, .two-d-table.section-table-empty .section-table-head div div {
padding: 0 .625rem
}
}
.section-table trustProequity-tooltip, .section-table-empty trustProequity-tooltip {
max-width: 100%
}
.section-table-footer, .section-table-head {
border-bottom: 1px solid var(--outline-light);
color: var(--on-surface-primary-medium);
display: none;
font-weight: 700
}
@media only screen and (min-width: 56.063em) {
.section-table-footer, .section-table-head {
display: block;
flex: 1 0 2.25rem;
max-height: 2.25rem
}
}
.section-table-footer > div, .section-table-head > div {
display: flex;
padding-inline: .625rem 1rem
}
.section-table-footer > div span, .section-table-head > div span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@media only screen and (min-width: 90.063em) {
.section-table-footer > div span, .section-table-head > div span {
max-width: none
}
}
.section-table-footer > div .market-closed span, .section-table-head > div .market-closed span {
visibility: hidden
}
.section-table-footer > div .market-closed span:before, .section-table-head > div .market-closed span:before {
display: block
}
.section-table-footer div div, .section-table-head div div {
padding: .625rem .3125rem
}
@media only screen and (min-width: 56.063em) {
.section-table-footer div div:first-child, .section-table-head div div:first-child {
padding: .625rem
}
}
.section-table-footer a, .section-table-head a {
visibility: hidden
}
.section-table-footer .information button, .section-table-head .information button {
border: none
}
@media only screen and (max-width: 56em) {
.section-table-footer .monetary-history-filter + div div, .section-table-head .monetary-history-filter + div div {
padding: .1875rem .3125rem
}
}
.section-table-footer span[class*=" icon-"]:before, .section-table-footer span[class^=icon-]:before, .section-table-head span[class*=" icon-"]:before, .section-table-head span[class^=icon-]:before {
display: none
}
.has-sorting.section-table-footer span, .has-sorting.section-table-head span {
cursor: pointer
}
.has-sorting.section-table-footer span:hover, .has-sorting.section-table-head span:hover {
color: var(--on-surface-primary-focused)
}
.section-table-footer .no-sort span, .section-table-head .no-sort span {
cursor: default
}
.section-table-footer .no-sort span:hover, .section-table-head .no-sort span:hover {
color: inherit
}
.section-table-footer > div .active, .section-table-head > div .active {
color: var(--on-surface-primary-focused)
}
.section-table-footer > div .active span[class*=" icon-"]:before, .section-table-footer > div .active span[class^=icon-]:before, .section-table-head > div .active span[class*=" icon-"]:before, .section-table-head > div .active span[class^=icon-]:before {
display: inline-block;
margin-inline-end: .25em;
vertical-align: -5%
}
.section-table-footer > div .desc span:before, .section-table-head > div .desc span:before {
transform: rotateX(180deg)
}
.section-table-head > div button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
font-size: .875rem;
font-weight: 400;
height: 0;
min-height: 0;
min-width: 0;
padding-bottom: 0;
padding-top: 0;
transition: .2s ease-in-out;
visibility: hidden;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-head > div button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-head > div button.active, .section-table-head > div button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-head > div button:disabled {
opacity: .4;
pointer-events: none
}
.section-table-body, .section-table-group > div, .section-table-wrap {
flex: 1 1 100%;
min-height: 1px;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: scrollbar
}
.section-table-body:not(:focus-visible), .section-table-group > div:not(:focus-visible), .section-table-wrap:not(:focus-visible) {
outline: none
}
.section-table-body button, .section-table-group > div button, .section-table-wrap button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
font-size: .875rem;
font-weight: 400;
min-height: 0;
min-width: 0;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-body button:hover, .section-table-group > div button:hover, .section-table-wrap button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-body button.active, .section-table-body button:active, .section-table-group > div button.active, .section-table-group > div button:active, .section-table-wrap button.active, .section-table-wrap button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-body button:disabled, .section-table-group > div button:disabled, .section-table-wrap button:disabled {
opacity: .4;
pointer-events: none
}
.section-table-body .buySellButton, .section-table-group > div .buySellButton, .section-table-wrap .buySellButton {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-body .buySellButton:hover, .section-table-group > div .buySellButton:hover, .section-table-wrap .buySellButton:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-body .buySellButton.active, .section-table-body .buySellButton:active, .section-table-group > div .buySellButton.active, .section-table-group > div .buySellButton:active, .section-table-wrap .buySellButton.active, .section-table-wrap .buySellButton:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-body .buySellButton:disabled, .section-table-group > div .buySellButton:disabled, .section-table-wrap .buySellButton:disabled {
opacity: .4;
pointer-events: none
}
.section-table-body .instrument.selected .buySellButton:not(:disabled), .section-table-body .instrument:hover .buySellButton:not(:disabled), .section-table-group > div .instrument.selected .buySellButton:not(:disabled), .section-table-group > div .instrument:hover .buySellButton:not(:disabled), .section-table-wrap .instrument.selected .buySellButton:not(:disabled), .section-table-wrap .instrument:hover .buySellButton:not(:disabled) {
background-color: transparent;
border-color: var(--outline-button-focused);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-body .instrument.selected .buySellButton:not(:disabled):hover, .section-table-body .instrument:hover .buySellButton:not(:disabled):hover, .section-table-group > div .instrument.selected .buySellButton:not(:disabled):hover, .section-table-group > div .instrument:hover .buySellButton:not(:disabled):hover, .section-table-wrap .instrument.selected .buySellButton:not(:disabled):hover, .section-table-wrap .instrument:hover .buySellButton:not(:disabled):hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-body .instrument.selected .buySellButton:not(:disabled).active, .section-table-body .instrument.selected .buySellButton:not(:disabled):active, .section-table-body .instrument:hover .buySellButton:not(:disabled).active, .section-table-body .instrument:hover .buySellButton:not(:disabled):active, .section-table-group > div .instrument.selected .buySellButton:not(:disabled).active, .section-table-group > div .instrument.selected .buySellButton:not(:disabled):active, .section-table-group > div .instrument:hover .buySellButton:not(:disabled).active, .section-table-group > div .instrument:hover .buySellButton:not(:disabled):active, .section-table-wrap .instrument.selected .buySellButton:not(:disabled).active, .section-table-wrap .instrument.selected .buySellButton:not(:disabled):active, .section-table-wrap .instrument:hover .buySellButton:not(:disabled).active, .section-table-wrap .instrument:hover .buySellButton:not(:disabled):active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-body .instrument.selected .buySellButton:not(:disabled):disabled, .section-table-body .instrument:hover .buySellButton:not(:disabled):disabled, .section-table-group > div .instrument.selected .buySellButton:not(:disabled):disabled, .section-table-group > div .instrument:hover .buySellButton:not(:disabled):disabled, .section-table-wrap .instrument.selected .buySellButton:not(:disabled):disabled, .section-table-wrap .instrument:hover .buySellButton:not(:disabled):disabled {
opacity: .4;
pointer-events: none
}
.section-table-body trustProequity-tooltip, .section-table-group trustProequity-tooltip, .section-table-wrap trustProequity-tooltip {
display: inline
}
.section-table-wrap .section-table-body, .section-table-wrap .section-table-group > div {
overflow-x: visible;
overflow-y: visible;
-ms-overflow-style: none
}
.section-table-body, .section-table-group > div {
outline: none
}
.section-table-body > div, .section-table-group > div > div {
align-content: stretch;
align-items: center;
border-bottom: 1px solid var(--outline-light);
display: flex;
justify-content: space-between;
padding: .625rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-body > div:hover, .section-table-group > div > div:hover {
background-color: var(--surface-row-focused);
cursor: pointer
}
}
.section-table-body > div.selected, .section-table-group > div > div.selected {
background-color: var(--surface-row-selected);
cursor: pointer
}
.section-table-body > div div, .section-table-group > div > div div {
padding: 0 0 .3125rem;
padding-inline-end: .3125rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-body > div div, .section-table-group > div > div div {
padding-bottom: 0
}
}
@media only screen and (min-width: 56.063em) {
.section-table-body > div div, .section-table-group > div > div div {
padding: 0 .3125rem
}
.section-table-body > div div:first-child, .section-table-group > div > div div:first-child {
padding: 0 .625rem
}
}
.section-table-body > div .market-closed span, .section-table-group > div > div .market-closed span {
font-size: .9375rem;
visibility: hidden
}
.section-table-body > div .market-closed span.no-trading, .section-table-group > div > div .market-closed span.no-trading {
visibility: visible
}
.section-table-body > div .market-closed span:before, .section-table-group > div > div .market-closed span:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ea08";
opacity: .5
}
.section-table-body > div p500-instrument-logos-dc, .section-table-group > div > div p500-instrument-logos-dc {
flex: 0 0 auto
}
.section-table-body > div p500-instrument-logos-dc .instrument-logo-wrap, .section-table-group > div > div p500-instrument-logos-dc .instrument-logo-wrap {
display: block
}
.section-table-group > a {
background-color: var(--surface-container-active);
border-bottom: 1px solid var(--outline-light);
color: var(--on-primary-regular);
cursor: pointer;
display: block;
padding: .625rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-group > a:hover {
background-color: var(--surface-tertiary-fixed)
}
}
.section-table-group > a:before {
display: inline-block;
margin: 0 .5em
}
.section-table-group > a.open:before {
transform: rotate(var(--ltr, 90deg) var(--rtl, -90deg)) translate(-1px)
}
.section-table-group > a strong {
float: inline-end;
font-size: .6875rem;
font-weight: 400
}
.section-table-group > a.sticky-title {
position: sticky;
top: 0;
z-index: 1
}
.section-table-group > div {
display: none
}
.section-table-group > div.open {
display: block
}
.section-table-group.two-levels:not(:last-child) a.open + div {
border-bottom: 1px solid var(--outline-main)
}
.section-table-group.two-levels > a {
background-color: var(--surface-row-inner-row)
}
.section-table-group.two-levels > a.open {
background-color: var(--surface-container-active-light);
border-color: transparent;
color: var(--local-txt-color)
}
.section-table-group.two-levels > a:hover {
background-color: var(--surface-container-active-light-focused);
color: var(--local-txt-color)
}
.section-table-group.two-levels > div a {
background: none
}
.section-table-group.two-levels > div a .table-row:before {
display: none
}
.section-table-group.two-levels > div a .table-row div:first-child {
opacity: .3
}
@media only screen and (min-width: 56.063em) {
.section-table-group.two-levels > div a .table-row div:first-child {
padding-inline-start: 0
}
.section-table-group.two-levels > div a .table-row div:first-child:before {
content: "\ea1d"
}
}
@media only screen and (max-width: 56em) {
.section-table-group.two-levels.merged-level > a .table-row:before {
display: none
}
}
@media only screen and (min-width: 56.063em) {
.section-table-group.two-levels.merged-level > a .table-row div:first-child:before {
visibility: hidden
}
}
.section-table-footer {
border-top: 1px solid var(--outline-primary);
display: block
}
.section-table-footer > div span {
overflow: visible;
visibility: hidden
}
.information {
padding: 0 !important
}
@media only screen and (min-width: 56.063em) {
.information {
height: auto
}
}
.information button {
border: none;
padding: 0
}
.information button.open-info {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
display: block;
font-size: 1rem;
transform: scale(1.5) translateY(.875em);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.information button.open-info:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.information button.open-info.active, .information button.open-info:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.information button.open-info:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.information button.open-info {
display: flex;
justify-content: flex-end;
margin-top: -1.1rem;
padding: 0 .3rem;
transform: scale(1.5) translateY(1em)
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.information button.open-info {
font-size: 1rem;
line-height: 1em;
padding: 0;
transform: scale(1.25) translateY(.5rem)
}
}
@media only screen and (min-width: 56.063em) {
.information button.open-info {
display: inline-block;
font-size: 1rem;
padding-inline-start: .625rem;
transform: none
}
}
@media only screen and (min-width: 73.063em) {
.information button.open-info {
padding: 0 .25rem
}
}
.information button.open-info:before {
content: var(--ltr, "\e99b") var(--rtl, "\e99a")
}
@media only screen and (min-width: 56.063em) {
.information button.open-info:before {
content: "\e922"
}
}
.section-table-empty {
align-items: center;
flex-direction: row;
font-size: 1rem;
justify-content: center;
text-align: center
}
.section-table-empty > div {
flex: 1 1 100%;
padding: 1.25rem .625rem 0
}
@media only screen and (min-width: 56.063em) {
.section-table-empty > div {
flex: 0 1 45%;
padding: 1.25rem 1.25rem 0
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: .625rem .625rem 0
}
}
.section-table-empty .icon {
color: var(--on-surface-primary-light);
display: inline-flex;
font-size: 4rem;
height: 4rem;
justify-content: center;
width: 4rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty .icon {
flex: 0 0 2rem;
font-size: 2rem;
height: 2rem;
width: 2rem
}
}
.section-table-empty h4 {
color: var(--on-surface-primary);
font-size: 1.25rem;
font-weight: 600;
padding: .5em 0
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty h4 {
flex: 0 0 auto;
padding-inline-start: .625rem
}
}
.section-table-empty h4:empty {
padding: 0
}
.section-table-empty p {
flex: 1 1 100%;
margin: 0 0 1.25rem
}
.section-table-empty p span {
display: block;
padding-bottom: 1.25rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty p span {
flex: 0 0 100%;
padding-bottom: .625rem
}
}
.section-table-empty p span:last-child {
padding-bottom: 0;
padding-top: 1.25rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty p span:last-child {
padding-top: .625rem
}
}
.section-table-empty p button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
padding: .375rem 1.5rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-empty p button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-empty p button.active, .section-table-empty p button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-empty p button:disabled {
opacity: .4;
pointer-events: none
}
.section-table-empty.instruments-table-empty {
display: none;
flex: 1 1 100%
}
.instruments[data-show=false] + .section-table-empty.instruments-table-empty {
display: flex
}
.section-table-empty.instruments-table-empty > div {
align-items: center;
display: flex;
flex-direction: column;
max-height: 100%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty.instruments-table-empty > div {
flex-direction: row;
max-height: none
}
}
.section-table-empty.instruments-table-empty > div .empty-image {
aspect-ratio: 2/1;
background: var(--img-sprite-empty-error) no-repeat center/contain;
margin: 0 auto 1rem;
max-width: 38rem;
width: 100%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty.instruments-table-empty > div .empty-image {
max-width: 30vw
}
}
@supports not (aspect-ratio:2/1) {
.section-table-empty.instruments-table-empty > div .empty-image:before {
content: "";
display: block;
padding-bottom: 50%
}
}
.section-table-empty.instruments-table-empty > div .empty-image + h4 {
flex: 1 1 100%
}
.section-table-empty.instruments-table-empty > div .empty-image.watchlist {
background-image: var(--img-sprite-empty-watchlists);
padding: 0
}
.section-table-empty.instruments-table-empty .modal-search-button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
line-height: 1.2;
margin-bottom: 1rem;
padding: .375rem 1rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.section-table-empty.instruments-table-empty .modal-search-button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.section-table-empty.instruments-table-empty .modal-search-button.active, .section-table-empty.instruments-table-empty .modal-search-button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.section-table-empty.instruments-table-empty .modal-search-button:disabled {
opacity: .4;
pointer-events: none
}
.section-table-empty.instruments-table-empty .modal-search-button:before {
content: "\e9b4";
font-size: 1rem;
margin-inline-end: .5rem;
vertical-align: -7%
}
.section-table .section-table-empty, .section-table-empty .section-table-empty {
flex: 1 1 100%
}
.section-table-scroll-wrapper .section-table-empty {
height: 100%
}
.section-table-empty .empty-image {
aspect-ratio: 2/1;
margin: 0 auto 1rem;
max-width: 38rem;
width: 100%
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.section-table-empty .empty-image {
max-width: 30vw
}
}
@supports not (aspect-ratio:2/1) {
.section-table-empty .empty-image:before {
content: "";
display: block;
padding-bottom: 50%
}
}
.section-table-empty .empty-image + h4 {
flex: 1 1 100%
}
.section-table-empty.open-positions-empty .empty-image {
background: var(--img-sprite-empty-open-positions) no-repeat center/contain
}
.section-table-empty.orders-empty .empty-image {
background: var(--img-sprite-empty-orders) no-repeat center/contain
}
.section-table-empty.positions-empty .empty-image {
background: var(--img-sprite-empty-positions) no-repeat center/contain
}
.section-table-empty.history-empty .empty-image {
background: var(--img-sprite-empty-history) no-repeat center/contain
}
.section-table-empty.alerts-empty .empty-image {
background: var(--img-sprite-empty-alerts) no-repeat center/contain
}
.section-table-empty.reports-empty .empty-image {
background: var(--img-sprite-empty-reports) no-repeat center/contain
}
.section-table-empty.bonus-empty .empty-image {
background: var(--img-sprite-empty-bonus) no-repeat center/contain
}
.section-table-empty.search-empty .empty-image {
background: var(--img-sprite-empty-search) no-repeat center/contain
}
.trade-wrapper {
flex-direction: column
}
.trade-wrapper .trade-header {
order: 1
}
.trade-wrapper.graph-on-top .trading {
order: 4
}
.trade-wrapper.graph-on-top .trading .instruments, .trade-wrapper.graph-on-top .trading .open-positions {
position: relative
}
.trade-wrapper.graph-on-top .trading .instruments:after, .trade-wrapper.graph-on-top .trading .open-positions:after {
box-shadow: inset 0 11rem 4rem -12rem rgba(0, 0, 0, .3);
content: "";
display: block;
height: 100%;
left: -20%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: 2s cubic-bezier(.06, .46, .58, 1);
width: 150%
}
.trade-wrapper.graph-on-top .ciq-preloader {
order: 2
}
.trade-wrapper.graph-on-top .multi-chart-container {
order: 3
}
.trade-wrapper.graph-on-top .icon-graph-switch:before {
content: "\e93d" !important
}
@media only screen and (min-width: 56.063em)and (max-width: 73em) {
.trade-wrapper.graph-on-top .ciq-nav {
box-shadow: none
}
}
.close-position:before {
font-size: .6875rem;
padding-right: .5rem;
vertical-align: middle
}
.scroll-xy.section-table-empty > .section-table-scroll-wrapper, .section-table.scroll-xy > .section-table-scroll-wrapper {
flex: 1 1 100%;
min-height: 1px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
align-items: flex-start;
display: flex;
justify-content: stretch
}
@media only screen and (min-width: 56.063em) {
.scroll-xy.section-table-empty > .section-table-scroll-wrapper, .section-table.scroll-xy > .section-table-scroll-wrapper {
overflow: auto
}
}
.scroll-xy.section-table-empty > .section-table-scroll-wrapper > div, .section-table.scroll-xy > .section-table-scroll-wrapper > div {
display: flex;
flex: 1 1 100%;
flex-direction: column;
min-height: 100%
}
@media only screen and (max-width: 56em) {
.scroll-xy.section-table-empty > .section-table-scroll-wrapper > div, .section-table.scroll-xy > .section-table-scroll-wrapper > div {
max-width: 100%
}
}
.scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-body, .scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-group > div, .scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-wrap, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-body, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-group > div, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-wrap {
flex: 0 0 auto;
overflow: visible;
width: 100%
}
.scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-head, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-head {
flex: 0 0 auto
}
@media only screen and (min-width: 56.063em) {
.scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-head, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-head {
background-color: var(--surface-main);
flex: 0 0 auto;
position: sticky;
top: 0;
z-index: 1
}
}
.scroll-xy.section-table-empty > .section-table-scroll-wrapper .section-table-head > div, .section-table.scroll-xy > .section-table-scroll-wrapper .section-table-head > div {
display: flex;
padding-inline-end: .625rem
}
.ui-helper-hidden {
display: none
}
.ui-helper-hidden-accessible {
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.ui-helper-reset {
border: 0;
font-size: 100%;
line-height: 1.3;
list-style: none;
margin: 0;
outline: 0;
padding: 0;
text-decoration: none
}
.ui-helper-clearfix:after, .ui-helper-clearfix:before {
border-collapse: collapse;
content: "";
display: table
}
.ui-helper-clearfix:after {
clear: both
}
.ui-helper-zfix {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%
}
.ui-front {
z-index: 102
}
.ui-front.open {
z-index: 103
}
.ui-state-disabled {
color: var(--on-surface-disabled);
cursor: default !important;
pointer-events: none
}
.ui-icon {
background-repeat: no-repeat;
color: var(--on-primary-regular);
display: block;
overflow: hidden
}
.ui-icon:before {
display: inline-block;
font-family: icoplus;
line-height: 1;
padding: 0;
text-decoration: inherit;
text-transform: none
}
.ui-icon-circle-triangle-w:before {
content: "\e99a"
}
.ui-icon-circle-triangle-e:before {
content: "\e99b"
}
.ui-datepicker {
background-color: var(--surface-popup-main);
box-shadow: 0 23px 80px .3125rem var(--shadow-popup-container);
display: none;
font-size: 1rem;
padding: 0;
width: 18rem
}
@media only screen and (max-width: 56em) {
.ui-datepicker {
z-index: 4001 !important
}
}
.ui-datepicker.high-datepicker {
min-height: 19rem
}
@media only screen and (max-width: 56em) {
.ui-datepicker.high-datepicker {
min-height: 18.625rem
}
}
.ui-widget-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%
}
.ui-datepicker .ui-datepicker-header {
background-color: var(--surface-date-picker-header-light);
color: var(--on-primary-regular);
padding: .1875em 0;
position: relative
}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
height: 1.8em;
position: absolute;
top: .4rem;
width: 1.8em
}
.ui-datepicker .ui-datepicker-prev {
left: 2px
}
.ui-datepicker .ui-datepicker-next {
right: 2px
}
.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
display: block;
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: absolute;
top: 50%
}
.ui-datepicker .ui-datepicker-title {
line-height: 1.8em;
margin: 0 2.3em;
text-align: center
}
.ui-datepicker .ui-datepicker-title select {
margin: 1px 0
}
.ui-datepicker .ui-datepicker-title option {
background-color: var(--surface-popup-main)
}
.ui-datepicker .ui-datepicker-title option:checked, .ui-datepicker .ui-datepicker-title option:checked:hover, select:focus .ui-datepicker .ui-datepicker-title option:checked:hover {
background-color: var(--surface-tertiary-fixed)
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
border: none;
margin: .25rem;
padding: .375rem;
width: 6rem
}
.ui-datepicker table {
border-collapse: collapse;
font-size: .9em;
margin: 0;
width: 100%
}
.ui-datepicker th {
border: 0;
font-weight: 700;
padding: .7em .3em;
text-align: center
}
.ui-datepicker td {
border: 0;
height: 2.3rem;
padding: 0;
text-align: center;
width: 2.3rem
}
.ui-datepicker td a, .ui-datepicker td span {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 0;
text-align: right;
text-decoration: none;
width: 100%
}
.ui-datepicker td a {
color: var(--on-surface-primary);
transition: .4s ease-in-out
}
.ui-datepicker td a:hover {
background-color: var(--surface-date-picker-focused);
transition: .2s ease-in-out
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
border-bottom: 0;
border-left: 0;
border-right: 0;
margin: .7em 0 0;
padding: 0 .2em
}
.ui-datepicker .ui-datepicker-buttonpane button {
cursor: pointer;
float: right;
margin: .5em .2em .4em;
overflow: visible;
padding: .2em .6em .3em;
width: auto
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left
}
.ui-datepicker .ui-state-disabled {
opacity: .3
}
.ui-datepicker td a.ui-state-active {
background-color: var(--surface-date-picker-selected)
}
.ui-datepicker-rtl {
direction: rtl
}
.ui-datepicker-rtl .ui-datepicker-prev {
left: auto;
right: 2px
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
float: right
}
.date-picker button {
min-width: 0
}
.date-picker button:before {
content: "\e943";
display: inline-block;
font-family: icoplus !important;
line-height: 1;
padding: 0;
text-decoration: inherit;
text-transform: none
}
.date-filter, .table-filter {
background-color: var(--surface-date-picker-header-main);
color: var(--on-primary-regular);
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -.625rem;
padding: 1rem .5rem .5rem
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.date-filter, .table-filter {
margin: 0 -1.25rem
}
}
@media only screen and (min-width: 56.063em) {
.date-filter, .table-filter {
margin: 0;
min-height: 0
}
}
@media only screen and (min-width: 73.063em) {
.date-filter, .table-filter {
flex-wrap: nowrap;
justify-content: flex-start
}
}
.date-filter-dates, .table-filter-dates {
align-items: center;
display: flex;
flex: 1 1 60%;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0
}
@media only screen and (min-width: 73.063em) {
.date-filter-dates, .table-filter-dates {
flex: 0 1 auto
}
}
.date-filter-dates li, .table-filter-dates li {
align-items: center;
display: flex;
flex: 1 1 50%;
flex-wrap: wrap;
justify-content: center;
margin-bottom: .75rem;
padding: 0 .5rem
}
@media only screen and (min-width: 73.063em) {
.date-filter-dates li, .table-filter-dates li {
flex: 0 1 auto;
justify-content: flex-start
}
}
.date-filter-dates li.open input, .table-filter-dates li.open input {
z-index: 5005
}
.date-filter-dates label, .table-filter-dates label {
flex: 0 0 auto;
font-size: .875rem;
line-height: 1;
margin-bottom: .25rem;
padding-inline-end: .75rem;
width: 100%
}
.date-filter-dates input, .date-filter-dates select, .table-filter-dates input, .table-filter-dates select {
background-color: var(--surface-main);
border: none;
flex: 0 1 auto;
font-size: 1rem;
line-height: 1.333;
max-width: 100%;
min-width: 6.25rem;
padding: .1875rem .375rem .3125rem .625rem;
width: 100%
}
.date-filter-dates input, .table-filter-dates input {
width: calc(100% - 2rem)
}
.date-filter-dates select, .table-filter-dates select {
padding-inline-end: 1.75em
}
.date-filter-dates button, .table-filter-dates button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
flex: 0 0 2rem;
min-width: 2rem;
order: 1;
padding: 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.date-filter-dates button:hover, .table-filter-dates button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.date-filter-dates button.active, .date-filter-dates button:active, .table-filter-dates button.active, .table-filter-dates button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.date-filter-dates button:disabled, .table-filter-dates button:disabled {
opacity: .4;
pointer-events: none
}
.date-filter-dates button:before, .table-filter-dates button:before {
content: "\e943";
display: inline-block;
font-family: icoplus !important;
line-height: 1;
padding: 0;
text-decoration: inherit;
text-transform: none
}
.date-filter-buttons, .table-filter-buttons {
align-items: flex-end;
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: center
}
@media only screen and (max-width: 35em) {
.date-filter-buttons, .table-filter-buttons {
flex: 1 1 50%
}
}
@media only screen and (min-width: 56.063em) {
.date-filter-buttons, .table-filter-buttons {
flex: 0 0 auto
}
}
@media only screen and (min-width: 90.063em) {
.date-filter-buttons, .table-filter-buttons {
flex-wrap: nowrap;
justify-content: flex-start
}
}
.date-filter-buttons button, .table-filter-buttons button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-primary-medium);
flex: 0 1 auto;
font-weight: 400;
margin-bottom: .75rem;
min-width: 60px;
padding: .375rem 1.5rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.date-filter-buttons button:hover, .table-filter-buttons button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.date-filter-buttons button.active, .date-filter-buttons button:active, .table-filter-buttons button.active, .table-filter-buttons button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.date-filter-buttons button:disabled, .table-filter-buttons button:disabled {
opacity: .4;
pointer-events: none
}
.date-filter-buttons button + button, .table-filter-buttons button + button {
margin-inline-start: .625rem
}
.date-filter .disclaimer, .table-filter .disclaimer {
align-self: center;
margin-bottom: .75rem;
margin-inline-end: .875rem
}
@media only screen and (min-width: 35.063em) {
.date-filter .disclaimer, .table-filter .disclaimer {
align-self: flex-end;
margin-bottom: 1.125rem;
margin-inline-end: .5rem;
margin-inline-start: auto;
padding-inline-start: .625rem
}
}
.date-filter .disclaimer-toggle, .table-filter .disclaimer-toggle {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
display: flex;
font-size: 1.125rem;
min-height: 1em;
min-width: 1em;
padding: 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.date-filter .disclaimer-toggle:hover, .table-filter .disclaimer-toggle:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.date-filter .disclaimer-toggle.active, .date-filter .disclaimer-toggle:active, .table-filter .disclaimer-toggle.active, .table-filter .disclaimer-toggle:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.date-filter .disclaimer-toggle:disabled, .table-filter .disclaimer-toggle:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (min-width: 35.063em) {
.date-filter .disclaimer-toggle, .table-filter .disclaimer-toggle {
font-size: 1.5rem
}
}
.table-filter .date-filter {
background: none;
margin: 0;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.table-filter .date-filter {
margin-inline-start: 1rem
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
body.with-graph.hide-account-status .sidebar {
min-height: 100%;
top: 0
}
}
.sidebar {
background-color: var(--surface-sidebar-main);
min-height: calc(100% - 3.5rem)
}
.premium-profile .sidebar {
min-height: calc(100% - 3.625rem)
}
.sidebar h3 {
background-color: var(--surface-sidebar-header);
margin: 0;
padding: 0
}
.sidebar h3 button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-medium);
font-size: 1.25rem;
max-height: 3.065rem;
min-height: 0;
padding: .5625em 1em;
text-align: left;
transition: .2s ease-in-out;
vertical-align: top;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar h3 button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.sidebar h3 button.active, .sidebar h3 button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-primary-regular)
}
.sidebar h3 button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar h3 button:before {
content: "\e98d"
}
@media only screen and (min-width: 56.063em) {
.sidebar h3 button:before {
content: "\e98f"
}
}
.sidebar > div {
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 3.065rem;
transition: transform .5s ease-in-out;
width: 100%;
-ms-overflow-style: scrollbar;
backface-visibility: hidden;
padding: .75rem 1rem 1.5rem
}
.sidebar > div > div:last-child {
margin-bottom: 1rem
}
.sidebar-open {
position: relative
}
.sidebar-open .sidebar {
z-index: 2
}
@media only screen and (min-width: 56.063em) {
.sidebar-open .sidebar {
box-shadow: -3rem 0 4rem 0 var(--shadow-sidebar)
}
}
.sidebar .instrument-header {
align-items: center;
display: flex;
padding: .25rem .75rem
}
.sidebar .instrument-header .instrument-logo-wrap {
flex: 0 0 1em;
font-size: 3.125rem;
margin: .625rem 0;
margin-inline-end: .5rem
}
@media only screen and (min-width: 56.063em) {
.sidebar .instrument-header .instrument-logo-wrap {
margin-inline-end: 1rem
}
}
.sidebar .instrument-header .content {
align-content: flex-start;
align-items: flex-start;
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
padding-inline-end: .5rem
}
.sidebar .instrument-header .content h4 {
color: var(--on-surface-regular);
font-size: 1.125rem;
line-height: 1.2;
padding-bottom: 0
}
.sidebar .instrument-header .content h4.name-long {
font-size: 1rem
}
@media only screen and (min-width: 56.063em) {
.sidebar .instrument-header .content h4 {
font-size: 1.25rem
}
.sidebar .instrument-header .content h4.name-long {
font-size: 1.125rem
}
}
.sidebar .instrument-header .content h4 .sym {
color: inherit;
font-size: 1em
}
.sidebar .instrument-header .content h4 a {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar .instrument-header .content h4 a:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-tertiary-fixed-focused)
}
}
.sidebar .instrument-header .content h4 a.active, .sidebar .instrument-header .content h4 a:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-tertiary-fixed-focused)
}
.sidebar .instrument-header .content h4 a:disabled {
opacity: .4;
pointer-events: none
}
.sidebar .instrument-header .content h4 a .sym {
color: var(--on-surface-primary-medium)
}
.sidebar .instrument-header .content h4 strong {
overflow-wrap: anywhere;
word-break: break-word
}
.sidebar .instrument-header .content .account-type, .sidebar .instrument-header .content .details-link, .sidebar .instrument-header .content .ko-level, .sidebar .instrument-header .content h4 {
flex: 0 1 100%
}
.sidebar .instrument-header .content .action-type {
flex: 0 0 auto
}
.sidebar .instrument-header .content .status {
flex: 1 0 auto
}
.sidebar .instrument-header .content .account-type, .sidebar .instrument-header .content .action-type, .sidebar .instrument-header .content .details-link, .sidebar .instrument-header .content .instrument-rate, .sidebar .instrument-header .content .ko-level, .sidebar .instrument-header .content .status {
margin-top: .25rem
}
.sidebar .instrument-header .side-content {
align-self: stretch;
display: flex;
flex: 0 1 auto;
flex-direction: column;
justify-content: center
}
.sidebar .instrument-header .side-content .actions, .sidebar .instrument-header .side-content .data {
flex: 0 0 auto
}
.sidebar .instrument-header .side-content .data .change {
font-weight: 500
}
.sidebar .instrument-header .side-content .actions.textual {
text-align: end
}
.sidebar .instrument-header .side-content .actions.textual .add-new-alert-link {
min-width: 10ch
}
.sidebar .instrument-header .account-type, .sidebar .instrument-header .action-type, .sidebar .instrument-header .instrument-rate, .sidebar .instrument-header .ko-level {
color: var(--on-surface-light);
font-size: 1rem
}
.sidebar .instrument-header .account-type strong, .sidebar .instrument-header .action-type strong, .sidebar .instrument-header .instrument-rate strong, .sidebar .instrument-header .ko-level strong {
color: var(--on-surface-medium);
font-weight: 400
}
.sidebar .instrument-header .account-type strong.rate-value.red, .sidebar .instrument-header .action-type strong.rate-value.red, .sidebar .instrument-header .instrument-rate strong.rate-value.red, .sidebar .instrument-header .ko-level strong.rate-value.red {
color: var(--on-surface-alert)
}
.sidebar .instrument-header .account-type strong.rate-value.green, .sidebar .instrument-header .action-type strong.rate-value.green, .sidebar .instrument-header .instrument-rate strong.rate-value.green, .sidebar .instrument-header .ko-level strong.rate-value.green {
color: var(--on-surface-success)
}
.sidebar .instrument-header .data {
margin-bottom: .625rem
}
.sidebar .instrument-header .action-type {
margin-inline-end: .5rem
}
.sidebar .instrument-header .status {
font-size: 1rem
}
.sidebar .instrument-header .status span {
align-items: center;
color: var(--on-surface-primary);
display: flex
}
.sidebar .instrument-header .status span:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.125rem;
margin-inline-end: .25rem;
margin-top: -1px
}
.sidebar .instrument-header .status span.pending {
color: var(--on-surface-warning)
}
.sidebar .instrument-header .status span.pending:before {
content: "\e931"
}
.sidebar .instrument-header .status span.live {
color: var(--on-surface-warning)
}
.sidebar .instrument-header .status span.live:before {
content: "\e931"
}
.sidebar .instrument-header .status span.executed {
color: var(--on-surface-success)
}
.sidebar .instrument-header .status span.executed:before {
content: "\e997"
}
.sidebar .instrument-header .status span.cancelled {
color: var(--on-surface-alert)
}
.sidebar .instrument-header .status span.cancelled:before {
content: "\e9e0"
}
.sidebar .instrument-header .status span.rejected {
color: var(--on-surface-alert)
}
.sidebar .instrument-header .status span.rejected:before {
content: "\e9e1"
}
.sidebar .instrument-header + .sidebar-info-trade {
margin-top: .5rem
}
@media only screen and (min-width: 56.063em) {
.sidebar .instrument-header + .sidebar-info-trade {
margin-top: 0
}
}
.sidebar .instrument-header h4 {
color: var(--on-surface-primary);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.25em;
padding-bottom: .25em
}
.sidebar .instrument-header h4 .sym {
color: var(--on-surface-primary);
font-size: .777776em;
white-space: nowrap
}
.sidebar .instrument-header .data {
display: inline-flex;
font-size: 1rem;
justify-content: flex-end
}
.sidebar .instrument-header .data div {
padding-inline-end: 1em
}
.sidebar .instrument-header .data div:last-child {
padding-inline-end: 0
}
.sidebar .instrument-header .data .change, .sidebar .instrument-header .data .rate {
font-weight: 700
}
.sidebar .instrument-header .data .change.red, .sidebar .instrument-header .data .rate.red {
color: var(--on-surface-alert)
}
.sidebar .instrument-header .data .change.green, .sidebar .instrument-header .data .rate.green {
color: var(--on-surface-success)
}
.sidebar .instrument-header .data .change {
white-space: nowrap
}
.sidebar .instrument-header-summary {
font-size: .75rem;
margin: 0;
padding-left: .9375rem;
padding-right: .9375rem
}
.sidebar .instrument-header .side-content .tooltip-icon {
color: var(--on-surface-primary);
font-size: 1.5rem
}
.sidebar .instrument-header .side-content .tooltip-icon:before {
display: block
}
.sidebar-content .info {
padding: .3125rem .625rem 0
}
.sidebar-content .info[data-type=Update] .info-change {
display: none !important
}
.sidebar-content .info-no-trading {
align-items: center;
background-color: var(--surface-container-dim);
color: var(--on-primary-regular);
font-size: .875rem;
justify-content: center;
margin: -.75rem -1rem 1.25rem;
max-width: calc(100% + 2rem);
padding: .5rem;
text-align: center
}
.sidebar-content .info-no-trading:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ea08";
flex: 0 0 auto;
font-size: 1.125rem;
margin: 0 .25rem .125rem
}
.sidebar-content .info .info-no-trading {
margin: -1.065rem -1.625rem 1.25rem;
max-width: calc(100% + 3.25rem)
}
.sidebar-content .info-notes {
margin: -.75rem -1rem 1.25rem;
max-width: calc(100% + 2rem)
}
.sidebar-content .info-notes span {
align-items: center;
display: flex;
font-size: .875rem;
justify-content: center;
padding: .5rem
}
.sidebar-content .info-notes span:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.125rem;
margin-inline-end: .625rem
}
.sidebar-content .info-notes span.color-brand {
background-color: var(--surface-container-active-light);
color: var(--on-surface-tertiary-fixed)
}
.sidebar-content .info-notes span.color-brand:before {
content: "\e9cf"
}
.sidebar-content .info-notes span.color-alert {
background-color: var(--surface-alert-light);
color: var(--on-surface-alert)
}
.sidebar-content .info-notes span.color-alert:before {
content: "\e931"
}
.sidebar-content .info .info-notes {
margin: -1.065rem -1.625rem 1.25rem;
max-width: calc(100% + 3.25rem)
}
.sidebar-content .info-no-trading + .info-notes {
margin-top: -1.25rem
}
.sidebar-content .instrument-info h4 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25rem;
padding: 0 0 .3125rem
}
.sidebar-content .instrument-info h4.name-long {
font-size: 18px
}
@media only screen and (min-width: 480px) {
.sidebar-content .instrument-info h4.name-long {
font-size: 1.25rem
}
}
@media only screen and (min-width: 73.063em) {
.sidebar-content .instrument-info h4.name-long {
font-size: 18px
}
}
@media only screen and (min-width: 90.063em) {
.sidebar-content .instrument-info h4.name-long {
font-size: 1.25rem
}
}
.sidebar-content .instrument-info h4[data-linked] {
color: var(--on-surface-primary-fixed);
cursor: pointer
}
.sidebar-content .instrument-info h4[data-linked]:hover {
color: var(--on-surface-tertiary-fixed);
text-decoration: underline
}
.sidebar-content .instrument-info > div {
align-items: flex-start;
display: flex;
justify-content: space-between;
padding-bottom: .3125rem
}
.sidebar-content .instrument-info > div:first-of-type + div {
flex-direction: row-reverse
}
.sidebar-content .instrument-info .sym {
font-size: 1rem;
font-weight: 300;
margin-bottom: .25rem;
white-space: nowrap
}
.sidebar-content .instrument-info .info-change {
display: block;
font-size: 1rem;
font-weight: 700;
white-space: nowrap
}
.sidebar-content .instrument-info .info-change.red {
color: var(--on-surface-alert)
}
.sidebar-content .instrument-info .info-change.green {
color: var(--on-surface-success)
}
.sidebar-content .instrument-info dl {
display: flex;
justify-content: flex-start;
margin: 0;
padding: 0
}
.sidebar-content .instrument-info dl[data-show=false] {
display: none !important
}
.sidebar-content .instrument-info dl dd, .sidebar-content .instrument-info dl dt {
font-size: .8rem;
margin: 0;
padding: 0
}
.sidebar-content .instrument-info dl dt {
font-weight: 400;
margin-right: .25rem
}
.sidebar-content .instrument-info dl dd {
font-weight: 600
}
.sidebar-content .instrument-info dl dd:first-of-type {
margin-right: .75rem
}
.sidebar-content .instrument-info .actions {
min-width: 2.625rem;
white-space: nowrap
}
.sidebar-content .instrument-info .actions button {
align-items: center;
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
display: inline-flex;
height: 2.5rem;
justify-content: center;
margin: 0;
min-width: 0;
padding: 0;
transition: .2s ease-in-out;
width: 2.5rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content .instrument-info .actions button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.sidebar-content .instrument-info .actions button.active, .sidebar-content .instrument-info .actions button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.sidebar-content .instrument-info .actions button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-content .instrument-info .actions button {
font-size: 1.25rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.sidebar-content .instrument-info .actions button {
font-size: 1rem
}
}
.sidebar-content .instrument-info .actions button:before {
width: 100%
}
.sidebar-content .instrument-info .actions button:last-of-type {
margin: 0
}
.sidebar-content .instrument-info .instrument-rate {
display: flex;
flex-wrap: wrap;
font-size: .875rem;
justify-content: flex-start
}
.sidebar-content .instrument-info .instrument-rate .rate-value.red {
color: var(--on-surface-alert)
}
.sidebar-content .instrument-info .instrument-rate .rate-value.green {
color: var(--on-surface-success)
}
.sidebar-content .instrument-info .rate-label {
font-weight: 300;
padding-right: .3125rem
}
.sidebar-content .sidebar-info-trade .info-general {
align-items: baseline;
display: flex;
justify-content: space-between;
min-height: 43px
}
.sidebar-content .sidebar-info-trade > div {
padding: 0 .625rem .625rem
}
.sidebar-content .sidebar-info-trade dl {
margin: 0;
padding: 0
}
.sidebar-content .sidebar-info-trade dl dd, .sidebar-content .sidebar-info-trade dl dt {
float: left;
font-size: .875rem;
margin: 0;
padding: 0
}
.sidebar-content .sidebar-info-trade dl dt {
font-weight: 400;
margin-right: .25em
}
.sidebar-content .sidebar-info-trade dl dd {
font-weight: 600
}
.sidebar-content .sidebar-info-trade dl dd:first-of-type {
margin-right: .75em
}
.sidebar-content .sidebar-info-trade .actions button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
margin: 0 .5rem 0 0;
min-width: 0;
text-align: right;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content .sidebar-info-trade .actions button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.sidebar-content .sidebar-info-trade .actions button.active, .sidebar-content .sidebar-info-trade .actions button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.sidebar-content .sidebar-info-trade .actions button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-content .sidebar-info-trade .actions button {
font-size: 1.25rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.sidebar-content .sidebar-info-trade .actions button {
font-size: 1rem
}
}
.sidebar-content .sidebar-info-trade .actions button:before {
width: 100%
}
.sidebar-content .sidebar-info-trade .actions button:last-of-type {
margin: 0
}
.sidebar-content .sidebar-info-trade .info-no-trading {
font-size: .875rem
}
.sidebar-content .sidebar-info-trade .info-buttons {
flex-wrap: nowrap;
padding: 1rem .5rem
}
.sidebar-content .sidebar-info-trade .info-buttons .value {
display: block;
font-size: 1.625rem;
font-weight: 300
}
.sidebar-content .info-buttons {
display: flex;
flex-wrap: nowrap;
padding-top: 1.25rem
}
.sidebar-content .info-buttons div {
flex: 0 1 50%;
min-width: 40%;
padding: 0 .25rem
}
.sidebar-content .info-buttons button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 0;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
font-weight: 700;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content .info-buttons button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.sidebar-content .info-buttons button.active, .sidebar-content .info-buttons button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.sidebar-content .info-buttons button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-content .sidebar-trade .close-at {
display: block
}
@media only screen and (min-width: 73.063em)and (max-width: 90em) {
.sidebar-content .sidebar-trade .close-at {
display: block
}
}
.sidebar-content .guaranteed-stop {
padding: 0 .625rem
}
.sidebar-content .guaranteed-stop > div {
align-items: center;
display: flex;
justify-content: flex-start
}
.sidebar-content .guaranteed-stop label {
cursor: help
}
.sidebar-content .guaranteed-stop label span {
display: block
}
.sidebar-content .guaranteed-stop strong {
display: block;
font-size: .875rem;
margin-bottom: 1rem;
padding-left: .25rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-content .guaranteed-stop strong {
margin-bottom: 0
}
}
@media only screen and (min-width: 73.063em)and (max-width: 90em) {
.sidebar-content .guaranteed-stop strong {
font-size: .75rem
}
}
.sidebar-content .icon-guaranteed-stop {
color: var(--on-surface-tertiary-fixed);
font-size: 1.5rem;
line-height: 0
}
@media only screen and (min-width: 56.063em) {
.sidebar .sidebar-content.redesign {
margin-bottom: -2.5rem
}
}
.sidebar-content.redesign .info-no-trading {
margin: -.75rem -1rem .75rem
}
.sidebar-content.redesign .checkbox-custom {
display: flex;
font-size: 16px;
line-height: 1.5;
margin-bottom: .125rem;
min-height: 1.5rem;
padding: .5rem 0
}
.sidebar-content.redesign .checkbox-custom input[type=checkbox] {
appearance: none;
background-color: var(--surface-switch-inactive);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='27' height='27' x='1.5' y='2.5' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_1157_9249'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_1157_9249' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
background-position: 0;
background-repeat: no-repeat;
background-size: contain;
border-radius: 2em;
cursor: pointer;
flex: 0 0 2em;
font-size: 1.5em;
height: 1.125em;
margin: .125em 0 0 auto;
opacity: 1;
order: 2;
position: static;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
transition: background-position .15s ease-in-out, background-color .5s ease-out;
vertical-align: top
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .checkbox-custom input[type=checkbox] {
margin-top: .0625rem
}
}
.sidebar-content.redesign .checkbox-custom input[type=checkbox]:checked {
background-color: var(--surface-switch-active);
background-position: 100%
}
.sidebar-content.redesign .checkbox-custom input[type=checkbox]:disabled, .sidebar-content.redesign .checkbox-custom input[type=checkbox]:disabled ~ label, .sidebar-content.redesign .checkbox-custom input[type=checkbox][disabled], .sidebar-content.redesign .checkbox-custom input[type=checkbox][disabled] ~ label {
cursor: default;
opacity: .5
}
.sidebar-content.redesign .checkbox-custom label {
cursor: pointer;
flex: 0 0 auto;
font-size: 1rem;
margin: 0 .3125rem 0 0;
min-height: 0;
padding: 0;
vertical-align: top
}
.sidebar-content.redesign .checkbox-custom label.checkbox-custom-text:after, .sidebar-content.redesign .checkbox-custom label.checkbox-custom-text:before {
display: none
}
.sidebar-content.redesign .checkbox-custom label.label-icon {
align-items: center;
display: flex
}
.sidebar-content.redesign .checkbox-custom label.label-icon:before {
color: var(--on-surface-primary-light);
font-size: 1.5rem;
margin-top: -.25rem;
padding-inline-end: .5rem
}
.sidebar-content.redesign .checkbox-custom .icon {
margin-right: .3125rem
}
.sidebar-content.redesign trustProequity-switch {
display: block;
margin: 0 .625rem .125rem;
min-height: 1.5rem;
padding: .5rem 0
}
.sidebar-content.redesign trustProequity-switch .inner-label[title] {
cursor: help
}
.sidebar-content.redesign .spinbox {
margin: 0;
padding: 0
}
.sidebar-content.redesign .spinbox .section-title {
color: var(--on-surface-primary);
justify-content: center
}
.sidebar-content.redesign .spinbox .section-title h5 {
display: flex;
font-size: 1rem;
font-weight: 600
}
.sidebar-content.redesign .spinbox .section-title h5:before {
font-size: 1.125rem;
margin-inline-end: .625rem
}
.sidebar-content.redesign .spinbox .inputs {
align-items: center;
height: auto !important;
justify-content: center;
margin: .3125rem auto 0;
max-width: 14.75rem;
padding: 0
}
.sidebar-content.redesign .spinbox .inputs input {
border-bottom-color: var(--outline-medium);
border-width: 0 0 1px;
color: var(--on-surface-primary);
font-size: 1.5rem;
margin: 0 .5rem;
padding: .3125rem .375rem .1875rem;
text-align: center;
transition: background-color .5s ease-out
}
.sidebar-content.redesign .spinbox .inputs input:disabled {
-webkit-text-fill-color: var(--on-surface-primary);
opacity: .4
}
.sidebar-content.redesign .spinbox .inputs button {
background-color: var(--surface-container-active-light);
border: 0;
border-radius: 1rem;
color: var(--on-surface-primary);
flex: 0 0 2rem;
height: 2rem;
margin: 0;
min-width: 2rem
}
.sidebar-content.redesign .spinbox .inputs button:hover {
background-color: var(--surface-container-active-light-focused)
}
.sidebar-content.redesign .spinbox .inputs .icon-minus {
order: -1
}
.sidebar-content.redesign .spinbox .inputs.with-currency {
isolation: isolate;
position: relative
}
.sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign {
color: transparent;
direction: ltr;
display: flex;
font-size: 1.5rem;
height: 100%;
justify-content: center;
left: 0;
line-height: 1.333;
margin: 0 2.5rem;
overflow: hidden;
padding: .3125rem .375rem .1875rem;
position: absolute;
right: 0;
top: 0;
z-index: 0
}
.sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign:after, .sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign:before {
color: var(--on-surface-primary);
content: attr(data-sign);
visibility: hidden;
white-space: pre
}
.sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign[data-sign-align=end]:after, .sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign[data-sign-align=start]:before {
visibility: visible
}
.sidebar-content.redesign .spinbox .inputs.with-currency .currency-sign.disabled {
opacity: .4
}
.sidebar-content.redesign .spinbox .inputs.with-currency input {
background-color: transparent;
position: relative;
z-index: 1
}
.sidebar-content.redesign .spinbox .inputs.ui-spinner-disabled button, .sidebar-content.redesign .spinbox .inputs.ui-spinner-disabled input {
opacity: .4
}
.sidebar-content.redesign .spinbox .title {
display: block;
font-size: .8125rem;
margin-top: .4375rem;
text-align: center
}
.sidebar-content.redesign .spinbox .title label {
padding: 0
}
.sidebar-content.redesign .spinbox .title strong {
font-weight: 400
}
.sidebar-content.redesign .spinbox .calc {
margin: .4375rem auto 0;
max-width: 16rem;
text-align: center
}
.sidebar-content.redesign .spinbox.enabled {
margin-bottom: .5rem
}
.sidebar-content.redesign .spinbox.enabled .calc {
display: flex;
justify-content: center
}
.sidebar-content.redesign .spinbox .checkbox-custom label[title] {
cursor: help
}
.sidebar-content.redesign .spinbox .checkbox-custom input[type=checkbox]:disabled, .sidebar-content.redesign .spinbox .checkbox-custom input[type=checkbox]:disabled ~ label, .sidebar-content.redesign .spinbox .checkbox-custom input[type=checkbox][disabled], .sidebar-content.redesign .spinbox .checkbox-custom input[type=checkbox][disabled] ~ label {
cursor: not-allowed
}
.sidebar-content.redesign .spinbox .inputs + .additional-info {
margin-top: .4375rem
}
.sidebar-content.redesign .spinbox .additional-info:not(.select-type) {
color: var(--on-surface-light);
display: flex;
font-size: .8125rem;
justify-content: center;
text-align: center
}
.sidebar-content.redesign .spinbox .additional-info:not(.select-type) strong {
color: var(--on-surface-regular)
}
.sidebar-content.redesign .spinbox .additional-info:not(.select-type) strong.red {
color: var(--on-surface-alert)
}
.sidebar-content.redesign .spinbox .additional-info:not(.select-type) strong.green {
color: var(--on-surface-success)
}
.sidebar-content.redesign .spinbox .select-type {
margin: 2rem 0 .5rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .spinbox .select-type {
margin-top: 3rem
}
}
.sidebar-content.redesign .spinbox .select-type:last-child {
margin-bottom: 1.25rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .spinbox .select-type:last-child {
margin-top: 1.75rem
}
}
.sidebar-content.redesign .spinbox .select-type + .select-type {
margin-top: 0
}
.sidebar-content.redesign .spinbox .select-type .tooltip-icon {
cursor: help;
font-size: 1.5rem;
margin-top: 0;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .spinbox .select-type .tooltip-icon {
font-size: 1.25rem
}
}
.sidebar-content.redesign .spinbox .select-type .tooltip-icon:before {
display: block
}
.sidebar-content.redesign .spinbox .select-type .type-title {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
width: 100%
}
.sidebar-content.redesign .spinbox .select-type .type-title .tooltip-icon {
margin-inline-start: .5rem
}
.sidebar-content.redesign .spinbox .sentiment {
width: 100%
}
.sidebar-content.redesign .big .spinbox {
display: flex;
flex-direction: column
}
.sidebar-content.redesign .big .spinbox > div {
margin-left: auto;
margin-right: auto;
max-width: 19.25rem;
width: 100%
}
.sidebar-content.redesign .big .spinbox > div.select-type {
max-width: 100%
}
.sidebar-content.redesign .big .spinbox .section-title {
margin-top: 1rem
}
.sidebar-content.redesign .big .spinbox .inputs {
display: flex;
margin-top: 1.5rem
}
.sidebar-content.redesign .big .spinbox .inputs input {
font-size: 2rem;
margin: 0 1rem
}
.sidebar-content.redesign .big .spinbox .inputs button {
border-radius: 1.25rem;
flex: 0 0 2.5rem;
height: 2.5rem
}
.sidebar-content.redesign .big .spinbox .title {
font-size: 1rem;
margin-top: .75rem
}
.sidebar-content.redesign .big .spinbox .inputs + .title {
font-size: .8125rem;
margin: .4375rem auto 1.5rem
}
.sidebar-content.redesign .alert-list-wrapper {
padding: 2rem 0 1rem
}
.sidebar-content.redesign .alert-list-wrapper .alert-item {
padding: .75rem 0
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .alert-list-wrapper .alert-item {
padding: 1rem 0
}
}
.sidebar-content.redesign .alert-list-wrapper .alert-item .sidebar-action {
margin-top: 2rem
}
.sidebar-content.redesign .alert-notifications {
border-bottom: 0
}
.sidebar-content.redesign .no-alerts-placeholder h4, .sidebar-content.redesign .no-alerts-placeholder span {
color: var(--on-surface-primary-medium);
opacity: .4
}
.sidebar-content.redesign .no-alerts-placeholder h4 {
font-size: 1.125rem
}
.sidebar-content.redesign .no-alerts-placeholder button {
background: var(--gradient-cta-btn) no-repeat;
border: none;
border-radius: 5rem;
color: var(--on-primary-regular);
font-size: 1.25rem;
margin-top: .75rem;
min-width: 12rem;
padding: .5rem 1.25rem;
padding-inline-end: 1.75rem;
transition: .2s ease-in-out
}
.sidebar-content.redesign .no-alerts-placeholder button.active, .sidebar-content.redesign .no-alerts-placeholder button:active, .sidebar-content.redesign .no-alerts-placeholder button:hover {
background: var(--surface-tertiary-fixed)
}
.sidebar-content.redesign .no-alerts-placeholder button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-content.redesign .no-alerts-placeholder button:before {
padding-inline-end: .5rem;
position: relative;
top: 1px
}
.sidebar-content.redesign .amount {
border-bottom: 1px solid var(--outline-light);
margin-bottom: .75rem
}
.sidebar-content.redesign .amount .knockout-amount-info {
padding: 1.625rem 0 0
}
.sidebar-content.redesign .amount .amount-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1.625rem 0
}
.sidebar-content.redesign .amount .amount-info, .sidebar-content.redesign .amount .knockout-amount-info {
width: 100%
}
.sidebar-content.redesign .amount .amount-info p, .sidebar-content.redesign .amount .knockout-amount-info p {
flex: 0 0 50%;
max-width: 50%;
padding: 0;
padding-inline-end: 1rem;
text-align: center
}
.sidebar-content.redesign .amount .amount-info p + p, .sidebar-content.redesign .amount .knockout-amount-info p + p {
border: solid var(--outline-light);
border-width: 0 0 0 1px;
padding-inline-end: 0;
padding-inline-start: 1rem
}
.sidebar-content.redesign .amount .amount-info p:only-child, .sidebar-content.redesign .amount .amount-info p[data-hide=true] + p, .sidebar-content.redesign .amount .amount-info p[data-only-child=true], .sidebar-content.redesign .amount .knockout-amount-info p:only-child, .sidebar-content.redesign .amount .knockout-amount-info p[data-hide=true] + p, .sidebar-content.redesign .amount .knockout-amount-info p[data-only-child=true] {
flex: 0 0 100%;
max-width: 100%;
padding: 0
}
.sidebar-content.redesign .amount .amount-info p > span, .sidebar-content.redesign .amount .knockout-amount-info p > span {
color: var(--on-surface-link);
display: inline-flex;
font-size: .8125rem;
justify-content: center;
line-height: 1.4;
padding-bottom: .375rem
}
.sidebar-content.redesign .amount .amount-info p strong, .sidebar-content.redesign .amount .knockout-amount-info p strong {
display: flex;
flex-direction: column;
font-size: .9375rem
}
.sidebar-content.redesign .amount .amount-info p strong span, .sidebar-content.redesign .amount .knockout-amount-info p strong span {
flex: 1 1 100%
}
.sidebar-content.redesign .amount .amount-info .trader-points, .sidebar-content.redesign .amount .knockout-amount-info .trader-points {
align-items: center;
display: flex;
flex: 0 0 100%;
justify-content: center;
margin-top: 1.25rem;
padding-inline-start: 1.375rem
}
.sidebar-content.redesign .amount .amount-info .trader-points .value, .sidebar-content.redesign .amount .knockout-amount-info .trader-points .value {
align-items: center;
background: var(--surface-container-main);
border-radius: 2rem;
color: var(--on-surface-medium);
display: flex;
gap: .25rem;
justify-content: center;
padding: .25rem .5rem;
padding-inline-end: .375rem
}
.sidebar-content.redesign .amount .amount-info .trader-points .value .icon-trader-points, .sidebar-content.redesign .amount .knockout-amount-info .trader-points .value .icon-trader-points {
display: flex;
flex: 0 0 auto;
font-size: .875rem
}
.sidebar-content.redesign .amount .amount-info .trader-points .tooltip-icon, .sidebar-content.redesign .amount .knockout-amount-info .trader-points .tooltip-icon {
color: var(--surface-button-primary);
flex: 0 0 auto;
margin-top: 0;
margin-inline-start: .25rem
}
.sidebar-content.redesign .amount .amount-info .tooltip-icon, .sidebar-content.redesign .amount .knockout-amount-info .tooltip-icon {
display: flex;
font-size: 1.125rem;
margin-inline-start: .375rem;
margin-top: -.125rem
}
.sidebar-content.redesign .amount .amount-info .tooltip-icon:empty:before, .sidebar-content.redesign .amount .knockout-amount-info .tooltip-icon:empty:before {
content: "\e95e";
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.sidebar-content.redesign .amount .amount-info .tooltip-icon span, .sidebar-content.redesign .amount .knockout-amount-info .tooltip-icon span {
padding: 0
}
.sidebar-content.redesign .amount .amount-info .tooltip-icon span:before, .sidebar-content.redesign .amount .knockout-amount-info .tooltip-icon span:before {
content: "\e95e";
display: block
}
.sidebar-content.redesign .shadow-element {
display: none
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .shadow-element {
background-color: var(--surface-sidebar-main);
bottom: 3rem;
box-shadow: 0 -.5rem .5rem 0 var(--shadow-bottom-overlay);
display: block;
height: .5rem;
margin: 1rem -1.5rem -1.5rem;
position: sticky
}
}
.sidebar-content.redesign .sidebar-action button {
border-radius: .75rem
}
.sidebar-content.redesign .sidebar-trade {
display: flex;
flex-direction: column;
padding: 0 .5rem
}
.sidebar-content.redesign .sidebar-trade .sidebar-action {
flex-direction: column;
flex-wrap: wrap
}
.sidebar-content.redesign .sidebar-trade .sidebar-action .outside-trade {
align-items: center;
background-color: var(--surface-container-main);
border-radius: .5rem;
color: var(--on-surface-regular);
display: inline-flex;
font-size: .8125rem;
justify-content: center;
margin-bottom: .25rem;
padding: .5rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .sidebar-trade .sidebar-action {
background-color: var(--surface-sidebar-main);
bottom: -1.5rem;
margin: 0 -1.5rem;
padding: 1rem 2.125rem;
position: sticky;
transition: background-color .5s ease-out
}
}
.sidebar-content.redesign .sidebar-trade .sidebar-action .action {
flex: 1 1 100%
}
.sidebar-content.redesign .sidebar-trade .sidebar-action .cancel {
flex: 0
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .sidebar-trade .shadow-element {
bottom: 4.875rem
}
.sidebar-content.redesign .sidebar-trade .shadow-element.no-action-alert {
bottom: 3rem
}
}
.sidebar-content.redesign .sidebar-trade .sidebar-advanced, .sidebar-content.redesign .sidebar-trade .sidebar-info-more {
border-bottom: 1px solid var(--outline-light);
margin-top: .75rem
}
.sidebar-content.redesign .sidebar-trade .order-type {
margin-bottom: .75rem;
margin-top: .75rem
}
.sidebar-content.redesign .sidebar-trade .order-type h4 {
text-align: center
}
.sidebar-content.redesign .sidebar-trade .order-type .spinbox.enabled {
margin-bottom: 1.125rem
}
.sidebar-content.redesign .sidebar-trade .order-type .spinbox .title {
margin-top: 0;
padding-top: .75rem
}
.sidebar-content.redesign .sidebar-trade .expiry h4 {
margin-bottom: 0;
text-align: center
}
.sidebar-content.redesign .info {
padding: 0
}
.sidebar-content.redesign .info .instrument-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: .75rem;
padding: 0 .5rem
}
.sidebar-content.redesign .info .instrument-info h4 {
color: var(--on-surface-primary);
padding: 0 0 .75rem;
text-align: center;
width: 100%
}
.sidebar-content.redesign .info .instrument-info h4 strong {
font-size: 1.375rem
}
.sidebar-content.redesign .info .instrument-info h4 span {
font-size: 1.125rem
}
.sidebar-content.redesign .info .instrument-info h4.name-long strong {
font-size: inherit
}
.sidebar-content.redesign .info .instrument-info section {
display: flex;
flex-direction: row-reverse;
justify-content: center
}
.sidebar-content.redesign .info .instrument-info .info-change {
font-size: .875rem
}
.sidebar-content.redesign .info .instrument-info .instrument-rate {
font-weight: 700;
padding-right: .75rem
}
.sidebar-content.redesign .info .instrument-info .instrument-rate .rate-label {
font-weight: inherit;
padding: 0
}
.sidebar-content.redesign .info .instrument-info .instrument-rate span {
white-space: pre
}
.sidebar-content.redesign .info .instrument-info .instrument-data-wrap {
flex-direction: row;
padding: 0
}
.sidebar-content.redesign .buysell-selection {
padding: 1.25rem 0 0;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .buysell-selection {
display: none
}
}
.sidebar-content.redesign .buysell-selection > div {
flex: 1 0 100%
}
.sidebar-content.redesign .buysell-selection select {
border: 1px solid var(--outline-primary-extra-light);
border-radius: 3px;
display: block;
line-height: 1;
margin: 0 auto;
max-width: 6.25rem;
padding: .5rem 1rem
}
.sidebar-content.redesign .close-position .info-header {
text-align: center
}
.sidebar-content.redesign .close-position .info-header .instrument-name {
padding-bottom: .5rem
}
.sidebar-content.redesign .close-position .info-header .instrument-name h4 {
color: var(--on-surface-primary);
padding: 0
}
.sidebar-content.redesign .close-position .info-header .position-type {
color: var(--on-surface-primary-medium);
font-size: 1.125rem
}
.sidebar-content.redesign .close-position .info-header .position-type span {
padding: 0
}
.sidebar-content.redesign .custom-radio-group {
--index: 0;
background-color: var(--surface-segmented-control-main);
border-radius: .5em;
display: grid;
font-size: .875rem;
grid-template:"label0 label1 label2"/1fr 1fr 1fr;
isolation: isolate;
margin: .625rem 0;
padding: .25em
}
.sidebar-content.redesign .custom-radio-group span {
background-color: var(--surface-segmented-control-active);
border-radius: .5em;
box-shadow: 0 1px 3px 1px var(--shadow-container-emph);
grid-area: label0;
transform: translate(calc(var(--index) * 100%));
transition: transform .3s ease-in-out;
z-index: 0
}
.sidebar-content.redesign .custom-radio-group input {
display: none;
opacity: 0
}
.sidebar-content.redesign .custom-radio-group input:disabled + label {
cursor: not-allowed;
opacity: .4
}
.sidebar-content.redesign .custom-radio-group label {
color: var(--on-surface-regular);
cursor: pointer;
opacity: .7;
padding: .5em;
text-align: center;
z-index: 1
}
.sidebar-content.redesign .custom-radio-group label:hover {
opacity: 1
}
.sidebar-content.redesign .custom-radio-group input.input0:checked ~ span {
--index: 0
}
.sidebar-content.redesign .custom-radio-group input.input0:checked:disabled ~ span {
opacity: .4
}
.sidebar-content.redesign .custom-radio-group input.input0:checked:not(:disabled) ~ .label0 {
cursor: default;
opacity: 1
}
.sidebar-content.redesign .custom-radio-group .label0 {
grid-area: label0
}
.sidebar-content.redesign .custom-radio-group input.input1:checked ~ span {
--index: 1
}
.sidebar-content.redesign .custom-radio-group input.input1:checked:disabled ~ span {
opacity: .4
}
.sidebar-content.redesign .custom-radio-group input.input1:checked:not(:disabled) ~ .label1 {
cursor: default;
opacity: 1
}
.sidebar-content.redesign .custom-radio-group .label1 {
grid-area: label1
}
.sidebar-content.redesign .custom-radio-group input.input2:checked ~ span {
--index: 2
}
.sidebar-content.redesign .custom-radio-group input.input2:checked:disabled ~ span {
opacity: .4
}
.sidebar-content.redesign .custom-radio-group input.input2:checked:not(:disabled) ~ .label2 {
cursor: default;
opacity: 1
}
.sidebar-content.redesign .custom-radio-group .label2 {
grid-area: label2
}
.sidebar-content.redesign .sidebar-info .info-buttons {
background-color: var(--surface-sidebar-main);
padding: 1rem 1.125rem
}
.sidebar-content.redesign .sidebar-info .info-buttons > div {
padding: 0 .5rem
}
.sidebar-content.redesign .sidebar-info .info-buttons button {
background-color: var(--surface-button-secondary);
border: 0 solid transparent;
border-radius: 6px;
color: var(--on-surface-primary);
font-weight: 600;
line-height: 1.2;
padding: .625rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content.redesign .sidebar-info .info-buttons button:hover {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.sidebar-content.redesign .sidebar-info .info-buttons button.active, .sidebar-content.redesign .sidebar-info .info-buttons button:active {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
.sidebar-content.redesign .sidebar-info .info-buttons button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-content.redesign .sidebar-info .info-list {
padding-bottom: 2.25rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-content.redesign .sidebar-info .shadow-element {
bottom: 2.5rem
}
.sidebar-content.redesign .sidebar-info .info-buttons {
bottom: -1.5rem;
margin: 0 -1rem -2.5rem;
padding: 1rem 1.125rem;
position: sticky
}
}
.sidebar-content.ko-options-view .spinbox .inputs input:disabled {
opacity: .4
}
.sidebar-content.ko-options-view .info-no-trading {
display: block
}
.sidebar-content.ko-options-view .info-no-trading:before {
vertical-align: -10%
}
.sidebar-content.ko-options-view .info-no-trading .red {
color: var(--on-surface-alert)
}
.sidebar-content .cost-and-charges-simulator .buysell-selection {
padding: 1em .625rem .5rem
}
.sidebar-content .cost-and-charges-simulator .buysell-selection select {
font-size: 1rem;
min-height: 2rem;
padding: .375rem .75rem;
padding-inline-end: 2.25rem
}
.sidebar-content .cost-and-charges-simulator .spinbox label {
font-size: .875rem
}
.sidebar-content .cost-and-charges-simulator .icon-guaranteed-stop {
margin-inline-start: .3125rem
}
.sidebar-action {
display: flex;
justify-content: center;
padding: .625rem
}
.sidebar-action .action {
flex-basis: 66.6666%
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-action .action {
flex-basis: 100%
}
}
.sidebar-action button {
background: var(--gradient-cta-btn) no-repeat;
border: none;
border-radius: 0;
color: var(--on-primary-regular);
font-size: 1.5rem;
min-width: 0;
padding-bottom: .25em;
padding-top: .25em;
transition: .2s ease-in-out;
width: 100%
}
.sidebar-action button.active, .sidebar-action button:active, .sidebar-action button:hover {
background: var(--surface-tertiary-fixed)
}
.sidebar-action button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-action .no-trading {
color: var(--on-surface-light);
font-size: .875rem;
padding-top: .5em;
text-align: center
}
.sidebar-action .cancel {
align-items: stretch;
flex: 0 1 33.3333%;
font-weight: 400
}
.sidebar-action .cancel, .sidebar-action .cancel a {
color: var(--on-surface-primary);
display: flex;
width: 100%
}
.sidebar-action .cancel a {
align-items: center;
background-color: transparent;
border-color: var(--outline-primary-extra-light);
border-radius: 0;
border-style: solid;
border-width: 1px;
flex-grow: 1;
justify-content: center;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-action .cancel a:hover {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
}
.sidebar-action .cancel a.active, .sidebar-action .cancel a:active {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
.sidebar-action .cancel a:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-alert-links {
display: flex;
justify-content: space-around;
padding: .625rem 0 30px
}
.sidebar-advanced {
border-top: 1px solid var(--outline-light);
padding: .75rem 0
}
.sidebar-advanced h4 button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
display: block;
font-size: 1rem;
font-weight: 600;
min-height: 0;
padding: .3125rem .625rem;
text-align: left;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-advanced h4 button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.sidebar-advanced h4 button.active, .sidebar-advanced h4 button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.sidebar-advanced h4 button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-advanced h4 button:before {
margin-right: .5em;
transform: translateY(1px)
}
.sidebar-advanced h4 button.open:before {
margin-right: .5em;
transform: rotate(90deg) translate(2px, 2px)
}
.sidebar-advanced .advanced {
display: none
}
.sidebar-advanced .advanced.open {
display: block
}
.sidebar-info-more {
border-top: 1px solid var(--outline-light);
padding: .75rem 0;
position: relative
}
.sidebar-info-more > div {
display: none
}
.sidebar-info-more > div.active {
display: block
}
.sidebar-info-more h4 button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
display: block;
font-size: 1rem;
font-weight: 600;
min-height: 0;
padding: .3125rem .625rem;
text-align: left;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-info-more h4 button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.sidebar-info-more h4 button.active, .sidebar-info-more h4 button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.sidebar-info-more h4 button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-info-more h4 button:before {
margin-right: .5em;
transform: translateY(1px)
}
.sidebar-info-more h4 button.active:before {
margin-right: .5em;
transform: rotate(90deg) translate(2px, 2px)
}
.sidebar-info-more .instrument-description {
font-size: .75rem;
margin: 1rem .625rem
}
.sidebar-info-more .instrument-description span {
display: block;
margin-top: .25rem
}
.sidebar-info-more p {
border: none;
padding: .625rem
}
.sidebar-info-more .icon-add-alert {
color: var(--on-surface-medium);
font-size: 1.25rem;
position: absolute;
right: .75rem;
top: 1.25rem
}
.sidebar-info-more .icon-add-alert:hover {
color: var(--on-surface-primary-fixed)
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-info-more .icon-add-alert {
font-size: 1.25rem
}
}
.sidebar-info-more .financial-events {
border: 1px solid var(--outline-light);
border-bottom: none;
margin: .625rem .625rem 2rem
}
.sidebar-info-more .financial-events h5 {
background-color: var(--surface-container-primary-light);
border-bottom: 1px solid var(--outline-light);
font-size: .875rem;
font-weight: 600;
padding: .3125rem .625rem 8px
}
.sidebar-info-more .financial-events ul {
list-style: none;
margin: 0;
padding: 0
}
.sidebar-info-more .financial-events ul li {
border-bottom: 1px solid var(--outline-light);
display: flex;
font-size: .8125rem;
padding: .3125rem .625rem
}
.sidebar-info-more .financial-events ul li .event-time-importance {
border-right: 1px solid var(--outline-light);
display: flex;
justify-content: space-between;
min-width: 90px;
padding-right: .625rem
}
.sidebar-info-more .financial-events ul li .event-time-importance .event-imp-circle {
padding-top: 6px;
white-space: nowrap
}
.sidebar-info-more .financial-events ul li .event-time-importance .event-imp-circle span {
background-color: var(--surface-container-dim-light);
border-radius: 50%;
display: inline-block;
height: .75rem;
margin-right: 2px;
width: .75rem
}
.sidebar-info-more .financial-events ul li .event-time-importance .event-imp-circle span.active {
background-color: var(--surface-success)
}
.sidebar-info-more .financial-events ul li .event-time-importance .event-imp-circle span:last-child {
margin: 0
}
.sidebar-info-more .financial-events ul li .event-time-importance .corporate-events {
color: var(--on-surface-primary-medium)
}
.sidebar-info-more .financial-events ul li .event-time-importance .corporate-events span {
display: block;
padding-top: .3125rem
}
.sidebar-info-more .financial-events ul li .event-time-importance .corporate-events span.icon-briefcase {
font-size: larger;
padding-top: 2px
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ap.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 24px;
width: 24px
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ad {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ad.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ae {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ae.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-an {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-an.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ap {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ap.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ar {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ar.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-at {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-at.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-au {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-au.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-az {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-az.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-bd {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-bd.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-be {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-be.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-bg {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-bg.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-bh {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-bh.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-br {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-br.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-by {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-by.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ca {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ca.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ch {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ch.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-cl {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-cl.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-cn {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-cn.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-co {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-co.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-cr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-cr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-cy {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-cy.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-cz {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-cz.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-de {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-de.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-dk {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-dk.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-do {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-do.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-dz {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-dz.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ec {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ec.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ee {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ee.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-eg {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-eg.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-es {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-es.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-eu {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-eu.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-fi {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-fi.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-fr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-fr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-fx {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-fx.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gb {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gb.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gf {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gf.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gi {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gi.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gp {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gp.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gq {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gq.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-gr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-gr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-hk {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-hk.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-hr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-hr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-hu {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-hu.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-id {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-id.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ie {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ie.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-il {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-il.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-im {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-im.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-in {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-in.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-iq {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-iq.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ir {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ir.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-is {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-is.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-islamic {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-islamic.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-it {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-it.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-jp {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-jp.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-kr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-kr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-kw {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-kw.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-kz {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-kz.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-li {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-li.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-lk {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-lk.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-lt {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-lt.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-lu {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-lu.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-lv {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-lv.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ma {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ma.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-mc {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-mc.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-mo {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-mo.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-mq {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-mq.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-mt {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-mt.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-mx {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-mx.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-my {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-my.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ng {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ng.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-nl {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-nl.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-no {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-no.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-nz {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-nz.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-om {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-om.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-pa {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-pa.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ph {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ph.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-pk {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-pk.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-pl {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-pl.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-pt {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-pt.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-qa {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-qa.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-re {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-re.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ro {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ro.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ru {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ru.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-sa {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-sa.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-se {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-se.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-sg {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-sg.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-si {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-si.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-sk {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-sk.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-th {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-th.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-tr {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-tr.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-tt {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-tt.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-tw {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-tw.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ua {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ua.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-us {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-us.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-uy {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-uy.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-ve {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-ve.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-vn {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-vn.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-xe {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-xe.png)
}
.sidebar-info-more .financial-events ul li .event-time-importance .flag-country span.flag-za {
background-image: url(/131711/Resources/dist/Resources/images/flags/flag-za.png)
}
.sidebar-info-more .financial-events ul li .event-details {
padding-left: 14px
}
.sidebar-info-more .financial-events ul li .event-details p {
margin: 0;
padding: 0
}
.sidebar-info-more .financial-events ul li .event-details p .icon {
font-size: .9375rem
}
@media only screen and (max-width: 56em) {
.sidebar-info-more .financial-events ul li .event-details p .icon {
display: none
}
}
.sidebar-info-more .financial-events ul li .event-details p span {
border-right: 1px solid var(--outline-light);
display: inline-block;
margin-right: .625rem;
padding-right: 12px
}
.sidebar-info-more .financial-events ul li .event-details p span:last-child {
border: none;
margin-right: 0;
padding: 0;
vertical-align: middle
}
.sidebar-info-more .financial-events ul li .event-details span span {
border: none
}
.sidebar-info-more .financial-events-footer {
display: flex;
font-size: .8125rem;
justify-content: space-between;
padding: 0 .625rem
}
.sidebar-info-more .financial-events-footer span {
background: url(/131711/Resources/dist/Resources/images/logo-dow-jones.png) no-repeat var(--ltr, right) var(--rtl, left) bottom;
display: inline-block;
min-height: 1rem;
padding-inline-end: 6.563rem
}
.sidebar-info-more .financial-events-footer a {
display: inline-block
}
@media only screen and (max-width: 56em) {
.sidebar-open .info-buttons, .sidebar-open .sidebar-action {
background-color: var(--surface-sidebar-main);
bottom: 0;
box-shadow: 0 -.5rem .5rem 0 rgba(0, 0, 0, .1);
left: 0;
padding: .5rem;
position: fixed;
right: 0;
z-index: 2
}
.sidebar-open .info-buttons button, .sidebar-open .sidebar-action button {
min-height: 3rem
}
.sidebar-open .sidebar-content .info-buttons {
padding: .5rem
}
.sidebar-open .sidebar-content .info-buttons div button {
min-height: 4rem
}
.sidebar-open #load-sidebar {
bottom: 4rem
}
.sidebar-open #load-sidebar:has(.outside-trade:not([data-show=false])) {
bottom: 7rem
}
.sidebar-open #load-sidebar .overlay {
position: fixed
}
}
.sidebar input[type=email], .sidebar input[type=number], .sidebar input[type=password], .sidebar input[type=search], .sidebar input[type=tel], .sidebar input[type=text], .sidebar input[type=url], .sidebar select, .sidebar textarea {
background-color: var(--surface-sidebar-main)
}
.sidebar .unified-tabs .instrument-header, .sidebar .unified-tabs .instrument-info {
margin-top: .75rem
}
.sidebar .unified-tabs .info {
min-height: 0;
padding-top: 0
}
.sidebar .unified-tabs .info-no-trading, .sidebar .unified-tabs .info-notes {
margin-top: 0
}
.sidebar .unified-tabs .info-no-trading + .info-notes {
margin-top: -1.25rem
}
.sidebar .positions-list {
margin: .75rem .25rem 1.5rem
}
.sidebar .positions-list-item {
align-items: center;
border-bottom: 1px solid var(--outline-light);
display: flex;
font-size: .875rem;
gap: .625rem;
padding-block: 1rem
}
.sidebar .positions-list-item .position-arrow {
font-size: 1rem
}
.sidebar .positions-list-item .position-arrow:before {
display: block
}
.sidebar .positions-list-item .data {
flex: 1 1 100%
}
.sidebar .positions-list-item .net-pl, .sidebar .positions-list-item .position-arrow {
flex: 0 0 auto
}
.sidebar .positions-list-item.red .net-pl, .sidebar .positions-list-item.red .position-arrow {
color: var(--on-surface-alert)
}
.sidebar .positions-list-item.green .net-pl, .sidebar .positions-list-item.green .position-arrow {
color: var(--on-surface-success)
}
.sidebar .overlay {
background-color: var(--overlay-loading)
}
.sidebar-info .info-header {
display: flex;
flex-wrap: wrap;
margin: .3125rem .625rem 0
}
.sidebar-info .info-header > div {
display: flex;
flex-direction: column
}
.sidebar-info .info-header > div.instrument-name {
flex: 1 1 auto
}
.sidebar-info .info-header > div.instrument-name .back-to-details {
display: block;
padding-bottom: .5rem
}
.sidebar-info .info-header > div.instrument-name span {
padding-bottom: .3125rem
}
.sidebar-info .info-header > div.net-pl {
justify-content: space-between;
order: 3;
padding: .5rem 0 1rem;
width: 100%
}
.sidebar-info .info-header > div.actions {
display: block;
min-width: 2.625rem;
padding-top: 4px;
white-space: nowrap
}
.sidebar-info .info-header > div.actions button {
align-items: center;
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
display: inline-flex;
height: 2.5rem;
justify-content: center;
margin: 0;
min-width: 0;
padding: 0;
transition: .2s ease-in-out;
width: 2.5rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-info .info-header > div.actions button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.sidebar-info .info-header > div.actions button.active, .sidebar-info .info-header > div.actions button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.sidebar-info .info-header > div.actions button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.sidebar-info .info-header > div.actions button {
font-size: 1.25rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.sidebar-info .info-header > div.actions button {
font-size: 1rem
}
}
.sidebar-info .info-header > div.actions button:before {
width: 100%
}
.sidebar-info .info-header > div.datetime {
display: block;
font-size: .875rem;
padding-top: 4px
}
.sidebar-info .info-header > div.datetime span {
display: block;
text-align: right
}
.sidebar-info .info-header .instrument-rates {
justify-content: space-between;
order: 3;
padding: .5rem 0 1rem;
width: 100%
}
.sidebar-info .info-header .instrument-rates div span:nth-child(n+2) {
padding-left: .3125em
}
.sidebar-info .info-header .action-type {
font-size: 10pt;
font-weight: 400
}
.sidebar-info .info-header .date, .sidebar-info .info-header .reason {
color: var(--on-surface-medium);
display: block;
font-size: 9pt;
font-weight: 400;
padding-bottom: 4px
}
.sidebar-info .info-header .value span {
display: inline-block
}
.sidebar-info .info-header .value strong {
padding-left: .3125rem
}
.sidebar-info .info-header h4 {
color: var(--on-surface-regular);
font-size: 1.25rem;
font-weight: 700;
padding: 0 .625rem .3125rem 0
}
.sidebar-info .info-header h4.name-long {
font-size: 16px
}
@media only screen and (min-width: 480px) {
.sidebar-info .info-header h4.name-long {
font-size: 18px
}
}
@media only screen and (min-width: 73.063em) {
.sidebar-info .info-header h4.name-long {
font-size: 18px
}
}
@media only screen and (min-width: 90.063em) {
.sidebar-info .info-header h4.name-long {
font-size: 1.25rem
}
}
.sidebar-info .info-header h4[data-linked] {
color: var(--on-surface-primary-fixed);
cursor: pointer
}
.sidebar-info .info-header h4[data-linked]:hover {
color: var(--on-surface-tertiary-fixed);
text-decoration: underline
}
.sidebar-info .info-header .loss .value span {
color: var(--on-surface-alert)
}
.sidebar-info .info-header .profit .value span {
color: var(--on-surface-success)
}
.sidebar-info .info-header .red-change.change {
color: var(--on-surface-alert)
}
.sidebar-info .info-header .green-change.change {
color: var(--on-surface-success)
}
.sidebar-info .info-button {
padding: 1.25rem .625rem
}
.sidebar-info .info-button button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 5rem;
color: var(--on-primary-regular);
font-size: 1.25rem;
min-width: 0;
padding-bottom: .25em;
padding-top: .25em;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-info .info-button button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.sidebar-info .info-button button.active, .sidebar-info .info-button button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.sidebar-info .info-button button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-info .alert-list-wrapper {
display: block;
margin-bottom: 1rem
}
.sidebar-info .alerts-list {
margin: 0;
padding: .625rem .625rem 0
}
.sidebar-info .alerts-list .alert-item:first-child {
border-top: 1px solid var(--outline-light)
}
.sidebar-info .alerts-list .alert-item {
border-bottom: 1px solid var(--outline-light);
padding: .625rem 0
}
.sidebar-info .alerts-list .alert-item .alert-edit-content, .sidebar-info .alerts-list .alert-item .icon-times {
display: none
}
.sidebar-info .alerts-list .alert-item.alert-edit button.icon-times {
display: inline-block
}
.sidebar-info .alerts-list .alert-item.alert-edit .alert-list-value, .sidebar-info .alerts-list .alert-item.alert-edit button.icon-pencil, .sidebar-info .alerts-list .alert-item.alert-edit button.icon-trash-o {
display: none
}
.sidebar-info .alerts-list .alert-item.alert-edit .alert-edit-content {
display: block;
padding: 1.75em 0 2em
}
.sidebar-info .alerts-list .alert-panel {
align-items: center;
display: flex;
justify-content: space-between
}
.sidebar-info .alerts-list .alert-panel .alert-list-type {
flex: 1 1 auto;
padding: 0 .3125em .3125em 0
}
.sidebar-info .alerts-list .alert-panel .alert-list-value {
flex: 0 1 auto;
padding: 0 .625rem .3125em;
text-align: right
}
.sidebar-info .alerts-list .alert-panel .icon-bell-o, .sidebar-info .alerts-list .alert-panel button {
background: none;
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
font-size: 1.25em;
min-height: 0;
min-width: 1.75em;
padding: 0 8px;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-info .alerts-list .alert-panel .icon-bell-o:hover, .sidebar-info .alerts-list .alert-panel button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.sidebar-info .alerts-list .alert-panel .icon-bell-o.active, .sidebar-info .alerts-list .alert-panel .icon-bell-o:active, .sidebar-info .alerts-list .alert-panel button.active, .sidebar-info .alerts-list .alert-panel button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.sidebar-info .alerts-list .alert-panel .icon-bell-o:disabled, .sidebar-info .alerts-list .alert-panel button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-info .no-alerts-placeholder {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 40vh
}
.sidebar-info .no-alerts-placeholder .icon {
display: inline-block;
font-size: 4rem;
height: 4rem;
width: 4rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.sidebar-info .no-alerts-placeholder .icon {
flex: 0 0 2rem;
font-size: 2rem;
height: 2rem;
width: 2rem
}
}
.sidebar-info .no-alerts-placeholder h4 {
color: var(--on-surface-regular);
font-size: 1.25rem;
font-weight: 600;
padding: 1em 0
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.sidebar-info .no-alerts-placeholder h4 {
flex: 0 0 auto;
padding-left: .625rem
}
}
.sidebar-info .no-alerts-placeholder p {
margin: 0 0 1.25rem
}
.sidebar-info .no-alerts-placeholder p span {
display: block;
padding-bottom: 1.25rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.sidebar-info .no-alerts-placeholder p span {
flex: 0 0 100%;
padding-bottom: .625rem
}
}
.sidebar-info .no-alerts-placeholder p button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 5rem;
color: var(--on-primary-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-info .no-alerts-placeholder p button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.sidebar-info .no-alerts-placeholder p button.active, .sidebar-info .no-alerts-placeholder p button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.sidebar-info .no-alerts-placeholder p button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-info[data-add-mode=true] .add-new-alert-link, .sidebar-info[data-has-alerts=false] .alert-list-wrapper {
display: none
}
.sidebar-info[data-add-mode=true] .add-new-alert-cancel {
display: inline
}
.sidebar-info[data-add-mode=true] .add-new-alert-wrapper {
display: block
}
.sidebar-info[data-add-mode=false] .add-new-alert-link {
display: inline
}
.sidebar-info[data-add-mode=false] .add-new-alert-cancel, .sidebar-info[data-add-mode=false] .add-new-alert-wrapper {
display: none
}
.sidebar-info[data-add-mode=false] .alerts-list {
padding: 0 .625rem
}
.sidebar-info[data-add-mode=false] .alerts-list .alert-item:first-child {
border-top: none
}
.sidebar-info[data-has-alerts][data-add-mode]:not([data-has-alerts=false][data-add-mode=false]) .no-alerts-placeholder {
display: none
}
.info-list, .info-list h5 {
font-size: .875rem
}
.info-list h5 {
color: var(--on-surface-primary);
font-weight: 600;
margin: 0;
padding: .5rem .625rem .25rem
}
.info-list h5 .title-value, .info-list h5 a {
color: var(--on-surface-primary);
display: flex;
justify-content: space-between
}
.info-list h5 .title-value span, .info-list h5 a span {
flex: 1 0 auto
}
.info-list h5 a:hover {
color: var(--on-surface-tertiary-fixed)
}
.info-list h5 a:before {
bottom: 1px;
font-size: 1rem;
margin-inline-end: .5em;
position: relative
}
.info-list h5 a.open:before {
content: "\e999"
}
.info-list h5 .title-value span {
padding-inline-end: .625rem
}
.info-list h5 .title-value strong {
color: var(--on-surface-medium);
font-size: .75rem;
font-weight: 400
}
.info-list h5 .title-value strong[data-currency] {
color: inherit;
font-size: inherit;
font-weight: inherit
}
.info-list h5 .toggle:before {
bottom: auto;
margin: 0;
top: auto
}
.info-list h5.title-with-info {
align-items: center;
display: flex
}
.info-list h5.title-with-info .toggle {
flex: 1 1 100%
}
.info-list h5.title-with-info .tooltip-icon, .info-list h5.title-with-info .tooltip-trigger {
display: flex;
flex: 0 0 auto;
font-size: 1.125rem;
padding-inline-start: .5rem
}
.mobile-tooltips .info-list h5.title-with-info .tooltip-icon:before {
display: none
}
.info-list h5.title-with-info .tooltip-trigger {
padding: 0
}
.info-list h5.title-with-info .tooltip-trigger:before {
content: "\e95e"
}
.info-list [data-toggle-group]:last-child {
padding-bottom: 2rem
}
.info-list [data-toggle=body] {
display: none
}
.info-list [data-toggle=body].open {
display: flex
}
.info-list [data-toggle=body].open ul {
flex: 0 0 100%
}
.info-list [data-toggle=body].open > .data-label span {
padding-inline-start: 1.25em
}
.info-list [data-toggle=body] ul {
padding-bottom: .5rem !important
}
.info-list .toggle:hover {
color: var(--on-surface-tertiary-fixed)
}
.info-list .toggle:before {
content: var(--ltr, "\e99b") var(--rtl, "\e99a");
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--surface-sidebar-main);
padding-inline-end: .25em;
position: relative;
top: 1px
}
.info-list .toggle.open:before {
content: "\e999"
}
.info-list > ul:last-child {
padding-bottom: 2rem
}
.info-list ul {
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: .5rem .3125rem
}
.info-list ul.toggle-body {
padding-inline-start: 1.5625rem
}
.info-list ul li {
align-items: flex-end;
border-bottom: 1px dashed var(--outline-main);
display: flex;
justify-content: space-between;
margin: 0 .3125rem .625rem
}
.info-list ul li .data-label span, .info-list ul li .value {
background-color: var(--surface-sidebar-main)
}
.info-list ul li .data-label {
max-width: 85%
}
.info-list ul li .data-label span:after {
content: "\00a0"
}
.info-list ul li .data-label span + span {
padding: 0
}
.info-list ul li .data-label span em {
font-style: normal
}
.info-list ul li.no-value {
border-bottom: none;
display: block;
text-align: center
}
.info-list ul li.no-value.toggle-head {
display: flex;
text-align: initial
}
.info-list ul li.toggle-body {
border-bottom: none;
margin: 0
}
.info-list ul li.toggle-body ul {
flex: 0 0 100%;
padding: 0
}
.info-list ul li.toggle-body ul li > .data-label span {
padding-inline-start: 1.25em
}
.info-list ul li.info-list-inner {
border-bottom: none;
margin: 0
}
.info-list ul li.info-list-inner > ul {
flex: 0 0 100%;
padding: 0
}
.info-list ul li.link {
border-bottom: none
}
.info-list ul li.link a {
display: block;
font-weight: 400;
text-decoration: underline;
white-space: nowrap
}
.info-list ul li.link a:hover {
color: var(--on-surface-link-focused);
text-decoration: none
}
.info-list ul li.link a.hover-underline {
text-decoration: none
}
.info-list ul li.link a.hover-underline:hover {
text-decoration: underline
}
.info-list ul li.link em {
font-style: normal
}
.info-list ul li > a, .info-list ul li > div, .info-list ul li > span {
flex: 0 1 auto;
margin-bottom: -3px
}
.info-list ul li .data-label {
color: var(--on-surface-medium)
}
.info-list ul li .value, .info-list ul li span + span {
padding-left: .3125rem;
text-align: right
}
:root:where([dir=rtl]) .info-list ul li .value, :root:where([dir=rtl]) .info-list ul li span + span {
padding-left: 0;
padding-right: .3125rem;
text-align: left
}
.info-list ul li .value-skeleton {
flex: 0 1 5rem
}
.info-list ul li .value.red {
color: var(--on-surface-alert)
}
.info-list ul li .value.green {
color: var(--on-surface-success)
}
.info-list p {
margin: 0;
padding: .625rem .3125rem 0;
text-align: center
}
.info-data {
align-items: baseline;
display: flex;
justify-content: space-between
}
.info-data div {
flex: 0 1 auto;
font-size: 1.5rem;
font-weight: 300;
padding: .625rem;
white-space: nowrap
}
.info-data div + div, .info-data div + div .data-label {
text-align: center
}
.info-data div:last-child, .info-data div:last-child .data-label {
text-align: end
}
.info-data div span.red {
color: var(--on-surface-alert)
}
.info-data div span.green {
color: var(--on-surface-success)
}
.info-data div .data-label, .info-data div strong {
font-size: .75rem;
font-weight: 400
}
.info-data div .data-label {
color: var(--on-surface-primary-light);
display: block;
white-space: normal
}
.info-data div.leverage .data-label {
text-align: center
}
.info-data div.initial-margin .data-label {
text-align: end
}
.info-data .user-currency {
color: var(--on-surface-medium)
}
.info-data em {
display: block;
font-size: .625em;
font-style: normal
}
.info-data.centered {
justify-content: space-around;
padding: 1rem .625rem 1.5rem;
text-align: center
}
.info-data.centered div, .info-data.centered div .data-label {
text-align: inherit
}
.client-sentiment {
cursor: help;
font-size: .8125rem;
padding: 0 .625rem 1rem
}
.client-sentiment div {
display: flex;
justify-content: space-between;
padding: .3125rem .3125rem 6px
}
.client-sentiment div .no-data-reason {
display: none
}
.client-sentiment div span {
font-weight: 700
}
.client-sentiment div span:nth-child(2) {
color: var(--on-surface-alert)
}
.client-sentiment div span:nth-child(3) {
color: var(--on-surface-success)
}
.client-sentiment .meter {
background: var(--on-surface-success);
border-radius: 3px;
display: block;
height: .625rem;
margin-bottom: .25rem
}
.client-sentiment .meter span {
animation: meterAnim 1s 1;
background: var(--on-surface-alert);
border-radius: 3px;
display: block;
height: .625rem
}
.client-sentiment span {
display: block
}
.client-sentiment .tooltip-trigger {
color: var(--on-surface-regular);
padding: 1rem 0 0 .125rem
}
.client-sentiment[data-is-valid=false] .meter {
background: var(--surface-bar-disabled)
}
.client-sentiment[data-is-valid=false] .meter span {
display: none
}
@keyframes meterAnim {
0% {
width: 0
}
}
.daily-change {
align-items: baseline;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 .75rem .625rem
}
.daily-change div {
display: flex;
flex: 0 1 auto;
flex-direction: row;
font-size: .8125rem;
padding-top: .5rem;
width: 100%
}
.daily-change div div {
border-inline-start: 1px solid var(--outline-light);
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-size: 1.3125rem;
font-weight: 300;
margin-inline-end: .9375rem;
padding: 0;
padding-inline-start: .9375rem;
white-space: nowrap
}
.daily-change div div:first-child {
border: none;
padding: 0
}
.daily-change div div:last-child {
margin: 0
}
.daily-change div div small {
color: var(--on-surface-primary-medium);
display: block;
font-size: .75rem;
font-weight: 400;
white-space: normal
}
.daily-change div div span.red {
color: var(--on-surface-alert)
}
.daily-change div div span.green {
color: var(--on-surface-success)
}
.daily-price {
cursor: help;
font-size: .8125rem;
padding: 0 .125rem .25rem
}
.daily-price div {
display: flex;
justify-content: space-between;
padding: .3125rem .75rem 1.5rem
}
.daily-price div span {
flex: 0 1 auto
}
.daily-price div .no-data-reason {
display: none
}
.daily-price div:nth-child(odd) {
padding-bottom: 2em
}
.daily-price div:nth-child(2) {
padding-bottom: 1em
}
.daily-price span {
display: block
}
.daily-price-high-low {
flex-direction: column;
padding: 1rem .75rem !important
}
.daily-price-high-low div {
display: block;
padding: 0 !important
}
.daily-price-high-low div span {
display: inline
}
.daily-price-high-low div span.red {
color: var(--on-surface-alert)
}
.daily-price-high-low div span.green {
color: var(--on-surface-success)
}
.daily-price .meter {
padding: 0 .0625rem;
position: relative
}
.daily-price .meter-bar {
padding: 0 .4375rem
}
.daily-price .meter-bar span {
background: var(--surface-bar-primary-medium);
border-radius: 1rem;
height: .625rem
}
.daily-price .meter-bar span.hourly {
background: var(--surface-bar-primary-light)
}
.daily-price .meter-bar span.today {
background: var(--surface-bar-primary-extra-light)
}
.daily-price .meter-arrow {
height: .75rem;
min-width: 1rem;
position: absolute;
position: relative;
top: -.25rem
}
.daily-price .meter-arrow:after, .daily-price .meter-arrow:before {
border-left: .4rem solid transparent;
border-right: .4rem solid transparent;
border-top: .5rem solid var(--on-surface-primary);
content: "";
display: block;
height: 0;
inset-inline-end: .125rem;
position: absolute;
width: 0
}
.daily-price .meter-arrow:before {
top: -.7rem;
z-index: 1
}
.daily-price .meter-arrow:after {
border-top-color: var(--shadow-bottom-arrow);
top: -.3rem
}
.daily-price .tooltip-trigger {
color: var(--on-surface-regular);
padding: 0 .625rem
}
[data-is-valid=false] .daily-price-high-low span, [data-is-valid=false] .daily-price-high-low strong {
display: inline
}
[data-is-valid=false] .daily-price-labels {
flex-wrap: wrap
}
[data-is-valid=false] .daily-price-labels span {
max-width: 50%
}
[data-is-valid=false] .daily-price-labels .no-data-reason {
color: var(--on-surface-medium);
display: block;
flex: 1 0 100%;
font-weight: 400;
max-width: 100%;
padding-bottom: .25rem;
text-align: center
}
[data-is-valid=false] span {
color: var(--on-surface-medium)
}
[data-is-valid=false] span.bar-title {
display: block
}
[data-is-valid=false] .bar-title {
color: var(--on-surface-disabled-light) !important
}
.spinbox {
margin: .5rem 0 1rem
}
.big .spinbox {
padding: .625rem 0
}
.spinbox > div {
display: flex;
justify-content: space-between
}
.spinbox > div.additional-info {
align-items: center;
justify-content: flex-start;
padding: 0 .625rem
}
.spinbox > div.additional-info.select-type {
padding: 1.25rem .625rem 0
}
.spinbox > div.additional-info.select-type:last-child {
padding-bottom: 14px
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.spinbox > div.additional-info.select-type {
padding: .938rem .625rem 0
}
.spinbox > div.additional-info.select-type:last-child {
padding-bottom: .625rem
}
}
.spinbox > div.additional-info.select-type.flex-column strong {
display: block;
margin-bottom: .625em
}
.spinbox > div.additional-info.select-type .radio-custom {
margin-bottom: 0;
margin-right: 1rem
}
.spinbox > div.additional-info [class*=" icon-"], .spinbox > div.additional-info [class^=icon-] {
color: var(--on-surface-light);
font-size: 1.25em;
line-height: 1
}
@media only screen and (max-width: 56em) {
.spinbox > div.additional-info [class*=" icon-"], .spinbox > div.additional-info [class^=icon-] {
font-size: 1.5em;
margin-top: -.1875em
}
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.spinbox > div.additional-info [class*=" icon-"], .spinbox > div.additional-info [class^=icon-] {
font-size: 1.75em
}
}
.spinbox > div.additional-info.flex-column {
flex-direction: column
}
.spinbox > div.additional-info.flex-column .client-sentiment {
padding: 0;
width: 100%
}
.spinbox > div.additional-info.current-change {
color: var(--on-surface-light);
padding-bottom: .3125rem
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.spinbox > div.additional-info span.red {
color: var(--on-surface-alert)
}
.spinbox > div.additional-info span.green {
color: var(--on-surface-success)
}
}
.spinbox .title {
align-items: baseline
}
.spinbox .title label {
flex: 0 1 auto;
min-width: 1px;
padding: 0 .625rem
}
.spinbox .title .spin-tip {
border-bottom: 1px dotted;
cursor: help;
flex: 0 0 auto;
font-size: .75rem;
margin: 0 .625rem;
text-align: right;
white-space: nowrap
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.spinbox .title .spin-tip[data-tooltip] {
border-bottom: none !important
}
}
.spinbox .checkbox {
align-items: center;
justify-content: flex-start;
margin: 0 .625rem .625rem
}
.spinbox .checkbox label {
cursor: help
}
.big .spinbox .inputs, .spinbox .inputs {
padding: .3125rem .625rem
}
.spinbox .inputs input {
flex: 0 1 100%;
margin: 0;
min-width: 1px;
width: 1px
}
.spinbox .inputs input:disabled, .spinbox .inputs input[disabled] {
opacity: 1
}
.big .spinbox .inputs input {
font-size: 1.5rem
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.spinbox .inputs .win-textarea:active, .spinbox .inputs .win-textarea:focus, .spinbox .inputs input[type=email]:active, .spinbox .inputs input[type=email]:focus, .spinbox .inputs input[type=number]:active, .spinbox .inputs input[type=number]:focus, .spinbox .inputs input[type=password]:active, .spinbox .inputs input[type=password]:focus, .spinbox .inputs input[type=search]:active, .spinbox .inputs input[type=search]:focus, .spinbox .inputs input[type=tel]:active, .spinbox .inputs input[type=tel]:focus, .spinbox .inputs input[type=text]:active, .spinbox .inputs input[type=text]:focus, .spinbox .inputs input[type=url]:active, .spinbox .inputs input[type=url]:focus, .spinbox .inputs textarea:active, .spinbox .inputs textarea:focus {
background-color: var(--surface-main)
}
}
.spinbox .inputs button {
align-items: center;
background-color: transparent;
border-color: var(--outline-button);
border-radius: 0;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
display: inline-flex;
font-size: 1.25rem;
justify-content: center;
margin-left: 1px;
min-width: 2rem;
padding: 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.spinbox .inputs button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.spinbox .inputs button.active, .spinbox .inputs button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.spinbox .inputs button:disabled {
opacity: .4;
pointer-events: none
}
.big .spinbox .inputs button {
min-width: 44px
}
.spinbox .inputs button:before {
width: 100%
}
.spinbox .calc {
margin: 0;
padding: 0 .625rem;
text-align: right
}
.spinbox .calc span {
font-size: .75rem;
padding: 0 3px;
white-space: nowrap
}
.spinbox.check .calc, .spinbox.check .inputs {
display: none
}
.spinbox.enabled .inputs {
display: flex
}
.spinbox.enabled .calc {
align-items: baseline;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%
}
.spinbox.disabled {
position: relative
}
.spinbox.disabled :before {
background-color: var(--surface-main);
border: 1px solid #ff6a00;
content: "";
cursor: not-allowed;
display: block;
height: 100%;
left: 0;
opacity: .1;
position: absolute;
top: 0;
width: 100%;
z-index: 1000
}
.spinbox .checkbox-custom-text {
margin-left: 0;
margin-right: 1rem
}
.spinbox .toggle-radio {
display: flex;
flex: 0 0 auto;
padding: 0 .625rem
}
.spinbox .toggle-radio > input {
display: none
}
.spinbox .toggle-radio > input + label {
background-color: var(--surface-container-primary-light);
border-radius: 6px 0 0 6px;
cursor: pointer;
flex: 1 1 auto;
font-size: .75rem;
overflow: hidden;
padding: .1875rem .625rem;
position: relative;
transition: color .2s linear
}
.spinbox .toggle-radio > input + label:hover {
background-color: var(--surface-container-primary-light-focused)
}
.spinbox .toggle-radio > input + label span {
display: block;
position: relative;
-webkit-user-select: none;
user-select: none;
z-index: 1
}
.spinbox .toggle-radio > input + label:before {
background-color: var(--surface-switch-active);
border-radius: 6px 0 0 6px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scaleX(0);
transform-origin: top right;
transition: transform .2s linear;
width: 100%;
z-index: 0
}
.spinbox .toggle-radio > input + label ~ label {
border-radius: 0 6px 6px 0
}
.spinbox .toggle-radio > input + label ~ label:before {
border-radius: 0 6px 6px 0;
transform-origin: top left
}
.spinbox .toggle-radio > input:checked + label {
color: var(--on-primary-regular);
cursor: default
}
.spinbox .toggle-radio > input:checked + label:before {
transform: scaleX(1)
}
.alert-notifications {
border-bottom: 1px solid var(--outline-light);
border-top: 1px solid var(--outline-light);
margin: 0 .625rem 1.5rem;
padding: 1rem 0 1.25rem;
position: relative
}
.alert-notifications strong {
display: block;
font-weight: 400;
padding-bottom: 1rem;
padding-inline-start: .1875rem
}
.alert-notifications a {
color: var(--on-surface-extra-light);
font-size: 1.375rem;
inset-inline-end: 0;
padding: .4375rem 0 0;
position: absolute;
top: 0
}
.alert-notifications a:hover {
color: var(--on-surface-primary)
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.alert-notifications a {
font-size: 1.5rem
}
}
.alert-notifications div {
display: flex
}
.alert-notifications div span {
align-items: center;
display: flex;
padding-inline-end: 1rem;
padding-inline-start: 1.625rem;
position: relative
}
.alert-notifications div span.icon-error {
opacity: .4
}
.alert-notifications div span.icon-error:before {
color: var(--on-surface-regular);
font-weight: 400
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.alert-notifications div span {
padding-top: .1875rem
}
}
.alert-notifications div span:before {
color: var(--on-surface-primary-fixed);
font-size: 1.25rem;
font-weight: 700;
inset-inline-start: 0;
margin-inline-end: .3125rem;
position: absolute
}
@media only screen and (min-width: 56.063em) {
.alert-notifications div span:before {
top: -.065rem
}
}
.amount-info p, .knockout-amount-info p {
font-size: .875rem;
margin: 0;
padding: 0 3px 0 .625rem
}
@media only screen and (max-width: 35em) {
.amount-info p, .knockout-amount-info p {
font-size: .875rem
}
}
@media only screen and (min-width: 56.063em) {
.amount-info p, .knockout-amount-info p {
font-size: .875rem
}
}
.amount-info p + p, .knockout-amount-info p + p {
padding: 0 .625rem 0 3px;
text-align: right
}
.amount-info p strong, .knockout-amount-info p strong {
display: block;
font-weight: 700
}
.amount-info p em, .knockout-amount-info p em {
font-style: normal
}
.amount-info p [data-formula], .knockout-amount-info p [data-formula] {
font-feature-settings: "tnum";
font-variant: tabular-nums;
font-variant-numeric: tabular-nums
}
.card-icon {
display: flex;
margin: .625rem .625rem 1rem
}
.card-icon:before {
align-items: center;
background-color: var(--surface-container-primary-medium-fixed);
color: var(--on-primary-regular);
display: flex;
flex: 0 0 2.375rem;
font-size: 1rem;
justify-content: center;
max-width: 2.375rem
}
.card-icon-body {
background-color: var(--surface-container-active-extra-light);
flex: 1 1 auto;
padding: .625rem
}
.card-icon-body .content {
color: var(--on-surface-primary);
font-size: .75rem;
line-height: 1.2
}
.card-icon-body .content strong {
font-weight: 600
}
.sidebar-content .info {
min-height: 4.688rem
}
.sidebar-info .info-header > div.actions {
min-width: 5.125rem
}
.info-list ul li div {
align-items: flex-end;
display: flex;
flex: 1 1 auto;
justify-content: space-between
}
.info-list ul li .data-label, .info-list ul li span + span {
background-color: var(--surface-sidebar-main)
}
.info-list ul li .data-label {
padding-inline-end: .3125rem
}
.daily-price[data-is-valid=false] .meter-bar span {
background: var(--surface-bar-disabled)
}
.daily-price[data-is-valid=false] .meter-arrow, [data-is-valid=false] div span, [data-is-valid=false] div strong {
display: none
}
[data-is-valid=false] div + span + div {
justify-content: center
}
.ko-option .info-list ul {
margin: .75rem 0;
padding-bottom: .8rem
}
.sidebar-content .instrument-header .actions, .sidebar-content .instrument-info .actions, .sidebar-content .sidebar-info .info-header .actions {
display: flex;
flex: 0 0 auto;
flex-direction: row;
justify-content: flex-end
}
.sidebar-content .instrument-header .actions button, .sidebar-content .instrument-info .actions button, .sidebar-content .sidebar-info .info-header .actions button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
flex: 0 0 2rem;
font-size: 1.5rem;
height: 2rem;
min-width: 0;
transition: .2s ease-in-out;
width: 2rem
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content .instrument-header .actions button:hover, .sidebar-content .instrument-info .actions button:hover, .sidebar-content .sidebar-info .info-header .actions button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.sidebar-content .instrument-header .actions button.active, .sidebar-content .instrument-header .actions button:active, .sidebar-content .instrument-info .actions button.active, .sidebar-content .instrument-info .actions button:active, .sidebar-content .sidebar-info .info-header .actions button.active, .sidebar-content .sidebar-info .info-header .actions button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.sidebar-content .instrument-header .actions button:disabled, .sidebar-content .instrument-info .actions button:disabled, .sidebar-content .sidebar-info .info-header .actions button:disabled {
opacity: .4;
pointer-events: none
}
.sidebar-content .instrument-header .actions button.add-remove-watchlist, .sidebar-content .instrument-info .actions button.add-remove-watchlist, .sidebar-content .sidebar-info .info-header .actions button.add-remove-watchlist {
margin-inline-start: .5rem;
order: 1
}
.sidebar-content .sidebar-info-trade .info-buttons button {
min-height: 67px;
transition: .2s ease-in-out, color 0s
}
.sidebar-content .sidebar-info-trade .info-buttons button.red .value {
color: var(--on-surface-alert)
}
.sidebar-content .sidebar-info-trade .info-buttons button.green .value {
color: var(--on-surface-success)
}
@media only screen and (hover: hover)and (pointer: fine) {
.sidebar-content .sidebar-info-trade .info-buttons button.green:hover .value, .sidebar-content .sidebar-info-trade .info-buttons button.red:hover .value {
color: var(--on-primary-regular)
}
}
.sidebar-content .sidebar-info-trade .info-buttons button.green:active .value, .sidebar-content .sidebar-info-trade .info-buttons button.red:active .value {
color: var(--on-primary-regular)
}
.sidebar-alert {
align-items: center;
color: var(--on-surface-primary);
display: flex;
flex: 1 0 100%;
justify-content: center;
margin-bottom: .75rem;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.sidebar-alert {
font-size: .875rem
}
}
.sidebar-alert:before {
flex: 0 0 auto;
font-size: 1.3125rem;
margin-bottom: .125rem;
margin-inline-end: .375rem
}
@media only screen and (min-width: 56.063em) {
.sidebar-alert:before {
font-size: 1.125rem
}
}
.sidebar-alert a {
color: inherit;
display: inline-block;
text-decoration: underline
}
.sidebar-alert a:active, .sidebar-alert a:hover {
text-decoration: none
}
.sidebar-alert.success {
color: var(--on-surface-success)
}
.sidebar-alert.success a:hover {
color: var(--on-surface-success-focused)
}
.sidebar-alert.alert {
color: var(--on-surface-alert)
}
.sidebar-alert.alert a:hover {
color: var(--on-surface-alert-focused)
}
.sidebar-alert.warning {
color: var(--on-surface-warning)
}
.sidebar-alert.warning a:hover {
color: var(--on-surface-warning-focused)
}
.sidebar-alert.highlighted {
background-color: var(--surface-container-active-extra-light);
border-radius: .5rem;
margin: .75rem 0;
min-height: 2rem;
padding: .375rem .75rem
}
.sidebar-alert.highlighted.success {
background-color: var(--surface-success-light)
}
.sidebar-alert.highlighted.alert {
background-color: var(--surface-alert-light)
}
.sidebar-alert.highlighted.warning {
background-color: var(--surface-warning-light)
}
.sidebar-alert strong {
font-weight: 600
}
.sidebar-alert.net-pl-note {
color: var(--on-surface-regular);
font-size: .9375rem;
gap: .5rem
}
.sidebar-alert.net-pl-note.green .total-net-pl {
color: var(--on-surface-success)
}
.sidebar-alert.net-pl-note.red .total-net-pl {
color: var(--on-surface-alert)
}
.instrument-insights {
--trend-gray-fill: var(--surface-container-dim-light)
}
.instrument-insights .sidebar-info-more h4 {
align-items: center;
display: flex
}
.instrument-insights .sidebar-info-more h4 .tooltip-trigger {
margin-inline-end: .625rem
}
.instrument-insights .sidebar-info-more .tooltip-icon, .instrument-insights .sidebar-info-more .tooltip-trigger {
color: var(--on-surface-primary);
display: flex;
padding: 0;
padding-inline-start: .5em
}
.instrument-insights .sidebar-info-more .tooltip-icon:before, .instrument-insights .sidebar-info-more .tooltip-trigger:before {
display: block;
font-size: 1.2857rem
}
@media only screen and (min-width: 56.063em) {
.instrument-insights .sidebar-info-more .tooltip-icon:before, .instrument-insights .sidebar-info-more .tooltip-trigger:before {
font-size: 1.125rem
}
}
.instrument-insights .sidebar-info-more .tooltip-trigger {
font-size: 1rem
}
.instrument-insights .sidebar-info-more .tooltip-trigger:before {
content: "\e95e"
}
.instrument-insights .sidebar-info-trade + .sidebar-info-more h4 {
margin-top: 1rem
}
.instrument-insights .rank {
cursor: pointer
}
.instrument-insights .subtitle {
align-items: center;
color: var(--on-surface-primary);
display: flex;
justify-content: space-between;
margin: 0;
padding: 1rem .625rem
}
.instrument-insights .subtitle strong {
font-size: .875rem;
font-weight: 600;
margin-inline-end: auto
}
.mobile-tooltips .instrument-insights .subtitle .tooltip-icon:before {
display: none
}
.instrument-insights .subtitle .tooltip-icon .tooltip-trigger {
padding: 0
}
.instrument-insights .subtitle .icon-add-alert {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
font-size: 1.2143rem;
margin: 0 .5rem;
position: static;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.instrument-insights .subtitle .icon-add-alert:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.instrument-insights .subtitle .icon-add-alert.active, .instrument-insights .subtitle .icon-add-alert:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.instrument-insights .subtitle .icon-add-alert:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (min-width: 56.063em) {
.instrument-insights .subtitle .icon-add-alert {
font-size: 1.0625rem
}
}
.instrument-insights .subtitle .icon-add-alert:before {
display: block
}
.instrument-insights .community {
display: flex;
padding: .625rem
}
.instrument-insights .community .item {
display: flex;
flex: 1 0 40%;
flex-direction: column;
text-align: center
}
.instrument-insights .community .item + .item {
padding-inline-start: .875rem
}
.instrument-insights .community .title {
flex: 1 0 auto;
font-size: .875rem;
padding: .25rem .5rem .5rem
}
.instrument-insights .community .inner {
background-color: var(--surface-container-main);
border-radius: .25rem;
flex: 0 0 auto;
margin-top: 1.8125rem
}
.instrument-insights .community .inner div {
align-items: center;
display: flex;
justify-content: center;
padding: .375rem .75rem .75rem
}
.instrument-insights .community .inner strong {
font-size: 1.25rem;
font-weight: 400
}
.instrument-insights .community .inner svg {
flex: 0 0 3.9375rem
}
.instrument-insights .community .icon {
align-items: center;
background-image: var(--gradient-insights-icon);
border: .3125rem solid var(--surface-sidebar-main);
border-radius: 1.8125rem;
color: var(--on-primary-regular);
display: flex;
flex: 0 0 3.625rem;
font-size: 1.5rem;
height: 3.625rem;
justify-content: center;
margin: -1.8125rem auto 0;
width: 3.625rem
}
.instrument-insights .community .trend-natural {
--trend-natural-fill: #7dc364
}
.instrument-insights .community .trend-low, .instrument-insights .community .trend-medium {
--trend-natural-fill: #7dc364;
--trend-low-fill: #66b848
}
.instrument-insights .community .trend-medium {
--trend-medium-fill: #60b342
}
.instrument-insights .community .trend-high, .instrument-insights .community .trend-maximal {
--trend-natural-fill: #7dc364;
--trend-low-fill: #66b848;
--trend-medium-fill: #60b342;
--trend-high-fill: #56a739
}
.instrument-insights .community .trend-maximal {
--trend-maximal-fill-start: #d93e3e;
--trend-maximal-fill-stop: #ffd600
}
.instrument-insights .sentiment {
padding: .25rem .625rem 1rem
}
.instrument-insights-error {
color: var(--on-surface-primary-medium);
text-align: center
}
.instrument-insights-error .error-image {
aspect-ratio: 2/1;
background: var(--img-sprite-empty-error) no-repeat center/contain;
margin-top: 10vh
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.instrument-insights-error .error-image {
margin: 1rem auto 0;
max-width: 40vh
}
}
@supports not (aspect-ratio:2/1) {
.instrument-insights-error .error-image:before {
content: "";
display: block;
padding-bottom: 50%
}
}
.instrument-insights-error button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 3px;
color: var(--on-primary-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.instrument-insights-error button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.instrument-insights-error button.active, .instrument-insights-error button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.instrument-insights-error button:disabled {
opacity: .4;
pointer-events: none
}
.instrument-insights-error .error-text, .instrument-insights-error button {
margin-top: 1.5rem
}
@media only screen and (min-width: 56.063em) {
.instrument-insights-error .error-text, .instrument-insights-error button {
margin-top: 3rem
}
}
.esg-data {
color: var(--on-surface-medium);
margin-top: 1rem;
padding: 0 .625rem
}
.esg-data ul {
list-style: none;
margin: 0;
padding: 0
}
.esg-top {
display: flex;
flex-wrap: wrap;
margin: 0 -.4375rem
}
.esg-top > div {
align-items: center;
background-color: var(--surface-container-main);
border-radius: 6px;
display: flex;
flex: 1 1 45%;
flex-direction: column;
justify-content: center;
margin: 0 .4375rem 1rem;
padding: .875rem;
text-align: center
}
.esg-top > div strong {
align-items: center;
color: var(--on-surface-regular);
display: flex;
flex: 1 1 auto;
font-size: 1.5rem;
font-weight: 700
}
.esg-top > div strong.score {
font-size: 2rem
}
.esg-top > div div {
align-items: center;
display: flex;
justify-content: center;
margin-top: .5rem;
white-space: nowrap
}
@media only screen and (min-width: 56.063em) {
.esg-top > div div {
font-size: .875rem
}
}
.esg-top > div div .tooltip-icon:nth-last-child(2) {
display: none
}
.esg-item {
display: grid;
grid-template-rows:min-content 0fr;
overflow: hidden;
transition: grid-template-rows .3s ease-in-out
}
.esg-item + .esg-item {
margin-top: .875rem
}
.esg-item button {
background-color: var(--surface-container-active-extra-light);
border: 0 solid transparent;
border-radius: 0;
border-radius: 6px;
color: var(--on-surface-primary);
display: flex;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
min-height: auto;
min-width: auto;
padding: .5rem;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.esg-item button:hover {
background-color: var(--surface-container-active-light);
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.esg-item button.active, .esg-item button:active {
background-color: var(--surface-container-active-light);
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.esg-item button:disabled {
opacity: .4;
pointer-events: none
}
.esg-item button:before {
font-size: 1.125rem;
margin-inline-end: .625rem;
transition: transform .3s ease-in-out
}
.esg-item button .custom-progress-bar {
box-shadow: none
}
.esg-item.open {
grid-template-rows:min-content 1fr
}
.esg-item.open button:before {
transform: rotate(var(--ltr, 90deg) var(--rtl, -90deg)) translateY(var(--ltr, 2px) var(--rtl, -2px))
}
.esg-item ul {
min-height: 0
}
.esg-item ul li:first-child {
margin-top: .875rem
}
.esg-item ul li:last-child {
margin-bottom: .875rem
}
.esg-item-row {
align-items: center;
display: flex;
flex: 1 1 100%;
text-align: start
}
.esg-item-row span {
flex: 1 1 auto;
font-size: .875rem;
padding-inline-end: 1rem
}
.esg-item-row .custom-progress-bar {
flex: 0 0 5rem;
margin-inline-end: .625rem
}
.esg-item-row strong {
flex: 0 0 auto;
min-width: 2rem;
text-align: center
}
.esg-item.inner {
padding: 0 .5rem
}
.esg-item.inner .custom-progress-bar {
--progress-color: var(--surface-bar-primary-extra-light)
}
.esg-item.inner .esg-item-row strong {
font-size: .875rem
}
.esg-copyright {
font-size: .75rem;
margin-top: 1rem;
text-align: center
}
.esg-unify-disclaimer {
border-top: 1px solid var(--outline-light);
margin-top: .75rem;
padding-top: .5rem
}
.esg-unify-disclaimer button {
align-items: center;
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
display: flex;
font-size: .8125rem;
justify-content: center;
min-height: auto;
min-width: 100%;
padding: .5rem 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.esg-unify-disclaimer button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.esg-unify-disclaimer button.active, .esg-unify-disclaimer button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.esg-unify-disclaimer button:disabled {
opacity: .4;
pointer-events: none
}
.esg-unify-disclaimer button:after {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e95e";
font-size: 1.125rem;
margin-inline-start: .5rem
}
footer {
background-color: var(--surface-container-primary);
flex: 0 1 auto
}
@media only screen and (min-width: 56.063em) {
footer {
display: none
}
}
footer .subnavigation {
align-items: center;
background-color: var(--surface-container-primary);
color: var(--on-primary-regular);
display: flex;
list-style-type: none;
margin: 0;
padding: 2px 0
}
footer .subnavigation li {
flex: 0 0 auto
}
footer .subnavigation li a, footer .subnavigation li div {
margin: 0 .625rem
}
footer .select-product {
align-items: center;
display: flex
}
footer .select-product.switcher-indicator:after {
content: "\e99c"
}
footer .switch-mode {
align-items: center;
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
color: var(--on-primary-medium);
display: flex;
font-size: .75rem;
min-height: 1.25rem;
min-width: 4.375rem;
padding: 3px 9px;
transition: .2s ease-in-out;
white-space: nowrap
}
@media only screen and (hover: hover)and (pointer: fine) {
footer .switch-mode:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
footer .switch-mode.active, footer .switch-mode:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
footer .switch-mode:disabled {
opacity: .4;
pointer-events: none
}
footer .switch-mode:after {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
footer .switch-mode.real {
font-weight: 400
}
footer .switch-mode.real:after {
content: "\e935"
}
footer .switch-mode.real.locked:after {
content: "\e936"
}
footer .switch-mode.demo:after {
content: "\e9bb"
}
footer .switch-mode.demo.locked:after {
content: "\e937"
}
footer .switch-mode div, footer .switch-mode span {
display: none
}
footer .switch-mode .current-mode-text {
display: block;
padding-inline-end: 1em
}
footer .live-chat {
margin-inline-start: auto
}
footer .navigation-chat {
color: var(--on-primary-regular);
display: inline-block;
font-size: 1.5rem;
height: 1.5rem;
position: relative;
width: 1.5rem
}
footer .navigation-chat span {
display: none
}
footer .navigation-chat strong {
background-color: #d93e3e;
border-radius: .25em;
display: none;
font-size: 16px;
height: .5em;
inset-inline-end: var(--ltr, -.25em) var(--rtl, 1.25em);
position: absolute;
top: 0;
width: .5em
}
.chat-new-message footer .navigation-chat strong {
display: block
}
.checkbox-custom {
display: block;
margin-bottom: 1rem;
position: relative;
-webkit-user-select: none;
user-select: none
}
.checkbox-custom input {
cursor: pointer;
height: 0;
opacity: 0;
position: absolute;
width: 0
}
.checkbox-custom input:disabled {
opacity: 0
}
.checkbox-custom-text {
cursor: pointer;
min-height: 1.5rem;
padding: .1875rem 0 0 2rem;
position: relative
}
.checkbox-custom-text:before {
background-color: var(--surface-container-primary-light);
border-radius: .25rem;
content: "";
transition: .1s ease-in-out
}
.checkbox-custom-text:after, .checkbox-custom-text:before {
height: 1.5rem;
left: 0;
position: absolute;
top: 0;
width: 1.5rem
}
.checkbox-custom-text:after {
align-items: center;
color: var(--on-primary-regular);
content: "\e901";
font-family: icoplus !important;
justify-content: center;
opacity: 0;
transform: translateY(.4rem);
transition: 0s
}
.checkbox-custom-text span {
padding: 0
}
@media only screen and (hover: hover)and (pointer: fine) {
.checkbox-custom:hover input:not(:checked):not(:disabled) ~ .checkbox-custom-text:before {
background-color: var(--surface-container-primary-light-focused)
}
}
input:checked ~ .checkbox-custom-text:before {
background-color: var(--surface-tertiary-fixed)
}
input:checked ~ .checkbox-custom-text:after {
display: flex;
opacity: 1;
transform: translate(0);
transition: .1s ease-in-out
}
input:disabled ~ .checkbox-custom-text:before {
opacity: .5
}
input:disabled:checked ~ .checkbox-custom-text:after {
opacity: .3
}
input:disabled ~ .checkbox-custom-text {
cursor: not-allowed
}
.checkbox-custom input.hide ~ .checkbox-custom-text, .checkbox-custom input[data-hide=true] ~ .checkbox-custom-text, .checkbox-custom input[data-show=false] ~ .checkbox-custom-text {
padding: 0
}
.checkbox-custom input.hide ~ .checkbox-custom-text:after, .checkbox-custom input.hide ~ .checkbox-custom-text:before, .checkbox-custom input[data-hide=true] ~ .checkbox-custom-text:after, .checkbox-custom input[data-hide=true] ~ .checkbox-custom-text:before, .checkbox-custom input[data-show=false] ~ .checkbox-custom-text:after, .checkbox-custom input[data-show=false] ~ .checkbox-custom-text:before {
display: none
}
.radio-custom {
cursor: pointer;
display: block;
margin-bottom: 1rem;
-webkit-user-select: none;
user-select: none
}
.radio-custom input {
cursor: pointer;
height: 0;
opacity: 0;
position: absolute;
width: 0
}
.radio-custom-text {
cursor: pointer;
min-height: 1.5rem;
padding: .1875rem 0 0 2rem;
position: relative
}
.radio-custom-text:before {
background-color: var(--surface-container-primary-light);
border-radius: 5rem;
content: "";
height: 1.5rem;
left: 0;
position: absolute;
top: 0;
transition: .1s ease-in-out;
width: 1.5rem
}
.radio-custom-text:after {
align-items: center;
background-color: var(--on-primary-regular);
border-radius: 5rem;
content: "";
display: block;
height: .75rem;
justify-content: center;
left: .375rem;
position: absolute;
top: .375rem;
transform: scale(0);
transition: 0s;
width: .75rem
}
.radio-custom-text span {
padding: 0
}
@media only screen and (hover: hover)and (pointer: fine) {
.radio-custom:hover input:not(:checked) ~ .radio-custom-text:before {
background-color: var(--surface-container-primary-light-focused)
}
}
input:checked ~ .radio-custom-text:before {
background-color: var(--surface-tertiary-fixed)
}
input:checked ~ .radio-custom-text:after {
display: flex;
transform: scale(1);
transition: .1s ease-in-out
}
input:disabled ~ .radio-custom-text:after {
opacity: .3
}
.radio-custom input.hide ~ .radio-custom-text, .radio-custom input[data-hide=true] ~ .radio-custom-text, .radio-custom input[data-show=false] ~ .radio-custom-text {
padding: 0
}
.radio-custom input.hide ~ .radio-custom-text:after, .radio-custom input.hide ~ .radio-custom-text:before, .radio-custom input[data-hide=true] ~ .radio-custom-text:after, .radio-custom input[data-hide=true] ~ .radio-custom-text:before, .radio-custom input[data-show=false] ~ .radio-custom-text:after, .radio-custom input[data-show=false] ~ .radio-custom-text:before {
display: none
}
.rtl .checkbox-custom-text {
padding: .1875rem 2rem 0 0 !important
}
.rtl .checkbox-custom-text:after, .rtl .checkbox-custom-text:before {
left: inherit;
right: 0
}
.rtl .checkbox-custom input.hide ~ .checkbox-custom-text, .rtl .checkbox-custom input[data-hide=true] ~ .checkbox-custom-text, .rtl .checkbox-custom input[data-show=false] ~ .checkbox-custom-text {
padding: 0 !important
}
.rtl .radio-custom-text {
padding: .1875rem 2rem 0 0 !important
}
.rtl .radio-custom-text:after {
left: inherit;
right: .375rem
}
.rtl .radio-custom-text:before {
left: inherit;
right: 0
}
.rtl .radio-custom input.hide ~ .radio-custom-text, .rtl .radio-custom input[data-hide=true] ~ .radio-custom-text, .rtl .radio-custom input[data-show=false] ~ .radio-custom-text {
padding: 0 !important
}
.select-product {
-webkit-user-select: none;
user-select: none
}
.select-product span {
background-color: #6d7db3;
border-radius: .25rem .25rem .25rem 0;
color: var(--on-primary-regular);
display: block;
font-size: .8125rem;
font-weight: 600;
line-height: 1;
min-width: 3.5rem;
padding: .375rem;
text-align: center;
text-transform: uppercase
}
.select-product.switcher-indicator {
cursor: pointer
}
.select-product.switcher-indicator:after {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e999";
font-size: 1rem;
padding: .25rem
}
.select-product.switcher-indicator span {
transition: background-color .3s ease-in-out
}
.select-product.switcher-indicator span:hover {
background-color: #256bcb
}
@media only screen and (hover: hover)and (pointer: fine) {
::-webkit-scrollbar {
height: 4px;
width: 6px
}
::-webkit-scrollbar-track {
background-color: var(--surface-scrollbar-button)
}
::-webkit-scrollbar-thumb {
background-color: var(--surface-scrollbar-main)
}
* {
scrollbar-color: var(--surface-scrollbar-button) var(--surface-scrollbar-main);
scrollbar-width: thin
}
}
.win-contentdialog-dialog {
background-color: var(--surface-popup-main);
box-shadow: 0 0 21.25rem 8.75rem var(--shadow-container), 0 1.563rem 1.125rem 0 var(--shadow-popup-container);
outline: none !important
}
.win-contentdialog-backgroundoverlay {
background-color: var(--overlay-regular)
}
.win-contentdialog .win-contentdialog-commands > button.win-button:hover {
background-color: #b5b5b5;
border-color: #b5b5b5
}
.win-back, .win-backbutton, .win-navigation-backbutton {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.win-back:hover, .win-backbutton:hover, .win-navigation-backbutton:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.win-back.active, .win-back:active, .win-backbutton.active, .win-backbutton:active, .win-navigation-backbutton.active, .win-navigation-backbutton:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.win-back:disabled, .win-backbutton:disabled, .win-navigation-backbutton:disabled {
opacity: .4;
pointer-events: none
}
.win-back:active, .win-backbutton:active, .win-navigation-backbutton:active {
background: transparent !important
}
.win-back:before {
content: "\e98d" !important;
font-family: icoplus !important
}
.rtl .win-back:before {
content: "\e98f" !important
}
.win-back {
border: none;
border-radius: 0
}
.icon-list {
display: flex;
flex-wrap: wrap
}
.icon-list span {
display: block;
flex: 0 0 2rem;
flex: 1 1 15%;
font-size: 2rem;
padding: .5em;
text-align: center
}
.icon-list span:after {
color: #0094ff;
content: attr(class);
display: block;
font-size: .75rem;
white-space: nowrap
}
.icon-cfd-positions:before, .icon-menu-cfd-positions:before {
content: "\e924"
}
.icon-cfd-orders:before, .icon-menu-cfd-orders:before {
content: "\e90f"
}
.icon-broker-positions:before, .icon-cfd-closed-positions:before, .icon-menu-broker-positions:before, .icon-menu-cfd-closed-positions:before {
content: "\ea2b"
}
.icon-broker-active-orders:before, .icon-menu-broker-active-orders:before {
content: "\e90f"
}
.icon-broker-history:before, .icon-menu-broker-history:before {
content: "\e906"
}
.icon-futures-positions:before, .icon-menu-futures-positions:before {
content: "\ea2b"
}
.icon-futures-orders:before, .icon-menu-futures-orders:before {
content: "\e90f"
}
.icon-futures-history:before, .icon-menu-futures-history:before {
content: "\e906"
}
.icon-ccp-dashboard:before, .icon-menu-ccp-dashboard:before {
content: "\e9f2"
}
.icon-ccp-funds-info:before, .icon-menu-ccp-funds-info:before {
content: "\e9e9"
}
.icon-ccp-orders:before, .icon-menu-ccp-orders:before {
content: "\e9ee"
}
.icon-ccp-transactions:before, .icon-menu-ccp-transactions:before {
content: "\e9ea"
}
.icon-ccp-positions:before, .icon-menu-ccp-positions:before {
content: "\e9ef"
}
.icon-ccp-portfolio:before, .icon-menu-ccp-portfolio:before {
content: "\e9f1"
}
.icon-ccp-reports:before, .icon-menu-ccp-reports:before {
content: "\e9f0"
}
.icon-ccp-funds:before, .icon-menu-ccp-funds:before {
content: "\e9ed"
}
.icon-ccp-move-trade:before, .icon-menu-ccp-move-trade:before {
content: "\ea1a"
}
.icon-ccp-risk-monitor:before, .icon-menu-ccp-risk-monitor:before {
content: "\e962"
}
@media only screen and (min-width: 56.063em) {
.processing [data-loading] {
position: relative
}
}
.processing [data-loading]:after {
animation: loading-fade-in .6s ease-in-out forwards, loading-spin .6s linear infinite;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='16' fill='none' stroke='%232e86fe' stroke-dasharray='80 100' stroke-width='4'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
box-sizing: content-box;
content: "";
flex: none;
font-size: 1rem;
height: 1rem;
line-height: 1;
margin-top: -.125rem;
margin-inline-start: .5rem;
transform-origin: center;
width: 1rem
}
@media only screen and (min-width: 56.063em) {
.processing [data-loading]:after {
bottom: 0;
inset-inline-end: .25rem;
margin: auto 0;
position: absolute;
top: 0
}
}
.processing.done [data-loading]:after {
animation: loading-done 0s ease .6s forwards, loading-fade-out-scale 1.2s ease forwards, loading-fade-out .6s ease 5s forwards
}
.processing.fail [data-loading]:after {
animation: loading-fail 0s ease .6s forwards, loading-fade-out-scale 1.2s ease forwards, loading-fade-out .6s ease 5s forwards
}
@keyframes loading-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes loading-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes loading-spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes loading-fade-out-scale {
0% {
opacity: 1;
transform: rotate(45deg) scale(1)
}
50% {
opacity: 0;
transform: rotate(315deg) scale(0)
}
51% {
opacity: 0;
transform: rotate(0) scale(0)
}
76% {
transform: scale(1.5)
}
to {
opacity: 1;
transform: scale(1)
}
}
@keyframes loading-done {
0% {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='16' fill='none' stroke='%232e86fe' stroke-dasharray='80 100' stroke-width='4'/%3E%3C/svg%3E")
}
to {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2313844e' d='m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20'/%3E%3C/svg%3E")
}
}
@keyframes loading-fail {
0% {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='16' fill='none' stroke='%232e86fe' stroke-dasharray='80 100' stroke-width='4'/%3E%3C/svg%3E")
}
to {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d93e3e' d='m12 13.4 2.9 2.9a.95.95 0 0 0 .7.275.95.95 0 0 0 .7-.275.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7L13.4 12l2.9-2.9a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275L12 10.6 9.1 7.7a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7l2.9 2.9-2.9 2.9a.95.95 0 0 0-.275.7q0 .425.275.7a.95.95 0 0 0 .7.275.95.95 0 0 0 .7-.275zm0 8.6a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20'/%3E%3C/svg%3E")
}
}
.chat-minimized #chat-widget-container {
opacity: 0 !important;
visibility: hidden !important
}
:root[dir=rtl] #chat-widget-container {
left: 0 !important;
right: auto !important
}
:root[dir=rtl] iframe[style*="z-index: 999987"], :root[dir=rtl] iframe[style*="z-index:999987"] {
inset-inline: auto 1rem !important
}
:root[dir=rtl] iframe[style*="z-index: 999987"][style*="width: 100%"], :root[dir=rtl] iframe[style*="z-index: 999987"][style*="width:100%"], :root[dir=rtl] iframe[style*="z-index:999987"][style*="width: 100%"], :root[dir=rtl] iframe[style*="z-index:999987"][style*="width:100%"] {
inset-inline: 0 !important
}
.sentiment .bar {
background-color: var(--theme-color-success, #13844e);
border-radius: 3px;
font-size: 16px;
height: .625em;
overflow: hidden
}
.sentiment .bar .light-blue, .sentiment .bar .red {
animation: meterAnim 1s 1;
background-color: var(--theme-color-alert, #d93e3e);
border-radius: inherit;
height: 100%
}
.sentiment .bar.disabled {
background: var(--surface-bar-disabled)
}
.sentiment .labels, .sentiment .value {
display: flex;
justify-content: space-between
}
.sentiment .value {
font-size: .8125rem;
font-weight: 700;
margin: .25rem
}
.sentiment .cell-data {
color: var(--theme-color-alert, #d93e3e)
}
.sentiment .buy-data {
color: var(--theme-color-success, #13844e)
}
.sentiment .value .buy-data {
margin-inline-start: 2rem
}
.sentiment .not-available {
font-size: .8125rem;
margin-bottom: .25rem;
text-align: center
}
.custom-progress-bar {
--progress-bg: var(--surface-main);
--progress-gradient-dir: var(--ltr, 90deg) var(--rtl, 270deg);
--progress-color: linear-gradient(var(--progress-gradient-dir), #1dbaec 0%, #4ba1ff 45.22%, #0052aa 100%);
background: var(--progress-bg);
border: 0;
border-radius: 1rem;
box-shadow: 0 0 0 1px var(--outline-light);
display: block;
font-size: 16px;
height: .5625em;
overflow: hidden;
padding: 1px;
width: 100%
}
.custom-progress-bar::-webkit-progress-bar {
background: var(--progress-color);
background-clip: content-box;
border: none;
border-radius: 1rem;
box-sizing: content-box;
overflow: hidden;
padding-right: 1px;
width: 100%
}
.custom-progress-bar::-webkit-progress-value {
background: transparent;
border-radius: 1rem;
box-shadow: 0 0 0 900px var(--progress-bg)
}
@supports (-moz-appearance:none) {
.custom-progress-bar {
background: var(--progress-color);
height: .4375em;
outline: 1px solid var(--progress-bg);
padding: 0
}
.custom-progress-bar::-moz-progress-bar {
background: transparent;
border-radius: 1rem;
outline: 900px solid var(--progress-bg)
}
}
.custom-progress-bar.disabled {
--progress-color: var(--surface-bar-disabled)
}
.modal-search {
align-items: center;
bottom: 0;
display: none;
height: 100%;
justify-content: center;
left: 0;
padding: 0 !important;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 99999
}
@media only screen and (min-width: 56.063em) {
.modal-search {
pointer-events: auto
}
}
.modal-search .modal-search-wrapper {
background: var(--surface-popup-main);
border-radius: .5rem;
height: 3rem;
max-width: 86%;
overflow: hidden;
padding: 0 !important;
pointer-events: auto;
position: relative;
width: 30rem
}
.modal-search .modal-search-wrapper .ui-autocomplete-input {
background-color: var(--surface-popup-main);
border: none;
color: var(--on-surface-regular);
font-size: 1rem;
height: 4rem;
padding: 0 1rem 1rem;
padding-inline-end: 3rem;
text-overflow: ellipsis
}
@media only screen and (min-width: 56.063em) {
.modal-search .modal-search-wrapper .ui-autocomplete-input {
font-size: 1.375rem
}
}
.modal-search .modal-search-wrapper .ui-autocomplete-input::placeholder {
color: var(--on-surface-light)
}
.modal-search .modal-search-wrapper button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-medium);
font-size: 1.75rem;
height: 3rem;
inset-inline-end: 0;
line-height: 1;
min-width: 3rem;
position: absolute;
top: 0;
transition: .2s ease-in-out;
visibility: visible;
width: auto
}
@media only screen and (hover: hover)and (pointer: fine) {
.modal-search .modal-search-wrapper button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.modal-search .modal-search-wrapper button.active, .modal-search .modal-search-wrapper button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.modal-search .modal-search-wrapper button:disabled {
opacity: .4;
pointer-events: none
}
@media (any-pointer: coarse) {
.modal-search {
align-items: start
}
.modal-search .modal-search-wrapper {
margin-block-start: calc(var(--header-height) + 1.5rem)
}
}
.modal-search-active .modal-search {
display: flex
}
.modal-search-active .ui-autocomplete.ui-front {
background-color: var(--surface-popup-main);
border-radius: .5rem;
line-height: 1;
max-height: 30vh;
z-index: 100000
}
.modal-search-active .ui-autocomplete.ui-front li {
font-size: 1rem
}
.modal-search-active .ui-autocomplete.ui-front li > div {
padding: .5rem 1rem
}
.modal-search-active #search-overlay {
background-color: var(--overlay-regular);
display: block !important
}
.reverse-buy-sell-colors .st20 {
fill: #d93e3e
}
.reverse-buy-sell-colors .st15 {
fill: #b82c0c
}
.reverse-buy-sell-colors .st16 {
fill: var(--on-surface-tertiary-fixed)
}
.reverse-buy-sell-colors.demo-real-page .price-type .btn span.light-blue, .reverse-buy-sell-colors.demo-real-page .price-type .instrument-title span:last-child.light-blue {
color: var(--on-surface-tertiary-fixed)
}
.reverse-buy-sell-colors .insights-animation .svg-sentiment-sellers {
fill: var(--on-surface-tertiary-fixed)
}
.reverse-buy-sell-colors .insights-animation .change.green, .reverse-buy-sell-colors .insights-animation .rate.green, .reverse-buy-sell-colors .insights-animation .svg-sentiment-buyers {
fill: var(--on-surface-alert)
}
.reverse-buy-sell-colors .client-sentiment, .reverse-buy-sell-colors .sentiment {
--theme-color-alert: var(--on-surface-tertiary-fixed);
--theme-color-success: var(--on-surface-alert)
}
.reverse-buy-sell-colors .daily-change div div span.light-blue, .reverse-buy-sell-colors .daily-price-high-low div span.light-blue, .reverse-buy-sell-colors .discovery-tool-instruments-list .light-blue, .reverse-buy-sell-colors .info-data div span.light-blue, .reverse-buy-sell-colors .info-list ul li .value.light-blue, .reverse-buy-sell-colors .manage-margin .margin-table .light-blue, .reverse-buy-sell-colors .multi-chart .cq-chart-title .change.light-blue, .reverse-buy-sell-colors .section-table-body .light-blue .buy, .reverse-buy-sell-colors .section-table-body .light-blue-change .change, .reverse-buy-sell-colors .section-table-body .light-blue-change .highlight-negative, .reverse-buy-sell-colors .section-table-body .light-blue-sell .sell, .reverse-buy-sell-colors .section-table-group > div .light-blue .buy, .reverse-buy-sell-colors .section-table-group > div .light-blue-change .change, .reverse-buy-sell-colors .section-table-group > div .light-blue-change .highlight-negative, .reverse-buy-sell-colors .section-table-group > div .light-blue-sell .sell, .reverse-buy-sell-colors .slider-change.light-blue {
color: var(--on-surface-tertiary-fixed)
}
.reverse-buy-sell-colors .section-table-body .light-blue-change .highlight-negative span, .reverse-buy-sell-colors .section-table-group > div .light-blue-change .highlight-negative span {
background-color: var(--surface-tertiary-light-opacity)
}
.reverse-buy-sell-colors .section-table-body .red-change .highlight-positive, .reverse-buy-sell-colors .section-table-group > div .red-change .highlight-positive {
color: var(--on-surface-alert)
}
.reverse-buy-sell-colors .section-table-body .red-change .highlight-positive span, .reverse-buy-sell-colors .section-table-group > div .red-change .highlight-positive span {
background-color: var(--surface-alert-light-opacity)
}
.reverse-buy-sell-colors .sidebar .instrument-header .data .change.light-blue, .reverse-buy-sell-colors .sidebar .instrument-header .data .rate.light-blue, .reverse-buy-sell-colors .sidebar-content .instrument-info .info-change.light-blue, .reverse-buy-sell-colors .sidebar-content .instrument-info .instrument-rate .rate-value.light-blue, .reverse-buy-sell-colors .sidebar-content .sidebar-info-trade .info-buttons button.light-blue .value, .reverse-buy-sell-colors .sidebar-info .adjustments ul li .light-blue, .reverse-buy-sell-colors .sidebar-info .info-header .light-blue-change.change {
color: var(--on-surface-tertiary-fixed)
}
@media only screen and (hover: hover)and (pointer: fine) {
.reverse-buy-sell-colors .sidebar-content .sidebar-info-trade .info-buttons button.light-blue:hover .value {
color: var(--on-primary-regular)
}
}
.reverse-buy-sell-colors .sidebar-content .sidebar-info-trade .info-buttons button.light-blue:active .value {
color: var(--on-primary-regular)
}
.tabs-navigation {
border-bottom: 1px solid var(--outline-light)
}
.tabs-navigation ul {
display: flex;
list-style-type: none;
margin: 0 0 -1px;
padding: 0
}
@media only screen and (max-width: 56em) {
.tabs-navigation ul {
overflow-x: auto;
overflow-y: hidden
}
.tabs-navigation ul li:first-child {
margin-inline-start: auto
}
.tabs-navigation ul li:last-child {
margin-inline-end: auto
}
}
.tabs-navigation ul li {
flex: 0 1 auto;
margin: 0;
padding: 0
}
.tabs-navigation ul li button {
background: none;
border: none;
max-width: 100%;
min-width: 0;
width: 100%
}
.tabs-navigation ul li button:disabled {
opacity: .4
}
.tabs-navigation ul li a, .tabs-navigation ul li button {
border-bottom: 3px solid transparent;
color: var(--on-surface-light);
display: block;
font-size: 1rem;
padding: .875rem 1.5rem;
text-align: center;
transition: color, background-color .1s ease;
white-space: nowrap
}
.tabs-navigation ul li.active a, .tabs-navigation ul li.active button {
border-bottom-color: var(--outline-secondary-fixed);
color: var(--on-surface-primary);
font-weight: 700
}
.theme-trade-tabs .tabs-navigation {
background-color: var(--surface-date-picker-header-main);
border-bottom-width: 0
}
@media only screen and (min-width: 56.063em) {
.theme-trade-tabs .tabs-navigation {
font-size: .75rem
}
}
@media only screen and (min-width: 73.063em) {
.theme-trade-tabs .tabs-navigation {
font-size: .875rem
}
}
@media only screen and (min-width: 90.063em) {
.theme-trade-tabs .tabs-navigation {
font-size: .9375rem
}
}
.theme-trade-tabs .tabs-navigation ul {
margin: 0
}
.theme-trade-tabs .tabs-navigation ul li a, .theme-trade-tabs .tabs-navigation ul li button {
color: var(--on-primary-light);
font-size: inherit;
font-weight: 700;
visibility: visible
}
.theme-trade-tabs .tabs-navigation ul li a:hover, .theme-trade-tabs .tabs-navigation ul li button:hover {
background-color: var(--surface-date-picker-header-light);
border-bottom-color: var(--outline-primary-extra-light);
color: var(--on-primary-regular)
}
.theme-trade-tabs .tabs-navigation ul li.active a, .theme-trade-tabs .tabs-navigation ul li.active button {
border-bottom-color: #fff;
color: var(--on-primary-regular)
}
.theme-sidebar-tabs .tabs-navigation {
background-color: var(--surface-sidebar-main);
box-shadow: 0 -.25rem 0 0 var(--surface-sidebar-main), 0 .25rem .5rem 0 rgba(0, 0, 0, .1);
margin: .75rem -1rem 1.25rem
}
.theme-sidebar-tabs .tabs-navigation ul {
padding: 0 .875rem
}
.theme-sidebar-tabs .tabs-navigation ul li {
flex: 1 1 30%;
padding: 0 .625rem
}
.theme-sidebar-tabs .tabs-navigation ul li button {
border-top: 3px solid transparent;
padding: .75rem .5rem
}
.sticky-sidebar-tabs .tabs-navigation {
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .1);
margin: -.75rem -1rem 0;
position: sticky;
top: -.75rem;
z-index: 100
}
:where(#braze-placeholder) :not(path) {
all: revert
}
@supports (-webkit-touch-callout:none) {
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr .ot-tgl label span {
pointer-events: none
}
}
.instrument-logo {
border-radius: .25rem;
display: block;
font-size: 1rem;
height: 1em;
margin: 0;
overflow: hidden;
width: 1em
}
.instrument-logo img {
display: block;
height: 100%;
object-fit: contain;
object-position: center;
opacity: 0;
transition: opacity .15s ease-in-out;
width: 100%
}
.instrument-logo.has-border.show-logo {
outline: 1px solid var(--outline-light)
}
.instrument-logo.show-logo img {
opacity: 1
}
.instrument-logo.show-fallback {
background-color: var(--surface-container-dim-extra-light);
display: flex;
place-content: center
}
.instrument-logo.show-fallback:before {
color: var(--on-surface-light);
display: block;
font-size: .5em;
padding: .5em
}
.instrument-logo-wrap {
display: inline-block;
flex: 0 0 1em;
font-size: 1.5625rem;
margin-inline-end: .75rem;
padding: 0 !important
}
.instrument-logo-wrap .instrument-logo {
display: block;
font-size: 1em;
margin-inline-end: 0
}
@media only screen and (max-width: 56em) {
.instrument-logo-wrap.no-trading {
position: relative
}
.instrument-logo-wrap.no-trading:after {
align-items: center;
border-radius: 50%;
bottom: -33.3333333333%;
color: var(--on-surface-light);
content: "\ea08";
display: flex;
font-family: icoplus !important;
font-size: 58.3333333333%;
height: 75%;
inset-inline-end: -33.3333333333%;
justify-content: center;
position: absolute;
width: 75%;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.instrument-logo-wrap.no-trading .instrument-logo {
-webkit-mask: radial-gradient(circle .375em at var(--ltr, 95%) var(--rtl, 5%) 95%, transparent 98%, #000) 0 0 no-repeat;
mask: radial-gradient(circle .375em at var(--ltr, 95%) var(--rtl, 5%) 95%, transparent 98%, #000) 0 0 no-repeat
}
}
.separator {
border: 1px solid var(--outline-light);
margin-block: 1.25rem .25rem
}
:root:where([dir=rtl]) #livechat-compact-container {
left: 0 !important;
right: auto !important
}
@media only screen and (min-width: 56.063em) {
:root:where([dir=rtl]) #livechat-compact-container {
left: .625rem !important;
right: auto !important
}
}
:root:where([dir=rtl]) #livechat-full {
left: 0 !important;
right: auto !important
}
:root:where([dir=rtl]) [data-currency], :root:where([dir=rtl]) [data-formula], :root:where([dir=rtl]) [data-ltr], :root:where([dir=rtl]) [data-number], :root:where([dir=rtl]) [data-percent] {
direction: ltr !important;
unicode-bidi: embed !important
}
:root:where([dir=rtl]) .icon-caret-right:before {
content: "\e99a"
}
:where(:root[dir=rtl]) .sym[data-ltr] {
text-align: right
}
dialog {
background: none;
border: none;
color: inherit;
display: flex;
flex-direction: column;
height: -moz-fit-content;
height: fit-content;
inset: 0;
margin: auto;
max-height: 90%;
max-width: 90%;
outline: none;
overflow: visible;
padding: 0;
position: fixed;
width: 60ch;
z-index: 6003
}
dialog.has-overlay:before {
background-color: var(--overlay-regular);
content: "";
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 6002
}
dialog > div {
background-color: var(--surface-popup-main);
border-radius: .75rem;
display: flex;
flex: 0 1 auto;
flex-direction: column;
min-height: 1px;
overflow: hidden;
position: relative;
width: 100%;
z-index: 6003
}
dialog .dialog-header {
align-items: center;
color: var(--on-surface-regular);
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-start;
margin: 1rem 1rem .5rem;
text-align: center
}
dialog .dialog-header a {
color: var(--on-surface-primary);
display: flex;
flex: 0 0 1em;
font-size: 1.5rem;
margin-bottom: .375rem
}
@media only screen and (min-width: 56.063em) {
dialog .dialog-header a {
font-size: 1.125rem
}
}
dialog .dialog-header a.close-btn {
margin-inline-start: auto;
z-index: 6004
}
dialog .dialog-header h3 {
flex: 1 1 100%;
font-size: 1.5rem;
font-weight: 400;
padding: .5rem .5rem 0
}
dialog .dialog-header h3:before {
display: block;
font-size: 1.125rem;
margin: 0 0 1.5rem;
opacity: .5
}
dialog .dialog-header div {
flex: 1 1 100%;
padding: 1rem .5rem 0
}
dialog .dialog-body {
flex: 1 1 100%;
overflow: auto;
padding: 1rem 1.5rem 1.5rem
}
dialog .dialog-footer {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: center;
padding: .75rem 1.25rem 1rem
}
dialog .dialog-footer button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 0;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
flex: 1 1 40%;
font-size: 1rem;
margin: 0 .25rem .5rem;
max-width: 19rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
dialog .dialog-footer button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
dialog .dialog-footer button.active, dialog .dialog-footer button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
dialog .dialog-footer button:disabled {
opacity: .4;
pointer-events: none
}
dialog .dialog-footer button.main-button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 0;
color: var(--on-primary-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
dialog .dialog-footer button.main-button:hover {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
}
dialog .dialog-footer button.main-button.active, dialog .dialog-footer button.main-button:active {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
dialog .dialog-footer button.main-button:disabled {
opacity: .4;
pointer-events: none
}
dialog.reset > div > .dialog-body {
margin: 0;
padding: 0
}
dialog.has-separator .dialog-header {
border-bottom: 1px solid var(--outline-light);
padding-bottom: 1.5rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
dialog.has-separator .dialog-header {
padding-bottom: 1rem
}
dialog.has-separator .dialog-header h3 {
padding: 0
}
}
@media only screen and (min-width: 56.063em) {
dialog.has-separator .dialog-header {
margin: 1rem 2rem .5rem
}
dialog.has-separator .dialog-header a {
margin-inline-start: -1rem
}
dialog.has-separator .dialog-header a.close-btn {
margin-inline-end: -1rem;
margin-inline-start: auto
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
dialog.has-separator .dialog-body {
padding: .5rem 1rem 1rem
}
}
dialog.small {
width: 360px
}
dialog.small .dialog-footer button {
max-width: 10rem
}
dialog.alert-dialog {
color: var(--on-surface-medium);
width: 560px;
z-index: 7000
}
dialog.alert-dialog.tooltip-dialog {
width: 440px
}
dialog.alert-dialog > div {
border-radius: 1rem
}
dialog.alert-dialog .dialog-header {
color: inherit;
margin: 0;
padding-top: 1.5rem;
text-align: start
}
dialog.alert-dialog .dialog-header h3 {
color: var(--on-surface-regular);
padding: 0 1.5rem
}
dialog.alert-dialog .dialog-header div {
padding: .5rem 1.5rem 0
}
dialog.alert-dialog .dialog-body {
font-size: 1rem;
margin: .5rem 1.5rem;
max-height: 20rem;
padding: 0
}
dialog.alert-dialog .dialog-footer {
gap: .5rem;
justify-content: flex-end;
padding: 1rem 1.5rem 1.5rem
}
dialog.alert-dialog .dialog-footer button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-primary);
flex: 0 0 auto;
font-size: .9375rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
max-width: 100%;
min-height: 2.75rem;
padding: .5rem 1.5rem;
transition: .2s ease-in-out;
width: auto
}
@media only screen and (hover: hover)and (pointer: fine) {
dialog.alert-dialog .dialog-footer button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
dialog.alert-dialog .dialog-footer button.active, dialog.alert-dialog .dialog-footer button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
dialog.alert-dialog .dialog-footer button:disabled {
opacity: .4;
pointer-events: none
}
dialog.alert-dialog.title-with-icon .dialog-header {
--local-grad-position: 5rem;
background-image: linear-gradient(180deg, var(--surface-popup-header), var(--surface-popup-header) var(--local-grad-position), var(--surface-popup-main) var(--local-grad-position));
text-align: center
}
dialog.alert-dialog.title-with-icon .dialog-header h3:before {
aspect-ratio: 7.5/6.25;
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
content: "";
margin: 0 auto .5rem;
opacity: 1;
width: 7.5rem
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
dialog.alert-dialog.title-with-icon .dialog-header {
--local-grad-position: 3.75rem;
background-image: linear-gradient(180deg, var(--surface-popup-header), var(--surface-popup-header) 3.75rem, var(--surface-main) 3.75rem)
}
dialog.alert-dialog.title-with-icon .dialog-header h3:before {
margin-block: 0 .25rem;
width: 4.25rem
}
}
dialog.alert-dialog.title-with-icon .dialog-body {
max-height: 15rem
}
dialog.alert-dialog.title-with-icon.alert-dialog-success .dialog-header h3:before {
background-image: var(--img-sprite-dialog-success)
}
dialog.alert-dialog.title-with-icon.alert-dialog-warning .dialog-header h3:before {
background-image: var(--img-sprite-dialog-warning)
}
dialog.alert-dialog.title-with-icon.alert-dialog-error .dialog-header h3:before {
background-image: var(--img-sprite-dialog-error)
}
dialog.alert-dialog.title-with-icon.alert-dialog-info .dialog-header h3:before {
background-image: var(--img-sprite-dialog-info)
}
dialog.alert-dialog.title-with-icon.alert-dialog-confirmation .dialog-header h3:before {
background-image: var(--img-sprite-dialog-confirmation)
}
dialog.window-dialog {
height: 90%;
width: 90%
}
dialog.window-dialog > div {
flex: 1 1 100%
}
@media only screen and (min-width: 56.063em) {
dialog.window-dialog {
max-height: 832px;
max-width: 1096px
}
}
@media only screen and (min-width: 35.063em)and (orientation: portrait) {
dialog.window-dialog {
max-height: 1096px;
max-width: 832px
}
@supports (aspect-ratio:3/4) {
dialog.window-dialog {
aspect-ratio: 3/4;
height: auto;
max-height: min(1096px, 90%)
}
}
}
dialog.window-dialog .dialog-header {
background-color: var(--surface-popup-primary);
border: none;
color: var(--on-primary-regular);
flex-wrap: nowrap;
margin: 0;
padding: 0;
text-align: start
}
dialog.window-dialog .dialog-header h3 {
font-size: 1rem;
font-weight: 700;
margin: 0;
padding: .625rem;
padding-inline-start: 1.5rem
}
dialog.window-dialog .dialog-header a {
color: var(--on-primary-regular);
font-size: 1.5rem;
margin: .5rem
}
dialog.window-dialog .dialog-header a.close-btn {
margin: .5rem;
order: 1
}
dialog.window-dialog .dialog-header div {
display: none
}
dialog.window-dialog .dialog-body {
background-color: var(--surface-popup-main);
overflow: auto;
padding: .625rem
}
@media only screen and (min-width: 56.063em) {
dialog.window-dialog .dialog-body {
padding: 2rem 2.25rem
}
}
dialog.window-dialog .dialog-body .ui-autocomplete {
max-height: 20rem
}
dialog.window-dialog.dynamic-forms-dialog .dialog-header {
background: none
}
dialog.window-dialog.dynamic-forms-dialog .dialog-header h3 {
display: none
}
dialog.window-dialog.dynamic-forms-dialog .dialog-header a.close-btn {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
inset-inline-end: .625rem;
margin: 0;
position: absolute;
top: .3125rem;
transition: .2s ease-in-out;
z-index: 100
}
@media only screen and (hover: hover)and (pointer: fine) {
dialog.window-dialog.dynamic-forms-dialog .dialog-header a.close-btn:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
dialog.window-dialog.dynamic-forms-dialog .dialog-header a.close-btn.active, dialog.window-dialog.dynamic-forms-dialog .dialog-header a.close-btn:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
dialog.window-dialog.dynamic-forms-dialog .dialog-header a.close-btn:disabled {
opacity: .4;
pointer-events: none
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body {
overflow: hidden;
padding: 0;
transform: translate(0)
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body > div {
height: 100%
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form {
overflow: auto;
padding: 3.5rem 0 1rem
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form .progress {
background-color: var(--surface-popup-main);
height: 3.5rem;
left: 0;
padding-top: 2.25rem;
position: fixed;
top: 0;
width: 100%;
z-index: 103
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form .progress .current-stage {
top: 2.25rem
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
inset-inline-start: .625rem;
position: fixed;
top: .3125rem;
transition: .2s ease-in-out;
z-index: 104
}
@media only screen and (hover: hover)and (pointer: fine) {
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a.active, dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a:disabled {
opacity: .4;
pointer-events: none
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a:before {
display: block
}
dialog.window-dialog.dynamic-forms-dialog .dialog-body .dynamic-form header h2 a.close-btn {
inset-inline-end: .625rem;
left: auto
}
.form fieldset {
border: none;
margin: 0;
padding: 0 0 .625rem
}
.form fieldset .card-holder-name {
color: var(--on-surface-light);
font-size: .9375rem;
font-weight: 500;
padding: 0 .75rem .75rem
}
.form fieldset ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0
}
@media only screen and (max-width: 56em) {
.form fieldset ul.verify-form button {
margin-inline-end: .625rem
}
.form fieldset ul.code-form li {
flex: 0 1 50%
}
.form fieldset ul.code-form li button {
margin-inline-end: 0;
margin-inline-start: .625rem
}
}
@media only screen and (min-width: 56.063em) {
.form fieldset ul.full-width li {
flex: 0 1 100%
}
.form fieldset ul.verify-form {
flex-wrap: nowrap
}
.form fieldset ul.verify-form li {
flex: 0 1 41.6666%
}
.form fieldset ul.verify-form li:last-child {
flex: 0 1 58.3333%
}
}
@media only screen and (min-width: 56.063em)and (max-width: 73em) {
.form fieldset ul.financial-details li:nth-child(2) div {
padding-inline-start: 0
}
.form fieldset ul.financial-details li:nth-child(2) label {
font-size: .875rem
}
}
.form fieldset ul.ui-autocomplete {
display: block;
padding: .3125rem 0
}
.form fieldset ul.ui-autocomplete li {
padding: 0
}
.form fieldset ul.ui-autocomplete li > div {
padding: .3125rem .625rem
}
.form fieldset ul.ui-autocomplete li span {
display: inline
}
.form fieldset ul.verify-form button {
margin-bottom: .625rem
}
.form fieldset ul.documents-list {
display: block;
padding: .625rem 1.25rem
}
.form fieldset ul.documents-list li {
display: inline-block;
font-size: .875rem;
padding: .3125rem 1.25rem .3125rem 0
}
.form fieldset ul.options-list {
flex-direction: column
}
.form fieldset ul.options-list li {
flex: 0 1 auto
}
.form fieldset ul.options-list li button {
background: none;
border: none;
display: flex;
justify-content: flex-start;
text-align: left
}
.form fieldset ul.options-list li button svg {
vertical-align: middle;
width: 24px;
fill: var(--on-surface-primary) !important
}
.form fieldset ul.options-list li button:hover {
color: var(--on-surface-tertiary-fixed)
}
.form fieldset ul.options-list li button:hover svg {
fill: var(--on-surface-tertiary-fixed) !important
}
.form fieldset ul.options-list li:first-child svg {
margin-inline-end: .3125rem
}
.form fieldset ul.options-list li:first-child button {
padding-inline-start: .6875rem
}
.form fieldset li {
flex: 0 1 100%;
margin: 0;
padding: .3125rem 0
}
@media only screen and (min-width: 56.063em) {
.form fieldset li {
flex: 0 1 50%
}
.form fieldset li.full-width {
flex: 0 1 100%
}
}
.form fieldset li[data-questionid=FinalDeclaration] {
padding-top: 1.25rem
}
@media only screen and (min-width: 56.063em) {
.form fieldset li > div {
padding: 0 .625rem
}
}
.form fieldset li > div .help {
color: var(--on-surface-medium);
display: block;
flex: 0 1 100%;
font-size: .75rem;
padding: .3125rem
}
.form fieldset li > div .help[class*=" icon-"]:before {
font-size: 1rem;
margin-inline-end: .4375em;
vertical-align: -20%
}
.form fieldset li > div label a {
flex: 0 1 auto;
font-size: 1rem
}
.form fieldset li > div.bullet {
background-image: var(--img-bullet);
background-position: var(--ltr, .625rem .188rem) var(--rtl, right .625rem top .3125rem);
background-repeat: no-repeat;
padding: 0 2.188rem
}
@media only screen and (max-width: 56em) {
.form fieldset li > div.bullet {
background-position: var(--ltr, 0 3px) var(--rtl, right .3125rem);
min-height: 1.25rem;
padding: 0 1.563rem
}
}
.form fieldset li .date-picker span {
display: flex;
flex-wrap: wrap
}
.form fieldset li .date-picker input[type=text] {
flex: 1 0 50%
}
.form fieldset li .date-picker button {
flex: 0 0 auto;
min-width: 1rem
}
.form fieldset li .date-picker small {
min-width: 100%
}
.form fieldset li .birthday-picker {
display: flex;
padding-bottom: .75rem;
padding-top: .75rem
}
.form fieldset li .birthday-picker select {
margin-inline-end: .5rem
}
.form fieldset li .birthday-picker select:last-of-type {
margin-inline-end: 0
}
.form fieldset li .notifications-check, .form fieldset li .radio-check {
align-items: center;
display: flex;
flex-wrap: wrap
}
.form fieldset li .notifications-check > div, .form fieldset li .radio-check > div {
flex: 0 0 100%;
padding: 0 8px .3125rem
}
.form fieldset li .notifications-check > span, .form fieldset li .radio-check > span {
align-items: center;
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
padding: 0 .3125rem
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .notifications-check > span, .form fieldset li .radio-check > span {
flex: 1 1 auto
}
}
.form fieldset li .notifications-check > span.validation-header, .form fieldset li .radio-check > span.validation-header {
display: block;
flex: 0 0 100%;
padding-bottom: .625rem
}
.form fieldset li .fatca-answer.notifications-check span, .form fieldset li .radio-check.fatca-answer span {
flex-wrap: nowrap;
padding-top: 0
}
.form fieldset li .notifications-check input[type=checkbox], .form fieldset li .notifications-check input[type=radio], .form fieldset li .radio-check input[type=checkbox], .form fieldset li .radio-check input[type=radio] {
flex: 0 0 auto;
min-width: 1rem
}
.form fieldset li .notifications-check input[type=checkbox] + label, .form fieldset li .notifications-check input[type=checkbox] + label + label, .form fieldset li .notifications-check input[type=radio] + label, .form fieldset li .notifications-check input[type=radio] + label + label, .form fieldset li .radio-check input[type=checkbox] + label, .form fieldset li .radio-check input[type=checkbox] + label + label, .form fieldset li .radio-check input[type=radio] + label, .form fieldset li .radio-check input[type=radio] + label + label {
flex: 1 0 50%;
line-height: 1.25em;
margin-bottom: 0
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.form fieldset li .notifications-check input[type=checkbox] + label + label.paypal-logo, .form fieldset li .notifications-check input[type=checkbox] + label.paypal-logo, .form fieldset li .notifications-check input[type=radio] + label + label.paypal-logo, .form fieldset li .notifications-check input[type=radio] + label.paypal-logo, .form fieldset li .radio-check input[type=checkbox] + label + label.paypal-logo, .form fieldset li .radio-check input[type=checkbox] + label.paypal-logo, .form fieldset li .radio-check input[type=radio] + label + label.paypal-logo, .form fieldset li .radio-check input[type=radio] + label.paypal-logo {
width: auto
}
.form fieldset li .notifications-check input[type=checkbox] + label + label.paypal-logo span:before, .form fieldset li .notifications-check input[type=checkbox] + label.paypal-logo span:before, .form fieldset li .notifications-check input[type=radio] + label + label.paypal-logo span:before, .form fieldset li .notifications-check input[type=radio] + label.paypal-logo span:before, .form fieldset li .radio-check input[type=checkbox] + label + label.paypal-logo span:before, .form fieldset li .radio-check input[type=checkbox] + label.paypal-logo span:before, .form fieldset li .radio-check input[type=radio] + label + label.paypal-logo span:before, .form fieldset li .radio-check input[type=radio] + label.paypal-logo span:before {
padding-inline-start: .25em
}
}
.form fieldset li .notifications-check small, .form fieldset li .radio-check small {
flex: 0 0 100%;
min-width: 100%
}
.form fieldset li.keep-logged-in {
flex: 0 1 100%
}
.form fieldset li.keep-logged-in span {
justify-content: center
}
.form fieldset li.keep-logged-in span input[type=checkbox] + label {
flex: none
}
.form fieldset li.receive-emails {
padding: 1em 0
}
.form fieldset li.receive-emails .notifications-check > span, .form fieldset li.receive-emails .radio-check > span {
padding: 0
}
.form fieldset li .double-input span {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0
}
.form fieldset li .double-input input[type=text], .form fieldset li .double-input select {
margin: 0;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .double-input input[type=text], .form fieldset li .double-input select {
width: calc(50% - .25em)
}
}
.form fieldset li .double-input input[type=text]:first-child, .form fieldset li .double-input select:first-child {
margin-bottom: .625rem
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .double-input input[type=text]:first-child, .form fieldset li .double-input select:first-child {
margin-bottom: 0
}
}
.form fieldset li .double-input small {
flex: 0 1 100%
}
.form fieldset li .notifications-check > span {
align-items: center;
display: flex;
flex: 1 1 auto;
flex-wrap: nowrap;
padding: 0 .3125rem
}
@media only screen and (min-width: 73.063em) {
.form fieldset li .notifications-check > span {
flex: 0 1 30%
}
}
.form fieldset li .notifications-check > span.single {
flex: 0 1 100%
}
.form fieldset li .text-with-link a {
display: inline-block;
white-space: nowrap
}
.form fieldset li .radio-line {
border-top: 1px solid var(--outline-light)
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .radio-line {
display: flex;
justify-content: space-around
}
}
.form fieldset li .radio-line span {
display: block;
padding: .3125rem 0 .625rem
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .radio-line span {
text-align: center
}
}
.form fieldset li .radio-line label {
display: inline-block;
line-height: 1.25em;
margin-bottom: 0;
padding-inline-start: .5em;
vertical-align: 25%
}
@media only screen and (min-width: 56.063em) {
.form fieldset li .radio-line label {
display: block
}
}
.form fieldset li .has-prefix span {
display: flex;
flex-wrap: nowrap;
justify-content: center;
position: relative
}
.form fieldset li .has-prefix.has-select span {
justify-content: flex-start
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.form fieldset li .has-prefix input, .form fieldset li .has-prefix select {
width: calc(100% - 5rem)
}
}
.form fieldset li .has-prefix .custom-select-toggle, .form fieldset li .has-prefix input, .form fieldset li .has-prefix select {
border-radius: var(--ltr, 0 .25rem .25rem 0) var(--rtl, .25rem 0 0 .25rem)
}
.form fieldset li .has-prefix.card-date select {
border-radius: .25rem !important
}
.form fieldset li .has-prefix small {
flex: 0 1 100%
}
.form fieldset li .has-prefix .prefix {
align-items: center;
border: 1px solid var(--outline-light);
border-inline-end-width: 0;
border-radius: .25rem;
border-end-end-radius: 0;
border-start-end-radius: 0;
color: var(--on-surface-light);
display: flex;
flex-direction: column;
font-size: 1.25rem;
justify-items: stretch;
line-height: 1.25em
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.form fieldset li .has-prefix .prefix {
padding: 0;
width: 8rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.form fieldset li .has-prefix .prefix {
font-weight: 300;
width: 5rem
}
}
.form fieldset li .has-prefix .prefix:before {
-ms-interpolation-mode: bicubic;
content: "";
display: block
}
.form fieldset li .has-sufix span input {
padding-inline-end: 1.875em
}
.form fieldset li .has-sufix span input[type=tel] {
padding-inline: var(--ltr, .75rem 1.875rem) var(--rtl, 1.875rem .75rem)
}
.form fieldset li .has-sufix .valid:hover + span.sufix {
border-color: var(--outline-success)
}
.form fieldset li .has-sufix .sufix {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 35'%3E%3Cpath d='M15.1 13.8 21 21l5.8-7.2z'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
background-size: 30px;
font-size: .875em;
height: calc(100% - 4px);
inset-inline-end: 2px;
padding: 0 8px;
position: absolute;
top: 2px;
width: 2em
}
.form fieldset li .has-sufix .sufix:before {
display: none
}
.form fieldset li .has-sufix .invalid .sufix {
border-color: var(--outline-alert)
}
.form fieldset li .has-phone-prefix {
direction: ltr;
display: flex;
text-align: start
}
.form fieldset li .has-phone-prefix .phone-prefix-control {
display: flex
}
.form fieldset li .has-phone-prefix .phone-prefix-control span {
align-items: center;
background-color: var(--surface-container-active-extra-light);
border: 1px solid var(--outline-light);
border-radius: .25rem 0 0 .25rem;
display: flex;
font-size: 1rem;
padding: .375rem .75rem
}
.form fieldset li .has-phone-prefix .phone-prefix-control > input {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-inline-start: -1px
}
.form fieldset li .has-phone-prefix .phone-prefix-control + input {
flex: 1 1 100%;
margin-inline-start: .5rem
}
.form fieldset li .has-phone-prefix.invalid span {
border-bottom-color: var(--outline-alert)
}
.form fieldset li .has-phone-prefix.invalid input, .form fieldset li .has-phone-prefix.invalid span {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.form fieldset li .address-autocomplete span {
display: flex;
flex-wrap: wrap
}
.form fieldset li .address-autocomplete input[type=text] {
border-radius: .25rem 0 0 .25rem;
flex: 1 0 50%
}
.form fieldset li .address-autocomplete input[type=text] + span {
display: inline-block;
width: 0
}
.form fieldset li .address-autocomplete input[type=text] + span:before {
color: var(--on-surface-primary-extra-light-2);
content: "\e9b7";
display: inline-block;
font-family: icoplus;
font-size: 1.25rem;
inset-inline-end: 2rem;
line-height: 1.4;
padding: .125em;
position: relative;
text-decoration: inherit;
text-transform: none;
top: .125em
}
.form fieldset li .address-autocomplete button {
border-color: var(--outline-light);
border-radius: 0 .25rem .25rem 0;
flex: 0 0 auto;
margin-top: 0;
min-width: 0
}
.form fieldset li .address-autocomplete small {
min-width: 100%
}
.form fieldset li .spreedly-cvv, .form fieldset li .spreedly-cvv iframe, .form fieldset li .spreedly-number, .form fieldset li .spreedly-number iframe {
max-height: 40px
}
.form fieldset li .spreedly-number {
width: 100%
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.form fieldset li .spreedly-number {
width: calc(100% - 5rem)
}
}
.form fieldset li .spreedly-cvv {
width: 100%
}
.form fieldset .questions-group-footer {
color: var(--on-surface-medium);
font-size: .875rem;
padding: .625rem
}
.form .side-text {
text-align: end
}
.form .is-notice-only label {
cursor: default
}
.form .plaintext {
padding: 0 .625rem
}
.form .plaintext p {
margin: 0;
padding: 0 0 .625rem
}
.form .my-info-logo {
background: var(--img-singpass) no-repeat 50% 50%/contain;
height: 6rem;
margin: 0 auto
}
.form .my-info-selection-button a {
background-color: #e30613;
border: 0 solid transparent;
border-radius: .5rem;
color: var(--on-primary-regular);
display: inline-block;
font-size: 1rem;
font-weight: 700;
margin: 1rem auto;
padding: .75rem 2rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.form .my-info-selection-button a:hover {
background-color: #ca0914;
border-color: transparent;
color: var(--on-primary-regular)
}
}
.form .my-info-selection-button a.active, .form .my-info-selection-button a:active {
background-color: #ca0914;
border-color: transparent;
color: var(--on-primary-regular)
}
.form .my-info-selection-button a:disabled {
opacity: .4;
pointer-events: none
}
.form .align-center {
text-align: center
}
.form .legend, .form legend {
color: var(--on-surface-primary-medium-fixed);
font-weight: 400;
margin: 0;
padding: .625rem;
width: 100%
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.form .legend, .form legend {
font-size: 1rem
}
}
@media only screen and (min-width: 56.063em)and (min-height: 38.063em) {
.form .legend, .form legend {
font-size: .875rem
}
}
@media only screen and (max-width: 56em) {
.form .legend, .form legend {
padding: 0
}
}
.form .legend span, .form legend span {
display: block
}
.form .legend .legend-heading, .form .legend .legend-title, .form legend .legend-heading, .form legend .legend-title {
font-weight: 700
}
.form .legend .legend-title, .form legend .legend-title {
font-size: 1.125rem;
padding-bottom: .625rem
}
.form .legend .legend-heading, .form legend .legend-heading {
font-size: 1rem;
padding-bottom: .5rem;
padding-top: .625rem
}
.form .legend .hint, .form legend .hint {
padding: 8px 0
}
.form .legend .hint.icon-info-circle:before, .form legend .hint.icon-info-circle:before {
margin-inline-end: .1875rem
}
.form button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
padding: .25rem 1rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.form button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.form button.active, .form button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.form button:disabled {
opacity: .4;
pointer-events: none
}
.form label {
display: inline-block;
margin-bottom: .5em
}
.form input[type=file] {
margin: 0;
min-width: 0;
width: 100%
}
.form .status {
display: inline-block;
padding-inline-end: .625rem
}
.form .status-alert {
color: var(--on-surface-alert)
}
.form .status-warning {
color: var(--on-surface-warning)
}
.form .status-pending {
color: var(--on-surface-primary)
}
.form input[type=email], .form input[type=number], .form input[type=password], .form input[type=search], .form input[type=tel], .form input[type=text], .form input[type=url], .form select, .form textarea {
border: 1px solid var(--outline-light);
border-radius: 4px;
margin: 0;
min-height: 40px;
padding: 8px 12px;
width: 100%
}
.form input[disabled], .form select[disabled], .form textarea[disabled] {
opacity: .5
}
.form textarea {
font-family: inherit
}
.form small {
background-color: var(--on-surface-alert);
border-radius: .25rem;
color: var(--on-primary-regular);
display: none;
margin-bottom: .3125rem;
padding: .3125rem
}
.form label small {
background-color: var(--surface-main);
color: var(--on-surface-alert);
margin-bottom: 0
}
.form input.invalid:required + label small, .form input.invalid:required + small, .form select.invalid:required + small, .form textarea.invalid:required + small {
display: block
}
.form input.invalid:required {
border-color: var(--outline-alert)
}
.form .invalid small, .form .invalid + small, .form input.invalid + button + small, .form input.invalid + label + small, .form input.invalid + small, .form select.invalid + small, .form textarea.invalid + small {
display: block
}
.form .invalid + small, .form input.invalid + button + small, .form input.invalid + label + small, .form input.invalid + small, .form select.invalid + small, .form textarea.invalid + small {
border-radius: 0 0 .25rem .25rem
}
.form input.invalid {
border-color: var(--outline-alert)
}
.form input.invalid, .form select.invalid {
border-radius: .25rem .25rem 0 0
}
.form input.valid, .form input.valid:focus, .form input.valid:hover {
border-color: var(--outline-success)
}
.form input.hide + small, .form input[data-hide=true] + small, .form select.hide + small, .form select[data-hide=true] + small {
display: none !important
}
.form div.invalid, .form span.invalid {
width: 100%
}
.form-label {
display: inline-block;
margin-bottom: .5rem;
width: 100%
}
.form-label:empty {
display: inline
}
.form-label .required {
color: var(--on-surface-alert) !important
}
.form-control, .form-date-picker input[type=text], input.form-control {
appearance: none;
background-clip: padding-box;
background-color: var(--surface-main);
border: 1px solid var(--outline-medium);
border-radius: .25rem;
color: var(--on-surface-regular);
display: block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: .375rem .75rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
width: 100%
}
:where(dialog) .form-control, :where(dialog) .form-date-picker input[type=text], :where(dialog) input.form-control {
background-color: var(--surface-popup-main)
}
.form-control:-webkit-autofill, .form-date-picker input[type=text]:-webkit-autofill, input.form-control:-webkit-autofill {
-webkit-text-fill-color: var(--on-surface-regular);
-webkit-box-shadow: 0 0 0 1000px var(--surface-main) inset
}
.form-control:focus, .form-date-picker input[type=text]:focus, input.form-control:focus {
background-color: var(--surface-main);
border-color: var(--outline-focus);
box-shadow: 0 0 0 .25rem rgba(12, 39, 128, .25);
color: var(--on-surface-regular);
outline: 0
}
.form-control:focus:-webkit-autofill, .form-date-picker input[type=text]:focus:-webkit-autofill, input.form-control:focus:-webkit-autofill {
box-shadow: 0 0 0 .25rem rgba(12, 39, 128, .25), 0 0 0 1000px var(--surface-main) inset
}
.form-control:disabled, .form-control[readonly], .form-date-picker input[type=text]:disabled, .form-date-picker input[type=text][readonly], input.form-control:disabled, input.form-control[readonly] {
background-color: var(--surface-disabled-light);
opacity: 1
}
.form-control.invalid, .form-date-picker input[type=text].invalid, .form-group.invalid .form-control, .form-group.invalid .form-date-picker input[type=text], .form-group.invalid input.form-control, input.form-control.invalid {
border-color: var(--outline-alert)
}
.form-control.invalid:focus, .form-date-picker input[type=text].invalid:focus, .form-group.invalid .form-control:focus, .form-group.invalid .form-date-picker input[type=text]:focus, .form-group.invalid input.form-control:focus, input.form-control.invalid:focus {
box-shadow: 0 0 0 .25rem rgba(217, 62, 62, .25)
}
.form-control.invalid:focus:-webkit-autofill, .form-date-picker input[type=text].invalid:focus:-webkit-autofill, .form-group.invalid .form-control:focus:-webkit-autofill, .form-group.invalid .form-date-picker input[type=text]:focus:-webkit-autofill, .form-group.invalid input.form-control:focus:-webkit-autofill, input.form-control.invalid:focus:-webkit-autofill {
box-shadow: 0 0 0 .25rem rgba(217, 62, 62, .25), 0 0 0 1000px var(--surface-main) inset
}
.form-control.valid:not(.hide-valid-state), .form-date-picker input[type=text].valid:not(.hide-valid-state), .form-group.valid .form-control:not(.hide-valid-state), .form-group.valid .form-date-picker input[type=text]:not(.hide-valid-state), .form-group.valid input.form-control:not(.hide-valid-state), input.form-control.valid:not(.hide-valid-state) {
border-color: var(--outline-success)
}
.form-control.valid:not(.hide-valid-state):focus, .form-date-picker input[type=text].valid:not(.hide-valid-state):focus, .form-group.valid .form-control:not(.hide-valid-state):focus, .form-group.valid .form-date-picker input[type=text]:not(.hide-valid-state):focus, .form-group.valid input.form-control:not(.hide-valid-state):focus, input.form-control.valid:not(.hide-valid-state):focus {
box-shadow: 0 0 0 .25rem rgba(19, 132, 78, .25)
}
.form-control.valid:not(.hide-valid-state):focus:-webkit-autofill, .form-date-picker input[type=text].valid:not(.hide-valid-state):focus:-webkit-autofill, .form-group.valid .form-control:not(.hide-valid-state):focus:-webkit-autofill, .form-group.valid .form-date-picker input[type=text]:not(.hide-valid-state):focus:-webkit-autofill, .form-group.valid input.form-control:not(.hide-valid-state):focus:-webkit-autofill, input.form-control.valid:not(.hide-valid-state):focus:-webkit-autofill {
box-shadow: 0 0 0 .25rem rgba(19, 132, 78, .25), 0 0 0 1000px var(--surface-main) inset
}
.form-group.valid .form-date-picker .ui-datepicker-trigger {
border-color: var(--outline-success)
}
.form-group.invalid .form-date-picker .ui-datepicker-trigger {
border-color: var(--outline-alert)
}
.form-birthday-picker select, .form-select {
display: block;
padding: .375rem .75rem;
padding-inline-end: 2.25rem;
width: 100%;
-moz-padding-start: calc(.75rem - 3px);
appearance: none;
background-color: var(--surface-main);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
background-position: var(--ltr, right .75rem) var(--rtl, .75rem) center;
background-repeat: no-repeat;
background-size: 16px 12px;
border: 1px solid var(--outline-medium);
border-radius: .25rem;
color: var(--on-surface-regular);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
transition: all .15s ease-in-out
}
:where(dialog) .form-birthday-picker select, :where(dialog) .form-select {
background-color: var(--surface-popup-main)
}
.form-birthday-picker select, :where(dialog).form-select {
background-color: var(--surface-popup-main)
}
.form-birthday-picker select:focus, .form-select:focus {
border-color: var(--outline-focus);
box-shadow: 0 0 0 .25rem rgba(12, 39, 128, .25);
outline: 0
}
.form-birthday-picker select:disabled, .form-select:disabled {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6' opacity='.5'/%3E%3C/svg%3E");
box-shadow: none;
pointer-events: none
}
.form-birthday-picker select:-moz-focusring, .form-select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #2e86fe
}
.form-birthday-picker select option:checked, .form-select option:checked {
background-color: #2e86fe
}
.form-birthday-picker select.invalid, .form-group.invalid .form-birthday-picker select, .form-group.invalid .form-select, .form-select.invalid {
border-color: var(--outline-alert)
}
.form-birthday-picker select.invalid:focus, .form-group.invalid .form-birthday-picker select:focus, .form-group.invalid .form-select:focus, .form-select.invalid:focus {
box-shadow: 0 0 0 .25rem rgba(217, 62, 62, .25)
}
.form-birthday-picker select.valid, .form-group.valid .form-birthday-picker select, .form-group.valid .form-select, .form-select.valid {
border-color: var(--outline-success)
}
.form-birthday-picker select.valid:focus, .form-group.valid .form-birthday-picker select:focus, .form-group.valid .form-select:focus, .form-select.valid:focus {
box-shadow: 0 0 0 .25rem rgba(19, 132, 78, .25)
}
.form-check {
display: block;
font-size: 16px;
margin-bottom: .125rem;
min-height: 1.5rem;
padding-inline-start: 1.5em
}
@media only screen and (min-width: 56.063em) {
.form-check {
padding-inline-start: 1.75em
}
}
.form-check-inline {
display: inline-block;
margin-inline-end: 1.5rem;
margin-bottom: 0
}
.form-check-input {
appearance: none;
background-color: var(--surface-main);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid var(--outline-medium);
cursor: pointer;
font-size: inherit;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
transition: .2s ease-in-out;
vertical-align: top
}
.form-check-input[type] {
height: 1em;
margin: .125em 0 0;
width: 1em
}
@media only screen and (min-width: 56.063em) {
.form-check-input[type] {
height: 1.25em;
margin-top: .0625rem;
width: 1.25em
}
}
.form-check-input[type=checkbox] {
border-radius: .25em
}
.form-check-input[type=radio] {
border-radius: 50%
}
.form-check-input:checked {
background-color: var(--surface-input-active);
border: none
}
.form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E")
}
.form-check-input:checked[type=radio] {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")
}
.form-check-input:disabled, .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled], .form-check-input[disabled] ~ .form-check-label {
cursor: default;
opacity: .5
}
.form-check .form-check-input[type] {
float: inline-start;
margin-inline-start: -1.5em
}
@media only screen and (min-width: 56.063em) {
.form-check .form-check-input[type] {
margin-inline-start: -1.75em
}
}
.form-check-label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
padding-top: .125rem;
vertical-align: top
}
.form-check-label .label-title {
color: var(--on-surface-primary-medium);
display: block;
font-weight: 600
}
.form-check-label .label-description {
color: var(--on-surface-light);
display: block;
font-size: .875rem
}
.form-check.light-theme {
color: var(--on-surface-medium)
}
.form-switch .form-check-input {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3E%3C/svg%3E");
background-position: var(--ltr, left) var(--rtl, right) center;
border-radius: 3em;
height: 1.375em;
transition: background-position .15s ease-in-out;
width: 2.5em
}
@media only screen and (min-width: 56.063em) {
.form-switch .form-check-input {
height: 1.6875em;
width: 3em
}
}
.form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='27' height='27' x='1.5' y='2.5' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_1157_9249'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_1157_9249' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
background-position: var(--ltr, right) var(--rtl, left) center
}
.form-switch.form-check {
margin-bottom: .25rem;
padding-inline-start: 3em
}
.form-switch.form-check .form-check-input {
margin-inline-start: -3em
}
.form-switch.form-check .form-check-label {
margin-top: .1875em
}
@media only screen and (min-width: 56.063em) {
.form-switch.form-check {
padding-inline-start: 3.75em
}
.form-switch.form-check .form-check-input {
margin-inline-start: -3.75em
}
}
.form-switch.reverse {
display: flex;
flex-direction: row-reverse;
gap: 1rem;
justify-content: space-between;
padding: 0
}
.form-switch.reverse .form-check-input {
flex: 0 0 auto;
margin-inline-start: 0
}
.input-group {
align-items: stretch;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%
}
.input-group.form-date-picker > input[type=text], .input-group > .form-control, .input-group > .form-select {
flex: 1 1 auto;
min-width: 0;
position: relative;
width: 1%
}
.input-group > .form-control:focus, .input-group > .form-select:focus {
z-index: 3
}
.input-group .autocomplete-btn, .input-group .btn, .input-group.form-date-picker .ui-datepicker-trigger {
position: relative;
z-index: 2
}
.input-group .autocomplete-btn:focus, .input-group .btn:focus, .input-group.form-date-picker .ui-datepicker-trigger:focus {
z-index: 3
}
.input-group-text {
align-items: center;
background-color: var(--surface-disabled-light);
border: 1px solid var(--outline-light);
border-radius: .25rem;
display: flex;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: .375rem .75rem;
text-align: center;
white-space: nowrap
}
.input-group.has-validation:not(.date-picker) .autocomplete-btn:first-child, .input-group.has-validation:not(.date-picker) > .dropdown-toggle:nth-last-child(n+4), .input-group.has-validation:not(.date-picker) > :nth-last-child(n+3):not(.dropdown-toggle,.dropdown-menu,.autocomplete-btn), .input-group:not(.has-validation,.date-picker) .autocomplete-btn:first-child, .input-group:not(.has-validation,.date-picker) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation,.date-picker) > :not(:last-child,.dropdown-toggle,.dropdown-menu,.autocomplete-btn) {
border-end-end-radius: 0;
border-start-end-radius: 0
}
.input-group:not(.date-picker) > :where(:not(:first-child,.dropdown-menu,.valid-tooltip,.valid-feedback,.invalid-tooltip,.invalid-feedback)) {
border-end-start-radius: 0;
border-start-start-radius: 0;
margin-inline-start: -1px
}
.input-group:not(.date-picker) > input[type=tel] {
border-radius: var(--ltr, 0 .25rem .25rem 0) var(--rtl, .25rem 0 0 .25rem);
margin-inline: var(--ltr, -1px 0) var(--rtl, 0 -1px)
}
.input-group .autocomplete-btn, .input-group .ui-datepicker-trigger {
background-color: transparent;
border-color: var(--outline-light);
border-radius: .25rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
min-width: 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.input-group .autocomplete-btn:hover, .input-group .ui-datepicker-trigger:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.input-group .autocomplete-btn.active, .input-group .autocomplete-btn:active, .input-group .ui-datepicker-trigger.active, .input-group .ui-datepicker-trigger:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.input-group .autocomplete-btn:disabled, .input-group .ui-datepicker-trigger:disabled {
opacity: .4;
pointer-events: none
}
.input-group .autocomplete-btn:not(:first-child) {
border-end-start-radius: 0;
border-start-start-radius: 0
}
.input-group.date-picker {
flex-direction: var(--ltr, row) var(--rtl, row-reverse)
}
.input-group.date-picker input[type=text] {
border-radius: .25rem;
border-end-end-radius: 0;
border-start-end-radius: 0
}
.input-group.date-picker input[type=text]:read-only {
background-color: var(--surface-main);
color: var(--on-surface-medium)
}
.input-group.date-picker > .ui-datepicker-trigger {
border-radius: .25rem;
border-end-start-radius: 0;
border-inline-start: none;
border-start-start-radius: 0
}
.custom-select {
position: relative;
width: 100%
}
.custom-select button.custom-select-toggle {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 35'%3E%3Cpath d='M15.1 13.8 21 21l5.8-7.2z'/%3E%3C/svg%3E") var(--ltr, 100%) var(--rtl, 0) center/30px no-repeat;
border: 1px solid var(--outline-light);
border-radius: .25rem;
color: var(--on-surface-regular);
font-size: 1rem;
margin: 0;
min-height: 40px;
padding: .5rem .75rem;
padding-inline-end: 1.875em;
position: relative;
text-align: start;
transition: none;
width: 100%
}
.custom-select button.custom-select-toggle .select-option {
padding: 0
}
@media only screen and (min-width: 56.063em) {
.custom-select button.custom-select-toggle .select-option {
font-size: 1rem
}
}
.custom-select button.custom-select-toggle .select-option-icon {
font-size: .875rem
}
.custom-select .select-list {
background-color: var(--surface-main);
border-color: var(--outline-medium);
border-style: solid;
border-width: 1px 2px 2px;
display: block;
left: 0;
list-style-type: none;
margin: 0;
max-height: 9.5rem;
overflow-x: hidden;
overflow-y: auto;
padding: .3125rem 0;
position: absolute;
top: 100%;
width: 100%
}
.custom-select .select-list li {
padding: 0
}
.custom-select .select-list li a {
color: var(--on-surface-primary);
display: block
}
.custom-select .select-list li a:hover {
background-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.custom-select .select-list li a:hover .select-option-icon {
color: inherit
}
.custom-select.expanded .custom-select-toggle, .custom-select.expanded .select-list {
z-index: 5005
}
.custom-select.expanded .custom-select-toggle {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.custom-select .custom-select-overlay {
background-color: transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5004
}
.custom-select .select-option {
align-items: center;
display: flex;
font-size: .875rem;
justify-content: flex-start;
padding: .3125rem .625rem
}
.custom-select .select-option.disabled .select-option-text {
opacity: .4
}
.custom-select .select-option-text {
flex: 1 1 100%
}
.custom-select .select-option-icon {
flex: 0 0 auto;
margin-inline-end: .25rem;
margin-inline-start: .625rem
}
.custom-select .select-option-icon:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block
}
.custom-select .select-option-icon.pending {
color: var(--on-surface-warning)
}
.custom-select .select-option-icon.pending:before {
content: "\e931"
}
.validation-center .form fieldset {
padding: 0
}
input:invalid {
box-shadow: none;
outline: 0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
appearance: none;
margin: 0
}
input[type=number] {
-moz-appearance: textfield
}
.form-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: .625rem
}
.form-actions .limit-button {
max-width: 60%
}
.form-actions div a {
display: inline-block;
padding: .625rem
}
.form .actions div {
align-items: center;
display: flex;
justify-content: space-between
}
.alert-box, .notification {
background-color: var(--surface-container-primary-medium-fixed);
display: flex;
justify-content: space-between;
margin-bottom: 1.25rem;
max-width: calc(100vw - 70px);
padding: .5rem .5rem .75rem
}
.alert-box, .alert-box a, .notification, .notification a {
color: var(--on-primary-regular)
}
.alert-box.success, .success.notification {
background-color: var(--surface-success);
color: var(--on-primary-regular-invert) !important
}
.alert-box.alert, .alert.notification {
background-color: var(--surface-alert)
}
.alert-box.info, .info.notification {
background-color: var(--surface-container-primary-medium-fixed)
}
.alert-box.notice, .notice.notification {
background-color: var(--surface-container-dim-dark)
}
.alert-box.warning, .warning.notification {
background-color: var(--surface-warning)
}
.alert-box.rebate, .rebate.notification {
background-color: var(--surface-main);
border: 2px solid var(--outline-primary);
color: var(--on-surface-primary)
}
.alert-box.title, .title.notification {
background-color: var(--surface-container-primary-medium)
}
.form .alert-box.alert, .form .alert.notification {
margin: .625rem
}
@media only screen and (min-width: 56.063em) {
.skeleton-verification-code {
padding: .875rem .625rem
}
}
.skeleton-verification-code > .skeleton-box:first-child {
height: 1.5rem;
margin-block-end: .3125rem;
width: 90%
}
@media only screen and (min-width: 56.063em) {
.skeleton-verification-code > .skeleton-box:first-child {
width: 33%
}
}
.skeleton-verification-code div .skeleton-box {
margin-inline-end: 1rem
}
.skeleton-verification-code div .skeleton-box:first-child {
height: 2.5rem;
width: 50%
}
@media only screen and (min-width: 56.063em) {
.skeleton-verification-code div .skeleton-box:first-child {
width: 45%
}
}
.skeleton-verification-code div .skeleton-box:nth-child(2) {
height: 2.5rem;
width: 33%
}
@media only screen and (min-width: 56.063em) {
.skeleton-verification-code div .skeleton-box:nth-child(2) {
width: 15%
}
}
.form-stepper {
display: flex;
gap: .25rem
}
.form-stepper > div {
flex: 1 1 100%
}
.form-stepper button {
align-items: center;
background-color: transparent;
border: 1px solid #ced4da;
border-radius: var(--radius-sm);
color: var(--on-surface-regular);
display: inline-flex;
flex: 0 0 2.5rem;
font-size: 1.25rem;
justify-content: center;
min-width: 2.5rem;
padding: 0;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.form-stepper button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.form-stepper button.active, .form-stepper button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.form-stepper button:disabled {
opacity: .4;
pointer-events: none
}
.form-stepper button:before {
width: 100%
}
.form-stepper .form-control {
direction: ltr;
display: flex;
flex-direction: var(--ltr, row) var(--rtl, row-reverse);
justify-content: start;
min-width: 0;
padding: 0;
position: relative
}
.form-stepper .form-control:has(input:disabled) {
background-color: var(--surface-disabled-light)
}
.form-stepper .form-control:has(input:focus) {
background-color: var(--surface-main);
border-color: var(--outline-focus);
box-shadow: 0 0 0 .25rem rgba(12, 39, 128, .25);
color: #212529;
outline: 0
}
.form-stepper .form-control:has(input:focus) input {
color: inherit
}
.form-group.invalid .form-stepper .form-control:has(input:focus) {
box-shadow: 0 0 0 .25rem rgba(217, 62, 62, .25)
}
.form-group.valid .form-stepper .form-control:has(input:focus) {
box-shadow: 0 0 0 .25rem rgba(19, 132, 78, .25)
}
.form-stepper .form-control input {
border: 0;
border-radius: .25rem;
line-height: inherit;
padding: .375rem .75rem;
position: relative;
text-align: var(--ltr, start) var(--rtl, end);
z-index: 1
}
.form-stepper .form-control .currency-sign {
color: transparent;
line-height: inherit;
padding-block: .375rem;
text-align: var(--ltr, start) var(--rtl, end)
}
.form-stepper .form-control .currency-sign:after, .form-stepper .form-control .currency-sign:before {
color: var(--on-surface-medium);
content: attr(data-sign);
font-size: 1rem
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=start], html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=end] {
flex: 0 0 auto;
font-size: 0;
padding-inline: var(--ltr, .75rem 0) var(--rtl, 0 .75rem)
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=start][data-sign-spacer], html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=end][data-sign-spacer] {
padding-inline: var(--ltr, .75rem .25rem) var(--rtl, .25rem .75rem)
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=start]:after, html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=end]:after {
display: none
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=start] + input, html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=end] + input {
padding-inline: var(--ltr, 0 .75rem) var(--rtl, .75rem 0)
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=end], html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=start] {
display: flex;
flex-direction: var(--ltr, row) var(--rtl, row-reverse);
height: 100%;
left: 0;
padding-inline: .75rem;
position: absolute;
top: 0;
width: 100%;
z-index: 0
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=end]:before, html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=start]:before {
display: none
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=end][data-sign-spacer], html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=start][data-sign-spacer] {
gap: .25rem
}
html[dir=ltr] .form-stepper .form-control .currency-sign[data-sign-align=end] + input, html[dir=rtl] .form-stepper .form-control .currency-sign[data-sign-align=start] + input {
background: transparent
}
.rich-label-wrapper ol.rich-label-generic, .rich-label-wrapper ul.rich-label-generic {
list-style-type: none;
margin: 0;
padding: 0
}
.rich-label-wrapper ul.rich-label-generic li {
padding-bottom: .5em
}
.rich-label-wrapper ul.rich-label-generic li:only-child {
padding-bottom: 0
}
.rich-label-wrapper ol.rich-label-generic {
display: flex;
flex-wrap: wrap
}
.rich-label-wrapper ol.rich-label-generic li {
flex: 1 1 100%
}
.rich-label-wrapper ol.rich-label-generic li a:only-child {
align-items: center;
border-bottom: 1px solid var(--outline-light);
display: flex;
padding: .75em .5rem;
position: relative
}
.rich-label-wrapper ol.rich-label-generic li a:only-child:before {
content: "\e9a5";
flex: 0 0 auto;
font-feature-settings: normal;
font-variant: normal;
margin-inline-end: 1rem;
-webkit-font-smoothing: antialiased;
font-size: 1.375rem
}
.rich-label-wrapper ol.rich-label-generic li a:only-child:after, .rich-label-wrapper ol.rich-label-generic li a:only-child:before {
font-family: icoplus !important;
speak: none;
font-style: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-moz-osx-font-smoothing: grayscale
}
.rich-label-wrapper ol.rich-label-generic li a:only-child:after {
content: var(--ltr, "\e99b") var(--rtl, "\e99a");
flex: 0 0 1.5rem;
font-feature-settings: normal;
font-variant: normal;
margin-inline-start: auto;
padding-inline-start: .5rem;
-webkit-font-smoothing: antialiased;
color: var(--on-surface-primary-extra-light)
}
.rich-label-wrapper ol.rich-label-generic li a:only-child:hover:after {
color: inherit
}
.rich-label-wrapper ol.rich-label-generic li:first-child a:only-child {
border-top: 1px solid var(--outline-light)
}
.rich-label-wrapper ol.rich-label-generic li span + span:empty {
padding-inline-start: 0
}
.rich-label-wrapper dl.rich-label-generic {
align-items: baseline;
display: flex;
flex: 0 1 100%;
margin: 0
}
@media only screen and (min-width: 56.063em) {
.rich-label-wrapper dl.rich-label-generic {
flex: 1 1 100%
}
}
.rich-label-wrapper dl.rich-label-generic dt {
flex: 0 0 40%;
font-style: italic
}
@media only screen and (min-width: 56.063em) {
.rich-label-wrapper dl.rich-label-generic dt {
flex: 0 0 33%
}
}
.rich-label-wrapper dl.rich-label-generic dd {
color: currentColor;
font-size: .875em;
margin: 0 .75em;
opacity: .85
}
.rich-label-wrapper dl.rich-label-generic dd:nth-child(n+3), .rich-label-wrapper dl.rich-label-generic dt:nth-child(n+3) {
display: none
}
.rich-label-wrapper .rich-label-generic h5 {
font-size: 1rem;
margin: 0 0 .5em
}
.rich-label-wrapper .rich-label-generic h5 + p ~ p {
display: none
}
.rich-label-wrapper .rich-label-generic p {
margin: .5em 0
}
.rich-label-wrapper .rich-label-generic > span + span {
padding-inline-start: .5ch
}
.rich-label-wrapper .rich-label-generic .color-alert {
color: var(--on-surface-alert)
}
.rich-label-wrapper .rich-label-generic .color-success {
color: var(--on-surface-success)
}
.rich-label-wrapper .rich-label-generic .color-warning {
color: var(--on-surface-warning)
}
.rich-label-wrapper .rich-label-generic .color-secondary {
color: var(--on-surface-medium)
}
.rich-label-wrapper .rich-label-generic .color-brand {
color: var(--on-surface-primary)
}
.rich-label-wrapper .rich-label-generic .small {
font-size: .875rem
}
.rich-label-wrapper .rich-label-generic .medium {
font-size: 1.125rem
}
.rich-label-wrapper .rich-label-generic .big {
font-size: 1.5rem
}
.rich-label-wrapper .rich-label-generic.align-center {
text-align: center
}
.rich-label-wrapper .rich-label-generic.align-start {
text-align: start
}
.rich-label-wrapper .rich-label-generic.align-end {
text-align: end
}
.rich-label-wrapper .rich-label-generic .rich-label-prefix {
display: flex;
gap: 1rem
}
.rich-label-wrapper .rich-label-generic .rich-label-prefix:before {
color: currentColor;
flex: 0 0 1em;
font-size: 1rem;
text-align: start
}
.rich-label-wrapper .rich-label-generic .rich-label-prefix.bullet:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%232e86fe'/%3E%3C/svg%3E") no-repeat var(--ltr, .25rem .3125rem) var(--rtl, right .25rem top .3125rem)/.5rem .5rem;
content: "";
height: 1rem
}
.server-img {
text-align: center
}
.server-img.smalllogo {
height: var(--server-img-size-smalllogo)
}
.server-img.mediumlogo {
height: var(--server-img-size-mediumlogo)
}
.server-img.largelogo {
height: var(--server-img-size-largelogo)
}
.server-img.smallicon {
height: var(--server-img-size-smallicon)
}
.server-img.mediumicon {
height: var(--server-img-size-mediumicon)
}
.server-img.largeicon {
height: var(--server-img-size-largeicon)
}
.server-img.smallillustration {
height: var(--server-img-size-smallillustration)
}
.server-img.mediumillustration {
height: var(--server-img-size-mediumillustration)
}
.server-img.largeillustration {
height: var(--server-img-size-largeillustration)
}
.server-img img {
height: 100%;
object-fit: contain;
object-position: center;
width: 100%
}
.server-img .fallback-img {
background: var(--img-center-fallback) no-repeat center/contain;
height: 6.25rem;
margin: 0 auto;
width: 6.25rem
}
@media only screen and (max-width: 35em) {
.server-img.animated {
margin-inline: -1.5rem
}
}
.cookie-policy-header {
border-bottom: 1px solid var(--outline-light);
margin-bottom: 1rem;
padding-bottom: 1rem
}
.cookie-policy-title {
font-size: 1.5rem;
margin-bottom: .6em;
margin-top: 0
}
@media only screen and (min-width: 56.063em) {
.cookie-policy-title {
padding: 0 .5em
}
}
.cookie-policy-content {
border-bottom: 0;
margin-bottom: 2em;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.cookie-policy-content {
padding: .3125em .625em
}
}
.cookie-policy-content h3 p, .cookie-policy-content h4 p, .cookie-policy-content h5 p {
margin: 0
}
.cookie-policy-content h4 {
font-size: 1.125em;
margin-bottom: 1em;
margin-top: 0
}
.cookie-policy-content h5 {
color: var(--on-surface-primary-medium);
font-size: 1rem;
font-weight: 700;
margin: 0;
padding-bottom: .5em;
padding-top: .625em
}
@media only screen and (max-width: 56em) {
.cookie-policy-content .truncate {
direction: ltr;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap
}
}
.cookie-policy-table-title {
margin-bottom: 1em;
margin-top: 1.5em;
text-align: center
}
.cookie-policy-table th {
color: var(--on-surface-primary-medium);
font-weight: 700
}
.cookie-policy-table td, .cookie-policy-table th {
border-bottom: 1px solid var(--outline-light);
padding: .625em;
text-align: center
}
.cookie-policy-table p {
margin: 0
}
@media only screen and (max-width: 56em) {
.cookie-policy-table, .cookie-policy-table tbody, .cookie-policy-table td, .cookie-policy-table tr {
display: block
}
.cookie-policy-table tr {
border: solid var(--outline-light);
border-width: 1px 1px 0;
margin-bottom: 2em
}
.cookie-policy-table tr:last-child {
margin-bottom: 1em
}
.cookie-policy-table .hide-for-small-only {
display: none
}
.cookie-policy-table .show-for-small-only {
color: var(--on-surface-primary-medium);
display: block;
font-weight: 700;
padding-bottom: .625em
}
}
@media only screen and (min-width: 56.063em) {
.cookie-policy-table {
border: solid var(--outline-light);
border-width: 1px 1px 0
}
.cookie-policy-table .show-for-small-only {
display: none
}
.cookie-policy-table td {
width: 17%
}
.cookie-policy-table td:last-child {
text-align: start;
width: 49%
}
}
.cookie-policy-setting-button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
font-size: 1rem;
font-weight: 600;
margin-bottom: 1em;
min-height: 0;
padding: .3125em 0;
text-align: start;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.cookie-policy-setting-button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.cookie-policy-setting-button.active, .cookie-policy-setting-button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.cookie-policy-setting-button:disabled {
opacity: .4;
pointer-events: none
}
.cookie-policy-setting-button:before {
display: inline-block;
margin-inline-end: .5em;
transform: translateY(1px)
}
.cookie-policy-setting-button.active:before {
transform: rotate(90deg) translate(2px, 2px)
}
.cookie-policy-label-description {
margin-bottom: 2em;
padding-inline-start: 2em
}
.cookie-policy-action {
margin-top: 1em;
padding: .625em
}
.cookie-policy-save-button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
padding: .25em 1em;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.cookie-policy-save-button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.cookie-policy-save-button.active, .cookie-policy-save-button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.cookie-policy-save-button:disabled {
opacity: .4;
pointer-events: none
}
.rtl .cookie-policy-setting-button.active:before {
transform: rotate(-90deg) translate(-2px)
}
.cookie-policy-dialog .cookie-policy-content:last-child {
margin-bottom: 0
}
.demo-real-page .cookie-policy-dialog .cookie-policy-content {
color: var(--on-surface-regular)
}
.two-factor {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
padding: 1rem 1rem 0
}
@media only screen and (min-width: 56.063em) {
.two-factor {
padding: 2rem 1rem 0
}
}
.two-factor.full-height {
height: 100%
}
.two-factor .close-btn {
font-size: 1.5rem;
margin-inline-start: auto
}
@media only screen and (min-width: 56.063em) {
.two-factor .close-btn {
margin-bottom: 2rem
}
}
.two-factor-container {
flex: 1 1 100%;
text-align: center
}
.two-factor-container .header {
margin: 0 auto;
max-width: 30rem
}
.two-factor-container .image {
background: var(--img-setup-2fa) center/contain no-repeat;
height: 6.5rem;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.two-factor-container .image {
height: 8.125rem;
margin-bottom: 1.25rem
}
}
.two-factor-container h2 {
font-size: 1.25rem;
margin-bottom: .7em
}
.two-factor-container .description {
color: var(--on-surface-light);
margin-bottom: 2.5em
}
@media only screen and (min-width: 56.063em) {
.two-factor-container .description {
margin-bottom: 3.75em
}
}
.two-factor-container .code-description {
color: var(--on-surface-regular);
margin-bottom: .375em
}
.two-factor-container .code-description strong {
display: inline-block;
font-weight: 700
}
.two-factor-container fieldset {
padding: 0
}
@media only screen and (min-width: 56.063em) {
.two-factor-container:after {
content: "";
flex: 0 1 13vh;
max-height: 7rem
}
}
.two-factor-container .nav-links-list {
margin: 2.5rem auto 0;
max-width: 22.5rem
}
@media only screen and (min-width: 56.063em) {
.two-factor-container .nav-links-list {
margin-top: 3.75rem
}
}
.two-factor-container .nav-links-list button {
font-weight: 700
}
.two-factor-container .shadow-element {
display: block;
height: 4rem
}
@media only screen and (min-width: 56.063em) {
.two-factor-container .shadow-element {
background-color: var(--surface-main);
bottom: 3.7rem;
box-shadow: 0 -.5rem .5rem 0 var(--shadow-container);
height: .5rem;
margin: 6.5rem -1rem -1.5rem;
position: sticky
}
}
.two-factor-container .bottom-action {
align-items: center;
background-color: var(--surface-main);
bottom: 0;
box-shadow: 0 -.5rem .5rem 0 rgba(0, 0, 0, .1);
display: flex;
justify-content: center;
margin: 0 -1rem;
padding: .625rem;
position: sticky
}
@media only screen and (min-width: 56.063em) {
.two-factor-container .bottom-action {
box-shadow: none;
margin-top: 0
}
}
.two-factor-container .bottom-action button {
border-radius: .375rem;
flex: 0 1 18.75rem;
font-size: 1.125rem;
padding: .75rem
}
@media only screen and (max-width: 56em) {
.two-factor-container, .two-factor-container .form, .two-factor-container fieldset {
display: flex;
flex-direction: column
}
.two-factor-container .form {
flex: 1 1 100%
}
.two-factor-container fieldset {
flex: 0 0 100%
}
.two-factor-container .bottom-action, .two-factor-container .header, .two-factor-container .nav-links-list, .two-factor-container .two-factor-field-container {
flex: 0 0 auto
}
.two-factor-container .nav-links-list {
margin-bottom: auto
}
.two-factor-container .two-factor-field-container {
align-self: center
}
.two-factor-container .shadow-element {
flex: 0 0 4rem
}
}
.two-factor-field-container {
--input-spacing: 1ch;
--val-length: 0;
background-color: var(--surface-container-main);
border-radius: .25rem;
direction: ltr;
display: inline-block;
font-size: 1.75rem;
margin: .75rem auto;
overflow: hidden;
position: relative
}
.two-factor-field-container:before {
background-clip: border-box, border-box, content-box;
background-image: linear-gradient(to right, var(--surface-container-main), var(--surface-container-main)), linear-gradient(to right, var(--surface-main), var(--surface-main)), linear-gradient(to right, transparent .1ch, var(--outline-light) .1ch, var(--outline-light) .9ch, transparent .9ch);
background-position: 1.75ch, 1.75ch, 0;
background-repeat: no-repeat, no-repeat, repeat-x;
background-size: calc(var(--val-length) * 1ch + var(--val-length) * 1ch) 100%, calc(var(--val-length) * 1ch + var(--val-length) * 1ch) 100%, 2ch 3px;
content: "";
height: 100%;
left: 0;
padding: .75rem 1ch;
position: absolute;
top: 0;
width: 100%
}
.two-factor-field-container input.field {
background: transparent;
border: 1px solid transparent;
box-shadow: 0 2px 4px 0 var(--shadow-container) inset;
color: var(--on-surface-regular);
font-feature-settings: "tnum";
font-size: inherit;
font-variant-numeric: tabular-nums;
letter-spacing: 1ch;
padding: .75rem 1ch;
position: relative;
text-indent: 1ch;
width: calc(3.1ch + var(--field-length, 3) * 1ch + var(--field-length, 3) * 1ch)
}
.window-dialog .dialog-body .two-factor {
height: 100%;
overflow: visible;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.window-dialog .dialog-body .two-factor .shadow-element {
bottom: 1.7rem;
margin: 8.5rem -2.25rem -1.5rem
}
}
.window-dialog .dialog-body .two-factor .bottom-action {
bottom: -.625rem;
margin: 0 -.625rem -.625rem
}
@media only screen and (min-width: 56.063em) {
.window-dialog .dialog-body .two-factor .bottom-action {
bottom: -2rem;
margin: 0 -2.25rem -2rem
}
}
.nav-links-list {
--nav-links-list-link-divider: #e6e6e6;
--badge-border: var(--surface-row-inner-row);
background-color: var(--surface-row-inner-row);
border-radius: .5rem;
list-style: none;
margin: 1rem 0 0;
overflow: hidden;
padding: 0;
text-align: start
}
.dark-mode .nav-links-list {
--nav-links-list-link-divider: #465666
}
.nav-links-list li {
display: flex;
flex-wrap: wrap
}
.nav-links-list li:not(:last-child):after {
background-color: var(--nav-links-list-link-divider);
content: "";
flex: 0 1 100%;
height: 1px;
margin: 0 1rem
}
.nav-links-list a {
align-content: center;
align-items: center;
color: var(--on-surface-link);
display: grid;
flex: 0 0 100%;
font-weight: 700;
grid-template:"icon label arrow" auto "icon desc arrow" minmax(0, min-content)/min-content 1fr min-content;
min-height: 4rem;
padding: .5rem 1rem;
position: relative;
transition: .3s ease-in-out
}
.nav-links-list a:after, .nav-links-list a:before {
font-size: 1.5rem
}
.nav-links-list a:before {
grid-area: icon;
margin-inline-end: 1rem
}
@media only screen and (min-width: 56.063em) {
.nav-links-list a:before {
margin-inline-end: 2rem
}
}
.nav-links-list a:after {
font-family: icoplus !important;
grid-area: arrow;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--on-surface-disabled);
content: var(--ltr, "\e99b") var(--rtl, "\e99a");
margin-inline-start: .5rem;
transition: .3s ease-in-out
}
.nav-links-list a .item-badge {
background-color: var(--on-surface-alert);
border: .125rem solid var(--badge-border);
border-radius: .375rem;
display: none;
height: .75rem;
inset-inline-start: var(--ltr, 2rem) var(--rtl, .75rem);
margin-top: -.875rem;
padding: 0;
position: absolute;
top: 50%;
transition: .3s ease-in-out;
width: .75rem
}
.nav-links-list a strong {
font-weight: inherit;
grid-area: label
}
.nav-links-list a span {
color: var(--on-surface-light);
font-size: .875rem;
font-weight: 400;
grid-area: desc
}
.nav-links-list a.no-icon:before {
display: none
}
@media only screen and (hover: hover)and (pointer: fine) {
.nav-links-list a:hover {
background-color: var(--surface-row-inner-row-selected);
--badge-border: var(--surface-row-inner-row-selected)
}
}
.form .nav-links-list {
display: block
}
.form .nav-links-list li {
padding: 0
}
.service-unavailable-message {
display: flex;
flex-direction: column;
gap: 2rem
}
.service-unavailable-message-dialog {
z-index: 99999
}
.service-unavailable-message .title-section {
margin-block-start: 1rem
}
.service-unavailable-message .content-section {
align-items: center;
background-color: var(--surface-popup-container);
border-radius: .5rem;
display: flex;
flex-direction: column;
padding: 1.5rem 1rem
}
.service-unavailable-message .content-section .rich-label-generic:has(a[href^=tel]) {
padding-block: 1rem
}
.service-unavailable-message .content-section .rich-label-generic a[href^=tel] {
color: var(--on-surface-regular)
}
.service-unavailable-message .content-section .rich-label-generic .rich-label-prefix {
gap: .5rem
}
.service-unavailable-message .content-section .rich-label-generic .rich-label-prefix:before {
color: var(--on-surface-light);
display: inline;
font-size: 1.5rem
}
.service-unavailable-message .action {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center
}
.service-unavailable-message .action button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: .5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-primary);
flex: 1 1 40%;
font-size: .875rem;
font-weight: 700;
max-width: 19rem;
min-height: 2.5rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.service-unavailable-message .action button:hover {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
}
.service-unavailable-message .action button.active, .service-unavailable-message .action button:active {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
.service-unavailable-message .action button:disabled {
opacity: .4;
pointer-events: none
}
.change-server-custom {
margin-top: .5rem
}
.change-server-container {
text-align: center
}
.change-server-container trustProequity-button {
margin-top: var(--ds-spacing-medium);
width: 100%
}
:root {
--surface-row-inner-row-focused: #f3f4f9;
--sticky-contact-height: 2.75rem
}
body, html {
height: 100%
}
body {
background-color: var(--surface-main);
overflow: hidden;
position: relative
}
#splash {
flex: 1 1 100%
}
.wrap-login {
min-height: 0
}
.wrap-login .container {
position: static;
width: 100%
}
.wrap-login .main {
min-height: 0
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.wrap-login footer {
display: none
}
}
@media only screen and (min-width: 56.063em) {
.wrap-login footer {
border: 0;
display: block
}
}
header {
background-color: var(--surface-main);
border-bottom: 1px solid var(--outline-light);
flex: 0 0 auto;
height: auto !important;
max-height: 100% !important;
min-height: 0 !important
}
@media only screen and (min-width: 56.063em) {
header {
border-bottom: none
}
}
.header-login {
flex-wrap: wrap;
height: auto !important;
width: 100%
}
.header-login .login-logo {
align-items: center;
direction: ltr;
display: flex;
flex: 0 0 auto;
min-width: 0
}
@media only screen and (min-width: 56.063em) {
.header-login .login-logo {
align-items: flex-end;
flex: 0 1 auto;
flex-direction: column
}
}
.header-login .login-logo svg {
height: auto;
width: 8.5rem
}
@media only screen and (min-width: 56.063em) {
.header-login .login-logo svg {
width: 15rem
}
}
.header-login .login-logo svg path, .header-login .login-logo svg polygon {
fill: var(--on-surface-primary)
}
.header-login .login-logo a {
background-image: none;
direction: ltr;
display: block;
height: auto;
margin-top: 0;
padding: 0
}
.header-login .login-logo a:before {
display: none
}
.header-login .login-logo .product-name {
background-color: var(--surface-container-primary);
border-radius: .25rem .25rem .25rem 0;
color: var(--on-primary-regular);
cursor: default;
display: block;
font-size: .8125rem;
line-height: 1;
margin: 0 0 -.375rem;
min-width: 3rem;
padding: .375rem;
text-align: center;
text-transform: uppercase
}
@media only screen and (min-width: 56.063em) {
.header-login .login-logo .product-name {
border-radius: .5rem .5rem .5rem 0;
font-size: 1.125rem;
margin: 0 1rem;
min-width: 5rem
}
}
.header-login .login-logo .product-name:hover {
background-color: var(--surface-container-primary)
}
#broker .header-login .login-logo .product-name, #broker .header-login .login-logo .product-name:hover {
background-color: var(--surface-invest-brand)
}
#futures .header-login .login-logo .product-name, #futures .header-login .login-logo .product-name:hover {
background-color: var(--surface-container-primary)
}
.header-login .login-logo .product-name strong {
font-weight: 700
}
.header-login .login-logo .product-desc {
color: var(--on-surface-primary);
line-height: 2rem;
margin-bottom: -2rem;
padding-top: 1rem
}
.cosmos-logo .header-login .login-logo {
display: block
}
.cosmos-logo .header-login .login-logo .product-name, .cosmos-logo .header-login .login-logo svg {
display: none
}
@media only screen and (min-width: 73.063em) {
.cosmos-logo .header-login .login-logo {
display: flex
}
}
@media only screen and (min-width: 56.063em) {
.header-login-webview {
padding: 0 1rem
}
.header-login-webview .login-logo {
align-items: center;
flex: 0 0 auto;
flex-direction: row
}
}
.header-login-webview .login-logo a {
background-image: none;
direction: ltr;
display: block;
height: auto;
margin-top: 0;
padding: 0;
width: 8.5rem
}
.header-login-webview .login-logo svg {
height: 34px;
width: auto
}
@media only screen and (min-width: 56.063em)and (max-height: 35em) {
.header-login-webview .login-logo svg {
height: 29px;
width: 100%
}
}
@media only screen and (min-width: 56.063em) {
.header-login-webview .login-logo span {
border-radius: .25rem .25rem .25rem 0;
font-size: .8125rem;
margin: 0 0 -.375rem;
min-width: 3rem
}
}
.header-login-webview .header-login-wrapper {
justify-content: center
}
.header-login-webview .header-login-wrapper:before {
display: none
}
@media only screen and (min-width: 56.063em) {
.header-login .language-wrapper {
flex: 0 0 9.5rem
}
}
.header-login .language-login {
appearance: none;
border: none;
border-radius: .5rem;
cursor: pointer;
outline: 1px solid var(--outline-medium);
padding: .375rem .75rem;
padding-inline-end: 1.5rem
}
.header-login .language-login:focus, .header-login .language-login:hover {
outline: 1px solid var(--outline-main)
}
.header-login .side-logo {
display: none
}
.header-login-wrapper {
align-items: center;
display: flex;
justify-content: space-between;
padding: .5rem 1.5rem;
width: 100%
}
@media only screen and (max-width: 56em) {
.header-login-wrapper {
gap: 1rem
}
}
.cosmos-logo .header-login-wrapper {
padding-top: 1.5rem
}
@media only screen and (min-width: 56.063em) {
.header-login-wrapper:before {
content: "";
display: block;
flex: 0 0 9.5rem
}
}
.header-login-wrapper[data-lang-select=false] {
justify-content: center
}
.header-login-wrapper[data-lang-select=false]:before {
display: none
}
.login .form-actions, .login-heading, .login-heading h2, .login-section {
display: flex;
flex-direction: column
}
@media only screen and (min-width: 56.063em) {
.login .form-actions, .login-heading, .login-heading h2, .login-section {
flex-direction: row
}
}
.login .form-actions > div, .login-heading h2 > div, .login-heading > div, .login-section > div {
padding: 0 .9735rem
}
@media only screen and (min-width: 35.063em) {
.form-box {
border: 1px solid var(--outline-light);
box-shadow: 0 20px 15px -5px var(--shadow-container);
padding: 2rem 2.5rem 0
}
}
.login-content, .login-wrap {
height: 100%;
width: 100%
}
.login-wrap {
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: scrollbar
}
.login-section {
flex: 0 0 auto;
margin: 0 auto;
max-width: 40em;
width: 100%
}
.login-section .text-center {
text-align: center
}
.login-grid {
margin-bottom: 4rem;
margin-top: 1.5rem
}
.login-grid ul {
list-style: none;
padding-left: 0;
padding-right: 0
}
.login-register {
margin-top: 0
}
@media only screen and (min-width: 35.063em) {
.login-register {
margin-top: 2rem
}
}
@media only screen and (min-width: 56.063em) {
.login-register:has(.affiliate-logo) {
margin-top: .5rem
}
}
.login .white-label-logo {
display: none
}
.login .login-form {
padding: 0 1.5rem 1rem
}
@media only screen and (min-width: 56.063em) {
.login .login-form {
flex: 0 1 100%
}
}
.login .login-form-wrapper {
padding-top: 1.5rem
}
@media only screen and (min-width: 35.063em) {
.login .login-form-wrapper {
padding-top: 0
}
}
.login .login-form .input-svg {
position: relative
}
.login .login-form .input-svg > svg {
height: 1.5rem;
inset-inline-start: .5rem;
position: absolute;
top: .5rem;
width: 1.5rem
}
.login .login-form .input-svg > svg.pass-svg {
height: 1.5625rem;
inset-inline-start: .6875rem;
top: .625rem;
width: 1.5625rem
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.login .login-form .input-svg > svg.pass-svg {
top: 7px
}
}
.login .login-form .input-svg > svg path {
fill: var(--on-surface-extra-light)
}
.login .login-form .input-svg input {
border: none;
border-bottom: 1px solid var(--outline-medium);
border-radius: 0;
padding: .625rem 2.5rem !important
}
.login .login-form .input-svg input::-ms-clear, .login .login-form .input-svg input::-ms-reveal {
display: none
}
.login .login-form .input-svg button.icon {
background: transparent;
border: none;
font-size: 1.25rem;
height: 24px;
inset-inline-end: .625rem;
min-width: 24px;
padding: .25rem;
position: absolute;
top: 3px;
fill: var(--on-surface-medium)
}
.login .login-form .input-label-custom input {
direction: ltr;
text-align: var(--ltr, left) var(--rtl, right)
}
@supports (will-change:auto) {
.login .login-form .input-label-custom label {
color: var(--on-surface-medium);
font-size: 1rem;
inset-inline-start: 2.5rem;
opacity: .6;
pointer-events: none;
position: absolute;
top: 0;
transform: translateY(1rem);
transition: transform .15s ease-in-out
}
.login .login-form .input-label-custom input:focus + label, .login .login-form .input-label-custom input:not(:placeholder-shown) + label {
font-size: .75rem !important;
transform: translateY(-.5rem)
}
.login .login-form .input-label-custom input:placeholder-shown + label {
opacity: 0
}
}
.login .login-form .full-width:nth-child(n+2) .input-label-custom {
margin-top: 1rem
}
.login .login-form.login-login {
padding-top: 0
}
@media only screen and (min-width: 35.063em) {
.login .login-form.login-login {
padding-top: 2.5rem
}
}
@media only screen and (min-width: 56.063em) {
.login .login-form.login-login:has(.affiliate-logo) {
padding-top: .5rem
}
}
.login h1 {
color: var(--on-surface-primary);
font-size: 1.8125rem;
font-weight: 400;
line-height: 1.25;
margin: .75rem 0;
text-align: center
}
.login-heading {
justify-content: space-between
}
@media only screen and (min-width: 56.063em) {
.login-heading {
align-items: flex-start
}
}
.login-heading h2 {
flex: 0 0 auto;
flex-direction: row;
order: 2
}
@media only screen and (min-width: 56.063em) {
.login-heading h2 {
flex: 1 1 50%;
order: 1
}
}
.login-heading button {
flex: 1 0 auto;
margin-bottom: 1em;
order: 1
}
@media only screen and (min-width: 56.063em) {
.login-heading button {
flex: 0 1 auto;
margin-bottom: .5em;
order: 2
}
}
.login-heading p {
margin: 0;
padding: 0;
text-align: center
}
.login h2 {
color: var(--on-primary-regular);
font-size: 1.25rem;
font-weight: 400
}
.login h2:before {
font-size: .75rem
}
.login h2 span {
display: inline-block;
padding: 0 .5em;
vertical-align: 20%
}
.login fieldset {
padding: 0
}
.login fieldset li > div {
padding: 0 !important
}
.login fieldset li input {
padding: .6875rem
}
.login label, .login label a {
font-size: .875rem !important
}
.login .chat-now-button, .login .forgot-password-link {
padding: 0 .625rem
}
@media only screen and (min-width: 56.063em) {
.login .chat-now-button, .login .forgot-password-link {
padding: .625rem 0 0;
text-align: end
}
}
@media only screen and (max-height: 38em), only screen and (max-width: 56em) {
.login .chat-now-button, .login .forgot-password-link {
padding: 0 1rem
}
}
.login button.icon-chat, .login button.icon-chat-disabled, .login button.icon-phone2 {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-regular);
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.login button.icon-chat-disabled:hover, .login button.icon-chat:hover, .login button.icon-phone2:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.login button.icon-chat-disabled.active, .login button.icon-chat-disabled:active, .login button.icon-chat.active, .login button.icon-chat:active, .login button.icon-phone2.active, .login button.icon-phone2:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.login button.icon-chat-disabled:disabled, .login button.icon-chat:disabled, .login button.icon-phone2:disabled {
opacity: .4;
pointer-events: none
}
.login .form-actions {
align-items: center;
padding-left: 0;
padding-right: 0
}
@media only screen and (min-width: 56.063em) {
.login .form-actions {
align-items: baseline;
justify-content: center
}
}
.login .form-actions button {
flex: 0 1 100%;
width: 100%
}
.login .form-actions .action {
flex: 1 0 100%;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.login .form-actions .action {
flex: 0 1 auto
}
}
.login .form-links {
align-items: center;
display: flex;
font-size: .938rem;
justify-content: space-between;
padding-left: 0;
padding-right: 0
}
.login .form-links button {
background-color: transparent;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-surface-primary);
min-width: auto;
padding: 0;
text-align: end;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.login .form-links button:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.login .form-links button.active, .login .form-links button:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.login .form-links button:disabled {
opacity: .4;
pointer-events: none
}
.login .form-links span {
margin: .75rem 0
}
@media only screen and (max-width: 56em) {
.login .form-links {
flex-direction: column
}
.login .form-links span {
margin: .5rem 0
}
}
.form fieldset li .login .form-links .notifications-check, .login .form-links .form fieldset li .notifications-check, .login .form-links .radio-check {
align-items: center;
display: flex
}
.form fieldset li .login .form-links .notifications-check label, .login .form-links .form fieldset li .notifications-check label, .login .form-links .radio-check label {
margin: 0
}
.login .login-button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: .25rem;
color: var(--on-primary-regular);
flex: 0 1 100%;
font-size: 1rem;
font-weight: 600;
padding: .75em 1em;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.login .login-button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.login .login-button.active, .login .login-button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.login .login-button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (min-width: 56.063em) {
.login .login-button {
flex: 0 1 auto
}
}
.login-captcha {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: -1.25rem;
margin-right: -1.25rem
}
.login-captcha input {
min-height: 2.5rem;
padding: .5rem .75rem
}
@media only screen and (min-width: 56.063em) {
.login .social-account {
margin: 0 auto
}
}
.login .social-account h4 {
color: var(--on-surface-light);
display: block;
font-size: 1rem;
font-weight: 400;
padding: 1.5rem 0 1rem;
text-align: center
}
.login .social-account h4 span {
flex: 0 1 auto;
padding: 0 .625rem
}
.login .social-account div {
display: flex;
justify-content: center;
margin: 0 -.25rem 1rem
}
@media only screen and (max-width: 35em) {
.login .social-account div {
flex-direction: row
}
}
@media only screen and (min-width: 35.063em) {
.login .social-account div {
margin-bottom: 2rem
}
}
.login .social-account div button {
background-color: var(--surface-main);
border-color: var(--outline-light);
border-radius: .25rem;
border-style: solid;
border-width: 1px;
color: var(--on-surface-primary);
flex: 0 1 50%;
margin: 0 .25rem;
padding: .75rem .3125rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.login .social-account div button:hover {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
}
.login .social-account div button.active, .login .social-account div button:active {
background-color: var(--surface-button-secondary-focused);
border-color: var(--outline-button-focused);
color: var(--on-surface-regular)
}
.login .social-account div button:disabled {
opacity: .4;
pointer-events: none
}
.login .social-account div button svg {
height: 25px;
margin: 0 .3125rem;
vertical-align: middle;
width: 25px
}
@media only screen and (max-width: 35em) {
.login .social-account div button span {
display: none
}
}
.login .social-account[social-icons-only=true] h4 {
font-size: 1.25rem
}
.login .social-account[social-icons-only=true] > div {
align-items: flex-start
}
.login .social-account[social-icons-only=true] > div button {
display: block;
flex: 0 0 40px;
margin: 2px 12px;
min-height: auto;
min-width: auto;
padding: 10px
}
.login .social-account[social-icons-only=true] > div button.google-api-login {
background: none;
border: 0;
flex: 0 0 64px;
margin: 0;
padding: 2px 12px
}
.login .social-account[social-icons-only=true] > div button.google-api-login:active, .login .social-account[social-icons-only=true] > div button.google-api-login:hover {
background: none
}
.login .social-account[social-icons-only=true] > div button.google-api-login > span {
display: block
}
.login .social-account[social-icons-only=true] > div button.google-api-login div {
display: block;
margin: 0;
padding: 0
}
.login .social-account[social-icons-only=true] > div button.google-api-login svg {
height: 18px;
margin: 10px;
width: 18px
}
.login .social-account[social-icons-only=true] > div button > span {
display: none
}
.login .social-account[social-icons-only=true] > div button > svg {
display: block;
height: 18px;
margin: 0;
width: 18px
}
.login-register .social-account[data-show=false] + .form-links {
padding-top: 1rem
}
@media only screen and (min-width: 35.063em) {
.login-register .social-account[data-show=false] + .form-links {
padding-top: 0
}
}
@media only screen and (min-width: 35.063em)and (min-width: 56.063em) {
.login-register .social-account[data-show=false] + .form-links {
flex-wrap: wrap
}
.login-register .social-account[data-show=false] + .form-links > span {
max-width: 50%
}
.login-register .social-account[data-show=false] + .form-links:before {
flex: 0 0 100%
}
}
.login-alert {
flex-wrap: nowrap
}
.login-alert span {
display: inline-block;
max-width: calc(100% - 1rem)
}
.login .mobile-login-switch-btn {
margin-top: 1rem
}
.login .side-text.mobile-login-switch-btn {
margin-top: 0;
padding-top: .5rem
}
.login .keep-logged-in {
display: flex;
justify-content: center;
margin-bottom: 2rem;
padding: .3125rem 0
}
.login .keep-logged-in .checkbox-custom {
margin-bottom: 0
}
.login .login-form-wrapper + .keep-logged-in {
margin-top: 1.5rem
}
.login .contact-btn-row {
bottom: 0;
left: 0;
padding: 0;
position: fixed;
right: 0;
z-index: 100
}
.login .contact-btn-row.full-width {
flex: 1 1 100%
}
@media only screen and (min-width: 35.063em) {
.login .contact-btn-row {
margin-top: 2rem;
position: static
}
}
.login .contact-btn-row button {
align-items: center;
background-color: var(--surface-button-secondary);
border: 0;
border-radius: 0;
color: var(--on-surface-primary);
display: flex;
font-size: .875rem;
font-weight: 500;
height: var(--sticky-contact-height);
justify-content: center;
line-height: 1.125;
padding: .25rem 1rem;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.login .contact-btn-row button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: none;
color: var(--on-primary-regular)
}
}
.login .contact-btn-row button.active, .login .contact-btn-row button:active {
background-color: var(--surface-tertiary-fixed);
border-color: none;
color: var(--on-primary-regular)
}
.login .contact-btn-row button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (min-width: 35.063em) {
.login .contact-btn-row button {
height: auto;
line-height: 1.333;
padding: .75rem 1rem
}
}
.login .contact-btn-row button:before {
font-size: 1.25rem;
margin-inline-end: .5rem
}
@media only screen and (min-width: 35.063em) {
.login .form-box .contact-btn-row {
margin: 2rem -2.5rem 0
}
}
.login .exp-element {
display: none
}
.header-login-webview + .main .login-section {
max-width: 36rem
}
.header-login-webview + .main .login-register {
margin-top: 1.5rem
}
.header-login-webview + .main .login-form {
padding: 0 .9735rem
}
.header-login-webview + .main .login-form-wrapper {
border: none;
padding: 0
}
.header-login-webview + .main .login-form .input-svg input {
border: 1px solid var(--outline-medium);
border-radius: 4px
}
.header-login-webview + .main .login-form .full-width:nth-child(n+2) .input-label-custom {
margin-top: 0
}
.header-login-webview + .main .login-form .input-label-custom label {
display: none !important
}
.header-login-webview + .main .login-form.login-login {
padding-top: 1.5rem
}
.header-login-webview + .main .login fieldset {
padding: 0 0 .625rem
}
.header-login-webview + .main .login .login-button {
border-radius: 0
}
.header-login-webview + .main .login .form-actions {
min-height: 4.5rem
}
.header-login-webview + .main .login .mobile-login-switch-btn {
margin: 0
}
.header-login-webview + .main .login .side-text.mobile-login-switch-btn {
border: none;
padding: 0
}
.header-login-webview + .main .login .login-bottom-section .keep-logged-in {
border: none;
box-shadow: none;
padding: .3125rem 0
}
.header-login-webview + .main .login .login-bottom-section .keep-logged-in .checkbox-custom {
margin-bottom: 1rem
}
.header-login-webview + .main .login .social-account {
border: none;
box-shadow: none;
padding: 0
}
.header-login-webview + .main .login .social-account h4 {
align-items: center;
display: flex;
padding: 1rem 0 1.5625rem
}
.header-login-webview + .main .login .social-account h4:after, .header-login-webview + .main .login .social-account h4:before {
background: var(--outline-light);
content: " ";
flex: 1 1 auto;
height: 1px
}
@media only screen and (min-width: 35.063em) {
.header-login-webview + .main .login .social-account div {
padding-bottom: 1rem
}
}
#livechat-compact-container {
background-color: var(--surface-container-primary) !important;
bottom: 0 !important;
height: 42px !important;
padding: .3125rem;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important
}
@media only screen and (min-width: 56.063em) {
#livechat-compact-container {
background-color: var(--surface-container-primary) !important;
bottom: 0 !important;
height: 42px !important;
padding: .3125rem;
right: .625rem !important;
width: 300px !important
}
}
@media only screen and (min-width: 35.063em) {
.forgot-password .form-box {
margin-top: 2.5rem
}
}
.forgot-password .login-grid {
margin-bottom: 2rem
}
.forgot-password h2 {
color: var(--on-surface-primary);
font-size: 1rem;
margin-bottom: .25em;
text-align: center
}
.forgot-password .alert-box.login-alert.success span, .forgot-password .login-alert.success.notification span {
word-break: break-word
}
.demo-real-page {
background: linear-gradient(180deg, #0a1f66 30%, #0c2780 80%);
color: var(--on-primary-regular)
}
.demo-real-page .container {
display: flex
}
.demo-real-page .main {
display: flex;
flex: 10 1 0;
flex-direction: column;
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto
}
.demo-real-page .main > div {
height: auto
}
.demo-real-page .main > div:first-child {
display: flex;
flex: 1 0 auto
}
.demo-real-page .main > div:first-child .login-content, .demo-real-page .main > div:first-child .login-wrap, .demo-real-page .main > div:first-child > div {
display: flex;
flex: 1 1 auto;
height: auto
}
.demo-real-page .main > div .demo-real {
width: 100%
}
.demo-real-page .main .login-section {
padding-bottom: 0
}
.demo-real-page header {
background: none;
border: none;
flex: 0 0 auto
}
.demo-real-page .header-login {
display: flex;
flex-direction: column;
height: auto;
position: relative;
text-align: right;
width: 100%
}
.demo-real-page .header-login .side-logo {
display: none
}
.demo-real-page .header-login .language-wrapper {
padding: 0 .5rem
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .header-login .language-wrapper {
padding: 2rem 1rem
}
}
.demo-real-page .header-login .language-login {
background-color: transparent;
background-position: 100%;
background-size: 22px;
color: var(--on-primary-regular);
direction: rtl;
font-size: 14px;
outline: none;
padding: .5rem 1.5rem .5rem 1rem;
width: auto
}
.demo-real-page .header-login .language-login::-ms-expand {
display: none
}
.demo-real-page .header-login .language-login:focus {
color: var(--on-primary-regular)
}
.demo-real-page .header-login .language-login option {
color: var(--on-surface-regular)
}
@media screen and (max-width: 22em) {
#broker .demo-real-page .header-login .language-login {
width: 100%
}
}
.demo-real-page .header-login .login-logo {
width: auto
}
@media only screen and (max-width: 56em) {
.demo-real-page .header-login .login-logo {
margin: 0 0 0 1rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .header-login .login-logo {
align-items: center;
display: flex;
flex: 0 0 auto;
flex-direction: row;
height: 100%;
justify-content: center;
left: 0;
margin: 0 0 0 1.5rem;
pointer-events: none;
position: absolute;
top: 0
}
}
@media only screen and (max-width: 56em) {
#broker .demo-real-page .header-login .login-logo {
align-items: center;
display: flex;
justify-content: center
}
}
.demo-real-page .header-login .login-logo a {
direction: ltr;
display: block
}
@media only screen and (max-width: 56em) {
.demo-real-page .header-login .login-logo a {
width: 8.5rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .header-login .login-logo a {
width: 15.25rem
}
}
@media only screen and (max-width: 56em) {
#broker .demo-real-page .header-login .login-logo a {
width: 7.5rem
}
}
.demo-real-page .header-login .login-logo a path, .demo-real-page .header-login .login-logo a polygon {
fill: #fff
}
.demo-real-page .header-login .login-logo a svg {
display: block;
height: 30px;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .header-login .login-logo a svg {
height: 40px
}
}
.demo-real-page .header-login .login-logo a-svg-main path {
fill: #fff
}
.demo-real-page .header-login .login-logo span {
display: none
}
#broker .demo-real-page .header-login .login-logo span {
background-color: var(--surface-tertiary-fixed);
color: var(--on-primary-regular);
display: block;
font-size: .8125rem;
font-weight: 600;
line-height: 1.5;
padding: 3px 6px;
text-transform: uppercase
}
@media only screen and (max-width: 56em) {
#broker .demo-real-page .header-login .login-logo span {
margin-bottom: -5px
}
}
@media only screen and (min-width: 56.063em) {
#broker .demo-real-page .header-login .login-logo span {
font-size: 1.25rem;
margin-bottom: -14px;
min-width: 3rem
}
}
.demo-real-page .header-login-wrapper {
direction: ltr;
display: block;
padding: 0;
position: relative;
z-index: 1
}
@media only screen and (max-width: 56em) {
.demo-real-page .header-login-wrapper {
align-items: center;
display: flex;
height: 3.5rem;
justify-content: space-between
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .header-login-wrapper {
min-height: 6.5rem
}
}
@media only screen and (min-width: 90.063em) {
.demo-real-page .header-login-wrapper {
min-height: 10rem
}
}
.demo-real-page .header-login-wrapper:before {
display: none
}
@media only screen and (min-width: 56.063em) {
.demo-real-page#broker .login-logo a {
width: 160px
}
}
@media only screen and (max-width: 56em) {
.demo-real-page#broker .login-logo span {
margin-bottom: -5px
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page#broker .login-logo span {
font-size: .875rem;
line-height: 1.5;
margin-bottom: -8px
}
}
.demo-real-page .login-section {
align-items: stretch;
flex-direction: row
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-section {
position: relative
}
}
.demo-real-page .login-section-demo-real {
direction: ltr;
display: flex;
flex: 1 1 50%;
max-width: none;
text-align: center;
width: 100%
}
.demo-real-page .login-section-demo-real h1, .demo-real-page .login-section-demo-real h2 {
direction: var(--ltr, ltr) var(--rtl, rtl)
}
.demo-real-page .login-section h1 {
color: var(--on-primary-medium);
font-size: 1rem;
font-weight: 400;
margin-bottom: 1rem
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-section h1 {
text-transform: uppercase
}
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .login-section h1 {
font-size: 1.25rem
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .login-section h1 {
flex: 0 0 auto
}
}
@media only screen and (max-width: 757px)and (max-height: 370px) {
.demo-real-page .login-section h1 {
font-size: .875rem;
margin-bottom: 0
}
}
.demo-real-page .login-section h2 {
color: var(--on-primary-regular);
font-weight: 700;
max-width: 100%
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-section h2 {
flex: 1 1 auto;
font-size: 1.5rem
}
}
@media only screen and (max-width: 56em)and (-ms-high-contrast: active), only screen and (max-width: 56em)and (-ms-high-contrast: none) {
.demo-real-page .login-section h2 {
align-items: center;
display: flex
}
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .login-section h2 {
font-size: 2.5rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .login-section h2 {
font-size: 2rem
}
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .login-section h2 {
font-size: 2.375rem;
max-width: 38rem
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .login-section h2 {
display: none !important
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-section h2 span {
display: none
}
}
@media only screen and (max-width: 56em)and (-ms-high-contrast: active), only screen and (max-width: 56em)and (-ms-high-contrast: none) {
.demo-real-page .login-section h2 span {
display: block
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .login-section h2 span {
margin-bottom: 2rem
}
}
.demo-real-page .login-form {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;
padding: 1.5rem 1.5rem 0;
position: relative;
width: 100%
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-form {
justify-content: flex-end;
z-index: 1
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .login-form {
flex: 1 1 50%;
padding-bottom: 6rem
}
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .login-form {
flex: 1 1 60%
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .stores-badges {
margin-bottom: .5rem;
margin-top: .5rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .stores-badges {
margin-bottom: 2rem;
margin-top: 2rem
}
}
.demo-real-page .stores-badges .app-store {
background-position: 50% !important
}
@media only screen and (max-width: 56em) {
.demo-real-page .stores-badges .app-store {
background-size: 100px !important;
height: 2rem;
width: 6.5rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .stores-badges .app-store {
height: 2.5rem;
width: 8.5rem
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .stores-badges img {
margin: -.375rem -.375rem 0;
width: 7rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .stores-badges img {
margin: -.5625rem -.5rem 0;
width: 9.5rem
}
}
.demo-real-page .demo-real-buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%
}
@media only screen and (max-width: 35em) {
.demo-real-page .demo-real-buttons {
flex-direction: column
}
}
.demo-real-page .demo-real-buttons svg {
height: 30px;
margin-inline-end: .875rem;
width: 3rem
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .demo-real-buttons svg {
height: 35px;
margin-inline-end: .5rem
}
}
.demo-real-page .demo-real-buttons svg path {
fill: #fff
}
.demo-real-page .demo-real-buttons button {
align-items: center;
background: transparent;
background-color: transparent;
border: none;
border-color: var(--outline-on-primary-regular);
border-radius: 5rem;
border-style: solid;
border-width: 2px;
color: var(--on-primary-regular);
display: flex;
flex: 1 1 auto;
height: 4.5rem;
justify-content: center;
margin: .5rem 1rem;
max-width: 20rem;
min-height: 4.5rem;
min-width: 20rem;
overflow: hidden;
padding: .25rem 1rem;
position: relative;
text-align: start;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.demo-real-page .demo-real-buttons button:hover {
background-color: var(--white);
border-color: var(--outline-on-primary-regular);
color: var(--on-surface-regular)
}
}
.demo-real-page .demo-real-buttons button.active, .demo-real-page .demo-real-buttons button:active {
background-color: var(--white);
border-color: var(--outline-on-primary-regular);
color: var(--on-surface-regular)
}
.demo-real-page .demo-real-buttons button:disabled {
opacity: .4;
pointer-events: none
}
@media only screen and (max-width: 35em) {
.demo-real-page .demo-real-buttons button {
height: 4rem;
margin: .5rem 0;
min-height: 4rem;
min-width: 100%
}
}
@media only screen and (max-width: 757px)and (max-height: 370px) {
.demo-real-page .demo-real-buttons button {
height: 3rem;
max-width: 100%;
min-height: 3.5rem
}
}
.demo-real-page .demo-real-buttons button .btn {
display: block;
position: relative
}
.demo-real-page .demo-real-buttons button .btn strong {
cursor: pointer;
display: block;
font-size: 1.125rem;
overflow: hidden;
position: relative;
text-transform: uppercase
}
.demo-real-page .demo-real-buttons button .btn em {
color: var(--on-primary-light);
display: block;
font-size: .75rem;
font-style: normal;
margin: 0 auto;
max-width: 11rem;
max-width: 100%;
padding: 0
}
.demo-real-page .demo-real-buttons button .btn br {
display: none
}
@media only screen and (hover: hover)and (pointer: fine) {
.demo-real-page .demo-real-buttons button:hover .btn, .demo-real-page .demo-real-buttons button:hover em, .demo-real-page .demo-real-buttons button:hover path {
color: var(--on-surface-primary);
fill: var(--on-surface-primary)
}
}
.demo-real-page .demo-real-buttons button:active .btn, .demo-real-page .demo-real-buttons button:active em, .demo-real-page .demo-real-buttons button:active path {
color: var(--on-surface-primary);
fill: var(--on-surface-primary)
}
.demo-real-page .demo-real-buttons button:focus {
outline: none
}
.demo-real-page .demo-real-buttons button:last-child {
text-align: center
}
.demo-real-page .demo-real-buttons button:before {
animation: demo-real-highlighted 1.9s ease-in-out 4s;
background-image: radial-gradient(circle, hsla(0, 0%, 100%, .6) 20%, hsla(0, 0%, 100%, 0) 23%);
background-position: 50%;
background-repeat: no-repeat;
background-size: 80%;
border-radius: 5rem;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: border-width .1s ease-in-out;
width: 100%;
z-index: -1
}
.demo-real-page .demo-real-buttons button > span {
align-items: center;
direction: var(--ltr, ltr) var(--rtl, rtl);
display: flex;
flex: 1 1 100%;
justify-content: center
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .demo-real-buttons button {
flex: 1 1 25%;
height: 4.5rem;
margin: .5rem 2rem .5rem 0;
min-height: 4.5rem;
min-width: 0
}
.demo-real-page .demo-real-buttons button:last-child {
margin-right: 0
}
.lang_el.demo-real-page .demo-real-buttons button .btn strong, .lang_lt.demo-real-page .demo-real-buttons button .btn strong, .lang_pt.demo-real-page .demo-real-buttons button .btn strong, .lang_ru.demo-real-page .demo-real-buttons button .btn strong, .lang_sk.demo-real-page .demo-real-buttons button .btn strong {
font-size: .875rem
}
}
.demo-real-page .demo-real-buttons.highlight button {
max-width: 21.5rem
}
.demo-real-page .demo-real-buttons.highlight button:before {
animation: demo-real-highlighted 1.5s ease-in-out infinite
}
@keyframes demo-real-highlighted {
0% {
opacity: 0;
transform: scale(1)
}
3% {
opacity: .5
}
35% {
opacity: 0
}
to {
transform: scale(30, 20)
}
}
.demo-real-page .app-images-wrapper {
overflow: hidden;
padding: 0;
perspective-origin: 50%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-images-wrapper {
align-items: stretch;
display: flex;
flex: 1 1 40%;
flex-wrap: nowrap;
max-width: 800px
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .app-images-wrapper {
display: none
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-images-wrapper-mobile {
display: flex;
flex: 1 1 99%;
flex-wrap: nowrap;
overflow: hidden
}
}
.demo-real-page .app-images-wrapper [id^=svg-icon] {
opacity: 0;
transition: 2s ease-in-out
}
.demo-real-page .app-images-wrapper #svg-title-full-container {
opacity: 0
}
.demo-real-page .app-images-wrapper .ready [id^=svg-icon] {
opacity: 1
}
.demo-real-page .app-images-wrapper .ready .price-type {
animation: price-type 4.5s ease-in-out infinite;
opacity: 1
}
@media (-ms-high-contrast: active),(-ms-high-contrast: none) {
.demo-real-page .app-images-wrapper .ready .price-type {
animation: none
}
}
.demo-real-page .app-images-wrapper .ready .price-type .instrument-title {
opacity: 1;
transform: scale(1) rotateX(0)
}
.demo-real-page .app-images-wrapper .ready .price-type .btn-section {
transform: scaleY(1) translateY(0)
}
.demo-real-page .app-images-wrapper .ready .price-type .btn-wrapper {
box-shadow: 0 5px 5px 0 var(--shadow-bottom-arrow);
opacity: 1;
transform: scaleX(1)
}
@supports not ((-ms-high-contrast:none)
,
(
-ms-high-contrast:active
)
)
{
.demo-real-page .app-images-wrapper .app-demo-dark:not(.ready) path, .demo-real-page .app-images-wrapper .app-demo-light:not(.ready) path {
stroke-dasharray: 0, 200 !important;
opacity: 0
}
}
.demo-real-page .app-images-wrapper .app-demo-dark path, .demo-real-page .app-images-wrapper .app-demo-light path {
opacity: 1;
transition: stroke-dasharray 1s ease-in-out, opacity .2s .1s
}
@media only screen and (hover: hover)and (pointer: fine) {
@supports not (-ms-ime-align:auto) {
.demo-real-page .app-images-wrapper:hover .app-demo-dark {
transform: translateX(10px)
}
.demo-real-page .app-images-wrapper:hover .app-demo-light {
flex-basis: 50%
}
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .app-images-wrapper {
height: 100%;
left: 0;
perspective: 800px;
position: absolute;
width: 100%;
z-index: 0
}
}
@media only screen and (max-width: 56em)and (max-width: 35em) {
.demo-real-page .app-images-wrapper {
perspective: 300px
}
}
@media only screen and (max-width: 56em)and (-ms-high-contrast: active), only screen and (max-width: 56em)and (-ms-high-contrast: none) {
.demo-real-page .app-images-wrapper {
display: none
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .app-images-wrapper-mobile {
height: 100%;
left: 15vw;
position: absolute;
top: -1.5rem;
transform: rotateX(14deg) rotateY(10deg) rotate(-15deg);
width: 100%
}
}
@media only screen and (max-width: 56em)and (max-width: 35em) {
.demo-real-page .app-images-wrapper-mobile {
left: 20vw;
top: -4rem
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .app-images-wrapper .app-demo-dark {
display: block;
left: 0;
perspective: 200px;
position: absolute;
top: 5rem
}
.demo-real-page .app-images-wrapper .app-demo-light {
box-shadow: -1.1rem 5.3rem 11px 0 rgba(0, 0, 0, .8);
left: 24%;
position: absolute;
top: 0;
width: 130vw
}
}
@media only screen and (max-width: 56em)and (max-width: 35em) {
.demo-real-page .app-images-wrapper .app-demo-light {
left: 6rem
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .app-images-wrapper .app-demo-light.ready .price-type {
align-items: center;
display: flex;
height: 60%;
justify-content: center;
left: 0;
opacity: 1;
top: 0;
width: 65%
}
}
@media only screen and (max-width: 56em)and (max-width: 35em) {
.demo-real-page .app-images-wrapper .app-demo-light.ready .price-type {
opacity: 0
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .app-images-wrapper .app-demo-light.ready #svg-chart {
transform: translateY(-407px);
transition: 2s ease-in-out 2s
}
.demo-real-page .app-images-wrapper .app-demo-light.ready #svg-graph-mountain {
opacity: 0
}
.demo-real-page .app-images-wrapper .app-demo-light.ready #svg-graph-candle {
animation: graph-anim-mobile 60s linear infinite
}
}
.demo-real-page .price-type {
align-items: center;
display: flex;
flex-direction: column;
left: 11%;
opacity: 0;
position: absolute;
top: 21%;
width: 89%;
z-index: 1
}
.demo-real-page .price-type .wrapper {
max-width: 16rem;
min-width: 14rem;
perspective: 100px;
position: relative;
transition: box-shadow .5s ease-out
}
@media only screen and (max-width: 35em) {
.demo-real-page .price-type .wrapper {
max-width: 16rem;
min-width: 14rem
}
}
@media screen and (max-width: 22em) {
.demo-real-page .price-type .wrapper {
max-width: 14rem;
min-width: 13rem
}
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .price-type .wrapper {
max-width: 17rem;
min-width: 15rem
}
}
.demo-real-page .price-type .instrument-title {
align-items: center;
background-color: #273a50;
border-radius: 5px;
color: #fff;
direction: var(--ltr, ltr) var(--rtl, rtl);
display: flex;
font-size: 1.25rem;
font-weight: 700;
justify-content: center;
opacity: 0;
padding: 1rem .75rem;
transform: scale(.1, .5) rotateX(-70deg);
transform-origin: center;
transition: .25s ease-in-out .5s
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .price-type .instrument-title {
font-size: 1.125rem
}
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .price-type .instrument-title {
font-size: 1.375rem
}
}
.demo-real-page .price-type .instrument-title span:last-child {
font-weight: 400;
padding: 0 .5rem
}
.demo-real-page .price-type .instrument-title span:last-child.red {
color: #ff3d3d
}
.demo-real-page .price-type .instrument-title span:last-child.green {
color: #a1d175
}
.demo-real-page .price-type .instrument-title span:last-child.gray {
opacity: .5
}
.demo-real-page .price-type .instrument-title-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.demo-real-page .price-type .btn {
border: 1px solid #b3c3d4;
border-radius: 5px;
color: #082342;
padding: .5rem;
text-align: center;
width: 50%
}
.demo-real-page .price-type .btn-section {
background: #fff;
border-radius: 5px;
margin-top: -.5rem;
padding: 1rem .5rem .5rem;
position: relative;
transform: scaleY(0) translateY(0);
transition: .5s ease-in-out .7s;
z-index: -1
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .price-type .btn-section {
box-shadow: 0 20px 45px 0 rgba(0, 0, 0, .3)
}
}
.demo-real-page .price-type .btn-wrapper {
border-radius: 5px;
display: flex;
opacity: 0;
transform: scaleX(.5);
transition: transform .2s ease-in-out 1s, opacity .2s ease-in-out 1s, box-shadow .2s ease-in-out 1.2s
}
.demo-real-page .price-type .btn:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.demo-real-page .price-type .btn:last-child {
border-bottom-left-radius: 0;
border-left: none;
border-top-left-radius: 0
}
.demo-real-page .price-type .btn strong {
display: block;
font-size: .875rem;
font-weight: 700
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .price-type .btn strong {
font-size: 1rem
}
}
.demo-real-page .price-type .btn span {
color: var(--on-surface-regular);
display: block;
font-size: .875em
}
.demo-real-page .price-type .btn span.red {
color: var(--on-surface-alert)
}
.demo-real-page .price-type .btn span.green {
color: var(--on-surface-success)
}
.demo-real-page .price-type .btn span.gray {
opacity: .5
}
.demo-real-page .app-demo-dark, .demo-real-page .app-demo-light {
align-items: stretch;
display: flex;
overflow: hidden;
position: relative;
transform-origin: right;
transition: .5s ease-in-out
}
.demo-real-page .app-demo-dark > div, .demo-real-page .app-demo-light > div {
height: 100%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-dark > div, .demo-real-page .app-demo-light > div {
align-items: flex-end;
display: flex;
flex: 1 0 100%;
height: auto
}
.demo-real-page .app-demo-dark > div svg, .demo-real-page .app-demo-light > div svg {
bottom: 0;
position: absolute;
width: auto
}
}
.demo-real-page .app-demo-dark {
height: 100%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-dark {
flex: 1 4 25%;
height: auto
}
}
.demo-real-page .app-demo-dark svg {
height: 83%
}
.demo-real-page .app-demo-light {
height: 100%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-light {
flex: 4 1 25%;
height: auto
}
}
.demo-real-page .app-demo-light svg {
height: 100%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-dark.ready #svg-graph-mountain {
animation: graph-anim 60s linear infinite
}
}
@media only screen and (min-width: 56.063em)and (-ms-high-contrast: active), only screen and (min-width: 56.063em)and (-ms-high-contrast: none) {
.demo-real-page .app-demo-dark.ready #svg-graph-mountain {
animation: none
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-dark.ready #svg-graph-candle {
animation: graph-anim-opposite 60s linear infinite
}
}
@media only screen and (min-width: 56.063em)and (-ms-high-contrast: active), only screen and (min-width: 56.063em)and (-ms-high-contrast: none) {
.demo-real-page .app-demo-dark.ready #svg-graph-candle {
animation: none
}
}
.demo-real-page .app-demo-dark #svg-graph-mountain {
opacity: 0
}
.demo-real-page .app-demo-dark .price-type-btn {
border: 2px solid #435467;
color: #9eafc2;
font-size: .875rem;
padding: .375rem 1.5rem
}
.demo-real-page .app-demo-dark .price-type-btn-wrapper {
background: #2a3846;
box-shadow: 0 20px 45px 0 rgba(0, 0, 0, .4)
}
.demo-real-page .app-demo-dark svg {
background-color: #1f2c3a
}
.demo-real-page .app-demo-dark #svg-light {
display: none
}
.demo-real-page .app-demo-dark #svg-top-menu #svg-bg-2 {
fill: #1c2834
}
.demo-real-page .app-demo-dark #svg-top-menu .st19 {
stroke: #333e49
}
.demo-real-page .app-demo-dark #svg-top-menu #svg-border {
fill: #46525d
}
.demo-real-page .app-demo-dark #svg-table .st4 {
fill: #263340
}
.demo-real-page .app-demo-dark #svg-table .st5 {
fill: #2a3d51
}
.demo-real-page .app-demo-dark #svg-table .st6 {
stroke: #374756
}
.demo-real-page .app-demo-dark #svg-table .st7 {
stroke: #9399a0
}
.demo-real-page .app-demo-dark #svg-table .st8 {
stroke: #515c66
}
.demo-real-page .app-demo-dark #svg-category .st1 {
stroke: #36424e
}
.demo-real-page .app-demo-dark #svg-category .st3 {
stroke: #636c75
}
.demo-real-page .app-demo-dark #svg-side-menu #svg-bg-3 {
fill: #141d26
}
.demo-real-page .app-demo-dark #svg-side-menu #svg-darkmode-switch-bg {
fill: #202d3a
}
.demo-real-page .app-demo-dark #svg-chart #svg-chart-bg {
fill: #1f2c3a
}
.demo-real-page .app-demo-dark #svg-chart #svg-chart-grid path {
stroke: #2b3948
}
.demo-real-page .app-demo-dark #svg-chart [id^=svg-icon] {
fill: #d9d9d9
}
.demo-real-page .app-demo-dark #svg-chart #svg-top-line {
stroke: #29415e
}
.demo-real-page .app-demo-dark #svg-chart [id^=svg-placeholder-time] {
fill: #344658
}
.demo-real-page .app-demo-dark #svg-chart #svg-bg-title {
fill: #2b4058
}
.demo-real-page .app-demo-dark #svg-title-full-container {
display: none
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .app-demo-light {
box-shadow: 0 200px 80px 20px #000
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-light.ready #svg-graph-mountain {
animation: graph-anim-opposite 60s linear infinite
}
}
@media only screen and (min-width: 56.063em)and (-ms-high-contrast: active), only screen and (min-width: 56.063em)and (-ms-high-contrast: none) {
.demo-real-page .app-demo-light.ready #svg-graph-mountain {
animation: none
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-light.ready #svg-graph-candle {
animation: graph-anim 60s linear infinite
}
}
@media only screen and (min-width: 56.063em)and (-ms-high-contrast: active), only screen and (min-width: 56.063em)and (-ms-high-contrast: none) {
.demo-real-page .app-demo-light.ready #svg-graph-candle {
animation: none
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .app-demo-light #svg-graph-candle {
opacity: 0
}
}
.demo-real-page .app-demo-light #svg-graph-candle .st14 {
stroke: #bbb
}
.demo-real-page .app-demo-light #svg-dark {
display: none
}
.demo-real-page .app-demo-light #svg-chart {
transform: translateY(0)
}
.demo-real-page .app-demo-light svg {
background-color: #fff
}
.demo-real-page .demo-real-bg {
background-color: #0c2780;
padding: 0;
z-index: -1
}
@media only screen and (max-width: 56em) {
.demo-real-page .demo-real-bg {
display: none
}
}
.demo-real-page .demo-real-bg svg {
bottom: 0;
left: 0;
position: fixed;
right: 0;
width: 170%
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .demo-real-bg svg {
width: 100%
}
}
.demo-real-page select {
background: transparent no-repeat url(/131711/Resources/dist/data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDIgMzUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQyIDM1IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MnB4IiBoZWlnaHQ9IjM1cHgiPg0KPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIxNS4xLDEzLjggMjEsMjEgMjYuOCwxMy44ICIvPg0KPC9zdmc+)
}
.demo-real-page .grecaptcha-badge {
visibility: hidden
}
.demo-real-page .grecaptcha-footer {
flex: 0 0 auto;
font-size: 12px;
margin: 0;
min-width: 100%;
padding: 0;
text-align: center;
width: 100vw;
z-index: 1
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .grecaptcha-footer {
display: flex;
min-height: 2rem
}
}
@media only screen and (max-width: 56em) {
.demo-real-page .grecaptcha-footer {
padding-bottom: 1.5rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .grecaptcha-footer {
flex-direction: var(--ltr, row) var(--rtl, row-reverse);
margin-top: -2rem
}
}
.demo-real-page .grecaptcha-footer span {
color: var(--on-primary-medium);
text-align: center;
width: 100%
}
@media only screen and (max-width: 35em) {
.demo-real-page .grecaptcha-footer span {
padding: 0 .25rem .25rem
}
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .grecaptcha-footer span {
padding: .125rem 1rem
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .grecaptcha-footer span {
flex: 1 1 60%;
width: 100%
}
.demo-real-page .grecaptcha-footer:after {
content: "";
display: block;
flex: 1 1 50%;
max-width: 800px
}
}
@media only screen and (min-width: 73.063em) {
.demo-real-page .grecaptcha-footer:after {
flex: 1 1 40%
}
}
.demo-real-page .grecaptcha-footer a {
color: #7dbaff
}
.demo-real-page .illustrative-text {
display: none
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .illustrative-text {
color: var(--on-surface-regular);
display: block;
font-size: .75rem;
left: 10%;
opacity: .7;
padding: .5rem;
position: absolute;
top: 39%;
width: auto
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .illustrative-text {
bottom: 0;
left: 10%;
text-align: center;
top: auto;
width: 90%
}
}
.demo-real-page .demo-real .risk-warning {
display: none
}
@keyframes graph-anim {
0% {
opacity: 0;
transform: translateX(0)
}
49.9% {
opacity: 0
}
50% {
opacity: 1
}
to {
opacity: 1;
transform: translateX(-120%)
}
}
@keyframes graph-anim-opposite {
0% {
opacity: 1;
transform: translateX(0)
}
49.9% {
opacity: 1
}
50% {
opacity: 0
}
to {
opacity: 0;
transform: translateX(-120%)
}
}
@keyframes graph-anim-mobile {
0% {
transform: translateX(0)
}
to {
transform: translateX(-120%)
}
}
@keyframes price-type {
0% {
transform: translateY(0)
}
50% {
transform: translateY(8px)
}
to {
transform: translateY(0)
}
}
.demo-real-page .login-form {
overflow: hidden;
padding-top: 0
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .login-form {
padding-bottom: 2rem
}
}
.demo-real-page .login-form-inner-wrapper {
align-items: center;
display: flex;
flex-direction: column;
width: 100%
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-form-inner-wrapper {
height: calc(100vh - 5.8rem);
justify-content: flex-end
}
}
@media only screen and (min-width: 56.063em) {
.demo-real-page .login-form-inner-wrapper {
flex: 1 1 auto;
height: 100% !important;
justify-content: center
}
}
.demo-real-page .login-form-title {
margin: 0;
position: relative
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-form-title {
height: 100%;
width: 100%
}
.demo-real-page .login-form-title:before {
background-image: linear-gradient(0deg, #0c2780, rgba(12, 39, 128, .85) 6%, rgba(15, 61, 116, 0) 20%);
bottom: -2rem;
height: 100%
}
.demo-real-page .login-form-title:after, .demo-real-page .login-form-title:before {
content: "";
display: block;
left: -1.5rem;
position: absolute;
right: -1.5rem;
width: 200%;
z-index: -1
}
.demo-real-page .login-form-title:after {
background: #0c2780;
height: 300vh;
top: calc(100% + 2rem)
}
}
@media only screen and (max-width: 56em)and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .login-form-title:after, .demo-real-page .login-form-title:before {
display: none
}
}
.demo-real-page .login-form-subtitle {
margin-bottom: 0
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-form .demo-real-buttons, .demo-real-page .login-form .login-badges, .demo-real-page .login-form-subtitle {
flex: 1 0 auto
}
}
.demo-real-page .login-form .risk-warning {
display: block;
padding: 0
}
@media only screen and (max-width: 56em) {
.demo-real-page .login-form .risk-warning {
padding: 0
}
}
.demo-real-page .login-form .risk-warning-bottom {
color: var(--on-primary-regular)
}
.demo-real-page .login-form .risk-warning-bottom span {
display: block;
text-align: justify
}
.demo-real-page .login-form .risk-warning .regulation-footer {
display: none
}
@media only screen and (max-width: 56em) {
.demo-real-page .grecaptcha-footer {
opacity: 1;
padding-left: 1.5rem;
padding-right: 1.5rem;
z-index: 1
}
}
@media only screen and (max-width: 35em) {
.demo-real-page.lang_el .demo-real-buttons button .btn strong, .demo-real-page.lang_el .login-section h1, .demo-real-page.lang_fr .login-section h1 {
font-size: .875rem
}
.demo-real-page.lang_fr .demo-real-buttons button .btn strong {
font-size: 1rem
}
.demo-real-page.lang_es .demo-real-buttons button .btn strong, .demo-real-page.lang_es .login-section h1 {
font-size: .875rem
}
.demo-real-page.lang_cs .demo-real-buttons button .btn strong, .demo-real-page.lang_pt .demo-real-buttons button .btn strong, .demo-real-page.lang_sk .demo-real-buttons button .btn strong {
font-size: 1rem
}
.demo-real-page.lang_hu .login-section h1, .demo-real-page.lang_ru .demo-real-buttons button .btn strong {
font-size: .875rem
}
.demo-real-page.lang_hu .demo-real-buttons button .btn strong {
font-size: 1rem
}
.demo-real-page.lang_lt .login-section h1 {
font-size: .938rem
}
.demo-real-page.lang_lt .demo-real-buttons button .btn strong {
font-size: 1rem
}
.demo-real-page.lang_mt .demo-real-buttons button .btn strong, .demo-real-page.lang_mt .login-section h1 {
font-size: .938rem
}
.demo-real-page.lang_nl .regulation-footer a {
display: inline-block
}
}
.demo-real-page.lang_ja .login-form .risk-warning-bottom span {
word-break: break-all
}
@media only screen and (orientation: portrait)and (max-width: 56em) {
.demo-real-page .rw-top .login-form-inner-wrapper, .demo-real-page.rw-sticky-bottom .login-form-inner-wrapper {
height: 100%
}
}
@media only screen and (orientation: portrait)and (max-width: 56em)and (max-height: 740px) {
.demo-real-page .rw-top .login-form-inner-wrapper, .demo-real-page.rw-sticky-bottom .login-form-inner-wrapper {
height: auto
}
.demo-real-page .rw-top .login-form-title:before, .demo-real-page.rw-sticky-bottom .login-form-title:before {
height: 100rem
}
.demo-real-page .rw-top .app-images-wrapper, .demo-real-page.rw-sticky-bottom .app-images-wrapper {
display: none
}
}
@media only screen and (orientation: landscape)and (max-width: 56em)and (max-height: 38em) {
.demo-real-page .rw-top .login-form-inner-wrapper, .demo-real-page.rw-sticky-bottom .login-form-inner-wrapper {
height: auto
}
}
@media only screen and (min-width: 56.063em)and (orientation: landscape)and (max-height: 38em)and (max-width: 90em) {
.demo-real-page .risk-warning-top + .header-login-wrapper {
min-height: 4.5rem
}
.demo-real-page .risk-warning-top + .header-login-wrapper .language-wrapper {
padding: 1rem 2rem
}
.demo-real-page .rw-top .login-section h1 {
font-size: 1rem;
margin-bottom: .5rem
}
.demo-real-page .rw-top .login-section h2 {
font-size: 1.25rem
}
.demo-real-page .rw-top .demo-real-buttons button {
height: 4rem;
min-height: 4rem
}
.demo-real-page .rw-top .demo-real-buttons button svg {
height: 30px
}
.demo-real-page .rw-top .demo-real-buttons button .btn strong {
font-size: 1rem
}
}
.demo-real-page .risk-warning {
margin: 0 auto;
max-width: 90rem;
min-height: 0
}
@media only screen and (max-width: 35em) {
.demo-real-page .risk-warning {
font-size: .75rem;
padding: 1rem
}
}
@media only screen and (min-width: 35.063em) {
.demo-real-page .risk-warning {
font-size: .875rem;
padding: 1rem 5rem
}
}
.demo-real-page .risk-warning.login-warning {
background-color: transparent
}
.demo-real-page .cookies-policy-disclaimer {
background-color: var(--surface-primary);
bottom: 0;
color: var(--on-primary-regular);
left: 0;
padding: .5rem;
position: fixed;
right: 0;
text-align: center;
width: 100%;
z-index: 1
}
.demo-real-page .cookies-policy-disclaimer .wrapper {
align-items: center;
color: var(--on-primary-regular);
display: flex;
flex-wrap: wrap;
justify-content: center
}
.demo-real-page .cookies-policy-disclaimer .wrapper button {
background-color: transparent;
border-color: var(--outline-button);
border-radius: 5rem;
border-style: solid;
border-width: 1px;
color: var(--on-primary-regular);
margin: .5rem 1rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.demo-real-page .cookies-policy-disclaimer .wrapper button:hover {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
}
.demo-real-page .cookies-policy-disclaimer .wrapper button.active, .demo-real-page .cookies-policy-disclaimer .wrapper button:active {
background-color: var(--surface-button-primary-focused);
border-color: var(--surface-button-primary-focused);
color: var(--on-primary-regular)
}
.demo-real-page .cookies-policy-disclaimer .wrapper button:disabled {
opacity: .4;
pointer-events: none
}
.demo-real-page .cookies-policy-disclaimer .wrapper a {
background-color: transparent;
background-image: linear-gradient(currentColor, currentColor);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
border: 0 solid transparent;
border-radius: 0;
color: var(--on-primary-regular);
text-decoration: none;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.demo-real-page .cookies-policy-disclaimer .wrapper a:hover {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
}
.demo-real-page .cookies-policy-disclaimer .wrapper a.active, .demo-real-page .cookies-policy-disclaimer .wrapper a:active {
background-color: transparent;
border-color: transparent;
color: var(--on-surface-primary-focused)
}
.demo-real-page .cookies-policy-disclaimer .wrapper a:disabled {
opacity: .4;
pointer-events: none
}
.demo-real-page .cookies-policy-disclaimer .wrapper a:hover {
background-size: 0 1px
}
.demo-real-page .regulation-footer p {
color: #a5a5a5
}
.cookies-policy-disclaimer {
text-align: center
}
@media only screen and (max-width: 56em) {
.cookies-policy-disclaimer .wrapper button {
margin-left: 0
}
}
.demo-real, .register-new-user {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between
}
@media only screen and (max-width: 35em) {
.register-new-user {
height: auto;
min-height: 100%
}
.login-section, .register-new-user {
padding-bottom: var(--sticky-contact-height)
}
}
.risk-warning {
font-size: .875rem;
margin: 0 auto;
max-width: 64em;
min-height: 3em;
padding: 1rem;
width: 100%
}
.risk-warning p, .risk-warning-bottom {
color: var(--on-surface-primary);
line-height: 1.25;
margin: 0;
padding: 0 0 1em;
text-align: center
}
.risk-warning-top {
background-color: var(--black);
color: var(--white);
font-size: .875rem;
padding: .5rem;
width: 100%
}
@media only screen and (min-width: 56.063em) {
.risk-warning-top {
margin: 0 -1rem;
width: calc(100% + 2rem)
}
}
.risk-warning-top > div > div > span {
display: block;
margin: 0 auto;
max-width: 84rem;
text-align: center
}
.country-code-IL .risk-warning-top {
background-color: var(--surface-container-dim-extra-light);
color: var(--on-surface-regular)
}
.risk-warning .portuguese-warning {
align-items: center
}
@media only screen and (min-width: 56.063em) {
.risk-warning .portuguese-warning {
display: flex
}
}
.risk-warning .portuguese-warning-text {
border: 2px solid var(--outline-strong);
color: var(--on-surface-regular);
line-height: 1;
margin-bottom: .625rem;
padding: .625rem
}
@media only screen and (min-width: 56.063em) {
.risk-warning .portuguese-warning-text {
flex: 0 1 50%;
min-width: 50%
}
}
.risk-warning .portuguese-warning-text strong {
display: block;
font-size: .875rem
}
.risk-warning .portuguese-warning-text span {
font-size: .75rem;
font-weight: 700
}
.risk-warning .portuguese-warning-image {
padding: 0 .3125rem
}
@media only screen and (min-width: 56.063em) {
.risk-warning .portuguese-warning-image {
flex: 0 1 50%;
min-height: 60px;
min-width: 50%
}
}
.risk-warning .portuguese-warning-image img {
display: inline-block;
height: auto;
max-width: 100%;
vertical-align: middle
}
.regulation-footer {
font-size: .75rem;
padding-bottom: 4rem
}
.regulation-footer > div {
padding-bottom: 1em;
text-align: center
}
.regulation-footer > div.regulation-links a {
display: inline-block;
line-height: 1.6
}
.regulation-footer > div.regulation-links a:after {
color: var(--outline-light);
content: "|";
display: inline-block;
padding: 0 .5em
}
.regulation-footer > div.regulation-links a:last-child:after {
display: none
}
.regulation-footer .grecaptcha-footer, .regulation-footer p {
color: var(--on-surface-extra-light);
line-height: 1.3;
padding: 0 0 1em
}
.load-more, .loading label .win-ring {
background-image: var(--img-loading)
}
.login-form-nav {
display: none
}
.input-label-custom label {
display: none !important
}
@supports (will-change:auto) {
.input-label-custom label {
display: inline-block !important
}
}
.affiliate-logo {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
height: 3rem;
margin-bottom: 2.5rem
}
.affiliate-logo.investingcom {
background-image: var(--img-logo-investingcom)
}
.affiliate-logo.finanzennet {
background-image: var(--img-logo-finanzennet)
}
.affiliate-logo.barchart {
background-image: var(--img-logo-barchart);
height: 2rem
}
.affiliate-text {
color: var(--on-surface-light);
display: none;
font-size: 1rem;
margin-bottom: .5rem;
text-align: center
}
.affiliate-text.finanzennet {
display: block
}
.affiliate-text.barchart {
color: var(--on-surface-regular);
display: block
}
@media only screen and (max-width: 35em) {
.affiliate-logo {
height: 2.5rem
}
.register-new-user .affiliate-logo {
margin-bottom: 0
}
.login-section .affiliate-text {
margin: .75rem 0 .25rem
}
.login-section .affiliate-logo {
margin: .75rem 0
}
.login-section .affiliate-text[data-show=true] + .affiliate-logo {
margin-top: 0
}
}
.rw-sticky-bottom .sticky-bottom {
position: relative
}
.rw-sticky-bottom .cookies-policy-disclaimer {
bottom: 100%;
position: absolute
}
.rw-sticky-bottom .risk-warning-top {
flex: 0 0 auto;
padding: .75rem
}
@media only screen and (max-width: 35em) {
.rw-sticky-bottom .risk-warning-top {
margin-bottom: var(--sticky-contact-height)
}
}
.rw-sticky-bottom.demo-real-page {
background: linear-gradient(180deg, #093160 30%, #0c2780 60%)
}
@media only screen and (max-width: 35em) {
.rw-sticky-bottom.demo-real-page .sticky-bottom .risk-warning-top {
margin-bottom: 0
}
}
.grecaptcha-badge {
z-index: 1000
}
.registration-page .grecaptcha-badge {
visibility: hidden
}
.sticky-support-container {
padding: 0 !important
}
.sticky-support-btn {
align-items: center;
background: var(--surface-sub);
border-radius: .5rem;
bottom: .5rem;
display: flex;
flex-direction: column;
height: 3.5rem;
justify-content: space-around;
left: .5rem;
margin: 0;
padding: .125rem;
position: fixed;
text-align: center;
width: 3.5rem
}
.sticky-support-btn, .sticky-support-btn:focus, .sticky-support-btn:hover {
color: var(--on-primary-regular)
}
.lang_bg .sticky-support-btn, .lang_cn .sticky-support-btn, .lang_da .sticky-support-btn, .lang_el .sticky-support-btn, .lang_ja .sticky-support-btn, .lang_no .sticky-support-btn, .lang_ru .sticky-support-btn, .lang_sv .sticky-support-btn, .lang_zh .sticky-support-btn {
width: 4.5rem
}
.lang_et .sticky-support-btn, .lang_hu .sticky-support-btn, .lang_nl .sticky-support-btn {
width: 5.5rem
}
.sticky-support-btn svg {
min-height: 1.25rem;
width: 100%;
fill: currentColor;
flex: 0 0 1.25rem
}
.sticky-support-btn span {
font-size: .6875rem;
line-height: 1.2
}
@media only screen and (min-width: 56.063em) {
.change-password-dialog {
bottom: auto;
top: 15vh
}
.change-password-dialog .dialog-body {
display: flex;
min-height: 45vh
}
.change-password-dialog .dialog-body .form {
display: flex;
flex-direction: column
}
.change-password-dialog .dialog-body .form fieldset, .change-password-dialog .dialog-body .form > div {
width: 100%
}
.change-password-dialog .dialog-body .form .form-actions {
margin-top: auto
}
}
@media only screen and (min-width: 120.063em) {
.change-password-dialog {
top: 12vh
}
.change-password-dialog .dialog-body {
min-height: 33vh
}
}
.change-password-dialog .dialog-header h3:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e9ab";
margin-top: -.875rem
}
.change-password-dialog .form fieldset {
padding-bottom: 1.5rem
}
.change-password-dialog .form fieldset li + li > div {
margin-top: 1rem
}
.change-password-dialog .form fieldset li > div {
padding: 0;
position: relative
}
.change-password-dialog .form fieldset li > div:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--on-surface-extra-light);
font-size: 1.375rem;
left: .5rem;
position: absolute;
top: .5rem
}
.change-password-dialog .form fieldset li > div.new-password:before, .change-password-dialog .form fieldset li > div.old-password:before {
content: "\e9ab"
}
.change-password-dialog .form fieldset li > div.confirm-password:before {
content: "\e918"
}
.change-password-dialog .form fieldset li > div input {
border: none;
border-bottom: 1px solid var(--outline-medium);
border-radius: 0;
padding: .625rem 2.5rem
}
.change-password-dialog .form fieldset li > div input::-ms-clear, .change-password-dialog .form fieldset li > div input::-ms-reveal {
display: none
}
.change-password-dialog .form fieldset li > div input:focus + label, .change-password-dialog .form fieldset li > div input:not(:placeholder-shown) + label {
font-size: .75rem;
transform: translateY(-.5rem)
}
.change-password-dialog .form fieldset li > div input:placeholder-shown + label {
opacity: 0
}
.change-password-dialog .form fieldset li > div label {
color: var(--on-surface-light);
font-size: 1rem;
left: 0;
opacity: .6;
padding-inline-start: 2.5rem;
pointer-events: none;
position: absolute;
top: 0;
transform: translateY(1rem);
transition: transform .15s ease-in-out;
width: 100%
}
.change-password-dialog .form fieldset li > div button.icon {
background: transparent;
border: none;
border-radius: 0;
font-size: 1.25rem;
min-height: 24px;
min-width: 24px;
padding: .25rem;
position: absolute;
right: .625rem;
top: 3px;
fill: var(--on-surface-medium)
}
.change-password-dialog .form-actions {
justify-content: center;
padding: .5rem 0 0
}
.change-password-dialog .form-actions div {
flex: 1 1 40%;
text-align: center
}
.change-password-dialog .form-actions button {
background-color: var(--surface-button-primary);
border: 1px solid transparent;
border-radius: 0;
color: var(--on-primary-regular);
font-weight: 700;
max-width: 19rem;
padding: .5em 1em;
transition: .2s ease-in-out;
width: 100%
}
@media only screen and (hover: hover)and (pointer: fine) {
.change-password-dialog .form-actions button:hover {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.change-password-dialog .form-actions button.active, .change-password-dialog .form-actions button:active {
background-color: var(--surface-button-primary-focused);
border-color: transparent;
color: var(--on-primary-regular)
}
.change-password-dialog .form-actions button:disabled {
opacity: .4;
pointer-events: none
}
.st0 {
fill: #4e96ea
}
.st1 {
fill: none;
stroke: #e1e1e1;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st2 {
fill: none;
stroke: #fff;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st3 {
fill: none;
stroke: #c3c3c3;
stroke-width: 11;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st4 {
fill: #f7f7f7
}
.st5 {
fill: #e5ebf2
}
.st6 {
fill: none;
stroke: #d6dde5;
stroke-miterlimit: 10
}
.st7 {
fill: none;
stroke: #abb9c9;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st8 {
fill: none;
stroke: #c8d0da;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st9 {
fill: #fff
}
.st10 {
fill: none;
stroke: #e6eaed;
stroke-miterlimit: 10
}
.st11 {
fill: #3d5e85
}
.st12 {
fill: none;
stroke: #d6dde5;
stroke-width: 2;
stroke-miterlimit: 10
}
.st13 {
fill: url(/131711/Resources/dist/#svg-graph-mountain-elem_1_);
stroke: #17a1ff;
stroke-width: 2;
stroke-miterlimit: 10
}
.st14 {
fill: none;
stroke: #ccc;
stroke-miterlimit: 10
}
.st15 {
fill: #8cc176
}
.st16 {
fill: #b82c0c
}
.st17 {
display: none
}
.st18 {
fill: #fff
}
.st18, .st19 {
display: inline
}
.st20 {
fill: #0f6a3e
}
.st21 {
fill: #e4e8ed
}
.st22 {
fill: none;
stroke: #9eafc2;
stroke-width: 20;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st23 {
fill: #0c2780
}
.st24 {
fill: #fefefe
}
.st25 {
fill: #90a3ba
}
.st26 {
fill: none;
stroke: #3f6187;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10
}
.st27 {
fill: #0e284c
}
.st28 {
fill: #0a2b53
}
.st29 {
fill: #2b827b
}
.st30 {
fill: #ebebeb
}
#CunninghamClientPortal .form .alert-box.alert, #CunninghamClientPortal .form .alert.notification {
border-radius: .5rem;
margin: 0 0 1rem;
padding: .625rem
}
#CunninghamClientPortal .form .alert-box.alert:before, #CunninghamClientPortal .form .alert.notification:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e95e";
font-size: 1.5rem;
margin-inline-end: .625rem;
opacity: .7
}
#CunninghamClientPortal .form .alert-box.alert span, #CunninghamClientPortal .form .alert.notification span {
flex: 1 1 100%
}
#CunninghamClientPortal .form .alert-box.alert .close, #CunninghamClientPortal .form .alert.notification .close {
margin-inline-start: .625rem
}
#CunninghamClientPortal .form .alert-box.alert .close:before, #CunninghamClientPortal .form .alert.notification .close:before {
font-size: 1.125rem;
line-height: 1.25
}
.experiment {
--sticky-contact-height: auto;
--on-surface-extra-light: rgba(0, 0, 0, .25);
--surface-primary: #0c2780
}
.experiment .login-section {
max-width: none
}
.experiment .login-register {
margin: 0
}
.experiment .login .login-form {
padding: 0
}
.experiment .login .login-form .full-width:nth-child(n+2) .input-label-custom {
margin-top: 0
}
@media only screen and (max-width: 56em) {
.experiment .login .login-form:has(.affiliate-logo) {
padding-top: 2.5rem
}
}
.experiment .login .login-form .affiliate-logo {
margin-bottom: 0
}
.experiment .login .login-form-wrapper {
padding: 0
}
.experiment .login .form-box .contact-btn-row {
margin: 0;
position: static
}
.experiment .exp-hide {
display: none !important
}
@media only screen and (max-width: 56em) {
.experiment .exp-desktop-only {
display: none !important
}
}
@media only screen and (min-width: 56.063em) {
.experiment .exp-mobile-only {
display: none !important
}
.experiment .header-login-wrapper {
padding-block-start: 1rem
}
.experiment .register-new-user .login-main-container {
border-radius: var(--radius-lg);
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .15);
display: flex;
margin: 2rem auto 0;
max-width: 55.25rem
}
}
.experiment .register-new-user .signup-title {
color: var(--on-surface-primary);
font-size: 1.75rem;
font-weight: 600;
margin-bottom: .75rem;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .signup-title {
font-size: 1.5rem
}
}
.experiment .register-new-user .form-box {
border: 0;
box-shadow: none;
display: flex;
flex-direction: column;
padding: 1.75rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .form-box {
border: 1px solid #ddd;
border-end-end-radius: var(--radius-lg);
border-start-end-radius: var(--radius-lg);
padding: 2rem
}
}
.experiment .register-new-user .form-box .login-form-wrapper > fieldset > ul {
padding-block-start: .75rem
}
.experiment .register-new-user .form-box .input-label-custom {
margin-block-end: 1.75rem;
position: relative
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .form-box .input-label-custom {
margin-block-end: 1.5rem
}
}
.experiment .register-new-user .form-box .input-label-custom button.icon, .experiment .register-new-user .form-box .input-label-custom svg {
margin: 0 .75rem;
position: absolute;
width: 1rem
}
.experiment .register-new-user .form-box .input-label-custom button.icon path, .experiment .register-new-user .form-box .input-label-custom svg path {
fill: var(--on-surface-extra-light)
}
.experiment .register-new-user .form-box .input-label-custom > svg {
height: 1rem;
inset-inline: 0 auto;
opacity: 1;
top: .9375rem
}
.experiment .register-new-user .form-box .input-label-custom button.icon {
background: none;
border: none;
font-size: 1rem;
height: auto;
top: .4375rem;
inset-inline: auto 0;
line-height: 1;
min-height: 0;
min-width: 0;
padding: .5rem 0
}
.experiment .register-new-user .form-box .input-label-custom button.icon svg {
display: none
}
.experiment .register-new-user .form-box .input-label-custom button.icon:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--on-surface-light);
display: block
}
.experiment .register-new-user .form-box .input-label-custom input {
border: 1px solid var(--outline-medium);
border-radius: var(--radius-sm);
display: block;
font-size: 1rem;
line-height: 1.2;
padding: .75rem 2.5rem !important
}
.experiment .register-new-user .form-box .input-label-custom input[type=text] ~ button:before {
content: "\e9a2"
}
.experiment .register-new-user .form-box .input-label-custom input[type=password] ~ button:before {
content: "\e919"
}
.experiment .register-new-user .form-box .input-label-custom label {
display: none !important
}
.experiment .register-new-user .form-box .input-label-custom small {
background-color: transparent;
color: var(--on-surface-alert);
font-size: .875em;
margin-top: .25rem;
padding: 0
}
.experiment .register-new-user .form-box .form-actions {
padding: 0
}
.experiment .register-new-user .form-box .form-actions button {
background: var(--gradient-cta-btn) no-repeat;
border: none;
border-radius: .5rem;
color: var(--on-primary-regular);
font-size: 1.25rem;
font-weight: 600;
padding: 1rem;
transition: .2s ease-in-out;
width: 100%
}
.experiment .register-new-user .form-box .form-actions button.active, .experiment .register-new-user .form-box .form-actions button:active, .experiment .register-new-user .form-box .form-actions button:hover {
background: var(--surface-tertiary-fixed)
}
.experiment .register-new-user .form-box .form-actions button:disabled {
opacity: .4;
pointer-events: none
}
.experiment .register-new-user .form-box .keep-logged-in {
margin-block-end: 1.5rem;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .form-box .keep-logged-in {
margin-block-end: 1.75rem
}
}
.experiment .register-new-user .form-box .keep-logged-in .checkbox-custom-text {
margin-bottom: 0
}
.experiment .register-new-user .form-box .social-account[data-show=false] + fieldset .receive-emails {
margin-block-start: 1.75rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .form-box .social-account[data-show=false] ~ .keep-logged-in {
margin-block-start: 1.75rem
}
}
.experiment .register-new-user .form-box .contact-btn-row {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between
}
.experiment .register-new-user .form-box .contact-btn-row a {
font-size: .9375rem
}
.experiment .register-new-user .form-box .contact-btn-row > div {
flex: 0 0 auto
}
.experiment .register-new-user .form-box .contact-btn-row button {
align-items: center;
background-color: var(--surface-button-secondary);
border: 1px solid transparent;
border-radius: 5rem;
color: var(--on-surface-primary);
display: flex;
font-weight: 600;
line-height: 1.2;
min-height: 2.75rem;
padding: .5rem 1rem;
transition: .2s ease-in-out
}
@media only screen and (hover: hover)and (pointer: fine) {
.experiment .register-new-user .form-box .contact-btn-row button:hover {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
}
.experiment .register-new-user .form-box .contact-btn-row button.active, .experiment .register-new-user .form-box .contact-btn-row button:active {
background-color: var(--surface-tertiary-fixed);
border-color: transparent;
color: var(--on-primary-regular)
}
.experiment .register-new-user .form-box .contact-btn-row button:disabled {
opacity: .4;
pointer-events: none
}
.experiment .register-new-user .form-box .contact-btn-row button:before {
font-size: 1.25rem;
margin-inline-end: .5rem
}
.experiment .register-new-user .form-box .contact-btn-row button.icon-sms:before {
content: "\e93e"
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .form-box .contact-btn-row.exp-without-social {
margin-block-start: 1.5rem
}
}
.experiment .register-new-user fieldset, .experiment .register-new-user fieldset li {
padding: 0
}
.experiment .register-new-user .receive-emails {
color: var(--on-surface-regular);
font-size: .875rem;
margin-block-end: 1.75rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .receive-emails {
margin: 0 auto;
max-width: 42.375rem;
padding: 1.5rem 0 0
}
.experiment .register-new-user .receive-emails > div {
padding: 0 1.5rem
}
}
.experiment .register-new-user .receive-emails label a {
font-size: inherit
}
.experiment .register-new-user .social-account h4 {
color: var(--on-surface-medium);
font-size: .8125rem;
font-weight: 700;
padding: 1rem 0 .75rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .social-account h4 {
padding-block-start: .625rem
}
}
.experiment .register-new-user .social-account > div {
margin-block-end: 1.75rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .social-account > div {
margin-block-end: 1.5rem
}
}
.experiment .register-new-user .disclamer {
color: var(--on-surface-light);
font-size: .6875rem;
padding: 0 1.75rem 1.75rem;
text-align: center
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .disclamer {
margin: 0 auto;
max-width: 55.25rem
}
}
.experiment .register-new-user .disclamer p {
margin: 0
}
.experiment .register-new-user .side-content {
--shadow-color-start: rgba(0, 0, 0, .1);
--shadow-color-end: transparent;
--shadow-gradient: linear-gradient(to bottom, var(--shadow-color-start), var(--shadow-color-end) 2rem, var(--shadow-color-end) calc(100% - 2rem), var(--shadow-color-start));
align-items: center;
background-color: var(--surface-primary);
background-image: var(--shadow-gradient), var(--img-signin-plus-bg);
background-position: 0 0, left 100% bottom -3rem;
background-repeat: no-repeat;
background-size: 100% 100%, 23rem auto;
display: flex;
justify-content: center;
margin-bottom: 4.875rem;
padding: 1.5rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .side-content {
background-position: 0 0, 2rem 250%;
background-size: 100% 100%, 125% auto;
border-end-start-radius: var(--radius-lg);
border-start-start-radius: var(--radius-lg);
justify-content: flex-start;
margin-bottom: 0;
min-width: 22.5rem;
--shadow-gradient: linear-gradient(to left, var(--shadow-color-start) 1rem, var(--shadow-color-end) 2.5rem)
}
}
.experiment .register-new-user .side-content ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .side-content ul {
gap: 2rem
}
}
.experiment .register-new-user .side-content ul li {
color: var(--on-primary-regular);
display: flex;
font-size: .9375rem;
gap: .5rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .side-content ul li {
font-size: 1.125rem
}
}
.experiment .register-new-user .side-content ul li:before {
font-family: icoplus !important;
speak: none;
font-feature-settings: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--on-surface-secondary-fixed);
content: "\e997";
font-size: 1.5rem
}
.experiment .register-new-user .side-content ul li span {
margin-block-start: .25rem
}
@media only screen and (min-width: 56.063em) {
.experiment .register-new-user .side-content ul li span {
margin-block-start: .125rem
}
}
.experiment .register-new-user .side-content ul li a {
color: inherit;
text-decoration: underline
}
.experiment .register-new-user .side-content ul li a:hover {
color: inherit;
text-decoration: none
}
.experiment .register-new-user .social-account[social-icons-only=true] > div button {
flex: 0 0 3.125rem;
height: 3.125rem;
margin-inline: .375rem;
padding: .75rem
}
.experiment .register-new-user .social-account[social-icons-only=true] > div button.google-api-login {
padding: 7px 5px
}
.experiment .register-new-user .social-account[social-icons-only=true] > div button.google-api-login > span {
transform: scale(1.25)
}
.experiment .register-new-user .social-account[social-icons-only=true] > div button > svg {
height: 1.5rem;
width: 1.5rem
}
.experiment .register-new-user .alert-box, .experiment .register-new-user .notification {
border-radius: var(--radius);
margin-inline: 0;
max-width: 100%;
padding-bottom: .5rem
}