/* stopsKPI */
.kPIs .stopsKPI .KPICardBody {
    display: flex;
    flex-direction: revert;
    justify-content: space-between;
    flex-grow: 1;
}

    .kPIs .stopsKPI .KPICardBody .KPICardBodyTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

        .kPIs .stopsKPI .KPICardBody .KPICardBodyTitle p {
            font-size: 11px;
            text-transform: uppercase;
            margin: 0px;
            color: #fff;
            /*width: 92px;*/
        }

        .kPIs .stopsKPI .KPICardBody .KPICardBodyTitle span {
            font-weight: 600;
            font-size: 9px;
            color: #fff;
            background: none;
            width: auto;
            height: auto;
            padding-inline-end: 10px;
            display: block;
            padding-block: 0;
        }

    .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails {
        /* display: flex; */
        /* justify-content: space-between; */
    }

        .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails div {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

            .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails div p {
                font-size: 9px;
                text-transform: capitalize;
                margin: 0px;
                font-weight: 600;
                padding-inline-end: 4px;
            }

                .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails div p.orangeTitle {
                    color: #e37014;
                }

                .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails div p.greenTitle {
                    color: #17ce1f;
                }

            .kPIs .stopsKPI .KPICardBody .KPICardBodyDetails div span {
                color: #959DAD;
                font-size: 9px;
            }
/*  */
.stopsKPIGraph {
    width: 100px;
    height: 60px;
    overflow: hidden;
    margin-inline-start: 20px;
    margin-top: auto;
    margin-bottom: 0px;
}

.gauge-container > .gauge > .dial {
    stroke: #17CE1F;
    stroke-width: 20;
}

.gauge-container > .gauge > .value {
    stroke: #E37014;
    stroke-width: 20;
}

.gauge-container .gauge .value-text {
    fill: #959DAD;
    font-weight: 600;
    font-size: 11px;
    /* color: #fff;
    opacity: 1; */
}

.kPIs .KPICard.stopsKPI.newAutopilotKpi {
    gap: 8px;
    align-items: center;
    height: 42px;
    background: transparent;
}

/* handle gauge graph*/
.stopsGaugeGraph {
    width: 75px;
    margin-inline-start: 10%;
    position: relative
}

    .stopsGaugeGraph .gauge {
        padding-bottom: 50%;
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        border-radius: 3px;
    }

        .stopsGaugeGraph .gauge:before {
            content: '';
            position: absolute;
            height: 200%;
            width: 100%;
            border-radius: 50%;
            background-color: #41b565;
        }

        .stopsGaugeGraph .gauge:after {
            content: '';
            background: #283E63;
            position: absolute;
            top: 60%;
            inset-inline-end: 30%;
            bottom: -40%;
            inset-inline-start: 30%;
            border-radius: 50%;
        }

    .stopsGaugeGraph .kpiVisitedStops {
        position: absolute;
        color: #28223E;
        inset-inline-start: 3px;
        font-size: 8px;
        bottom: 0;
        font-weight: bold;
        z-index: 1;
    }

    .stopsGaugeGraph .kpiNotVisitedStops {
        position: absolute;
        color: #28223E;
        inset-inline-end: 3px;
        font-size: 8px;
        bottom: 0;
        font-weight: bold;
    }

    .stopsGaugeGraph .gauge__meter {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform-origin: center bottom;
    }

    .stopsGaugeGraph .gauge__meter--:before {
        content: '';
        position: absolute;
        height: 200%;
        width: 100%;
        border-radius: 50%;
        background-color: #F88226;
    }
    /* stop graph tooltip */
    .stopsGaugeGraph .tooltip {
        background: #152B56;
        top: 49%;
        color: #fff;
        display: block;
        inset-inline-start: 45%;
        margin-bottom: 15px;
        opacity: 0;
        /* padding: 20px; */
        pointer-events: none;
        position: absolute;
        width: 236px;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }


    .stopsGaugeGraph:hover .tooltip {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

.stopsGaugeGraphTooltipHeader {
    padding: 10px 18px;
    background: #0B235A;
}

    .stopsGaugeGraphTooltipHeader span {
        color: #F9770C;
        opacity: 85%;
        font-size: 11px;
    }

.stopsGaugeGraphTooltipBody {
    padding: 10px 18px;
}

    .stopsGaugeGraphTooltipBody .stopsGaugeGraphTooltipstatusName {
        font-size: 11px;
        color: #F9770C;
        opacity: 85%;
        /* padding: 0 5px; */
        margin-bottom: 12px;
    }

        .stopsGaugeGraphTooltipBody .stopsGaugeGraphTooltipstatusName .Visited {
        }

        .stopsGaugeGraphTooltipBody .stopsGaugeGraphTooltipstatusName .NotYetVisited {
            color: #17CE1F
        }

    .stopsGaugeGraphTooltipBody .stopsGaugeGraphTooltipstatusCount {
        padding: 0;
        font-size: 11px;
        color: #E3E5EA;
        opacity: 85%;
    }

    .stopsGaugeGraphTooltipBody .stopsGaugeGraphTooltipstatusPercentage {
        font-size: 11px;
        color: #E3E5EA;
        opacity: 85%;
        padding: 0;
    }

.kPIs .KPICard.stopsKPI .KPIFilterationButtons .button.all {
    width: 55px;
    align-items: center;
}

.kPIs .KPICard.stopsKPI .KPIFilterationButtons .button .count {
    display: block;
    min-width: 28px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    text-align: start;
}

.kPIs .KPICard.stopsKPI .KPICardBody {
    max-width: inherit;
    width: calc(100% - 256px);
}

.kPIs .KPICard.stopsKPI .KPIWaitingFilterationButton.KPIFilterationButtons {
    align-items: flex-end;
    justify-content: flex-end;
}

.stopsWaitingAndVisitedAndNotVisited {
    display: flex;
    gap: 10px;
}