@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";
@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";
@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";
@import "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";
@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";
@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";
.deriv-button {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    transition: all .3s ease-in-out;
    display: inline-flex;
    position: relative
}

.deriv-button:disabled {
    opacity: .32;
    cursor: not-allowed
}

.deriv-button__hover--disabled {
    cursor: default
}

.deriv-button__hover--disabled:hover {
    background-color: inherit;
    color: inherit
}

.deriv-button__size--xs {
    border-width: 1px;
    height: 1.6rem;
    padding: 0 1.1rem
}

.deriv-button__size--sm {
    border-width: 1px;
    height: 2.4rem;
    padding: .3rem .8rem
}

.deriv-button__size--md {
    border-width: 2px;
    height: 3.2rem;
    padding: .6rem 1.6rem
}

.deriv-button__size--lg {
    border-width: 3px;
    height: 4rem;
    padding: 1rem 1.6rem
}

.deriv-button__variant--contained {
    border: none
}

.deriv-button__variant--contained.deriv-button__color--primary {
    background-color: #ff444f
}

.deriv-button__variant--contained.deriv-button__color--primary span {
    color: #fff
}

.deriv-button__variant--contained.deriv-button__color--primary:hover:not(:disabled) {
    background-color: #eb3e48
}

.deriv-button__variant--contained.deriv-button__color--primary-light {
    background-color: #ff444f29
}

.deriv-button__variant--contained.deriv-button__color--primary-light span {
    color: #ff444f
}

.deriv-button__variant--contained.deriv-button__color--primary-light:hover:not(:disabled) {
    background-color: #ff444f3d
}

.deriv-button__variant--contained.deriv-button__color--white {
    background-color: #fff
}

.deriv-button__variant--contained.deriv-button__color--white span {
    color: #0e0e0e
}

.deriv-button__variant--contained.deriv-button__color--white:hover:not(:disabled) {
    background-color: #d6dadb
}

.deriv-button__variant--contained.deriv-button__color--black {
    background-color: #0e0e0e
}

.deriv-button__variant--contained.deriv-button__color--black span {
    color: #fff
}

.deriv-button__variant--contained.deriv-button__color--black:hover:not(:disabled) {
    background-color: #323738
}

.deriv-button__variant--outlined {
    background: 0 0;
    border-style: solid
}

.deriv-button__variant--outlined.deriv-button__color--primary {
    border-color: #ff444f
}

.deriv-button__variant--outlined.deriv-button__color--primary span {
    color: #ff444f
}

.deriv-button__variant--outlined.deriv-button__color--primary:hover:not(:disabled) {
    background: #ff444f
}

.deriv-button__variant--outlined.deriv-button__color--primary:hover:not(:disabled) span {
    color: #fff
}

.deriv-button__variant--outlined.deriv-button__color--primary-light {
    border-color: #ff444f
}

.deriv-button__variant--outlined.deriv-button__color--primary-light span {
    color: #ff444f
}

.deriv-button__variant--outlined.deriv-button__color--primary-light:hover:not(:disabled) {
    background: #ff444f29
}

.deriv-button__variant--outlined.deriv-button__color--white {
    border-color: #fff
}

.deriv-button__variant--outlined.deriv-button__color--white span {
    color: #fff
}

.deriv-button__variant--outlined.deriv-button__color--white:hover:not(:disabled) {
    background: #ffffff14
}

.deriv-button__variant--outlined.deriv-button__color--black {
    border-color: #999
}

.deriv-button__variant--outlined.deriv-button__color--black span {
    color: #333
}

.deriv-button__variant--outlined.deriv-button__color--black:hover:not(:disabled) {
    background: #00000014
}

.deriv-button__variant--ghost {
    background: 0 0;
    border: none
}

.deriv-button__variant--ghost.deriv-button__color--primary span {
    color: #ff444f
}

.deriv-button__variant--ghost.deriv-button__color--primary:hover:not(:disabled) {
    background-color: #eb3e48
}

.deriv-button__variant--ghost.deriv-button__color--primary:hover:not(:disabled) span {
    color: #fff
}

.deriv-button__variant--ghost.deriv-button__color--primary-light span {
    color: #ff444f
}

.deriv-button__variant--ghost.deriv-button__color--primary-light:hover:not(:disabled) {
    background-color: #ff444f3d
}

