﻿.bars {
    position:absolute;
    top:1em;
    left:6em;
    right:1em;
    z-index:1;
    display:flex;
    overflow-y:hidden;
    overflow-x:auto;
}

.bar{
    margin-right:0.5em;
    flex-grow:1;
}

.bar-time {
    text-align: center;
    height:25px;
    color:#888;
}
    .bar:last-child{
        margin-right:0;
    }

    .flows {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

.flow{
    display:flex;
    min-width:7em;
    height:25px;
}

    .flow div {
        border-bottom: 1px solid #ccc;
        width: 50%;
        text-align: center;
    }

.flow-k {
    width:1px !important;
    background:#ccc;
    border:0 !important;
}

.entity .flow-k {
    width: 5px !important;
}

.bar-red .flow-k {
    background: #f30;
}

.bar-green .flow-k {
    background: #008000;
}

.flow.sell > .flow-sell {
    color:#008000;
    font-weight:bold;
}
.flow.buy > .flow-buy {
    color: #f30;
    font-weight:bold;
}

.price-y-axis{
    position:relative;
}

.price-row {
    position: absolute;
    width: 100%;
    height:25px;
    color:#888;
}

    .price-row:hover{
        background:#f9f9f9;
    }

.price-grid {
    border: 1px solid #dee2e6;
    border-top: 0;
    padding: 15px;
    position: relative;
    background: #fff;
    cursor: default;
}