/* input(593,21): run-time error CSS1035: Expected colon, found 'display'
input(3809,5): run-time error CSS1036: Expected expression, found '}' */
:root {
    --color-input-fill: rgb(var(--rgb-input-fill));
    --color-input-fill-hover: rgb(var(--rgb-input-fill-hover));
    --color-input-stroke: rgb(var(--rgb-input-stroke));
    --color-input-fill-typing: rgb(var(--rgb-input-fill-typying));
    --color-typo-paragraph-default: rgb(var(--rgb-typo-paragraph-default));
    --color-typo-paragraph: rgb(var(--rgb-typo-paragraph));
    --color-typo-label-selected: rgb(var(--rgb-typo-label-selected));
    --color-typo-light: rgb(var(--rgb-typo-light));
    --color-typo-paragraph-red: rgb(var(--rgb-typo-paragraph-red));
    --color-typo-paragraph-green: rgb(var(--rgb-typo-paragraph-green));
    --color-typo-badge: rgb(var(--rgb-typo-badge));
    --color-ui-panel: rgb(var(--rgb-ui-panel));
    --color-ui-card: rgb(var(--rgb-ui-card));
    --color-ui-background: rgb(var(--rgb-ui-background));
    --color-ui-stroke: rgb(var(--rgb-ui-stroke));
    --color-ui-toggle-off: rgb(var(--rgb-ui-toggle-off));
    --color-ui-toggle-on: rgb(var(--rgb-ui-toggle-on));
    --color-ui-toggle-controller-off: rgb(var(--rgb-ui-toggle-controller-off));
    --color-ui-toggle-controller-on: rgb(var(--rgb-ui-toggle-controller-on));
    --color-ui-fill-active: rgb(var(--rgb-ui-fill-active));
    --color-ui-contrast-fill: rgb(var(--rgb-ui-contrast-fill));
    --color-ui-btn-fill: rgb(var(--rgb-ui-btn-fill));
    --color-ui-btn-fill-hover: rgb(var(--rgb-ui-btn-fill-hover));
    --color-ui-btn-stroke: rgb(var(--rgb-ui-btn-storke));
    --color-ui-power-fill: rgb(var(--rgb-ui-power-fill));
    --color-ui-power-fill-hover: rgb(var(--rgb-ui-power-fill-hover));
    --color-ui-btn-buy-fill: rgb(var(--rgb-ui-btn-buy-fill));
    --color-ui-btn-sell-fill: rgb(var(--rgb-ui-btn-sell-fill));
    --color-ui-btn-sl-fill: rgb(var(--rgb-ui-btn-sl-fill));
    --color-ui-btn-tp-fill: rgb(var(--rgb-ui-btn-tp-fill));
    --color-ui-danger: rgb(var(--rgb-ui-danger));
    --color-ui-icon-primary: rgb(var(--rgb-ui-icon-primary));
    --color-ui-icon-primary-active: rgb(var(--rgb-ui-icon-primary-active));
    --color-ui-badge-danger-fill: rgb(var(--rgb-ui-badge-danger-fill));
    --color-ui-badge-warning-fill: rgb(var(--rgb-ui-badge-warning-fill));
    --color-ui-badge-success-fill: rgb(var(--rgb-ui-badge-success-fill));
    --color-ui-state-off: rgb(var(--rgb-ui-state-off));
    --color-ui-state-alert: rgb(var(--rgb-ui-state-alert));
    --color-ui-state-on: rgb(var(--rgb-ui-state-on));
    --color-ui-state-none: rgb(var(--color-ui-background));
    --color-ui-neutral-fill: rgb(var(--rgb-ui-neutral-fill));
    --color-ui-green-fill: rgb(var(--rgb-ui-green-fill));
    --color-ui-red-fill: rgb(var(--rgb-ui-red-fill));
    --color-ui-scroll: rgba(var(--rgb-ui-scroll));
    --color-ui-scroll-border: rgb(var(--rgb-ui-scroll-border));
    --color-ui-scroll-fill: rgb(var(--rgb-ui-scroll-fill));
    --color-ui-scroll-fill-active: rgb(var(--rgb-ui-scroll-fill-active));
}

:root {
    --opacity-hover: 0.8;
    --opacity-border-outline: 0.5;
    --badge-states-hover: 0.3;
    --font-color: var(--color-typo-paragraph);
    --border-width: 1px;
    --separator-color: var(--color-ui-stroke);
    --button-text-color: var(--color-typo-paragraph);
    --icon-color: var(--color-ui-icon-primary);
    --bg-none: var(--color-ui-background);
    --bg-default: var(--color-ui-card);
    --bg-active: rgb(var(--rgb-ui-fill-active));
    --bs-bg-success: var(--color-ui-badge-success-fill);
    --bs-bg-warning: var(--color-ui-badge-warning-fill);
    --bs-primary-rgb: var(--rgb-ui-btn-fill);
    --bs-danger-rgb: var(--rgb-ui-badge-danger-fill);
    --bs-warning-rgb: var(--rgb-ui-badge-warning-fill);
    --bs-success-rgb: var(--rgb-ui-badge-success-fill);
    --bg-light: rgba(var(--rgb-ui-background), 0.20);
    --bs-light-rgb: var(--rgb-ui-background);
    --btn-primary-bg-color: var(--color-ui-btn-fill);
    --btn-primary-text-color: var(--color-typo-label-selected);
    --btn-primary-bg-color-hover: var(--color-ui-btn-fill-hover);
    --btn-primary-border-color: var(--color-ui-stroke);
    --btn-secondary-bg-color: transparent;
    --btn-secondary-text-color: var(--color-ui-btn-fill);
    --btn-secondary-border-color: var(--color-ui-btn-stroke);
    --svg-size: 16px;
    --font-weight: 400;
    --font-size: 13px;
    --header-height: 0px;
    --bs-bg-light: var(--bg-light);
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-bg: var(--color-ui-panel);
    --bs-body-color: var(--font-color);
    color: var(--font-color);
    font-family: 'Roboto', sans-serif !important;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    --bg-workspace: var(--color-ui-panel);
    --btn-border-radius: 2px;
}

html:has(.vt-main-header) {
    --header-height: 32px;
}

html[data-theme='light'] {
    --bs-body-bg: #fff;
    --bg-workspace: var(--color-ui-card);
}

    html[data-theme='light'] .trading-panel {
        background: var(--bg-workspace);
    }


html:not([data-orientation='portrait']) .app-portrait {
    display: none !important;
}

html[data-orientation='portrait'] .app-landscape {
    display: none !important;
}

.border, .border-top, .border-left, .bordered-right, .border-bottom {
    border-color: var(--color-ui-stroke) !important;
}

.gap-4px {
    gap: 4px;
}

.gap-6px {
    gap: 6px;
}

.gap-8px {
    gap: 8px;
}

.gap-16px {
    gap: 16px;
}

.gap-24px {
    gap: 24px;
}

.gap-32px {
    gap: 32px;
}

.gap-64px {
    gap: 64px;
}

.p-8px {
    padding: 8px;
}

.p-16px{
    padding:16px;
}

.text-danger {
    color: var(--color-typo-paragraph-red) !important;
}

.text-warning {
    color: var(--color-ui-power-fill) !important;
}

.text-success{
    color: var(--color-typo-paragraph-green) !important;
}

