#page-content {
    text-align: center;
}

.project-heading {
    text-align: left;
    color: var(--tertiary-font-color);
}

.chartContainer {
    margin: 45px 0px;
}

.axis text {
    font: 12px sans-serif;
    fill: var(--secondary-font-color);

}

.axis path,
.axis line {
    fill: none;
    stroke: var(--secondary-font-color);
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}

div.tooltip {
    position: absolute;
    text-align: center;
    width: 80px;
    height: 45px;
    padding: 2px;
    font: 12px sans-serif;
    background: var(--primary-font-color);
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

.controls div {
    text-align: center;
}

.disabled {
    display: none;
    opacity: 0;
    pointer-events: none;

}

.enabled {
    display: inline-block;
    opacity: 1;
    pointer-events: all;

}

.slideContainer {
    margin: 1rem;
    /* Width of the outside container */
}

/* The slider itself */
.slider {
    margin: 0 auto;
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 25%;
    height: 25px;
    background: var(--secondary-font-color);
    outline: none;
    /* Remove outline */
    opacity: 0.7;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: var(--secondary-bg-color);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: var(--secondary-bg-color);
    cursor: pointer;
}