html {
    font-size: 14px;
    --bg-color: #fff;
    --bg-border: #E0E3EB;
    --font-color: #000;
}

    html[data-theme='dark'] {
        --bg-color: #131722;
        --bg-border: #2A2E39;
        --font-color: #fff;
    }
html {
    position: relative;
    min-height: 100%;
}

body {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: var(--font-color);
}

html .logo.logo-vt {
    background-image: url(/img/vt-dark.svg);
}

html[data-theme='dark'] .logo.logo-vt {
    background-image: url(/img/vt-light.svg);
}

.logo.logo-vt-img {
    max-height: 48px;
}

html .logo.logo-vt-img {
    content: url(/img/vt-dark.svg);
}

html[data-theme='dark'] .logo-vt-img {
    content: url(/img/vt-light.svg);
}

html .logo-dxfeed {
    content: url(/img/dx-dark.png);
}

html[data-theme='dark'] .logo-dxfeed {
    content: url(/img/dx-light.png);
}

.logo.logo-tw-img {
    max-height: 48px;
}

html .logo.logo-tw-img {
    content: url(/img/tw-logo-dark.svg);
}

html[data-theme='dark'] .logo-tw-img {
    content: url(/img/tw-logo-light.svg);
}


header{
    background: var(--bg-color);
    border: 0px;
}
    header .navbar {
        border-bottom: 2px solid var(--bg-border);
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
        header .navbar .logo.logo-vt {
            margin-left: 8px;
            /*margin-top: 2px;*/
            /*margin-bottom: 2px;*/
            height: 24px;
            width: 136px;
            background-position: center;
            background-repeat: no-repeat;
        }

        header .navbar .logo.logo-dxfeed {
            /*margin-left: 8px;*/
            /*margin-top: 2px;*/
            /*margin-bottom: 2px;*/
            height: 24px;
            width: 100p;
            background-position: center;
            background-repeat: no-repeat;
        }

#chartContainer {
    width: 100%;
    height: 100%;
    background: var(--bg-color);
}
header .btn {
    color: var(--font-color) !important;
}
    header .btn:hover {
        color: var(--font-color) !important;
    }
.dropdown-menu {
    background: var(--bg-color);
    color: var(--font-color) !important;
}
.dropdown-item {
    color: var(--font-color) !important;
}
    .dropdown-item:hover {
        background: var(--bg-color) !important;
        opacity: 0.7;
        color: var(--font-color) !important;
    }

.modal .modal-content {
    background: var(--bg-color);
    color: var(--font-color);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 16px;
}

#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;*/
        }