.text-link {
    text-decoration: none;
    color: var(--color-ui-power-fill) !important;
}
.text-link:hover{
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.btn:hover {
    --bs-bg-opacity: var(--opacity-hover);
}

.btn-default {
    background: var(--color-ui-background);
    color: var(--font-color);
}

    .btn-default:hover {
        background: rgb(var(--rgb-ui-background),var(--opacity-hover));
    }

.dropdown *[type=button]::after {
    display: block;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.18444 5.5L3.5 6.16667L7.97554 10.5L8 10.4762L8.02446 10.5L12.5 6.16667L11.8156 5.5L8 9.1905L4.18444 5.5Z' fill='%233E3E3E'/%3E%3C/svg%3E");
}

.dropdown *[type=button].show::after {
    transform: rotate(180deg);
}

.rotate-180 {
    transform: rotate(180deg);
}



.logo.logo-vt {
    height: 24px;
    width: 136px;
    background-position: center;
    background-repeat: no-repeat;
}

.logo.logo-bg.logo-vt {
    margin-left: 8px;
    width: 204px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
}

.vt-main-header {
    background: var(--color-ui-card);
    box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.06) inset;
    height: var(--header-height);
    padding: 0px 6px;
}

    .vt-main-header .logo.logo-vt {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .vt-main-header .btn-logout {
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        color: var(--button-text-color);
    }

    .vt-main-header .icon-logout {
        margin-right: 4px;
        color: var(--color-ui-icon-danger);
        width: 16px;
        height: 16px;
    }

.vt-card {
    padding: 16px;
    background: var(--color-ui-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 4px;
    color: var(--color-typo-primary);
}

    .vt-card .title {
        color: var(--color-typo-primary);
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
    }

.vt-badge {
    border-radius: 40px;
    display: flex;
    padding: 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-typo-badge);
  
}
    .vt-badge.badge-lg {
        padding: 4px 12px;
        font-size: 0.95em;
        font-weight: 500;
    }
    .vt-badge.secondary {
        background: var(--color-ui-background);
        border: 1px solid var(--color-input-stroke);
    }
    .vt-badge.primary {
        border: 1px solid var(--color-ui-fill-active);
        background: var(--color-ui-icon-primary-active);
    }
    .vt-badge.bg-success {
        --bs-bg-opacity: 1;
    }

    .vt-badge.bg-warning {
        --bs-bg-opacity: 1;
    }

    .vt-badge.bg-danger {
        --bs-bg-opacity: 1;
    }


.toolbar-cmp-outside {
    background: var(--window-inside-color);
}

.toolbar-divider-h {
    width: 1px;
    height: 100%;
    background-color: var(--separator-color);
    /*margin: 0 0.1rem;*/
}


.no-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vt-divider-v {
    content: '';
    width: 1px;
    background-color: var(--color-ui-stroke);
    min-height: 0;
}

.vt-toolbar-left {
    background: var(--bs-body-bg);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.vt-toolbar-top {
    background: var(--bs-body-bg);
    height: 40px;
    padding: 0px 8px 0px 12px;
}

    .vt-toolbar-top .vt-divider-v {
        height: 40px;
        width: 1px;
        background-color: var(--color-ui-stroke);
    }

    .vt-toolbar-top .vt-toolbar-top-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .vt-toolbar-top .vt-toolbar-top-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .vt-toolbar-top .vt-toolbar-top-left .vt-toolbar-top-left-symbol {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .vt-toolbar-top .vt-toolbar-top-left .vt-toolbar-top-left-settings {
            display: flex;
            align-items: center;
            gap: 8px;
        }


@media only screen and (max-width: 400px) and (max-height: 350px) {
    .vt-toolbar-top {
        display: none !important;
    }

    #btnChrtFullScreen {
        display: flex !important;
        background: gainsboro;
    }
}

.vt-ctx-menu {
    position: absolute;
    display: none;
    z-index: 1002;
}

.vt-menu {
    padding-top: 0px;
    padding-bottom: 0px;
    min-width: 5rem;
}
/*.dropdown.vt-cmp {
    padding: 0rem;
}
.dropdown.vt-cmp > .vt-cmp {
    width: 100%;
    height: 100%;
}*/

.vt-cmp.vt-check {
    padding-left: 1rem !important;
}

    .vt-cmp.vt-check[data-checked="true"] {
        padding-left: 0.2rem !important;
    }

        .vt-cmp.vt-check[data-checked="true"]:before {
            font-size: 0.75rem;
            margin-right: 2px;
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f00c";
            box-sizing: border-box;
        }

.dropdown-submenu {
    position: relative;
    padding-top: 0px;
    padding-bottom: 0px;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 3px;
        top: 40%;
    }

    .dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu {
        display: flex;
        flex-direction: column;
        position: absolute !important;
        margin-top: -30px;
        left: 100%;
    }

@media (max-width: 992px) {
    .dropdown-menu {
        min-width: 15%;
    }

        .dropdown-menu .dropdown-submenu {
            width: auto;
        }

    .vt-section .vt-inside .vt-inside-item {
        flex: 0 0 96% !important;
    }
}


.vt-dropdown .vt-cmp {
    justify-content: unset !important;
}

.vt-ctx-menu .vt-cmp {
    justify-content: unset !important;
}

.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vt-cmp {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:4px;
    border-radius: 1px;
    cursor:pointer;
}

    .vt-cmp img {
        width: 20px;
        height: 20px;
        color: var(--font-color);
    }

    .vt-cmp svg {
        width: 20px;
        height: 20px;
        color: var(--font-color);
    }


    .vt-cmp.button-color {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .vt-cmp.button-color i {
            width: 16px;
            height: 16px;
        }

    .vt-cmp:hover {
        background: var(--mouse-over-color);
    }

    .vt-cmp.dropdown:hover {
        background: transparent;
    }


    .vt-cmp.button {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: var(--btn-border-radius);
        border: 2px solid transparent;
        white-space: nowrap;
        padding: 4px 8px;
        color: var(--button-text-color);
        /*transition: all .2s;*/
    }
        

        .vt-cmp.button:hover {
            cursor: pointer;
            background: var(--color-ui-card);
            /*border-color: var(--bg-active);*/
            /*color: var(--color-ui-icon-primary-active);*/
        }

        .vt-cmp.button.disabled, div.disabled .vt-cmp.button {
            cursor: default;
            background: unset;
        }

        .vt-cmp.button.selected {
            cursor: pointer;
            background: var(--bg-active);
            border-color: var(--bg-active);
            color: var(--color-ui-icon-primary-active);
        }

        .vt-cmp.button .icon-svg {
            background: var(--icon-color);
            content: '';
            display: inline-block;
            line-height: 16px;
            --svg-size: 16px;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkitmask-size: contain;
        }

        .vt-cmp.button:hover .icon-svg {
            /*background: var(--color-ui-icon-primary-active);*/
        }

        .vt-cmp.button.selected .icon-svg {
            background: var(--color-ui-icon-primary-active);
        }

        .vt-cmp.button.chart-action-button {
            padding: 0px !important;
        }

            .vt-cmp.button.chart-action-button .button-icon {
                line-height: 20px;
                width: 20px;
                height: 20px;
            }

.dropdown .vt-cmp.button {
}

    .dropdown .vt-cmp.button[data-bs-toggle="dropdown"]:not([drop-noicon])::after, .fake-dropdown:not([drop-noicon]) .vt-cmp.button::after {
        content: '';
        gap-md-64px display: block;
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        background-color: var(--icon-color);
        mask: url(/icons/dropdown-down.svg?v=MtlcBTZFIlU-qCYaPwjWhqvYcYM) no-repeat center / contain;
        -webkit-mask: url(/icons/dropdown-down.svg?v=MtlcBTZFIlU-qCYaPwjWhqvYcYM) no-repeat center / contain;
        transition: transform .2s;
    }

    .dropdown .vt-cmp.button:hover::after {
        /*background-color: var(--color-ui-icon-primary-active);*/
    }

    .dropdown .vt-cmp.button.show::after {
        transform: rotate(180deg);
    }

.vt-cmp-logo:hover {
}


/*
    .vt-dropdown .vt-cmp {
        padding-left: 0.8rem;
    }

    .vt-dropdown .vt-i:hover {
        background: var(--mouse-over-color);
    }*/

.vt-sections-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vt-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .vt-section.vt-section-hidable {
    }

    .vt-section .vt-header {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .vt-section .vt-inside {
        /*display: grid;
        grid-gap: 8px 24px;*/
        display: flex;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 8px 24px;
    }

        .vt-section .vt-inside.vt-inside-2-col {
            grid-template-columns: 1fr 1fr;
        }

        .vt-section .vt-inside .vt-inside-item {
            flex: 0 0 46%;
            gap: 8px;
        }

            .vt-section .vt-inside .vt-inside-item.fill-row {
                flex: 0 0 100%;
            }

    .vt-section .vt-header .vt-header-title {
        display: flex;
        gap: 4px;
        color: var(--font-color);
        font-size: 10px;
        font-weight: 700;
        line-height: 14px; /* 140% */
        text-transform: uppercase;
        align-items: center;
        white-space: nowrap;
        flex: 1 1 auto;
        cursor: pointer;
    }

    .vt-section.vt-section-hidable .vt-header .vt-header-title:before {
        content: '';
        display: block;
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        background-image: var(--header-drop-icon);
        transition: transform .2s;
    }

    .vt-section.vt-section-hidable.hide .vt-header .vt-header-title:before {
        transform: rotate(180deg);
    }

    .vt-section .vt-header .vt-header-title:not(.no-border):after {
        content: '';
        display: block;
        flex: 1 1 auto;
        width: 100%;
        height: 1px;
        background-color: var(--color-ui-stroke);
    }

    .vt-section .vt-header .vt-header-title hr {
        width: 100%;
        margin: 0px 4px;
        color: var(--color-ui-stroke);
    }

    .vt-section .vt-header .vt-header-title .badge-counter {
        font-size: 12px;
    }

    .vt-section.hide .vt-inside {
        display: none;
    }

.vt-cmp.button.selected {
    background: var(--bg-active);
    color: var(--color-typo-label-selected);
}

.vt-select.select-bg.selected {
    /*background: var(--color-typo-label-selected);*/
}

.vt-select.select-border-b.selected {
    border-bottom: 4px solid var(--bg-active);
}

.vt-separator {
    border: 1px solid var(--separator-color);
}

    .vt-separator:first-child, .vt-separator:last-child {
        display: none;
    }

.vt-floating-div {
    position: absolute;
    z-index: 1002;
    top: 0px;
    left: 0px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}

.vt-modal-div {
    position: fixed;
    z-index: 1001;
    top: 0px;
    left: 0px;
    background: var(--color-ui-background);
    /*border: 1px solid var(--color-ui-stroke);*/
    border: 1px solid var(--icon-color);
    box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.24);
    border-radius: 4px;
}

    .vt-modal-div .drag-move {
        align-self: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-right: 1px solid var(--border-color);
    }

    .vt-modal-div .vt-cmp {
        height: 36px;
        min-width: 36px;
        padding: 0px 8px;
    }

    .vt-modal-div .toolbar-divider-h {
        height: auto;
    }

.bordered {
    border: 1px solid var(--separator-color);
}

.bordered-top {
    border-top: 1px solid var(--separator-color);
}

.bordered-right {
    border-right: 1px solid var(--separator-color);
}

.table-responsive {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    overflow: auto;
    white-space: nowrap;
}

table {
    background: var(--color-ui-card);
    color: var(--font-color);
}
.table tbody {
    font-family: 'Roboto', monospace !important;
}

.tr-list:hover {
    background: var(--mouse-over-color);
}

.tr-list:hover {
    cursor: pointer;
}

.col-form-label {
    /*min-width: 90px;*/
    flex: 0 0 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-inside-item.vt-expand-label .col-form-label {
    flex: 0 0 50%;
}

input .form-control-prop {
    /*max-width: 300px;*/
}

button.jscolor {
    /*max-width: 100px;*/
    height: 24px;
}

select.form-control-prop {
    /*max-width: 120px;*/
}

input[type=checkbox].form-control-prop {
    width: 16px;
}

.modal:has(.modal-dynwidth){
    place-items: center;
    text-align: center;
}
.modal-dynwidth {
    max-width: none;
    min-width: min(75vw, 500px);
    width: auto !important;
    display: inline-block !important;
    text-align: initial !important;
}


.modal-draggable .modal-dialog {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.modal-draggable .modal-content {
    /*box-shadow: 5px 7px 8px rgba(0, 0, 0, 0.3);*/
}

.modal-draggable .modal-header {
    cursor: move;
}

.modal-draggable .modal-body {
    overflow-y: auto;
    max-height: 80vh;
}

.no-modal-bg .modal-backdrop {
    background: rgba(0,0,0,0.2);
}

.gutter {
    /*background-color: var(--separator-color);*/
    background-repeat: no-repeat;
    background-position: 50%;
}

    .gutter:hover {
        /*background-color: var(--mouse-over-color);*/
    }

    .gutter.gutter-vertical {
        /*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');*/
        cursor: row-resize;
    }

    .gutter.gutter-horizontal {
        /*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');*/
        cursor: col-resize;
    }

.vt-editable-div {
    align-items: center;
}

    .vt-editable-div > [contentEditable=true] {
        padding: 0.25rem 0.5rem;
        font-size: var(--font-size);
    }

chart-cmp.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    background-color: #fff !important;
}

.chart-preview {
    margin: 8px;
    padding: 4px;
    border-radius: 4px;
}

    .chart-preview.selected {
        border: 2px solid blue;
        font-weight: bold;
    }

#modConnections .modal-dialog {
    max-width: 650px !important;
}

#modConnections #divNoneSelected {
    position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    text-align: center;
}

#modConnections #cntList {
    /*border: 1px solid silver;
    border-radius: 8px;
    margin: 4px;*/
}

#modConnections #cntInfo {
    /*padding: 8px;*/
    min-height: 356px;
}

    #modConnections #cntInfo #cntProp {
        height: 200px;
    }

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 30px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        /*background: #888888;*/
        background: var(--bs-primary);
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.modal-loading {
    background-color: rgba(255,255,255,0.7);
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 100000;
    display: none;
}

.dot-loading {
    z-index: 100000;
    display: none;
}

    .modal-loading .modal-loading-inner, .dot-loading .dot-loading-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        font-size: 30px;
    }

