smartxtrader 3.8.1-xm.0

package/src/sass/app/trade.scss

@@ -0,0 +1,5012 @@
+@import "components/peek_box";
+@import "../../../node_modules/@xmasterx/webtrader-charts/src/charts";
+
+@mixin ul_segmented_navigation {
+    box-shadow: inset 0 0 0 1px rgba($COLOR_BLUE, 0.2);
+    background-color: $COLOR_LIGHT_GRAY;
+    color: $COLOR_BLUE;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+}
+
+:root {
+    --worm-chart-blue: #3b82f6;
+    --worm-chart-blue-glow: rgba(59, 130, 246, 0.45);
+    --worm-chart-red: #ff3358;
+    --worm-chart-red-glow: rgba(255, 51, 88, 0.3);
+    --worm-chart-green: #00b341;
+}
+
+@keyframes parity-logic-pulse {
+    0% {
+        box-shadow:
+            0 0 0 0 rgba(120, 255, 196, 0.16),
+            0 0 0 2px rgba(120, 255, 196, 0.08);
+    }
+
+    50% {
+        box-shadow:
+            0 0 0 6px rgba(120, 255, 196, 0.12),
+            0 0 0 10px rgba(74, 115, 255, 0.08);
+    }
+
+    100% {
+        box-shadow:
+            0 0 0 0 rgba(120, 255, 196, 0.16),
+            0 0 0 2px rgba(120, 255, 196, 0.08);
+    }
+}
+
+#trading_worm_chart {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+
+    .canvasjs-chart-container,
+    .canvasjs-chart-canvas {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+
+.parity-logic-menu {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 24px;
+    background:
+        radial-gradient(
+            circle at 20% 20%,
+            rgba(90, 255, 204, 0.1),
+            transparent 40%
+        ),
+        radial-gradient(
+            circle at 80% 80%,
+            rgba(74, 115, 255, 0.12),
+            transparent 42%
+        ),
+        rgba(4, 6, 18, 0.75);
+    backdrop-filter: blur(6px);
+    z-index: 1300;
+
+    &--hidden {
+        display: none;
+    }
+
+    &__content {
+        width: min(480px, 100%);
+        background: linear-gradient(
+            145deg,
+            rgba(7, 18, 41, 0.95),
+            rgba(5, 30, 32, 0.9)
+        );
+        border-radius: 16px;
+        box-shadow:
+            0 0 0 1px rgba(120, 255, 196, 0.25),
+            0 25px 70px rgba(0, 0, 0, 0.5),
+            0 0 42px rgba(120, 255, 196, 0.12);
+        color: var(--text-prominent);
+        border: 1px solid rgba(120, 255, 196, 0.4);
+        overflow: hidden;
+        backdrop-filter: blur(18px) saturate(140%);
+        position: relative;
+        z-index: 1301;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px;
+        border-bottom: 1px solid rgba(120, 255, 196, 0.25);
+        background: linear-gradient(
+            90deg,
+            rgba(120, 255, 196, 0.12),
+            rgba(74, 115, 255, 0.08)
+        );
+    }
+
+    &__title-wrap {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    &__title-icon {
+        color: #7fffc4;
+        filter: drop-shadow(0 0 10px rgba(120, 255, 196, 0.6));
+    }
+
+    &__title {
+        margin: 0;
+        font-size: 1.125rem;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        color: #e3f5ff;
+        text-shadow: 0 0 16px rgba(120, 255, 196, 0.5);
+    }
+
+    &__close {
+        border: none;
+        background: rgba(120, 255, 196, 0.12);
+        color: var(--text-prominent);
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: inset 0 0 0 1px rgba(120, 255, 196, 0.3);
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            background 0.2s ease;
+
+        &:hover {
+            transform: rotate(90deg);
+            box-shadow:
+                inset 0 0 0 1px rgba(120, 255, 196, 0.6),
+                0 0 12px rgba(120, 255, 196, 0.4);
+            background: rgba(120, 255, 196, 0.24);
+        }
+    }
+
+    &__options {
+        display: grid;
+        gap: 12px;
+        padding: 16px 20px;
+        background: linear-gradient(
+            180deg,
+            rgba(7, 18, 41, 0.4),
+            rgba(5, 30, 32, 0.6)
+        );
+    }
+
+    &__option {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0 14px;
+        padding: 14px 16px;
+        align-items: center;
+        border-radius: 14px;
+        border: 1px solid rgba(120, 255, 196, 0.24);
+        background: linear-gradient(
+            135deg,
+            rgba(18, 46, 65, 0.82),
+            rgba(18, 18, 38, 0.9)
+        );
+        box-shadow:
+            inset 0 0 0 1px rgba(120, 255, 196, 0.14),
+            0 8px 18px rgba(0, 0, 0, 0.35);
+        cursor: pointer;
+        overflow: hidden;
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            border-color 0.2s ease;
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow:
+                inset 0 0 0 1px rgba(120, 255, 196, 0.3),
+                0 14px 24px rgba(0, 0, 0, 0.55),
+                0 0 16px rgba(120, 255, 196, 0.24);
+        }
+
+        &:active {
+            transform: translateY(0);
+            box-shadow:
+                inset 0 0 0 1px rgba(120, 255, 196, 0.4),
+                0 6px 16px rgba(0, 0, 0, 0.35);
+        }
+
+        input {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+
+    &__option-glow {
+        position: absolute;
+        inset: 0;
+        border-radius: 14px;
+        background:
+            radial-gradient(
+                circle at 20% 20%,
+                rgba(120, 255, 196, 0.18),
+                transparent 45%
+            ),
+            radial-gradient(
+                circle at 80% 60%,
+                rgba(74, 115, 255, 0.18),
+                transparent 40%
+            );
+        opacity: 0;
+        transition: opacity 0.25s ease;
+        pointer-events: none;
+        filter: drop-shadow(0 0 18px rgba(120, 255, 196, 0.35));
+    }
+
+    &__option-icon {
+        width: 42px;
+        height: 42px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        background: linear-gradient(
+            145deg,
+            rgba(120, 255, 196, 0.18),
+            rgba(74, 115, 255, 0.16)
+        );
+        box-shadow:
+            inset 0 0 0 1px rgba(120, 255, 196, 0.28),
+            0 0 14px rgba(120, 255, 196, 0.26);
+        color: #9cf5ff;
+        z-index: 1;
+
+        svg {
+            width: 22px;
+            height: 22px;
+        }
+    }
+
+    &__option-body {
+        display: grid;
+        gap: 6px;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__option-label {
+        font-weight: 700;
+        color: #7fffc4;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    &__option-hint {
+        color: rgba(227, 245, 255, 0.8);
+        font-size: 0.9rem;
+        line-height: 1.5;
+    }
+
+    &__option input:focus-visible + .parity-logic-menu__option-glow {
+        opacity: 1;
+        box-shadow:
+            inset 0 0 0 1px rgba(120, 255, 196, 0.5),
+            0 0 18px rgba(120, 255, 196, 0.32);
+    }
+
+    &__option input:checked + .parity-logic-menu__option-glow {
+        opacity: 1;
+        animation: parity-logic-pulse 1.6s ease-in-out infinite;
+        border: 1px solid rgba(120, 255, 196, 0.45);
+    }
+
+    &__option input:checked ~ .parity-logic-menu__option-icon {
+        color: #0bfff5;
+        box-shadow:
+            inset 0 0 0 1px rgba(120, 255, 196, 0.5),
+            0 0 18px rgba(120, 255, 196, 0.46);
+    }
+
+    &__option
+        input:checked
+        ~ .parity-logic-menu__option-body
+        .parity-logic-menu__option-label {
+        color: #d7fffd;
+    }
+
+    &__option
+        input:checked
+        ~ .parity-logic-menu__option-body
+        .parity-logic-menu__option-hint {
+        color: rgba(215, 255, 253, 0.78);
+    }
+
+    &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        padding: 16px 20px;
+        border-top: 1px solid rgba(120, 255, 196, 0.2);
+        background: linear-gradient(
+            90deg,
+            rgba(74, 115, 255, 0.08),
+            rgba(120, 255, 196, 0.12)
+        );
+    }
+
+    &__action {
+        flex: 1 1 0;
+        min-width: 96px;
+        text-align: center;
+        border-radius: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        position: relative;
+        overflow: hidden;
+        font-weight: 700;
+        border: 1px solid transparent;
+        box-shadow: inset 0 0 0 1px rgba(120, 255, 196, 0.22);
+        color: #e3f5ff;
+        background: linear-gradient(
+            135deg,
+            rgba(12, 28, 48, 0.92),
+            rgba(74, 115, 255, 0.16)
+        );
+        transition:
+            background 0.2s ease,
+            box-shadow 0.22s ease,
+            color 0.2s ease,
+            transform 0.14s ease;
+
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow:
+                inset 0 0 0 1px rgba(120, 255, 196, 0.32),
+                0 0 14px rgba(120, 255, 196, 0.18);
+        }
+
+        &:active {
+            transform: translateY(0);
+            box-shadow:
+                inset 0 0 0 1px rgba(120, 255, 196, 0.42),
+                0 4px 10px rgba(0, 0, 0, 0.35);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 2px rgba(120, 255, 196, 0.7),
+                0 0 20px rgba(120, 255, 196, 0.35),
+                inset 0 0 0 1px rgba(120, 255, 196, 0.7);
+        }
+
+        &--primary {
+            color: #e8fdff;
+            text-shadow: 0 0 10px rgba(4, 16, 32, 0.7);
+            background: linear-gradient(
+                135deg,
+                #0d2339 0%,
+                #10c9aa 45%,
+                #4b7bff 100%
+            );
+            box-shadow:
+                0 0 16px rgba(120, 255, 196, 0.28),
+                inset 0 0 0 1px rgba(120, 255, 196, 0.5);
+
+            &:hover {
+                background: linear-gradient(
+                    135deg,
+                    #0f2945 0%,
+                    #14e6c2 45%,
+                    #6493ff 100%
+                );
+                box-shadow:
+                    0 0 20px rgba(120, 255, 196, 0.4),
+                    inset 0 0 0 1px rgba(120, 255, 196, 0.6);
+            }
+
+            &:active {
+                background: linear-gradient(
+                    135deg,
+                    #0b1d32 0%,
+                    #0fb99f 42%,
+                    #3b6ae0 100%
+                );
+                box-shadow:
+                    0 0 14px rgba(120, 255, 196, 0.32),
+                    inset 0 0 0 1px rgba(120, 255, 196, 0.7);
+            }
+
+            &:focus-visible {
+                box-shadow:
+                    0 0 0 2px rgba(120, 255, 196, 0.8),
+                    0 0 22px rgba(120, 255, 196, 0.5),
+                    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+            }
+        }
+
+        &.button-secondary {
+            background: linear-gradient(
+                135deg,
+                rgba(10, 24, 42, 0.96),
+                rgba(74, 115, 255, 0.2)
+            );
+            color: #d2e9ff;
+            border-color: rgba(74, 115, 255, 0.42);
+            text-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
+            box-shadow:
+                inset 0 0 0 1px rgba(74, 115, 255, 0.35),
+                0 0 12px rgba(74, 115, 255, 0.18);
+
+            &:hover {
+                background: linear-gradient(
+                    135deg,
+                    rgba(12, 28, 52, 0.98),
+                    rgba(120, 255, 196, 0.16)
+                );
+                color: #f0fbff;
+                box-shadow:
+                    inset 0 0 0 1px rgba(120, 255, 196, 0.32),
+                    0 0 16px rgba(74, 115, 255, 0.24);
+            }
+
+            &:active {
+                background: linear-gradient(
+                    135deg,
+                    rgba(8, 18, 34, 0.96),
+                    rgba(74, 115, 255, 0.26)
+                );
+                box-shadow:
+                    inset 0 0 0 1px rgba(120, 255, 196, 0.38),
+                    0 4px 10px rgba(0, 0, 0, 0.32);
+            }
+
+            &:focus-visible {
+                box-shadow:
+                    0 0 0 2px rgba(74, 115, 255, 0.7),
+                    0 0 20px rgba(120, 255, 196, 0.35),
+                    inset 0 0 0 1px rgba(120, 255, 196, 0.56);
+            }
+        }
+    }
+}
+
+.worm-chart-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 16px;
+    background: var(--general-section-1);
+    box-shadow:
+        0 8px 24px rgba(14, 16, 19, 0.12),
+        0 0 18px var(--worm-chart-blue-glow);
+
+    &__chart {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    &__canvas {
+        display: block;
+        height: clamp(120px, 18vh, 160px);
+        transition: transform 0.2s ease;
+        will-change: transform;
+        filter: drop-shadow(0 0 8px var(--worm-chart-blue-glow))
+            drop-shadow(0 0 10px var(--worm-chart-red-glow));
+    }
+
+    &__spot {
+        display: flex;
+        justify-content: center;
+
+        #spot {
+            padding: 6px 12px;
+            border-radius: 12px;
+            font-weight: 700;
+            letter-spacing: 0.02em;
+            background: var(--general-section-1);
+            color: var(--text-prominent);
+            box-shadow:
+                0 0 10px var(--worm-chart-blue-glow),
+                0 0 12px rgba(0, 0, 0, 0.35);
+            transition:
+                background-color 0.2s ease,
+                box-shadow 0.2s ease,
+                color 0.2s ease;
+        }
+
+        #spot.price_moved_up {
+            background: var(--worm-chart-blue);
+            color: #fff;
+            box-shadow: 0 0 12px var(--worm-chart-blue-glow);
+        }
+
+        #spot.price_moved_down {
+            background: var(--worm-chart-red);
+            color: #fff;
+            box-shadow: 0 0 12px var(--worm-chart-red-glow);
+        }
+    }
+
+    &__spot--hidden {
+        #spot {
+            display: none !important;
+        }
+    }
+
+    &__progress {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 2px 6px;
+        margin: 0;
+        border-radius: 8px;
+        background: rgba(6, 16, 32, 0.6);
+        box-shadow: inset 0 0 0 1px rgba(35, 208, 255, 0.12);
+        color: #2b0f5f;
+    }
+
+    &__progress-percentage {
+        font-weight: 700;
+        font-size: 11px;
+        color: currentColor;
+        text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
+    }
+
+    &__progress-bar {
+        position: relative;
+        flex: 1;
+        height: 38px;
+        border-radius: 8px;
+        background: rgba(35, 208, 255, 0.08);
+        overflow: hidden;
+        box-shadow: inset 0 0 0 1px rgba(35, 208, 255, 0.18);
+    }
+
+    #worm_progress_panel {
+        padding: 1px 4px;
+        gap: 4px;
+
+        .worm-chart-panel__progress-bar {
+            height: 20px;
+            background: linear-gradient(
+                135deg,
+                rgba(16, 36, 72, 0.96) 0%,
+                rgba(92, 24, 124, 0.9) 45%,
+                rgba(40, 234, 255, 0.82) 100%
+            );
+            box-shadow:
+                inset 0 0 0 1px rgba(88, 214, 255, 0.35),
+                0 0 14px rgba(40, 234, 255, 0.24);
+        }
+
+        .worm-chart-panel__progress-inline {
+            inset: 4px 6px auto 6px;
+            gap: 6px;
+            font-size: 8px;
+        }
+
+        .worm-chart-panel__progress-inline--secondary {
+            inset: auto 6px 4px 6px;
+            font-size: 7px;
+        }
+
+        .worm-chart-panel__progress-percentage,
+        .worm-chart-panel__stat {
+            font-size: 9px;
+        }
+    }
+
+    &__progress-inline {
+        position: absolute;
+        inset: 6px 8px auto 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        gap: 10px;
+        padding: 0 8px;
+        font-size: 10px;
+        line-height: 1.4;
+        color: currentColor;
+        pointer-events: none;
+        text-shadow: 0 0 4px rgba(0, 0, 0, 0.48);
+        z-index: 1;
+        white-space: nowrap;
+    }
+
+    &__progress-inline--secondary {
+        inset: auto 8px 6px 8px;
+        flex-direction: row;
+        justify-content: center;
+        gap: 10px;
+        opacity: 0.92;
+        font-size: 9px;
+    }
+
+    &__progress-divider {
+        opacity: 0.6;
+        font-size: 10px;
+    }
+
+    &__progress-fill {
+        position: absolute;
+        inset: 0;
+        width: 0;
+        border-radius: inherit;
+        background: linear-gradient(
+            90deg,
+            rgba(26, 255, 143, 0.95),
+            rgba(0, 195, 102, 0.9)
+        );
+        box-shadow:
+            0 0 6px rgba(26, 255, 143, 0.45),
+            0 0 10px rgba(0, 195, 102, 0.38);
+        transition: width 0.3s ease;
+
+        &[data-tone="neutral"] {
+            background: linear-gradient(
+                90deg,
+                rgba(255, 230, 102, 0.9),
+                rgba(182, 255, 102, 0.82)
+            );
+            box-shadow:
+                0 0 6px rgba(255, 230, 102, 0.5),
+                0 0 10px rgba(182, 255, 102, 0.38);
+        }
+
+        &[data-tone="caution"] {
+            background: linear-gradient(
+                90deg,
+                rgba(255, 160, 72, 0.94),
+                rgba(255, 99, 71, 0.9)
+            );
+            box-shadow:
+                0 0 6px rgba(255, 160, 72, 0.45),
+                0 0 10px rgba(255, 99, 71, 0.38);
+        }
+
+        &[data-tone="negative"] {
+            background: linear-gradient(
+                90deg,
+                rgba(255, 80, 80, 0.96),
+                rgba(255, 34, 34, 0.92)
+            );
+            box-shadow:
+                0 0 6px rgba(255, 80, 80, 0.45),
+                0 0 10px rgba(255, 34, 34, 0.38);
+        }
+    }
+
+    &__stat {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0;
+        border-radius: 4px;
+        font-size: 10px;
+        line-height: 1.2;
+        color: currentColor;
+        background: transparent;
+        box-shadow: none;
+    }
+
+    &__progress-tooltip {
+        position: absolute;
+        top: calc(100% + 8px);
+        left: 0;
+        display: none;
+        flex-direction: column;
+        gap: 4px;
+        padding: 10px 12px;
+        min-width: 220px;
+        border-radius: 8px;
+        background: rgba(8, 16, 32, 0.94);
+        border: 1px solid rgba(123, 240, 255, 0.45);
+        box-shadow:
+            0 10px 20px rgba(0, 0, 0, 0.45),
+            inset 0 0 0 1px rgba(10, 180, 220, 0.35);
+        color: #7bf0ff;
+        text-shadow: 0 0 10px rgba(123, 240, 255, 0.35);
+        pointer-events: none;
+        z-index: 3;
+    }
+
+    &__progress-controls {
+        display: flex;
+        align-items: center;
+    }
+
+    &__progress-selector {
+        height: 22px;
+        padding: 0 10px;
+        border-radius: 6px;
+        border: 1px solid rgba(35, 208, 255, 0.24);
+        background: rgba(6, 16, 32, 0.8);
+        color: var(--text-prominent);
+        font-size: 10px;
+        line-height: 1.3;
+        box-shadow: inset 0 0 0 1px rgba(35, 208, 255, 0.08);
+
+        &:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 1px var(--worm-chart-blue-glow),
+                inset 0 0 0 1px rgba(35, 208, 255, 0.32);
+        }
+
+        option,
+        optgroup {
+            padding: 6px 10px;
+            color: var(--text-prominent);
+            background: var(--general-section-1);
+        }
+    }
+
+    &__progress:hover &__progress-tooltip,
+    &__progress:focus-within &__progress-tooltip {
+        display: flex;
+    }
+
+    &__progress-settings {
+        width: 22px;
+        height: 22px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 1px solid rgba(35, 208, 255, 0.24);
+        border-radius: 6px;
+        background: rgba(6, 16, 32, 0.8);
+        color: var(--text-less-prominent);
+        box-shadow: inset 0 0 0 1px rgba(35, 208, 255, 0.08);
+
+        svg {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &__progress-settings-panel {
+        position: absolute;
+        right: 0;
+        top: 100%;
+        margin-top: 4px;
+        display: none;
+        flex-direction: column;
+        gap: 6px;
+        padding: 8px;
+        min-width: 160px;
+        border-radius: 8px;
+        background: rgba(6, 16, 32, 0.92);
+        box-shadow:
+            0 8px 14px rgba(0, 0, 0, 0.35),
+            inset 0 0 0 1px rgba(35, 208, 255, 0.14);
+        z-index: 100;
+
+        &--open {
+            display: flex;
+        }
+    }
+
+    &__progress-settings-label {
+        font-size: 10px;
+        color: var(--text-less-prominent);
+    }
+
+    &__progress-input {
+        width: 100%;
+        padding: 6px;
+        border-radius: 6px;
+        border: 1px solid rgba(35, 208, 255, 0.32);
+        background: rgba(6, 16, 32, 0.7);
+        color: var(--text-prominent);
+        font-size: 11px;
+    }
+
+    &__progress-apply {
+        align-self: flex-end;
+        padding: 4px 10px;
+        font-size: 11px;
+        border-radius: 8px;
+        border: 1px solid rgba(120, 255, 196, 0.35);
+        background: linear-gradient(
+            135deg,
+            rgba(10, 24, 46, 0.92),
+            rgba(120, 255, 196, 0.18)
+        );
+        color: #e6fff5;
+        box-shadow:
+            0 0 12px rgba(120, 255, 196, 0.18),
+            inset 0 0 0 1px rgba(120, 255, 196, 0.26);
+        text-shadow: 0 0 6px rgba(120, 255, 196, 0.25);
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            background 0.2s ease;
+
+        &:hover,
+        &:focus-visible {
+            background: linear-gradient(
+                135deg,
+                rgba(10, 32, 60, 0.98),
+                rgba(120, 255, 196, 0.28)
+            );
+            box-shadow:
+                0 0 16px rgba(120, 255, 196, 0.25),
+                inset 0 0 0 1px rgba(120, 255, 196, 0.35);
+            transform: translateY(-1px);
+            outline: none;
+        }
+
+        &:active {
+            transform: translateY(0);
+            box-shadow:
+                0 0 10px rgba(120, 255, 196, 0.2),
+                inset 0 0 0 1px rgba(120, 255, 196, 0.28);
+        }
+    }
+}
+
+.worm-chart-panel__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-top: 2px;
+    flex-wrap: wrap;
+}
+
+.worm-chart-panel__action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    line-height: 1;
+    border: none;
+    background: transparent;
+    color: var(--worm-chart-blue);
+    border-radius: 8px;
+    transition:
+        color 0.2s ease,
+        filter 0.2s ease,
+        transform 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--worm-chart-red);
+        filter: drop-shadow(0 0 8px var(--worm-chart-red-glow))
+            drop-shadow(0 0 10px var(--worm-chart-blue-glow));
+        transform: translateY(-1px);
+        outline: none;
+    }
+
+    &:focus-visible {
+        box-shadow:
+            0 0 0 1px var(--worm-chart-blue-glow),
+            0 0 10px var(--worm-chart-red-glow);
+    }
+}
+
+.worm-chart-panel__action-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    border: 1px solid rgba(46, 106, 255, 0.45);
+    background: linear-gradient(
+        135deg,
+        rgba(10, 20, 56, 0.82),
+        rgba(40, 77, 162, 0.32)
+    );
+    box-shadow:
+        0 0 12px rgba(35, 208, 255, 0.12),
+        inset 0 0 0 1px rgba(10, 39, 71, 0.65);
+    backdrop-filter: blur(6px);
+
+    &--chart {
+        border-color: rgba(35, 208, 255, 0.45);
+        background: linear-gradient(
+            135deg,
+            rgba(10, 20, 56, 0.9),
+            rgba(35, 208, 255, 0.18)
+        );
+    }
+
+    &--settings {
+        border-color: rgba(255, 51, 88, 0.45);
+        background: linear-gradient(
+            135deg,
+            rgba(24, 16, 54, 0.9),
+            rgba(255, 51, 88, 0.18)
+        );
+    }
+
+    &--tables {
+        border-color: rgba(120, 255, 196, 0.45);
+        background: linear-gradient(
+            135deg,
+            rgba(10, 30, 44, 0.9),
+            rgba(120, 255, 196, 0.14)
+        );
+    }
+
+    .worm-chart-panel__action-button {
+        color: inherit;
+    }
+}
+
+.worm-chart-panel__action-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.worm-chart-panel__mode-icon {
+    display: none;
+}
+
+.worm-chart-panel__mode-icon--active {
+    display: block;
+}
+
+.worm-chart-panel__mode-dropdown {
+    position: relative;
+}
+
+.worm-chart-panel__mode-modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 48px 16px 24px;
+    background: linear-gradient(
+        155deg,
+        rgba(24, 30, 58, 0.25),
+        rgba(8, 14, 36, 0.1)
+    );
+    backdrop-filter: blur(10px) saturate(160%);
+    z-index: 1200;
+
+    &--open {
+        display: flex;
+    }
+}
+
+.worm-chart-panel__mode-modal__dialog {
+    width: min(520px, 100%);
+    max-height: calc(100vh - 48px);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 18px 18px 20px;
+    border-radius: 16px;
+    border: 1px solid rgba(35, 208, 255, 0.45);
+    background: linear-gradient(
+        140deg,
+        rgba(10, 20, 56, 0.95),
+        rgba(35, 208, 255, 0.16)
+    );
+    box-shadow:
+        0 18px 40px rgba(0, 0, 0, 0.45),
+        0 0 18px rgba(35, 208, 255, 0.2);
+    overflow: hidden;
+}
+
+.worm-chart-panel__mode-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.worm-chart-panel__mode-modal__title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-prominent);
+    letter-spacing: 0.02em;
+}
+
+.worm-chart-panel__mode-modal__close {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 51, 88, 0.4);
+    background: rgba(12, 16, 38, 0.8);
+    color: #ffeff3;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+        border-color: rgba(255, 51, 88, 0.8);
+        box-shadow: 0 0 12px rgba(255, 51, 88, 0.35);
+        transform: translateY(-1px);
+    }
+}
+
+.worm-chart-panel__mode-modal__body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+/* Grid layout for chart mode options inside the dropdown */
+.worm-chart-panel__mode-options {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+}
+
+/* Divider between options and controls */
+.worm-chart-panel__divider {
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background: rgba(35, 208, 255, 0.2);
+    margin: 4px 0;
+}
+
+.worm-chart-panel__mode-controls {
+    display: grid;
+    gap: 12px;
+    color: var(--text-prominent);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.worm-chart-panel__mode-control-group {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    align-items: start;
+}
+
+.worm-chart-panel__mode-control-title {
+    grid-column: 1 / -1;
+    margin-right: 0;
+    color: var(--text-general);
+
+    font-weight: 600;
+}
+
+.worm-chart-panel__mode-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    cursor: pointer;
+}
+
+.worm-chart-panel__mode-control-label {
+    color: var(--text-prominent);
+}
+
+.worm-chart-panel__mode-checkbox {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
+.worm-chart-panel__mode-switch {
+    position: relative;
+    width: 40px;
+    height: 22px;
+    flex-shrink: 0;
+}
+
+.worm-chart-panel__mode-switch-track {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 999px;
+    padding: 2px;
+    background: rgba(8, 16, 38, 0.7);
+    border: 1px solid rgba(35, 208, 255, 0.35);
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
+    transition:
+        background 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.worm-chart-panel__mode-switch-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(135deg, #f5fbff, #8de7ff);
+    box-shadow:
+        0 0 6px rgba(35, 208, 255, 0.45),
+        0 2px 6px rgba(0, 0, 0, 0.35);
+    transform: translateX(0);
+    transition: transform 0.2s ease;
+}
+
+.worm-chart-panel__mode-checkbox:checked
+    + .worm-chart-panel__mode-switch-track {
+    background: rgba(35, 208, 255, 0.25);
+    border-color: rgba(35, 208, 255, 0.7);
+}
+
+.worm-chart-panel__mode-checkbox:checked
+    + .worm-chart-panel__mode-switch-track
+    .worm-chart-panel__mode-switch-thumb {
+    transform: translateX(18px);
+}
+
+.worm-chart-panel__mode-checkbox:focus-visible
+    + .worm-chart-panel__mode-switch-track {
+    box-shadow:
+        0 0 0 2px rgba(35, 208, 255, 0.4),
+        inset 0 0 8px rgba(0, 0, 0, 0.35);
+}
+
+.worm-chart-panel__mode-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--text-prominent);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.worm-chart-panel__mode-option:hover,
+.worm-chart-panel__mode-option:focus-visible {
+    border-color: rgba(35, 208, 255, 0.55);
+    background: rgba(35, 208, 255, 0.12);
+}
+
+.worm-chart-panel__mode-option--active {
+    border-color: rgba(35, 208, 255, 0.65);
+    background: rgba(35, 208, 255, 0.2);
+}
+
+.worm-chart-panel__mode-option-icon {
+    width: 16px;
+    height: 16px;
+}
+
+@media screen and (max-width: 640px) {
+    .worm-chart-panel__mode-modal {
+        align-items: flex-start;
+        padding: 24px 12px 16px;
+    }
+
+    .worm-chart-panel__mode-modal__dialog {
+        width: 100%;
+        border-radius: 16px 16px 12px 12px;
+        max-height: 85vh;
+    }
+
+    .worm-chart-panel__mode-options {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .worm-chart-panel__mode-control-group {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media screen and (max-width: 420px) {
+    .worm-chart-panel__mode-options {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .worm-chart-panel__mode-control-group {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+}
+
+.worm-chart-panel__visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.tick-table-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.tick-table-tape {
+    padding: 12px;
+    border-radius: 16px;
+    border: 1px solid rgba(10, 39, 71, 0.45);
+    background: rgba(9, 18, 42, 0.48);
+    box-shadow: inset 0 0 0 1px rgba(20, 57, 255, 0.12);
+    color: var(--text-prominent);
+}
+
+.tick-table-tape--hidden {
+    display: none;
+}
+
+.tick-table__controls {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.tick-table__toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 12px;
+    border: 1px solid var(--worm-chart-blue-glow);
+    background: linear-gradient(
+        135deg,
+        rgba(12, 16, 38, 0.92),
+        rgba(20, 52, 112, 0.88)
+    );
+    color: #e2ecff;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease,
+        color 0.2s ease,
+        transform 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+        background: linear-gradient(
+            135deg,
+            rgba(12, 16, 38, 0.96),
+            rgba(63, 99, 255, 0.25)
+        );
+        border-color: var(--worm-chart-blue);
+        color: #ffffff;
+    }
+
+    &.tick-table__toggle--expanded {
+        background: linear-gradient(
+            135deg,
+            rgba(12, 16, 38, 0.96),
+            rgba(255, 51, 88, 0.28)
+        );
+        border-color: var(--worm-chart-red);
+        color: #ffffff;
+    }
+}
+
+.tick-table__toggle.worm-chart-panel__action-button {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    gap: 0;
+    background: transparent;
+    border: none;
+    color: inherit;
+}
+
+.tick-table__toggle-icon {
+    font-size: 0.875rem;
+    transition: transform 0.2s ease;
+}
+
+.tick-table__toggle--expanded .tick-table__toggle-icon {
+    transform: rotate(180deg);
+}
+
+.tick-table {
+    margin-top: 8px;
+
+    &--hidden,
+    &--collapsed {
+        display: none;
+    }
+}
+
+.tick-table-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border-radius: 16px;
+    border: 1px solid rgba(10, 39, 71, 0.45);
+    background: rgba(9, 18, 42, 0.48);
+    box-shadow: inset 0 0 0 1px rgba(20, 57, 255, 0.12);
+    color: var(--text-prominent);
+
+    &--parity {
+        border-color: rgba(120, 255, 196, 0.6);
+        box-shadow:
+            inset 0 0 0 1px rgba(120, 255, 196, 0.18),
+            0 0 16px rgba(120, 255, 196, 0.12);
+        background: linear-gradient(
+            145deg,
+            rgba(8, 24, 44, 0.72),
+            rgba(12, 56, 44, 0.58)
+        );
+    }
+
+    &--hidden {
+        display: none;
+    }
+
+    &--empty {
+        .tick-table-compact__cell,
+        .tick-table-compact__tape-cell {
+            opacity: 0.45;
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            text-shadow: none;
+            user-select: none;
+
+            &.tick-table-compact__cell--highlight,
+            &.tick-table-compact__cell--value,
+            &.tick-table-compact__tape-cell--active {
+                color: transparent;
+                -webkit-text-fill-color: transparent;
+                text-shadow: none;
+            }
+
+            &::selection,
+            &::-moz-selection {
+                color: transparent;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.tick-table-compact__tape {
+    display: grid;
+    grid-template-columns: repeat(
+        var(--tick-table-compact-column-count, 10),
+        minmax(0, 1fr)
+    );
+    gap: 8px;
+
+    &--empty {
+        .tick-table-compact__tape-cell {
+            opacity: 0.45;
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            text-shadow: none;
+            user-select: none;
+
+            &.tick-table-compact__cell--highlight,
+            &.tick-table-compact__cell--value,
+            &.tick-table-compact__tape-cell--active {
+                color: transparent;
+                -webkit-text-fill-color: transparent;
+                text-shadow: none;
+            }
+
+            &::selection,
+            &::-moz-selection {
+                color: transparent;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.tick-table-compact__headline {
+    width: 100%;
+    height: 4px;
+    margin-top: 8px;
+    border-radius: 9999px;
+    background: transparent;
+    opacity: 1;
+    pointer-events: none;
+    transition:
+        background-color 0.2s ease,
+        opacity 0.2s ease;
+}
+
+.tick-table-compact__headline--hidden {
+    opacity: 0;
+    background: transparent;
+}
+
+.tick-table-compact__tape-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    min-height: 32px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    background: rgba(6, 13, 27, 0.4);
+    color: var(--text-prominent);
+    transition:
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    font-variant-numeric: tabular-nums;
+
+    &--active {
+        box-shadow: 0 6px 18px rgba(20, 57, 255, 0.28);
+    }
+
+    &.tick-table-compact__cell--zone-up {
+        background: linear-gradient(
+            145deg,
+            rgba(20, 57, 255, 0.95) 0%,
+            rgba(11, 32, 108, 0.88) 100%
+        );
+        box-shadow: 0 6px 18px rgba(20, 57, 255, 0.45);
+    }
+
+    &.tick-table-compact__cell--zone-down {
+        background: linear-gradient(
+            145deg,
+            rgba(255, 77, 79, 0.95) 0%,
+            rgba(130, 3, 3, 0.92) 100%
+        );
+        box-shadow: 0 6px 18px rgba(255, 77, 79, 0.45);
+    }
+
+    &.tick-table-compact__cell--zone-equal {
+        background: linear-gradient(
+            145deg,
+            rgba(137, 180, 255, 0.95) 0%,
+            rgba(68, 104, 186, 0.92) 100%
+        );
+        box-shadow: 0 6px 18px rgba(137, 180, 255, 0.35);
+    }
+
+    &.tick-table-compact__cell--highlight {
+        color: #ffffff;
+    }
+}
+
+.tick-table-compact__columns {
+    display: grid;
+    grid-template-columns: repeat(
+        var(--tick-table-compact-column-count, 10),
+        minmax(0, 1fr)
+    );
+    gap: 8px;
+}
+
+.tick-table-compact__column {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    &--active .tick-table-compact__cell--highlight {
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
+    }
+}
+
+.tick-table-compact__cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: 6px;
+    min-height: 36px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    background: rgba(6, 13, 27, 0.36);
+    color: var(--text-prominent);
+    transition:
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    padding: 4px;
+
+    &--upper {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    &--lower {
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    &--value {
+        font-size: 0.75rem;
+        font-weight: 500;
+        background: rgba(10, 39, 71, 0.3);
+        color: transparent;
+        -webkit-text-fill-color: transparent;
+        text-shadow: none;
+        font-variant-numeric: tabular-nums;
+        user-select: none;
+
+        &::selection,
+        &::-moz-selection {
+            color: transparent;
+            background: transparent;
+        }
+    }
+
+    &--highlight {
+        color: #ffffff;
+    }
+
+    &--zone-up {
+        background: linear-gradient(
+            145deg,
+            rgba(20, 57, 255, 0.95) 0%,
+            rgba(11, 32, 108, 0.88) 100%
+        );
+        box-shadow: 0 10px 24px rgba(20, 57, 255, 0.45);
+    }
+
+    &--zone-down {
+        background: linear-gradient(
+            145deg,
+            rgba(255, 44, 85, 0.92) 0%,
+            rgba(123, 20, 48, 0.88) 100%
+        );
+        box-shadow: 0 10px 24px rgba(255, 44, 85, 0.4);
+    }
+
+    &--zone-equal {
+        background: linear-gradient(
+            145deg,
+            rgba(84, 199, 142, 0.9) 0%,
+            rgba(27, 92, 68, 0.82) 100%
+        );
+        box-shadow: 0 10px 24px rgba(84, 199, 142, 0.36);
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .tick-table-compact__columns {
+        gap: 6px;
+    }
+
+    .tick-table-compact__cell {
+        min-height: 30px;
+        font-size: 0.8125rem;
+    }
+}
+
+.tick-table__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    border: 1px solid rgba(10, 39, 71, 0.6);
+    background: rgba(31, 27, 27, 0.18);
+    color: var(--text-prominent);
+}
+
+.tick-table__header th {
+    padding: 10px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-align: center;
+    border-bottom: 1px solid rgba(10, 39, 71, 0.6);
+}
+
+.tick-table__body .tick-table__row {
+    transition: background-color 0.2s ease;
+}
+
+.tick-table__cell {
+    padding: 8px;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-bottom: 1px solid rgba(10, 39, 71, 0.35);
+}
+
+.tick-table__row--empty .tick-table__cell {
+    color: rgba(255, 255, 255, 0.32);
+}
+
+.tick-table__row--up {
+    background: rgba(20, 57, 255, 0.08);
+}
+
+.tick-table__row--down {
+    background: rgba(255, 20, 57, 0.08);
+}
+
+.tick-table__row--equal {
+    background: rgba(57, 255, 20, 0.08);
+}
+
+.tick-table__cell--high {
+    font-weight: 700;
+    color: #1439ff;
+}
+
+.tick-table__cell--low {
+    font-weight: 700;
+    color: #ff1439;
+}
+
+.tick-table__direction-label {
+    display: inline-block;
+    min-width: 4ch;
+}
+
+@media screen and (max-width: 960px) {
+    .tick-table__cell,
+    .tick-table__header th {
+        padding: 6px;
+        font-size: 0.75rem;
+    }
+}
+
+.worm-chart-settings-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 32px 16px 16px;
+    z-index: 1200;
+
+    &.is-visible {
+        display: flex;
+    }
+
+    &--top-aligned {
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding-top: 32px;
+    }
+    &__content {
+        background: var(--general-section-1);
+        color: var(--text-prominent);
+        border-radius: 8px;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
+        width: min(340px, 100%);
+        max-height: calc(100vh - 32px);
+        overflow-y: auto;
+        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        margin-top: 8px;
+    }
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+    }
+    &__title {
+        font-size: 1.25rem;
+        margin: 0;
+    }
+    &__close {
+        background: none;
+        border: none;
+        color: var(--text-prominent);
+        font-size: 1.5rem;
+        line-height: 1;
+        cursor: pointer;
+        padding: 4px;
+
+        &:hover,
+        &:focus {
+            color: var(--text-normal);
+        }
+    }
+    &__body {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        label {
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+    }
+    &__section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding-top: 12px;
+        margin-top: 4px;
+        border-top: 1px solid var(--border-normal);
+    }
+    &__toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        label {
+            font-weight: 500;
+        }
+    }
+    &__checkbox {
+        width: 16px;
+        height: 16px;
+        accent-color: var(--brand-secondary);
+    }
+    &__input {
+        width: 100%;
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1px solid var(--border-normal);
+        background: var(--general-section-2);
+        color: var(--text-prominent);
+        font-size: 0.875rem;
+        line-height: 1.5;
+        min-height: 40px;
+
+        &:focus {
+            outline: none;
+            border-color: var(--brand-secondary);
+            box-shadow: 0 0 0 1px var(--brand-secondary);
+        }
+    }
+    &__select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-image:
+            linear-gradient(
+                45deg,
+                transparent 50%,
+                var(--text-less-prominent) 50%
+            ),
+            linear-gradient(
+                135deg,
+                var(--text-less-prominent) 50%,
+                transparent 50%
+            );
+        background-position:
+            calc(100% - 20px) center,
+            calc(100% - 14px) center;
+        background-size:
+            6px 6px,
+            6px 6px;
+        background-repeat: no-repeat;
+        padding-right: 32px;
+        cursor: pointer;
+    }
+    &__select::-ms-expand {
+        display: none;
+    }
+    &__hint {
+        margin: 0;
+        font-size: 0.75rem;
+        color: var(--text-less-prominent);
+    }
+    &__link-button {
+        background: none;
+        border: none;
+        color: var(--brand-secondary);
+        font-weight: 600;
+        font-size: 0.875rem;
+        padding: 0;
+        cursor: pointer;
+        align-self: flex-start;
+
+        &:hover,
+        &:focus {
+            text-decoration: underline;
+            outline: none;
+        }
+    }
+    &__timers {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+    &__range {
+        width: 100%;
+        accent-color: var(--brand-secondary);
+    }
+    &__value {
+        min-width: 32px;
+        text-align: right;
+        font-weight: 600;
+        font-size: 0.875rem;
+        color: var(--text-prominent);
+    }
+    .candle-color-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 12px;
+        margin: 8px 0 4px;
+
+        &__item {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
+            input[type="color"] {
+                padding: 0;
+                height: 40px;
+            }
+        }
+    }
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+
+        .worm-chart-settings-modal__action {
+            position: relative;
+            overflow: hidden;
+            padding: 10px 18px;
+            min-width: 120px;
+            border-radius: 8px;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            border: 1px solid rgba(108, 213, 255, 0.6);
+            color: var(--text-prominent);
+            background: linear-gradient(
+                135deg,
+                rgba(10, 22, 48, 0.88),
+                rgba(26, 22, 54, 0.9)
+            );
+            box-shadow:
+                0 0 12px var(--worm-chart-blue-glow),
+                0 8px 18px rgba(0, 0, 0, 0.35),
+                inset 0 1px 0 rgba(255, 255, 255, 0.06);
+            transition:
+                transform 0.2s ease,
+                box-shadow 0.2s ease,
+                border-color 0.2s ease,
+                background 0.25s ease;
+
+            &:hover,
+            &:focus-visible {
+                outline: none;
+                transform: translateY(-2px);
+                box-shadow:
+                    0 0 18px var(--worm-chart-blue-glow),
+                    0 12px 24px rgba(0, 0, 0, 0.45),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+                border-color: var(--worm-chart-blue);
+            }
+
+            &:active {
+                transform: translateY(0);
+                box-shadow:
+                    0 0 8px var(--worm-chart-blue-glow),
+                    0 6px 12px rgba(0, 0, 0, 0.35),
+                    inset 0 2px 6px rgba(0, 0, 0, 0.35);
+            }
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: -120%;
+                background: radial-gradient(
+                    120% 120% at 50% 20%,
+                    rgba(59, 130, 246, 0.18),
+                    transparent
+                );
+                transform: rotate(12deg);
+                transition:
+                    transform 0.4s ease,
+                    opacity 0.4s ease;
+                opacity: 0;
+            }
+
+            &:hover::after,
+            &:focus-visible::after {
+                transform: rotate(0deg) translateY(12%);
+                opacity: 1;
+            }
+        }
+
+        .worm-chart-settings-modal__action--primary {
+            background: linear-gradient(
+                135deg,
+                var(--worm-chart-blue) 0%,
+                var(--worm-chart-red) 100%
+            );
+            color: #050814;
+            box-shadow:
+                0 0 16px var(--worm-chart-blue-glow),
+                0 10px 20px rgba(0, 0, 0, 0.4),
+                inset 0 1px 0 rgba(255, 255, 255, 0.18);
+            border-color: var(--worm-chart-blue);
+
+            &:hover,
+            &:focus-visible {
+                background: linear-gradient(135deg, #5da8ff 0%, #ff5c7a 100%);
+            }
+
+            &:active {
+                background: linear-gradient(135deg, #3f83f8 0%, #ff3e63 100%);
+            }
+        }
+    }
+}
+
+.worm-chart-move-control {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &__input {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+}
+
+.worm-chart-settings-modal__range {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.worm-chart-offset-pad {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    margin-top: 4px;
+    border-radius: 8px;
+    background: linear-gradient(
+        135deg,
+        rgba(59, 130, 246, 0.12),
+        rgba(255, 51, 88, 0.08)
+    );
+    border: 1px solid var(--worm-chart-blue-glow);
+
+    &__grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 8px;
+        align-items: center;
+        justify-items: center;
+    }
+
+    &__middle-row {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px;
+        width: 100%;
+        align-items: center;
+        justify-items: center;
+    }
+
+    &__center-dot {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        color: var(--text-less-prominent);
+    }
+
+    &__btn {
+        width: 100%;
+        max-width: 72px;
+        height: 36px;
+        border-radius: 8px;
+        border: 1px solid var(--worm-chart-blue-glow);
+        background: rgba(59, 130, 246, 0.08);
+        color: #e8f5ff;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        cursor: pointer;
+        transition:
+            transform 0.15s ease,
+            box-shadow 0.2s ease,
+            border-color 0.2s ease;
+
+        &:hover,
+        &:focus-visible {
+            outline: none;
+            transform: translateY(-1px);
+            border-color: var(--worm-chart-red);
+            box-shadow:
+                0 0 12px var(--worm-chart-blue-glow),
+                0 0 10px var(--worm-chart-red-glow);
+        }
+
+        &:active {
+            transform: translateY(0);
+            background: rgba(255, 51, 88, 0.16);
+        }
+    }
+}
+
+.theme--dark {
+    $chart-neon-green: #b7e16b;
+
+    .chart-view {
+        background: linear-gradient(
+            160deg,
+            #05080f 0%,
+            #070c16 40%,
+            #0c1222 100%
+        );
+        border: 1px solid rgba($chart-neon-green, 0.25);
+        box-shadow:
+            0 12px 48px rgba(0, 0, 0, 0.6),
+            inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        border-radius: 10px;
+        padding: 8px;
+
+        .instrument_name,
+        .vertical-bottom,
+        .charttype-name,
+        .timeperiod-name,
+        .title {
+            color: $chart-neon-green;
+            text-shadow: 0 0 4px rgba($chart-neon-green, 0.35);
+        }
+
+        .countBubl {
+            background: rgba($chart-neon-green, 0.12);
+            color: $chart-neon-green;
+            border: 1px solid rgba($chart-neon-green, 0.28);
+            box-shadow: 0 0 10px rgba($chart-neon-green, 0.25);
+        }
+
+        .chartSubContainerHeader,
+        .chartOptions_overlay,
+        .chart-dialog,
+        .chartOptions_overlay .table,
+        .chartOptions_overlay .table .row:not(:last-child) {
+            background: radial-gradient(
+                120% 120% at 50% -10%,
+                rgba($chart-neon-green, 0.06),
+                rgba(4, 10, 20, 0.96)
+            );
+            border-color: rgba($chart-neon-green, 0.28);
+            color: $chart-neon-green;
+            box-shadow:
+                0 20px 60px rgba(0, 0, 0, 0.65),
+                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        }
+
+        .chartOptions_button {
+            background: #0a101c;
+            border: 1px solid rgba($chart-neon-green, 0.28);
+            color: $chart-neon-green;
+            box-shadow:
+                0 10px 30px rgba(0, 0, 0, 0.5),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+            &:not(.button_selected):hover {
+                background: #0f1728;
+                border-color: rgba($chart-neon-green, 0.4);
+            }
+
+            &.button_selected {
+                background: linear-gradient(
+                    145deg,
+                    rgba($chart-neon-green, 0.12),
+                    rgba($chart-neon-green, 0.05)
+                );
+                box-shadow:
+                    0 10px 30px rgba(0, 0, 0, 0.55),
+                    inset 0 1px 0 rgba($chart-neon-green, 0.16);
+            }
+        }
+
+        .chartOptions_overlay .row .cell,
+        .chartOptions_overlay.loadSaveOverlay .templates .template a,
+        .chartOptions_overlay.loadSaveOverlay .templates .template .name {
+            color: $chart-neon-green;
+        }
+
+        .chartOptions_overlay .row .cell .table.download .cell,
+        .chartOptions_overlay .row .cell:hover {
+            background: linear-gradient(
+                155deg,
+                rgba(7, 14, 26, 0.9),
+                rgba(12, 22, 38, 0.75)
+            );
+            border-color: rgba($chart-neon-green, 0.3);
+            box-shadow: inset 0 1px 0 rgba($chart-neon-green, 0.18);
+        }
+
+        .chartOptions .img span,
+        .chartOptions .img div {
+            filter: invert(82%) sepia(97%) saturate(452%) hue-rotate(72deg)
+                brightness(115%) contrast(102%)
+                drop-shadow(0 0 6px rgba($chart-neon-green, 0.35));
+        }
+
+        .chartOptions .nav-caret.triangle {
+            border-top-color: $chart-neon-green;
+            filter: drop-shadow(0 0 6px rgba($chart-neon-green, 0.35));
+        }
+
+        .chartOptions_overlay.indicators .header-bar,
+        .chartOptions_overlay.indicators .categories.text span,
+        .chartOptions_overlay.indicators .categories.icon .search,
+        .chartOptions_overlay.indicators input,
+        .chartOptions_overlay.indicators .indicator-dialog .display_name,
+        .chartOptions_overlay.indicators .indicator-dialog .option-2 {
+            color: $chart-neon-green;
+        }
+
+        .chartOptions_overlay.indicators input {
+            background: rgba(6, 10, 17, 0.8);
+            border-color: rgba($chart-neon-green, 0.24);
+        }
+
+        .chartOptions_overlay.chartTypeOverlay .row .cell .img div,
+        .chartOptions_overlay .drawingToolOverlay .img img {
+            filter: invert(82%) sepia(97%) saturate(452%) hue-rotate(72deg)
+                brightness(115%) contrast(102%)
+                drop-shadow(0 0 6px rgba($chart-neon-green, 0.28));
+        }
+    }
+}
+
+.theme--dark {
+    .worm-chart-settings-modal__content {
+        background: linear-gradient(145deg, #0f1320, #0b0e17);
+        box-shadow:
+            -12px -12px 24px rgba(255, 255, 255, 0.04),
+            12px 12px 24px rgba(0, 0, 0, 0.55);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+    }
+
+    .chartOptions_button,
+    .chartOptions_overlay,
+    .chart-dialog,
+    .chart-dialog table,
+    .chartOptions_overlay .table,
+    .chartOptions_overlay .table .row:not(:last-child) {
+        background: radial-gradient(
+            110% 110% at 50% -5%,
+            rgba(64, 118, 255, 0.08),
+            rgba(12, 21, 44, 0.98)
+        );
+        color: var(--text-general);
+        border-color: rgba(108, 213, 255, 0.38);
+        box-shadow:
+            0 24px 64px rgba(0, 0, 0, 0.65),
+            inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    }
+
+    .chartOptions_overlay .row .cell .table.download .cell,
+    .chartOptions_overlay .row .cell:hover {
+        background: linear-gradient(
+            160deg,
+            rgba(31, 51, 84, 0.6),
+            rgba(13, 21, 36, 0.9)
+        );
+        border-color: rgba(108, 213, 255, 0.48);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    }
+
+    .chartOptions_overlay.loadSaveOverlay .templates .template a,
+    .chartOptions_overlay.loadSaveOverlay .templates .template .name,
+    .chartOptions_overlay.chartTypeOverlay .row .cell {
+        color: var(--text-general);
+    }
+
+    .chart-dialog .close {
+        background: linear-gradient(
+            120deg,
+            rgba(82, 255, 196, 0.18),
+            rgba(108, 213, 255, 0.24)
+        );
+        border: 1px solid rgba(108, 213, 255, 0.48);
+        color: var(--text-prominent);
+    }
+
+    .worm-chart-settings-modal__input,
+    .worm-chart-settings-modal__select {
+        background: #0c1018;
+        border: 1px solid rgba(255, 255, 255, 0.04);
+        box-shadow:
+            inset -6px -6px 12px rgba(255, 255, 255, 0.03),
+            inset 6px 6px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    .worm-chart-offset-pad {
+        background: linear-gradient(
+            145deg,
+            rgba(124, 93, 255, 0.14),
+            rgba(49, 189, 153, 0.12)
+        );
+        border-color: rgba(124, 93, 255, 0.5);
+
+        &__btn {
+            background: linear-gradient(
+                135deg,
+                rgba(124, 93, 255, 0.18),
+                rgba(111, 255, 233, 0.18)
+            );
+            border-color: rgba(124, 93, 255, 0.75);
+            color: #eaf8ff;
+
+            &:hover,
+            &:focus-visible {
+                box-shadow:
+                    0 0 14px rgba(111, 255, 233, 0.45),
+                    0 0 12px rgba(124, 93, 255, 0.45);
+            }
+
+            &:active {
+                background: linear-gradient(
+                    135deg,
+                    rgba(124, 93, 255, 0.28),
+                    rgba(111, 255, 233, 0.24)
+                );
+            }
+        }
+    }
+
+    .worm-chart-settings-modal__checkbox {
+        width: 18px;
+        height: 18px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow:
+            -4px -4px 8px rgba(255, 255, 255, 0.04),
+            4px 4px 8px rgba(0, 0, 0, 0.4);
+        background-color: #0e131f;
+    }
+
+    .worm-chart-settings-modal__body label,
+    .worm-chart-settings-modal__hint {
+        color: var(--text-general);
+    }
+
+    .worm-chart-settings-modal__content .button,
+    .worm-chart-settings-modal__content .button-secondary {
+        box-shadow:
+            -8px -8px 16px rgba(255, 255, 255, 0.03),
+            8px 8px 16px rgba(0, 0, 0, 0.45);
+    }
+
+    .worm-chart-panel {
+        background: linear-gradient(
+            155deg,
+            #10182c 0%,
+            #0b1223 50%,
+            #0f1b34 100%
+        );
+        border: 1px solid rgba(70, 225, 192, 0.16);
+        box-shadow:
+            0 24px 60px rgba(4, 6, 12, 0.6),
+            inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    }
+
+    .worm-chart-controls .button-secondary {
+        background: rgba(124, 93, 255, 0.16);
+        border-color: rgba(124, 93, 255, 0.6);
+        color: #e4f1ff;
+        box-shadow:
+            0 14px 28px rgba(0, 0, 0, 0.55),
+            inset 0 1px 0 rgba(255, 255, 255, 0.06);
+
+        &:hover,
+        &:focus-visible {
+            background: rgba(124, 93, 255, 0.28);
+            border-color: #a07dff;
+            color: #ffffff;
+        }
+    }
+
+    .tick-table-tape,
+    .tick-table-compact {
+        border: 1px solid rgba(58, 104, 180, 0.45);
+        background: linear-gradient(
+            160deg,
+            #0c152a 0%,
+            #0b101d 45%,
+            #0f1a31 100%
+        );
+        box-shadow:
+            0 18px 48px rgba(4, 6, 12, 0.55),
+            inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+
+    .tick-table__toggle {
+        background: rgba(106, 208, 255, 0.16);
+        border-color: rgba(106, 208, 255, 0.6);
+        color: #d9edff;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+
+        &:hover,
+        &:focus-visible,
+        &.tick-table__toggle--expanded {
+            background: rgba(70, 225, 192, 0.2);
+            border-color: #46e1c0;
+            color: #ffffff;
+        }
+    }
+
+    .price_container,
+    .price_container .price_comment,
+    .price_container #contract_purchase_balance,
+    .price_container #contract_purchase_descr {
+        background: linear-gradient(
+            165deg,
+            rgba(12, 20, 35, 0.96) 0%,
+            rgba(6, 12, 26, 0.98) 50%,
+            rgba(4, 8, 18, 0.98) 100%
+        );
+        border: 1px solid rgba(108, 213, 255, 0.32);
+        box-shadow:
+            0 20px 48px rgba(0, 0, 0, 0.55),
+            inset 0 1px 0 rgba(255, 255, 255, 0.05);
+        color: var(--text-general);
+    }
+
+    .price_container .contract_purchase {
+        background: linear-gradient(
+            140deg,
+            rgba(70, 225, 192, 0.08),
+            rgba(124, 93, 255, 0.08)
+        );
+        border: 1px solid rgba(108, 213, 255, 0.24);
+        border-radius: 10px;
+        box-shadow:
+            0 18px 38px rgba(0, 0, 0, 0.5),
+            inset 0 1px 0 rgba(255, 255, 255, 0.04);
+        padding: 6px;
+    }
+
+    .price_container #purchase_button_top,
+    .price_container #purchase_button_middle,
+    .price_container #purchase_button_bottom {
+        box-shadow:
+            0 14px 28px rgba(0, 0, 0, 0.45),
+            inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    }
+
+    .price_container .price_comment,
+    .price_container #contract_purchase_balance {
+        border-top: 1px solid rgba(108, 213, 255, 0.32);
+        text-shadow: 0 0 12px rgba(108, 213, 255, 0.35);
+        color: var(--text-colored-background);
+    }
+}
+
+@mixin li_segmented_element {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    margin: 0;
+    text-transform: capitalize;
+    padding: 3px 0;
+    text-align: center;
+
+    &.active {
+        color: $COLOR_WHITE;
+        background-color: $COLOR_BLUE;
+    }
+}
+
+@keyframes fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes neonPulse {
+    0% {
+        text-shadow:
+            0 0 8px rgba(14, 255, 214, 0.45),
+            0 0 16px rgba(14, 255, 214, 0.35),
+            0 0 28px rgba(94, 255, 184, 0.25);
+        transform: translateY(0) scale(1);
+    }
+    50% {
+        text-shadow:
+            0 0 14px rgba(14, 255, 214, 0.65),
+            0 0 26px rgba(14, 255, 214, 0.45),
+            0 0 38px rgba(94, 255, 184, 0.28);
+        transform: translateY(-1px) scale(1.01);
+    }
+    100% {
+        text-shadow:
+            0 0 20px rgba(14, 255, 214, 0.75),
+            0 0 40px rgba(14, 255, 214, 0.6),
+            0 0 52px rgba(94, 255, 184, 0.35);
+        transform: translateY(0) scale(1.02);
+    }
+}
+
+@keyframes glitchShift {
+    0% {
+        text-shadow:
+            -2px 0 rgba(255, 0, 102, 0.35),
+            2px 0 rgba(111, 210, 255, 0.25);
+        transform: translate(0);
+    }
+    20% {
+        text-shadow:
+            -3px -1px rgba(255, 0, 102, 0.45),
+            3px 1px rgba(111, 210, 255, 0.28);
+        transform: translate(1px, -1px) skewX(0.6deg);
+    }
+    40% {
+        text-shadow:
+            2px 1px rgba(255, 0, 102, 0.3),
+            -2px -1px rgba(111, 210, 255, 0.3);
+        transform: translate(-1px, 1px) skewX(-0.4deg);
+    }
+    60% {
+        text-shadow:
+            -2px 2px rgba(255, 0, 102, 0.4),
+            2px -2px rgba(111, 210, 255, 0.32);
+        transform: translate(2px, -1px) skewX(0.5deg);
+    }
+    80% {
+        text-shadow:
+            3px -1px rgba(255, 0, 102, 0.38),
+            -3px 1px rgba(111, 210, 255, 0.35);
+        transform: translate(-1px, 1px) skewX(-0.3deg);
+    }
+    100% {
+        text-shadow:
+            -2px 0 rgba(255, 0, 102, 0.35),
+            2px 0 rgba(111, 210, 255, 0.25);
+        transform: translate(0);
+    }
+}
+
+@keyframes holoSweep {
+    0% {
+        transform: translateX(-70%);
+        opacity: 0.4;
+    }
+    50% {
+        transform: translateX(15%);
+        opacity: 0.55;
+    }
+    100% {
+        transform: translateX(80%);
+        opacity: 0;
+    }
+}
+
+@keyframes scanlines {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 0 12px;
+    }
+}
+
+[data-balloon] {
+    &:before {
+        font-size: 0.75rem;
+        text-align: left;
+        padding: 12px 8px;
+        border-radius: 4px;
+        background: var(--general-active);
+        color: var(--text-prominent);
+        content: attr(data-balloon);
+        margin-bottom: 11px;
+        box-shadow: none;
+    }
+    &:after {
+        background: svg-url(
+                '<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="#{rgba($color-grey-5, 1)}" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>'
+            )
+            no-repeat;
+        background-size: 100% auto;
+        height: 6px;
+        width: 18px;
+        content: "";
+        margin-bottom: 6px;
+    }
+    &:before,
+    &:after {
+        opacity: 0;
+        transition: opacity ease 0.2s;
+        transform: translate(-50%, 0);
+    }
+    &:hover:before,
+    &:hover:after {
+        opacity: 1;
+    }
+}
+
+ul.bullet {
+    list-style-type: disc;
+
+    li {
+        list-style-image: initial;
+    }
+}
+
+[data-balloon-pos="left"]:after {
+    transform: rotate(270deg) !important;
+    margin-right: 2px;
+}
+
+// [data-balloon-pos=down]:after {
+//     transform: rotate(180deg) translate(50%, 0) !important;
+//     margin-top: 12px;
+// }
+
+#trading_init_progress {
+    cursor: pointer;
+    width: 10rem;
+    height: 10rem;
+    position: absolute;
+    left: 50%;
+    top: 250px;
+    margin-left: -5rem;
+    z-index: 9999;
+}
+
+#trading_socket_container {
+    color: var(--text-prominent);
+    font-size: $FONT_SIZE_N;
+    position: relative;
+    opacity: 0;
+
+    #contract_form_name_nav {
+        border-bottom: none;
+        font-size: $FONT_SIZE_N;
+
+        > li {
+            cursor: pointer;
+            padding: 0;
+
+            a.tm-a {
+                padding: 0 5px;
+                width: auto;
+                font-size: $FONT_SIZE_S;
+                line-height: 28px;
+                white-space: nowrap;
+            }
+            .tm-ul-2 {
+                top: 29px;
+                margin-top: -1px;
+                border-top: 1px solid $COLOR_GRAY;
+            }
+        }
+    }
+    #spot {
+        line-height: 25px;
+        white-space: nowrap;
+        padding: 3px;
+        border-radius: 5px;
+        margin-left: 0 !important;
+        width: fit-content;
+        text-align: center;
+        display: inline-block;
+
+        &.error {
+            font-style: italic;
+        }
+    }
+    &.show {
+        animation: fade 1s;
+        animation-fill-mode: forwards;
+    }
+    select,
+    input,
+    div.select-dropdown {
+        border-radius: 5px;
+        box-sizing: border-box;
+        height: 28px;
+    }
+    div.select-dropdown:after {
+        height: 16px;
+        width: 16px;
+        transform-origin: initial;
+        content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.836 10.87C2.632 11.056 2.316 11.04 2.13 10.836C1.944 10.632 1.96 10.316 2.164 10.13L7.664 5.13C7.854 4.957 8.146 4.957 8.336 5.13L13.836 10.13C14.041 10.316 14.056 10.632 13.87 10.836C13.684 11.041 13.368 11.056 13.164 10.87L8 6.176L2.836 10.87Z' fill='%23333333'/%3E%3C/svg%3E%0A");
+    }
+    ul.select-options {
+        box-shadow:
+            0 16px 16px 0 rgba(0, 0, 0, 0.08),
+            0 0 16px 0 rgba(0, 0, 0, 0.08);
+
+        .select-items {
+            padding: 6px 16px;
+            font-size: 14px;
+
+            &:hover {
+                background-color: var(--general-hover);
+            }
+        }
+        .select-items.selected {
+            font-weight: bold;
+            color: $COLOR_BLACK;
+            background-color: var(--general-active);
+        }
+    }
+    label {
+        line-height: 28px;
+
+        &[for="digit_underlying"],
+        &[for="tick_count"] {
+            margin-right: 0.5rem;
+        }
+    }
+    #contract_market_form_container {
+        height: 28px;
+        font-size: 0.75rem;
+
+        .tm-li {
+            height: 28px;
+            vertical-align: top;
+        }
+    }
+    .button button {
+        cursor: pointer;
+    }
+    .row,
+    .row-inner {
+        display: flex;
+        justify-content: space-around;
+    }
+    .col,
+    .col-inner {
+        flex: 1;
+    }
+    .row {
+        flex-direction: row;
+        padding: 10px 0;
+    }
+    .row-inner {
+        flex-direction: column;
+
+        .col-inner {
+            margin-bottom: 5px;
+        }
+    }
+    .form_label input,
+    .form_label select {
+        max-width: 170px;
+    }
+    .big-col {
+        flex: 1.5;
+    }
+    #expiry_type_endtime {
+        flex-wrap: wrap;
+
+        div.select ~ #expiry_time_row {
+            margin-top: 5px;
+
+            @media (max-width: 768px) {
+                margin-top: 0px;
+                margin-left: 0.5rem;
+            }
+            @media (max-width: 480px) {
+                margin-left: 0;
+                margin-top: 5px;
+                width: 100%;
+
+                input {
+                    width: 70%;
+                }
+            }
+        }
+    }
+    #contract_form_content_wrapper {
+        padding-top: 0.5em;
+        line-height: 1.4em;
+        font-size: 16px;
+    }
+    #contract_symbol_container {
+        padding: 0;
+        position: relative;
+        display: inline-flex;
+
+        span.market,
+        span.type {
+            @media (max-width: 768px) {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-width: 90%;
+                white-space: nowrap;
+            }
+        }
+        .arrow_down {
+            width: 8px;
+            height: 8px;
+            background: url("../images/pages/trade/ic_arrow_dropdown_light.svg")
+                no-repeat;
+            background-size: contain;
+            position: relative;
+            margin-left: 10px;
+            top: 3px;
+            float: right;
+
+            @media (max-width: 768px) {
+                position: absolute;
+                top: 0.9rem;
+                right: 0.6rem;
+            }
+        }
+        #contract_markets_container {
+            flex: 0 0 auto;
+            text-align: right;
+            @include BIDIR_PROP(margin-right, margin-left, 1rem);
+            @media (max-width: 768px) {
+                flex: 1;
+            }
+        }
+        #contract_type_container {
+            flex: 0 0 auto;
+            @include BIDIR_PROP(margin-right, margin-left, 1rem);
+            @media (max-width: 768px) {
+                flex: 1;
+            }
+            @media (max-width: 480px) {
+                margin-right: 0;
+            }
+        }
+        #underlying_details {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            width: 100%;
+
+            span {
+                margin: 0;
+
+                &#trading_worm_chart {
+                    display: block;
+                    position: relative;
+                }
+            }
+            @media (max-width: 768px) {
+                margin-left: auto;
+            }
+        }
+        @media (max-width: 768px) {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+        }
+    }
+    #contract_container {
+        align-items: center;
+        padding-top: 25px;
+        position: relative;
+        border-radius: 4px;
+
+        #contract_form_container .col {
+            @include BIDIR_PROP(margin-right, margin-left, 0.5rem);
+        }
+        .overlay_container {
+            width: 100%;
+            display: none;
+            background: transparent;
+            z-index: 9;
+
+            &#loading_container3 {
+                background: $COLOR_LIGHT_GRAY;
+                opacity: 0.5;
+                display: block;
+                position: absolute;
+                height: 100%;
+                top: 0;
+            }
+        }
+        border: solid 1px var(--border-normal);
+        flex: 1 0 auto;
+
+        input[type="number"] {
+            -moz-appearance: textfield;
+        }
+        .gr-gutter-left {
+            padding-left: 5px;
+        }
+    }
+    .contract_heading {
+        text-transform: capitalize;
+        font-weight: bold;
+        text-align: center;
+        padding: 0;
+    }
+
+    .contract_heading__content {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        width: 100%;
+    }
+
+    .contract_heading__icon {
+        width: 32px;
+        height: 32px;
+        color: var(--text-prominent, #dcdcdc);
+    }
+
+    .contract-type-icon__label {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--border-normal, #3e3e3e);
+        border-radius: 8px;
+        background-color: var(--general-section-1, #0e0e0e);
+        color: var(--text-prominent, #dcdcdc);
+        font-weight: 700;
+        letter-spacing: 0.2px;
+        text-transform: capitalize;
+    }
+
+    .contract_heading__label {
+        display: inline-block;
+        line-height: 1.2;
+    }
+    #contract_prices_container {
+        position: relative;
+        @include BIDIR_PROP(margin-left, margin-right, 1em);
+
+        .price_container {
+            border: 1px solid var(--border-normal);
+            align-items: stretch;
+            padding: 0;
+            flex: 1 0 auto;
+            display: none;
+            border-radius: 4px;
+
+            > .col.row {
+                flex: 1 0 auto;
+            }
+            > .row {
+                padding: 0;
+            }
+            .big-col {
+                flex: 3;
+            }
+            .contract_purchase {
+                margin-bottom: 6px;
+                width: 90%;
+                display: inline-flex;
+                justify-content: center;
+
+                .purchase_button {
+                    cursor: pointer;
+                    width: 100%;
+                    color: $COLOR_WHITE;
+                    font-size: 16px;
+                    font-weight: bold;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    text-align: center;
+                    line-height: 1.4;
+                    padding: 8px 12px;
+                    white-space: normal;
+                    word-break: break-word;
+                }
+                #purchase_button_top,
+                #purchase_button_middle {
+                    background-color: var(--text-profit-success);
+                }
+                #purchase_button_bottom {
+                    background-color: var(--text-loss-danger);
+                }
+                &.button-disabled #purchase_button_top,
+                &.button-disabled #purchase_button_middle {
+                    background-color: rgba($color-green-1, 0.32);
+                }
+                &.button-disabled #purchase_button_bottom {
+                    background-color: rgba($color-red-1, 0.32);
+                }
+                &.button-disabled .purchase_button {
+                    cursor: auto;
+                }
+            }
+            .button-disabled span {
+                white-space: normal;
+            }
+        }
+        #contract_purchase_barrier {
+            padding-bottom: 7px;
+        }
+        #contract_purchase_reference {
+            padding-bottom: 7px;
+        }
+        #confirmation_error {
+            padding: 20px;
+            font-style: italic;
+            vertical-align: middle;
+            line-height: $FONT_SIZE_XL;
+        }
+        #authorization_error_container {
+            vertical-align: middle;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            margin: 0 auto;
+
+            .authorization_error {
+                width: 100%;
+            }
+        }
+        .price_container#price_container_top {
+            margin-bottom: 1rem;
+        }
+        .price_container#price_container_middle {
+            .price_wrapper {
+                margin: 25px 0 10px;
+                padding: 0 15px 5px;
+            }
+            .payout_wrapper {
+                .contract_quantity {
+                    font-weight: 700;
+                }
+            }
+            .contract_longcode {
+                text-align: center;
+                margin: 10px 15px;
+                line-height: 1.4em;
+            }
+        }
+        .price_comment,
+        .contract_error,
+        #contract_purchase_balance {
+            background-color: var(--general-section-1);
+            line-height: 1.5rem;
+            font-size: $FONT_SIZE_XS;
+            padding: 5px;
+            text-align: center;
+            flex: 0 0 auto;
+        }
+        .contract_error {
+            background-color: $COLOR_CONTRACT_ERROR_YELLOW !important;
+        }
+        #contract_purchase_balance {
+            position: absolute;
+            bottom: 0;
+            color: $COLOR_WHITE;
+            box-sizing: border-box;
+            background-color: var(--purchase-main-1);
+            width: 100%;
+            display: flex; /* fix for iOS */
+            justify-content: center;
+            align-items: center;
+            @supports (-ms-ime-align: auto) {
+                z-index: 9; /* fix for MSEdge */
+            }
+
+            p {
+                margin: 0;
+                padding-left: 3px;
+            }
+        }
+        #confirmation_message {
+            padding-bottom: 34px;
+
+            div.button {
+                padding-bottom: 7px;
+            }
+            #trade_tick_chart {
+                margin-top: 8px;
+                padding: 0;
+                border-radius: 22px;
+                background: var(--general-main-1);
+                border: 1px solid rgba(35, 208, 255, 0.02);
+                box-shadow:
+                    0 12px 24px rgba(3, 10, 26, 0.12),
+                    inset 0 0 16px rgba(35, 208, 255, 0.02);
+                width: 100%;
+                box-sizing: border-box;
+                overflow: hidden;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                align-self: stretch;
+                text-align: center;
+
+                > .highcharts-container {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    width: 100% !important;
+                    height: 100% !important;
+                    left: 0 !important;
+                    top: 0 !important;
+                    border-radius: inherit;
+                    overflow: hidden;
+                }
+
+                .highcharts-root {
+                    width: 100% !important;
+                    height: 100% !important;
+                    border-radius: inherit;
+                }
+
+                .highcharts-root svg,
+                .highcharts-container svg {
+                    width: 100% !important;
+                    height: 100% !important;
+                    display: block;
+                    border-radius: inherit;
+                }
+
+                .highcharts-background {
+                    rx: 22px;
+                    ry: 22px;
+                    fill: var(--general-main-1);
+                }
+
+                &:before {
+                    content: none;
+                }
+
+                .highcharts-tooltip span {
+                    max-width: 260px;
+                    white-space: normal !important;
+                    word-break: break-word;
+                    overflow-wrap: anywhere;
+                    display: block;
+                }
+
+                .tooltip-body {
+                    background-color: rgba(9, 15, 36, 0.85);
+                    color: var(--text-colored-background);
+                    padding: 6px;
+                    margin-bottom: -14px;
+                    margin-right: -14px;
+                    border-radius: 8px;
+                    box-sizing: border-box;
+                }
+                .highcharts-container {
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
+    #contract_purchase_descr {
+        background-color: var(--general-main-1);
+        border: 1px solid var(--border-normal);
+        border-radius: $BORDER_RADIUS;
+        line-height: normal;
+        margin: 20px 10px;
+        padding: 12px;
+        text-align: left;
+    }
+    #contract_purchase_button {
+        margin-top: 10px;
+    }
+    #contract_purchase_profit_list,
+    #contract_purchase_spots .row {
+        padding: 3px 0;
+        flex-direction: row;
+    }
+    #contract_purchase_profit_list {
+        margin: 10px 0;
+
+        > div {
+            display: flex;
+            flex-direction: column;
+            line-height: 1.4em;
+            padding: 0 10px;
+        }
+    }
+    #contract_purchase_spots {
+        overflow: hidden;
+        padding-top: 10px;
+        padding-bottom: 5px;
+
+        .col {
+            margin-bottom: 0;
+            line-height: 1.5;
+        }
+        &.won {
+            background-color: rgba(46, 136, 54, 0.2);
+        }
+        &.lost {
+            background-color: rgba(204, 0, 0, 0.1);
+        }
+    }
+    #contract_purchase_payout {
+        border-right: 1px solid var(--border-normal);
+    }
+    #contract_purchase_profit {
+        border-left: 1px solid var(--border-normal);
+    }
+    .contract_amount,
+    .contract_payout,
+    .payout,
+    .stake {
+        @include BIDIR_VALUE(padding, 3px, 3px);
+        line-height: 1.5;
+        font-size: $FONT_SIZE_N;
+        flex: 1 0 auto;
+        display: flex;
+        align-items: center;
+    }
+    .stake,
+    .payout {
+        padding: 0;
+        justify-content: flex-end;
+    }
+    .contract_amount,
+    .contract_payout,
+    .contract_multiplier {
+        font-weight: bold;
+        font-size: $FONT_SIZE_N;
+        border-radius: 5px;
+        justify-content: center;
+    }
+}
+#expiry_type_duration {
+    flex-wrap: wrap;
+}
+#contracts_list {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 16px;
+
+    > .overlay_container {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+}
+.overlay_container {
+    width: 100%;
+    display: none;
+    background: transparent;
+    z-index: 9;
+
+    .close {
+        z-index: 10;
+    }
+    &#loading_container2 {
+        background: $COLOR_LIGHT_GRAY;
+        opacity: 0.5;
+        display: block;
+        position: absolute;
+        height: 100%;
+        flex: 1 0 auto;
+    }
+}
+#contract_confirmation_container {
+    background-color: var(--general-section-1);
+    text-align: center;
+
+    a.close {
+        background-color: var(--text-prominent);
+        border-radius: 0 0 0 $BORDER_RADIUS;
+    }
+    #confirmation_message_container {
+        padding: 15px 0;
+        height: 90%;
+        height: calc(100% - 30px);
+    }
+}
+#contract_purchase_heading {
+    font-size: 22px;
+    font-weight: normal;
+    color: var(--text-prominent);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+
+    &.contract-result {
+        position: relative;
+        display: inline-block;
+        padding: 6px 18px;
+        margin: 0 auto 8px;
+        border-radius: 12px;
+        overflow: hidden;
+        isolation: isolate;
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    &.contract-result--won {
+        color: #8ef8e4;
+        text-shadow:
+            0 0 12px rgba(14, 255, 214, 0.7),
+            0 0 26px rgba(126, 255, 200, 0.55),
+            0 0 36px rgba(0, 255, 170, 0.55);
+        background: linear-gradient(
+            120deg,
+            rgba(14, 255, 214, 0.3) 0%,
+            rgba(94, 255, 184, 0.45) 40%,
+            rgba(255, 214, 102, 0.3) 100%
+        );
+        box-shadow: inset 0 0 12px rgba(14, 255, 214, 0.25);
+    }
+
+    &.contract-result--lost {
+        color: #ff86b2;
+        text-shadow:
+            0 0 10px rgba(255, 53, 109, 0.7),
+            0 0 24px rgba(255, 122, 167, 0.55),
+            0 0 32px rgba(255, 0, 102, 0.45);
+        background: linear-gradient(
+            135deg,
+            rgba(255, 90, 130, 0.35) 0%,
+            rgba(255, 0, 102, 0.35) 40%,
+            rgba(95, 0, 255, 0.35) 100%
+        );
+        box-shadow: inset 0 0 12px rgba(255, 0, 102, 0.2);
+    }
+
+    &.contract-result--animate.contract-result--won {
+        animation: neonPulse 2s ease-in-out infinite alternate;
+    }
+
+    &.contract-result--animate.contract-result--lost {
+        animation: glitchShift 1.5s steps(2, end) infinite;
+    }
+}
+
+#confirmation_message {
+    &.contract-result-panel {
+        position: relative;
+        padding: 18px 22px 34px;
+        border-radius: 16px;
+        border: 1px solid rgba(108, 213, 255, 0.35);
+        background: linear-gradient(
+            160deg,
+            rgba(8, 16, 32, 0.96) 0%,
+            rgba(6, 16, 42, 0.96) 50%,
+            rgba(5, 10, 24, 0.98) 100%
+        );
+        box-shadow:
+            0 22px 48px rgba(0, 0, 0, 0.6),
+            inset 0 0 30px rgba(108, 213, 255, 0.12);
+        overflow: hidden;
+        isolation: isolate;
+    }
+
+    &.contract-result--won {
+        border-color: rgba(14, 255, 214, 0.65);
+        box-shadow:
+            0 0 42px rgba(14, 255, 214, 0.35),
+            0 18px 46px rgba(0, 0, 0, 0.6),
+            inset 0 0 34px rgba(14, 255, 214, 0.18);
+    }
+
+    &.contract-result--lost {
+        border-color: rgba(255, 0, 102, 0.55);
+        box-shadow:
+            0 0 42px rgba(255, 0, 102, 0.28),
+            0 18px 46px rgba(0, 0, 0, 0.6),
+            inset 0 0 34px rgba(255, 0, 102, 0.16);
+    }
+
+    &.contract-result--animate::before {
+        content: "";
+        position: absolute;
+        inset: -20% -60%;
+        background: linear-gradient(
+            115deg,
+            rgba(255, 255, 255, 0.05) 0%,
+            rgba(124, 249, 207, 0.18) 40%,
+            rgba(255, 0, 102, 0.14) 70%,
+            transparent 100%
+        );
+        transform: translateX(-40%);
+        filter: blur(1px);
+        animation: holoSweep 4s ease-in-out infinite;
+        pointer-events: none;
+    }
+
+    &.contract-result--animate::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-image: repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0.04),
+            rgba(255, 255, 255, 0.04) 1px,
+            transparent 1px,
+            transparent 3px
+        );
+        mix-blend-mode: soft-light;
+        opacity: 0.5;
+        pointer-events: none;
+        animation: scanlines 6s linear infinite;
+    }
+}
+#contract_prices_container .price_container .price_wrapper {
+    text-align: left;
+    align-items: stretch;
+    width: 100%;
+    justify-content: flex-start;
+    @include BIDIR_PROP(padding-left, padding-right, 24px);
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1fr);
+    column-gap: 16px;
+
+    &.small {
+        width: 95px;
+    }
+    div {
+        padding: 0 5px;
+        min-width: 0;
+    }
+    .contract_heading {
+        display: block;
+        width: auto;
+        padding-left: 0;
+        margin: 0;
+    }
+    .amount_wrapper {
+        float: none;
+        width: 100%;
+        min-width: 0;
+
+        .amount_wrapper_div {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 10px;
+            align-items: stretch;
+            margin-bottom: 0;
+
+            &,
+            .stake,
+            .payout,
+            .contract_amount,
+            .contract_payout {
+                vertical-align: middle;
+            }
+            div {
+                flex-grow: 1;
+                min-width: 0;
+            }
+            .stake_wrapper,
+            .payout_wrapper {
+                display: grid;
+                gap: 4px;
+                min-width: 0;
+            }
+            .stake_wrapper {
+                margin-left: 0;
+            }
+            .payout_wrapper {
+                margin-right: 0;
+            }
+        }
+    }
+    .contract_amount,
+    .contract_payout,
+    .stake,
+    .payout {
+        display: inline-flex;
+        min-width: 0;
+        flex-wrap: wrap;
+        gap: 2px;
+    }
+}
+#duration_amount {
+    @include BIDIR_PROP(margin-right, margin-left, 0.5rem);
+}
+#duration_units {
+    @include BIDIR_PROP(margin-right, margin-left, 10px);
+}
+.small_width_input {
+    width: 70px;
+    margin-right: 5px;
+}
+#currency {
+    margin-bottom: 5px;
+}
+#expiry_date {
+    width: 175px;
+    @include BIDIR_PROP(margin-right, margin-left, 5px);
+    margin-bottom: 5px;
+}
+#expiry_date,
+#expiry_time {
+    font-size: $FONT_SIZE_N;
+}
+#date_start {
+    margin-bottom: 5px;
+    width: 175px;
+}
+#time_start_row {
+    white-space: nowrap;
+    margin-top: 5px;
+
+    .time_start {
+        margin-left: 5px;
+        width: 110px;
+    }
+}
+#payout_row {
+    .row-inner.big-col {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        min-width: 0;
+
+        .col-inner {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            flex: 1;
+            flex-wrap: wrap;
+            margin-bottom: 0;
+            min-width: 0;
+
+            #amount,
+            #currency {
+                margin: 0;
+            }
+        }
+    }
+}
+#multiplier_row {
+    div.select ~ #multiplier {
+        margin-left: 0.5rem;
+        margin-top: -2px;
+    }
+}
+.barrier_class input {
+    width: 175px;
+    @include BIDIR_PROP(margin-right, margin-left, 5px);
+}
+.medium_width_input {
+    width: 105px;
+}
+span.currency {
+    margin-left: 0.5rem;
+}
+#underlying {
+    @include BIDIR_PROP(margin-right, margin-left, 10px);
+    margin-bottom: 5px;
+}
+#symbol_tip {
+    cursor: pointer;
+    padding: 5px;
+    position: relative;
+    text-decoration: none;
+    font-weight: normal;
+}
+
+@media all and (max-width: 480px) {
+    #trading_socket_container {
+        #contract_market_form_container ul#contract_form_name_nav a.tm-a {
+            font-size: $FONT_SIZE_XXS;
+        }
+        #contract_form_content {
+            #expiry_type {
+                max-width: 100%;
+            }
+            #duration_amount {
+                margin-bottom: 5px;
+                margin-right: 0;
+            }
+        }
+        #multiplier_row {
+            span.currency {
+                margin-left: 0;
+            }
+            span.currency ~ input#multiplier {
+                margin-right: 0;
+                width: calc(100% - 30px);
+            }
+        }
+        #payout_row {
+            .row-inner.big-col {
+                gap: 0.5rem;
+
+                .col-inner {
+                    gap: 0.5rem;
+
+                    #amount,
+                    #currency {
+                        flex: 1 1 48%;
+                        min-width: 0;
+                    }
+                }
+            }
+        }
+        #barrier_row {
+            label#barrier_label {
+                white-space: nowrap;
+            }
+            .big-col > input#barrier {
+                margin-bottom: 0.5rem;
+            }
+        }
+        #high_barrier_row,
+        #low_barrier_row {
+            .big-col > input {
+                width: 100%;
+                margin-bottom: 6px;
+            }
+        }
+        .contract_purchase {
+            width: 70% !important;
+        }
+        #date_start {
+            width: 100%;
+        }
+        #expiry_date {
+            display: flex;
+            width: 100%;
+        }
+        #expiry_time {
+            width: calc(100% - 40px);
+            margin-bottom: 0.5rem;
+            white-space: nowrap;
+        }
+        #symbol_tip {
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+        }
+        .small_width_input,
+        .medium_width_input {
+            width: 100%;
+        }
+        #time_start.medium_width_input {
+            width: 70%;
+        }
+        .tab-menu-wrap {
+            display: none;
+        }
+    }
+}
+@media all and (max-width: 768px) {
+    #trading_socket_container {
+        #contract_market_form_container {
+            height: auto;
+        }
+        #contract_form_content {
+            margin-top: 0;
+        }
+        #contract_form_content_wrapper {
+            flex-direction: column;
+        }
+        #contract_symbol_container {
+            text-align: center;
+
+            .row {
+                flex-direction: column;
+
+                .col {
+                    margin-bottom: 5px;
+                }
+            }
+            #contract_markets_container {
+                text-align: inherit;
+            }
+        }
+        #contract_container {
+            margin-bottom: 1rem;
+        }
+        #contract_prices_container {
+            #contract_purchase_spots {
+                height: auto;
+            }
+            #price_container_top {
+                margin-right: 0 !important;
+            }
+            .price_wrapper {
+                flex-direction: row !important;
+
+                &.small {
+                    width: auto;
+                }
+                .amount_wrapper {
+                    width: 70%;
+                }
+            }
+            .row {
+                flex-direction: column;
+
+                .col {
+                    margin-bottom: 5px;
+
+                    &.price_comment {
+                        margin: 0;
+                    }
+                }
+            }
+        }
+    }
+    div#contract_market_form_container ul#contract_form_name_nav {
+        white-space: nowrap !important;
+
+        > li.tm-li {
+            /*float: none;
+            width: 100%; */
+            ul.tm-ul-2 {
+                position: absolute !important;
+                top: 28px !important;
+                display: none !important;
+            }
+            &.hover ul,
+            &.active ul {
+                display: block !important;
+            }
+        }
+    }
+    #trading_socket_container
+        #contract_prices_container
+        .price_container
+        .price_wrapper {
+        width: 100%;
+        box-sizing: border-box;
+
+        &.small {
+            width: auto;
+        }
+    }
+}
+
+#contract_prices_container {
+    .price_container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .contract_purchase {
+        width: 100%;
+        align-self: stretch;
+        margin-bottom: 0;
+
+        .purchase_button {
+            min-width: 0;
+            width: 100%;
+            overflow-wrap: anywhere;
+            text-wrap: balance;
+            line-height: 1.5;
+            padding: 10px 14px;
+        }
+    }
+}
+
+@media all and (max-width: 1024px) {
+    #contract_prices_container .price_container .price_wrapper {
+        grid-template-columns: 1fr;
+        row-gap: 12px;
+        text-align: center;
+
+        .amount_wrapper .amount_wrapper_div {
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        }
+
+        .contract_purchase {
+            justify-self: stretch;
+        }
+    }
+}
+
+@media all and (max-width: 768px) {
+    #trading_socket_container {
+        #contract_form_content_wrapper {
+            flex-direction: column;
+
+            > .col {
+                flex: 1 0 auto;
+            }
+        }
+        #contract_form_content {
+            margin-top: 20px;
+        }
+        #contract_prices_container {
+            margin-left: 0;
+        }
+    }
+}
+
+#content ul.tm-ul li {
+    &.active,
+    &.ui-tabs-active {
+        background: $COLOR_BLUE;
+        color: $COLOR_WHITE;
+
+        a {
+            font-weight: bold;
+        }
+    }
+}
+
+#analysis_daily_prices_form {
+    text-align: center;
+
+    input {
+        margin: 0 10px;
+    }
+}
+
+.error-field {
+    border-color: $COLOR_RED !important;
+    color: $COLOR_RED;
+}
+
+.action_btn {
+    display: flex;
+    flex-direction: row-reverse;
+
+    > a {
+        margin-right: 0 !important;
+    }
+    > a + a {
+        margin-right: 8px !important;
+    }
+}
+
+#trading_bottom_content {
+    font-size: $FONT_SIZE_N;
+    background: #02070a;
+    border: 1px solid var(--border-normal);
+    border-radius: $BORDER_RADIUS;
+    box-shadow: 0 8px 24px rgba(14, 16, 25, 0.04);
+    padding: 12px;
+
+    .trading-bottom-card {
+        background: var(--general-section-1);
+        border-radius: $BORDER_RADIUS;
+    }
+
+    .quill-container-centered {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 12px;
+
+        .btn {
+            border-radius: $BORDER_RADIUS;
+        }
+    }
+
+    .bottom-content-section {
+        background: var(--general-section-2);
+        border: 1px solid var(--border-normal);
+        border-radius: $BORDER_RADIUS;
+        box-shadow: 0 6px 18px rgba(14, 16, 25, 0.06);
+        padding: 12px;
+    }
+
+    .chart-section {
+        background: var(--general-section-1);
+        border: 1px solid var(--border-normal);
+        border-radius: $BORDER_RADIUS;
+        padding: 16px;
+    }
+
+    #trade_live_chart {
+        width: 100%;
+        margin: 0;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        overflow: visible;
+    }
+
+    #tab_mobile_header {
+        margin: 0 auto;
+    }
+    #trade_analysis {
+        a.tm-a.a-active,
+        .tm-li.active a {
+            display: block;
+            pointer-events: none;
+        }
+        li.tm-li.tab-selector {
+            @media screen and (max-width: 480px) {
+                top: 26px;
+            }
+        }
+    }
+    #trade_bottom_content {
+        padding-top: 1em;
+    }
+    #tab_graph {
+        &.chart-section--hidden {
+            display: none !important;
+            max-height: 0 !important;
+            opacity: 0;
+            padding-block: 0 !important;
+            margin: 0;
+            overflow: hidden;
+            transform: scaleY(0);
+            transform-origin: top center;
+            visibility: hidden;
+
+            #trade_live_chart {
+                display: none !important;
+                visibility: hidden !important;
+            }
+        }
+
+        &.chart-section--visible {
+            display: block !important;
+            max-height: none;
+            opacity: 1;
+            padding-block: 32px;
+            overflow: visible;
+            transform: scaleY(1);
+            transform-origin: top center;
+            visibility: visible;
+            animation: chartUnfold 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
+                forwards;
+
+            #trade_live_chart {
+                display: block !important;
+                visibility: visible !important;
+            }
+        }
+    }
+
+    @keyframes chartUnfold {
+        0% {
+            max-height: 0;
+            opacity: 0;
+            transform: scaleY(0) translateY(-20px);
+            padding-block: 0;
+        }
+        60% {
+            opacity: 0.8;
+            transform: scaleY(1.02) translateY(0);
+        }
+        100% {
+            max-height: 2000px;
+            opacity: 1;
+            transform: scaleY(1) translateY(0);
+            padding-block: 32px;
+        }
+    }
+
+    #tab_graph-content {
+        // needs wider width to avoid cropping the tooltip on the first chart toolbar element
+        width: calc(100% + 16px);
+        margin-left: -14px;
+    }
+    #webtrader_chart {
+        width: 100%;
+        height: 630px;
+        overflow: hidden;
+        background-color: var(--general-main-1);
+
+        .highcharts-tooltip span {
+            max-width: min(360px, 100%);
+            white-space: normal;
+            word-break: break-word;
+            overflow-wrap: anywhere;
+            display: block;
+        }
+
+        // Ensure the embedded Webtrader chart inherits the dark background and removes gaps
+        .webtrader-charts-chart-window-contianer,
+        .chart-dialog,
+        .chart-view,
+        .chartSubContainer,
+        .chartSubContainerHeader {
+            background-color: var(--general-main-1) !important;
+        }
+
+        .highcharts-container {
+            background-color: transparent !important;
+        }
+
+        .row {
+            padding: unset;
+            justify-content: unset;
+        }
+        a {
+            color: var(--text-general);
+        }
+        .button-secondary,
+        .button {
+            span {
+                @include deriv-btn;
+            }
+        }
+        .button {
+            span {
+                @include deriv-btn("large", "primary");
+            }
+            &:not(.button-disabled) span {
+                @include deriv-btn("large", "primary");
+            }
+        }
+        .button-secondary {
+            span {
+                @include deriv-btn("large", "secondary");
+            }
+            &:not(.button-disabled) span {
+                color: var(--text-prominent);
+
+                &:hover {
+                    background-color: var(--general-hover);
+                }
+            }
+        }
+        input {
+            font-size: 14px;
+            padding: 5px;
+            border-radius: $BORDER_RADIUS;
+        }
+        input,
+        .dd-select {
+            border: 1px solid var(--border-normal);
+
+            &:hover {
+                border-color: var(--border-hover);
+            }
+            &:focus {
+                border-color: var(--brand-secondary);
+            }
+        }
+        .chart-view {
+            margin: 0 8px;
+            width: calc(100% - 16px);
+        }
+        .chartOptions {
+            .vertical-bottom {
+                font-size: 12px;
+                margin: auto 0;
+                color: var(--text-general);
+            }
+            .charttype-name,
+            .timeperiod-name {
+                margin-top: 13px;
+            }
+            .charttype-name {
+                margin-left: -5px;
+            }
+            .drawingToolOverlay {
+                .row:not(:last-child) {
+                    border-bottom: 1px solid var(--border-normal);
+                }
+                span[data-balloon] {
+                    &:before {
+                        padding: 16px 8px;
+                    }
+                    &:after {
+                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='12px'%3E%3Cpath fill='%23d6dadb' transform='rotate(0)' d='M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z'/%3E%3C/svg%3E");
+                    }
+                }
+            }
+            .img {
+                display: inline-flex;
+
+                span {
+                    margin: 7px 5px;
+                }
+            }
+            .nav-caret.triangle {
+                margin: 15px 5px 15px 0;
+            }
+            .countBubl {
+                margin-left: 15px;
+                margin-top: -33px;
+                background-color: var(--status-danger);
+                padding: 3px 1px;
+                min-width: 13px;
+            }
+            > .table.justified-flex-start .indicator-dialog {
+                margin-left: 143px !important;
+                margin-top: 8px !important;
+            }
+            span[data-balloon] {
+                &:before {
+                    background-color: var(--general-active);
+                    font-size: 12px;
+                    padding: 7px 8px;
+                    border-radius: $BORDER_RADIUS;
+                    color: var(--text-general);
+                }
+                &:after {
+                    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='12px'%3E%3Cpath fill='%23d6dadb' transform='rotate(180 18 6)' d='M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z'/%3E%3C/svg%3E")
+                        no-repeat;
+                    background-size: 100% auto;
+                }
+            }
+            .cell:first-child span[data-balloon] {
+                &:before,
+                &:after {
+                    left: 45px;
+                }
+            }
+        }
+        .chartOptions_button,
+        .chartOptions_overlay.chartTypeOverlay {
+            .line-icon,
+            .line-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTIgMTBIMThWMTFIMnoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+            }
+            .candlestick-icon,
+            .candlestick-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggNnY4aDRWNkg4em0yLjUtNHYzSDEzdjEwaC0yLjV2M2gtMXYtM0g3VjVoMi41VjJoMXoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+            }
+            .ohlc-icon,
+            .ohlc-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEwLjUgMnYxMkgxNHYxaC0zLjV2M2gtMVY2SDZWNWgzLjVWMmgxeiIvPgogICAgPC9nPgo8L3N2Zz4K");
+            }
+            .dot-icon,
+            .dot-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQuNSA5Yy44MjggMCAxLjUuNjcyIDEuNSAxLjVTNS4zMjggMTIgNC41IDEyIDMgMTEuMzI4IDMgMTAuNSAzLjY3MiA5IDQuNSA5ek0xMCA5Yy44MjggMCAxLjUuNjcyIDEuNSAxLjVTMTAuODI4IDEyIDEwIDEycy0xLjUtLjY3Mi0xLjUtMS41UzkuMTcyIDkgMTAgOXptNS41IDBjLjgyOCAwIDEuNS42NzIgMS41IDEuNXMtLjY3MiAxLjUtMS41IDEuNS0xLjUtLjY3Mi0xLjUtMS41LjY3Mi0xLjUgMS41LTEuNXoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+            }
+            .spline-icon,
+            .spline-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTIuOTg1IDEwLjYyMmMtLjA2Ny4yNjgtLjMzOS40My0uNjA3LjM2My0uMjY4LS4wNjctLjQzLS4zMzktLjM2My0uNjA3QzIuNzM1IDcuNTEyIDQuMTUzIDYgNi4yNSA2YzIuMDk3IDAgMy41MTUgMS41MTIgNC4yMzUgNC4zNzlDMTEuMTAyIDEyLjg0NiAxMi4xODQgMTQgMTMuNzUgMTRzMi42NDgtMS4xNTQgMy4yNjUtMy42MjFjLjA2Ny0uMjY4LjMzOC0uNDMxLjYwNi0uMzY0LjI2OC4wNjcuNDMxLjMzOC4zNjQuNjA2QzE3LjI3IDEzLjQ4NyAxNS44NTEgMTUgMTMuNzUgMTVjLTIuMSAwLTMuNTE4LTEuNTEzLTQuMjM1LTQuMzc4QzguODk1IDguMTU0IDcuODEzIDcgNi4yNSA3Yy0xLjU2MyAwLTIuNjQ1IDEuMTU0LTMuMjY1IDMuNjIyeiIvPgogICAgPC9nPgo8L3N2Zz4K");
+            }
+            .table-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTUgNXYxMGgxMFY1SDV6bTEwLTFjLjU1MiAwIDEgLjQ0OCAxIDF2MTBjMCAuNTUyLS40NDggMS0xIDFINWMtLjU1MiAwLTEtLjQ0OC0xLTFWNWMwLS41NTIuNDQ4LTEgMS0xaDEwem0tNy41IDhoLTFjLS4yNzYgMC0uNS4yMjQtLjUuNXMuMjI0LjUuNS41aDFjLjI3NiAwIC41LS4yMjQuNS0uNXMtLjIyNC0uNS0uNS0uNXptNiAwaC00Yy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWg0Yy4yNzYgMCAuNS0uMjI0LjUtLjVzLS4yMjQtLjUtLjUtLjV6bS02LTJoLTFjLS4yNzYgMC0uNS4yMjQtLjUuNXMuMjI0LjUuNS41aDFjLjI3NiAwIC41LS4yMjQuNS0uNXMtLjIyNC0uNS0uNS0uNXptNiAwaC00Yy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWg0Yy4yNzYgMCAuNS0uMjI0LjUtLjVzLS4yMjQtLjUtLjUtLjV6TTE1IDhINXYxaDEwVjh6TTcuNSA2aC0xYy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWgxYy4yNzYgMCAuNS0uMjI0LjUtLjVTNy43NzYgNiA3LjUgNnptNiAwaC00Yy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWg0Yy4yNzYgMCAuNS0uMjI0LjUtLjVzLS4yMjQtLjUtLjUtLjV6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
+            }
+            .crosshair-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEwLjUgMTJ2NGgtMXYtNGgxek0xNiA5LjV2MWgtNHYtMWg0em0tOCAwdjFINHYtMWg0ek0xMC41IDR2NGgtMVY0aDF6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
+            }
+            .indicator-icon,
+            .indicator-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQuNjA4IDkuNTQ4VjE3LjJIMy4wNTZWOS41NDhoMS41NTJ6bTMuMTg0LTMuMDhWMTcuMkg2LjI0VjYuNDY4aDEuNTUyem0zLjE4NCAyLjY1MnY4LjA4SDkuNDI0VjkuMTJoMS41NTJ6bTMuMTg0IDEuOHY2LjI4aC0xLjU1MnYtNi4yOGgxLjU1MnptMy4xODQtMy4xODhWMTcuMmgtMS41NTJWNy43MzJoMS41NTJ6TTcuNDEgMi42NzVsNS41MzcgNC43MjggNC4xNTItMy4yMTkuNDkuNjMyLTQuNjY1IDMuNjItNS41MTgtNC43MTItNC4wOTIgMy40NTQtLjUxNi0uNjEyIDQuNjEyLTMuODl6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
+            }
+            .comparison-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEzLjEyNCAxNS4zNHYuOEg2LjQ3NnYtLjhoNi42NDh6TTE2LjQgNC42NnYuOEgzLjJ2LS44aDEzLjJ6bS02LjYtLjhjLjY2MyAwIDEuMi41MzcgMS4yIDEuMiAwIC41MjItLjMzNC45NjctLjggMS4xMzJ2OS41NDhoLS44bC0uMDAxLTkuNTQ5QzguOTMzIDYuMDI2IDguNiA1LjU4MiA4LjYgNS4wNmMwLS42NjMuNTM3LTEuMiAxLjItMS4yem0tNC40IDEuMmwyLjE4OCA1LjE1MmMwIDEuMjA4LS45OCAyLjE4OC0yLjE4OCAyLjE4OC0uMDU4IDAtLjExNS0uMDAyLS4xNzEtLjAwNy0xLjEyNS0uMDg1LTIuMDEzLTEuMDItMi4wMjEtMi4xNjVsLjAwNC0uMDF2LS4wMDZoLjAwMkw1LjQgNS4wNnptOC44IDBsMi4xODggNS4xNTJ2LjAxNmguMDA0Yy0uMDA4IDEuMTQ2LS44OTYgMi4wOC0yLjAyIDIuMTY2LS4wNTcuMDA0LS4xMTQuMDA2LS4xNzIuMDA2bC0uMTU2LS4wMDVjLTEuMTM1LS4wNzMtMi4wMzYtMS4wMTMtMi4wNDQtMi4xNjdsMi4yLTUuMTY4ek01LjQgNy4xMTJsLTEuMzIyIDMuMTAzIDIuNjMxLjAxTDUuNCA3LjExMnptOC44IDBsLTEuMzIyIDMuMTAzIDIuNjMxLjAxTDE0LjIgNy4xMTJ6TTkuOCA0LjY2Yy0uMjIgMC0uNC4xOC0uNC40IDAgLjIyLjE4LjQuNC40LjIyIDAgLjQtLjE4LjQtLjQgMC0uMjItLjE4LS40LS40LS40eiIvPgogICAgPC9nPgo8L3N2Zz4K");
+            }
+            .drawing-icon,
+            .drawing-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQgMTMuNVYxNmgyLjVsNy4zNzItNy4zNzMtMi41LTIuNUw0IDEzLjV6bTExLjgwNS02LjgwNWMuMjYtLjI2LjI2LS42OCAwLS45NGwtMS41NTUtMS41NmMtLjI2LS4yNi0uNjgtLjI2LS45NCAwbC0xLjIyNSAxLjIyIDIuNSAyLjUgMS4yMi0xLjIyeiIvPgogICAgPC9nPgo8L3N2Zz4K");
+            }
+            .chart_template-icon,
+            .chart_template-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTkuODAzIDEwLjk0MXY0LjExOGguNjk3bC0xLjMyNCAyLjY0Ny0xLjMyMy0yLjY0N2guNjk3VjEwLjk0aDEuMjUzem0yLjQ2Mi0xLjc2NWwxLjMyMyAyLjY0OGgtLjY5NnY0LjQxMWgtMS4yNTR2LTQuNDExaC0uNjk3bDEuMzI0LTIuNjQ4ek0xMS4xNCAzLjA0NGMxLjk0LjI2NyAzLjUzMyAxLjcxMiA0LjAzNiAzLjY2IDEuNzM0LjI5MSAyLjk1OCAxLjkwNyAyLjgxMSAzLjcxLS4xNDcgMS44MDMtMS42MTcgMy4xODYtMy4zNzMgMy4xNzRoLS4wNjJ2LS45MDdoLjA0M2MuODkzLjAzMyAxLjczNC0uNDI3IDIuMjA4LTEuMjA3LjQ3NC0uNzguNTA4LTEuNzYuMDktMi41NzMtLjQyLS44MTMtMS4yMjctMS4zMzQtMi4xMi0xLjM2NmwtLjMxMi0uMDIzLS4wNjItLjMyMmMtLjMzLTEuNzEtMS42Ny0zLjAxOC0zLjM0Ni0zLjI2NC0xLjY3NS0uMjQ3LTMuMzE4LjYyNC00LjA5OCAyLjE3bC0uMTA2LjIxLS4yMjguMDI2QzQuOTk2IDYuNTMgMy44IDcuOTk4IDMuODkgOS42ODJjLjA5IDEuNjg1IDEuNDM1IDMuMDA3IDMuMDczIDMuMDIyaC4wOTZ2Ljg4NGgtLjA5M2MtMi4wNjIuMDA0LTMuNzgyLTEuNjI0LTMuOTUyLTMuNzQxLS4xNy0yLjExNyAxLjI2NS00LjAxNSAzLjMtNC4zNjEuOTgtMS43NDUgMi44ODYtMi43MDkgNC44MjctMi40NDJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
+            }
+            .share-icon,
+            .share-w-icon {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEzLjg2OCA0LjI3MmMuNzczIDAgMS40LjYyNyAxLjQgMS40IDAgLjc3My0uNjI3IDEuNC0xLjQgMS40LS4zNjggMC0uNzAzLS4xNDItLjk1My0uMzc0TDcuODkxIDkuNjYyYy4wMjcuMTA5LjA0MS4yMjIuMDQxLjMzOCAwIC4xMTYtLjAxNC4yMjktLjA0LjMzN2w1LjAyNCAyLjk2NGMuMjUtLjIzMS41ODUtLjM3My45NTItLjM3My43NzMgMCAxLjQuNjI3IDEuNCAxLjQgMCAuNzczLS42MjcgMS40LTEuNCAxLjQtLjc3MyAwLTEuNC0uNjI3LTEuNC0xLjQgMC0uMTE2LjAxNC0uMjI5LjA0LS4zMzdsLTUuMDI0LTIuOTY0Yy0uMjUuMjMxLS41ODUuMzczLS45NTIuMzczLS43NzMgMC0xLjQtLjYyNy0xLjQtMS40IDAtLjc3My42MjctMS40IDEuNC0xLjQuMzY4IDAgLjcwMy4xNDIuOTUzLjM3NGw1LjAyNC0yLjk2NWMtLjAyNy0uMTA4LS4wNDEtLjIyMS0uMDQxLS4zMzcgMC0uNzczLjYyNy0xLjQgMS40LTEuNHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+            }
+        }
+        .chartOptions_button {
+            background-color: var(--general-section-1);
+            height: 34px;
+            margin-left: 0;
+            margin-right: 5px;
+
+            &,
+            &.button_selected {
+                color: var(--text-general);
+            }
+            &.button_selected {
+                background-color: var(--general-active);
+            }
+            &:not(.button_selected):hover {
+                background-color: var(--general-hover);
+            }
+        }
+        .chartOptions_overlay {
+            @media (min-width: 480px) {
+                margin-left: 0 !important;
+            }
+
+            &.exportOverlay {
+                @media (min-width: 480px) {
+                    margin-left: 0 !important;
+                }
+
+                .row .cell .table.download {
+                    margin: 10px;
+
+                    span {
+                        margin: 0;
+                        padding: 0;
+                        height: auto;
+                    }
+                    .cell {
+                        height: 32px;
+                        min-width: 32px;
+                        align-items: center;
+                        justify-content: center;
+                        background-color: var(--general-section-1);
+                        border-radius: $BORDER_RADIUS;
+
+                        &:not(:first-child) {
+                            margin-left: 10px;
+                        }
+                        &:hover {
+                            background-color: var(--general-hover);
+                        }
+                    }
+                }
+                .fill-bg-color {
+                    background-color: var(--general-section-1);
+                }
+            }
+            &.table {
+                margin-top: 10px;
+                border: 1px solid var(--border-normal);
+            }
+            &.loadSaveOverlay {
+                font-size: 12px;
+
+                .chart-template-manager-root {
+                    .button-secondary {
+                        > span {
+                            display: inline-flex;
+                            justify-content: center;
+                            background-color: var(--general-section-1);
+                            width: 100%;
+                            border: none;
+                            font-weight: normal !important;
+                            font-size: 12px !important;
+                            height: 30px !important;
+
+                            &:hover {
+                                background-color: var(--general-hover);
+                            }
+                        }
+                    }
+                    .templates {
+                        > div > div {
+                            margin-top: 6px;
+                            margin-bottom: 0;
+                            line-height: 18px;
+                            color: var(--text-general);
+                        }
+                        .template {
+                            padding-bottom: 0;
+
+                            &:not(:last-child) {
+                                padding-bottom: 5px;
+                            }
+                            .name {
+                                &.active {
+                                    color: var(--text-general);
+                                }
+                                &:hover {
+                                    color: var(--text-general);
+                                }
+                            }
+                            a {
+                                font-weight: normal;
+
+                                &:hover {
+                                    text-decoration: underline !important;
+                                    color: var(--brand-red-coral);
+                                }
+                            }
+                        }
+                    }
+                    .confirm,
+                    .rename,
+                    .save-as {
+                        .title {
+                            margin: 8px 0;
+                            line-height: 18px;
+                        }
+                        .button {
+                            margin-bottom: 0;
+                        }
+                        button {
+                            @include deriv-btn("normal", "primary");
+                            margin: 0 5px 3px 3px;
+                            font-weight: bold;
+
+                            &:nth-child(2) {
+                                @include deriv-btn("normal", "secondary");
+                            }
+                        }
+                        input {
+                            padding: 5px;
+                        }
+                        .errors {
+                            line-height: 18px;
+                            font-size: 12px;
+                            height: 18px;
+
+                            .error {
+                                color: var(--text-loss-danger);
+                            }
+                        }
+                    }
+                    .save-as,
+                    .rename {
+                        .title {
+                            margin-bottom: 0;
+                        }
+                        input {
+                            width: 164px;
+                        }
+                    }
+                }
+                span.back-arrow {
+                    > span {
+                        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgyMFYyMEgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTguMjIyIDYuNTY0VjMuMDFMMiA5LjIzbDYuMjIyIDYuMjIyVjExLjgxYzQuNDQ1IDAgNy41NTYgMS40MjIgOS43NzggNC41MzMtLjg4OS00LjQ0NC0zLjU1Ni04Ljg4OS05Ljc3OC05Ljc3OHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==") !important;
+                    }
+                    a {
+                        font-weight: bold;
+                    }
+                }
+            }
+            &.indicators > .indicator-dialog {
+                --indicator-dialog-bg: rgba(6, 10, 17, 0.7);
+
+                background-color: var(--indicator-dialog-bg);
+                height: calc(100% - 8px);
+                border-color: var(--border-normal);
+
+                .background-color,
+                .header-bar,
+                .view,
+                .view .types,
+                .view .types .type,
+                .indicator,
+                .indicator-builder,
+                .title,
+                .categories,
+                .categories.icon input,
+                .tabs,
+                .types .type > div,
+                .types .type > span.title {
+                    background-color: var(--indicator-dialog-bg);
+                }
+                .header-bar {
+                    .categories,
+                    .tabs {
+                        color: var(--text-general);
+                        font-weight: normal;
+
+                        span.active,
+                        .tab.active {
+                            font-weight: bold;
+                            border-bottom: 3px solid var(--brand-red-coral);
+                            line-height: 33px;
+                        }
+                        &.icon {
+                            .search {
+                                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik02LjUgMTJDOS41MzggMTIgMTIgOS41MzggMTIgNi41UzkuNTM4IDEgNi41IDEgMSAzLjQ2MiAxIDYuNSAzLjQ2MiAxMiA2LjUgMTJ6bTAtMTJDMTAuMDkgMCAxMyAyLjkxIDEzIDYuNWMwIDEuNjE1LS41ODkgMy4wOTItMS41NjQgNC4yMjlsNC40MTggNC40MTdjLjE5NS4xOTYuMTk1LjUxMiAwIC43MDgtLjE5Ni4xOTUtLjUxMi4xOTUtLjcwOCAwbC00LjQxNy00LjQxOEM5LjU5MiAxMi40MTEgOC4xMTUgMTMgNi41IDEzIDIuOTEgMTMgMCAxMC4wOSAwIDYuNVMyLjkxIDAgNi41IDB6Ii8+Cjwvc3ZnPgo=");
+                            }
+                            &.active input {
+                                border-bottom-color: var(
+                                    --border-normal
+                                ) !important;
+                                color: var(--text-general);
+
+                                &:hover {
+                                    border-bottom-color: var(
+                                        --border-hover
+                                    ) !important;
+                                }
+                                &:focus {
+                                    border-bottom-color: var(
+                                        --brand-secondary
+                                    ) !important;
+                                }
+                            }
+                        }
+                    }
+                    .title {
+                        .text {
+                            color: var(--text-general);
+                            font-weight: bold;
+                        }
+                        .back-arrow {
+                            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuOTE0IDZIMTR2MkgzLjkxNGw0LjI5MyA0LjI5My0xLjQxNCAxLjQxNEwuMDg2IDcgNi43OTMuMjkzbDEuNDE0IDEuNDE0TDMuOTE0IDZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
+                        }
+                    }
+                }
+                .view {
+                    .types .type {
+                        > span.title {
+                            border-top: none;
+                        }
+                        div span {
+                            &.display_name {
+                                padding: 11px 60px 11px 16px;
+                                color: var(--text-general);
+                                font-size: 12px;
+                                font-weight: normal;
+                            }
+                            &.option-0 {
+                                color: var(--brand-red-coral);
+                                border-color: var(--brand-red-coral);
+                            }
+                            &.option-1.edit {
+                                right: 36px;
+                                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgxNlYxNkgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEyLjE0NiA1LjQ0TDQgMTMuNTg2SDJ2LTJoLjAxN2w4LjEzLTguMTQ1IDIgMS45OTloLS4wMDF6bS43MDgtLjcwN2wtMi0yIC40NC0uNDRoLS4wMDFjLjM5LS4zOSAxLjAyNC0uMzkgMS40MTQgMGwuNTg2LjU4NmMuMzkuMzkuMzkgMS4wMjMgMCAxLjQxNGwtLjQ0LjQ0aC4wMDF6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
+                            }
+                            &.option-2 {
+                                right: 12px;
+
+                                &.empty-star {
+                                    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMjU2IDEzLjY1NGwzLjUxMS0xLjg0N2MuMTQ2LS4wNzYuMzItLjA3Ni40NjYgMGwzLjUxMSAxLjg0Ny0uNjctMy45MWMtLjAyOC0uMTYzLjAyNi0uMzI4LjE0My0uNDQzbDIuODQxLTIuNzctMy45MjYtLjU3Yy0uMTYzLS4wMjQtLjMwMy0uMTI2LS4zNzYtLjI3NEw4IDIuMTMgNi4yNDQgNS42ODdjLS4wNzMuMTQ4LS4yMTMuMjUtLjM3Ni4yNzRsLTMuOTI2LjU3IDIuODQgMi43N2MuMTE4LjExNS4xNzIuMjguMTQ0LjQ0MmwtLjY3IDMuOTF6TTggMTIuODE0TDMuODI0IDE1LjAxYy0uMzY3LjE5My0uNzk1LS4xMTgtLjcyNS0uNTI3bC43OTctNC42NUwuNTE4IDYuNTRjLS4yOTctLjI4OS0uMTMzLS43OTMuMjc3LS44NTJsNC42NjktLjY3OUw3LjU1Mi43OGMuMTgzLS4zNzIuNzEzLS4zNzIuODk2IDBsMi4wODggNC4yMyA0LjY2OS42NzljLjQxLjA2LjU3NC41NjMuMjc3Ljg1MmwtMy4zNzggMy4yOTMuNzk3IDQuNjVjLjA3LjQwOS0uMzU4LjcyLS43MjUuNTI3TDggMTIuODE1eiIvPgo8L3N2Zz4K");
+                                }
+                                &.full-star {
+                                    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGcgZmlsbD0iI2ZmNDQ0ZiIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik04IDEyLjQ3MmwtNC4wNDMgMi4wNDFjLS43NTMuMzgxLTEuMjQ2LjAyNi0xLjEwNC0uNzdsLjc3Mi00LjMyMy0zLjI3LTMuMDYzYy0uNjEtLjU3LS40MS0xLjEzLjQyMS0xLjI0Nmw0LjUyLS42M0w3LjMxOC41NDZjLjM3Ny0uNzM0Ljk5Mi0uNzI1IDEuMzY0IDBsMi4wMjIgMy45MzMgNC41Mi42MzFjLjg0My4xMTggMS4wMjQuNjgzLjQyMiAxLjI0NkwxMi4zNzUgOS40MmwuNzcyIDQuMzIzYy4xNDQuODA2LS4zNiAxLjE0Ni0xLjEwNC43N0w4IDEyLjQ3M3oiLz48cGF0aCBkPSJNMTEgOS4wMmwzLTIuODE4LTQuMTQ2LS41ODFMOCAyIDYuMTQ2IDUuNjIxIDIgNi4yMDFsMyAyLjgyTDQuMjkyIDEzIDggMTEuMTIxIDExLjcwOCAxM3oiLz48L2c+PC9zdmc+Cg==");
+                                }
+                            }
+                        }
+                        .empty {
+                            > span {
+                                color: var(--text-less-prominent);
+                                font-size: 12px;
+                                line-height: 18px;
+                            }
+                            > a > span {
+                                @include deriv-btn("large", "secondary");
+                                width: 192px;
+                                white-space: nowrap;
+                            }
+                        }
+                    }
+                    &.indicator > div {
+                        color: var(--text-general);
+                        font-weight: normal;
+                        font-size: 12px;
+                        line-height: 18px;
+                    }
+                }
+                .indicator-builder {
+                    > table tr {
+                        td {
+                            font-weight: normal;
+                        }
+                        td:first-child {
+                            padding: 20px 15px 19px;
+                            font-size: 12px;
+                        }
+                        td a span {
+                            height: 32px !important;
+                        }
+                        .colorpicker-td {
+                            margin-top: 8px;
+
+                            input {
+                                display: none;
+                            }
+                        }
+                        .applied-to {
+                            border: 1px solid var(--border-normal);
+                            border-radius: $BORDER_RADIUS;
+                            margin-top: 10px;
+
+                            > div {
+                                line-height: 28px;
+                                font-weight: normal;
+                                font-size: 12px;
+                                color: var(--text-general);
+
+                                &.selected {
+                                    font-weight: bold;
+                                    background-color: var(--state-active);
+                                    color: var(--text-general);
+                                }
+                            }
+                        }
+                        &.levels-tr {
+                            td:nth-child(2) {
+                                text-align: end;
+                                margin-top: 6px;
+                            }
+                        }
+                    }
+                    table.levels {
+                        margin-top: -20px;
+                        margin-bottom: 17px;
+
+                        thead td {
+                            vertical-align: middle;
+                        }
+                        tr td {
+                            line-height: 18px;
+                            font-size: 12px;
+                            padding: 9px 13px;
+                            // 40px is the fixed width of the last child to make it smaller
+                            // divide by the remaining four tds
+                            // minus 29px padding (13px left and 13px right) + 1px from parent due to parent td width.
+                            // width: calc(calc(calc(100% - 40px) / 4) - 29px);
+                            width: calc((100% - 40px) / 4 - 29px);
+                            display: inline-block;
+
+                            &:nth-child(3) > div {
+                                border-radius: $BORDER_RADIUS;
+                                border: 3px solid rgba(0, 0, 0, 0.1);
+                                height: 14px !important;
+                                width: 46px !important;
+                                margin-left: auto;
+                                margin-right: auto;
+                            }
+                            &:last-child {
+                                width: 14px;
+                                padding: 9px 13px 8px;
+                            }
+                        }
+                        .circle-close {
+                            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgxNlYxNkgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMGM0LjQxOCAwIDggMy41ODIgOCA4cy0zLjU4MiA4LTggOC04LTMuNTgyLTgtOCAzLjU4Mi04IDgtOHptMCAxQzQuMTM0IDEgMSA0LjEzNCAxIDhzMy4xMzQgNyA3IDcgNy0zLjEzNCA3LTctMy4xMzQtNy03LTd6TTYuMjMyIDUuNTI1TDggNy4yOTJsMS43NjktMS43NjdjLjE5NS0uMTk2LjUxMS0uMTk2LjcwNyAwIC4xOTUuMTk1LjE5NS41MTIgMCAuNzA3TDguNzA2IDcuOTk5bDEuNzY5IDEuNzY4Yy4xOTUuMTk2LjE5NS41MTIgMCAuNzA3LS4xOTYuMTk2LS41MTIuMTk2LS43MDcgMEw3Ljk5OSA4LjcwNmwtMS43NjcgMS43NjhjLS4xOTUuMTk2LS41MTIuMTk2LS43MDcgMC0uMTk1LS4xOTUtLjE5NS0uNTExIDAtLjcwN0w3LjI5MiA4IDUuNTI1IDYuMjMyYy0uMTk1LS4xOTUtLjE5NS0uNTEyIDAtLjcwNy4xOTUtLjE5Ni41MTItLjE5Ni43MDcgMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+                        }
+                        .no-underline[data-balloon] {
+                            vertical-align: sub;
+
+                            &:before {
+                                padding: 16px 8px;
+                            }
+                            &:after {
+                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='12px'%3E%3Cpath fill='%23d6dadb' transform='rotate(0)' d='M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z'/%3E%3C/svg%3E");
+                            }
+                        }
+                    }
+                    a.button,
+                    a.button-secondary {
+                        span {
+                            font-size: 14px;
+                            line-height: 24px;
+                        }
+                    }
+                    .dd-select {
+                        margin-top: 11px;
+                        border-radius: $BORDER_RADIUS;
+
+                        &.dd-open {
+                            border: 1px solid var(--brand-secondary);
+                        }
+                    }
+                    .dd-options {
+                        border-radius: $BORDER_RADIUS;
+                        border: 1px solid var(--border-normal);
+                    }
+                    .dd-option {
+                        border-bottom: none;
+
+                        &:hover {
+                            background-color: var(--state-hover);
+                        }
+                        &-selected {
+                            background-color: var(--state-active);
+                        }
+                    }
+                    .levels-dialog {
+                        button {
+                            &:first-of-type {
+                                @include deriv-btn("normal", "secondary");
+                            }
+                            &:nth-of-type(2) {
+                                @include deriv-btn("normal", "primary");
+                            }
+                        }
+                    }
+                }
+            }
+            &.chartTypeOverlay {
+                width: 86px;
+                margin-left: 0 !important;
+
+                .row {
+                    &.showborder,
+                    .chartOptions .chartTypeOverlay .row:nth-last-child(2),
+                    .chartOptions .chartTypeOverlay .row:nth-last-child(3) {
+                        border-color: var(--border-normal);
+                    }
+                    :hover {
+                        background-color: var(--general-hover);
+                    }
+                }
+                .img div {
+                    margin: 4px;
+                }
+            }
+            &.timePeriodOverlay {
+                margin-left: 0 !important;
+
+                .vertical-bottom {
+                    &.button {
+                        width: 32px;
+                        height: 32px;
+                        margin: 4px 10px 4px 0;
+                        padding: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        @media (max-width: 480px) {
+                            width: 25px;
+                            height: 25px;
+                        }
+
+                        &:last-child {
+                            margin-right: 5px;
+                        }
+                        &:hover {
+                            background-color: var(--general-hover);
+                        }
+                    }
+                    &.time {
+                        margin-left: 5px;
+                    }
+                }
+                .row:not(:last-child) {
+                    border-color: var(--border-normal);
+                }
+            }
+            &.drawingToolOverlay {
+                margin-left: 0 !important;
+            }
+        }
+        &.chart-dialog {
+            .close {
+                background: var(--general-active);
+                border-color: var(--general-active);
+                color: var(--general-text);
+                border-radius: unset;
+                font-size: 16px;
+                line-height: 24px;
+                left: 21px;
+            }
+            .table-view {
+                background-color: var(--general-main-1);
+            }
+            table {
+                th,
+                table thead {
+                    line-height: 24px;
+                    font-size: 14px;
+                    background-color: var(--general-section-1);
+                }
+                &.wtcharts-table-view {
+                    width: calc(100% - 30px);
+                    margin-left: 20px;
+
+                    td.is-down {
+                        color: var(--text-loss-danger);
+                    }
+                    .down-arrow,
+                    .up-arrow {
+                        img {
+                            width: 0;
+                            height: 0;
+                            padding: 8px;
+                            float: right;
+                        }
+                    }
+                    .down-arrow img {
+                        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNFQzNGM0YiIGQ9Ik02IDhMMTIgMCAwIDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIi8+CiAgICA8L2c+Cjwvc3ZnPgo=")
+                            no-repeat 0 0;
+                    }
+                    .up-arrow img {
+                        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM0QkI0QjMiIGQ9Ik02IDBMMTIgOCAwIDh6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIi8+CiAgICA8L2c+Cjwvc3ZnPgo=")
+                            no-repeat 0 0;
+                    }
+                }
+            }
+        }
+    }
+    #last_digit_histo_form {
+        margin-bottom: 20px;
+    }
+    div.select > select#digit_underlying {
+        min-width: 170px;
+    }
+    #digit_underlying ~ ul.select-options {
+        font-size: 85%;
+    }
+    #tab_explanation-content {
+        h3,
+        p {
+            color: var(--text-prominent);
+            font-weight: 400;
+        }
+        h3 {
+            font-weight: bold;
+        }
+        #explanation_explain h3 {
+            margin: 40px 0 20px;
+        }
+        p {
+            margin: 16px 0;
+            line-height: 22px;
+
+            strong {
+                font-weight: 600;
+                letter-spacing: 0.25px;
+                margin: 20px 0;
+            }
+        }
+        img {
+            margin: 40px 0 0;
+        }
+    }
+}
+
+#explanation-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background-color: rgba(0, 0, 0, 0.6);
+    overflow-y: auto;
+
+    &.invisible {
+        display: none;
+    }
+
+    .explanation-modal__container {
+        background-color: var(--general-main-1);
+        border-radius: 16px;
+        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
+        width: min(960px, 100%);
+        max-height: 90vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .explanation-modal__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1.5rem;
+        border-bottom: 1px solid var(--general-section-1);
+        background-color: var(--general-main-2);
+    }
+
+    .explanation-modal__title {
+        margin: 0;
+        font-size: 1.25rem;
+        color: var(--text-prominent);
+    }
+
+    .explanation-modal__close {
+        border: none;
+        background: transparent;
+        font-size: 1.5rem;
+        line-height: 1;
+        cursor: pointer;
+        color: var(--text-prominent);
+
+        &:hover {
+            color: var(--status-warning);
+        }
+    }
+
+    .explanation-modal__body {
+        padding: 1.5rem;
+        overflow-y: auto;
+    }
+}
+
+#explanation-modal-content {
+    h3,
+    p {
+        color: var(--text-prominent);
+        font-weight: 400;
+    }
+    h3 {
+        font-weight: bold;
+    }
+    #explanation_explain h3 {
+        margin: 40px 0 20px;
+    }
+    p {
+        margin: 16px 0;
+        line-height: 22px;
+
+        strong {
+            font-weight: 600;
+            letter-spacing: 0.25px;
+            margin: 20px 0;
+        }
+    }
+    img {
+        margin: 40px 0 0;
+    }
+}
+
+body.explanation-modal-open {
+    overflow: hidden;
+}
+
+#deposit_btn_trade,
+#upgrade_btn_trade {
+    float: right;
+    margin: 0 0 0 10px;
+
+    span {
+        height: 20px;
+        line-height: 20px;
+        // background-color: $COLOR_ORANGE;
+
+        // &:hover {
+        //     background-color: $COLOR_DARK_ORANGE;
+        // }
+        img {
+            margin-right: 5px;
+        }
+    }
+}
+
+body #lean_overlay {
+    #webtrader-charts-dialog-1 {
+        --charts-dialog-accent: rgba(255, 189, 76, 0.45);
+    }
+    > div.overlay-dialog {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    input {
+        font-size: 14px;
+        line-height: 18px;
+        padding: 9px 15px 9px 9px;
+        border: 1px solid var(--border-normal);
+
+        &:hover {
+            border-color: var(--border-hover);
+        }
+        &:focus {
+            border-color: var(--brand-secondary);
+        }
+    }
+    .lean_overlay_titlebar {
+        background-color: var(--general-section-1);
+        line-height: 24px;
+        padding: 8px 16px;
+        color: var(--charts-dialog-accent, #39ff14);
+        font-weight: bold;
+
+        .close {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0zLjcwNyAyLjI5M0w4IDYuNTg3bDQuMjkzLTQuMjk0Yy4zOS0uMzkgMS4wMjMtLjM5IDEuNDE0IDAgLjM5LjM5LjM5IDEuMDIzIDAgMS40MTRMOS40MTQgOC4wMDFsNC4yOTMgNC4yOTVjLjM5LjM5LjM5IDEuMDI0IDAgMS40MTQtLjM5LjM5LTEuMDI0LjM5LTEuNDE0IDBMOCA5LjQxNiAzLjcwNyAxMy43MWMtLjM5LjM5LTEuMDIzLjM5LTEuNDE0IDAtLjM5LS4zOS0uMzktMS4wMjMgMC0xLjQxNGw0LjI5Mi00LjI5NS00LjI5Mi00LjI5NGMtLjM5LS4zOS0uMzktMS4wMjQgMC0xLjQxNC4zOS0uMzkgMS4wMjQtLjM5IDEuNDE0IDB6Ii8+Cjwvc3ZnPgo=") !important;
+        }
+    }
+    .webtrader-charts-dialog {
+        --charts-dialog-accent: #39ff14;
+        font-size: 16px;
+        line-height: 24px;
+        height: auto !important;
+        padding-bottom: 36px;
+
+        #webtrader-charts-dialog-1_header
+            > div
+            > div.table.justified-flex-start
+            > div
+            > div:nth-child(3)
+            > div.chartOptions_overlay.primary-color.indicators {
+            background-color: rgba(5, 8, 15, 0.82);
+            border: 1px solid rgba(57, 255, 20, 0.35);
+            box-shadow:
+                0 16px 40px rgba(0, 0, 0, 0.55),
+                inset 0 1px 0 rgba(255, 255, 255, 0.04);
+            color: var(--charts-dialog-accent, #39ff14);
+
+            > div,
+            .table,
+            .table .row:not(:last-child),
+            .table .cell {
+                background-color: rgba(5, 8, 15, 0.82);
+                color: inherit;
+            }
+        }
+
+        .quill-input__wrapper,
+        .quill-custom-dropdown__head,
+        .quill-custom-dropdown__container,
+        .quill-input__container,
+        .quill-input__wrapper .input,
+        .quill-custom-dropdown__input,
+        .quill-input__wrapper input,
+        .quill-input__wrapper select,
+        .quill-checkbox__wrapper,
+        .quill-checkbox__label {
+            background-color: var(--general-section-2);
+            color: var(--charts-dialog-accent, #39ff14);
+        }
+
+        .quill-custom-dropdown__head svg,
+        .quill-input__icon,
+        .quill-checkbox__box-icon,
+        .quill-checkbox__info-icon {
+            fill: var(--charts-dialog-accent, #39ff14);
+            color: var(--charts-dialog-accent, #39ff14);
+        }
+
+        &.webtrader-charts-properties-selector-dialog table strong {
+            font-size: 16px;
+        }
+        table {
+            td {
+                border-bottom: 1px solid var(--border-normal);
+                width: 50%;
+
+                &:first-child {
+                    padding: 10px 0 8px 16px;
+                }
+                &:not(:first-child) {
+                    padding: 4px 4px 4px 0;
+                }
+                strong {
+                    font-weight: normal;
+                }
+                input {
+                    height: 15px;
+                    width: 120px !important;
+
+                    &#color {
+                        display: none;
+                    }
+                }
+                .sp-replacer {
+                    background-color: var(--text-colored-background);
+                    border-color: var(--border-normal);
+                    border-radius: $BORDER_RADIUS;
+
+                    .sp-preview {
+                        width: 25px;
+                        height: 25px;
+                        border: none;
+                        margin-right: 8px;
+
+                        .sp-preview-inner {
+                            border-radius: $BORDER_RADIUS;
+                            border: 3px solid rgba(0, 0, 0, 0.1);
+                        }
+                    }
+                    .sp-dd {
+                        line-height: 24px;
+                    }
+                }
+            }
+        }
+    }
+    .overlay-dialog {
+        .title-big {
+            font-size: 22px;
+        }
+        .title {
+            padding-top: 0;
+        }
+        span.title-sub {
+            padding-left: 15px;
+            color: var(--text-less-prominent);
+        }
+        .add-overlays {
+            input {
+                height: 12px;
+                width: 194px !important;
+            }
+            span.circle-close {
+                top: 9px;
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMEgxNlYxNkgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMzMzMiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMGM0LjQxOCAwIDggMy41ODIgOCA4cy0zLjU4MiA4LTggOC04LTMuNTgyLTgtOCAzLjU4Mi04IDgtOHptMCAxQzQuMTM0IDEgMSA0LjEzNCAxIDhzMy4xMzQgNyA3IDcgNy0zLjEzNCA3LTctMy4xMzQtNy03LTd6TTYuMjMyIDUuNTI1TDggNy4yOTJsMS43NjktMS43NjdjLjE5NS0uMTk2LjUxMS0uMTk2LjcwNyAwIC4xOTUuMTk1LjE5NS41MTIgMCAuNzA3TDguNzA2IDcuOTk5bDEuNzY5IDEuNzY4Yy4xOTUuMTk2LjE5NS41MTIgMCAuNzA3LS4xOTYuMTk2LS41MTIuMTk2LS43MDcgMEw3Ljk5OSA4LjcwNmwtMS43NjcgMS43NjhjLS4xOTUuMTk2LS41MTIuMTk2LS43MDcgMC0uMTk1LS4xOTUtLjE5NS0uNTExIDAtLjcwN0w3LjI5MiA4IDUuNTI1IDYuMjMyYy0uMTk1LS4xOTUtLjE5NS0uNTEyIDAtLjcwNy4xOTUtLjE5Ni41MTItLjE5Ni43MDcgMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
+            }
+        }
+        .current .overlay_symbol {
+            font-size: 12px;
+            padding-left: 10px;
+            font-weight: 500;
+        }
+        div.category > div > span.remove {
+            color: var(--button-primary-default);
+            font-size: 12px;
+        }
+    }
+    .lean_overlay_buttonpane {
+        border-top: 1px solid var(--border-normal);
+        padding: 18px 16px;
+        display: flex;
+
+        > div {
+            @include deriv-btn("large", "secondary");
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &:not(:first-child) {
+                @include deriv-btn("large", "primary");
+                margin-left: 8px;
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        #webtrader-charts-dialog-1 {
+            margin: 0 !important;
+            padding: 0 !important;
+            width: 100vw !important;
+            max-width: none;
+        }
+
+        #webtrader-charts-dialog-1.webtrader-charts-dialog,
+        #webtrader-charts-dialog-1 .webtrader-charts-dialog,
+        #webtrader-charts-dialog-1 .overlay-dialog,
+        #webtrader-charts-dialog-1 .lean_overlay_titlebar,
+        #webtrader-charts-dialog-1 .lean_overlay_buttonpane {
+            padding: 0 !important;
+            margin: 0 !important;
+            width: 100%;
+        }
+
+        #webtrader-charts-dialog-1 .overlay-dialog {
+            border-radius: 0;
+        }
+
+        #webtrader-charts-dialog-1 .webtrader-charts-dialog {
+            padding-bottom: 0;
+        }
+
+        #webtrader-charts-dialog-1 table,
+        #webtrader-charts-dialog-1 table td {
+            margin: 0;
+            padding: 0;
+        }
+    }
+}
+
+body .sp-container {
+    background-color: var(--text-colored-background);
+    border: 1px solid var(--border-normal);
+    border-radius: $BORDER_RADIUS;
+
+    .sp-picker-container {
+        margin: 0;
+        padding: 8px 8px 5px;
+
+        .sp-top {
+            margin-bottom: 0;
+        }
+        .sp-fill {
+            padding-top: 161px;
+        }
+        .sp-clear,
+        .sp-color,
+        .sp-hue {
+            border: none;
+        }
+        .sp-slider {
+            border-left: none;
+            border-right: none;
+            width: 100%;
+            margin-left: 1px;
+            height: 4px;
+        }
+        .sp-button-container {
+            margin-top: 11px;
+            margin-bottom: 3px;
+
+            .sp-cancel.sp-cancel,
+            .sp-choose.sp-choose {
+                font-weight: bold;
+                padding: 0;
+                width: calc(50% - 4px);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                height: 32px;
+                box-sizing: border-box;
+
+                &:first-child {
+                    background: transparent !important;
+                    border: 1px solid var(--button-secondary-default);
+                    color: var(--text-prominent);
+                    margin-right: 8px;
+
+                    &:hover {
+                        background: var(--button-secondary-hover);
+                    }
+                }
+                &:last-child {
+                    background-color: var(--brand-red-coral);
+                    text-transform: uppercase;
+
+                    &:hover {
+                        background-color: var(--button-primary-hover);
+                    }
+                }
+            }
+        }
+    }
+}