.userDashboard .dashboardLateVehicles {
    background-image: linear-gradient(to right,#243254,155px, #17ce1fcc 156px, #e37014de 1020px);
}

    /* dashboardLateVehiclesHeader */
    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0px;
        border-start-start-radius: 5px;
        border-start-end-radius: 5px;
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        position: relative;
        background-image: url(../../images/CentralizedDashboard/late-vehicles/late-vehicle-header-bg.svg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 60px;
        background: #184d89b3;
        backdrop-filter: blur(74px);
        -webkit-backdrop-filter: blur(74px);
        height: 58px;
    }

        .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4px 0px;
        }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.lateVehicles {
                width: 123px;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution {
                align-items: flex-start;
                padding: 4px 0px 4px 14px;
                width: 530px;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution {
                flex-grow: 1;
                align-items: flex-start;
                padding: 4px 0px 4px 14px;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader h5 {
                font-weight: 400;
                margin-bottom: 10px;
                font-size: 11px;
            }

                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader h5 img {
                    margin-inline-end: 5px;
                    width: 9px;
                    height: 9px;
                }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader strong {
                color: #919EAC;
                font-size: 9px;
                font-weight: 600;
            }

                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader strong img {
                    width: 11px;
                    height: 11px;
                    margin-inline-end: 8px;
                }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.lateVehicles h5 {
                font-weight: 400;
                color: #919EAC;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution h5 {
                font-weight: 600;
                color: #17CE1F;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution h5 {
                font-weight: 600;
                color: #FF7E16;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution strong.onTime,
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution strong.onTime {
                color: #03c009;
                font-size: 9px;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution strong.late,
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution strong.late {
                color: #ff8000;
                font-size: 9px;
            }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution strong.veryLate,
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution strong.veryLate,
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.execution strong,
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesHeader .lateVehiclesCodeHeader.preExecution strong {
                color: #ff1905;
                font-size: 9px;
            }


    /* dashboardLateVehiclesSection */
    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection {
        overflow: auto;
        /*max-height: calc(100vh - (42px + 100px + 122px + 54px + 50px));*/
        max-height: calc(100vh - 300px);
        border-bottom: 4px solid #184D89;
        border-top: 4px solid #184D89;
        background: #283e63;
    }

        .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow {
            border-inline-start: 4px solid #184D89;
            border-top: 4px solid #184D89;
            border-inline-end: 4px solid #184D89;
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
        }

            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow:last-child {
                border-bottom: 4px solid #184D89;
            }

            /* LateVehicleRowCell */
            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                min-height: 60px;
            }

                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.vehiclePlateNoCell {
                    background: #243254;
                    width: 123px;
                    min-width: 123px;
                    flex-direction: column;
                }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.vehiclePlateNoCell .plateNo {
                        margin-top: 4px;
                        margin-bottom: auto;
                        position: sticky;
                        top: 4px;
                        text-align: center;
                    }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.vehiclePlateNoCell img {
                        /*width: 15px;
                        height: 11px;
                        margin-inline-end: 8px;
                        margin-top: auto;
                        margin-bottom: 0px;*/
                    }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.vehiclePlateNoCell p {
                        color: #CED7DF;
                        font-weight: 500;
                        margin: 0px;
                        font-size: 14px;
                        cursor: pointer;
                        /*     margin-top: 0px;
                        margin-bottom: auto;*/
                    }

                /* order */
                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order {
                    /*width: 310px;
                    min-height: 111px;*/
                    /* width: 230px;
                    height: 184px;*/
                    width: 323px;
                    height: 192px;
                    display: flex;
                    flex-direction: column;
                    padding: 10px 7px;
                    background: #184D89;
                    box-shadow: 0px 3px 15px rgba(3, 10, 37, 0.34);
                    border-radius: 11px;
                    margin-inline-end: 8px;
                    margin-bottom: 8px;
                }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .customerName {
                        text-align: start;
                        font-size: 11px;
                        color: #D8E0E9;
                        margin-bottom: 5px;
                        padding: 0px 7px;
                    }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;
                        background: transparent;
                        color: #FAFAFA;
                        padding: 0px;
                        flex-grow: 1;
                    }

                        .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails,
                        .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails {
                            width: 50%;
                            padding: 0px 0px 4px;
                            background: #84BC82;
                            border: 1px solid rgb(24, 77, 137);
                        }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.redBgDetails,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.redBgDetails {
                                background-color: #FF8E85;
                                color: #283E63;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.orangeBgDetails,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.orangeBgDetails {
                                background-color: #EC9C5B;
                                color: #283E63;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.lightBlueBgDetails,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.lightBlueBgDetails {
                                background-color: #8DC3FF;
                                color: #283E63;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.yellowBgDetails,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.yellowBgDetails {
                                background-color: rgb(224, 224, 73);
                                color: #283E63;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .title,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .title {
                                font-size: 11px;
                                display: flex;
                                align-items: start;
                                margin-bottom: 5px;
                                text-transform: capitalize;
                                background: rgba(30, 45, 72, 0.15);
                                padding: 4px;
                                font-weight: 600;
                            }

                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .title a,
                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .title a {
                                    padding: 0px;
                                    margin: 0px;
                                    text-align: start;
                                    width: calc(100% - 16px);
                                    display: block;
                                    height: 22px;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    text-overflow: ellipsis;
                                    font-weight: 600;
                                }


                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .title span,
                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .title span {
                                    display: flex;
                                    width: 16px;
                                    height: 16px;
                                    border: none;
                                    text-align: center;
                                    font-size: 8px;
                                    color: #3FAE3B;
                                    text-transform: uppercase;
                                    margin-inline-end: 4px;
                                    font-weight: 700;
                                    border-radius: 2px;
                                    background: #184D89;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 11px;
                                }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.redBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.redBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.orangeBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.orangeBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.lightBlueBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.lightBlueBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.yellowBgDetails .title span,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.yellowBgDetails .title span {
                                /*border: 1px solid #D92936;*/
                                color: #D92936;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .city,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .city {
                                font-weight: 600;
                                font-size: 10px;
                                margin-bottom: 5px;
                                height: 15px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                padding: 0px 4px;
                            }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .shopName,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .shopName {
                                font-size: 10px;
                                font-weight: 500;
                                margin-bottom: 5px;
                                height: 30px;
                                overflow: hidden;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                padding: 0px 4px;
                            }

                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .shopName span,
                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .shopName span {
                                    font-weight: 600;
                                }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .eta,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .eta {
                                font-size: 10px;
                                font-weight: 500;
                                margin-bottom: 5px;
                                padding: 0px 4px;
                            }

                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .eta span,
                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .eta span {
                                    font-weight: 600;
                                    width: 24px;
                                    display: inline-block;
                                }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .times, .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .times {
                                padding: 0px 4px;
                                font-weight: 600;
                            }

                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .times p,
                                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .times p {
                                    font-size: 10px;
                                    font-weight: 200;
                                    margin-bottom: 4px;
                                    /*color: #FAFAFA;*/
                                    font-weight: 600;
                                }

                                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails .times p:last-of-type,
                                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails .times p:last-of-type {
                                        margin-bottom: 0px;
                                    }

                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.redBgDetails .times p,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.redBgDetails .times p,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.orangeBgDetails .times p,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.orangeBgDetails .times p,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .loadingDetails.yellowBgDetails .times p,
                            .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell .order .orderDetails .unloadingDetails.yellowBgDetails .times p {
                                /*                                color: #000000;
                                font-weight: 600;*/
                            }


                /* inExecutionOrderCell */
                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.inExecutionOrderCell {
                    width: 530px;
                    /*margin-top: 4px;*/
                    flex-shrink: 0;
                    justify-content: stretch;
                    padding: 4px 0px 2px 14px;
                    align-items: flex-start;
                }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.inExecutionOrderCell .ordersContainer {
                        position: sticky;
                        top: 4px;
                        align-self: flex-start;
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                    }

                    .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.inExecutionOrderCell .order {
                        /*       margin: 0px;
                        margin-bottom:8px;*/
                    }

                .userDashboard .dashboardLateVehicles .dashboardLateVehiclesSection .LateVehicleRow .LateVehicleRowCell.preExecutionOrderCell {
                    background-color: rgba(24, 77, 137, 0.29);
                    flex-grow: 1;
                    justify-content: stretch;
                    padding: 4px 0px 2px 14px;
                    align-items: flex-start;
                }