#main {
    font: 14px monospace;
    /*color: white;*/
    background-color: #111;
    -webkit-box-sizing: content-box;
!important;
    -moz-box-sizing: content-box;
!important;
    box-sizing: content-box;
!important;
}

svg {
    font: 10px sans-serif;
    stroke: none;

}

#helpDialog {
    font: 13px monospace;
}

.price {
    clip-path: url(#clip);
    stroke: none;
}

.line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.tradearea {
    stroke: #CCC;
    fill: #CCC;
    clip-path: url(#clip);
}

.offerarea {
    stroke: steelblue;
    fill: steelblue;
}

.bidarea {
    stroke: #FF9900;
    fill: #FF9900;
}

.offeroverlay {
    clip-path: url(#clip);
    stroke: steelblue;
    fill: steelblue;
    stroke-opacity: 0.1;
    fill-opacity: 0.1;
}

.bidoverlay {
    clip-path: url(#clip);
    fill-opacity: 0.1;
    stroke-opacity: 0.1;
    stroke: #FF9900;
    fill: #FF9900;
}

.trade {
    clip-path: url(#clip);
}

.axis path,
.axis line {
    fill: none;
    stroke: #444;
    shape-rendering: crispEdges;
}

.tick {
    font: 10px sans-serif;
    stroke: #AAA;
    fill: #AAA;
}

.tick text {
    stroke-width: .1;
}

.hoverline {

    stroke: #FFF;
}

.brush .extent {
    stroke: #444;
    fill-opacity: .50;
    shape-rendering: crispEdges;
}

rect.pane {
    cursor: move;
    fill-opacity: 0;
    /*//pointer-events: all;*!*!*/
}

/*div#params {*/
/*text-align: center;*/
/*position: absolute;*/
/*right: 2%;*/
/*top: 15px;*/
/*}*/

div#main {
    width: 100%;
    height: 97vh;
}

div#chart {
    position: relative;
    width: 75%;
    height: 100%;
    float: left;
}

div#book {
    position: relative;
    margin-left: 75%;
    height: 100%;
}

div#logo {
    position: absolute;
    opacity: .3;
    top: 15px;
    left: 45px;
}

.date {
    padding: 0;
    border: none;
    font-size: 12px;
    background: #eee;
}


.opa {
    opacity: .8;
}