.deriv-button__variant--ghost.deriv-button__color--primary-transparent span {
    color: #ff444f
}

.deriv-button__variant--ghost.deriv-button__color--primary-transparent:hover:not(:disabled) {
    background-color: #ff444f14
}

.deriv-button__variant--ghost.deriv-button__color--white span {
    color: #fff
}

.deriv-button__variant--ghost.deriv-button__color--white:hover:not(:disabled) {
    background-color: #ffffff14
}

.deriv-button__variant--ghost.deriv-button__color--black span {
    color: #0e0e0e
}

.deriv-button__variant--ghost.deriv-button__color--black:hover:not(:disabled) {
    background-color: #0e0e0e
}

.deriv-button__variant--ghost.deriv-button__color--black:hover:not(:disabled) span {
    color: #fff
}

.deriv-button__rounded--sm {
    border-radius: 4px
}

.deriv-button__rounded--md {
    border-radius: 8px
}

.deriv-button__rounded--lg {
    border-radius: 24px
}

.deriv-button__full-width {
    width: 100%
}

.deriv-button__loader .derivs-loader {
    width: 50px;
    height: 12px
}

.deriv-button__loader .derivs-loader__element {
    width: 3px;
    height: 12px
}

.deriv-button__border-width--none {
    border-width: 0
}

.deriv-button__border-width--sm {
    border-width: 1px
}

.deriv-button__border-width--md {
    border-width: 2px
}

.deriv-button__border-width--lg {
    border-width: 3px
}

.derivs-loader {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 7.2rem;
    height: 3.2rem;
    transition: all .4s;
    display: flex
}

.derivs-loader--fullscreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.derivs-loader__element {
    border-radius: 1rem;
    width: .8rem;
    height: 3.2rem;
    animation: 1.5s ease-in infinite both loader;
    display: block
}

.derivs-loader__element:first-child {
    animation-delay: .1s
}

.derivs-loader__element:nth-child(2) {
    animation-delay: .2s
}

.derivs-loader__element:nth-child(3) {
    animation-delay: .3s
}

.derivs-loader__element:nth-child(4) {
    animation-delay: .4s
}

.derivs-loader__element:nth-child(5) {
    animation-delay: .5s
}

@keyframes loader {
    0% {
        height: 50%;
        bottom: 0
    }
    12.5% {
        height: 75%;
        bottom: 0
    }
    25% {
        height: 100%;
        bottom: 75%
    }
    37.5% {
        height: 75%;
        bottom: 0
    }
    50% {
        height: 50%;
        bottom: 0
    }
    to {
        height: 50%;
        bottom: 0
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.derivs-text__color--system-dark-2-general-text {
    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
    }
    .derivs-text__size--xs {
        font-size: 10px;
        line-height: 14px
    }
    .derivs-text__size--sm {
        font-size: 12px;
        line-height: 18px
    }
    .derivs-text__size--md {
        font-size: 14px;
        line-height: 20px
    }
    .derivs-text__size--lg {
        font-size: 16px;
        line-height: 24px
    }
    .derivs-text__size--xl {
        font-size: 18px;
        line-height: 26px
    }
    .derivs-text__size--2xl {
        font-size: 24px;
        line-height: 30px
    }
    .derivs-text__size--3xl {
        font-size: 28px;
        line-height: 34px
    }
    .derivs-text__size--4xl {
        font-size: 32px;
        line-height: 40px
    }
    .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
}

.callback {
    background: #fff;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: Ubuntu, sans-serif;
    position: relative
}

.callback__content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    height: 100%;
    display: flex
}

.callback__title {
    color: #000;
    text-align: center;
    margin: 0;
    font-size: 24px;
    font-weight: 700
}

.callback__button {
    text-align: center;
    background: inherit;
    color: #000;
    border: 1px solid #000;
    border-radius: 16px;
    max-height: 48px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px
}

.callback__button:hover {
    background: inherit
}

.deriv-input__container {
    box-sizing: border-box;
    width: 328px;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative
}

.deriv-input__container--full {
    width: 100%
}

