body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" on, "lnum" on;
    background-color: #f6f6f6;
    font-family: Inter, Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    margin: 0;
    padding: 0
}

@media screen {
    *,
    :after,
    :before {
        box-sizing: border-box
    }

    .charts {
        height: 100%;
        max-height: 100%;
        width: calc(100% - 1000px);
        position: relative;
        border: 1px solid #e1e1e1;
        flex-grow: 4;
        background-color: #fff;
    }

}

#root {
    height: 100vh;
}

.grid-layout {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.tv-lightweight-charts {
    width: 100% !important;
    background-color: #fff;
}

.grid-area,
.grid-item {
    height: calc(100% - 30px);
    width: 100%;
    display: flex;
    flex-direction: row;
}

.tabs {
    cursor: pointer;
    margin-left: 10px;
    margin-top: 5px;
    max-height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    z-index: 100;
}

.tabs::-webkit-scrollbar {
    height: 0
}

.tabs {
    scrollbar-color: transparent transparent
}

.tabs .labels {
    background-color: hsla(0, 0%, 100%, .85);
    border-radius: 5px;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
}

.chart-tool .labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    width: 100%;
    overflow: auto;
}

.tabs .btn {
    align-items: center;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 3px;
    bottom: 0;
    display: flex;
    justify-content: center;
    max-height: 16px;
    max-width: 20px;
    min-height: 16px;
    min-width: 20px;
    position: sticky
}

.tabs .btn:hover {
    background-color: #f8f8ff;
    border-color: #d1d4dc
}

.tabs .searchs {
    margin-bottom: 5px
}

.tabs .chartsearch {
    border: 1px solid #d5d8dc;
    border-radius: 3px;
    font-family: Courier;
    font-size: 13px;
    height: 19px;
    outline: none;
    padding-left: 8px;
    width: 65px
}

.tabs .label-item {
    border: 1px solid transparent;
    margin-bottom: 5px;
    padding-right: 5px
}

.chart-tool .label-item,
.chart-tool .label-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    padding-right: 5px;
    width: 100%;
}

.tabs .label-item:hover {
    background-color: #fff;
    border-color: #d1d4dc;
    border-radius: 3px
}

.tabs .label-item:last-child,
.chart-tool .label-item:last-child,
.chart-tool .label-header:last-child {
    margin-bottom: 0
}

.tabs .label {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.chart-tool .label {
    align-items: center;
    display: flex;
    justify-content: stretch;
    width: 100%;
}

.tabs .cube,
.tooltip .cube,
.chart-tool .cube {
    border-radius: 2px;
    display: flex;
    height: 6px;
    margin: 5px;
    width: 6px
}

.chart-tool .cube {
    width: 14px;
    min-width: 14px;
    height: 4px;
    border-radius: 999px;
}

.tabs .name,
.chart-tool .name {
    display: flex;
    font-family: Courier;
    font-size: 13px;
    font-weight: 400;
    padding: 2px;
    white-space: nowrap
}

.tabs .hide-chart,
.chart-tool .hide-chart {
    color: #a9a9a9;
}

.tabs .unshow-label,
.chart-tool .unshow-label{
    display: none
}

.tabs .svg-rotate,
.chart-tool .svg-rotate {
    transform: rotate(180deg)
}

.hidden {
    display: none
}

.line-series-tooltip {
    position: fixed;
    display: inline;
    opacity: 0;
    text-align: left;
    background-color: #fff;
    border: 1px solid #d1d4dc;
    border-radius: 5px;
    padding: 2px;
    z-index: 10;
    pointer-events: none;
    font-family: Courier;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.line-series-tooltip .tooltip {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.react-grid-item  {
    width: 100%;
}

.react-resizable-handle {
    padding: 0 4px 4px 0 !important;
}

.react-grid-item.react-grid-placeholder {
    background: #1068bf !important;
}
.react-grid-item > .react-resizable-handle::after {
    right: 4px;
    bottom: 4px;
}

.grid-item {
    display: flex;
    flex-direction: column;
    position: relative; 
    width: 100%; 
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.grid-item-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    min-height: 30px;
    max-height: 30px;
    box-sizing: border-box;
    border: 1px solid #e1e1e1;
    border-bottom: none;
    cursor: grab;
}

.grid-item-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    height: 30px;
}

.grid-item-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    text-align: left;
    padding: 0px 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: --apple-system, 'system-ui', 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    color: rgb(48, 48, 48);
    text-transform: uppercase;
}

.grid-item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500;
    height: 100%;
    min-width: 32px;
    border-left: 1px solid #e1e1e1;
}

.grid-item-button:hover {
    background-color: #ededed;
}

.fullscreen {
    position: fixed;
    width: 100%;
    height: calc(100% + 0px);
    min-width: 0px;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 999;
}

.fullscreen .grid-item-header {
    border: none;
}

.chart-tool {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 1px solid #e1e1e1;
    border-left: none;
    box-sizing: border-box;
    padding: 15px;
    background-color: #fff;
    overflow: hidden;
}

.tool-table {
    width: 100%;
    column-gap: 0;
    table-layout: auto; 
}

.tool-table tr {
    height: 25px;
    cursor: pointer;
    border-bottom: 1px solid #e1e1e1;
    font-size: 12px;
    user-select: none;
}

.tool-table th {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
}

.tool-table th:first-child {
    justify-content: flex-start;
}

.tool-table .label-item:hover {
    background-color: #f0f0f0;
}

.tool-table .label-item th {
    background: transparent;
}

.tool-table th, .tool-table td {
    text-align: right;
    white-space: nowrap; 
    width: 100%;
    padding: 0px 8px;
}

.tool-table th:first-child,
.tool-table td:first-child {
    text-align: left;
}

.tool-table .label-name {
    display: flex;
    align-items: center; 
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
}

.tool-table.hide-all .label-item {
    color: #a9a9a9;
}

.tool-table.hide-all .hide-chart.label-item {
    color: #000;
}

.relative {
    position: relative;
}

.fullscreen-chart {
    width: 100%;
}

.tool-table {
    width: 100%;
    border-spacing: 0;
}

.label-header th {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.label-item td:first-child,
.label-header td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-item td:not(:first-child),
.label-header th:not(:first-child) {
    min-width: 75px;
    max-width: 75px;
    width: 75px;
}

.label-header th,
.label-item td {
    min-width: 75px;
}

.label-item td:first-child,
.label-header th:first-child {
    width: 100%;
}

.tool-table {
    column-span: 0;
    border-spacing: 0px;
}