/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.chart {
    --padding-y: 2rem;
    --padding-x: 2rem;
    display: block;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(1.25rem)
}

@media (max-width: 1199.98px) {
    .chart {
        --padding-y: 1.5rem;
        --padding-x: 1.5rem;
    }
}

.chart__canvas {
    display: block;
    position: relative!important;
    max-width: 100%!important;
    min-width: initial!important;
    height: 300px
}

@media (max-width: 1199.98px) {
    .chart__canvas {
        height:260px
    }
}

@media (max-width: 575.98px) {
    .chart__canvas {
        height:220px
    }
}

.chart__label {
    position: absolute;
    top: var(--padding-y);
    left: var(--padding-x);
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 400
}

@media (max-width: 1200px) {
    .chart__label {
        font-size:calc(1.3rem + .6vw)
    }
}

.chart__data {
    position: absolute;
    top: calc(var(--padding-y) + 1.4em);
    left: var(--padding-x);
    font-size: 2.75rem;
    line-height: 1;
    height: 1em;
    font-weight: 400;
    text-shadow: 0 0 4px rgba(7,21,29,.5);
    z-index: 1
}

@media (max-width: 1200px) {
    .chart__data {
        font-size:calc(1.4rem + 1.8vw)
    }
}

.chart__data:not(:empty)::after {
    content: "";
    width: calc(100% + .4em);
    height: calc(100% + .3em);
    position: absolute;
    top: -.15em;
    left: -.2em;
    background-color: rgba(7,21,29,.3);
    border-radius: .25em;
    z-index: -1
}

.chart__actions {
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: var(--padding-y);
    left: var(--padding-x);
    background-color: rgba(255,255,255,.8);
    border-radius: 5px;
    font-size: 1.25rem;
    color: #000;
}

@media (max-width: 767.98px) {
    .chart__actions {
        font-size:1rem
    }
}

.chart__actions__btn {
    background-color: transparent;
    border: 0;
    border-radius: inherit;
    padding: .1em .75em;
    transition: all .25s ease;
	cursor: pointer;
}

.chart__actions__btn:focus {
    outline: 0
}

.chart__actions__btn.-is-active {
    background-color: #fff;
	color: #000;
}