html,body {height:100%}
body {background-color:#0c0c1c;color:#ccc;font-family:"Roboto Flex",sans-serif;font-size:14px;margin:0}

.loader-cont {display:flex;align-items:center;justify-content:center;height:100%}
.loader {width:40px;height:40px;border:5px solid #474747;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}
@keyframes rotation {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}

.wrapper {display:flex;height:100%}
.left-panel {flex:0 1 400px;display:flex;flex-direction:column;padding:10px 0 0}
.right-panel {flex:1 1 100%;display:flex;flex-direction:column;padding:10px 10px 0 0}
.right-top {flex:0 0 400px;display:flex}
.w {background-color:#10152c;flex:1 1 100px; margin:0 0 10px 10px;display:flex;flex-direction:column}
.wh {background-color:#2b3c7f;padding:5px 8px 5px;font-size:16px;flex:0 1 15px}
.wb {flex:1 1 100px}
.wb.scrolled {height:100%;overflow-y:auto}

#status {flex:0 1 300px}
#history {flex:1 1 300px}
#details {flex:1 1 600px}
#graph {flex:1 1 1500px}

.btn {font-size:10px;display:inline-block;margin:1px 0 0;cursor:pointer;padding:2px 5px;background:#549cc7;vertical-align:top;border-radius:3px;text-decoration:none;color:#fff}
.t-btn[data-value='0'] {background:#666}
.btn:hover {background:#65889e}
.reload-btn {font-size:13px;float:right;cursor:pointer;padding:1px;border-radius:3px}
.reload-btn:hover {background:#4e6395}
.btn[data-graph-id] {font-size:15px;line-height:15px;padding:1px;background:#0e8a8a}
.btn[data-graph-id]:hover {background:#11b1b1}
.all-orders-btn {margin-right:20px;}

.ml-30 {margin-left:30px}
.w-100 {width:100%}
.tar {text-align:right}
.tal {text-align:left}

ul {margin:7px 0;padding-left:25px;}

table {border-collapse: collapse}
thead {position:sticky;top:0;z-index:1;}
thead th {position:relative;z-index:2;background-color:#1b264e;}
th, td {padding:4px 5px; text-align:center}
th.sorting {cursor:pointer}
td {border-bottom:1px solid #555}
.bl {border-left:1px solid #555}
td.p-0 {padding:0}
tr.group td {background-color:#3d4861}
tr.active td {background-color:#2c3a45}
tr.hl td {background-color:#08071d}
.pale {color:#333}
.pre {background:#393323}
.red {color:#f85778}
.green {color:#1fc96e}
.tr-cursor tr:not(.group):hover td {background-color:#222d35}

span[data-ol-id] {cursor:pointer}
span[data-ol-id]:hover {color:#ccc;border-bottom:1px dashed}
span[data-part-debug-id] {cursor:pointer}
span[data-part-debug-id]:hover {color:#ccc;border-bottom:1px dashed}
span[data-pin-id] {cursor:pointer}
span[data-pin-id]:hover {color:#ccc;border-bottom:1px dashed}

.zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

#chartCont {position:relative}
#chartCont.loading .overlay {position:absolute; width:100%; height:100%; top:0; left:0; background:#000000dd}
#chartCont:not(.show-e) .el-e {display:none}
#chartCont:not(.show-r) .el-r {display:none}
#chartCont:not(.show-ea) .el-ea {display:none}
#chartCont:not(.show-ra) .el-ra {display:none}

path.earnings {
    fill: none;
    stroke: #71b19d;
    stroke-width: 1px;
}
path.bot-earnings {
    fill: none;
    stroke: #71b19d;
    stroke-width: 1px;
}
path.revenue {
    fill: none;
    stroke: #badd7e;
    stroke-width: 1px;
}
path.earnings1 {
    fill: none;
    stroke: #dda67e;
    stroke-width: 1px;
}
path.bot-revenue {
    fill: none;
    stroke: #badd7e;
    stroke-width: 1px;
}
path.earnings-avg {
    fill: none;
    stroke: #7e8edd;
    stroke-width: 1px;
}
path.revenue-avg {
    fill: none;
    stroke: #6bf63d;
    stroke-width: 1px;
}
path.pin {
    fill: #6629ff;
    stroke: #6629ff;
}
path.pin.rev {
    fill: #f31515;
    stroke: #f31515;
}
line.pin1 {
    stroke: #6629ff;
}
line.pin1.rev {
    stroke: #f31515;
}
path.pin:not(.open) {
    fill-opacity: .3;
}
line.sep {
    stroke: #3a3a3c;
    stroke-width: 1px;
    stroke-opacity: .5;
}
line.extrE {
    stroke: #71b19d;
    stroke-width: 1px;
    stroke-opacity: .3;
}
line.extrR {
    stroke: #badd7e;
    stroke-width: 1px;
    stroke-opacity: .3;
}
.pin.empt {
    opacity: .3;
}
line.target {
    stroke-width: 4;
    stroke-opacity: .3;
}
line.target.eTarget {
    stroke: #999;
}
line.target.rTarget {
    stroke: #975454;
}
.eTarget-mode .eTarget {
    stroke-width: 2;
    stroke-opacity: 1;
}
.rTarget-mode .rTarget {
    stroke-width: 2;
    stroke-opacity: 1;
}

.rTarget-mode .el-e {display:none}
.eTarget-mode .el-r {display:none}