html {
    background-color: #2b2b2b;
    color: #909090;
    font-family: "Lato", sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

.red {
    color: #FF8585 !important;
}

.orange {
    color: #ffcd89 !important;
}

.green {
    color: #8DFF7E !important;
}

.purple {
    color: #cb73e6 !important;
}

.lowOpacity {
    opacity: 0.8;
}

.disabled {
    opacity: 0.4;
}

.hidden {
    visibility: hidden;
    max-width: 0;
    max-height: 0;
}

.scrollable {
    max-height: 18em;
    overflow: scroll;
    scroll-behavior: smooth;

}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    /* background: #f1f1f1;  */
    opacity: 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #88888836;
    border-radius: 0.2em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

::-webkit-scrollbar-button {
    visibility: collapse;
    min-height: 0;
    min-width: 0;
}

::-webkit-scrollbar-corner {
    visibility: collapse;
    min-height: 0;
    min-width: 0;
}

.App {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

.MainPanel {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;

    padding: 1.5em 8em 3em;
    background: #202020;
    min-height: 100vh;
    box-sizing: border-box;
}

.MainPanel .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 2em;
}

.MainPanel .header span {
    font-size: 2em;
    width: 100%;
    font-weight: bold;
    color: #ACACAC;
    margin-left: 0.5em;
}

.MainPanel .labels {
    display: flex;
    flex-direction: row;
    padding-bottom: 1em;
    border-bottom: 3px dashed #44444438;
    /*border-top: 3px dashed #44444438;*/
    margin-bottom: 1em;
}

.MainPanel .labels .label {
    margin-right: 2em;
    font-size: 0.9em;
    text-align: right;
}

.MainPanel .labels .label .key {
    color: #454545;
    display: block;
}

.MainPanel .labels .value {
    color: #808080;
}

.MainPanel .labels .value.fixedWidth {
    display: block;
    min-width: 6em;
}

.MainPanel .section {
    padding-bottom: 2em;
}

.MainPanel .section .title {
    font-size: 1.2em;
    font-weight: bold;
    color: #9C9C9C;
    padding-bottom: 0.6em;
}

.MainPanel .statistics {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.MainPanel .statistics .statistic .name {
    text-align: right;
    color: #454545;
}

.MainPanel .statistics .statistic .value {
    text-align: right;
    font-size: 2em;
    color: #D5D5D5;
    font-weight: 400;
}

.MainPanel .signals {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-left: auto;
}

.MainPanel .signals .signal {
    color: #202020 !important;
    font-weight: 900;
    font-size: 0.7em;
    padding: 0.3em;
    border-radius: 0.2em;
    margin-right: 0.4em;
    min-width: 3em;
    text-align: center;
    max-height: 1.2em;
    line-height: 1.2em;
}

.MainPanel .signals .signal.orange {
    background-color: #C49463;
}

.MainPanel .signals .signal.gray {
    background-color: #909090;
}

.MainPanel .signals .signal.red {
    background-color: #C46363;
}

.MainPanel .signals .signal.green {
    background-color: #93C463;
}

.MainPanel .trades {
    font-family: monospace;
}

.MainPanel .trades .trade .timestamp {
    color: #696969;
}

.MainPanel .trades .trade .side {
    min-width: 4em;
    text-align: right;
    margin-right: 0.4em;
}

.MainPanel .trades .trade .quantity {
    min-width: 4em;
    text-align: right;
    margin-right: 0.4em;
}

.MainPanel .trades .trade .separator {
    color: #646464;
}

.MainPanel .logs .log {
    margin-bottom: 0.4em;
}

.MainPanel .logs {
    font-family: monospace;
}

.MainPanel .logs .log .timestamp {
    color: #696969;
}

.MainPanel .logs .log .message {
    margin-left: 0.8em;
}

.MainPanel .placeholder {
    opacity: 0.4;
}

.MainPanel .chart {
    height: 100px;
}

.MainPanel .chart .anychart-credits {
    visibility: hidden;
}