/* =====================================================================
   DBTraderz theme
   Dark navy workspace, green "DB" + red "Traderz" brand, blue active tab,
   coral tab icons, quick-action cards with coloured top edges.
   Loaded after dp-ui.css and the app bundle, so it wins on equal selectors.
   ===================================================================== */
:root {
    --dbt-bg: #070b16;
    --dbt-bg-2: #0a1122;
    --dbt-panel: #0e1730;
    --dbt-panel-2: #131f3d;
    --dbt-line: #1d2b4f;
    --dbt-head: #0c1430;
    --dbt-tabbar: #0b1330;
    --dbt-tab-on: #1c3f9a;
    --dbt-green: #22e39a;
    --dbt-green-2: #10c47f;
    --dbt-red: #f43f5e;
    --dbt-coral: #f25c54;
    --dbt-teal: #5eead4;
    --dbt-cyan: #38bdf8;
    --dbt-purple: #a46bff;
    --dbt-yellow: #fbbf24;
    --dbt-ink: #e6edf8;
    --dbt-muted: #8b98b4;
    /* re-point the old palette so every existing dp-* component follows */
    --dp-navy: var(--dbt-tabbar);
    --dp-blue: var(--dbt-tab-on);
    --dp-blue-2: #3b6cf6;
    --dp-teal: #14b8a6;
    --dp-teal-2: #14b8a6;
    --dp-green: var(--dbt-green-2);
    --dp-green-2: var(--dbt-green);
    --dp-red: var(--dbt-red);
    --dp-red-bar: #b4123a;
}

/* ---------- dark page ---------- */
body.theme--dark {
    --general-main-1: #080d1b;
    --general-main-2: #0e1730;
    --general-main-3: #131f3d;
    --general-main-4: #080d1b80;
    --general-section-1: #0e1730;
    --general-section-2: #080d1b;
    --general-section-3: #131f3d;
    --general-section-4: #131f3d;
    --general-section-5: #131f3d;
    --general-hover: #172449;
    --general-active: #1c2c57;
    --general-disabled: #111a33;
    --border-normal: #1d2b4f;
    --border-divider: #182546;
    --border-disabled: #111a33;
    --du-general-main-1: #080d1b;
    --du-general-main-2: #0e1730;
    --du-general-main-3: #131f3d;
    --du-general-section-1: #0e1730;
    --du-general-section-2: #080d1b;
    --du-general-hover: #172449;
    --du-border-normal: #1d2b4f;
    --brand-red-coral: #10c47f;
    --button-primary-default: #10c47f;
    --button-primary-hover: #0ea96d;
    --du-brand-red-coral: #10c47f;
    --du-button-primary-default: #10c47f;
    --du-button-primary-hover: #0ea96d;
    background: var(--dbt-bg) !important;
}
body.theme--dark .main-body,
body.theme--dark .bot-dashboard,
body.theme--dark .main,
body.theme--dark .main__container,
body.theme--dark .dc-tabs__content--main__tabs,
body.theme--dark .tab__dashboard,
body.theme--dark #dp-panel {
    background:
        radial-gradient(900px 420px at 85% 105%, rgba(59, 108, 246, 0.16), transparent 60%),
        radial-gradient(700px 360px at 0% 60%, rgba(34, 227, 154, 0.06), transparent 60%),
        linear-gradient(180deg, #080d1b 0%, #070b16 100%) !important;
}

