@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";
@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";
.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-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
}
/* Font sizes for different screen sizes */
.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 query for smaller screens (max-width: 601px) */
@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;
}
/* Specific Line Heights */
.derivs-text__line-height--6xl {
  line-height: 34px;
}

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

/* Font Weights */
.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;
}

/* Text Alignment */
.derivs-text__align--left {
  text-align: left;
}

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

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

/* Font Style */
.derivs-text__font-style--italic {
  font-style: italic;
}

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

/* Input Components */
.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;
}

/* Input States */
.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: 0.8;
}

/* Input Field and Label */
.deriv-input__field {
  outline: none;
  width: 100%;
}

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

.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; /* For Firefox */
  height: fit-content;
  padding: 0 4px;
  transform: translateY(-50%);
}



/* Input field with label animation disabled */
.deriv-input--label-animation-disabled {
  outline: none;
  width: 100%;
}

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

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

/* Label Colors based on Input State */
.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);
}

/* Input Content */
.deriv-input__left-content {
  margin-right: 8px;
}

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

/* Helper Message */
.deriv-input__helper-message {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 20px;
  padding: 2px 0 0 16px;
}

/* Label color changes on focus for different states */
.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);
}

/* Label color for disabled fields */
.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);
}

/* Reset CSS */
: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 Styles */
table {
  border-collapse: collapse;
}

/* Input and Textarea Base Styles */
input,
textarea {
  -webkit-user-select: auto;
}

/* Specific Input Type Styles */
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;
}

/* Placeholder and Hidden Elements */
::placeholder {
  color: unset;
}

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

/* User-editable Content */
: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;
}

/* Draggable Elements */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Dialog and Details Marker */
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

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

/* Global CSS Variables (Custom Properties) */
:host,
:root {
  /* Font Sizes */
  --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;

  /* Line Heights */
  --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;

  /* Font Weights */
  --du-text-weight-light: 300;
  --du-text-weight-normal: 400;
  --du-text-weight-semibold: 500;
  --du-text-weight-bold: 700;

  /* Text Alignment */
  --du-text-align-left: start;
  --du-text-align-right: right;
  --du-text-align-center: center;

  /* Brand Colors */
  --du-brand-white: #fff;
  --du-brand-dark-gray: #0e0e0e;
  --du-brand-red-coral: #ff444f;
  --du-brand-orange: #ff6444;
  --du-brand-secondary: #85acb0;

  /* Deriv Gradients (for various services/cards) */
  --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%);

  /* Transparent Colors */
  --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;

  /* Gradients */
  --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%);

  /* Badge Colors */
  --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;
  
  /* Card and Backgrounds */
  --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;
  
  /* Box Shadow */
  --du-deriv-box-shadow: 0px 12px 16px -4px #0e0e0e14, 0px 4px 6px -2px #0e0e0e08;
  
  /* Text Colors */
  --du-demo-text-color-1: #c2c2c2;
  --du-demo-text-color-2: #fff;
  
  /* Header Backgrounds */
  --du-header-background-mt5: #e6f5ff;
  --du-header-background-others: #e8fdf8;
}

/* Dark Theme Variables */
:host .theme--dark,
:root .theme--dark {
  /* General Colors */
  --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;
  
  /* Text Colors */
  --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;
  
  /* Icon Colors */
  --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;
  
  /* Purchase Colors */
  --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;
  
  /* Button Colors */
  --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;
  
  /* Overlay and Shadow Colors */
  --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;
  
  /* State Colors */
  --du-state-normal: #0e0e0e;
  --du-state-hover: #242828;
  --du-state-active: #323738;
  --du-state-disabled: #1d1f20;
  
  /* Other Colors and Styles */
  --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;
}

/* Helper message styles */
.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);
}

/* Helper message color variations based on state */
.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: 0.5;
}