/*
=========================================================
Courier Tracking Map
Professional Version
=========================================================
*/

#shipmentMap{

    width:100%;

    height:550px;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #e5e7eb;

    background:#f8fafc;

}

/*=========================================================
SEARCH
=========================================================*/

.tracking-search-card{

    border-radius:18px;

}

.tracking-search-card .form-control{

    border-radius:12px;

    height:60px;

    font-size:17px;

}

.tracking-search-card .btn{

    height:60px;

    border-radius:12px;

    font-weight:600;

}

/*=========================================================
ROUTE INFORMATION
=========================================================*/

.route-information{

    height:100%;

    display:flex;

    flex-direction:column;

}

.route-point{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.route-point h6{

    margin-bottom:0;

}

.route-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#f8f9fa;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}

.route-line{

    width:3px;

    background:#dee2e6;

    margin:8px 0 8px 22px;

    flex:1;

    min-height:35px;

}

.origin .route-icon{

    background:#e8fff0;

}

.current .route-icon{

    background:#e9f5ff;

}

.destination .route-icon{

    background:#fff2f2;

}

/*=========================================================
PROGRESS
=========================================================*/

.shipment-progress{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;

    flex-wrap:wrap;

}

.progress-step{

    position:relative;

    flex:1;

    text-align:center;

    min-width:150px;

    margin-bottom:30px;

}

.progress-circle{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#e9ecef;

    color:#6c757d;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:22px;

    font-weight:bold;

    transition:.3s;

}

.progress-step.completed .progress-circle{

    background:#198754;

    color:#fff;

}

.progress-content{

    margin-top:15px;

}

.progress-content h6{

    font-size:15px;

    margin-bottom:5px;

}

.progress-bar-line{

    position:absolute;

    top:28px;

    left:55%;

    width:90%;

    height:5px;

    background:#dee2e6;

    z-index:-1;

}

.progress-bar-line.completed{

    background:#198754;

}

/*=========================================================
OVERVIEW
=========================================================*/

.overview-box{

    padding:25px;

    border-radius:14px;

    border:1px solid #ececec;

    transition:.3s;

    background:#fff;

    height:100%;

}

.overview-box:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

/*=========================================================
TIMELINE
=========================================================*/

.shipment-timeline{

    position:relative;

    margin-left:25px;

}

.shipment-timeline:before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    bottom:0;

    width:4px;

    background:#dfe5ea;

}

.timeline-item{

    position:relative;

    display:flex;

    margin-bottom:40px;

}

.timeline-icon{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#198754;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

    flex-shrink:0;

}

.timeline-body{

    flex:1;

    margin-left:20px;

    background:#fff;

    border-radius:12px;

    border:1px solid #ececec;

    padding:20px;

}

.timeline-item.current .timeline-icon{

    background:#0d6efd;

    animation:pulseTruck 2s infinite;

}

.timeline-item.current .timeline-body{

    border-left:5px solid #0d6efd;

    background:#f8fbff;

}

/*=========================================================
PULSE
=========================================================*/

@keyframes pulseTruck{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(13,110,253,.5);

    }

    70%{

        transform:scale(1.05);

        box-shadow:0 0 0 18px rgba(13,110,253,0);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================================
LEAFLET
=========================================================*/

.leaflet-popup-content{

    font-size:14px;

}

.leaflet-popup-content strong{

    color:#0d6efd;

}

.leaflet-container{

    font-family:inherit;

}

/*=========================================================
TABLES
=========================================================*/

.table td{

    vertical-align:middle;

}

.table th{

    width:45%;

}

/*=========================================================
BADGES
=========================================================*/

.badge{

    padding:.55rem .8rem;

}

/*=========================================================
CARDS
=========================================================*/

.card{

    border-radius:18px;

}

.card-header{

    border-bottom:1px solid #ececec;

    padding:18px 24px;

}

.card-body{

    padding:24px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px){

#shipmentMap{

height:450px;

}

.progress-step{

min-width:100%;

margin-bottom:40px;

}

.progress-bar-line{

display:none;

}

.route-information{

margin-top:25px;

}

}

@media(max-width:768px){

#shipmentMap{

height:350px;

}

.timeline-body{

padding:15px;

}

.card-body{

padding:18px;

}

}