﻿.userDashboard .dashboardOrders {
    /*    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
    height: 110px;
    width: 50%;
    background: #20223F;
    border: 3px solid #20223F;
    box-shadow: 0px 3px 15px #00000029;*/
    display: flex;
    /*margin-block-end: 10px;*/
    width: 28%;
}

    /* title */
    .userDashboard .dashboardOrders .title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        height: 100%;
        padding: 8px 14px 8px 14px;
        padding: 12px;
        /* background: rgb(24, 77, 137); */
        /* border: 3px solid rgb(24, 77, 137); */
        width: 18%;
    }

        .userDashboard .dashboardOrders .title img {
            /* margin-inline-end: 8px; */
            width: 15px;
            height: 15px;
            margin-inline-end: 5px;
            margin-inline-end: 8px;
            margin-block-end: 5px;
            width: 24px;
            height: 28px;
            display: block;
        }

        .userDashboard .dashboardOrders .title h3 {
            margin: 0px;
            color: #CED7DF;
            /* font-size: 16px; */
            font-weight: 600;
            /* margin-bottom: 16px; */
            margin-bottom: 10px;
            font-size: 13px;
        }

        .userDashboard .dashboardOrders .title p {
            margin: 0px;
            color: #FAFAFA;
            /* font-size: 16px; */
            font-weight: 400;
            font-size: 13px;
        }

            .userDashboard .dashboardOrders .title p span {
                padding-inline-end: 5px;
                font-weight: 800;
                font-size: 22px;
                font-weight: bold;
            }

    .userDashboard .dashboardOrders .graphAndOrdersInPersentage {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 0px 5px;
        background: rgb(7 7 35 / 50%);
    }
    /*  ordersProgress */
    .userDashboard .dashboardOrders .ordersProgress {
        /*background: #184D89;*/
        /* padding: 2px 12px 12px 45px; */
        /*flex-grow: 1;
        display: flex;
        padding: 8px 8px 8px 16px;*/
        width: 100%;
        /* height: 110px; */
        border-radius: 0px;
        /* padding: 16px 20px; */
        /* margin-bottom: 10px; */
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        /*height: 90px;*/
        /*margin-bottom: 6px;*/
        /*padding: 13px;*/
        box-shadow: 0px 3px 15px #00000029;
        background: rgb(24, 77, 137);
        border: 3px solid rgb(24, 77, 137);
    }

        /* graph */
        .userDashboard .dashboardOrders .ordersProgress .graph {
            /* height: 123px;
    width: 123px; */
            /* margin-inline-end: 40px; */
            width: 81px;
            height: 81px;
            /*margin-inline-end: 16px;*/
        }

        /* ordersProgressCounteAndPercentage */
        .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            flex-grow: 1;
            /* margin-inline-end: 45px; */
            padding-top: 10px;
            margin-inline-end: 16px;
        }

            .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order {
                display: flex;
                align-items: baseline;
                width: 100%;
                justify-content: space-between;
            }



                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order .type {
                    width: 80px;
                    font-weight: 600;
                    color: #CED7DF;
                    /* font-size: 18px; */
                    margin: 0px;
                    display: flex;
                    align-items: center;
                    margin-inline-end: 12px;
                    font-size: 13px;
                }

                    .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order .type img {
                        margin-inline-end: 5px;
                        width: 9px;
                        height: 9px;
                    }

                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order .counte {
                    /* font-size: 32px; */
                    font-weight: 800;
                    margin: 0px;
                    /*width: 100px;
                    font-size: 18px;*/
                    width: 40px;
                    font-size: 12px;
                }



                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order .percentage {
                    /* margin: 0px 0px 0px auto; */
                    margin: 0px;
                    width: 60px;
                    text-align: right;
                    font-size: 13px;
                }

                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.veryLate .counte,
                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.veryLate .percentage {
                    color: #FF1905;
                }

                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.late .counte,
                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.late .percentage {
                    color: #FF8000;
                }

                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.onTime .counte,
                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.onTime .percentage {
                    color: #03C009;
                }

                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.early .counte,
                .userDashboard .dashboardOrders .ordersProgress .ordersProgressCounteAndPercentage .order.early .percentage {
                    color: #096DDC;
                }
    /*doneAndServingOrders*/
    .userDashboard .dashboardOrders .doneAndServingOrders {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding: 3px 0px 0px;
        flex-direction: column;
        width: 38%;
        flex-shrink: 0;
        /* border: 1px solid #184D89; */
        background: #243254;
    }
    /* dashboardDoneOrders */
    .userDashboard .dashboardOrders .dashboardDoneOrders {
        display: flex;
        /* align-items: center; */
        /* justify-content: space-between; */
        /* box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); */
        /* border-radius: 12px; */
        /* background-color: rgba(0, 136, 68, 1); */
        /* padding: 12px; */
        /* margin-top: 10px; */
        /* width: 220px; */
        /* height: 34px; */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        color: #8898AA;
        width: 100%;
        padding: 8px 14px 8px 14px;
        border-bottom: 1px solid #20223F;
    }

        .userDashboard .dashboardOrders .dashboardDoneOrders h4 {
            margin: 0px;
            display: flex;
            align-items: center;
            /* font-size: 16px; */
            font-weight: 400;
            /*color: #F4F8FB;*/
            font-size: 13px;
        }

            .userDashboard .dashboardOrders .dashboardDoneOrders h4 img {
                margin-inline-end: 12px;
                width: 19px;
                height: 19px;
            }

            .userDashboard .dashboardOrders .dashboardDoneOrders h4 strong {
                font-weight: 800;
                padding-inline-end: 5px;
            }

        .userDashboard .dashboardOrders .dashboardDoneOrders p.percentage {
            /*margin: 0px;
            font-weight: 600;
            color: #FAFAFA;
            font-size: 13px;*/
            padding-inline-start: 5px;
            color: #F5F5F5;
            font-size: 22px;
            font-weight: bold;
            display: block;
            flex-grow: 1;
            text-align: end;
            margin: 0px;
        }



            .userDashboard .dashboardOrders .dashboardDoneOrders p.percentage span.doneOrders {
                color: #008844;
                margin: 0px;
                width: 80px;
                text-align: right;
                font-size: 13px;
                font-weight: normal;
            }

    /* dashboardServingOrders */

    .userDashboard .dashboardOrders .dashboardServingOrders {
        display: flex;
        /* align-items: center; */
        /* justify-content: space-between; */
        /* box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); */
        /* border-radius: 12px; */
        /* background-color: rgba(0, 136, 68, 1); */
        /* padding: 12px; */
        /* margin-top: 10px; */
        /* width: 220px; */
        /* height: 34px; */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        color: #8898AA;
        width: 100%;
        padding: 8px 14px 8px 14px;
    }

        .userDashboard .dashboardOrders .dashboardServingOrders h4 {
            margin: 0px;
            display: flex;
            align-items: center;
            /* font-size: 16px; */
            font-weight: 400;
            /*color: #F4F8FB;*/
            font-size: 13px;
        }

            .userDashboard .dashboardOrders .dashboardServingOrders h4 img {
                margin-inline-end: 12px;
                width: 19px;
                height: 19px;
            }

            .userDashboard .dashboardOrders .dashboardServingOrders h4 strong {
                font-weight: 800;
                padding-inline-end: 5px;
            }

        .userDashboard .dashboardOrders .dashboardServingOrders p.percentage {
            /*margin: 0px;
            font-weight: 600;
            color: #FAFAFA;
            font-size: 13px;*/
            padding-inline-start: 5px;
            color: #F5F5F5;
            font-size: 22px;
            font-weight: bold;
            display: block;
            flex-grow: 1;
            text-align: end;
            margin: 0px;
        }

            .userDashboard .dashboardOrders .dashboardServingOrders p.percentage span.servingOrders {
                color: #cd03ff;
                margin: 0px;
                width: 80px;
                text-align: right;
                font-size: 13px;
                font-weight: normal;
            }

    .userDashboard .dashboardOrders .rz-legend-right {
        display: none;
    }

    .userDashboard .dashboardOrders .rz-chart {
        position: relative;
        height: 190px;
        margin-inline-end: 15px;
        margin-top: -50px;
        margin-inline-start: 0px;
    }