.menu {
    background: var(--color-ui-card);
    padding-top: 16px;
    padding-bottom: 8px;
}

    .menu.show {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }

    .menu .menu-item {
        display: flex;
        align-items: center;
        flex-direction: row;
        cursor: pointer;
        padding-left: 8px;
        padding-right: 20px;
        min-width: 200px;
        padding-top: 2px;
        padding-bottom: 2px;
        gap: 8px;
        min-height: 32px;
    }

        .menu .menu-item.selected {
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            color: var(--font-color);
        }

        .menu .menu-item img {
            width: 16px;
            height: 16px;
        }

        .menu .menu-item:not(.btn):hover {
            background: var(--color-ui-stroke);
        }

.badge-feed, .badge-status {
    padding: 2px 4px 2px 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
}

#mainFeed .badge-feed {
    width: 160px;
    height: 24px;
}

    #mainFeed .badge-feed span {
        width: 116px;
    }

.badge-feed .div-img img, .badge-status .div-img img {
    width: 18px;
    height: 18px;
    border-radius: 24px;
    margin-right: 2px;
}

.badge-feed span, .badge-status span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
    /*text-align: left;*/
}

.badge-feed .icon-ellipse, .badge-status .icon-ellipse {
    margin-right: 8px;
}

.badge-feed .icong-svg, .badge-status .icong-svg {
    /*margin-right: 4px;*/
}

.badge-feed.bg-danger, .badge-status.bg-danger {
    background-color: var(--color-ui-badge-danger-fill) !important;
    color: var(--color-typo-badge);
}

.badge-feed.bg-warning, .badge-status.bg-warning {
    background-color: var(--color-ui-badge-warning-fill) !important;
    color: var(--color-typo-badge);
}

.badge-feed.bg-success, .badge-status.bg-success {
    background-color: var(--color-ui-badge-success-fill) !important;
    color: var(--color-typo-badge);
}

.badge-feed.bg-danger .icon-ellipse, .badge-status.bg-danger .icon-ellipse {
    background: var(--color-ui-state-off);
}

.badge-feed.bg-warning .icon-ellipse, .badge-status.bg-warning .icon-ellipse {
    background: var(--color-ui-state-alert);
}

.badge-feed.bg-success .icon-ellipse, .badge-status.bg-success .icon-ellipse {
    background: var(--color-ui-state-on);
}

#divTradeCopierStatus {
    width: 150px;
    cursor: pointer;
}

.vt-item-feed {
}

    .vt-item-feed .div-img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        overflow: hidden;
        flex: 0 0 auto;
    }

        .vt-item-feed .div-img img {
            width: 24px;
            height: 24px;
            border-radius: 2px;
        }

    .vt-item-feed span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 116px;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px; /* 133.333% */
        color: var(--color-typo-paragraph-default);
    }

    .vt-item-feed.selected span {
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 16px; /* 133.333% */
        color: var(--font-color) !important;
    }

    .vt-item-feed .status {
    }


.table-wrapper {
    overflow-x: auto;
}

.vt-table {
    white-space: nowrap;
    width: 100%;
    background: var(--color-ui-card);
    border-collapse: separate;
    border-spacing: 0px 8px;
    padding: 8px;
}

    .vt-table thead {
    }

        .vt-table thead tr th {
            padding-top: 4px;
            padding-bottom: 4px;
            font-size: 10px;
            font-weight: 700;
            line-height: 14px;
        }

            .vt-table thead tr th:not(:first-child) {
                padding-left: 8px;
                padding-right: 8px;
            }

            .vt-table thead tr th:first-child {
                padding-left: 16px;
            }

    .vt-table tbody tr {
    }

        

    .vt-table tbody {
        width: 100%;
    }

    .vt-table.sortable th:hover, .table.sortable th:hover {
        cursor: pointer;
    }

    .vt-table.clickable tbody tr:hover, .table.clickable tbody tr:hover {
        cursor: pointer;
    }

    .vt-table tbody tr:not(.selected):hover, .table.clickable tbody tr:not(.selected):hover {
        background-color: var(--color-ui-stroke);
    }

    .vt-table tbody tr.selected {
        background-color: var(--bg-active);
        color: var(--color-typo-label-selected);
        border-radius: 1px;
    }

    .vt-table tbody tr td:first-child {
        padding-left: 16px;
    }

    .vt-table tbody tr td {
        padding-top: 4px;
        padding-bottom: 4px;
    }

        .vt-table tbody tr td:not(:first-child) {
            padding-left: 8px;
            padding-right: 8px;
        }
.table th.text-end , .table td.text-end {
    padding-right: 8px;
}
.vt-table th[data-sort], .table th[data-sort] {
}
.vt-table .th-container, .table .th-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.vt-table th.text-center .th-container, .table th.text-center .th-container {
    justify-content: center;
}
.vt-table th.text-end .th-container, .table th.text-end .th-container {
    justify-content: end;
}

    .vt-table .th-column-order, .table .th-column-order {
        min-width: 16px;
    }
.vt-table th[data-sort] .th-column-order:before, .table th[data-sort] .th-column-order:before {
    display: block;
    content: "▲";
    content: "▲" / "";
    opacity: 0.2;
}
.vt-table th[data-sort='desc'] .th-column-order:before, .table th[data-sort='desc'] .th-column-order:before {
    content: "▼";
    content: "▼" / "";
    opacity: 0.8;
}
.vt-table th[data-sort='asc'] .th-column-order:before, .table th[data-sort='asc'] .th-column-order:before {
    content: "▲";
    content: "▲" / "";
    opacity: 0.8;
}

#chartSelectDropdown {
    position: absolute;
    min-width: 100px;
    min-height: 50px;
    width: 400px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--color-ui-stroke, #CECECE);
    background: var(--color-ui-panel, #ECECEC);
    box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.24);
}

    #chartSelectDropdown .header {
        padding: 8px 16px 8px 24px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        background: var(--color-ui-background);
    }

        #chartSelectDropdown .header h5 {
            padding: 0;
            margin: 0;
            font-weight: 700;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 18px; /* 112.5% */
        }

    #chartSelectDropdown .body {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #chartSelectDropdown .chart-selection-item {
        padding: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        #chartSelectDropdown .chart-selection-item.active, #chartSelectDropdown .chart-selection-item:hover {
            border-radius: var(--btn-border-radius);
            background: var(--color-ui-active-fill, #3374D5);
            cursor: pointer;
            color: var(--rgb-typo-paragraph-selected, #FFF) !important;
        }

            #chartSelectDropdown .chart-selection-item.active::after {
                content: url('/icons/check.svg?v=FmddKZS2xDFSrNyZ1F8-szrm9-k');
                width: 16px;
                height: 16px;
                align-self: center;
            }

        #chartSelectDropdown .chart-selection-item .icon-remove-circle-outline {
            width: 16px;
            height: 16px;
            background-color: var(--bs-body-color) !important;
        }

        #chartSelectDropdown .chart-selection-item.active .icon-remove-circle-outline, #chartSelectDropdown .chart-selection-item:hover .icon-remove-circle-outline {
            background-color: var(--rgb-typo-paragraph-selected, #FFF) !important;
        }

    #chartSelectDropdown .divider {
        height: 1px;
        align-self: stretch;
        background: var(--color-ui-stroke);
    }

        #chartSelectDropdown .divider:last-child {
            display: none;
        }

#cntWorkspace {
    background: var(--bs-body-bg);
    margin-bottom: 8px;
    margin-right: 8px;
}

    #cntWorkspace[layout-rows='1'][layout-cols='1'] .hide-single-chart {
        display: none !important;
    }
    #cntWorkspace.compact .badge-connection, #cntWorkspace.compact .data-chart-symbol-description{
        display: none !important;
    }
   
    #cntWorkspace.compact .data-chart-symbol-name {
        display: block;
    }
    #cntWorkspace:not(.compact) .data-chart-symbol-name {
        display: none;
    }
    #cntWorkspace:not(.compact) .data-chart-symbol-description {
        display: block;
    }
    #cntWorkspace:not([layout-rows='1'][layout-cols='1']) .data-chart-symbol-description {
        display: none !important;
    }
    #cntWorkspace:not([layout-rows='1'][layout-cols='1']) .data-chart-symbol-name {
        display: block !important;
    }

@media (max-width: 1400px) {

    #cntWorkspace .badge-connection, #cntWorkspace .data-chart-symbol-description {
        display: none !important;
    }
    #cntWorkspace .data-chart-symbol-name {
        display: block !important;
    }
}


.data-chart-flex-container {
}


.data-chart-group-container {
    /*border: 2px solid green;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#cntWorkspace.fullscreen .data-chart-flex-container.expanded {
    width: 100% !important;
    height: 100% !important;
}
#cntWorkspace.fullscreen .data-chart-flex-container:not(.expanded) {
    display: none !important;
}

#cntWorkspace.fullscreen .data-chart-flex-container.expanded .gutter {
    display: none !important;
}

#cntWorkspace.fullscreen .data-chart-flex-container.expanded .data-chart-group-container:not(.expanded) {
    display: none;
}

#cntWorkspace.fullscreen .data-chart-flex-container.expanded .data-chart-group-container.expanded {
    width: 100% !important;
    height: 100% !important;
}

.data-chart-container {
    border-radius: 6px;
    border: 2px solid var(--color-ui-stroke);
    overflow: hidden;
    display: none;
    flex-direction: column;
    height: 100%;
}

    .data-chart-container.active {
        display: flex;
    }

    .data-chart-container.selected {
        animation-name: selected;
        animation-duration: 750ms;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
    }

@keyframes selected {
    from {
        border: 2px solid var(--bg-active);
    }

    to {
        border: 2px solid var(--color-ui-stroke);
    }
}

.data-chart-container .data-chart-container-header {
    padding: 8px;
    border-bottom: 2px solid var(--color-ui-stroke);
    background: var(--color-ui-card);
    display: flex;
    justify-content: space-between;
    text-wrap: nowrap;
    min-height: 42px;
    align-items: center;
}

    .data-chart-container .data-chart-container-header .data-chart-container-header-left {
        display: flex;
        gap: 8px;
    }

    .data-chart-container .data-chart-container-header .data-chart-container-header-right {
        background: var(--color-ui-card);
        position: absolute;
        right: 0px;
        min-width: 100px;
    }

        .data-chart-container .data-chart-container-header .data-chart-container-header-right .data-chart-container-header-inner {
            margin-right: 8px;
            display: flex;
            justify-content: end;
            gap: 16px;
        }

    .data-chart-container .data-chart-container-header .data-chart-switch-label {
        color: var(--button-text-color);
    }


    .data-chart-container .data-chart-container-header .data-chart-selection {
        display: flex;
        padding: 2px 8px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: var(--btn-border-radius);
        border: 1px solid var(--color-ui-stroke);
        cursor: pointer;
        /*background: var(--color-ui-panel);*/
    }

    .data-chart-container .data-chart-container-header .chart-header-loading {
        --svg-size: 24px;
        align-self: center;
        margin-left: 8px;
    }

