.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%;} } @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;} }