/* #region ==> routes dashboard*/
/* routesAndLocations */
/*.userDashboard .dashboardRoutes .routesAndLocations {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0px 0px 0px;
    flex-direction: column;
    width: 40%;
    flex-shrink: 0;*/
    /*border: 1px solid #184D89;*/
    /*background: #20223F;
    border-inline-end: 1px solid #8898aa0f;
    height: 100%;
}

    .userDashboard .dashboardRoutes .routesAndLocations .routes {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        color: #8898AA;
        width: 100%;
        border-bottom: 1px solid #20223F;
        padding: 2px 6px 2px 6px;*/
        /* box-shadow: 0px 3px 15px #00000029; */
        /*border-bottom: 1px solid #8898aa0f;
        height: 50%;
    }

        .userDashboard .dashboardRoutes .routesAndLocations .routes img {
            width: 19px;
            height: 19px;
            margin-inline-end: 8px;
            display: block;
        }

        .userDashboard .dashboardRoutes .routesAndLocations .routes span {
            padding-inline-start: 1px;
            margin-top: 5px;
            color: #F5F5F5;
            font-size: 22px;
            font-weight: bold;
            display: block;
            flex-grow: 1;
            text-align: center;
        }

        .userDashboard .dashboardRoutes .routesAndLocations .routes div span {
            font-size: 12px;
            font-weight: 200;
            color: #8898AA;
        }

    .userDashboard .dashboardRoutes .routesAndLocations .locations {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #F5F5F5;
        font-weight: 500;
        font-size: 13px;
        color: #8898AA;
        width: 100%;
        padding: 2px 6px 2px 8px;
        height: 50%;
    }

        .userDashboard .dashboardRoutes .routesAndLocations .locations img {
            width: 13px;
            height: 19px;
            margin-inline-end: 5px;
        }

        .userDashboard .dashboardRoutes .routesAndLocations .locations span {
            padding-inline-start: 1px;
            color: #F5F5F5;
            font-size: 22px;
            font-weight: bold;
            display: block;
            flex-grow: 1;
            text-align: center;
            margin-top: 5px
        }

        .userDashboard .dashboardRoutes .routesAndLocations .locations div span {
            font-size: 12px;
            font-weight: 200;
            color: #8898AA;
        }*/
