@import 'colors.scss';

canvas {
    background-color: $background;
}

.chart-wrapper {
    position: relative;
    opacity: 0;
}

.chart-wrapper>canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.chart-area-wrapper {
    overflow-x: scroll;
}

.legend-container {
    width: max-content;
}

.legend-entry {
    cursor: pointer;
    margin: 10px;
    display: inline-block;
}

.legend-entry-color-box {
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    width: 20px;
}

.legend-entry-text {
    color: white;
    margin: 0px;
    display: inline-block;
    vertical-align: top;
    padding-top: 4px;
}

#budget-legend-container {
    height: 61px;
}

#budget-legend-scrollable-container {
    overflow-x: auto;
}

#toggle-chart-visibility {
    top: 0;
    right: 0;
    position: absolute;
    padding: 10px;
}