.control.graph {
    width: 120px;
    height: 100%;
    background: rgba(255, 255, 255, .05);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    transition: background 200ms;
    position: relative;
}

.control.graph:hover {
    background: rgba(255, 255, 255, .1);
}

.control.graph .bg {
    width: 100%;
    height: 100%;
}

.control.graph .title {
    color: #fff;
    text-align: right;
    margin: 0 12px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.control.graph .value {
    color: #fff;
    text-align: right;
    margin: 0 12px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.control.candle_graph {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

.control.candle_graph svg {
    width: 100%;
    height: 100%;
}

.control.candle_graph svg .candle_block {
    fill: rgba(0, 0, 0, 0);
    transition: fill .2s;
}

.control.candle_graph svg .candle_block.dark {
    fill: rgba(0, 128, 128, 0.03);
}

.control.candle_graph svg .candle_block:hover {
    fill: rgba(0, 0, 0, .1);
}

.control.candle_graph svg line.profit {
    stroke: rgba(0, 150, 0, .5);
    stroke-width: 1px;
}
.control.candle_graph svg line.loss {
    stroke: rgba(200, 0, 0, .5);
    stroke-width: 1px;
}

.control.candle_graph svg rect.profit {
    fill: rgba(0, 150, 0, 1);
}
.control.candle_graph svg rect.loss {
    fill: rgba(200, 0, 0, 1);
}

.control.candle_graph svg .cursor_line {
    stroke: rgba(0, 0, 200, 0.5);
    stroke-width: 1;
    stroke-dasharray: 1,2;
}

.control.candle_graph svg .cursor_badge {
    fill: rgba(0, 0, 200, 0.75);
    rx: 3px;
}

.control.candle_graph svg .cursor_text {
    font-size: 12px;
    font-weight: 500;
    fill: #fff;
}