.kPIs {
    display: flex;
    align-items: stretch;
    padding: 4px 4px 0px 4px;
    background: #283e63;
    background: #283e63;
    margin: 0px;
    flex-grow: 1;
}

    .kPIs .KPICard {
        display: flex;
        padding: 2px 4px;
        flex-grow: 1;
        box-shadow: 0px 1px 4px #15223214;
        border: 1px solid #2680eb;
        margin: 0px 1px;
        align-items: center;
        gap: 4px;
    }

        .kPIs .KPICard img {
            width: 28px;
            height: 28px;
            display: block;
            margin-inline-end: 6px;
        }

.KPIFilterationButtons {
    display: flex;
    /* flex-wrap: wrap; */
    /* flex-grow: 1; */
}

    .KPIFilterationButtons .button {
        padding: 0px 3px;
        background: #214E87;
        border-radius: 5px;
        border: 1px solid;
        margin: 0px 2px;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90px;
        height: 25px;
        font-size: 9px;
        font-weight: 600;
        transition: all ease-in-out 300ms;
    }

        .KPIFilterationButtons .button span {
            width: 18px;
            height: 18px;
            padding: 5px;
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .KPIFilterationButtons .button.waiting {
            border-color: #FFDA4B;
            color: #fafafab3;
            min-width: 120px;
            width: auto;
            gap: 5px;
        }

        .KPIFilterationButtons .button .count {
            font-size: 12px;
            font-weight: 200;
        }
        /* waiting */
        .KPIFilterationButtons .button.waiting span {
            background: #FFDDDD;
        }

            .KPIFilterationButtons .button.waiting span img {
                width: auto;
                height: auto;
                margin-inline-end: 0;
            }

        .KPIFilterationButtons .button.waiting:hover, .KPIFilterationButtons .button.waiting.active {
            background: #ffda4bcc;
        }
        /* very late */
        .KPIFilterationButtons .button.veryLate {
            border-color: #FF3A29;
            color: #fafafab3;
            min-width: 50px;
        }

            .KPIFilterationButtons .button.veryLate span {
                background: #FFDDDD;
            }

                .KPIFilterationButtons .button.veryLate span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.veryLate:hover, .KPIFilterationButtons .button.veryLate.active {
                background: #F53827;
            }
        /*  late */
        .KPIFilterationButtons .button.late {
            border-color: #F88226;
            color: #fafafab3;
            width: 52px;
        }

            .KPIFilterationButtons .button.late span {
                background: #F9EAB4;
            }

                .KPIFilterationButtons .button.late span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.late:hover, .KPIFilterationButtons .button.late.active {
                background: #F88226;
            }
        /* ontime */
        .KPIFilterationButtons .button.onTime {
            border-color: #14B21B;
            color: #fafafab3;
            width: 52px;
        }

            .KPIFilterationButtons .button.onTime span {
                background: #B9EBC6;
            }

                .KPIFilterationButtons .button.onTime span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.onTime:hover, .KPIFilterationButtons .button.onTime.active {
                background: #14B21B;
            }
        /* ontime */
        .KPIFilterationButtons .button.done {
            border-color: #008844;
            color: #fafafab3;
            width: 52px;
        }

            .KPIFilterationButtons .button.done span {
                background: #B9EBC6;
            }

                .KPIFilterationButtons .button.done span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.done:hover, .KPIFilterationButtons .button.done.active {
                background: #008844;
            }
        /* early */
        .KPIFilterationButtons .button.early {
            border-color: #007BFF;
            color: #fafafab3;
            width: 52px;
        }

            .KPIFilterationButtons .button.early span {
                background: #C2DBF6;
            }

                .KPIFilterationButtons .button.early span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.early:hover, .KPIFilterationButtons .button.early.active {
                background: #007BFF;
            }
        /* serving */
        .KPIFilterationButtons .button.serving {
            border-color: #cd03ff;
            color: #fafafab3;
            width: 52px;
        }

            .KPIFilterationButtons .button.serving span {
                background: #eda4ff;
            }

                .KPIFilterationButtons .button.serving span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.serving:hover, .KPIFilterationButtons .button.serving.active {
                background: #cd03ff;
            }
        /* serving */
        .KPIFilterationButtons .button.all {
            border-color: #126DE0;
            color: #FAFAFA;
            width: 52px;
        }

            .KPIFilterationButtons .button.all span {
            }

                .KPIFilterationButtons .button.all span img {
                    width: auto;
                    height: auto;
                    margin-inline-end: 0;
                }

            .KPIFilterationButtons .button.all:hover, .KPIFilterationButtons .button.all.active {
                background: #126DE0;
            }