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

#charts {
    display: grid;
    grid-row: 2/3;
    grid-column: 1/-1;
    grid-template-rows: 1fr;
}

#charts > div { 
    height: 100%;
    max-height: 100%;
    opacity: 1;
    transition: 0.5s opacity ease;
}

#volume-profile {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: #181818;
    border-radius: 0 4px 4px 0;
    padding: 1rem 0;
    overflow-y: scroll;
}

#volume-profile::-webkit-scrollbar {
    display: none !important;
}

#volume-profile p {
    display: grid;
    grid-template-columns: 1fr 5rem 1rem 5rem;
    font-size: 0.75rem;
    padding: 0 1rem;
    margin: 0;
    cursor: pointer;
}

#volume-profile p span { text-align: right; }
#volume-profile p span:first-child { text-align: left; }

#volume-profile p:nth-child(odd) {
    background-color: var(--ui-0);
}

#volume-profile p:hover {
    background-color: var(--ui-2);
}

body.loading #charts, 
#volume-profile p.loading {
    background: linear-gradient(90deg, var(--ui-0), var(--ui-0), #181818, 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%;
}

#volume-profile p.active {
    background-color: var(--ui-yellow);
    color: #000;
}

body.loading #charts > div {
    opacity: 0;
}

body:not(.loaded) #csv {
    opacity: 0.25;
    pointer-events: none !important;
}

body:not(.loaded) .labels,
body.loaded .submit{
    display: none !important;
}

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

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

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

/* -----------------------------
-------------------------------- 
 
CHARTS STYLING 
 
--------------------------------
----------------------------- */

.apexcharts-tooltip, 
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip,
.apexcharts-menu {
    background: var(--ui-2) !important;
    color: #FFF;
}

.apexcharts-xaxistooltip-bottom:after, 
.apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--ui-2) !important;
}

.apexcharts-menu-item:hover {
    background-color: var(--ui-1) !important;
}

#charts > div > div > .apexcharts-svg {
    background-color: var(--ui-0) !important;
    overflow: visible;
}

.apexcharts-tooltip {
    padding: 1rem;
    font-weight: 300 !important;
}

.apexcharts-tooltip p {
    margin-bottom: 0.5rem;
}

.apexcharts-tooltip p:last-child {
    margin-bottom: 0;
}

.apexcharts-tooltip p span:first-child {
    min-width: 3.5rem !important;
    display: inline-block
}