@media(min-width: 390px){
    .container{
        .progress-container{
            position: relative;
            .progress-bar-container{
                background-color: rgb(203, 203, 203);
                width: 350px;
                border-radius: 10px;
                .progress-bar{
                    width: 10%;
                    height: 5px;
                    background-color: green;
                    margin-bottom: 20px;
                    border-radius: 10px;
                }
            }
            .circle-indictor{
                display: flex;
            }
            .circle-indictor div{
               position: absolute;
               top: -7px;
                width: 20px;
                height: 20px;
                background-color: red;
                border-radius: 100%;
                &:nth-child(1){
                   background-color: green;
                }
                &:nth-child(2){
                    margin-left: 100px;
                    background-color: #ccc;
                }
                &:nth-child(3){
                    margin-left: 240px;
                    background-color: #ccc;
                }
                &:nth-child(4){
                    margin-left: 340px;
                    background-color: #ccc;
                    width: 35px;
                    height: 35px;
                    top: -18px;
                    i{
                        color: white;
                        font-size: 25px;
                        padding:  5px;
                    }
                }
            }
            .airplane{
                position: absolute;
                top: -90px;
                left: 130px;
                img{
                   width: 100px
                }
            }
        }
        .vertical-line-container{
            position: relative;
            margin-top: 150px;
            padding: 0;
            width: 100%;
            height: 720px;
            .vertical-dotted-line{
                position: absolute;
                top: 0%;
                left: 5px;
                width: 5px;
                margin-top: -110px;
                height:900px;
                border-left: 2px dotted black;
            }
            .history-container{
                margin-top: 200px;
                .arrivals{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    ol{
                        li{
                            position: relative;
                            width: 70%;
                            margin: 4px 0 28px 0;
   
                            h6{
                                margin: 0;
                            }
                            p{
                                font-size: 13px;;
                            }
                            span{
                                position: absolute;
                                top: 40px;
                                left: 120%;
                                width: 100%;
                                margin-top: -50px;
                            }
                        }
                    }
                    svg{
                        position: relative;
                        left: -40px;
                        bottom: -25px;
                        color: green;
                        font-size: 25px;
                    } 
                }
               .shipment-created{
                   position: absolute;
                   bottom: -80px;
                   width: 100%;
                   .list-style-2{
                       position: relative;
                        width: 90%;
                        background-color: rgb(224, 224, 239);
                        padding: 7px;
                        border-radius: 20px;
                   }
                   p,h6{
                    color: #000;
                   }
                   ol.order-list-2{
                       list-style: none;
                        li{
                            position: relative;
                            width: 70%;
                            h6{
                                margin: 0;
                            }
                            p{
                                font-size: 13px;;
                            }
                            span.created-span{
                                position: absolute;
                                top: 40px;
                                left: 133%;
                                width: 100%;
                                margin-top: -50px;
                            }
                        
                        }
                    }
                   svg{
                    position: absolute;
                    left: -7px;
                    bottom: 70px;
                    color: green;
                    font-size: 25px;
                    } 
               }
              
            }
            
        }
        .delivery-status{
            column-count: 1; 
            column-gap: 1px;
            margin: 30px 0 70px 0;
        }
        .shipment-facts{
            position: relative;
            top: 50%;
            margin-top: 250px;
            h3{
                font-family:Arial, Helvetica, sans-serif;
                font-weight: normal;
                color:rgba(34, 31, 31, 0.87);
                margin-top: 55px;
            }
            h5{
                margin-top: 40px;
                color:rgb(146, 144, 144);
            }
            table{
                tr{
                    th,td{
                        font-size: 12px;
                        color:rgba(34, 31, 31, 0.87)
                    }
                }
            }
        }
    }
}

@media  (min-width:768px){
    .container{
        width: 100%;
        margin: 20px auto;
    }
    .delivery-status{
        column-count: 3!important;
        column-gap: 30px;
        h5{
            font-size: 15px;
        }
        // column-gap: 10px;
        // column-rule-style: solid;
        // column-rule-color: red;
        // column-rule-width: 2px;
        // column-rule: 2px solid red;
        // column-width: 100px;
        p{
            color:rgb(146, 144, 144);
        }
    }
}
// @media(min-width: 1200px){
//     .vertical-line-container{
//         .container{
//             .spot{
//                 p{
//                     width: 100%
//                 }
//                 .date{
//                     left: -20%;
//                 }
//             }
//         }
//     }
// }