.data-chart-container.selected .data-chart-container-header, .data-chart-container.selected .data-chart-container-header .data-chart-container-header-right {
    background: var(--chart-header-selected-bg);
}

.data-chart-container .data-chart-symbol-name, .data-chart-container .data-chart-symbol-description, .data-chart-container .data-chart-time {
    color: var(--color-typo-paragraph-default);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

    .data-chart-container .data-chart-symbol-flags{
        align-self: start;
    }

    .data-chart-container .data-chart-feed {
        margin-left: 16px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }

.data-chart-feed .logo-connection {
    height: 100%;
    max-height: 16px;
}

.data-chart-container.selected .data-chart-symbol-name, .data-chart-container.selected .data-chart-symbol-description, .data-chart-container.selected .data-chart-time {
    font-weight: 600;
    color: var(--font-color) !important;
}

.data-chart-container .data-chart-container-body {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0px;
}

    .data-chart-container .data-chart-container-body .gutter {
        background-color: var(--color-ui-stroke);
    }

    .data-chart-container .data-chart-container-body .data-chart-container-inner-group {
        position: relative;
        flex: 1 1 auto;
        min-height: 0px;
        display: flex;
    }

    .data-chart-container .data-chart-container-body .data-chart-container-inner {
        position: relative;
        flex: 1 1 auto;
        min-height: 0px;
    }

    .data-chart-container .data-chart-container-body .data-chart-container-inner {
        background: var(--color-ui-background);
    }

        .data-chart-container .data-chart-container-body .data-chart-container-inner canvas {
            display: none;
        }

.data-chart-container.plotted .data-chart-container-body .data-chart-container-inner canvas {
    display: block;
}

.data-chart-container:not(.plotted) .data-chart-container-body .data-chart-container-inner .data-chart-msg {
    display: flex;
}

.data-chart-container .data-chart-container-footer {
    /*margin-top: 8px;*/
    border-top: 1px solid var(--color-ui-stroke);
    padding: 8px 16px;
    text-wrap: nowrap;
}

    .data-chart-container .data-chart-container-footer .data-chart-footer-left {
        display: flex;
        gap: 16px;
        align-items: center;
    }

.data-chart-container .toolbar-indicator-shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid transparent;
}

    .data-chart-container .toolbar-indicator-shortcut:hover {
        border: 1px solid var(--color-ui-stroke);
    }

    .data-chart-container .toolbar-indicator-shortcut.enabled .icon-led-outline {
        background-color: var(--color-ui-state-on);
        -webkit-mask-image: url(/icons/led.svg?v=brJeH4dAY6xo0mII0M1vwSFrR_w);
        mask-image: url(/icons/led.svg?v=brJeH4dAY6xo0mII0M1vwSFrR_w);
    }

.data-chart-msg {
    position: absolute;
    top: 50%;
    padding: 24px;
    transform: translate(-50%, -50%);
    left: 50%;
    display: none;
    flex-direction: column;
    gap: 16px;
    background: var(--color-ui-panel);
    border-radius: 8px;
    border: 1px solid var(--color-ui-stroke);
}

    .data-chart-msg .msg {
        font-size: 14px;
    }

    .data-chart-msg .symbol {
        align-self: center;
        border-radius: 64px;
        border: 1px solid var(--color-ui-stroke);
        padding: 8px;
    }

        .data-chart-msg .symbol .icon-svg {
            --svg-size: 32px;
        }

    .data-chart-msg.primary {
        /*border-color: var(--color-ui-fill-active);*/
    }

        .data-chart-msg.primary .symbol {
            /*border-color: var(--color-ui-fill-active);*/
        }

            .data-chart-msg.primary .symbol .icon-svg {
                background-color: var(--color-ui-fill-active);
            }

    .data-chart-msg.danger {
        /*border-color: var(--color-ui-danger);*/
    }

        .data-chart-msg.danger .symbol {
            /*border-color: var(--color-ui-danger);*/
        }

            .data-chart-msg.danger .symbol .icon-svg {
                background-color: var(--color-ui-danger);
            }

.data-switch {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .data-switch .data-switch-label {
        font-style: normal;
        font-weight: 600;
        display: flex;
        gap: 8px;
        align-items: center;
    }

.data-chart-switch {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .data-chart-switch .data-chart-switch-label {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
    }

.dropdown-menu {
    border-radius: 4px !important;
    background: var(--color-ui-panel) !important;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--color-ui-stroke);
    color: var(--font-color);
    padding: 0px !important;
    overflow: hidden;
}

    .dropdown-menu.vt-dropdown {
        display: none;
        flex-direction: column;
        overflow-y: auto;
        font-size: var(--font-size);
    }

        .dropdown-menu.vt-dropdown.show {
            display: flex;
        }

        .dropdown-menu.vt-dropdown .vt-dropdown-header {
            background: var(--color-ui-card);
            padding: 12px 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

            .dropdown-menu.vt-dropdown .vt-dropdown-header.vt-dropdown-header-sm {
            }

            .dropdown-menu.vt-dropdown .vt-dropdown-header .vt-dropdown-header-title {
                color: var(--font-color);
                font-family: Roboto;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 18px; /* 112.5% */
                white-space: nowrap;
                margin-left: 16px;
            }

            .dropdown-menu.vt-dropdown .vt-dropdown-header.vt-dropdown-header-sm .vt-dropdown-header-title {
                font-size: 14px !important;
                line-height: 18px !important; /* 128.571% */
                margin-left: 12px;
            }

            .dropdown-menu.vt-dropdown .vt-dropdown-header .vt-dropdown-header-close-button {
            }

                .dropdown-menu.vt-dropdown .vt-dropdown-header .vt-dropdown-header-close-button .icon-close {
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                    -webkitmask-size: contain;
                    line-height: 24px;
                    width: 24px;
                    height: 24px;
                    background-color: var(--icon-color);
                    cursor: pointer;
                }

        .dropdown-menu.vt-dropdown .vt-dropdown-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .dropdown-menu.vt-dropdown .vt-dropdown-body .vt-dropdown-body-sm {
            padding: 8px;
        }

        .dropdown-menu.vt-dropdown .vt-dropdown-footer {
            background: var(--color-ui-card);
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 8px;
        }

    .dropdown-menu .bottom-menu-button {
        background-color: var(--color-ui-background);
        height: 32px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-top: 1px solid var(--color-ui-stroke);
        padding: 0px 16px 0px 12px;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 133.333% */
    }

        .dropdown-menu .bottom-menu-button:hover {
            cursor: pointer;
            background-color: var(--color-ui-stroke);
            /*color: var(--color-ui-icon-primary-active);*/
        }

            .dropdown-menu .bottom-menu-button:hover .icon-svg {
                /*background-color: var(--color-ui-icon-primary-active) !important;*/
            }

    .dropdown-menu .vt-dropdown-item-button {
        border-radius: var(--btn-border-radius);
        padding: 4px 8px;
        font-size: 13px;
        white-space: nowrap;
        gap: 8px;
    }

/*    .dropdown-menu.checkable .vt-dropdown-item-button[data-checked] {
        padding-left: 28px !important;
    }

    .dropdown-menu.checkable .vt-dropdown-item-button[data-checked="true"] {
        padding-left: 8px !important;
        font-weight: bold;
    }

    .dropdown-menu .vt-dropdown-item-button[data-checked="true"]:before {
        margin-right: 8px;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f00c";
        box-sizing: border-box;
    }*/

    .dropdown-menu.checkable .vt-dropdown-item-button[data-checked] {
        padding-right: 28px !important;
    }

    .dropdown-menu.checkable .vt-dropdown-item-button[data-checked="true"] {
        padding-right: 8px !important;
        font-weight: bold;
    }

    .dropdown-menu .vt-dropdown-item-button[data-checked="true"]:after {
        margin-left: auto;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f00c";
        box-sizing: border-box;
    }

    .dropdown-menu .vt-dropdown-item-button:hover {
        cursor: pointer;
        background-color: var(--color-ui-stroke);
        /*color: var(--color-ui-icon-primary-active);*/
    }

.btn {
    /*border: 1px solid transparent;*/
    border-width: 1px;
    border-style: solid;
    padding: 8px 16px !important;
    text-align: center;
    font-size: var(--font-size);
    font-weight: 500;
    /*line-height: 16px;*/ /* 133.333% */
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 8px;
    border-radius: var(--btn-border-radius);
}

    .btn.btn-sm {
        padding: 4px 8px !important;
    }

    .btn .icon-svg {
        width: var(--svg-size);
        height: var(--svg-size);
    }

    .btn.btn-primary {
        background-color: var(--btn-primary-bg-color) !important;
        border-color: var(--btn-primary-border-color) !important;
        color: var(--btn-primary-text-color) !important;
    }

        .btn.btn-primary .icon-svg {
            background-color: var(--btn-primary-text-color) !important;
        }

        .btn.btn-primary:hover {
            background-color: var(--btn-primary-bg-color-hover) !important;
        }

    .btn.btn-outline-primary {
        background-color: transparent !important;
        border-color: rgba(var(--rgb-ui-btn-fill), var(--opacity-border-outline)) !important;
        color: inherit !important;
    }

        .btn.btn-outline-primary .icon-svg {
            background-color: var(--btn-primary-bg-color) !important;
        }

        .btn.btn-outline-primary:hover {
            /*border-width: 2px;*/
            background-color: var(--btn-primary-bg-color) !important;
            border-color: var(--btn-primary-border-color) !important;
            color: var(--btn-primary-text-color) !important;
        }

            .btn.btn-outline-primary:hover .icon-svg {
                /*border-width: 2px;*/
                background-color: var(--btn-primary-text-color) !important;
            }

    .btn.btn-secondary {
        background-color: var(--btn-secondary-bg-color) !important;
        border-color: var(--btn-secondary-border-color) !important;
        color: var(--btn-secondary-text-color) !important;
    }

        .btn.btn-secondary .icon-svg {
            background-color: var(--btn-secondary-text-color) !important;
        }

        .btn.btn-secondary:hover {
            /*border-width: 2px;*/
            opacity: 0.8;
            border-color: rgba(var(--rgb-ui-btn-fill), 0.7) !important;
        }

    .btn.btn-power {
        background-color: var(--color-ui-power-fill) !important;
        border-color: var(--color-ui-power-fill) !important;
        /*color: var(--color-typo-light) !important;*/
        color: #fff;
    }

        .btn.btn-power .icon-svg {
            background-color: var(--color-typo-light) !important;
        }

        .btn.btn-power:hover {
            background-color: var(--color-ui-power-fill-hover) !important;
        }

    .btn.btn-outline-power {
        background-color: transparent !important;
        border-color: var(--color-ui-power-fill) !important;
        color: var(--color-ui-power-fill) !important;
    }

        .btn.btn-outline-power .icon-svg {
            background-color: var(--color-ui-power-fill) !important;
        }

        .btn.btn-outline-power:hover {
            background-color: var(--color-ui-power-fill) !important;
            color: #fff !important;
        }

    .btn.btn-outline-danger {
        color: var(--color-ui-danger);
        border-color: var(--color-ui-danger);
    }

        .btn.btn-outline-danger:hover {
            color: var(--color-typo-light);
        }

    .btn.btn-table.btn-action {
        padding: 4px 6px !important;
        border-radius: var(--btn-border-radius);
        background: rgba(255, 140, 56, 0.20);
        color: rgba(255, 140, 56, 1);
        font-size: 12px;
        line-height: 14px;
        font-weight: 600;
        /*width: 36px;*/
        /*width: 85px;*/
    }

        .btn.btn-table.btn-action:hover {
            cursor: pointer;
            background: rgba(255, 140, 56, 0.35);
        }

.vt-cmp.icon-button {
    width: 24px;
    height: 24px;
    color: var(--font-color);
    --svg-size: 20px;
    align-content: center;
}

.vt-cmp.icon-favorite {
    width: 24px;
    height: 24px;
    color: var(--font-color);
    --svg-size: 20px;
    align-content: center;
}

.icon-button:hover, .icon-favorite:hover {
    cursor: pointer;
}

.icon-button:hover .icon-svg {
    background-color: var(--bg-active);
}

.icon-button.selected {
    /*background-color: var(--color-ui-state-on);*/
    background: var(--bg-active);
}

    .icon-button.selected .icon-svg {
        /*background-color: #FFF !important;*/
        background-color: var(--color-typo-label-selected) !important;
    }

.icon-favorite{
    padding: 1px;
    background: var(--color-ui-panel);
    border-radius: 24px;
}

.icon-favorite i {
    -webkit-mask-image: url(/icons/star_border.svg?v=EKuoXX4iV_jo7DltIO31HyfmPY4);
    mask-image: url(/icons/star_border.svg?v=EKuoXX4iV_jo7DltIO31HyfmPY4);
}

    .icon-favorite:hover {
        background: var(--color-ui-badge-warning-fill);
    }

        .icon-favorite:hover i {
            background: var(--color-ui-contrast-fill);
        }


    .icon-favorite.selected i {
        -webkit-mask-image: url(/icons/star.svg?v=dtes423yCsoqNHKwLkGyujx564c);
        mask-image: url(/icons/star.svg?v=dtes423yCsoqNHKwLkGyujx564c);
        background: var(--color-ui-contrast-fill) !important;
    }


.fw-114px {
    width: 114px;
}

.vt-timeframe-table {
    background-color: transparent !important;
    border-spacing: 4px !important;
    border-collapse: separate !important;
    margin: 8px;
}

.vt-timeframe-label {
    color: var(--font-color);
    font-size: 14px;
    line-height: 18px;
    padding-right: 8px;
}

.vt-timeframe-input {
    width: 56px;
    height: 32px;
    border: 1px solid var(--color-ui-stroke);
    background: var(--color-ui-background);
    text-align: center;
    border-radius: var(--btn-border-radius);
}

.vt-timeframe-input-placeholder {
    opacity: 0.4;
}

.vt-timeframe-btn {
    padding: 5px 8px;
    width: 56px;
    background: var(--color-ui-stroke);
    display: flex;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--btn-border-radius);
}


    .vt-timeframe-btn .icon-add-circle-outline {
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkitmask-size: contain;
        line-height: 14px;
        width: 14px;
        height: 14px;
        background-color: var(--icon-color);
    }

    .vt-timeframe-btn.selected {
        background-color: var(--color-ui-fill-active);
        color: var(--color-ui-icon-primary-active);
    }

    .vt-timeframe-btn:hover {
        background-color: var(--btn-primary-bg-color-hover);
        color: var(--btn-primary-text-color);
        cursor: pointer;
    }

        .vt-timeframe-btn:hover .icon-add-circle-outline {
            /*background-color: var(--color-ui-icon-primary-active) !important;*/
        }

.font-title {
    color: var(--color-typo-paragraph);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
}

.modal {
    overflow-x: initial !important;
    overflow-y: initial !important;
}

    .modal .modal-dialog {
    }

.modal-dialog .modal-content {
    border-radius: 4px !important;
    background: var(--color-ui-panel) !important;
    box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.24) !important;
    border: none !important;
    padding: 0px !important;
}

    .modal-dialog .modal-content .modal-header {
        background: var(--color-ui-background);
        padding: 12px 8px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        border: none !important;
        z-index: 9999;
    }

        .modal-dialog .modal-content .modal-header .modal-title {
            color: var(--color-typo-paragraph);
            font-size: 16px;
            font-weight: 700;
            line-height: 18px;
            white-space: nowrap;
            margin-left: 12px;
        }

        .modal-dialog .modal-content .modal-header .btn-close {
            margin: 0 !important;
            padding: 0 !important;
            height: 24px;
            width: 24px;
        }

    .modal-dialog .modal-content .modal-footer {
        background: var(--color-ui-background);
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none !important;
        padding: 0px 8px;
    }

    .modal-dialog .modal-content .modal-body {
        padding: 24px !important;
        max-height: 80vh;
        overflow: auto;
    }