/*doneAndServingOrders*/
/*.userDashboard .dashboardRoutes .doneAndServingOrders {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0px 0px 0px;
    flex-direction: column;
    width: 60%;
    flex-shrink: 0;*/
    /* border: 1px solid #184D89; */
    /*background: #20223F;
    height: 100%;
}*/
/* dashboardDoneOrders */
/*.userDashboard .dashboardRoutes .dashboardDoneOrders {
    display: flex;*/
    /* align-items: center; */
    /* justify-content: space-between; */
    /* box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); */
    /* border-radius: 12px; */
    /* background-color: rgba(0, 136, 68, 1); */
    /* padding: 12px; */
    /* margin-top: 10px; */
    /* width: 220px; */
    /* height: 34px; */
    /*display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #8898AA;
    width: 100%;
    padding: 2px 6px 2px 6px;
    border-bottom: 1px solid #8898aa0f;
    height: 50%;
}

    .userDashboard .dashboardRoutes .dashboardDoneOrders h4 {
        margin: 0px;
        display: flex;
        align-items: self-start;*/
        /* font-size: 16px; */
        /*font-weight: 400;*/
        /*color: #F4F8FB;*/
        /*font-size: 12px;
        width: 66%;
        position: relative;
    }

        .userDashboard .dashboardRoutes .dashboardDoneOrders h4 > span {
            display: flex;
            flex-direction: column;
        }

            .userDashboard .dashboardRoutes .dashboardDoneOrders h4 > span:nth-of-type(1) {
                width: 78%
            }

            .userDashboard .dashboardRoutes .dashboardDoneOrders h4 > span:nth-of-type(2) {
                color: #FAFAFA;
                font-size: 21px;
                font-weight: bold;
                position: absolute;
                top: 0;
                inset-inline-end: 0;
                text-align: end;
            }

        .userDashboard .dashboardRoutes .dashboardDoneOrders h4 p {
        }

        .userDashboard .dashboardRoutes .dashboardDoneOrders h4 img {
            margin-inline-end: 12px;
            width: 19px;
            height: 19px;
            margin-bottom: 5px;
        }

        .userDashboard .dashboardRoutes .dashboardDoneOrders h4 strong {
            font-weight: 800;
            padding-inline-end: 5px;
        }

    .userDashboard .dashboardRoutes .dashboardDoneOrders p.percentage {*/
        /*margin: 0px;
            font-weight: 600;
            color: #FAFAFA;
            font-size: 13px;*/
        /*padding-inline-start: 5px;
        color: #F5F5F5;
        font-size: 22px;
        font-weight: bold;
        display: block;
        flex-grow: 1;
        text-align: end;
        margin: 0px;
    }



        .userDashboard .dashboardRoutes .dashboardDoneOrders p.percentage span.doneOrders {
            color: #FF1905;
            margin: 0px;
            width: 80px;
            text-align: right;
            font-size: 12px;
            font-weight: normal;
        }*/

/* dashboardServingOrders */

