.metric-date-picker {
    width: 10em;
    position: absolute;
    right: 1em;
}

.domain-container {
    display: none;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 5em;
}

.domain-container.active {
    display: grid;
}

.domain-title {
    grid-column: 1/3;
    text-align: center;
    font-size: 2em;
    height: 2em;
}

.chart-container {
    width: 50vw;
}

@media screen and (max-width: 1000px) {
    .chart-container {
        width: 98vw;
    }

    .domain-container {
        grid-template-columns: 1fr;
    }
}

#metric-domain-tabs-container {
    display: flex;
    margin-bottom: 1rem;
    background-color: #20a8d8;
    width: fit-content;
}

.metric-domain-button {
    color: white;
    border-radius: 0;
    margin: 0;
    background-color: #212427;
    outline: 0;
    border: 0;
    padding: 0.4em 0.7em;
    min-width: 6em;
    text-align: center;
    cursor: pointer;
}

.metric-domain-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.metric-domain-button.active {
    background-color: #20a8d8;
}