#dataviz-chart-aduhelm-cost {}

.chart-title {
    font-size: 1.6rem;
    padding-bottom: 4px;
    font-weight: bold;
    font-family: Circular, sans-serif;
}

@media only screen and (min-width: 1024px) {
    #dataviz-chart-aduhelm-cost {
        width: 1024px;
        max-width: none;
        margin-right: auto;
        margin-left: auto;
        padding: 30px 20px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .dataviz-4493199 {
        margin: 0 20px;
    }
    #dataviz-chart-aduhelm-cost {}
}

.range-wrap {
    position: relative;
    margin: 0 auto 2rem;
    font-family: Circular, sans-serif;
}

.range {
    width: 100%;
    top: 2px;
    height: 20px;
    -webkit-appearance: none;
    font-family: Circular, sans-serif;
}

.bubble {
    background: #1fadb6;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-weight: bold;
    font-family: Circular, sans-serif;
}

.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 4px;
    background: #1fadb6;
    top: -1px;
    left: 50%;
    font-family: Circular, sans-serif;
}

.range-slider-label {
    font-weight: normal;
    margin-bottom: 0rem;
    font-family: Circular, sans-serif;
}

#mainYaxis g.tick text {
    -webkit-transform: translate(0, -8px);
        -ms-transform: translate(0, -8px);
            transform: translate(0, -8px);
}

.control-button {
    padding: 0.4rem 0.5rem 0.4rem 2em;
    margin-right: 0.6rem;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    background-color: #f0f1f1;
    border: 1px solid #eee;
    font-family: Circular, sans-serif;
    position: relative;
}

.control-button.dollars {
    padding: 0.4rem 0.5rem;
    background: #f4fbfc;
    border: 2px solid #1fadb6;
    color: #007e8f;
}

.control-button.incomes {
    background: #f2fcf4;
    border: 2px solid #75d487;
    color: #2c7339;
    background-image: url(vendor/1x/money-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.tuition {
    background: #f0f1f2;
    border: 2px solid #8b96a2;
    color: #343a40;
    background-image: url(vendor/1x/tuition-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.houses {
    background: #fcf5f8;
    border: 2px solid #e090b4;
    color: #8c3157;
    background-image: url(vendor/1x/house-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.teslas {
    background: #fff4f2;
    border: 2px solid #ff9884;
    color: #c44231;
    background-image: url(vendor/1x/car-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.planes {
    background: #f0f7fc;
    border: 2px solid #3f96d1;
    color: #005182;
    background-image: url(vendor/1x/plane-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.phones {
    background: #fcfcec;
    border: 2px solid #b0b018;
    color: #6c6c00;
    background-image: url(vendor/1x/phone-icon-menu.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 18px 18px;
}

.control-button.incomes::after {
    content: "$67,521";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.control-button.tuition::after {
    content: "$10,740";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.control-button.phones::after {
    content: "$799";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.control-button.teslas::after {
    content: "$127,590";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.control-button.houses::after {
    content: "$428,700";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.control-button.planes::after {
    content: "$4,595,000";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 2rem;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}

.xGridLines {
    opacity: 0.1;
}

#xGrid path {
    display: none;
}

div svg {
    max-width: 800px;
}

/*# sourceMappingURL=app.css.map*/