.form-control, .form-select {
    border-radius: var(--btn-border-radius) !important;
    border: 1px solid var(--color-input-stroke) !important;
    border-width: var(--border-width) !important;
    background-color: var(--color-input-fill) !important;
    color: var(--font-color) !important;
    padding: 8px 12px !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}
.form-select {
    padding-right: 32px !important;
    background-image: var(--header-drop-icon);
}
    .form-control[disabled], .form-select[disabled]{
        opacity: 0.5;
    }

.form-control:focus, .form-control.focus {
    border-color: var(--color-input-fill-typing) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--rgb-input-fill-typing),.25) !important;
}

    .form-control[type=search] {
        background: var(--color-input-fill) url(/icons/search2.svg?v=MtlcBTZFIlU-qCYaPwjWhqvYcYM) no-repeat calc(100% - 12px) center !important;
        background-size: 20px !important;
        padding-right: 36px !important;
    }

    .form-control.form-control-sm, .form-select.form-select-sm {
        padding: 4px 6px 4px 6px !important;
        font-size: 12px;
        line-height: 14px;
    }

    .form-control.form-control-sm {
        padding: 4px 6px 4px 6px !important;
        font-size: 12px;
        line-height: 14px;
    }

    .form-select.form-select-sm {
        padding: 4px 24px 4px 6px !important;
        font-size: 12px;
        line-height: 14px;
    }

.form-control-color {
    border-radius: var(--btn-border-radius) !important;
    min-width: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border: 1px solid var(--color-input-stroke) !important;
    /*outline: 2px solid var(--color-ui-panel);
    outline-offset: -3px;*/
    -webkit-box-shadow: -2px -2px 0px 0px var(--color-ui-card) inset, 2px 2px 0px 0px var(--color-ui-card) inset;
    -moz-box-shadow: -2px -2px 0px 0px var(--color-ui-card) inset, 2px 2px 0px 0px var(--color-ui-card) inset;
    box-shadow: -2px -2px 0px 0px var(--color-ui-card) inset, 2px 2px 0px 0px var(--color-ui-card) inset;
}

.jscolor-border {
    background: var(--color-input-fill) !important;
    border: 1px solid var(--icon-color) !important;
}


.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    flex: 0 0 auto;
}
    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    /* The slider */
    .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-ui-toggle-off);
        -webkit-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
    }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 12px;
            width: 12px;
            left: 2px;
            bottom: 2px;
            background-color: var(--color-ui-toggle-controller-off);
            -webkit-transition: .15s ease-in-out;
            transition: .15s ease-in-out;
        }

    .switch input:checked + .slider {
        background-color: var(--color-ui-toggle-on);
    }

    .switch input:focus + .slider {
        box-shadow: 0 0 1px var(--color-ui-toggle-on);
    }

    .switch input:checked + .slider:before {
        -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
        transform: translateX(14px);
        background-color: var(--color-ui-toggle-controller-on);
    }
    /* Rounded sliders */
    .switch .slider.round {
        border-radius: 16px;
    }

        .switch .slider.round:before {
            border-radius: 50%;
        }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

.button-layout {
    line-height: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

    .button-layout i {
        background: var(--icon-color);
        content: '';
        display: inline-block;
        line-height: 100%;
        width: 100%;
        height: 100%;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkitmask-size: contain;
    }

    .button-layout:hover i {
        background: var(--bg-active);
    }


.indicator-dropdown-item {
    display: flex;
    gap: 8px;
}

.vt-select-simple {
    display: flex;
    gap: 8px;
}

    .vt-select-simple .vt-select-simple-item {
        padding: 5px 16px;
        background-color: var(--bg-active-10);
        color: var(--bg-active);
        border-radius: 20px;
        font-weight: 400;
        cursor: pointer;
    }

        .vt-select-simple .vt-select-simple-item:hover, .vt-select-simple .vt-select-simple-item.selected {
            background-color: var(--bg-active);
            color: var(--color-ui-icon-primary-active);
            font-weight: 600;
        }

.badge-counter {
    border-radius: 40px;
    background: var(--btn-primary-bg-color);
    color: var(--btn-primary-text-color);
    display: flex;
    padding: 1px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-style: normal;
    font-weight: 500;
}

    .badge-counter:empty {
        display: none;
    }

.vt-select-simple-2 {
    display: inline-flex;
    padding: 4px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-radius: calc(max(8px, var(--btn-border-radius)));
    background: var(--color-ui-background);
}

    .vt-select-simple-2 .vt-select-simple-2-item {
        display: flex;
        padding: 9px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: calc(max(4px, var(--btn-border-radius)));
        font-size: 14px;
        line-height: 16px; /* 114.286% */
        flex-grow: 1;
    }

        .vt-select-simple-2 .vt-select-simple-2-item.selected {
            background: var(--color-ui-card);
            font-weight: 600;
        }

        .vt-select-simple-2 .vt-select-simple-2-item:hover {
            cursor: pointer;
            background: var(--color-ui-card);
            font-weight: 600;
        }

        .vt-select-simple-2 .vt-select-simple-2-item .badge-counter {
            font-size: 12px;
            line-height: 14px; /* 116.667% */
            min-width: 24px;
        }

            .vt-select-simple-2 .vt-select-simple-2-item .badge-counter:empty {
                display: none;
            }

.vt-select-simple-v {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: stretch;
}

    .vt-select-simple-v .vt-select-simple-v-item {
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        opacity: 0.9;
        padding: 4px 8px;
        border-radius: var(--btn-border-radius);
        width: 100%;
    }

        .vt-select-simple-v .vt-select-simple-v-item:hover {
            cursor: pointer;
            font-weight: 600;
        }

        .vt-select-simple-v .vt-select-simple-v-item.selected {
            background: var(--color-ui-card);
            font-weight: 600;
        }

.vt-select-simple-h {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: stretch;
}

    .vt-select-simple-h .vt-select-simple-h-item {
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        padding: 4px 8px;
        border-radius: var(--btn-border-radius);
        width: 100%;
        align-self: center;
        text-wrap: nowrap;
    }

        .vt-select-simple-h .vt-select-simple-h-item:hover {
            cursor: pointer;
            font-weight: 600;
        }

        .vt-select-simple-h .vt-select-simple-h-item.selected {
            background: var(--color-ui-background);
            font-weight: 600;
        }

.trading-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    .trading-panel:not([mode=netting]) .hide-hedging {
        display: none !important;
    }

    .trading-panel[mode=netting] .hide-netting {
        display: none !important;
    }

    .trading-panel.trading-panel-chart {
        width: 172px;
        flex: 0 0 172px;
        border-left: 2px solid var(--color-ui-stroke);
    }

    .trading-panel.trading-panel-dom {
        border-top: 2px solid var(--color-ui-stroke);
    }

    .trading-panel::-webkit-scrollbar {
        /*width: 5px;
        height: 5px;*/
    }
    /*.trading-panel::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }*/

    /* Track */
    /*.trading-panel::-webkit-scrollbar-track {
        background-color: var(--color-ui-background);
    }*/

    /* Handle */
    /*.trading-panel::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
    }*/

    /* Handle on hover */
    /*.trading-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,1);
        }*/

    .trading-panel .trading-panel-title {
        background: var(--color-ui-background);
        color: var(--color-typo-light);
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
        display: flex;
        padding: 8px 8px;
        justify-content: space-between;
        align-items: center;
    }

        .trading-panel .trading-panel-title .trading-panel-title-actions {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

    .trading-panel .trading-panel-body {
        display: flex;
        flex-direction: column;
        /*gap: 16px;*/
        flex-grow: 1;
        text-wrap: nowrap;
    }
        .trading-panel .trading-panel-body #txtTradingSymb {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .trading-panel .trading-panel-body .trading-panel-body-top {
            padding: 8px 8px;
            border-bottom: 1px solid var(--color-ui-stroke);
        }

        .trading-panel .trading-panel-body .trading-panel-body-container {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 0px 8px;
            margin-top: 16px;
            /*margin-bottom: 16px;*/
        }

        .trading-panel .trading-panel-body .toolbar-shortcut-container {
            justify-content: center;
            align-items: center;
            text-align: center;
            align-self: center;
        }

            .trading-panel .trading-panel-body .toolbar-shortcut-container:not(:empty) {
                padding-top: 8px;
                margin-top: 16px;
            }

.trading-panel-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
}