.deriv-input {
    text-align: left;
    font-size: var(--du-text-size-default, 14px);
    color: var(--du-text-prominent, #333);
    border: 1px solid;
    border-radius: 4px;
    width: 100%;
    padding: 10px 16px;
    display: inline-flex;
    position: relative
}

.deriv-input--general {
    border-color: var(--du-state-active, #d6dadb)
}

.deriv-input--general:hover:not(:disabled):not(:focus-within) {
    border-color: var(--du-border-hover, #999)
}

.deriv-input--general:focus-within {
    border-color: var(--du-brand-secondary, #85acb0)
}

.deriv-input--error {
    border-color: var(--du-status-danger, #ec3f3f)
}

.deriv-input--success {
    border-color: var(--du-status-success, #4bb4b3)
}

.deriv-input--active {
    border-color: var(--du-brand-secondary, #85acb0)
}

.deriv-input--disabled {
    border-color: var(--du-state-active, #d6dadb);
    cursor: not-allowed;
    opacity: .8
}

.deriv-input__field {
    outline: none;
    width: 100%
}

.deriv-input__field::placeholder {
    visibility: hidden
}

.deriv-input__field:not(:-moz-placeholder-shown)~label {
    font-size: var(--du-text-size-xs, 10px);
    background-color: var(--du-general-main-1, #fff);
    height: -moz-fit-content;
    height: fit-content;
    padding: 0 4px;
    transform: translateY(-50%)
}

.deriv-input__field:focus~label,
.deriv-input__field:not(:placeholder-shown)~label {
    font-size: var(--du-text-size-xs, 10px);
    background-color: var(--du-general-main-1, #fff);
    height: -moz-fit-content;
    height: fit-content;
    padding: 0 4px;
    transform: translateY(-50%)
}

.deriv-input--label-animation-disabled {
    outline: none;
    width: 100%
}

.deriv-input--label-animation-disabled::placeholder {
    visibility: hidden
}

.deriv-input--label-animation-disabled:not(:-moz-placeholder-shown)~label {
    visibility: hidden
}

.deriv-input--label-animation-disabled:focus~label,
.deriv-input--label-animation-disabled:not(:placeholder-shown)~label {
    visibility: hidden
}

.deriv-input__label {
    pointer-events: none;
    font-size: var(--du-text-size-default, 14px);
    align-items: center;
    padding: 0;
    transition: all .15s ease-out;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px
}

.deriv-input__label--general {
    color: var(--du-border-hover, #999)
}

.deriv-input__label--error {
    color: var(--du-status-danger, #ec3f3f)
}

.deriv-input__label--success {
    color: var(--du-status-success, #4bb4b3)
}

.deriv-input__label--active {
    color: var(--du-brand-secondary, #85acb0)
}

.deriv-input__label--disabled {
    color: var(--du-state-active, #d6dadb)
}

.deriv-input__left-content {
    margin-right: 8px
}

.deriv-input__right-content {
    margin-left: 16px
}

.deriv-input__helper-message {
    position: absolute;
    top: 100%
}

.deriv-input--general .deriv-input__field:disabled+.deriv-input__label,
.deriv-input--error .deriv-input__field:disabled+.deriv-input__label,
.deriv-input--success .deriv-input__field:disabled+.deriv-input__label {
    color: var(--du-state-active, #d6dadb)
}

.deriv-input--general .deriv-input__field:focus+.deriv-input__label {
    color: var(--du-brand-secondary, #85acb0)
}

.deriv-input--error .deriv-input__field:focus+.deriv-input__label {
    color: var(--du-status-danger, #ec3f3f)
}

.deriv-input--success .deriv-input__field:focus+.deriv-input__label {
    color: var(--du-status-success, #4bb4b3)
}

.deriv-input__helper-message {
    width: 100%;
    height: 20px;
    padding: 2px 0 0 16px
}

:where(:not(:-webkit-any(html, iframe, canvas, img, svg, video, audio, symbol)):not(:-webkit-any(svg *, symbol *))) {
    all: unset;
    display: revert
}

:where(:not(:-moz-any(html, iframe, canvas, img, svg, video, audio, symbol)):not(:-moz-any(svg *, symbol *))) {
    all: unset;
    display: revert
}

:where(:not(:-webkit-any(html, iframe, canvas, img, svg, video, audio, symbol)):not(:-webkit-any(svg *, symbol *))) {
    all: unset;
    display: revert
}

:where(:not(:-moz-any(html, iframe, canvas, img, svg, video, audio, symbol)):not(:-moz-any(svg *, symbol *))) {
    all: unset;
    display: revert
}

:where(:not(:is(html, iframe, canvas, img, svg, video, audio, symbol)):not(:is(svg *, symbol *))) {
    all: unset;
    display: revert
}

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

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

a,
button {
    cursor: revert
}

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

img {
    max-block-size: 100%;
    max-inline-size: 100%
}

table {
    border-collapse: collapse
}

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

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

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
}

::placeholder {
    color: unset
}

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

:where([contenteditable]:not([contenteditable=false])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-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: #fff;
    --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, #000 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, #333 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, #333 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: #fff;
    --du-general-main-2: #fff;
    --du-general-main-3: #999;
    --du-general-main-4: #ffffffb3;
    --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: #333;
    --du-general-active: #d6dadb;
    --du-text-general: #333;
    --du-text-primary: #999;
    --du-text-less-prominent: #999;
    --du-text-prominent: #333;
    --du-text-disabled: #999;
    --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: #000;
    --du-text-orange: #ff9c13;
    --du-system-dark-2-general-text: #c2c2c2;
    --du-text-info-blue-background: #dfeaff;
    --du-text-colored-background: #fff;
    --du-icon-light-background: #5c5c5c;
    --du-icon-dark-background: #fff;
    --du-icon-gray-background: #f2f3f4;
    --du-icon-black-plus: #000;
    --du-text-status-info-blue: #377cfc;
    --du-text-hint: #333;
    --du-text-white: #fff;
    --du-text-black-transparent: #000000b8;
    --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: #999;
    --du-button-tertiary-default: transparent;
    --du-button-primary-light-default: #ff444f29;
    --du-button-primary-hover: #eb3e48;
    --du-button-secondary-hover: #00000014;
    --du-button-tertiary-hover: #ff444f14;
    --du-button-primary-light-hover: #ff444f3d;
    --du-button-toggle-primary: #0796e0;
    --du-button-toggle-secondary: #d6dadb;
    --du-button-toggle-alternate: #fff;
    --du-overlay-outside-dialog: #000000b8;
    --du-overlay-inside-dialog: #fffffff5;
    --du-shadow-menu: #00000029;
    --du-shadow-menu-2: #00000029;
    --du-shadow-drop: #00000014;
    --du-shadow-box: #0006;
    --du-state-normal: #fff;
    --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: #999;
    --du-border-hover-1: #5c5c5c;
    --du-border-active: var(--du-brand-secondary);
    --du-border-disabled: #eaeced;
    --du-border-divider: #f2f3f4;
    --du-fill-normal: #fff;
    --du-fill-normal-1: #c2c2c2;
    --du-fill-hover: #999;
    --du-fill-active: var(--du-brand-secondary);
    --du-fill-disabled: #eaeced;
    --du-status-default: #eaeced;
    --du-status-adjustment: #999;
    --du-status-danger: #ec3f3f;
    --du-status-success: #4bb4b3;
    --du-status-warning: #ffad3a;
    --du-status-warning-transparent: #ffad3a29;
    --du-status-transfer: #ff6444;
    --du-status-info: #377cfc;
    --du-status-colored-background: #fff;
    --du-status-alert-background: #ffad3a29;
    --du-dashboard-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
    --du-dashboard-app: linear-gradient(274.25deg, #333 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: #4bb4b3eb;
    --du-transparent-success-secondary: #00883214;
    --du-transparent-blue-secondary: #2c9aff14;
    --du-transparent-info: #377cfc29;
    --du-transparent-hint: #377cfc14;
    --du-transparent-danger: #ff444f29;
    --du-transparent-danger-secondary: #e6190e14;
    --du-transparent-correct-message: #4bb4b329;
    --du-transparent-fake-message: #ec3f3f29;
    --du-transparent-warning-secondary: #ff9c1314;
    --du-gradient-success: linear-gradient(to top, #fff, #4bb4b329);
    --du-gradient-danger: linear-gradient(to top, #fff, #ff444f29);
    --du-contract-gradient-danger: linear-gradient(to top, #fff 85%, #ff444f29);
    --du-gradient-right-edge: linear-gradient(to right, #fff0 -5%, #fff 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: #fff;
    --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, #0000 50%, #00000029 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 #0e0e0e14, 0px 4px 6px -2px #0e0e0e08;
    --du-demo-text-color-1: #c2c2c2;
    --du-demo-text-color-2: #fff;
    --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: #0e0e0e80;
    --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: #fff;
    --du-general-active: #323738;
    --du-text-prominent: #fff;
    --du-text-general: #c2c2c2;
    --du-text-less-prominent: #6e6e6e;
    --du-text-primary: #999;
    --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: #fff;
    --du-text-info-blue: #92b8ff;
    --du-text-info-blue-background: #182130;
    --du-text-status-info-blue: #377cfc;
    --du-text-hint: #c2c2c2;
    --du-text-white: #fff;
    --du-icon-light-background: #5c5c5c;
    --du-icon-dark-background: #fff;
    --du-icon-gray-background: #333;
    --du-icon-black-plus: #fff;
    --du-text-black-transparent: #ffffff47;
    --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: #ff444f29;
    --du-button-primary-hover: #eb3e48;
    --du-button-secondary-hover: #ffffff14;
    --du-button-tertiary-hover: #ff444f14;
    --du-button-primary-light-hover: #ff444f3d;
    --du-button-toggle-primary: #0796e0;
    --du-button-toggle-secondary: #323738;
    --du-button-toggle-alternate: #323738;
    --du-overlay-outside-dialog: #000000b8;
    --du-overlay-inside-dialog: #0e0e0ef5;
    --du-shadow-menu: #000000d6;
    --du-shadow-menu-2: #000000b8;
    --du-shadow-drop: #000000a3;
    --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: #999;
    --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: #333;
    --du-fill-hover: #6e6e6e;
    --du-fill-active: var(--du-brand-secondary);
    --du-fill-disabled: #1d1f20;
    --du-status-default: #eaeced;
    --du-status-adjustment: #999;
    --du-status-danger: #cc2e3d;
    --du-status-warning: #ffad3a;
    --du-status-warning-transparent: #ffad3a29;
    --du-status-success: #00a79e;
    --du-status-transfer: #ff6444;
    --du-status-info: #377cfc;
    --du-status-colored-background: #fff;
    --du-status-alert-background: #ffad3a29;
    --du-transparent-success: #00a79eeb;
    --du-transparent-success-secondary: #00883214;
    --du-transparent-blue-secondary: #2c9aff14;
    --du-transparent-info: #377cfc29;
    --du-transparent-hint: #377cfc29;
    --du-transparent-danger: #ff444f29;
    --du-transparent-danger-secondary: #e6190e14;
    --du-transparent-correct-message: #4bb4b329;
    --du-transparent-fake-message: #ec3f3f29;
    --du-transparent-warning-secondary: #ff9c1314;
    --du-gradient-success: linear-gradient(to top, #0e0e0e, #00a79e29);
    --du-gradient-danger: linear-gradient(to top, #0e0e0e, #ff444f29);
    --du-contract-gradient-danger: linear-gradient(to top, #0e0e0e 85%, #ff444f29);
    --du-gradient-right-edge: linear-gradient(to right, #0e0e0e00 -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: #fff;
    --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, #fff0 50%, #ffffff29 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 #0e0e0e14, 0px 4px 6px -2px #0e0e0e08;
    --du-demo-text-color-1: #333;
    --du-demo-text-color-2: #333;
    --du-header-background-mt5: #e6f5ff;
    --du-header-background-others: #e8fdf8
}

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

.deriv-helper-message {
    font-size: var(--du-text-size-sm, 12px);
    line-height: var(--du-text-lh-2xs, 8px);
    font-style: normal;
    font-weight: var(--du-text-weight-normal, 400);
    color: var(--du-text-primary, #999)
}

.deriv-helper-message--general {
    color: var(--du-text-less-prominent, #999)
}

.deriv-helper-message--success {
    color: var(--du-text-profit-success, #4bb4b3)
}

.deriv-helper-message--warning {
    color: var(--du-text-warning, #ffad3a)
}

.deriv-helper-message--error {
    color: var(--du-text-red, #ff444f)
}

.deriv-helper-message--disabled {
    opacity: .5
}