@media (min-width: 992px) {

    .stopDetailsModal .modal-lg, .modal-xl {
        max-width: 1000px;
    }
}

.stopDetailsModal .stopDetailsContent.hidden,
.stopDetailsModal .stopMoreDetailsContent.hidden {
    display: none;
}

.stopDetailsModal .stopDetailsContent,
.stopDetailsModal .stopMoreDetailsContent {
    height: 350px;
}

    .stopDetailsModal .stopDetailsContent .modal-body,
    .stopDetailsModal .stopMoreDetailsContent .modal-body {
        overflow: auto;
        margin: 0px;
        padding: 0px;
    }

        /* stopDetailsContent */
        .stopDetailsModal .stopDetailsContent .modal-body h5.stopAddress {
            color: rgba(254, 254, 254, 0.6);
            font-size: 12px;
            font-weight: 500;
            padding: 12px 22px;
            margin: 0px;
            position: sticky;
            top: 0px;
            background: #223553;
            z-index: 1;
        }

        .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

            .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow {
                background: rgba(11, 35, 90, 0.53);
                /*height: 86px;*/
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 22px;
                margin-bottom: 1px;
            }

                /* StopOrderInfo */
                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderInfo {
                    display: flex;
                    /* justify-content: space-between; */
                    align-items: stretch;
                    /* flex-grow: 1; */
                    /* margin-inline-end: 16px; */
                    height: 60%;
                    flex-direction: column;
                    width: 35%;
                }

                    .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderInfo .StopOrderInfoCol {
                        display: flex;
                        /* flex-direction: column;*/
                        align-items: flex-start;
                        justify-content: flex-start;
                        margin-inline-end: 16px;
                    }

                        .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderInfo .StopOrderInfoCol h4 {
                            font-size: 12px;
                            color: #899CCB;
                            font-weight: 800;
                            margin: 0px 10px 0px 0px;
                            width: 130px;
                            white-space: nowrap;
                            flex-shrink: 0;
                        }

                            .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderInfo .StopOrderInfoCol h4 img {
                                padding-inline-start: 8px;
                            }

                        .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderInfo .StopOrderInfoCol p {
                            font-size: 12px;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin: 0px;
                            line-height: 1.2;
                        }


                /* StopOrderTimes */
                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes {
                }

                    .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer {
               
                    }

                        .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails {
                        }

                            .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails p {
                                font-size: 12px;
                                width: 65px;
                            }

                            .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails ul {
                                margin-inline-end: 16px;
                                width: 220px;
                            }

                                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails ul li,
                                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails ul li span {
                                    font-size: 12px;
                                    color: rgba(149, 157, 173, 1);
                                    /*     margin: 0px 12px 0px 0px;
                                    padding: 0px;
                                    padding-inline-start: 21px;*/
                                }
                                    .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderTimes .routeTimesDetailsContainer .routeTimesDetails ul li span {
                                        padding-inline-start: 0px;
                                        padding-inline-end: 21px;
                                    }
                                    /* StopOrderStatus  */
                                    .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus span {
                                        margin: 0px;
                                        display: block;
                                        color: #ffffff;
                                        /* padding: 2px 16px; */
                                        border: 1px solid #ffffff;
                                        border-radius: 103px;
                                        font-size: 12px;
                                        font-weight: 600;
                                        height: 23px;
                                        /* width: 67px; */
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 0px 12px;
                                    }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .new {
                    color: #ffffff;
                    border-color: #ffffff;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .beingPlanned {
                    color: #87CEFA;
                    border-color: #87CEFA;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .planned {
                    color: #00BFFF;
                    border-color: #00BFFF;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .uploadFailed {
                    color: #DCDCDC;
                    border-color: #DCDCDC;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .waitingForUpload {
                    color: #AFEEEE;
                    border-color: #AFEEEE;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .uploadedToFMS {
                    color: #00FFFF;
                    border-color: #00FFFF;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .confirmedAtAgent {
                    color: #00FFFF;
                    border-color: #00FFFF;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .onRouteToAddress {
                    color: #DDA0DD;
                    border-color: #DDA0DD;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .arrivedAtAddress {
                    color: #66CDAA;
                    border-color: #66CDAA;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .inProcess {
                    color: #98FB98;
                    border-color: #98FB98;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .executed {
                    color: #00FF7F;
                    border-color: #00FF7F;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .processError {
                    color: #FF8C00;
                    border-color: #FF8C00;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .finished {
                    color: #FFFF00;
                    border-color: #FFFF00;
                }

                .stopDetailsModal .stopDetailsContent .modal-body .stopOrderDerails .stopOrderDerailsRow .StopOrderStatus .cancelled {
                    color: #FF0000;
                    border-color: #FF0000;
                }