.trading-panel.disabled .trading-panel-overlay {
    display: block;
    z-index: 1;
}

.trading-panel.disabled .trading-panel-body-container {
    opacity: 0.5;
}

.trading-panel .trading-panel-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.trading-panel .trading-panel-balance {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
}

    .trading-panel .trading-panel-balance.positive {
        color: var(--color-typo-paragraph-green) !important;
    }

    .trading-panel .trading-panel-balance.negative {
        color: var(--color-typo-paragraph-red) !important;
    }

    .trading-panel .trading-panel-balance.neutral {
    }


.trading-panel .trading-panel-pl, .trading-panel .trading-panel-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    padding: 8px;
    border-radius: var(--btn-border-radius);
    /*border: 1px solid var(--color-ui-stroke);*/
    background-color: var(--color-ui-neutral-fill);
    border: 1px solid transparent;
}

    .trading-panel .trading-panel-pl.positive, .trading-panel .trading-panel-qty.positive {
        color: var(--color-typo-paragraph-green);
        background-color: var(--color-ui-green-fill);
    }

    .trading-panel .trading-panel-pl.negative, .trading-panel .trading-panel-qty.negative {
        color: var(--color-typo-paragraph-red);
        background-color: var(--color-ui-red-fill);
    }
.trading-panel.trading-panel-dom .trading-panel-pl, .trading-panel.trading-panel-dom .trading-panel-qty {
    width: 100%;
}

.trading-panel .trading-panel-btn {
    display: flex;
    font-size: 14px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--btn-border-radius);
    border: none !important;
    transition: opacity 0.7s ease;
    background: var(--color-ui-stroke);
}
    .trading-panel .trading-panel-btn.active {
        opacity: 0.5 !important;
    }
    .trading-panel.trading-panel-dom .trading-panel-btn {
        width: 100%;
    }

    .trading-panel .trading-panel-btn:hover {
        cursor: pointer;
        opacity: 0.9;
    }

    .trading-panel .trading-panel-btn.buy {
        background-color: var(--color-ui-btn-buy-fill);
        /*color: var(--color-typo-light);*/
        color: #fff;
    }
    .trading-panel[side='sell'] .trading-panel-btn.buy{
        opacity: 0.5;
    }

    .trading-panel .trading-panel-btn.sell {
        background-color: var(--color-ui-btn-sell-fill);
        /*color: var(--color-typo-light);*/
        color: #fff;
    }
    .trading-panel[side='buy'] .trading-panel-btn.sell {
        opacity: 0.5;
    }

.trading-panel[data-place='sl-tp'][side='buy'] .trading-panel-btn.buy[data-sl-tp='close'], .trading-panel[data-place='sl-tp'][side='sell'] .trading-panel-btn.sell[data-sl-tp='close'] {
    background-color: var(--color-ui-power-fill);
}
.trading-panel[data-place='sl-tp'][side='buy'] .trading-panel-btn.buy[data-sl-tp='sl'], .trading-panel[data-place='sl-tp'][side='sell'] .trading-panel-btn.sell[data-sl-tp='sl'] {
    background-color: var(--color-ui-btn-sl-fill);
}
.trading-panel[data-place='sl-tp'][side='buy'] .trading-panel-btn.buy[data-sl-tp='tp'], .trading-panel[data-place='sl-tp'][side='sell'] .trading-panel-btn.sell[data-sl-tp='tp'] {
    background-color: var(--color-ui-btn-tp-fill);
}

.trading-panel .trading-panel-btn-label {
    color: var(--color-typo-paragraph-default);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px; /* 116.667% */
    text-transform: uppercase;
}

#cntWorkspace:not([layout-rows='1']) #cntTradingPnl[data-style='basic']:not(.expanded) .trading-panel-account [data-compact='false'] {
    display: none !important;
}

.trading-panel.trading-panel-compact {
    border-left: 2px solid var(--color-ui-stroke);
}

#cntTradingPnl[data-style='basic'][data-mode='multi-click']:not(.expanded) .trading-panel.trading-panel-compact {
    width: 280px;
}
#cntTradingPnl[data-style='basic'][data-mode='one-click']:not(.expanded) .trading-panel.trading-panel-compact {
    width: 240px;
}

#cntTradingPnl .trading-panel:not([data-place='sl-tp']) .show-sl-tp{
    display: none;
}
#cntTradingPnl .trading-panel[data-place='sl-tp'] .buy .hide-sl-tp, #cntTradingPnl .trading-panel[data-place='sl-tp'] .sell .hide-sl-tp {
    display: none;
}

#cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .trading-panel.trading-panel-compact {
    width: 175px;
}

#cntTradingPnl .trading-panel.trading-panel-compact .show-compact {
    display: none;
}
#cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .trading-panel.trading-panel-compact .hide-compact {
    display: none;
}
#cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .trading-panel.trading-panel-compact .show-compact {
    display: block;
}
html:not([mobile]) #cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .form-control {
    padding: 6px !important;
    font-size: 13px;
    /*line-height: 14px;*/
}
html:not([mobile]) #cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .form-select {
    padding: 6px 24px 6px 6px !important;
    font-size: 13px;
    /*line-height: 14px;*/
}

html:not([mobile]) #cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .icon-svg {
    width: var(--svg-size) !important;
    height: var(--svg-size) !important;
    line-height: var(--svg-size) !important;
}

html:not([mobile]) #cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .btn, html:not([mobile]) #cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .trading-panel-btn {
    padding: 6px !important;
}

#cntTradingPnl[data-style='basic'][data-mode='one-click-compact']:not(.expanded) .vt-select-simple-2 .vt-select-simple-2-item{
    padding: 8px !important;
    font-size: 13px;
}

.trading-panel[data-mode='one-click-compact']:not(.expanded) .trading-panel-title{
    font-size: 13px;
}
.trading-panel[data-mode='one-click-compact']:not(.expanded) .trading-panel-title-actions {
    gap: 4px;
}


.trading-panel.trading-panel-compact .trading-panel-selector-side {
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    background: var(--color-ui-background);
    padding: 2px;
    gap: 2px;
}

.trading-panel.trading-panel-compact .trading-panel-btn-selector {
    flex-grow: 1;
    border: none !important;
    border-radius: 2px 0px 0px 2px;
    height: 56px;
    position: relative;
    opacity: 0.6;
}
        .trading-panel.trading-panel-compact .trading-panel-btn-selector .trading-panel-btn-selector-inner {
            position: absolute;
            display: flex;
            /*padding: 9px 12px 9px 12px;*/
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 2px;
            top: 9px;
            color: var(--color-typo-light) !important;
        }

        .trading-panel.trading-panel-compact .trading-panel-btn-selector.buy .trading-panel-btn-selector-inner {
            left: 9px;
            text-align: right;
        }

        .trading-panel.trading-panel-compact .trading-panel-btn-selector.sell .trading-panel-btn-selector-inner {
            align-items: flex-end;
            right: 9px;
        }

        .trading-panel.trading-panel-compact .trading-panel-btn-selector.buy {
            background-color: var(--color-ui-btn-buy-fill);
        }

        .trading-panel.trading-panel-compact .trading-panel-btn-selector.sell {
            background-color: var(--color-ui-btn-sell-fill);
        }

    .trading-panel.trading-panel-compact .trading-panel-input-container{
        gap: 8px;
    }

.trading-panel.trading-panel-compact #inpTradingQtyMode, .trading-panel.trading-panel-compact #inpTradingQtyValue {
    grid-column: auto / span 6;
}

.trading-panel.trading-panel-compact #inpOrderPrice, .trading-panel.trading-panel-compact #btnSelectorCancel {
    grid-column: auto / span 12;
}

    .trading-panel.trading-panel-compact .trading-panel-brackets-settings {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

.trading-panel[data-mode='one-click-compact'].trading-panel-compact .trading-panel-brackets-settings {
    gap: 8px;
}

.trading-panel.trading-panel-compact .trading-panel-brackets-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
}

.trading-panel[data-mode='one-click-compact'].trading-panel-compact .trading-panel-brackets-row {
    gap: 6px;
}

    .trading-panel.trading-panel-compact .trading-panel-brackets-left {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        max-width: 106px;
    }

    .trading-panel.trading-panel-compact .trading-panel-brackets-center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
    }

    .trading-panel.trading-panel-compact .trading-panel-brackets-right {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        max-width: 106px;
    }

    .trading-panel.trading-panel-compact .trading-panel-brackets-inputs {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px;
        border-radius: calc(max(4px, var(--btn-border-radius)));
        border: 1px solid var(--color-ui-stroke);
        background: var(--color-ui-panel);
    }