/* ---------- header ---------- */
body.theme--dark .app-header,
body.theme--light .app-header {
    background: linear-gradient(180deg, #0f1838 0%, var(--dbt-head) 100%) !important;
    border-bottom: 1px solid var(--dbt-line) !important;
    box-shadow: none !important;
}
.app-header .deriv-account-switcher__balance,
.app-header .deriv-account-switcher__balance span,
body.theme--light .app-header .deriv-account-switcher__balance,
body.theme--light .app-header .deriv-account-switcher__balance span {
    color: var(--dbt-green) !important;
    font-weight: 800 !important;
}
.app-header .mobile-menu__toggle svg,
.app-header .mobile-menu__toggle path,
body.theme--light .app-header .mobile-menu__toggle svg,
body.theme--light .app-header .mobile-menu__toggle path {
    fill: #dbe4f5 !important;
}
.app-header,
.app-header .dc-text,
.app-header a:not(.dc-btn) {
    color: var(--dbt-ink);
}
.app-header__logo img,
.app-footer__logo-img {
    filter: drop-shadow(0 0 10px rgba(34, 227, 154, 0.18));
}
.app-header .auth-actions .dc-btn--tertiary,
.app-header .auth-actions .dc-btn--tertiary * {
    color: var(--dbt-green) !important;
    border-color: var(--dbt-green) !important;
}
.dp-cash {
    background: linear-gradient(135deg, #22e39a, #10a96a) !important;
    color: #04130c !important;
}
.dp-fx {
    background: #0a1430 !important;
    border-color: var(--dbt-line) !important;
}
.dp-fx span.on {
    background: var(--dbt-green) !important;
    color: #04130c !important;
}

/* ---------- news bar: green -> red brand strip ---------- */
#dp-marquee {
    background: linear-gradient(90deg, #0c6b49 0%, #0f1838 50%, #8e1232 100%) !important;
    border-bottom: 1px solid var(--dbt-line);
    color: #eafff6 !important;
    letter-spacing: 1px;
}
#dp-marquee button {
    background: #0f1838 !important;
    border-color: #9fb3d9 !important;
}

/* ---------- tab bar ---------- */
.dc-tabs--main__tabs .dc-tabs__list--main__tabs,
.dc-tabs__list--header--main__tabs {
    background: var(--dbt-tabbar) !important;
    border-bottom: 1px solid var(--dbt-line) !important;
}
.dc-tabs__item--main__tabs,
.dp-tab {
    font-weight: 700 !important;
    font-size: 14.5px !important;
}
.dc-tabs__item--main__tabs svg,
.dc-tabs__item--main__tabs svg *,
.dp-tab svg,
.dp-tab svg * {
    stroke: var(--dbt-coral) !important;
}
.dc-tabs__item--main__tabs svg path[fill]:not([fill='none']),
.dc-tabs__item--main__tabs svg rect[fill]:not([fill='none']) {
    fill: var(--dbt-coral) !important;
}
.dc-tabs__active--main__tabs,
.dp-tab.dp-tab--on {
    background: linear-gradient(180deg, #2349ad 0%, var(--dbt-tab-on) 100%) !important;
    box-shadow: inset 0 -3px 0 #4f7dff;
}
body.dp-own-tab .dc-tabs__active--main__tabs {
    box-shadow: none;
}
.dc-tabs__item--main__tabs:hover,
.dp-tab:hover {
    background: rgba(79, 125, 255, 0.14) !important;
}

/* ---------- run panel ---------- */
#db-animation__run-button,
.animation__button--run {
    background: linear-gradient(135deg, #14c9a0, #0fa486) !important;
    border-color: #12b894 !important;
    color: #fff !important;
}
body.theme--dark .run-panel__container,
body.theme--dark .animation__wrapper,
body.theme--dark .run-panel__footer {
    background: #0b1330 !important;
    border-color: var(--dbt-line) !important;
}
.dc-btn--primary,
.auth-actions .dc-btn--primary {
    background: linear-gradient(135deg, #22e39a, #10c47f) !important;
    color: #04130c !important;
}

/* ---------- dashboard: greeting + quick actions ---------- */
#dp-dash {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 6px !important;
}
.dbt-hello {
    text-align: center;
    padding: 18px 8px 22px;
    border-bottom: 1px solid var(--dbt-line);
    margin: 0 -16px 18px;
}
.dbt-greet {
    margin: 0;
    font: 800 24px/1.25 Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--dbt-ink);
    letter-spacing: -0.2px;
}
.dbt-greet [data-g] {
    background: linear-gradient(90deg, #7df9d8, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: opacity 0.25s ease;
    display: inline-block;
}
.dbt-greet [data-g].dbt-fade {
    opacity: 0;
}
.dbt-greet b {
    font-weight: 800;
}
.dbt-wave {
    display: inline-block;
    font-style: normal;
    transform-origin: 70% 70%;
    animation: dbtWave 2.4s ease-in-out infinite;
}
@keyframes dbtWave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(14deg); }
    20%, 40% { transform: rotate(-8deg); }
}
.dbt-quote {
    margin: 14px auto 0;
    max-width: 520px;
    min-height: 2.8em;
    font: italic 400 16.5px/1.5 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #aeb9d0;
}
.dbt-quote.dbt-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--dbt-red);
    animation: dbtBlink 0.8s steps(1) infinite;
}
@keyframes dbtBlink {
    50% { opacity: 0; }
}
.dbt-qa-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 14px;
    font: 800 12.5px/1 Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #9fb0cf;
}
.dbt-qa-title::before,
.dbt-qa-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dbt-line), transparent);
}
.dbt-qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
@media (min-width: 900px) {
    .dbt-qa {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.dbt-qa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    padding: 18px 16px 14px;
    border-radius: 18px;
    border: 1px solid #22305a;
    border-top: 3px solid var(--c);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0d1530;
    box-shadow: 0 -8px 24px -18px var(--c), 0 10px 26px -18px rgba(0, 0, 0, 0.8);
    color: var(--dbt-ink);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif;
}
.dbt-qa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 -10px 30px -16px var(--c), 0 16px 30px -18px rgba(0, 0, 0, 0.9);
}
.dbt-qa-ic {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 25px;
    background: color-mix(in srgb, var(--c) 14%, #0d1530);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    margin-bottom: 14px;
}
.dbt-qa-go {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid #2b3c6b;
    background: #101b3a;
    color: #c8d3ea;
    font-size: 15px;
}
.dbt-qa-card b {
    font-size: 17px;
    font-weight: 800;
    color: #f4f7fd;
    margin-bottom: 5px;
}
.dbt-qa-card small {
    font-size: 13px;
    line-height: 1.45;
    color: #98a6c4;
    min-height: 2.9em;
}
.dbt-qa-card em {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #22305a;
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    color: var(--c);
}

/* ---------- dashboard: search + signals in the dark look ---------- */
body.theme--dark .dp-search {
    background: #0d1530 !important;
    border: 1px solid #22305a !important;
    border-radius: 14px !important;
    overflow: hidden;
}
body.theme--dark .dp-search select {
    border-right-color: #22305a !important;
}
.dp-search button {
    background: linear-gradient(135deg, #22e39a, #10c47f) !important;
    color: #04130c !important;
}
.dp-search button svg,
.dp-search button svg * {
    stroke: #04130c !important;
}
body.theme--dark .dp-sig {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent 40%), #0b132b !important;
    border: 1px solid #1d2b4f !important;
    border-radius: 18px !important;
}
body.theme--dark .dp-card {
    background: #0e1733 !important;
    border-color: #22305a !important;
}
.dp-dot {
    background: var(--dbt-green) !important;
    box-shadow: 0 0 0 4px rgba(34, 227, 154, 0.18) !important;
}
.dp-bar i {
    background: linear-gradient(90deg, var(--dbt-green), #f43f5e) !important;
}
.dp-load {
    background: linear-gradient(135deg, #14c9a0, #0f9d84) !important;
}
.dp-load--fall {
    background: linear-gradient(135deg, #f43f5e, #c81e44) !important;
}
.dp-rank {
    color: var(--dbt-yellow) !important;
}
body.theme--dark .dp-badge {
    background: rgba(34, 227, 154, 0.12) !important;
    color: var(--dbt-green) !important;
}
.dp-win {
    color: var(--dbt-green) !important;
}
.dp-loss {
    color: var(--dbt-red) !important;
}

/* ---------- AI orb ---------- */
#dp-ai {
    background: radial-gradient(circle at 35% 30%, #c084fc, #7c3aed 60%, #4c1d95) !important;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.18), 0 10px 30px rgba(124, 58, 237, 0.45) !important;
}

/* ---------- light mode keeps the same brand accents ---------- */
body.theme--light .dbt-hello {
    border-bottom-color: #e5e7eb;
}
body.theme--light .dbt-greet {
    color: #0f172a;
}
body.theme--light .dbt-greet [data-g] {
    background: linear-gradient(90deg, #0d9488, #0284c7);
    -webkit-background-clip: text;
    background-clip: text;
}
body.theme--light .dbt-quote {
    color: #475569;
}
body.theme--light .dbt-qa-card {
    background: #fff;
    border-color: #e5e7eb;
    border-top-color: var(--c);
    color: #0f172a;
}
body.theme--light .dbt-qa-card b {
    color: #0f172a;
}
body.theme--light .dbt-qa-card small {
    color: #64748b;
}
body.theme--light .dbt-qa-card em {
    border-top-color: #eef2f7;
}
body.theme--light .dbt-qa-ic,
body.theme--light .dbt-qa-go {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #334155;
}

/* tab icons (CSS masks) in coral, brighter on the active tab */
ul.dc-tabs__list--main__tabs > li::before,
body.dp-own-tab ul.dc-tabs__list--main__tabs > li.dc-tabs__active--main__tabs:not(.dp-tab--on)::before {
    background: var(--dbt-coral) !important;
}
ul.dc-tabs__list--main__tabs > li.dc-tabs__active--main__tabs::before,
ul.dc-tabs__list--main__tabs > li.dp-tab--on::before {
    background: #ff7a70 !important;
}
/* header left: phone + cashier */
.dp-cashier,
body.theme--light .dp-cashier {
    color: #dbe4f5 !important;
}
.dp-cashier svg {
    color: var(--dbt-cyan) !important;
}
/* bot search category select alignment */
.dp-search select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
}

body.theme--dark .tab__dashboard__content,
body.theme--dark .tab__dashboard__table,
body.theme--dark .tutorials-wrapper {
    background: transparent !important;
}
body.theme--dark .run-panel,
body.theme--dark .run-panel__container,
body.theme--dark .dc-drawer__container,
body.theme--dark .dc-drawer__toggle,
body.theme--dark .dc-drawer__footer {
    background: #0b1330 !important;
    border-color: var(--dbt-line) !important;
}
body.theme--dark .app-footer {
    background: #0b1330 !important;
    border-top: 1px solid var(--dbt-line) !important;
}
.dbt-qa-card em {
    margin-top: auto;
}
.dbt-qa-card small {
    margin-bottom: 12px;
}
body.theme--dark .tab__dashboard__info-panel {
    background: #0b1330 !important;
    border-left: 1px solid var(--dbt-line) !important;
}


/* =====================================================================
   Dark versions of the DP Maziwa tool panels (Trading Bots, Bulk Trader,
   Analysis Tool, Risk Calculator, Manual Trader, dialogs)
   ===================================================================== */
body.theme--dark #dp-panel,
body.theme--dark #dp-panel.tb-panel,
body.theme--dark .dp-modal,
body.theme--dark .dp-box,
body.theme--dark .dp-card,
body.theme--dark .dp-tile,
body.theme--dark .dp-sig-empty,
body.theme--dark .dp-results,
body.theme--dark .dp-seg,
body.theme--dark .dpx-box,
body.theme--dark .dpx-c,
body.theme--dark .dpt-mk,
body.theme--dark .dpt-chart,
body.theme--dark .dpt-side,
body.theme--dark .tb-body--free,
body.theme--dark .tbf-card,
body.theme--dark .tbsp-box,
body.theme--dark .tbsp-chart,
body.theme--dark .tbsp-opt,
body.theme--dark .tbsp-row,
body.theme--dark .tbst-card,
body.theme--dark .tbd-card,
body.theme--dark .tbd-doc,
body.theme--dark .tbc-card {
    background: #0e1733 !important;
    border-color: #22305a !important;
    color: #e6edf8 !important;
}
body.theme--dark #dp-panel,
body.theme--dark #dp-panel.tb-panel,
body.theme--dark .tb-body--free {
    background: transparent !important;
}
body.theme--dark .dp-stats div,
body.theme--dark .dp-kpi,
body.theme--dark .dp-details,
body.theme--dark .dp-f--hl,
body.theme--dark .dp-best,
body.theme--dark .dp-acct,
body.theme--dark .dpx-mode,
body.theme--dark .dpx-price,
body.theme--dark .dpx-dhead em,
body.theme--dark .dpx-bar,
body.theme--dark .tbd-box,
body.theme--dark .tbd-use,
body.theme--dark .dpt-digits i,
body.theme--dark .dp-result:hover,
body.theme--dark .tbst-card:hover i {
    background: #131f3d !important;
    border-color: #22305a !important;
    color: #c7d2e6 !important;
}
body.theme--dark #dp-panel input,
body.theme--dark #dp-panel select,
body.theme--dark .dp-modal input,
body.theme--dark .dp-f input,
body.theme--dark .dp-f select,
body.theme--dark .dpx-form input,
body.theme--dark .dpx-form select,
body.theme--dark .dpx-sel,
body.theme--dark .dpx-ouh select,
body.theme--dark .dpb-f select,
body.theme--dark .dpb-f input,
body.theme--dark .tbf-search,
body.theme--dark .tbsp-top select,
body.theme--dark .tbsp-top input,
body.theme--dark .tbsp-opt input,
body.theme--dark .dpt-mk select,
body.theme--dark .dp-search select {
    background: #0a1228 !important;
    border: 1px solid #263662 !important;
    color: #e6edf8 !important;
}
body.theme--dark #dp-panel input,
body.theme--dark #dp-panel select,
body.theme--dark #dp-panel textarea,
body.theme--dark .dp-modal input,
body.theme--dark .dp-modal select {
    background: #0a1228 !important;
    border-color: #263662 !important;
    color: #e6edf8 !important;
}
body.theme--dark #dp-panel input::placeholder {
    color: #6c7a99 !important;
}
body.theme--dark .dpx-chips button,
body.theme--dark .dpx-subtabs button,
body.theme--dark .tb-subnav button,
body.theme--dark .tbd-bar button,
body.theme--dark .dpt-types button,
body.theme--dark .dpt-ticks button,
body.theme--dark .dpt-dg button,
body.theme--dark .dpt-stake button,
body.theme--dark .dp-btn--ghost,
body.theme--dark .tbst-btn {
    background: #121c3a !important;
    border-color: #263662 !important;
    color: #dbe4f5 !important;
}
body.theme--dark .tb-subnav button svg,
body.theme--dark .tb-subnav button svg * {
    stroke: #f25c54 !important;
    color: #f25c54 !important;
}
body.theme--dark .tb-subnav button.on,
body.theme--dark .dpx-subtabs button.on,
body.theme--dark .dpt-types button.on,
body.theme--dark .dpx-chips button.on {
    background: linear-gradient(180deg, #2349ad, #1c3f9a) !important;
    border-color: #3b6cf6 !important;
    color: #fff !important;
}
body.theme--dark .tb-subnav button.on svg,
body.theme--dark .tb-subnav button.on svg * {
    stroke: #fff !important;
    color: #fff !important;
}
body.theme--dark .dp-more,
body.theme--dark .dp-msg,
body.theme--dark .dp-prog,
body.theme--dark .dp-heat,
body.theme--dark .dp-digits span,
body.theme--dark .dpb-cur b,
body.theme--dark .dpb-msg,
body.theme--dark .dpb-ring b,
body.theme--dark .dpb-ring small,
body.theme--dark .dpt,
body.theme--dark .dpt-ico,
body.theme--dark .dpt-ext,
body.theme--dark .dpt-sec label,
body.theme--dark .dpx-form label,
body.theme--dark .dpx-how p,
body.theme--dark .dpx-light,
body.theme--dark .dpx-stats div,
body.theme--dark .dpx-stats b,
body.theme--dark .dpx-mode b,
body.theme--dark .dpx-price em,
body.theme--dark .dpx-we,
body.theme--dark .tbc-card h2,
body.theme--dark .tbc-row b,
body.theme--dark .tbd-doc,
body.theme--dark .tbd-doc b,
body.theme--dark .tbd-doc h1,
body.theme--dark .tbd-doc h2,
body.theme--dark .tbd-doc h3,
body.theme--dark .tbd-doc h4,
body.theme--dark .tbf-card h3,
body.theme--dark .tbsp-box h4,
body.theme--dark .tbsp-legend,
body.theme--dark .tbsp-title,
body.theme--dark .tbsp-top label,
body.theme--dark .tbsp-bar small,
body.theme--dark .tbst p,
body.theme--dark .tbst h2,
body.theme--dark .tbst-card b,
body.theme--dark .dp-tool h2,
body.theme--dark .dp-tool p,
body.theme--dark .dp-f label,
body.theme--dark .dp-table,
body.theme--dark .dp-table tbody tr td,
body.theme--dark .dp-m-head h3,
body.theme--dark .dp-hero {
    color: #e6edf8 !important;
}
body.theme--dark .tbf-card p,
body.theme--dark .tbst-card small,
body.theme--dark .dp-fine,
body.theme--dark .dp-note,
body.theme--dark .dp-sig-sub,
body.theme--dark .dp-kpi small {
    color: #93a1bd !important;
}
body.theme--dark .dp-table th,
body.theme--dark .dp-table td {
    border-color: #22305a !important;
}
body.theme--dark .dp-bar,
body.theme--dark .dp-prog-bar,
body.theme--dark .tbsp-bar > div,
body.theme--dark .dpx-bar div {
    background: #1b2748 !important;
}
body.theme--dark .dp-modal-bg {
    background: rgba(3, 6, 14, 0.72) !important;
}
body.theme--dark .dpx-c {
    box-shadow: inset 0 0 0 1px #263662;
}
/* Free bots cards */
body.theme--dark .tbf-card {
    box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.9) !important;
}
body.theme--dark .tbf-card h3 {
    color: #7fb2ff !important;
}
body.theme--dark .tbf-card button,
body.theme--dark .tbf-card .tbf-load {
    background: linear-gradient(135deg, #22e39a, #10c47f) !important;
    color: #04130c !important;
    border: 0 !important;
}
body.theme--dark .dpb-ring span {
    background: #131f3d !important;
    box-shadow: inset 0 0 0 1px #263662;
}
body.theme--dark .dp-f input,
body.theme--dark .dp-f select,
body.theme--dark #dp-panel .dp-f input,
body.theme--dark #dp-panel .dp-f select,
body.theme--dark .dp-modal .dp-f input,
body.theme--dark .dp-modal .dp-f select {
    background: transparent !important;
    border: 0 !important;
}
body.theme--dark .dp-f {
    background: #0a1228 !important;
    border-color: #263662 !important;
}
body.theme--dark .dpb-ring {
    background: conic-gradient(var(--c) calc(var(--p) * 1deg), #1b2748 0) !important;
}
.dp-search select,
body.theme--dark .dp-search select {
    -webkit-appearance: none !important;
    appearance: none !important;
    align-self: center;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 26px 0 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a1bd' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
}