/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
*:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(symbol):not(svg *):not(symbol *)) {
  all: unset;
  display: revert;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

a, button {
  cursor: revert;
}

ol, ul, menu, summary {
  list-style: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
  appearance: revert;
}

:where(pre) {
  all: revert;
  box-sizing: border-box;
}

::-moz-placeholder {
  color: inherit;
}

::placeholder {
  color: inherit;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  word-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

::-webkit-details-marker {
  display: none;
}

:host, :root {
  --du-text-size-3xs: 6px;
  --du-text-size-2xs: 8px;
  --du-text-size-xs: 10px;
  --du-text-size-sm: 12px;
  --du-text-size-default: 14px;
  --du-text-size-md: 16px;
  --du-text-size-lg: 28px;
  --du-text-size-xl: 30px;
  --du-text-size-2xl: 32px;
  --du-text-lh-2xs: 1;
  --du-text-lh-xs: 1.25;
  --du-text-lh-sm: 1.4;
  --du-text-lh-md: 1.5;
  --du-text-lh-lg: 1.75;
  --du-text-lh-xl: 2;
  --du-text-lh-2xl: 2.4;
  --du-text-weight-light: 300;
  --du-text-weight-normal: 400;
  --du-text-weight-semibold: 500;
  --du-text-weight-bold: 700;
  --du-text-align-left: start;
  --du-text-align-right: right;
  --du-text-align-center: center;
  --du-brand-white: #ffffff;
  --du-brand-dark-gray: #0e0e0e;
  --du-brand-red-coral: #ff444f;
  --du-brand-orange: #ff6444;
  --du-brand-secondary: #85acb0;
  --du-deriv-airtm: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
  --du-deriv-banxa: linear-gradient(90deg, #000000 0%, #4ac0ba 96.35%);
  --du-deriv-bitcoin: linear-gradient(90deg, #f89e32 0%, #f7931b 103.12%);
  --du-deriv-credit: linear-gradient(274.73deg, #464750 3.82%, #0e0f11 88.49%);
  --du-deriv-dp2p: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
  --du-deriv-fasapay: linear-gradient(90deg, #f6931c 0%, #4873ac 95.22%);
  --du-deriv-jeton: linear-gradient(90deg, #ff7635 0%, #ff671f 100%);
  --du-deriv-mastercard: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
  --du-deriv-neteller: linear-gradient(90deg, #98cc53 0%, #8dc640 100%);
  --du-deriv-paylivre: linear-gradient(90deg, #352caa 0%, #9a6bfc 100%);
  --du-deriv-paysafe: linear-gradient(90deg, #e3001b 0%, #008ac9 100%);
  --du-deriv-perfectmoney: gradient-perfectmoney;
  --du-deriv-skrill: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
  --du-deriv-sticpay: linear-gradient(90deg, #f36938 0%, #f25822 100%);
  --du-deriv-virtual: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%);
  --du-deriv-visa: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
  --du-deriv-webmoney: linear-gradient(90deg, #1a77ac 0%, #0068a3 100%);
  --du-app-card-virtual: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%);
  --du-app-card-virtual-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
}

:host .theme--light, :root .theme--light {
  --du-general-main-1: #ffffff;
  --du-general-main-2: #ffffff;
  --du-general-main-3: #999999;
  --du-general-main-4: rgba(255, 255, 255, .7);
  --du-general-section-1: #f2f3f4;
  --du-general-section-2: #f2f3f4;
  --du-general-section-3: #fafafa;
  --du-general-section-4: #f5f7fa;
  --du-general-section-5: #f2f3f4;
  --du-general-section-6: #f2f3f4;
  --du-general-disabled: #eaeced;
  --du-general-hover: #e6e9e9;
  --du-general-hover-1: #333333;
  --du-general-active: #d6dadb;
  --du-text-general: #333333;
  --du-text-primary: #999999;
  --du-text-less-prominent: #999999;
  --du-text-prominent: #333333;
  --du-text-disabled: #999999;
  --du-text-disabled-1: #d6d6d6;
  --du-text-loss-danger: #ec3f3f;
  --du-text-profit-success: #4bb4b3;
  --du-text-warning: #ffad3a;
  --du-text-red: #ff444f;
  --du-text-green: #17eabd;
  --du-text-blue: #0796e0;
  --du-text-info-blue: #377cfc;
  --du-text-black: #000000;
  --du-text-orange: #ff9c13;
  --du-system-dark-2-general-text: #c2c2c2;
  --du-text-info-blue-background: #dfeaff;
  --du-text-colored-background: #ffffff;
  --du-icon-light-background: #5c5c5c;
  --du-icon-dark-background: #ffffff;
  --du-icon-gray-background: #f2f3f4;
  --du-icon-black-plus: #000000;
  --du-text-status-info-blue: #377cfc;
  --du-text-hint: #333333;
  --du-text-white: #ffffff;
  --du-text-black-transparent: rgba(0, 0, 0, .72);
  --du-purchase-main-1: #4bb4b3;
  --du-purchase-section-1: #3d9494;
  --du-purchase-main-2: #ec3f3f;
  --du-purchase-section-2: #d33636;
  --du-purchase-disabled-main: #eaeced;
  --du-purchase-disabled-section: #e6e9e9;
  --du-button-primary-default: var(--du-brand-red-coral);
  --du-button-secondary-default: #999999;
  --du-button-tertiary-default: transparent;
  --du-button-primary-light-default: rgba(255, 68, 79, .16);
  --du-button-primary-hover: #eb3e48;
  --du-button-secondary-hover: rgba(0, 0, 0, .08);
  --du-button-tertiary-hover: rgba(255, 68, 79, .08);
  --du-button-primary-light-hover: rgba(255, 68, 79, .24);
  --du-button-toggle-primary: #0796e0;
  --du-button-toggle-secondary: #d6dadb;
  --du-button-toggle-alternate: #ffffff;
  --du-overlay-outside-dialog: rgba(0, 0, 0, .72);
  --du-overlay-inside-dialog: rgba(255, 255, 255, .96);
  --du-shadow-menu: rgba(0, 0, 0, .16);
  --du-shadow-menu-2: rgba(0, 0, 0, .16);
  --du-shadow-drop: rgba(0, 0, 0, .08);
  --du-shadow-box: rgba(0, 0, 0, .4);
  --du-state-normal: #ffffff;
  --du-state-hover: #e6e9e9;
  --du-state-active: #d6dadb;
  --du-state-disabled: #eaeced;
  --du-checkbox-disabled-gray: #d6d6d6;
  --du-sidebar-tab: #d6d6d6;
  --du-border-normal: #d6dadb;
  --du-border-normal-1: #d6dadb;
  --du-border-normal-2: #d6dadb;
  --du-border-normal-3: #d6d6d6;
  --du-border-hover: #999999;
  --du-border-hover-1: #5c5c5c;
  --du-border-active: var(--du-brand-secondary);
  --du-border-disabled: #eaeced;
  --du-border-divider: #f2f3f4;
  --du-fill-normal: #ffffff;
  --du-fill-normal-1: #c2c2c2;
  --du-fill-hover: #999999;
  --du-fill-active: var(--du-brand-secondary);
  --du-fill-disabled: #eaeced;
  --du-status-default: #eaeced;
  --du-status-adjustment: #999999;
  --du-status-danger: #ec3f3f;
  --du-status-success: #4bb4b3;
  --du-status-warning: #ffad3a;
  --du-status-warning-transparent: rgba(255, 173, 58, .16);
  --du-status-transfer: #ff6444;
  --du-status-info: #377cfc;
  --du-status-colored-background: #ffffff;
  --du-status-alert-background: rgba(255, 173, 58, .16);
  --du-dashboard-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
  --du-dashboard-app: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%);
  --du-payment-skrill: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
  --du-payment-visa: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
  --du-payment-mastercard: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
  --du-payment-credit-and-debit: linear-gradient(274.73deg, #464750 3.82%, #0e0f11 88.49%);
  --du-payment-bitcoin: linear-gradient(90deg, #f89e32 0%, #f7931b 103.12%);
  --du-payment-usd-coin: linear-gradient(90deg, #3d83cf 0%, #2775ca 100%);
  --du-payment-neteller: linear-gradient(90deg, #98cc53 0%, #8dc640 100%);
  --du-payment-webmoney: linear-gradient(90deg, #1a77ac 0%, #0068a3 100%);
  --du-payment-jeton: linear-gradient(90deg, #ff7635 0%, #ff671f 100%);
  --du-payment-sticpay: linear-gradient(90deg, #f36938 0%, #f25822 100%);
  --du-payment-airtm: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
  --du-payment-dp2p: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
  --du-payment-deriv: linear-gradient(90deg, #ff6444 0%, #ff444f 100%);
  --du-transparent-success: rgba(75, 180, 179, .92);
  --du-transparent-success-secondary: rgba(0, 136, 50, .08);
  --du-transparent-blue-secondary: rgba(44, 154, 255, .08);
  --du-transparent-info: rgba(55, 124, 252, .16);
  --du-transparent-hint: rgba(55, 124, 252, .08);
  --du-transparent-danger: rgba(255, 68, 79, .16);
  --du-transparent-danger-secondary: rgba(230, 25, 14, .08);
  --du-transparent-correct-message: rgba(75, 180, 179, .1607843137);
  --du-transparent-fake-message: rgba(236, 63, 63, .1607843137);
  --du-transparent-warning-secondary: rgba(255, 156, 19, .08);
  --du-gradient-success: linear-gradient(to top, #ffffff, rgba(75, 180, 179, .16));
  --du-gradient-danger: linear-gradient(to top, #ffffff, rgba(255, 68, 79, .16));
  --du-contract-gradient-danger: linear-gradient(to top, #ffffff 85%, rgba(255, 68, 79, .16));
  --du-gradient-right-edge: linear-gradient(to right, rgba(255, 255, 255, 0) -5%, #ffffff 71%);
  --du-gradient-blue: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%);
  --du-gradient-gold: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
  --du-gradient-green: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
  --du-badge-white: #ffffff;
  --du-badge-blue: #0677af;
  --du-badge-blue-secondary: #0777c4;
  --du-badge-light-blue: #0677af;
  --du-badge-violet: #2a3052;
  --du-badge-success: #4bb4b3;
  --du-badge-success-secondary: #007a22;
  --du-badge-warning: #ffad3a;
  --du-badge-warning-secondary: #c47d00;
  --du-badge-danger: #ec3f3f;
  --du-badge-danger-secondary: #c40000;
  --du-badge-purple: #722fe4;
  --du-traders-hub-banner-border-color: #e6e9e9;
  --du-derivs-banner-ready-bg-color: #e2f3f3;
  --du-derivs-banner-ready-tick-bg-color: #4ab4b3;
  --du-derivs-banner-border-color: #e6e9e9;
  --du-derivs-banner-dot-color: #d6d6d6;
  --du-derivs-banner-active-dot-color: #ff444f;
  --du-derivs-card-active-gradient-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .16) 100%);
  --du-deriv-demo-bg-color: #fff8f9;
  --du-deriv-demo-divider-color: #fff0f1;
  --du-deriv-eu-disclaimer: #e6e9e9;
  --du-deriv-box-shadow: 0px 12px 16px -4px rgba(14, 14, 14, .08), 0px 4px 6px -2px rgba(14, 14, 14, .03);
  --du-demo-text-color-1: #c2c2c2;
  --du-demo-text-color-2: #ffffff;
  --du-header-background-mt5: #e6f5ff;
  --du-header-background-others: #e8fdf8;
}

:host .theme--dark, :root .theme--dark {
  --du-general-main-1: #0e0e0e;
  --du-general-main-2: #151717;
  --du-general-main-3: #1d1f20;
  --du-general-main-4: rgba(14, 14, 14, .5);
  --du-general-section-1: #151717;
  --du-general-section-2: #0e0e0e;
  --du-general-section-3: #242828;
  --du-general-section-4: #242828;
  --du-general-section-5: #242828;
  --du-general-section-6: #6e6e6e;
  --du-general-disabled: #1d1f20;
  --du-general-hover: #242828;
  --du-general-hover-1: #ffffff;
  --du-general-active: #323738;
  --du-text-prominent: #ffffff;
  --du-text-general: #c2c2c2;
  --du-text-less-prominent: #6e6e6e;
  --du-text-primary: #999999;
  --du-text-disabled: #3e3e3e;
  --du-text-disabled-1: #3e3e3e;
  --du-text-profit-success: #00a79e;
  --du-text-loss-danger: #cc2e3d;
  --du-text-red: #ff444f;
  --du-text-colored-background: #ffffff;
  --du-text-info-blue: #92b8ff;
  --du-text-info-blue-background: #182130;
  --du-text-status-info-blue: #377cfc;
  --du-text-hint: #c2c2c2;
  --du-text-white: #ffffff;
  --du-icon-light-background: #5c5c5c;
  --du-icon-dark-background: #ffffff;
  --du-icon-gray-background: #333333;
  --du-icon-black-plus: #ffffff;
  --du-text-black-transparent: rgba(255, 255, 255, .28);
  --du-purchase-main-1: #00a79e;
  --du-purchase-section-1: #008079;
  --du-purchase-main-2: #cc2e3d;
  --du-purchase-section-2: #a32430;
  --du-purchase-disabled-main: #1d1f20;
  --du-purchase-disabled-section: #0e0e0e;
  --du-button-primary-default: var(--du-brand-red-coral);
  --du-button-secondary-default: #6e6e6e;
  --du-button-tertiary-default: transparent;
  --du-button-primary-light-default: rgba(255, 68, 79, .16);
  --du-button-primary-hover: #eb3e48;
  --du-button-secondary-hover: rgba(255, 255, 255, .08);
  --du-button-tertiary-hover: rgba(255, 68, 79, .08);
  --du-button-primary-light-hover: rgba(255, 68, 79, .24);
  --du-button-toggle-primary: #0796e0;
  --du-button-toggle-secondary: #323738;
  --du-button-toggle-alternate: #323738;
  --du-overlay-outside-dialog: rgba(0, 0, 0, .72);
  --du-overlay-inside-dialog: rgba(14, 14, 14, .96);
  --du-shadow-menu: rgba(0, 0, 0, .84);
  --du-shadow-menu-2: rgba(0, 0, 0, .72);
  --du-shadow-drop: rgba(0, 0, 0, .64);
  --du-shadow-box: #555975;
  --du-state-normal: #0e0e0e;
  --du-state-hover: #242828;
  --du-state-active: #323738;
  --du-state-disabled: #1d1f20;
  --du-checkbox-disabled-gray: #d6d6d6;
  --du-sidebar-tab: #6e6e6e;
  --du-border-normal: #323738;
  --du-border-normal-1: #d6dadb;
  --du-border-normal-2: #999999;
  --du-border-normal-3: #6e6e6e;
  --du-border-hover: #6e6e6e;
  --du-border-hover-1: #5c5c5c;
  --du-border-active: var(--du-brand-secondary);
  --du-border-disabled: #1d1f20;
  --du-border-divider: #2e2e2e;
  --du-fill-normal: #0e0e0e;
  --du-fill-normal-1: #333333;
  --du-fill-hover: #6e6e6e;
  --du-fill-active: var(--du-brand-secondary);
  --du-fill-disabled: #1d1f20;
  --du-status-default: #eaeced;
  --du-status-adjustment: #999999;
  --du-status-danger: #cc2e3d;
  --du-status-warning: #ffad3a;
  --du-status-warning-transparent: rgba(255, 173, 58, .16);
  --du-status-success: #00a79e;
  --du-status-transfer: #ff6444;
  --du-status-info: #377cfc;
  --du-status-colored-background: #ffffff;
  --du-status-alert-background: rgba(255, 173, 58, .16);
  --du-transparent-success: rgba(0, 167, 158, .92);
  --du-transparent-success-secondary: rgba(0, 136, 50, .08);
  --du-transparent-blue-secondary: rgba(44, 154, 255, .08);
  --du-transparent-info: rgba(55, 124, 252, .16);
  --du-transparent-hint: rgba(55, 124, 252, .16);
  --du-transparent-danger: rgba(255, 68, 79, .16);
  --du-transparent-danger-secondary: rgba(230, 25, 14, .08);
  --du-transparent-correct-message: rgba(75, 180, 179, .1607843137);
  --du-transparent-fake-message: rgba(236, 63, 63, .1607843137);
  --du-transparent-warning-secondary: rgba(255, 156, 19, .08);
  --du-gradient-success: linear-gradient(to top, #0e0e0e, rgba(0, 167, 158, .16));
  --du-gradient-danger: linear-gradient(to top, #0e0e0e, rgba(255, 68, 79, .16));
  --du-contract-gradient-danger: linear-gradient(to top, #0e0e0e 85%, rgba(255, 68, 79, .16));
  --du-gradient-right-edge: linear-gradient(to right, rgba(14, 14, 14, 0) -5%, #0e0e0e 71%);
  --du-gradient-blue: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%);
  --du-gradient-gold: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
  --du-gradient-green: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
  --du-badge-white: #ffffff;
  --du-badge-blue: #0677af;
  --du-badge-blue-secondary: #0777c4;
  --du-badge-light-blue: #00c6ef;
  --du-badge-violet: #2a3052;
  --du-badge-success: #00a79e;
  --du-badge-success-secondary: #007a22;
  --du-badge-warning: #ffad3a;
  --du-badge-warning-secondary: #c47d00;
  --du-badge-danger: #cc2e3d;
  --du-badge-danger-secondary: #c40000;
  --du-badge-purple: #8f4bff;
  --du-traders-hub-banner-border-color: #242828;
  --du-derivs-banner-ready-bg-color: #e2f3f3;
  --du-derivs-banner-ready-tick-bg-color: #4ab4b3;
  --du-derivs-banner-border-color: #e6e9e9;
  --du-derivs-banner-dot-color: #d6d6d6;
  --du-derivs-banner-active-dot-color: #ff444f;
  --du-derivs-card-active-gradient-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .16) 100%);
  --du-deriv-demo-bg-color: #140506;
  --du-deriv-demo-divider-color: #323738;
  --du-deriv-eu-disclaimer: #e6e9e9;
  --du-deriv-box-shadow: 0px 12px 16px -4px rgba(14, 14, 14, .08), 0px 4px 6px -2px rgba(14, 14, 14, .03);
  --du-demo-text-color-1: #333333;
  --du-demo-text-color-2: #333333;
  --du-header-background-mt5: #e6f5ff;
  --du-header-background-others: #e8fdf8;
}

html {
  font-family: IBM Plex Sans, sans-serif;
}

.derivs-text__color--prominent {
  color: #333333;
  color: var(--du-text-prominent, #333333);
}

.derivs-text__color--less-prominent {
  color: #999999;
  color: var(--du-text-less-prominent, #999999);
}

.derivs-text__color--general {
  color: #333333;
  color: var(--du-text-general, #333333);
}

.derivs-text__color--primary {
  color: #999999;
  color: var(--du-text-primary, #999999);
}

.derivs-text__color--success {
  color: #4bb4b3;
  color: var(--du-text-profit-success, #4bb4b3);
}

.derivs-text__color--warning {
  color: #ffad3a;
  color: var(--du-text-warning, #ffad3a);
}

.derivs-text__color--error {
  color: #ec3f3f;
  color: var(--du-text-loss-danger, #ec3f3f);
}

.derivs-text__color--red {
  color: #ff444f;
  color: var(--du-text-red, #ff444f);
}

.derivs-text__color--blue {
  color: #377cfc;
  color: var(--du-text-info-blue, #377cfc);
}

.derivs-text__color--green {
  color: #17eabd;
  color: var(--du-text-green, #17eabd);
}

.derivs-text__color--white {
  color: #ffffff;
  color: var(--du-text-white, #ffffff);
}

.derivs-text__color--black {
  color: #000000;
  color: var(--du-text-black, #000000);
}

.derivs-text__color--orange {
  color: #ff9c13;
  color: var(--du-text-orange, #ff9c13);
}

.derivs-text__color--system-dark-2-general-text {
  color: #c2c2c2;
  color: var(--du-system-dark-2-general-text, #c2c2c2);
}

.derivs-text__size--2xs {
  font-size: 10px;
  line-height: 14px;
}

.derivs-text__size--xs {
  font-size: 12px;
  line-height: 18px;
}

.derivs-text__size--sm {
  font-size: 14px;
  line-height: 20px;
}

.derivs-text__size--md {
  font-size: 16px;
  line-height: 24px;
}

.derivs-text__size--lg {
  font-size: 20px;
  line-height: 30px;
}

.derivs-text__size--xl {
  font-size: 24px;
  line-height: 36px;
}

.derivs-text__size--2xl {
  font-size: 32px;
  line-height: 40px;
}

.derivs-text__size--3xl {
  font-size: 48px;
  line-height: 60px;
}

.derivs-text__size--4xl {
  font-size: 64px;
  line-height: 80px;
}

.derivs-text__size--5xl {
  font-size: 80px;
  line-height: 10px;
}

@media (max-width: 601px) {
  .derivs-text__size--2xs {
    font-size: 8px;
    line-height: 12px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--xs {
    font-size: 10px;
    line-height: 14px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--sm {
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--md {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--lg {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--xl {
    font-size: 18px;
    line-height: 26px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--2xl {
    font-size: 24px;
    line-height: 30px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--3xl {
    font-size: 28px;
    line-height: 34px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--4xl {
    font-size: 32px;
    line-height: 40px;
  }
}
@media (max-width: 601px) {
  .derivs-text__size--5xl {
    font-size: 40px;
    line-height: 50px;
  }
}
.derivs-text__line-height--3xs {
  line-height: 12px;
}

.derivs-text__line-height--2xs {
  line-height: 14px;
}

.derivs-text__line-height--xs {
  line-height: 16px;
}

.derivs-text__line-height--sm {
  line-height: 18px;
}

.derivs-text__line-height--md {
  line-height: 20px;
}

.derivs-text__line-height--lg {
  line-height: 22px;
}

.derivs-text__line-height--xl {
  line-height: 24px;
}

.derivs-text__line-height--2xl {
  line-height: 26px;
}

.derivs-text__line-height--3xl {
  line-height: 28px;
}

.derivs-text__line-height--4xl {
  line-height: 30px;
}

.derivs-text__line-height--5xl {
  line-height: 32px;
}

.derivs-text__line-height--6xl {
  line-height: 34px;
}

.derivs-text__line-height--7xl {
  line-height: 36px;
}

.derivs-text__weight--bold {
  font-weight: 700;
}

.derivs-text__weight--semibold {
  font-weight: 500;
}

.derivs-text__weight--normal {
  font-weight: 400;
}

.derivs-text__weight--light {
  font-weight: 300;
}

.derivs-text__align--left {
  text-align: left;
}

.derivs-text__align--center {
  text-align: center;
}

.derivs-text__align--right {
  text-align: right;
}

.derivs-text__font-style--italic {
  font-style: italic;
}

.derivs-text__font-style--normal {
  font-style: normal;
}