.booking-payment-sec {
    background: #fff;
    width: 900px;
    float: none;
    margin: 150px auto;
    padding: 20px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0 0 11PX #00000005;
       -moz-box-shadow: 0 0 11PX #00000005;
            box-shadow: 0 0 11PX #00000005;
    position: relative;
    display: -ms-grid;
    display: grid;
}
.status-dec {
    text-align: center;
}
.c-detail h2 {
    border-bottom: 1px solid #cccccc85;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    border-top: 1px solid #cccccc85;
    padding: 10px 10px;
    background: #f9f9f9;
}
.status-dec span.material-symbols-outlined {
    width: 80px;
    height: 80px;
    border: 2px solid green;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    text-align: center;
    line-height: 80px;
    color: green;
    font-size: 44px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    top: -45px;
    background: #fff;
}
.status-dec h3 {
    margin-top: 30px;
    font-size: 21px;
    font-weight: bold;
}
.status-dec h5 {
    font-size: 15px;
    color: #000;
}
.status-dec h5 strong {
    margin-right: 10px;
}
.c-detail {
    margin-top: 20px;
}
.reserve-detail {position: relative;}
.reserve-detail h2 {  
background: #f9f9f9;
  border-bottom: 1px solid #cccccc85;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    border-top: 1px solid #cccccc85;
    padding: 10px 10px;}
.c-detail .table-responsive {
    margin-top: 20px;
}
ul.payd {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}
ul.payd li {
    width: 50%;
    float: left;
    display: inline-block;
    margin-bottom: 10px;
}
ul.payd li strong {
    margin-right: 6px;
}
ul.payd li span {
    font-size: 14px;
    font-weight: 500;
}
.reserve-detail .table-responsive {
    margin-top: 20px;
}
.booking-payment-sec .table tr td, .booking-payment-sec .table tr th {text-align: center;}
.booking-payment-sec .table tr th{background: #f5fafd;}
.car-detail {
    position: relative;
}
.car-detail h2 {
        border-bottom: 1px solid #cccccc85;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    border-top: 1px solid #cccccc85;
    padding: 10px 10px;
    background: #f9f9f9;
}
.root-detail {position: relative;}
.root-detail h2 {
        border-bottom: 1px solid #cccccc85;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    border-top: 1px solid #cccccc85;
    padding: 10px 10px;
    background: #f9f9f9;
}
.check-box.second .main-checkout {
    display: block;
}
.bookstatus h6 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
.bookstatus p {
    font-size: 15px;
    color: #858585;
}
.bookstatus h5 {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}
.bookstatus {
    position: relative;
    text-align: center;
    margin-top: 20px;
}
.pending .status-dec h5 {
    display: inline-block;
    color: #ec0d00;
    background: #fff2f1;
    font-weight: 500;
    font-size: 13px;
    padding: 3px 12px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    margin-top: 8px;
}
.status-dec h3 {
    margin-top: 30px;
    font-size: 21px;
    font-weight: bold;
}
.pending .status-dec span.material-symbols-outlined {
    border-color: #ec0d00;
    color: #ec0d00;
}


ul.broad-car.payment li:first-child:before {left:200px;}

@media screen and (max-width: 1024px) and (min-width: 768px) {
.booking-payment-sec {width: 100%;}
ul.car-list li {margin-right: 30px;}

}

@media screen and (max-width: 767px) {
    .booking-payment-sec {    display: block; width: 98%; float: left;}
    .booking-payment-sec .main-checkout {padding: 0; display: block;}
    .booking-payment-sec ul.broad li {width: 100%;}
    .booking-payment-sec .list-left { width: 100%; float: left;}
    .booking-payment-sec .check-list { width: 100%; float: left; margin-left: 0; margin-top: 20px;}
    .booking-payment-sec .list-left picture {-webkit-box-pack: center;-webkit-justify-content: center;-moz-box-pack: center;-ms-flex-pack: center;justify-content: center;}
    .booking-payment-sec .list-left picture img {width: auto; height: 100px;}
    .booking-payment-sec ul.broad-car {display: none;}
    .booking-payment-sec ul.broad {display: block;}
    .booking-payment-sec .status-dec { width: 100%;  float: left;}
    .booking-payment-sec .bookstatus { width: 100%;  float: left;}
    .booking-payment-sec .c-detail { width: 100%;  float: left;}
    .booking-payment-sec .reserve-detail  { width: 100%;  float: left;}
    .booking-payment-sec .car-detail { width: 100%;  float: left;}
    .booking-payment-sec .root-detail { width: 100%;  float: left;}
    .booking-payment-sec ul.car-list li {    width: 50%; float: left; margin-right: 0; text-align: center;
    margin-bottom: 20px;}
    .booking-payment-sec ul.broad li h3 {font-size: 14px;}
}