.counter-icon,
.counter-value {
    font-size: 2.0625rem;
    line-height: 1.2
}

.counter-icon {
    color: #31c77f
}

.counter-value {
    font-weight: 400;
    color: #171724
}

.counter-body {
    display: flex;
    flex-direction: column
}

*+.counter-body {
    margin-top: 10px
}

*+.counter-title {
    margin-top: 5px
}

.counter-reverse .counter-body {
    flex-direction: column-reverse
}

.counter-reverse .counter-value {
    margin-top: 5px
}

.counter-reverse *+.counter-title {
    margin-top: 0
}

.counter-boxed {
    padding: 20px 15px;
    border-radius: .375rem;
    box-shadow: 5px 8px 28px rgba(23, 23, 36, 0.1);
    background-color: #fff
}

[class*='counter-boxed-'] .counter-value {
    color: inherit
}

.context-dark .counter-boxed {
    background-color: #171724
}

.counter-boxed.counter-boxed-primary {
    color: #fff;
    background-color: #31c77f
}

.counter-boxed.counter-boxed-secondary {
    color: #fff;
    background-color: #6b39bd
}

.counter-boxed.counter-boxed-success {
    color: #fff;
    background-color: #77ba21
}

.counter-boxed.counter-boxed-info {
    color: #fff;
    background-color: #138ce4
}

.counter-boxed.counter-boxed-warning {
    color: #fff;
    background-color: #f19711
}

.counter-boxed.counter-boxed-danger {
    color: #fff;
    background-color: #e72660
}

.counter-boxed.counter-boxed-light {
    color: #000;
    background-color: #f7f7f7
}

.counter-boxed.counter-boxed-dark {
    color: #fff;
    background-color: #171724
}

@media (min-width: 576px) {
    *+.counter-body {
        margin-top: 0
    }

    *+.counter-title {
        margin-top: 0
    }
}

@media (min-width: 768px) {

    .counter-icon,
    .counter-value {
        font-size: 2.475rem
    }
}

@media (min-width: 992px) {

    .counter-icon,
    .counter-value {
        font-size: 3.09375rem
    }

    .counter-boxed {
        padding: 3px 20px
    }

    .counter-reverse .counter-value {
        margin-top: 8px
    }
}

@media (min-width: 1200px) {

    .counter-icon,
    .counter-value {
        font-size: 2.125rem
    }
}

@media (min-width: 1600px) {
    .counter-boxed {
        padding: 48px 25px 61px
    }
}