.chart-statistic {
    display: inline-block;
    background-color: rgb(249, 245, 245);
    padding: 12px 20px 15px 20px;
    min-width: 220px;
    border: solid 1px #e8e8e8;
    border-radius: 3px;
    margin: 10px;
    &-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        &-title {
            font-size: 12px;
            color: gray;
        }
        &-subtitle {
            font-size: 12px;
            color: gray;
            span {
                font-size: 18px;
            }
        }
    }
    &-content {
        display: flex;
        align-items: baseline;
        &-value {
            font-size: 20px;
            color: black;
            font-weight: bold;
            &-decimal {
                font-size: 14px;
            }
        }
        &-rate {
            margin-left: 10px;
            font-size: 14px;
        }
    }
    &-footer {
        margin-top: 12px;
        background-color: #e8e8e8;
        &-progress {
            text-align: center;
            color: white;
            font-size: 13px;
            height: 19px;
            padding-right: 5px;
        }
    }
    @media screen and (min-width: 1280px) and (max-width: 1440px) {
        padding: 6px 10px 8px 10px;
        min-width: 170px;
        margin: 5px;
        &-header {
            &-subtitle {
                span {
                    font-size: 15px;
                }
            }
        }
        &-content {
            &-value {
                font-size: 15px;
            }
        }
    }
}