.trading-panel[data-mode='one-click-compact'].trading-panel-compact .trading-panel-brackets-inputs {
    gap: 4px;
    padding: 0px !important;
    border: 0px !important;
}

.trading-panel.trading-panel-compact {

}

.trading-panel.trading-panel-compact[side='buy'] .trading-panel-btn-selector.buy {
    opacity: 1;
}

.trading-panel.trading-panel-compact[side='sell'] .trading-panel-btn-selector.sell {
    opacity: 1;
}

.trading-panel.trading-panel-compact[side] .trading-panel-btn {
    color: var(--color-typo-light);
}

    .trading-panel.trading-panel-compact:has(.trading-panel-selector-side)[side='buy'] .trading-panel-btn, .trading-panel.trading-panel-compact[side] .trading-panel-btn[force='power'] {
        background-color: var(--color-ui-power-fill);
        opacity: 1;
    }

    .trading-panel.trading-panel-compact:has(.trading-panel-selector-side)[side='buy'] .trading-panel-btn, .trading-panel.trading-panel-compact[side] .trading-panel-btn[force='gain'] {
        background-color: var(--color-ui-btn-buy-fill);
        opacity: 1;
    }

    .trading-panel.trading-panel-compact:has(.trading-panel-selector-side)[side='sell'] .trading-panel-btn, .trading-panel.trading-panel-compact[side] .trading-panel-btn[force='loss'] {
        background-color: var(--color-ui-btn-sell-fill);
        opacity: 1;
    }

    .trading-panel.trading-panel-compact .trading-panel-account {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: normal;
    }

        .trading-panel.trading-panel-compact .trading-panel-account .flex-row {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

/*#cntTradingPnl[data-style='basic'][data-mode='one-click'] #btnSelectorCancel.disabled{
    display: none !important;
}
*/
.ts-panel {
    display: flex; /*
    border: 1px solid red;*/
    min-width: 150px;
    flex-direction: column;
}

    .ts-panel .ts-panel-title {
        background: var(--color-ui-background);
        color: var(--color-typo-light);
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
        display: flex;
        padding: 5px 12px 5px 16px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-ui-stroke);
        flex: 0 0 auto;
    }

    .ts-panel canvas {
        /*background-color:red;*/
        /*image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: pixelated;
        image-rendering: crisp-edges;*/
    }

    .ts-panel .ts-panel-body {
        flex: 1 0 auto;
    }

canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.dom-panel {
    display: flex;
    /*border: 1px solid red;*/
    min-width: 220px;
    flex-direction: column;
    height: 100%;
    flex: 1 0 auto;
    position: relative;
}

    .dom-panel .dom-panel-title {
        background: var(--color-ui-background);
        color: var(--color-typo-light);
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
        display: flex;
        padding: 5px 12px 5px 16px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-ui-stroke);
        flex: 0 0 auto;
    }

    .dom-panel canvas {
    }

    .dom-panel .dom-panel-body {
        flex: 1 0 0;
        position: relative;
        overflow: hidden;
        /*border: 1px solid yellow;*/
    }

    .dom-panel .dom-panel-footer {
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
        border-top: 1px solid var(--color-ui-stroke);
        padding: 5px 8px 5px 8px;
    }

        .dom-panel .dom-panel-footer #domTradingQty {
            max-width: 80px;
            width: 100%;
        }

#txtOpenPl, #txtDailyPl, #txtOpenPos, #txtOpenPosLong, #txtOpenPosShort {
    font-weight: 600;
}

#txtTradingSymb {
    text-align: center;
}

#modPropInd .modal-dialog {
    max-width: 600px;
}

#modSymbols {
}

#modSymbolsSpinner{
    display: none;
}

    #modSymbolsSpinner[data-watchlist="true"], #modSymbolsSpinner[data-searching="true"], #modSymbolsSpinner[data-loading="true"] {
        display: block;
    }


#modSymbols .modal-content {
    /*max-height: 90vh;*/
}

    #modSymbols .table-wrapper {
        overflow-y: auto;
        max-height: 78vh;
    }

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--color-ui-scroll);
}

::-webkit-scrollbar-track {
    background-color: var(--color-ui-scroll);
}

::-webkit-scrollbar-thumb {
    background: var(--color-ui-scroll-fill);
    border-radius: 8px;
    border: 1px solid rgb(var(--rgb-ui-scroll-border), 0.5);
}

    ::-webkit-scrollbar-thumb:hover {
        /*background: var(--color-ui-scroll-fill-hover);*/
        background: rgba(var(--rgb-ui-scroll-fill-active), 0.5);
    }

    ::-webkit-scrollbar-thumb:active {
        background: var(--color-ui-scroll-fill-active);
    }


.table {
    /*color: rgb(var(--bg-light-rgb)) !important;*/
    border-color: var(--color-ui-stroke) !important;
}

    .table thead {
        border: 1px solid var(--color-ui-stroke) !important;
    }

.table {
    background: transparent !important;
    border: 1px solid rgba(var(--rgb-input-stroke), 0.2);
}

    .table thead {
        background-color: var(--trading-account-header) !important;
        color: var(--color-typo-light);
        border: 1px !important;
    }

        .table thead th {
            padding: 8px;
            border-color: var(--color-ui-stroke) !important;
            white-space: nowrap;
            /*border-bottom: 1px solid var(--color-ui-stroke) !important;*/
        }
    .table.table-sm thead th {
        padding: 6px;
    }

    .table tbody {
        background: transparent !important;
        /*color: var(--color-typo-light);*/
        color: var(--color-typo-paragraph);
    }

    .table td {
        leading-trim: both;
        text-edge: cap;
        font-size: 12px;
        font-weight: 400;
        /*line-height: 14px;*/ /* 116.667% */
        /*border-right: 1px solid var(--color-ui-stroke);
            border-left: 1px solid var(--color-ui-stroke);*/
    }

        .table td:not(:last-child) {
            border-right: 1px solid rgba(var(--rgb-ui-stroke), 0.2);
        }

        .table tr.selectable{
            cursor: pointer;
        }
        .table tr.selected{
            background: var(--color-ui-fill-active);
            color: var(--color-typo-label-selected);
        }

.table.table-report {
    margin-bottom: 0;
    background: var(--color-ui-card) !important;
}

    .table.table-report > thead > tr > th {
        background-color: var(--color-ui-panel) !important;
        border-bottom: 1px solid var(--color-ui-stroke) !important;
        color: var(--color-typo-secondary);
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        padding: 8px !important;
        text-wrap: nowrap
    }
    .table.table-sm.table-report > thead > tr > th {
        font-size: 12px;
        padding: 8px
    }


    .table.table-report > tbody > tr > td {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        padding: 8px
    }

    .table.table-sm.table-report > tbody > tr > td {
        font-size: 11.5px;
        font-weight: 400;
    }

#cntWidgets {
    display: none;
    --rows-number: 0;
    grid-template-rows: repeat(var(--rows-number), 1fr);
    margin: 0px 8px 8px 0px;
    width: max(472px, 35vw);
    max-width: 650px;
}

#cntWidgets:has(.widget-container.show){
    display: grid;
    gap: 8px;
}

    #cntWidgets.half-row{
        --rows-number: 2;
    }

    #cntWidgets:has(.widget-container.show.full-expand) {
        min-width: none !important;
        max-width: none !important;
        position: absolute;
        width: 100%;
        height: 100%;
    }

.widget-container {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    background: var(--bg-workspace);
    border-radius: 6px;
    border: 2px solid var(--color-ui-stroke);
    grid-row: auto / span 1;
    overflow: hidden;
}

.widget-container.show{
    display: flex;
}

.watchlist-widget-container {
    position: relative;
}

    .watchlist-widget-container.full-expand {
        min-width: none !important;
        max-width: none !important;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .watchlist-widget-container .watchlist-widget-container-inner {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

        .watchlist-widget-container .watchlist-widget-container-inner.hide {
            display: none;
        }

    .watchlist-widget-container .watchlist-widget-header {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
    }

    .watchlist-widget-container .watchlist-widget-title {
        color: var(--trading-panel-title-color);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
    }

    .watchlist-widget-container #tlbWatchlistPreset{
        padding: 0px 4px;
    }
    .watchlist-widget-container #tblWatchlist:not(.editable) .edit-only {
        display: none;
    }