/*.userDashboard .dashboardRoutes .dashboardServingOrders {
    display: flex;*/
    /* align-items: center; */
    /* justify-content: space-between; */
    /* box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); */
    /* border-radius: 12px; */
    /* background-color: rgba(0, 136, 68, 1); */
    /* padding: 12px; */
    /* margin-top: 10px; */
    /* width: 220px; */
    /* height: 34px; */
    /*display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #8898AA;
    width: 100%;
    padding: 2px 6px 2px 6px;
    height: 50%;
}

    .userDashboard .dashboardRoutes .dashboardServingOrders h4 {
        margin: 0px;
        display: flex;
        align-items: flex-start;*/
        /* font-size: 16px; */
        /*font-weight: 400;*/
        /*color: #F4F8FB;*/
        /*font-size: 12px;
        width: 64%;
        position: relative;
    }


        .userDashboard .dashboardRoutes .dashboardServingOrders h4 > span {
            display: flex;
            flex-direction: column;
        }

            .userDashboard .dashboardRoutes .dashboardServingOrders h4 > span:nth-of-type(1) {
                width: 78%
            }

            .userDashboard .dashboardRoutes .dashboardServingOrders h4 > span:nth-of-type(2) {
                color: #FAFAFA;
                font-size: 21px;
                font-weight: bold;
                position: absolute;
                top: 0;
                inset-inline-end: 0;
                text-align: end;
            }

        .userDashboard .dashboardRoutes .dashboardServingOrders h4 img {
            margin-inline-end: 12px;
            width: 19px;
            height: 19px;
            margin-bottom: 5px;
        }

        .userDashboard .dashboardRoutes .dashboardServingOrders h4 strong {
            font-weight: 800;
            padding-inline-end: 5px;
        }

    .userDashboard .dashboardRoutes .dashboardServingOrders p.percentage {*/
        /*margin: 0px;
            font-weight: 600;
            color: #FAFAFA;
            font-size: 13px;*/
        /*padding-inline-start: 5px;
        color: #F5F5F5;
        font-size: 22px;
        font-weight: bold;
        display: block;
        flex-grow: 1;
        text-align: end;
        margin: 0px;
    }

        .userDashboard .dashboardRoutes .dashboardServingOrders p.percentage span.servingOrders {
            color: #FF8000;
            margin: 0px;
            width: 80px;
            text-align: right;
            font-size: 12px;
            font-weight: normal;
        }

.userDashboard .dashboardRoutes {
    width: 24%;
    display: flex;
    align-items: self-start;
}*/
/* #endregion */
/* #region => dashboardDrivers*/
/*.userDashboard .dashboardDrivers {
    width: 20%;
}

    .userDashboard .dashboardDrivers .dashboardDriversKPI {
        width: 100%;
        border-radius: 0px;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        box-shadow: 0px 3px 15px #00000029;
        background: rgb(24, 77, 137);
        border: 3px solid rgb(24, 77, 137);
    }

    .userDashboard .dashboardDrivers .title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        height: 100%;
        padding: 8px 14px 8px 14px;
        padding: 12px;
        width: 24%;
    }

        .userDashboard .dashboardDrivers .title img {
            width: 15px;
            height: 15px;
            margin-inline-end: 5px;
            margin-inline-end: 8px;
            margin-block-end: 5px;
            width: 24px;
            height: 28px;
            display: block;
        }

        .userDashboard .dashboardDrivers .title h3 {
            margin: 0px;
            color: #CED7DF;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .userDashboard .dashboardDrivers .title p {
            margin: 0px;
            color: #FAFAFA;
            font-weight: 400;
            font-size: 13px;
        }

            .userDashboard .dashboardDrivers .title p span {
                padding-inline-end: 5px;
                font-weight: 800;
                font-size: 22px;
                font-weight: bold;
            }

    .userDashboard .dashboardDrivers .dashboardDriversKPIWaitingBusy {
        display: flex;
        align-items: start;
        flex-direction: column;
        flex-grow: 1;
        padding: 0px 5px;
        background: rgb(7 7 35 / 50%);
        padding: 15px 19px;
    }

    .userDashboard .dashboardDrivers .dashboardDriversKPIBusy {
        display: flex;
        justify-content: start;
        width: 100%;
        gap: 12px;
        align-items: center;
    }

        .userDashboard .dashboardDrivers .dashboardDriversKPIBusy img {
        }

        .userDashboard .dashboardDrivers .dashboardDriversKPIBusy .busyText {
            color: #CED7DF;
            font-size: 11px;
            width: 48%;
        }

        .userDashboard .dashboardDrivers .dashboardDriversKPIBusy .busyCount {
            width:32%;
            text-align: end;
            color: #FF1905;
            font-size: 17px;
        }
    .userDashboard .dashboardDrivers .dashboardDriversKPIWaiting {
        display: flex;
        justify-content: start;
        width: 100%;
        gap: 12px;
        align-items: center;
    }
    .userDashboard .dashboardDrivers .dashboardDriversKPIWaiting img {
    }

        .userDashboard .dashboardDrivers .dashboardDriversKPIWaiting .waitingText {
            color: #CED7DF;
            font-size: 11px;
            width: 48%;
        }

        .userDashboard .dashboardDrivers .dashboardDriversKPIWaiting .waitingCount {
            width: 32%;
            text-align: end;
            color: #DCC14E;
            font-size: 17px;
        }*/
/* #endregion */
