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:#375bc7;vertical-align:top;border-radius:3px}
.t-btn[data-value='0'] {background:#666}
.btn:hover {background:#5a72bf}
.reload-btn {font-size:13px;float:right;cursor:pointer;padding:1px;border-radius:3px}
.reload-btn:hover {background:#4e6395}

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

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}
td {border-bottom:1px solid #555}
.bl {border-left:1px solid #555}
td.p-0 {padding:0}
tr.group td {background-color:#3d4861}
.pale {color:#333}
.pre {background:#393323}
.red {color:#f85778}
.green {color:#1fc96e}

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

#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.part {
    fill: none;
}
line.extrE {
    stroke: #71b19d;
    stroke-width: 1px;
    stroke-opacity: .3;
}
line.extrR {
    stroke: #badd7e;
    stroke-width: 1px;
    stroke-opacity: .3;
}
.pin.empt {
    opacity: .3;
}