#tblWatchlist td{
    align-content: center;
    text-wrap: nowrap;
}
#tblWatchlist th:first-child {
    padding-left: 56px;
}
.watchlist-symbol {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .watchlist-symbol .watchlist-symbol-inner {
        padding-left: 8px;
    }
    .watchlist-symbol .watchlist-symbol-inner, .watchlist-symbol .watchlist-symbol-name {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

.trading-widget-container.full-expand {
    min-width: none !important;
    max-width: none !important;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.trading-widget-container .trading-widget-container-inner {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
    .trading-widget-container .trading-widget-container-inner.hide{
        display: none;
    }

#cntWidgets.half-row .trading-widget-container:not(.full-expand) .trading-panel-status-divider, #cntWidgets.half-row .trading-widget-container:not(.full-expand) .trading-panel-status-account-detail {
    display: none;
}

#cntWidgets.half-row .trading-widget-container:not(.full-expand):has(.trading-account.selected) .trading-panel-status-account-container {
    display: none;
}

#cntWidgets.half-row .trading-widget-container:has(.trading-account.selected) .trading-panel-status-account-detail {
    display: flex;
}

    .trading-widget-container .trading-panel-status-account-container {
        min-height: 150px;
        max-height: max(35vh, 200px);
        position: relative;
    }

    .trading-widget-container .trading-panel-status-header {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-ui-stroke);
    }

    .trading-widget-container .trading-panel-status-title {
        color: var(--trading-panel-title-color);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; /* 128.571% */
        padding: 2px;
    }

    .trading-widget-container .trading-panel-status-divider {
        height: 2px;
        background-color: var(--color-ui-stroke);
        flex: 0 0 auto;
    }

    .trading-widget-container .trading-panel-status-section {
        padding: 16px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 16px;
        position: relative;
    }

    .trading-widget-container #accountContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        overflow-y: auto;   
        width:100%;
        height:100%;
        padding: 16px;
    }

    .trading-widget-container div[data-group='tradingWidgetTab'][data-rule='tab'] {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .trading-widget-container #pendingOrdersTab {
        position:absolute;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        padding: 0px 16px 16px 16px;
    }

    .trading-widget-container #portfolioTab {
        position: absolute;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        padding: 0px 16px 16px 16px;
    }

    .trading-widget-container .trading-account {
        border-radius: calc(max(6px, var(--btn-border-radius)));
        border: 1px solid var(--color-ui-stroke);
        border-width: var(--border-width);
        /*background: #FFF;*/
        width: 180px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

        .trading-widget-container:has(.trading-account.selected) .trading-account:not(.selected) {
            opacity: 0.3;
        }

.trading-widget-container .trading-account.selected {
    outline: 1px solid var(--color-ui-stroke);
}

.trading-widget-container .trading-account.selected .trading-account-header {
    background-color: var(--color-ui-icon-primary-active);
    /*outline: 2px solid var(--color-ui-stroke);*/
}

        .trading-widget-container .trading-account .trading-account-header {
            padding: 4px 8px;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px; /* 128.571% */
            text-align: center;
            background-color: var(--trading-account-header);
            border-bottom: 1px solid var(--color-ui-stroke);
            border-width: var(--border-width);
            color: var(--color-typo-light);
        }

        .trading-widget-container .trading-account .trading-account-body {
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
            cursor: pointer;
        }
        .trading-widget-container .trading-account .trading-account-custom-actions {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            gap: 8px;
        }
        .trading-widget-container .trading-account .trading-account-row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 8px;
            color: var(--color-typo-paragraph);
            font-size: 12px;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
        }

            .trading-widget-container .trading-account .trading-account-row .positive {
                color: var(--color-typo-paragraph-green) !important;
            }

            .trading-widget-container .trading-account .trading-account-row .negative {
                color: var(--color-typo-paragraph-red) !important;
            }

            .trading-widget-container .trading-account .trading-account-row .neutral {
            }

            .trading-widget-container .trading-account .trading-account-row .value {
                font-size: 12px;
                font-weight: 700 !important;
                line-height: 16px;
            }

            .trading-widget-container .trading-account .trading-account-row .um {
                font-size: 12px;
                font-weight: 700;
                line-height: 16px;
            }

    .trading-widget-container:not(.full-expand) #tabAccountReport [class*="g-col-"]{
        grid-column: auto / span 12 !important;
    }

    .trading-widget-container .trading-panel-status-footer {
        background-color: var(--color-ui-background);
        padding: 8px;
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .trading-widget-container #cntTradeCopierGroups {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*justify-content: center;*/
        gap: 8px;
        overflow-y: auto;
        width: 100%;
        height: 100%;
        padding: 16px;
    }

    .trading-widget-container .trade-copier-group {
        border-radius: 6px;
        border: 1px solid var(--color-ui-stroke);
        border-width: var(--border-width);
        /*background: #FFF;*/
        width: 172px;
        overflow: hidden;
        display: flex;
        cursor: pointer;
        flex-direction: column;
    }
        .trading-widget-container .trade-copier-group.selected{
            border-color: var(--bg-active);
            /*border-width: 2px;*/
        }

        .trading-widget-container .trade-copier-group .trade-copier-group-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: center;
            justify-self: center;
            gap: 16px;
            padding: 8px;
            flex-grow: 1;
            text-align: center;
        }
            .trading-widget-container .trade-copier-group .trade-copier-group-empty .icon-svg{
                --svg-size: 32px;
            }

        .trading-widget-container .trade-copier-group .trade-copier-group-header {
            padding: 4px 8px;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; /* 128.571% */
            text-align: center;
            background-color: var(--trading-account-header);
            border-bottom: 1px solid var(--color-ui-stroke);
            border-width: var(--border-width);
            color: var(--color-typo-light);
        }

        .trading-widget-container .trade-copier-group .trade-copier-group-body {
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .trading-widget-container .trade-copier-group .trade-copier-group-row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 8px;
            color: var(--color-typo-paragraph);
            font-size: 12px;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
        }
#cntTradeCopierGroupDetail{
    padding: 16px;
    gap: 24px;
}
    #cntTradeCopierGroupDetail .btn{
        min-width: 100px;
    }
    #cntTradeCopierGroupDetail tr[data-connection-id][data-account-id] .switch input:not(:checked) + .slider {
        background-color: rgb(var(--bs-warning-rgb));
    }

.td-open-pl .value {
    font-weight: 600;
}

.positive, .td-open-pl.positive, td.positive {
    color: var(--color-typo-paragraph-green) !important;
}

.negative, .td-open-pl.negative, td.negative {
    color: var(--color-typo-paragraph-red) !important;
}

.td-open-pl.neutral {
}

.user-config-label {
    font-size: 14px;
    /*font-weight:600;*/
}

.user-config-item {
}

    .user-config-item.selected {
    }

        .user-config-item.selected .user-config-label {
            font-weight: bold;
            color: var(--bg-active);
        }

.user-config-label:not(:has(input)) {
    padding: 6px;
}

#bodyUserConfig {
    max-height: 70vh;
    overflow-y: auto;
}



#modSymbols .modal-body {
    min-height: 10vh;
}

#indList {
    /*max-height: 70vh;*/
    overflow-y: auto;
}

 #cntTradingPnl {
    display: flex;
}


.spinner {
    width: 22px;
    height: 22px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkitmask-size: contain;
    background-color: dodgerblue;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*TABLET */
@media only screen and (max-width: 1200px) {

    .vt-toolbar-top .vt-cmp.button:has(i) span {
        display: none !important;
    }

    #cntWorkspace.d-mobile-none {
        display: none !important;
    }

    #cntWidgets {
        width: 100% !important;
        max-width: unset !important;
        margin:0px;
    }

    .vt-cmp.button .icon-svg {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
}

.badge-connection {
    background-color: red;
    display: flex;
    gap: 8px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 14px;
    align-items: center;
    border-radius: 20px;
    color: var(--color-typo-badge);
}

    .badge-connection.s0, .badge-connection.s3 {
        background-color: var(--color-ui-badge-danger-fill) !important;
    }

    .badge-connection.s1 {
        background-color: var(--color-ui-badge-warning-fill) !important;
    }

    .badge-connection.s2 {
        background-color: var(--color-ui-badge-success-fill) !important;
    }

    .badge-connection .icon-ellipse.s0, .badge-connection .icon-ellipse.s3 {
        background-color: var(--color-ui-state-off);
    }

    .badge-connection .icon-ellipse.s1 {
        background-color: var(--color-ui-state-alert);
    }

    .badge-connection .icon-ellipse.s2 {
        background-color: var(--color-ui-state-on);
    }

.toolbox-color-line {
    height: 4px;
    width: 20px;
}

#mdlOcoStrategy #cntInpBracket {
    border: 1px solid var(--color-ui-stroke);
    padding: 16px;
}

#mdlOcoStrategy .vt-section {
    min-height: 75px;
}

    #mdlOcoStrategy .vt-section .vt-inside {
        flex-direction: column;
        padding:
    }

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
}

div.disabled > .overlay {
    display: block;
    z-index: 1;
}

div.disabled > :not(.overlay) {
    opacity: 0.5;
}

.table-search-symbols {
    background: transparent !important;
}

#tblPosition {
    text-wrap: nowrap;
}

#modShortAnn .icon-svg {
    --svg-size: 20px;
}

#divLogin {
    max-width: 512px;
}

    #divLogin .card {
        background: var(--color-ui-background);
        border-radius: 4px !important;
        /*box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.24) !important;*/
        padding: 0px !important;
        border: 1px solid var(--color-ui-stroke);
    }

        #divLogin .card .card-header {
            background: var(--color-ui-background);
            padding: 12px 8px !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            border: none !important;
        }

        #divLogin .card .card-body {
            background: var(--color-ui-panel) !important;
        }

.form-group {
    margin-bottom: 1.5rem;
}

#modConfirm p{
    padding: 24px;
    text-align: center;
}

html:not([mobile]) .app-show{
    display: none !important;
}

#modWelcome .logo{
    margin-left: 12px;
}

#modWelcome p, #modWelcome a{
    font-size: 1.10em;
}

#tblWatchlist:not([data-last=true]) [data-col="last"]{
    display: none
}
#tblWatchlist:not([data-bid=true]) [data-col="bid"] {
    display: none
}
#tblWatchlist:not([data-ask=true]) [data-col="ask"] {
    display: none
}
#tblWatchlist:not([data-spread=true]) [data-col="spread"] {
    display: none
}
#tblWatchlist:not([data-daily=true]) [data-col="daily"] {
    display: none
}
#tblWatchlist:not([data-volume=true]) [data-col="volume"] {
    display: none
}


/*SM*/
@media (min-width: 576px) {

    .gap-sm-4px {
        gap: 4px;
    }

    .gap-sm-6px {
        gap: 6px;
    }

    .gap-sm-8px {
        gap: 8px;
    }

    .gap-sm-16px {
        gap: 16px;
    }

    .gap-sm-24px {
        gap: 24px;
    }

    .gap-sm-32px {
        gap: 32px;
    }

    .gap-sm-64px {
        gap: 64px;
    }
}

/*MD*/
@media (min-width: 768px) {
    .gap-md-4px {
        gap: 4px;
    }

    .gap-md-6px {
        gap: 6px;
    }

    .gap-md-8px {
        gap: 8px;
    }

    .gap-md-16px {
        gap: 16px;
    }

    .gap-md-24px {
        gap: 24px;
    }

    .gap-md-32px {
        gap: 32px;
    }

    .gap-md-64px {
        gap: 64px;
    }
}

/*LG*/
@media (min-width: 992px) {
    .gap-lg-4px {
        gap: 4px;
    }

    .gap-lg-6px {
        gap: 6px;
    }

    .gap-lg-8px {
        gap: 8px;
    }

    .gap-lg-16px {
        gap: 16px;
    }

    .gap-lg-24px {
        gap: 24px;
    }

    .gap-lg-32px {
        gap: 32px;
    }

    .gap-lg-64px {
        gap: 64px;
    }
}

/*XL*/
@media (min-width: 1200px) {
    .gap-xl-4px {
        gap: 4px;
    }

    .gap-xl-6px {
        gap: 6px;
    }

    .gap-xl-8px {
        gap: 8px;
    }

    .gap-xl-16px {
        gap: 16px;
    }

    .gap-xl-24px {
        gap: 24px;
    }

    .gap-xl-32px {
        gap: 32px;
    }

    .gap-xl-64px {
        gap: 64px;
    }
}

/*XXL*/
@media (min-width: 1400px) {
    .gap-xxl-4px {
        gap: 4px;
    }

    .gap-xxl-6px {
        gap: 6px;
    }

    .gap-xxl-8px {
        gap: 8px;
    }

    .gap-xxl-16px {
        gap: 16px;
    }

    .gap-xxl-24px {
        gap: 24px;
    }

    .gap-xxl-32px {
        gap: 32px;
    }

    .gap-xxl-64px {
        gap: 64px;
    }
}

.symbol-flags {
    align-self: start;
    display: flex;
}
.symbol-flags img{
    border: 2px solid var(--color-ui-stroke);
    border-radius: 50%;
}
    .symbol-flags:has(> :last-child:nth-child(2)) img{
        /*width: 50%;
        width: 12px;
        height: 12px;*/
    }
        .symbol-flags:has(> :last-child:nth-child(2)) div:first-child {
            margin-top: -3px;
            z-index: 1;
        }
    .symbol-flags:has(> :last-child:nth-child(2)) div:last-child {
        margin-left: -6px;
        margin-bottom: -3px;
    }