.state-card {
    width: 100% !important;
    height: 100% !important;

    .inbox-widget {
        max-height: 32rem !important;
        overflow-y: auto !important;
    }

    .state-item {
        display: flex !important;
        border-bottom: 1px solid #dee2e6 !important;

        &:last-child {
            border-bottom: none !important;
        }
    }
}

.row>* {
    margin-bottom: 1.5rem !important;
}

.card {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;

    .card-drop {
        vertical-align: middle !important;
    }


    .no-data,
    .loader {
        display: none;

        &.show {
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #fff !important;
            vertical-align: middle !important;
        }
    }

    .no-data>* {
        color: lightgray !important;
        font-size: larger !important;
    }
}

.box-field {
    background-color: #fff !important;
    width: 100% !important;
    border-radius: .25rem !important;
}


.box-title {
    padding: 1rem !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: -1rem !important;
}

.box-content {
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    .box-badge {
        color: #fff !important;
        text-align: center !important;
        padding: 0.5rem !important;
        vertical-align: bottom !important;
        border-radius: 50rem !important;
        margin-bottom: 1rem !important;

        .badge-text {
            font-size: normal !important;
            font-weight: bolder !important;
            color: #fff !important;
            line-height: 1.1 !important;
        }

        .badge-unit {
            font-size: small !important;
            color: #fff !important;
            line-height: 1.1 !important;
        }
    }

    .box-item {
        text-align: end !important;
    }

}

.box-day {
    border-bottom: #0dcaf0 solid 0.25rem !important;

    .box-badge {
        background-color: #0dcaf0 !important;
    }
}

.box-week {
    border-bottom: #20c997 solid 0.25rem !important;

    .box-badge {
        background-color: #20c997 !important;
    }
}

.box-month {
    border-bottom: #198754 solid 0.25rem !important;

    .box-badge {
        background-color: #198754 !important;
    }
}

.box-total {
    border-bottom: #0d6efd solid 0.25rem !important;

    .box-badge {
        background-color: #0d6efd !important;
    }
}