body {
    background-color: var(--ui-0);
    grid-template-columns: 1fr;
    grid-template-rows: 4rem 1fr;
}

body.loading #controls {
    background: linear-gradient(90deg, var(--ui-0), var(--ui-0), #242424, var(--ui-0), var(--ui-0));
    -webkit-animation: loadingBGWipe 0.5s linear infinite;
    animation: loadingBGWipe 0.5s linear infinite;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    background-size: 200% 200%;
}

body.loading .submit, body.loading input, body.loading select {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

hr { height: 100%; margin: 0 1rem; border: 1px solid #484848;}

time { font-size: 0.75rem; }

/* -----------------------------
-------------------------------- 
 
CONTROLS 
 
--------------------------------
----------------------------- */

#controls {
    background-color: #202020;
    grid-column: 1/3;
    grid-row: 1/2;
    padding: 1rem;
    display: flex;
    gap: 1rem;
}

#controls small { line-height: 2rem; }
#controls b { flex-grow: 1; }



#controls select { min-width: 4rem; }
#controls select[field$="operation"] { width: 8rem; }
#controls input[field$="value"]      { width: 8rem; }
#minutes { width: 8rem;}
#symbol-picker { width: 18rem; }

#backtesting-use-multiplier + small { line-height: 1rem; color : var(--ui-3); }
#backtesting-use-multiplier:checked + small { color: var(--ui-yellow); }

/* -----------------------------
-------------------------------- 
 
TABLES 
 
--------------------------------
----------------------------- */

#backtests {
    display: block;
    grid-row: 2/3;
    grid-column: 1/-1;
    grid-template-rows: 1fr;
    overflow-y: scroll;
}

#backtests small,
#backtests time {
    font-size: 0.75rem;
    line-height: 2rem;
    color: #888;
}

#backtests small {
    color: var(--ui-purple-light);
}

#backtests .backtest {
    display: grid;
    padding: 0.5rem 1rem;
    grid-template-columns: 8rem 40rem 1fr 4rem;
    max-height: 2rem;
    line-height: 2rem;
    box-sizing: content-box;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
}

#backtests .backtest.completed:hover {
    background-color: #303030;
    cursor: pointer;
}

.backtest hr { margin : 0 1rem; width: 0px;}

.backtest:not(.completed) time,
.backtest:not(.completed) small { color : var(--ui-yellow) !important; }

.backtest:not(.completed) {
    background: linear-gradient(90deg, var(--ui-0), var(--ui-0), #242424, var(--ui-0), var(--ui-0));
    -webkit-animation: loadingBGWipe 0.5s linear infinite;
    animation: loadingBGWipe 0.5s linear infinite;
    background-size: 200% 200%;
}

.backtest .summary { display: flex; }
.backtest .summary span:not(.white):not(.gray) { flex-grow: 1; width: 4rem; }
.backtest .summary span.white { margin-right: 0.5rem;}
.backtest .summary span.gray { margin-right: 0.5rem; }

.backtest .triggers { color: #888 !important;}

dialog {
    background-color: #242424;
    height: auto;
    max-height: calc(100% - 8rem);
    max-width: calc(100% - 8rem);
    min-width: 50rem;
}

#triggers-list {
    height: calc(100% - 6rem);
    margin-bottom: 1rem;
    overflow-y: scroll;
}

.trigger, .trigger small, .trigger time, .trigger span {
    line-height: 2rem;
}

.trigger:nth-child(odd) {
    background-color: #181818;
}

.trigger, dialog .labels { 
    display: grid;
    grid-template-columns: 8rem 6rem 6rem 1fr;
}

dialog .labels {
    border-bottom: 1px solid #FFF;
}

.trigger div {
    display: flex;
}

.trigger div small { 
    flex-grow: 1;
    text-align: left;
    min-width: 12rem; 
}