<!-- to be commented -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/css/style.css" />

<link rel="stylesheet" href="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/css/select.min.css" />

<link rel="stylesheet" href="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/css/bootstrap-datetimepicker.min.css" />

<link rel="stylesheet" href="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/css/bootstrap3.css" />

<link rel="stylesheet" href="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/css/reservation-corporate.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">




<!-- <script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/sweetalert.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/jquery.min.js" type="text/javascript"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/angular.min.js" type="text/javascript"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/moment.min.js" type="text/javascript"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/angular-sanitize.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/angular-animate.min.js"></script>

<!-- <script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/angular-touch.min.js"></script> -->

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/ui-bootstrap.min.js"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/utilities.js" type="text/javascript"></script>

<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/includes/reservation.js" type="text/javascript"></script>

<html>

<script type="text/javascript">
    function errorCallback(error) {

        console.log(JSON.stringify(error));

    }

    function cancelCallback() {

        console.log('Payment cancelled');

        var $ = jQuery.noConflict();

        // $("#paymentDetailsBtn").trigger("click");

        //$("#saveBtn").trigger("click");

    }

    function completeCallback(resultIndicator, sessionVersion) {

        var $ = jQuery.noConflict();

        // $("#paymentDetailsBtn").trigger("click");

        $("#saveBtn").trigger("click");

    }

    //   $.ajax({

    //     type: 'GET',

    //     dataType: 'jsonp',

    //     url: 'http://localhost/Speed/wp-content/plugins/speed-bookings-engine-lb/modules/PaymentGateway/getSessionId.php',

    //     success: function (data) {

    //         alert("yes: " + data);

    //     },

    //     error: function (xhr, ajaxOptions, thrownError) {

    //         alert(xhr.responseText);

    //         // alert(xhr.responseText);

    //         // alert(thrownError);

    //         Checkout.configure({

    //           session: {

    //           id: xhr.responseText

    //         },

    //           interaction: {

    //                 merchant: {

    //                     name: 'Your merchant name',

    //                     address: {

    //                         line1: '200 Sample St',

    //                         line2: '1234 Example Town'

    //                     }

    //                 }

    //            }

    //         });

    //     }

    // });</script>

    </head>

<body>

    <!--         <input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />

            <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" /> -->

</body>



</html>

<script>
    function gtag_report_conversion_For_Booking(url) {

        var callback = function () {

            if (typeof (url) != 'undefined') {

                window.location = url;

            }

        };

        gtag('event', 'conversion', {

            'send_to': 'AW-977739332/1QvDCNT93gkQxLyc0gM',

            //'value': 1.0,

            //'currency': 'USD',

            'event_callback': callback

        });

        return false;

    }</script>

<style type="text/css">

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>

<!-- ng-init="initial('https://car2go.rent/lb/')" -->

<div ng-app="app" ng-controller="bookings as vm" ng-init="initial('https://car2go.rent/lb/', true)" ng-cloak>


    <style>
    input[type="checkbox"]:checked {
            accent-color: silver;
        }

        .swal-footer {

            text-align: center !important;

        }



        #customTabElement li.active>a {

            background: {

                    {

                    navTabBgColor

                }

            }



             !important;

        }



        #customTabElement li>a,

        #customTabElement .tab-number {

            font-size: {

                    {

                    navigationTextSize

                }

            }



            px !important;

            /*color: {{navTabTextColor}} !important;*/

        }



        #other-pricing-tabs a {

            color: #263a45 !important;

            font-size: 12px;

            text-decoration: underline;

        }



        #c247 .sx-gc-button-cta-green:hover {

            background: {

                    {

                    buttonBgColor

                }

            }



             !important;

        }



        #customTabElement li.active a span.tab-number {

            color: {

                    {

                    navTabBgColor

                }

            }



             !important;

        }



        #c247 h1 {

            #e60000 !important

            /*color: {{headingTextColor}} !important;*/

            /*font-size: {{headingTextSize}}px !important;*/

            color: #e60000 !important;

            font-size: 20px !important;

        }



        #c247 .sx-waiting-infotop {

            border-radius: 61px;

        }



        #c247 .sx-gc-button-cta-green,

        #c247 .btn-style-custome,

        #booking-reservation-area #customTabElement .book-my-reservation {

            border: 2px solid {

                    {

                    buttonBgColor

                }

            }



             !important;



            background: {

                    {

                    buttonBgColor

                }

            }



             !important;



            color: {

                    {

                    btnTextColor

                }

            }



            ;

        }



        #booking-reservation-area .modal-dialog {

            width: 680px;

            top: 30px;

        }



        /*---------------------------------------------*/

        .post-inner {

            background: #fff !important;

        }



        /*---------------------------------------------*/

        .card {

            position: relative;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;

            -webkit-box-orient: vertical;

            -webkit-box-direction: normal;

            -ms-flex-direction: column;

            flex-direction: column;

            min-width: 0;

            word-wrap: break-word;

            background-color: #fff;

            background-clip: border-box;

            border: 1px solid rgba(0, 0, 0, .125);

            border-radius: 5px;

            box-shadow: 0px 0px 10px -5px #888888;

            position: relative;

            margin-bottom: 40px;

            height: 430px;

        }



        .card-img-top {

            width: 100%;

            border-top-left-radius: calc(.25rem - 1px);

            border-top-right-radius: calc(.25rem - 1px);

        }



        .card-body {

            -webkit-box-flex: 1;

            -ms-flex: 1 1 auto;

            flex: 1 1 auto;

            padding: 1.25rem;

        }



        .card-body {

            -webkit-box-flex: 1;

            -ms-flex: 1 1 auto;

            flex: 1 1 auto;

            padding: 1.25rem;

        }



/*         .card hr {

            margin-top: 20px !important;

            margin-bottom: 20px !important;

            border: 1px solid #C7C4C4 !important;

            width: 268px !important;

            position: relative !important;

            top: 0px !important;

            margin: 12px 8px !important;

        }
 */

		.card hr {
    border: 0 !important;
    border-top: 1px solid rgba(199, 196, 196, 0.45) !important; /* 👈 thinner feel */
    width: 268px !important;
    margin: 12px 8px !important;
    height: 0 !important;
}



        .card img {

            height: 179px;

            min-height: 20px;
			object-fit: cover;

        }



        .card-img-top-height {

            height: 160px;

        }



        #booking-reservation-area hr:before,

        #booking-reservation-area hr:after {

            display: none;

        }



        .card-footer {

            padding: .75rem 1.25rem;

        }



        .card-price {

/*             background: #263a45; */

            color: #dadada;

            font-size: 11px;

            padding: 4px 10px;

            border-radius: 15px;

        }



        .card-title {

            font-size: 14px;

            margin-top: 10px;

        }



        .card-title h5 {

            font-weight: bolder;

        }



        .card-body ul {

            margin: 0px;

            padding: 0px;

        }



        .card-body ul li {

            display: block;

            margin: 0;

        }



        .card-body ul li i {

            font-size: 14px;

            margin-right: 6px;
			font-size: 20px;
			color: #6B7280;

        }



        .card-body ul li span {

            font-size: 12px;

        }



        .car-title {

            font-weight: bolder;

        }


		#booking-reservation-area .panel-default .form-group {
    margin-bottom: 16px !important;
}


        .card-footer {

            position: absolute;

            bottom: -12px;

            justify-content: center;

            margin: 16px auto;

            width: 100%;

        }



        .bg-yellow {

            background-color: {

                    {

                    buttonBgColor

                }

            }



             !important;



            color: {

                    {

                    btnTextColor

                }

            }



             !important;

        }



        .card-footer button {

            width: 100%;

        }



        .filters-area {

            background-color: #fff;

            box-shadow: 0px 0px 10px -2px #888888;

            border-radius: 5px;

            padding: 15px;

        }



        .pickupType,

        .bookingType {

            margin: 10px 0;

            margin-bottom: 15px !important;

        }



        .bookingType li {

            text-align: center;

            background: #f2f2f2;

            padding: 8px;

            border-radius: 3px;

            color: #afafaf;

            font-size: 10px;

            text-transform: uppercase;

            cursor: not-allowed;

            line-height: 16px;

        }



        .bookingType li.active {

            background-color: {

                    {

                    buttonBgColor

                }

            }



             !important;



            color: {

                    {

                    btnTextColor

                }

            }



             !important;

        }



        .bg-black {

            background-color: {

                    {

                    btnTextColor

                }

            }



             !important;

            color: #dadada !important;

        }



        .filters-area h1 {

            font-size: 23px !important;

            font-weight: bolder !important;

            text-align: center !important;

        }



        .has-search .form-control {

            padding-left: 2.375rem;

        }



        .has-search .form-control-feedback {

            position: absolute;

            z-index: 2;

            display: block;

            width: 2.375rem;

            height: 2.375rem;

            line-height: 2.375rem;

            text-align: center;

            pointer-events: none;

            color: #aaa;

        }



        #booking-reservation-area .form-control-feedback {

            right: 25px !important;

        }



        .ui-select-choices-group {

            margin-top: 0 !important;

            margin-left: 0 !important;

        }



        .step-2-3-4-sidebar {

            background-color: #fff;

            box-shadow: 0px 0px 10px -2px #888888;

            border-radius: 5px;

            padding: 15px;

        }



        .btn {

            box-shadow: 2px 2px 6px -3px #888888;

        }



        .time-part {

            margin-top: 5px;

        }



        #booking-reservation-area .card-footer {

            background-color: #ffffff00 !important;

            border-top: none !important;

        }



        .datepicker table tr td.active:active,

        .datepicker table tr td.active.highlighted:active,

        .datepicker table tr td.active.active,

        .datepicker table tr td.active.highlighted.active {

            background-color: #2b3e4c;

        }




        .datepicker table tr td.active:active,

        .datepicker table tr td.active.highlighted:active,

        .datepicker table tr td.active.active,

        .datepicker table tr td.active.highlighted.active,

        .open>.dropdown-toggle.datepicker table tr td.active,

        .open>.dropdown-toggle.datepicker table tr td.active.highlighted {

            background-color: #2b3e4c;

            border-color: #2b3e4c;

            color: #ffffff;

        }



        .datepicker table tr td.active,

        .datepicker table tr td.active:hover {

            background: #2b3e4c;

        }



        #booking-reservation-area h4 {

            font-size: 14px !important;

            font-weight: 700 !important;

            /* color: #263a45 !important; */

        }



        @media screen and (max-width: 768px) {

            .filters-area {

                margin-bottom: 20px;
/* 				height: 605px !important; */

            }



            .card-footer .mrgn-btm {

                margin-bottom: 5px !important;

            }



            .card-footer {

                bottom: -15px !important;

            }

        }



        @media screen and (min-width: 1024px) {

            .filters-area {

                height: 560px;

            }
            .car-specs {
            position: relative;

            top: -20px;
            }

        }



	@media screen and (max-width:374px){

		.custom-margin{

			margin-left:-3px !important;

		}

		.vehicle-image{
		    margin-top: 30px;
		}

	}

	/* For extra-small screens (xs): <576px */
@media (max-width: 575.98px) {
    /* Add your styles here for xs screens */
    .vehicle-image{
		    margin-top: 30px;
		}
}

/* For small screens (sm): ≥576px and <768px */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Add your styles here for sm screens */
    .vehicle-image{
		    margin-top: 30px;
		}
}


        input[type="checkbox"]:checked {
            background-color: #4caf50;
            border-color: #4caf50;
        }
	@media (min-width: 900px) {

		#booking-reservation-area #c247 .car-details
		{
			margin: 10px !important
    		background-color: #fff;
			padding: 18px 10px 0px 15px;
/*         	max-height: 280px !important; */
    		border-radius: 5px;
    		box-shadow: 0px 0px 10px -2px #888888 !important;

		}
		.col-md-12 .title-heading

		{

			padding-left: 30px !important;

		}
		#booking-reservation-area #c247 .charges-section
		{
        margin-bottom: 5px !important;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
        padding: 20px 15px 0px 15px !important;

		}
		#booking-reservation-area #c247 .charges-summary
		{

		margin-bottom: 5px !important;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
        padding: 15px 15px 12px 15px !important;

		}
		.disclaimer-section {
			margin-top: 20px !important;
			margin-bottom: 20px !important;
			background: #F2F4F6;
    		border-radius: 5px;
    		padding: 25px 20px 20px 20px !important;
    		margin-left: 14px;
    		width: 98% !important;
		}
		.col-md-12.pickup-details {
			margin-top: -2px;
            padding: 15px;
            background-color: #F4F6F8;
            border-radius: 6px;
            width: 339px !important;
		}
		.col-md-12.drop-off-details {
			margin-top: -2px;
            padding: 15px;
            background-color: #F4F6F8;
            border-radius: 6px;
            width: 339px !important;
		}
		.vehicle-image {
			margin-bottom: 10px;
			height:208px !important;
		}
		.features-list{
			/*margin-top: 20px;*/
			margin-left: 25px;
		}
		.image-feature{
		    display: flex;
		}
		.next-btn{
			min-width:170px;
			min-height:40px;
		}
		.back-btn{
			min-width:170px;
			min-height:40px;
		}
		button.btn.btn-primary.blue.book-my-reservation.ng-scope{
			min-width: 160px !important;
			min-height: 40px !important;
		}
		.panel.panel-default.row.driver-details {
			border: 2px solid red !important
    		margin-bottom: 5px !important;
    		background-color: #fff;
    		border-radius: 5px;
    		min-height: 665px !important;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
			padding: 15px 15px 0px 15px !important;
			}

	}
	@media (max-width: 900px) {

		#booking-reservation-area #c247 .car-details
		{
			margin: 10px !important;
    		background-color: #fff;
    		padding: 5px 10px 0px 15px;
    		height: 100% !important;
    		border-radius: 0px;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);

		}
		.col-md-12.title-heading
		{

			padding-left: 20px !important;

		}
		#booking-reservation-area #c247 .charges-section
		{
    		margin-bottom: 5px !important;
    		background-color: #fff;
    		border-radius: 0px;
    		height: auto !important;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    		padding-top: 25px !important;

		}
		#booking-reservation-area #c247 .charges-summary
		{
			margin: 10px !important;
    		background-color: #fff;
    		border-radius: 0px;
    		height: auto;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);

		}
		.disclaimer-section {
margin-left: 10px;
        margin-right: 14px;
			background: #F2F4F6;
    		border-radius: 5px;
    		padding: 8px;
    		margin-left: 14px;
    		width: 98%;
			display: flow-root !important;
		}
		.col-md-12.pickup-details {
    		padding: 15px;
    		background-color: #F4F6F8;
    		border-radius: 6px;
			}
		.col-md-12.drop-off-details {
    		padding: 15px;
    		background-color: #F4F6F8;
    		border-radius: 6px;
			}
		.vehicle-image {
			margin-bottom: 10px;
			height:100% !important;
			width: 80% !important;
		}
		.col-md-5.features-list{
			margin-top: -40px;
			padding: 15px;
		}
		.next-btn{
			min-width:130px;
			min-height:40px;
		}
		.back-btn{
			min-width:130px;
			min-height:40px;
			background-color: #fff !important;
		}
		button.btn.btn-default.mrgn-btm.back-btn.ng-binding{
			min-width:130px;
			min-height:40px;
			background-color: white !important;
			margin-left: -10px !important;
		}
		button.btn.btn-primary.blue.book-my-reservation.ng-scope{
			min-width: 160px !important;
			min-height: 40px !important;
			margin-left: -20px !important;
		}
		.panel.panel-default.row.driver-details {
    		margin-bottom: 5px !important;
    		background-color: #fff;
    		border-radius: 5px;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    		padding-top: 0px !important;
			}
		}
		@media (max-width: 768px){
			#booking-reservation-area #c247 .charges-section
		{
			margin: 10px !important;
    		background-color: #fff;
    		border-radius: 0px;
    		height: auto !important;
    		box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    		padding-top: 25px !important;
			line-height: 1.5 !important;

		}

		}

button.btn.btn-default.mrgn-btm.back-btn.ng-binding:hover {
    color: black !important;
}
#booking-reservation-area .text-danger {
    color: #000000 !important;
}
#booking-reservation-area .form-control:focus {
    border-color: #cccccc !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(0 0 0 / 60%) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #0707076e !important;
	}
button.btn.btn-default.blue.pull-right.bg-black.find-now.sc_button_hover_slide_left {
    background: linear-gradient(to right, #00bcb4 50%, #00bcb4 50%) no-repeat scroll right bottom / 210% 100% #00bcb4 !important;
    color: black !important;
}
		button.btn.btn-default.mrgn-btm.back-btn.ng-binding.sc_button_hover_slide_left{
	background: linear-gradient(to right, #ffffff 50%, #ffffff 50%) no-repeat scroll right bottom / 210% 100% #ffffff !important;
}
.modal {
  z-index: 100005 !important;
}
.modal-backdrop {
  z-index: 100004 !important;
}

        .ui-select-match {
            overflow: hidden !important;
        }


    .c-1 {
    display: flex !important;
    flex-direction: column !important;
		align-items: center;
    gap: 20px !important;
}

@media (max-width: 768px) {
  .panel.panel-default.row.driver-details {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
	.c-17{
    padding-left: 24px;
    padding-right: 24px;
}
		 .c-1 {
        display: block !important;
/* 			 margin-left: 10px;
        margin-right: 14px; */
    }
    }

		#booking-reservation-area .btn-primary{
			color: #fff;
    background-color: #6d27d9 !important;
    border-color: #6d27d9 !important;
		}

.panel.panel-default.row.driver-details {
    margin-bottom: 5px !important;
    background-color: #fff;
    border-radius: 5px !important;
    display: flow-root;
    min-height: auto !important;
    height: auto !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    padding: 15px !important;
}


/* 		.car-specs{
			margin-bottom: 45px !important;
		} */

.custom-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
  height: 400px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card-img-top {
  width: 100%;
  height: 260px;
  object-fit: cover;
  cursor: pointer;
}

.card-body.card-header {
  padding: 12px 20px 0px 20px;
  position: relative;
}

.card-price {
  font-weight: 800;
  font-size: 14px;
  color: #6d27d9;
}

.card-price strong {
  font-weight: 900;
  font-size: 28px;
/*   margin-right: 4px; */
}

.card-price small {
  font-weight: 500;
  font-size: 14px;
  color: #6d27d9;
}

.image-count {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 12px;
  color: silver;
  font-weight: 600;
  cursor: pointer;
}

.image-count i {
  margin-right: 4px;
}

.card-title {
  font-weight: 700;
  font-size: 18px;
  margin-top: -7px;
  color: #222;
}

.card-subtitle {
  font-weight: 500;
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.or-similar {
  font-weight: 500;
  font-size: 12px;
  color: #6B7280 !important;
  margin-top: -4px;
  margin-bottom: 12px;
}

hr {
  margin: 0 20px;
}
		#booking-reservation-area #c247 hr{
			border-color: #C7C4C4 !important;

		}

.car-specs {
  flex-grow: 1;
  padding: 0px 20px -1px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.specs-list li {
  flex: 1 1 calc(25% - 10px);
  max-width: calc(29% - 10px);
  text-align: center;
  color: #444;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.specs-list li i,
.spec-icon {
  font-size: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: #6d27d9;
  object-fit: contain;
}

.specs-list li span {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
  color: #222;
}

.card-footer {
  padding: 10px 20px 13px 20px;
  text-align: center;
}

.btn-book {
  width: 100%;
  background-color: #6d27d9;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-book:hover {
  background-color: #591eb7;
}

		.spec-icon {
  height: 24px !important;
  width: auto !important;
  min-height: 0 !important;
}

		.specs-list span{
			font-size: 9px !important;
		}

		@media (max-width: 768px) {
  .custom-card {
    height: 416px !important;
  }
			.card-body{
				flex: 0 1 auto !important;
			}
}

		.specs-list span{
			color: #6B7280 !important;
			line-height: 20px !important;
			font-weight: 500 !important;
		}

.card-price {
	font-family: 'Inter', sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  color: #6d27d9 !important;
  line-height: 1 !important;
}

.card-price .currency {
  font-size: 9px !important;
  font-weight: 800 !important;
/*   letter-spacing: 1px !important; */
  margin-bottom: 2px !important;
}

.card-price .price-row {
  display: flex !important;
  align-items: flex-end !important;
}

.card-price strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.card-price small {
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
		.price-row{
			margin-left: -20px;
    margin-top: 4px;
		}
		.currency{
			line-height: 0;
		}
		.card-subtitle{
			font-family: 'Inter', sans-serif !important;
			font-weight: 500 !important;
			color: #6B7280 !important;

		}
		.card-title{
			font-family: 'Inter', sans-serif !important;
		}

		@media (max-width: 768px) {
  .custom-card {
    height: 428px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 25px auto !important;
  }
}



		@media (max-width: 768px) {
  #other-pricing-tabs .row {
    display: flex;
    flex-wrap: nowrap;  
    align-items: center;
  }

  #other-pricing-tabs .row {
    font-size: 12px;
    padding: 0 0px !important;
    white-space: nowrap; /* text wrap na ho */
    overflow: hidden;
/*     text-overflow: ellipsis; */
  }

  input[type="checkbox"] {
    transform: scale(1.2);
    margin: 0;
	  z-index: 9999 !important;
  }

  /* Column widths adjust karo */
  #other-pricing-tabs .col-xs-2 {
    width: 10%;
  }
  #other-pricing-tabs .col-xs-10 {
    width: 1%;
  }
  #other-pricing-tabs .col-sm-6,
  #other-pricing-tabs .col-xs-6 {
    width: 1%;
  }
			@media (max-width: 480px) {

  #other-pricing-tabs .row {
    flex-wrap: wrap !important;
/*     white-space: normal !important; */
    overflow: visible !important;
  }

/*   #other-pricing-tabs .col-xs-2,
  #other-pricing-tabs .col-xs-10
				{
    width: 1% !important;
  } */
				.next-btn{
					width: 100% !important;
				}
				.features-list{
					margin: 7px 0px -38px 7px;
				}

}
/*   .a-37{
		margin-right: 71px !important;
  } */
/* 			.price-section__left__dayprice {
				font-size: 9px !important;
				padding-bottom: 0px !important;
			} */

			#booking-reservation-area hr {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    border: none !important;
/*     border-top: 1px solid #eee; */
}
			.a-38{
/* 				border: 2px solid red !important; */
				width: 329px !important
			}
			#booking-reservation-area input[type="radio"], #booking-reservation-area input[type="checkbox"] {
    margin: 7px 2px 0 !important;
    margin-top: 1px \9;
    line-height: normal;
}
			@media (max-width: 768px) {

  .no-mobile-change {
    display: block !important;
  }

  .no-mobile-change > div {
    width: 50% !important;
    float: left !important;
  }

}
}
		@media (max-width: 480px) {

  #other-pricing-tabs .next-btn {
    flex-wrap: unset;
	  white-space: unset;
    overflow: unset;
	  width: 100% !important;
  }
				#other-pricing-tabs .next-btn {
  display: block;
  width: fit-content;   /* sirf jitni zarurat ho utni width */
  margin-left: auto;    /* right push karega */
}

/* #other-pricing-tabs .col-xs-2,
#other-pricing-tabs .col-xs-10 {
  width: 1% !important;
} */


#other-pricing-tabs .next-btn {
  width: auto !important;
  max-width: none !important;
  display: inline-block;
  margin-left: auto;
}
			.a-39{
				margin-left: 37px !important;
			}
			.a-40{
				margin-left: 37px !important;
			}
			.price-section__left__dayprice{
				font-size: 12px !important;
				margin-bottom: -1px !important;
			}
			.d-9{
				margin-right: -38px !important;
				
			}
			.rate-display {
    margin-right: -125px !important;
  }
			.a-41{
				width: 100% !important;
			}


}
		@media (max-width: 768px) {
  .card-img-top {
    width: 900px !important;
    height: 181px !important;
    object-fit: contain !important;
  }

}

		.title-heading{
			 font-family: 'Inter', sans-serif !important;
		}


		@media (max-width: 1024px) {
  #other-pricing-tabs .row {
    display: flex;
    flex-wrap: wrap;
/*     align-items: center; */
  }
			    #booking-reservation-area .col-sm-1 {
        width: 4.333333% !important;
    }
			.s-4{
				width: 27% !important;
			}
			

  #other-pricing-tabs .row {
    font-size: 12px;
    padding: 0 8px !important;
    white-space: nowrap; /* text wrap na ho */
    overflow: hidden;
  }

  input[type="checkbox"] {
    transform: scale(1.2);
    margin: 0;
    z-index: 9999 !important;
  }

  /* Column widths adjust karo */
  #other-pricing-tabs .col-xs-2 {
    width: 10%;
  }
  #other-pricing-tabs .col-xs-10 {
    width: 1%;
  }
  #other-pricing-tabs .col-sm-6,
  #other-pricing-tabs .col-xs-6 {
    width: 1%;
  }

  @media (max-width: 480px) {
    #other-pricing-tabs .row {
      flex-wrap: wrap !important;
      overflow: visible !important;
    }

/*     #other-pricing-tabs .col-xs-2,
    #other-pricing-tabs .col-xs-10 {
      width: 1% !important;
    } */

    .next-btn {
      width: 100% !important;
    }
  }

/*   .a-37 {
    margin-right: 71px !important;
  } */

  #booking-reservation-area hr {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    border: none !important;
  }

  .a-38 {
    width: 329px !important;
  }

  #booking-reservation-area input[type="radio"],
  #booking-reservation-area input[type="checkbox"] {
    margin: 7px 2px 0 !important;
    margin-top: 1px \9;
    line-height: normal;
  }

  .no-mobile-change {
    display: block !important;
  }

  .no-mobile-change > div {
    width: 50% !important;
    float: left !important;
  }
}

@media (max-width: 480px) {
  #other-pricing-tabs .next-btn {
    flex-wrap: unset;
    white-space: unset;
    overflow: unset;
    width: 100% !important;
  }

  #other-pricing-tabs .next-btn {
    display: block;
    width: fit-content;
    margin-left: auto;
  }

/*   #other-pricing-tabs .col-xs-2,
  #other-pricing-tabs .col-xs-10 {
    width: 1% !important;
  } */

  #other-pricing-tabs .next-btn {
    width: auto !important;
    max-width: none !important;
    display: inline-block;
    margin-left: auto;
  }

  .a-39,
  .a-40 {
    margin-left: 37px !important;
  }

  .price-section__left__dayprice {
    font-size: 12px !important;
    margin-bottom: -1px !important;
  }

  .rate-display {
    margin-right: -125px !important;
  }

  .a-41 {
    width: 100% !important;
  }
	.c-23{
		margin-top: -6px !important;
	}
}



		@media (max-width: 820px) {
  .c-1 {
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    gap: 0 !important;
	  padding-left: 24px !important;
	  padding-right: 32px !important;
  }
			.features-list{
					margin: 7px 0px -38px 7px;
				}
}

		@media (min-width: 768px) and (max-width: 1023px) {
  .card-body {
   flex: 0 1 auto !important;
    padding: 1.25rem;
  }
}


		.price-container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
/*   gap:40px; */
}

.card-price{
  display:flex;
  flex-direction:column;
	gap: 4px;
}

.rate-type{
  font-size:12px;
  font-weight:600;
  color:#6d27d9;
}

.currency{
  font-size:12px;
  font-weight:700;
}

.card-price strong{
  font-size:22px;
  font-weight:800;
  color:#6d27d9;
}
		
	@media (min-width: 819px) and (max-width: 1024px) {

  #booking-reservation-area .col-md-6 {
    width: 32% !important;
  }

  .card-price strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .custom-card{
    height: 428px !important;
    width: 252px !important;
  }
		.d-12{
			margin-top: 20px !important
		}
		.card img {
    height: 179px;
    min-height: 20px;
    object-fit: contain;
}
}
		
		
		.d-13{
			display: none !important;
		}
		.d-14{
			color: #626262F0 !important;
		}
		
		.fix-cdw-pai {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* ensures top alignment of checkbox and description */
}

.fix-cdw-pai p {
    margin: 2px 0 !important;
    line-height: 1.4;
	width: 446px;
/* 	border: 2px solid red !important; */
}
		
		.s-3{
			    margin-top: 4px;
    margin-left: 4px !important;
			color: #434343;
			font-family: 'Inter', sans-serif !important;
			font-size: 12px;
		}

		
		
		/* Mobile only */
@media (max-width: 767px) {
  #booking-reservation-area .col-xs-11 {
    width: 90.666667% !important;
  }
}

/* Tablet only */
@media (min-width: 768px) and (max-width: 1024px) {
      #booking-reservation-area .col-sm-4 {
        width: 20.333333% !important;
    }
	.s-3{
		font-size: 9px !important;
	}
}	
	@media (max-width: 768px) {
  #booking-reservation-area .s-3 p {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
	  width: 291px !important;
  }
}
		
		.s-9{
			position: relative;
            bottom: 3px;
		}
		.md-check{
			    accent-color: #6f32da !important;
		}
		#booking-reservation-area button, #booking-reservation-area input, #booking-reservation-area optgroup, #booking-reservation-area select, #booking-reservation-area textarea{
			accent-color: #6f32da !important;
		}
		
		@media (max-width: 767px) {
  a.green-text.font-weight-bold.s-9 {
    white-space: normal !important;
    word-break: break-word !important;
    display: inline !important;
  }
}
		
		div:where(.swal2-icon).swal2-warning {
    border-color: #6f32da !important;
    color: #6f32da !important;
}
		
		button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:active,
input[type=button]:hover,
input[type=button]:focus,
input[type=button]:active,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=reset]:active,
input[type=submit]:hover,
input[type=submit]:focus,
input[type=submit]:active {
    
    background: #6725cd !important;
	color: #fff !important;
}
		
		@media (max-width: 480px) {
  .col-xs-4.font-md.bold.ng-binding {
    position: relative;
    left: 31px;
  }
			.s-25{
				position: relative;
                left: 31px;
			}
			.col-md-3.col-sm-10.col-xs-10.text-left.font-lg.bold.ng-binding {
    width: 224px !important;
  }
			.a-37 {
    width: 48% !important;
/* 				margin-top: 2px; */
				font-size: 12px !important;
}
			.s-26{
				width: 32% !important;
				position:relative;
				left: 31px;
			}
			.s-3 p {
        padding-left: 16px;
        text-indent: -9px;
    }
			.s-34{
				width: 38% !important;
				position:relative !important;
				left: 31px;
			}
			.s-35{
				width: 52% !important;
			}
			.s-36{
				height: 48px !important;
			}
			
}
@media (min-width: 768px) and (max-width: 1024px) {
    #other-pricing-tabs .col-sm-6,
    #other-pricing-tabs .col-xs-6 {
        width: 26% !important;
		width: 20.2% !important;
    }
	#other-pricing-tabs .col-xs-10 {
        width: 22% !important;
    }

    #booking-reservation-area .col-sm-12 {
        width: 22% !important;
    }
	.a-38 {
        width: 154px !important;
    }
}
		
		
		
    </style>

    <div id="booking-reservation-area" style="margin-top: 100px;">

        <!-- <input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />

        <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" /> -->

        <div id="c247">

            <div id="customTabElement">

                <div ng-show="vm.loading" class="sx-waiting-spinner" style=" color: #e60000; position: fixed; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 20200; text-align: center; height: 100%;">

                    <div class="sx-waiting-overlay" style="opacity: 0.6; background: rgb(0, 0, 0); width: 100%; height: 100%;"></div>

                    <div class="sx-waiting-infobox" style="position: absolute; left: 50%; top: 100px; margin: 0px 0px 0px -200px; width: 400px; min-height: 400px; overflow: auto;">

                        <div class="sx-waiting-infotop">

                            <div class="loader-circle"></div>

                            <div class="loader-line-mask">

                                <div class="loader-line" style="box-shadow: inset 0 0 0 2px #6725cd !important;">

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="row step-1 c-17" style="margin-top:-32px" ng-show="vm.step==1">

                    <div class="col-lg-3 col-md-12">

                        <div class="filters-area">

                            <form role="form" name="editFiltersForm" class="ng-pristine ng-valid" novalidate>

                                <div class="col-md-12">

                                    <h1>Customize Booking</h1>

                                </div>

                                <!-- <div class="col-md-12"> -->
                                <!-- <ul class="nav nav-tabs nav-justified bookingType" role="tablist"> -->
                                <!-- ng-click="vm.agreement.bookingType = 1" -->
                                <!-- <li ng-class="{'active': vm.agreement.bookingType === 1}" ng-disabled="true" ng-readonly="true" style="width: 100%;">Self-Driven</li> -->
                                <!-- ng-click="vm.agreement.bookingType = 2" -->
                                <!-- <li ng-class="{'active': vm.agreement.bookingType === 2}" ng-disabled="true" ng-readonly="true" style="width: 50%;">Chauffeur-Driven</li> -->
                                <!-- </ul> -->
                                <!-- </div> -->
                                <!-- <div class="col-md-12">

                                    <div class="form-group">

                                        <label class="" for="TypeOfDrive">{{vm.withoutLocalize("TypeOfDrive")}}</label>

                                        <ui-select allow-clear ng-model="vm.agreement.typeOfDrive" theme="bootstrap" ng-change="vm.editFiltersChanged()" ng-class="{'edited':vm.agreement.typeOfDrive}">

                                            <ui-select-match>{{$select.selected.name}}</ui-select-match>

                                            <ui-select-choices repeat="Type.code as Type in vm.typeOfDrives">

                                                <span ng-bind-html="Type.name | highlight: $select.search"></span>

                                            </ui-select-choices>

                                        </ui-select>

                                    </div>

                                </div> -->

                                <div class="col-md-12">

                                    <div class="form-group">

                                        <label class="" for="Category">{{vm.withoutLocalize("Category")}}</label>

                                        <ui-select allow-clear ng-model="vm.agreement.category" theme="bootstrap" ng-change="vm.isEditFiltersFormValid();" ng-class="{'edited':vm.agreement.category}">

                                            <ui-select-match>{{$select.selected.name}}</ui-select-match>

                                            <ui-select-choices repeat="Type.code as Type in vm.categories">

                                                <span ng-bind-html="Type.name | highlight: $select.search"></span>

                                            </ui-select-choices>

                                        </ui-select>

                                    </div>

                                </div>

                                <div class="col-md-12">

                                    <div class="form-group">

                                        <label class="" for="PickupLocation">{{vm.withoutLocalize("PickUpLocation")}}<span class="text-danger">*</span></label>
                                        <label for="OtherPickupCheckBox" class="c-23" style=" float: right; font-size: 12px; margin-bottom: 0 !important; margin-top: 0px;">
                                            <input id="OtherPickupCheckBox" style="transform: scale(1);" class="md-check" type="checkbox" name="OtherPickupCheckBox" ng-model="vm.otherPickupChecked" ng-change="vm.changeOtherPickupCheckbox()" />
                                            Custom
                                        </label>
                                        <ui-select allow-clear ng-model="vm.agreement.location" theme="bootstrap" ng-class="{'edited':vm.agreement.location}" ng-change="vm.isEditFiltersFormValid()" ng-if="!vm.otherPickupChecked">


                                            <ui-select-match>{{$select.selected.name}}</ui-select-match>

                                            <ui-select-choices repeat="Type in vm.locations">

                                                <span ng-bind-html="Type.name | highlight: $select.search"></span>

                                            </ui-select-choices>

                                        </ui-select>

                                        <ui-select allow-clear ng-model="vm.agreement.pickupLocation" theme="bootstrap" ng-class="{'edited':vm.agreement.pickupLocation}" ng-change="vm.isEditFiltersFormValid()" ng-if="vm.otherPickupChecked">
                                            <ui-select-match>{{$select.selected.title}}</ui-select-match>
                                            <ui-select-choices refresh="vm.searchGoogleLocations($select)" refresh-delay="300" repeat="pickupLocation in vm.geoLocations">
                                                <span ng-bind-html="pickupLocation.title | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>

                                    </div>

                                </div>

                                <div class="col-md-12">
                                    <div class="">
                                        <label>
  <b>{{vm.withoutLocalize("PickUpTime")}}<span class="text-danger">*</span></b>
<!--   <small>(UAE Time Zone)</small> -->
</label>
                                        <div class="input-group">
                                            <span class="input-group-addon transparent"><i class="fa fa-calendar"></i></span>
                                            <input class="form-control" id="pickupTime" options="{minDate: vm.minPickupDate, showClose: false, format: 'DD/MM/YYYY', icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-arrow-up', down: 'fa fa-arrow-down' }}" datetimepicker name="outDetail_dateTime" ng-model="vm.agreement.startDatePart" ng-class="{'edited':vm.agreement.startDatePart}" ng-change="vm.startDateChanges();vm.startDateChanged();vm.isEditFiltersFormValid()" required>
                                        </div>
                                    </div>
                                    <div class="row time-part">
                                        <div class="col-md-12" style="padding-left: 15px;">
                                            <div class="input-group">
                                                <span class="input-group-addon transparent"><i class="fa fa-clock-o"></i></span>
                                                <ui-select id="pickupTimeCombined" allow-clear ng-model="vm.agreement.pickupTimeCombined" theme="bootstrap" ng-class="{'edited':vm.agreement.pickupTimeCombined}" ng-change="vm.changePickupTime();vm.isEditFiltersFormValid()" required>
                                                    <ui-select-match>{{$select.selected.name}}</ui-select-match>
                                                    <ui-select-choices repeat="time in vm.combinedTimes">
                                                        <span ng-bind-html="time.name | highlight: $select.search"></span>
                                                    </ui-select-choices>
                                                </ui-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">

                                    <div class="form-group form-md-line-input form-md-floating-label no-hint" ng-if="vm.agreement.bookingType === 1">

                                        <label>{{vm.withoutLocalize("DropOffLocation")}}<span class="text-danger">*</span></label>
                                        <label for="OtherDropOffCheckBox" class="c-23" style="float: right; font-size: 12px; margin-bottom: 0 !important; margin-top: 0px; ">
                                            <input id="OtherDropOffCheckBox" style="transform: scale(1);" class="md-check" type="checkbox" name="OtherDropOffCheckBox" ng-change="vm.changeOtherDropOffCheckbox()" ng-model="vm.otherDropOffChecked" />
                                            Custom
                                        </label>
                                        <ui-select allow-clear ng-model="vm.agreement.closingLocation" theme="bootstrap" ng-class="{'edited':vm.agreement.closingLocation}" ng-if="!vm.otherDropOffChecked">

                                            <ui-select-match>{{$select.selected.name}}</ui-select-match>

                                            <ui-select-choices repeat="Type in vm.locations">

                                                <span ng-bind-html="Type.name | highlight: $select.search"></span>

                                            </ui-select-choices>

                                        </ui-select>

                                        <ui-select allow-clear ng-model="vm.agreement.dropoffLocation" theme="bootstrap" ng-if="vm.otherDropOffChecked" ng-class="{'edited':vm.agreement.dropoffLocation}">
                                            <ui-select-match>{{$select.selected.title}}</ui-select-match>
                                            <ui-select-choices refresh="vm.searchGoogleLocations($select)" refresh-delay="300" repeat="pickupLocation in vm.geoLocations">
                                                <span ng-bind-html="pickupLocation.title | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>

                                    </div>



                                    <div class="form-group form-md-line-input form-md-floating-label no-hint" ng-if="vm.agreement.bookingType === 2">

                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">

                                            <label>{{vm.withoutLocalize("DropOffLocation")}}</label>

                                            <input class="form-control" type="text" name="closingLocation" ng-class="{'edited':vm.agreement.closingLocationString}" ng-model="vm.agreement.closingLocationString">

                                        </div>

                                    </div>

                                </div>

                                <div class="col-md-12">
									<label>
  <b>{{vm.withoutLocalize("DropOffTime")}}<span class="text-danger">*</span></b>
<!--   <small>(UAE Time Zone)</small> -->
</label>
                                    <div class="input-group">
                                        <span class="input-group-addon transparent"><i class="fa fa-calendar"></i></span>
                                        <input class="form-control" id="dropOffTime" options="{minDate: vm.minDropOffDate, showClose: false, format: 'DD/MM/YYYY', icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-arrow-up', down: 'fa fa-arrow-down'}}" datetimepicker name="inDetail_dateTime" ng-model="vm.agreement.endDatePart" ng-class="{'edited':vm.agreement.endDatePart}" ng-change="vm.endDateChanges();vm.endDateChanged();vm.isEditFiltersFormValid();" required>
                                    </div>
                                    <div class="row time-part">
                                        <div class="col-md-12" style="padding-left: 15px;">
                                            <div class="input-group">
                                                <span class="input-group-addon transparent"><i class="fa fa-clock-o"></i></span>
                                                <ui-select id="dropOffTimeCombined" allow-clear ng-model="vm.agreement.dropoffTimeCombined" theme="bootstrap" ng-class="{'edited':vm.agreement.dropoffTimeCombined}" ng-change="vm.changeDropoffTime();vm.isEditFiltersFormValid()" required>
                                                    <ui-select-match>{{$select.selected.name}}</ui-select-match>
                                                    <ui-select-choices repeat="time in vm.combinedTimes">
                                                        <span ng-bind-html="time.name | highlight: $select.search"></span>
                                                    </ui-select-choices>
                                                </ui-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- <div class="row"  ng-if="vm.agreement.bookingType === 1">

                                    <div class="col-md-12 text-center">

                                        <div class="checkbox-c">

                                            <label style="" for="DriverAgeCheckBox">

                                                <input id="DriverAgeCheckBox" class="md-check" type="checkbox" name="DriverAgeCheckBox" ng-model="vm.isDriverAgeChecked" ng-checked="vm.isDriverAgeChecked=='true'" ng-required="true">

                                                <span class="cr"><i class="cr-icon fa fa-check"></i></span>

                                                Driver Age Between 25 To 65<span class="text-danger">*</span>

                                            </label>

                                        </div>

                                    </div>

                                </div>

                                <br> -->

                                <div class="col-md-12">

                                    <div class="form-group">

                                        <button type="submit" button-busy="vm.loading" style="width: 100%; background: #6d27d9 !important; position: relative; bottom: -5px;" ng-disabled="!vm.isEditFiltersFormValid()" class="btn btn-primary bg-yellow" ng-click="vm.editFiltersChanged()"> <span> {{vm.withoutLocalize("FindNow")}}</span> </button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </div>

                    <div class="col-lg-9 col-md-12 d-12">

                        <div class="row">

                            <div class="col-md-6 col-sm-6">

                                <div class="form-group has-search">

                                    <span class="fa fa-search form-control-feedback"></span>

                                    <input type="text" ng-model="vm.searchText" class="form-control" placeholder="Search">

                                </div>

                            </div>

                            <div class="col-md-3 col-sm-3">

                                <div class="form-group">

                                    <select class="form-control" ng-model="vm.sortByPrice">

                                        <option value="Asc">Price high-to-low</option>

                                        <option value="Desc">Price low-to-high</option>

                                    </select>

                                </div>

                            </div>

                            <div class="col-md-3 col-sm-3">

                                <div class="form-group">

                                    <select class="form-control" ng-model="vm.sortByName">

                                        <option value="Asc">From A to Z</option>

                                        <option value="Desc">From Z to A</option>

                                    </select>

                                </div>

                            </div>

                        </div>

                        <div class="row a-42">
                            <div class="col-lg-4 col-md-6 col-sm-6" ng-repeat="line in vm.tariffLines | filter:vm.searchText | orderBy : 'title' : vm.sortByName === 'Desc' | orderBy : 'rate' : vm.sortByPrice === 'Asc'" ng-show="vm.tariffLines_ShowAll || line.showMe">

                                <div class="card custom-card" style="height: 440px; width: 313px;">

                                    <img class="card-img-top" ng-click="vm.openModal(line)" ng-src="{{line.displayImageUrl}}" alt="{{line.subTitle}}">

                                    <div class="card-body card-header">



                                        <!--         <span class="image-count" ng-click="vm.openModal(line)">
                                                  <i class="fa fa-picture-o"></i> 1/{{line.documentImages.length + 1}}
                                                </span> -->

                                        <div class="card-title">{{line.title}}</div>
                                        <div class="card-subtitle">{{line.subTitle}}</div>
                                        <!--         <div class="or-similar">{{vm.withoutLocalize("OrSimilar")}}</div> -->

                                    </div>


                                    <div class="card-body car-specs">

                                        <ul class="specs-list">

                                            <li>
                                                <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/user.png"
                                                     class="spec-icon"
                                                     alt="Doors">
                                                <span>{{line.passengerCapacity}} {{vm.withoutLocalize("Passenger")}}{{line.passengerCapacity > 1 ? 's' : ''}}</span>
                                            </li>

                                            <li>
                                                <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/gearbox.png"
                                                     class="spec-icon"
                                                     alt="Gearbox">
                                                <span>{{line.acrissTransDrive.name.includes('Automatic')? 'Automatic': 'Manual'}}</span>
                                            </li>

                                            <li>
                                                <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/door.png"
                                                     class="spec-icon"
                                                     alt="Doors">
                                                <span>{{line.smallBagsCapacity}} Doors</span>
                                            </li>
                                            <li>
                                                <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/petrol.png"
                                                     class="spec-icon"
                                                     alt="petrol">
                                                <span>{{line.acrissFuelAc.name.includes('Petrol')? 'Petrol': (line.acrissFuelAc.name.includes('Diesel')? 'Diesel': 'N/A')}}</span>
                                            </li>

                                        </ul>
                                        <hr>
                                        <div class="price-container">

                                            <span class="card-price" ng-if="!vm.isLandingFromPanel">
                                                <small class="rate-type">Monthly</small>
                                                <span class="currency">{{vm.currency}}</span>
                                                <strong>{{line.monthlyRate | number:2}}</strong>
                                            </span>

                                            <span class="card-price d-14" ng-if="!vm.isLandingFromPanel">
                                                <small class="rate-type d-14">Weekly</small>
                                                <span class="currency d-14">{{vm.currency}}</span>
                                                <strong class= d-14>{{line.weeklyRate | number:2}}</strong>
                                            </span>

                                            <span class="card-price d-14" ng-if="!vm.isLandingFromPanel">
                                                <small class="rate-type d-14">Daily</small>
                                                <span class="currency d-14">{{vm.currency}}</span>
                                                <strong class= d-14>{{line.rate | number:2}}</strong>
                                            </span>

                                            <span class="card-price" ng-if="vm.isLandingFromPanel">
                                                <small class="rate-type d-13">&nbsp;</small>
                                                <span class="currency">{{vm.currency}}</span>
                                                <strong>{{line.rate | number:2}}/day</strong>
                                            </span>

                                        </div>

                                    </div>


                                    <div class="card-footer">

                                        <button type="submit" class="btn btn-primary btn-book" ng-click="vm.selectTariffGroup(line); vm.clickedDetailedBtn = false;">
                                            {{vm.withoutLocalize("Book")}}
                                        </button>

                                    </div>

                                </div>

                            </div>
                        </div>



                        <div ng-if="vm.tariffLines.length <= 0 && vm.showTariffLinesMessage">

                            <div class="col-md-12">No Cars Available</div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="row" style="margin-top: -48px !important; margin: 0" ng-if="vm.step && (vm.step==2 || vm.step==3)">
                <div class="col-md-12 panel panel-default car-details">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row" style="height:38px">
                                <div class="col-md-12 title-heading">
                                    <span style="color:black; font-size:26px">
                                        {{vm.agreement.tariffGroup.title}}
                                    </span>
                                    <span>{{vm.agreement.tariffGroup.subTitle}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 image-feature">
                                    <div>
                                        <img ng-src="{{vm.agreement.tariffGroup.displayImage.url}}" style="cursor:pointer" ng-click="vm.openModal(vm.agreement.tariffGroup)" class="vehicle-image" />
                                        <div style="width: 380px;position:relative;">
                                            <!--                                                 <span style="color: silver;font-size: 12px;font-weight: 600;margin-top: -30px;float: right;cursor:pointer" ng-click="vm.openModal(vm.agreement.tariffGroup)"><i class="fa fa-picture-o" aria-hidden="true"></i> 1/{{vm.agreement.tariffGroup.documentImages.length + 1}}</span> -->
                                        </div>

                                    </div>
                                    <div class="features-list">
                                        <span style="color:black; font-size:18px">Features</span><br />

                                        <!--     <div style="font-size:14px; display:flex; align-items:center; gap:10px; margin-bottom:8px; margin-top:10px;" ng-if="vm.agreement.tariffGroup.acrissFuelAc.name.toLowerCase().includes('air') && !vm.agreement.tariffGroup.acrissFuelAc.name.toLowerCase().includes('no air')">
                                                <i class="fa fa-snowflake-o" style="min-width:22px;"></i>
                                                <span>{{vm.withoutLocalize("AirConditioning")}}</span>
                                            </div> -->

                                        <div style="font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:8px;" ng-if="vm.agreement.tariffGroup.acrissTransDrive.name.toLocaleLowerCase().includes('manual')">
                                            <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/gearbox.png" alt="Gearbox" style="width:20px; height:20px;">
                                            <span>{{vm.withoutLocalize("ManualTransmission")}}</span>
                                        </div>

                                        <div style="font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:8px; margin-top: 10px;" ng-if="vm.agreement.tariffGroup.acrissTransDrive.name.toLocaleLowerCase().includes('automatic')">
                                            <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/gearbox.png" alt="Gearbox" style="width:20px; height:20px;">
                                            <span>{{vm.withoutLocalize("AutomaticTransmission")}}</span>
                                        </div>

                                        <div style="font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:8px;">
                                            <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/user.png" alt="Passengers" style="width:20px; height:20px;">
                                            <span>{{vm.agreement.tariffGroup.passengerCapacity}} <span>{{vm.withoutLocalize("Passenger")}}<span ng-if="vm.agreement.tariffGroup.passengerCapacity>1">s</span></span></span>
                                        </div>

                                        <!--     <div style="font-size:14px; display:flex; align-items:center; gap:7px; margin-bottom:8px;">
                                                <i class="fa fa-suitcase fa-lg" style="min-width:25px;"></i>
                                                <span>{{vm.agreement.tariffGroup.largeBagsCapacity}} <span>{{vm.withoutLocalize("LargeBag")}}<span ng-if="vm.agreement.tariffGroup.largeBagsCapacity>1">s</span></span></span>
                                            </div> -->

                                        <div style="font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:8px;">
                                            <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/door.png" alt="Doors" style="width:20px; height:20px;">
                                            <span>{{vm.agreement.tariffGroup.smallBagsCapacity}} <span>Doors<span ng-if="vm.agreement.tariffGroup.smallBagsCapacity>1"></span></span></span>
                                        </div>

                                        <div style="font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:8px;">
                                            <img src="/wp-content/plugins/speed-bookings-engine-lb/assets/petrol.png" alt="Fuel" style="width:20px; height:20px;">
                                            <span>{{vm.agreement.tariffGroup.acrissFuelAc.name.includes('Petrol') ? 'Petrol' : (vm.agreement.tariffGroup.acrissFuelAc.name.includes('Diesel') ? 'Diesel' : 'N/A')}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-11 col-md-offset-1 c-1">
                                    <div class="row">
                                        <div class="col-md-12 pickup-details">
                                            <span style="color:black; font-size:18px">
                                                Pick-Up
                                            </span><br />
                                            <div style="font-size: 14px">{{vm.otherPickupChecked? (vm.agreement.pickupLocation.title.length > 43? vm.agreement.pickupLocation.title.substring(0, 43) + '...':vm.agreement.pickupLocation.title): vm.agreement.location.name}}</div>
                                            <div style="font-size: 14px">{{vm.getLocalStartDateFormat()}}</div>
                                            <div style="font-size: 14px">{{vm.getLocalStartTimeFormat()}}</div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: -3px">
                                        <div class="col-md-12 drop-off-details">
                                            <span style="color:black; font-size:18px">
                                                Drop-Off
                                            </span><br />
                                            <div style="font-size: 14px">{{vm.otherDropOffChecked? (vm.agreement.dropoffLocation.title.length > 43? vm.agreement.dropoffLocation.title.substring(0, 43) + '...':vm.agreement.dropoffLocation.title): vm.agreement.closingLocation.name}}</div>
                                            <div style="font-size: 14px">{{vm.getLocalEndDateFormat()}}</div>
                                            <div style="font-size: 14px">{{vm.getLocalEndTimeFormat()}}</div>
                                        </div>
                                    </div>
                                    <!--<div class="row">
                                        <div class="col-md-12">
                                            <b>Rental Period: </b> {{vm.getRentalPeriod()}} Day<span ng-if="vm.getRentalPeriod() > 1">s</span>
                                        </div>
                                    </div>-->
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 step-2" ng-if="vm.step==2">
                    <div class="panel panel-default row charges-section" ng-hide="" style="margin-top:20px; margin-left: 0px; display: flow-root;" ng-disabled="vm.loading" id="other-pricing-tabs">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <span style="font-size:18px; color:black">Rental Charges</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1 col-sm-2 col-xs-2">
                                    <i style="font-size: 1.5em" class="fa fa-car"></i>
                                    <!--<div class="checkbox-c">
                                        <label style="font-size: 1.5em" for="chkRent">
                                            <input type="checkbox" id="chkRent" name="chkRent" ng-checked="true" ng-disabled="true">
                                            <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                                        </label>
                                    </div>-->
                                </div>
                                <div class="col-md-3 col-sm-10 col-xs-10 text-left font-lg bold">
                                    {{vm.withoutLocalize("RentalCharges")}}
                                </div>
                                <div class="col-md-3 col-sm-12 col-xs-12 font-md bold s-26">
                                    <span style="font-size: 14px;">{{vm.agreement.charges[0].rate}}{{vm.agreement.charges[0].rateType.name}}</span>
                                </div>

                                <div class="col-md-3 col-sm-6 col-xs-6 font-md bold text-left a-37">
                                    <div><span class="font-smsss" style="float: left;"> {{vm.getRentalPeriod()}} Day<span ng-if="vm.getRentalPeriod() > 1">s</span></span></div>

                                </div>
                                <div class="col-md-2 col-sm-6 col-xs-6 font-md bold text-left">
                                    <span class="price-section__left__dayprice d-9" style="font-size: 14px;display: block;text-align: right;float: right;">
                                        {{vm.currency}} {{vm.getRentalPeriod() * vm.agreement.charges[0].rate}}
                                    </span>
                                </div>
                            </div>
                            <hr style="margin-top:0px" />
                            <div class="row" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '2'}} | unique:'agreementId'">
                                <div class="col-md-12">
                                    <span style="font-size:18px; color:black"> {{vm.withoutLocalize("ProtectionOptions")}}</span>
                                </div>
                            </div>
                      <!-- Hardcoded Standard Coverage block -->
<div class="row fix-cdw-pai" style="min-height:35px; padding:5px 0;">
    <div class="col-md-1 col-sm-1 col-xs-1">
        <!-- Disabled checked checkbox -->
        <input type="checkbox" checked style="transform: scale(1.5); accent-color: #6f32da; pointer-events: none;" />
    </div>
    <!-- Mobile/Tablet name -->
    <div class="col-xs-11 col-sm-11 visible-xs visible-sm text-left font-lg bold s-4">
        Standard Coverage
    </div>
    <!-- Desktop description -->
    <div class="col-md-4 text-left font-lg bold hidden-xs hidden-sm">
        Standard Coverage
        <div class="s-3">
            <p>• Basic insurance as required by UAE regulations</p>
            <p>• In case of an accident, deductible specified in the rental agreement</p>
            <p>• Deductible amount specified in the rental agreement</p>
            <p>• The deductible applies regardless of fault</p>
        </div>
    </div>
    <!-- Rate -->
    <div class="col-md-2 col-sm-4 col-xs-4 font-md bold s-25">
        Included
    </div>
    <!-- Rate type / Days -->
    <div class="col-md-3 col-sm-4 col-xs-4 font-md bold text-left">
<!--         <span class="font-smsss"> - </span> -->
    </div>
    <!-- Total price -->
    <div class="col-md-2 col-sm-4 col-xs-4 font-md bold text-left">
        <!-- No price since included -->
    </div>
    <!-- Mobile/Tablet description below Rate, Rate Type, Total Price -->
    <div class="col-xs-12 col-sm-12 visible-xs visible-sm s-3">
        <p>• Basic insurance as required by UAE regulations</p>
        <p>• In case of an accident, deductible specified in the rental agreement</p>
        <p>• Deductible amount specified in the rental agreement</p>
        <p>• The deductible applies regardless of fault</p>
    </div>
</div>
<hr class="visible-sm visible-xs" />

<!-- Existing charges repeat block -->
<div ng-disabled="vm.loading" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '2'}}">
    <div class="row fix-cdw-pai" style="min-height:35px; padding:5px 0;">
        <!-- Checkbox -->
        <div class="col-md-1 col-sm-1 col-xs-1">
            <label style="transform: scale(1.5);" for="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}">
                <input type="checkbox" style="transform: scale(1);" id="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}" name="tariffOptionCategory{{chargesRow.chargesTypeId}}" ng-checked="chargesRow.hasIncludedTariff || chargesRow.accepted" ng-disabled="chargesRow.hasIncludedTariff" ng-model="chargesRow.accepted" ng-click="vm.calculateAndShowProgress()">
            </label>
        </div>
        <!-- Mobile/Tablet name -->
        <div class="col-xs-11 col-sm-11 visible-xs visible-sm text-left font-lg bold s-4">
            {{vm.getChargeName(chargesRow.chargesType.name)}}
        </div>
        <!-- Desktop description -->
        <div class="col-md-4 text-left font-lg bold hidden-xs hidden-sm">
            {{vm.getChargeName(chargesRow.chargesType.name)}}
            <div class="s-3" ng-if="chargesRow.chargesType.name == 'CDW'">
                <p>• Coverage provides full protection against vehicle damage</p>
                <p>• No deductible is payable in case of an accident</p>
                <p>• Valid only if the accident is reported according to UAE regulations</p>
                <p>• The deductible applies regardless of fault</p>
            </div>
            <div class="s-3" ng-if="chargesRow.chargesType.name == 'PAI'">
                <p>• Covers driver and passengers in case of an accident</p>
                <p>• Includes medical and hospital expenses</p>
                <p style="margin-bottom: 20px !important;">• Claims subject to insurance policy terms and limits</p>
            </div>
        </div>
        <!-- Rate -->
        <div class="col-md-2 col-sm-4 col-xs-4 font-md bold">
            {{chargesRow.rate}}{{vm.localize(chargesRow.rateType.name)}} <span ng-if="chargesRow.included">({{vm.localize("Included")}})</span>
        </div>
        <!-- Rate type / Days -->
        <div class="col-md-3 col-sm-4 col-xs-4 font-md bold text-left">
            <div ng-if="chargesRow.rateType.name=='/Day'">
                <span class="font-smsss"> {{vm.getRentalPeriod()}} Day<span ng-if="vm.getRentalPeriod() > 1">s</span></span>
            </div>
            <div ng-if="chargesRow.rateType.name!='/Day'">
                <span class="font-smsss"> {{chargesRow.rateType.name}}</span>
            </div>
        </div>
        <!-- Total price -->
        <div class="col-md-2 col-sm-4 col-xs-4 font-md bold text-left">
            <span class="price-section__left__dayprice" style="font-size:14px; text-align:right; display:block;" ng-if="(!chargesRow.included || chargesRow.rate > 0) && chargesRow.accepted">
                {{vm.currency}} {{vm.getRentalPeriod() * chargesRow.rate}}
            </span>
        </div>
        <!-- Mobile/Tablet description below Rate, Rate Type, Total Price -->
        <div class="col-xs-12 col-sm-12 visible-xs visible-sm s-3" ng-if="chargesRow.chargesType.name == 'CDW'">
            <p>• Coverage provides full protection against vehicle damage</p>
            <p>• No deductible is payable in case of an accident</p>
            <p>• Valid only if the accident is reported according to UAE regulations</p>
            <p>• The deductible applies regardless of fault</p>
        </div>
        <div class="col-xs-12 col-sm-12 visible-xs visible-sm s-3" ng-if="chargesRow.chargesType.name == 'PAI'">
            <p>• Covers driver and passengers in case of an accident</p>
            <p>• Includes medical and hospital expenses</p>
            <p>• Claims subject to insurance policy terms and limits</p>
        </div>
    </div>
    <hr class="visible-sm visible-xs" />
</div>
<!-- START: Mileage Options Section -->
<hr style="margin-top:0px" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '6'}}" ng-if="$index==0" />

<div class="row" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '6'}} | unique:'agreementId'">
    <div class="col-md-12">
        <span style="font-size:18px; color:black"> Mileage Options</span>
    </div>
</div>

<div ng-disabled="vm.loading" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '6'}}" id="other-pricing-tabs" style="overflow:hidden;">
    <div class="row s-36" style="height:35px">
        <div class="col-md-1 col-sm-2 col-xs-2">
            <label style="transform: scale(1.5);" for="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}">
               <input type="checkbox" 
       style="transform: scale(1); position: relative !important; left: 2px;" 
       id="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}" 
       name="tariffOptionCategory{{chargesRow.chargesTypeId}}" 
       ng-checked="chargesRow.hasIncludedTariff || chargesRow.accepted" 
       ng-disabled="chargesRow.hasIncludedTariff" 
       ng-model="chargesRow.accepted" 
       ng-click="vm.toggleMileageOption(chargesRow, $event)">
            </label>
        </div>
        <div class="col-md-3 col-sm-10 col-xs-10 text-left font-lg bold">
            {{vm.withoutLocalize(chargesRow.chargesType.name)}}
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12 font-md bold s-34">
            {{chargesRow.rate}}{{vm.localize(chargesRow.rateType.name)}} <span ng-if="chargesRow.included">({{vm.localize("Included")}})</span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6 font-md bold text-left s-35">
            <div ng-if="chargesRow.rateType.name=='/Day'"><span class="font-smsss" style="float: left;"> {{vm.getRentalPeriod()}} Day<span ng-if="vm.getRentalPeriod() > 1">s</span></span></div>
            <div ng-if="chargesRow.rateType.name!='/Day'"><span class="font-smsss" style="float: left;"> {{chargesRow.rateType.name}}</span></div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-6 font-md bold text-left">
            <span class="price-section__left__dayprice" style="font-size: 14px;display: block;padding-bottom: 3px;text-align: right;float: right;" ng-if="(!chargesRow.included || chargesRow.rate > 0) && (chargesRow.accepted)">{{vm.currency}} {{vm.getRentalPeriod() * chargesRow.rate}}</span>
        </div>
    </div>
    
<!-- Radio button options -->
<div class="row" ng-show="chargesRow.accepted && chargesRow.tariff.length > 1" style="display: none;">
    <div class="col-md-10 col-sm-10 col-xs-10 col-md-offset-1 col-sm-offset-1 col-xs-offset-1" style="padding: 15px 20px 15px 15px !important;">
        <div class="row bold" ng-repeat="tariffLine in chargesRow.tariff" ng-if="$index > 0" style="margin-bottom: 10px;">
            <div class="col-md-1 col-sm-1 col-xs-1">
                <div class="radio-c">
                    <label for="tariffOption{{chargesRow.chargesTypeId + '-' + $index}}">
                        <input type="radio" id="tariffOption{{chargesRow.chargesTypeId + '-' + $index}}" name="tariffOption{{chargesRow.chargesTypeId}}" ng-click="vm.tariffOptionSelected(chargesRow, tariffLine)" ng-checked="tariffLine.included==chargesRow.included && tariffLine.rate==chargesRow.rate && tariffLine.excessRate==chargesRow.excessRate">
                        <span class="cr"><i class="" style=""></i></span>
                    </label>
                </div>
            </div>
            <div class="col-md-10 col-sm-10 col-xs-10">
                <span ng-if="chargesRow.chargesTypeId === 5" style="display: inline-block; padding: 4px 8px; margin-right: 5px; background-color: #777; color: white; border-radius: 3px; font-size: 12px;">Allowed: {{tariffLine.limit}} KM</span>
                <span style="display: inline-block; padding: 4px 8px; margin-right: 5px; background-color: #777; color: white; border-radius: 3px; font-size: 12px;">{{(tariffLine.included ? vm.localize('Included') : 'AED ' + tariffLine.rate + '' + vm.localize(chargesRow.rateType.name))}}</span> 
                <span style="display: inline-block; padding: 4px 8px; background-color: #777; color: white; border-radius: 3px; font-size: 12px;">{{(vm.localize('deducted') + ': AED ' + tariffLine.excessRate + "/Extra KM")}}</span>
            </div>
        </div>
        
    </div>
</div>
    
</div>
							<hr style="margin-top: 3px" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '6'}}" ng-if="$index==0" />
<!-- END: Mileage Options Section -->

                          
                            <div class="row" id="other-pricing-tabs" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '!1'}} | filter:{chargesType:{chargesCategory: '!2'}} | filter:{chargesType:{chargesCategory: '!5'}} | filter:{rateType:'!One Time'}" ng-if="(chargesRow.rate > 0 || chargesRow.chargesTypeId == 26) && $index==1">
                                <div class="col-md-12">
                                    <span style="font-size:18px; color:black"> {{vm.withoutLocalize("OtherExtras")}}</span>
                                </div>
                            </div>
                            <div ng-disabled="vm.loading" ng-repeat="chargesRow in vm.agreement.charges | filter:{ applyOnClosing: false} | filter:{chargesType:{chargesCategory: '!1'}} | filter:{chargesType:{chargesCategory: '!2'}} | filter:{chargesType:{chargesCategory: '!5'}} | filter:{rateType:'!One Time'}" id="other-pricing-tabs" ng-if="((chargesRow.rate > 0 || chargesRow.chargesTypeId == 26) || (chargesRow.included && chargesRow.accepted))" ng-hide="chargesRow.chargesTypeId == 5">
                                <div class="row">
                                    <div class="col-md-1 col-sm-2 col-xs-2">
                                        <label style="transform: scale(1.5);" for="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}">
                                            <input type="checkbox" style="transform: scale(1);" id="tariffOptionCategory{{chargesRow.chargesTypeId + '-' + $index}}" name="tariffOptionCategory{{chargesRow.chargesTypeId}}" class="md-check" ng-checked="chargesRow.hasIncludedTariff || chargesRow.accepted" ng-disabled="(chargesRow.chargesTypeId==26 && vm.otherPickupChecked) || (chargesRow.chargesTypeId==27 && vm.otherDropOffChecked)" ng-model="chargesRow.accepted" ng-click="vm.calculateAndShowProgress()">

                                        </label>
                                    </div>
                                    <div class="col-md-3 col-sm-10 col-xs-10 text-left font-lg bold a-38">
                                        {{vm.localize(chargesRow.chargesType.name)}}
                                    </div>
                                    <div class="col-md-3 col-sm-12 col-xs-12 font-md bold">
                                        <!--<span ng-if="!chargesRow.included && chargesRow.rate > 0">
                                            {{chargesRow.rate}} {{vm.findAndReplaceSpaceWithSlash(vm.localize(chargesRow.rateType.name))}}
                                        </span>
                                        <span ng-if="chargesRow.included && chargesRow.accepted">{{vm.localize('Included')}}</span>-->
                                    </div>
                                    <div class="col-md-3 col-sm-6 col-xs-6 font-md bold text-left a-40">
                                        <div ng-if="chargesRow.rateType.name=='/Day'"><span class="font-smsss" style="float: left;"> {{vm.getRentalPeriod()}} Day<span ng-if="vm.getRentalPeriod() > 1">s</span></span></div>
                                        <div ng-if="chargesRow.rateType.name!='/Day'"><span class="font-smsss" style="float: left;"> {{chargesRow.rateType.name}}</span></div>
                                    </div>
                                    <div class="col-md-2 col-sm-6 col-xs-6 font-md bold text-left">
                                        <span class="price-section__left__dayprice" style="font-size: 14px;display: block;padding-bottom: 3px;text-align: right;float: right;" ng-if="!chargesRow.included && chargesRow.accepted">
                                            <span ng-if="chargesRow.rateType.name=='/Day'">{{vm.currency}} {{chargesRow.rate*vm.getRentalPeriod()}}</span>
                                            <span class="rate-display" ng-if="chargesRow.rateType.name!='/Day'">{{vm.currency}} {{chargesRow.rate}}</span>
                                        </span>
                                    </div>
                                </div>
                                <hr class="visible-sm visible-xs" />
                            </div>

                        </div>

                    </div>






                </div>


                <!-------------------------------------------------Driver Detail Start--------------------------------------------------------->
                <div class="col-md-8 step-3" ng-if="vm.step>=3 || vm.mode == 3">
                    <div class="panel panel-default row driver-details" ng-hide="" style="padding: 10px; margin-top: 20px; margin-left: 0px;" ng-disabled="vm.loading">
                        <div class="col-md-12" style="margin-top:15px">
                            <div class="row">
                                <div class="col-md-12">
                                    <span style="font-size:18px; color:black">{{vm.withoutLocalize("DriverDetails")}}</span>
                                </div>
                            </div>
                            <form name="bookingForm">


                                <div class="row">

                                    <div class="col-md-12">

                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">

                                            <label>{{vm.withoutLocalize("FirstName")}}<span class="text-danger">*</span></label>

                                            <input class="form-control" type="text" name="firstName" ng-class="{'edited':vm.agreement.customer.firstName}" ng-model="vm.agreement.customer.firstName" required ng-readonly="vm.step>3 || vm.mode == 3">

                                        </div>

                                    </div>

                                </div>

                                <div class="row">

                                    <div class="col-md-12">

                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">

                                            <label>{{vm.withoutLocalize("LastName")}}<span class="text-danger">*</span></label>

                                            <input class="form-control" type="text" name="lastName" ng-class="{'edited':vm.agreement.customer.lastName}" ng-model="vm.agreement.customer.lastName" required ng-readonly="vm.step>3 || vm.mode == 3">





                                        </div>



                                    </div>



                                </div>







                                <!-- <div class="row">



                                    <div class="col-sm-12">



                                        <h2>{{vm.withoutLocalize("ContactInformation")}}</h2>



                                    </div>



                                </div> -->

                                <div class="row">



                                    <div class="col-md-12">



                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">



                                            <label>{{vm.withoutLocalize("Email")}}<span class="text-danger">*</span></label>

                                            <input class="form-control" type="email" name="email" ng-class="{'edited':vm.agreement.customer.email}" ng-model="vm.agreement.customer.email" ng-readonly="vm.step>3 || vm.mode == 3" required>





                                        </div>



                                    </div>



                                </div>



                                <div class="row">



                                    <div class="col-md-12">



                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">



                                            <label>{{vm.withoutLocalize("MobileNo")}}<span class="text-danger">*</span></label>

                                            <div class="row">
                                                <div class="col-md-2 col-sm-4 col-xs-4">
                                                    <select ng-model="vm.countryCodeMobile" id="countryCode" class="form-control">
                                                        <option value="">Select Country</option>
                                                        <option value="+961">+961 (LB)</option>
                                                        <option value="+971">+971 (UAE)</option>

                                                        <option disabled>──────────</option>

                                                        <!-- A–Z -->
                                                       <option value="+93">+93 (AF)</option>
<option value="+355">+355 (AL)</option>
<option value="+213">+213 (DZ)</option>
<option value="+1684">+1684 (AS)</option>
<option value="+376">+376 (AD)</option>
<option value="+244">+244 (AO)</option>
<option value="+1264">+1264 (AI)</option>
<option value="+672">+672 (AQ)</option>
<option value="+1268">+1268 (AG)</option>
<option value="+54">+54 (AR)</option>
<option value="+374">+374 (AM)</option>
<option value="+297">+297 (AW)</option>
<option value="+61">+61 (AU)</option>
<option value="+43">+43 (AT)</option>
<option value="+994">+994 (AZ)</option>
<option value="+1242">+1242 (BS)</option>
<option value="+973">+973 (BH)</option>
<option value="+880">+880 (BD)</option>
<option value="+1246">+1246 (BB)</option>
<option value="+375">+375 (BY)</option>
<option value="+32">+32 (BE)</option>
<option value="+501">+501 (BZ)</option>
<option value="+229">+229 (BJ)</option>
<option value="+1441">+1441 (BM)</option>
<option value="+975">+975 (BT)</option>
<option value="+591">+591 (BO)</option>
<option value="+387">+387 (BA)</option>
<option value="+267">+267 (BW)</option>
<option value="+55">+55 (BR)</option>
<option value="+246">+246 (IO)</option>
<option value="+673">+673 (BN)</option>
<option value="+359">+359 (BG)</option>
<option value="+226">+226 (BF)</option>
<option value="+257">+257 (BI)</option>
<option value="+855">+855 (KH)</option>
<option value="+237">+237 (CM)</option>
<option value="+1">+1 (CA)</option>
<option value="+238">+238 (CV)</option>
<option value="+1345">+1345 (KY)</option>
<option value="+236">+236 (CF)</option>
<option value="+235">+235 (TD)</option>
<option value="+56">+56 (CL)</option>
<option value="+86">+86 (CN)</option>
<option value="+57">+57 (CO)</option>
<option value="+269">+269 (KM)</option>
<option value="+242">+242 (CG)</option>
<option value="+243">+243 (CD)</option>
<option value="+682">+682 (CK)</option>
<option value="+506">+506 (CR)</option>
<option value="+385">+385 (HR)</option>
<option value="+53">+53 (CU)</option>
<option value="+357">+357 (CY)</option>
<option value="+420">+420 (CZ)</option>
<option value="+45">+45 (DK)</option>
<option value="+253">+253 (DJ)</option>
<option value="+1767">+1767 (DM)</option>
<option value="+1809">+1809 (DO)</option>
<option value="+593">+593 (EC)</option>
<option value="+20">+20 (EG)</option>
<option value="+503">+503 (SV)</option>
<option value="+240">+240 (GQ)</option>
<option value="+291">+291 (ER)</option>
<option value="+372">+372 (EE)</option>
<option value="+251">+251 (ET)</option>
<option value="+500">+500 (FK)</option>
<option value="+298">+298 (FO)</option>
<option value="+679">+679 (FJ)</option>
<option value="+358">+358 (FI)</option>
<option value="+33">+33 (FR)</option>
<option value="+594">+594 (GF)</option>
<option value="+689">+689 (PF)</option>
<option value="+241">+241 (GA)</option>
<option value="+220">+220 (GM)</option>
<option value="+995">+995 (GE)</option>
<option value="+49">+49 (DE)</option>
<option value="+233">+233 (GH)</option>
<option value="+350">+350 (GI)</option>
<option value="+30">+30 (GR)</option>
<option value="+299">+299 (GL)</option>
<option value="+1473">+1473 (GD)</option>
<option value="+590">+590 (GP)</option>
<option value="+1671">+1671 (GU)</option>
<option value="+502">+502 (GT)</option>
<option value="+44">+44 (GB)</option>
<option value="+224">+224 (GN)</option>
<option value="+245">+245 (GW)</option>
<option value="+592">+592 (GY)</option>
<option value="+509">+509 (HT)</option>
<option value="+504">+504 (HN)</option>
<option value="+852">+852 (HK)</option>
<option value="+36">+36 (HU)</option>
<option value="+354">+354 (IS)</option>
<option value="+91">+91 (IN)</option>
<option value="+62">+62 (ID)</option>
<option value="+98">+98 (IR)</option>
<option value="+964">+964 (IQ)</option>
<option value="+353">+353 (IE)</option>
<option value="+972">+972 (IL)</option>
<option value="+39">+39 (IT)</option>
<option value="+1876">+1876 (JM)</option>
<option value="+81">+81 (JP)</option>
<option value="+962">+962 (JO)</option>
<option value="+7">+7 (KZ)</option>
<option value="+254">+254 (KE)</option>
<option value="+686">+686 (KI)</option>
<option value="+965">+965 (KW)</option>
<option value="+996">+996 (KG)</option>
<option value="+856">+856 (LA)</option>
<option value="+371">+371 (LV)</option>
<option value="+266">+266 (LS)</option>
<option value="+231">+231 (LR)</option>
<option value="+218">+218 (LY)</option>
<option value="+423">+423 (LI)</option>
<option value="+370">+370 (LT)</option>
<option value="+352">+352 (LU)</option>
<option value="+853">+853 (MO)</option>
<option value="+389">+389 (MK)</option>
<option value="+261">+261 (MG)</option>
<option value="+265">+265 (MW)</option>
<option value="+60">+60 (MY)</option>
<option value="+960">+960 (MV)</option>
<option value="+223">+223 (ML)</option>
<option value="+356">+356 (MT)</option>
<option value="+692">+692 (MH)</option>
<option value="+596">+596 (MQ)</option>
<option value="+222">+222 (MR)</option>
<option value="+230">+230 (MU)</option>
<option value="+52">+52 (MX)</option>
<option value="+691">+691 (FM)</option>
<option value="+373">+373 (MD)</option>
<option value="+377">+377 (MC)</option>
<option value="+976">+976 (MN)</option>
<option value="+382">+382 (ME)</option>
<option value="+212">+212 (MA)</option>
<option value="+258">+258 (MZ)</option>
<option value="+95">+95 (MM)</option>
<option value="+264">+264 (NA)</option>
<option value="+977">+977 (NP)</option>
<option value="+31">+31 (NL)</option>
<option value="+64">+64 (NZ)</option>
<option value="+505">+505 (NI)</option>
<option value="+227">+227 (NE)</option>
<option value="+234">+234 (NG)</option>
<option value="+47">+47 (NO)</option>
<option value="+968">+968 (OM)</option>
<option value="+92">+92 (PK)</option>
<option value="+680">+680 (PW)</option>
<option value="+970">+970 (PS)</option>
<option value="+507">+507 (PA)</option>
<option value="+675">+675 (PG)</option>
<option value="+595">+595 (PY)</option>
<option value="+51">+51 (PE)</option>
<option value="+63">+63 (PH)</option>
<option value="+48">+48 (PL)</option>
<option value="+351">+351 (PT)</option>
<option value="+974">+974 (QA)</option>
<option value="+40">+40 (RO)</option>
<option value="+7">+7 (RU)</option>
<option value="+250">+250 (RW)</option>
<option value="+966">+966 (SA)</option>
<option value="+221">+221 (SN)</option>
<option value="+381">+381 (RS)</option>
<option value="+65">+65 (SG)</option>
<option value="+421">+421 (SK)</option>
<option value="+386">+386 (SI)</option>
<option value="+27">+27 (ZA)</option>
<option value="+82">+82 (KR)</option>
<option value="+34">+34 (ES)</option>
<option value="+94">+94 (LK)</option>
<option value="+249">+249 (SD)</option>
<option value="+46">+46 (SE)</option>
<option value="+41">+41 (CH)</option>
<option value="+963">+963 (SY)</option>
<option value="+886">+886 (TW)</option>
<option value="+66">+66 (TH)</option>
<option value="+90">+90 (TR)</option>
<option value="+993">+993 (TM)</option>
<option value="+971">+971 (AE)</option>
<option value="+256">+256 (UG)</option>
<option value="+380">+380 (UA)</option>
<option value="+1">+1 (US)</option>
<option value="+598">+598 (UY)</option>
<option value="+998">+998 (UZ)</option>
<option value="+58">+58 (VE)</option>
<option value="+84">+84 (VN)</option>
<option value="+967">+967 (YE)</option>
<option value="+260">+260 (ZM)</option>
<option value="+263">+263 (ZW)</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-10 col-sm-8 col-xs-8">
                                                    <input class="form-control" type="text" name="mobileNo" pattern="^[1-9][0-9]{6,9}$" maxlength="10" ng-class="{'edited':vm.agreement.customer.mobileNo}" ng-model="vm.mobileNo" required ng-readonly="vm.step>3 || vm.mode == 3" placeholder="Enter Mobile No">
                                                </div>
                                            </div>





                                        </div>



                                    </div>



                                </div>







                                <!-- Address Block -->







                                <div style="margin-bottom: 12px;">
                                    <label style="" for="viewAddress">
                                        <input id="viewAddress" style="transform: scale(1.5); margin-right: 5px !important;" class="md-check" type="checkbox" name="viewAddress" ng-model="viewAddress" ng-disabled="vm.step>3 || vm.mode == 3">
                                        {{vm.withoutLocalize("Billing Address (optional)")}}
                                    </label>
                                </div>







                                <div class="row" ng-if="viewAddress">



                                    <div class="col-md-12">



                                        <div class="form-group">



                                            <label>{{vm.withoutLocalize("Street")}}</label>

                                            <input class="form-control" type="text" name="addressLine1" ng-class="{'edited':vm.agreement.customer.address.addressLine1}" ng-model="vm.agreement.customer.address.addressLine1" ng-readonly="vm.step>3 || vm.mode == 3">





                                        </div>



                                    </div>



                                    <div class="col-md-12">



                                        <div class="form-group">



                                            <label>{{vm.withoutLocalize("ZipCode")}}</label>

                                            <input class="form-control" type="text" name="zipCode" ng-class="{'edited':vm.agreement.customer.address.zipCode}" ng-model="vm.agreement.customer.address.zipCode" ng-readonly="vm.step>3 || vm.mode == 3">





                                        </div>



                                    </div>



                                    <div class="col-md-12">



                                        <div class="form-group">



                                            <label>

                                                <f:translate key="City" />

                                            </label>

                                            <label>{{vm.withoutLocalize("City")}}</label>

                                            <input class="form-control" type="text" name="city" ng-class="{'edited':vm.agreement.customer.address.city}" ng-model="vm.agreement.customer.address.city" ng-readonly="vm.step>3 || vm.mode == 3">







                                        </div>



                                    </div>



                                    <div class="col-md-12">



                                        <div class="form-group">



                                            <label>

                                                <f:translate key="country" />

                                            </label>

                                            <label>{{vm.withoutLocalize("Country")}}</label>

                                            <input class="form-control" type="text" name="country" ng-class="{'edited':vm.agreement.customer.address.country}" ng-model="vm.agreement.customer.address.country" ng-readonly="vm.step>3 || vm.mode == 3">







                                        </div>



                                    </div>



                                    <div class="col-md-12" ng-if="1=0">



                                        <div class="form-group">



                                            <select class="selectpicker" ng-model="">



                                                <option value="" selected="selected">...</option>



                                                <option value="Afghanistan">Afghanistan</option>



                                                <option value="Albania">Albania</option>



                                                <option value="Algeria">Algeria</option>



                                                <option value="Andorra">Andorra</option>



                                                <option value="Angola">Angola</option>



                                                <option value="Antigua">Antigua</option>



                                                <option value="Argentina">Argentina</option>



                                                <option value="Armenia">Armenia</option>



                                                <option value="Aruba">Aruba</option>



                                                <option value="Australia">Australia</option>



                                                <option value="Austria">Austria</option>



                                                <option value="Azerbaijan">Azerbaijan</option>



                                                <option value="Bahamas">Bahamas</option>



                                                <option value="Bahrain">Bahrain</option>



                                                <option value="Bangladesh">Bangladesh</option>



                                                <option value="Barbados">Barbados</option>



                                                <option value="Belarus">Belarus</option>



                                                <option value="Belgium">Belgium</option>



                                                <option value="Belize">Belize</option>



                                                <option value="Benin">Benin</option>



                                                <option value="Bermuda">Bermuda</option>



                                                <option value="Bhutan">Bhutan</option>



                                                <option value="Bolivia">Bolivia</option>



                                                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>



                                                <option value="Botswana">Botswana</option>



                                                <option value="Brazil">Brazil</option>



                                                <option value="British Virgin Islands">British Virgin Islands</option>



                                                <option value="Brunei">Brunei</option>



                                                <option value="Bulgaria">Bulgaria</option>



                                                <option value="Burkina Faso">Burkina Faso</option>



                                                <option value="Burundi">Burundi</option>



                                                <option value="Cambodia">Cambodia</option>



                                                <option value="Cameroon">Cameroon</option>



                                                <option value="Canada">Canada</option>



                                                <option value="Cape Verde">Cape Verde</option>



                                                <option value="Cayman Islands">Cayman Islands</option>



                                                <option value="Central African Republic">Central African Republic</option>



                                                <option value="Chad">Chad</option>



                                                <option value="Chile">Chile</option>



                                                <option value="China">China</option>



                                                <option value="Colombia">Colombia</option>



                                                <option value="Comoros">Comoros</option>



                                                <option value="Cook Islands">Cook Islands</option>



                                                <option value="Costa Rica">Costa Rica</option>



                                                <option value="Croatia">Croatia</option>



                                                <option value="Cuba">Cuba</option>



                                                <option value="Curaçao">Curaçao</option>



                                                <option value="Cyprus">Cyprus</option>



                                                <option value="Czech Republic">Czech Republic</option>



                                                <option value="Democratic Republic of the Congo">Democratic Republic of the Congo</option>



                                                <option value="Denmark">Denmark</option>



                                                <option value="Djibouti">Djibouti</option>



                                                <option value="Dominica">Dominica</option>



                                                <option value="Dominican Republic">Dominican Republic</option>



                                                <option value="East Timor">East Timor</option>



                                                <option value="Ecuador">Ecuador</option>



                                                <option value="Egypt">Egypt</option>



                                                <option value="El Salvador">El Salvador</option>



                                                <option value="Equatorial Guinea">Equatorial Guinea</option>



                                                <option value="Eritrea">Eritrea</option>



                                                <option value="Estonia">Estonia</option>



                                                <option value="Ethiopia">Ethiopia</option>



                                                <option value="Falkland Islands">Falkland Islands</option>



                                                <option value="Faroe Islands">Faroe Islands</option>



                                                <option value="Fiji Islands">Fiji Islands</option>



                                                <option value="Finland">Finland</option>



                                                <option value="France">France</option>



                                                <option value="French Guiana">French Guiana</option>



                                                <option value="French Polynesia">French Polynesia</option>



                                                <option value="French Southern Territories">French Southern Territories</option>



                                                <option value="Gabon">Gabon</option>



                                                <option value="Gambia">Gambia</option>



                                                <option value="Georgia">Georgia</option>



                                                <option value="Germany">Germany</option>



                                                <option value="Ghana">Ghana</option>



                                                <option value="Gibraltar">Gibraltar</option>



                                                <option value="Greece">Greece</option>



                                                <option value="Greenland">Greenland</option>



                                                <option value="Grenada">Grenada</option>



                                                <option value="Guadeloupe">Guadeloupe</option>



                                                <option value="Guam">Guam</option>



                                                <option value="Guatemala">Guatemala</option>



                                                <option value="Guernsey">Guernsey</option>



                                                <option value="Guinea">Guinea</option>



                                                <option value="Guinea-Bissau">Guinea-Bissau</option>



                                                <option value="Guyana">Guyana</option>



                                                <option value="Haiti">Haiti</option>



                                                <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>



                                                <option value="Honduras">Honduras</option>



                                                <option value="Hong Kong">Hong Kong</option>



                                                <option value="Hungary">Hungary</option>



                                                <option value="Iceland">Iceland</option>



                                                <option value="India">India</option>



                                                <option value="Indonesia">Indonesia</option>



                                                <option value="Iran">Iran</option>



                                                <option value="Iraq">Iraq</option>



                                                <option value="Ireland">Ireland</option>



                                                <option value="Israel">Israel</option>



                                                <option value="Italy">Italy</option>



                                                <option value="CI">Ivory Coast</option>



                                                <option value="Jamaica">Jamaica</option>



                                                <option value="Japan">Japan</option>



                                                <option value="Jersey">Jersey</option>



                                                <option value="Jordan">Jordan</option>



                                                <option value="Kazakhstan">Kazakhstan</option>



                                                <option value="Kenya">Kenya</option>



                                                <option value="Kiribati">Kiribati</option>



                                                <option value="Korea, Dem. People's Republic">Korea, Dem. People's Republic</option>



                                                <option value="Kosovo">Kosovo</option>



                                                <option value="Kuwait">Kuwait</option>



                                                <option value="Kyrgyzstan">Kyrgyzstan</option>



                                                <option value="Laos">Laos</option>



                                                <option value="La Réunion">La Réunion</option>



                                                <option value="Latvia">Latvia</option>



                                                <option value="Lebanon">Lebanon</option>



                                                <option value="Lesotho">Lesotho</option>



                                                <option value="Liberia">Liberia</option>



                                                <option value="Libya">Libya</option>



                                                <option value="Liechtenstein">Liechtenstein</option>



                                                <option value="Lithuania">Lithuania</option>



                                                <option value="Luxembourg">Luxembourg</option>



                                                <option value="Macau">Macau</option>



                                                <option value="Macedonia">Macedonia</option>



                                                <option value="Madagascar">Madagascar</option>



                                                <option value="Malawi">Malawi</option>



                                                <option value="Malaysia">Malaysia</option>



                                                <option value="Mali">Mali</option>



                                                <option value="Malta">Malta</option>



                                                <option value="Marshall Islands">Marshall Islands</option>



                                                <option value="Martinique">Martinique</option>



                                                <option value="Mauritania">Mauritania</option>



                                                <option value="Mauritius">Mauritius</option>



                                                <option value="Mayotte">Mayotte</option>



                                                <option value="Mexico">Mexico</option>



                                                <option value="Moldova">Moldova</option>



                                                <option value="Monaco">Monaco</option>



                                                <option value="Mongolia">Mongolia</option>



                                                <option value="Montenegro">Montenegro</option>



                                                <option value="Morocco">Morocco</option>



                                                <option value="Mozambique">Mozambique</option>



                                                <option value="Myanmar">Myanmar</option>



                                                <option value="Namibia">Namibia</option>



                                                <option value="Nepal">Nepal</option>



                                                <option value="Netherlands">Netherlands</option>



                                                <option value="Netherlands Antilles">Netherlands Antilles</option>



                                                <option value="New Caledonia">New Caledonia</option>



                                                <option value="New Zealand">New Zealand</option>
                                                <option value="Nicaragua">Nicaragua</option>
                                                <option value="Niger">Niger</option>
                                                <option value="Nigeria">Nigeria</option>
                                                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                                                <option value="Norway">Norway</option>
                                                <option value="Oman">Oman</option>
                                                <option value="Pakistan">Pakistan</option>
                                                <option value="Palestine">Palestine</option>
                                                <option value="Panama">Panama</option>
                                                <option value="Papua New Guinea">Papua New Guinea</option>
                                                <option value="Paraguay">Paraguay</option>
                                                <option value="Peru">Peru</option>
                                                <option value="Philippines">Philippines</option>
                                                <option value="Poland">Poland</option>
                                                <option value="Portugal">Portugal</option>
                                                <option value="Puerto Rico">Puerto Rico</option>
                                                <option value="Qatar">Qatar</option>
                                                <option value="Republic of the Congo">Republic of the Congo</option>
                                                <option value="Romania">Romania</option>
                                                <option value="Russia">Russia</option>
                                                <option value="Rwanda">Rwanda</option>
                                                <option value="Saint Barthelemy">Saint Barthelemy</option>
                                                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                                <option value="Saint Martin">Saint Martin</option>
                                                <option value="Saint Pierre et Miquelon">Saint Pierre et Miquelon</option>
                                                <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                                                <option value="Samoa">Samoa</option>
                                                <option value="San Marino">San Marino</option>
                                                <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                                <option value="Saudi Arabia">Saudi Arabia</option>
                                                <option value="Senegal">Senegal</option>
                                                <option value="Serbia">Serbia</option>
                                                <option value="Seychelles">Seychelles</option>
                                                <option value="Sierra Leone">Sierra Leone</option>
                                                <option value="Singapore">Singapore</option>
                                                <option value="Sint Maarten">Sint Maarten</option>
                                                <option value="Slovakia">Slovakia</option>
                                                <option value="Slovenia">Slovenia</option>
                                                <option value="Somalia">Somalia</option>
                                                <option value="South Africa">South Africa</option>
                                                <option value="South Korea">South Korea</option>
                                                <option value="South Sudan">South Sudan</option>
                                                <option value="Spain">Spain</option>
                                                <option value="Sri Lanka">Sri Lanka</option>
                                                <option value="St. Lucia">St. Lucia</option>
                                                <option value="Sudan">Sudan</option>
                                                <option value="Suriname">Suriname</option>
                                                <option value="Swaziland">Swaziland</option>
                                                <option value="Sweden">Sweden</option>
                                                <option value="Switzerland">Switzerland</option>
                                                <option value="Syria">Syria</option>
                                                <option value="Taiwan">Taiwan</option>
                                                <option value="Tajikistan">Tajikistan</option>
                                                <option value="Tanzania">Tanzania</option>
                                                <option value="Thailand">Thailand</option>
                                                <option value="The Maldives">The Maldives</option>
                                                <option value="Togo">Togo</option>
                                                <option value="Tonga">Tonga</option>
                                                <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                                <option value="Tunisia">Tunisia</option>
                                                <option value="Turkey">Turkey</option>
                                                <option value="Turkmenistan">Turkmenistan</option>
                                                <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                                                <option value="Uganda">Uganda</option>
                                                <option value="Ukraine">Ukraine</option>
                                                <option value="United Arab Emirates">United Arab Emirates</option>
                                                <option value="United Kingdom">United Kingdom</option>
                                                <option value="Uruguay">Uruguay</option>
                                                <option value="USA">USA</option>
                                                <option value="Uzbekistan">Uzbekistan</option>
                                                <option value="Venezuela">Venezuela</option>
                                                <option value="Vietnam">Vietnam</option>
                                                <option value="Wallis and Futuna Islands">Wallis and Futuna Islands</option>
                                                <option value="Yemen">Yemen</option>
                                                <option value="Zambia">Zambia</option>
                                                <option value="Zimbabwe">Zimbabwe</option>
                                            </select>
                                        </div>
                                        <label>{{vm.withoutLocalize("Country")}}</label>
                                    </div>
                                </div>

                                <!-- Address Block END -->

                                <div class="row">
                                    <div class="col-sm-12">
                                        <h2>{{vm.withoutLocalize("FurtherInformation")}}</h2>
                                    </div>
                                </div>
                                <div style="margin-bottom: 12px;">
                                    <label style="" for="viewflightDetails">
                                        <input id="viewflightDetails" style="transform: scale(1.5); margin-right: 5px !important;" class="md-check" type="checkbox" name="flightDetails" ng-model="vm.agreement.isFlightDetail" ng-change="vm.flightDateTimeChanged();" ng-disabled="vm.step>3 || vm.mode == 3">
                                        {{vm.withoutLocalize("FlightDetail")}}
                                    </label>
                                </div>
                                <div class="row" ng-if="vm.agreement.isFlightDetail">
                                    <div class="col-md-6">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>{{vm.withoutLocalize("FlightNo")}}</label>
                                            <input class="form-control" type="text" name="notes" ng-class="{'edited':vm.agreement.flightNo}" ng-model="vm.agreement.flightNo" ng-readonly="vm.step>3 || vm.mode == 3">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>{{vm.withoutLocalize("DateAndTime")}}<span class="text-danger">*</span></label>
                                            <input class="form-control" options="{showClose: false, format: 'DD.MM.YYYY HH:mm', icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-arrow-up', down: 'fa fa-arrow-down'}}" datetimepicker name="flightDate" ng-model="vm.agreement.flightDateTime" ng-class="{'edited':vm.agreement.flightDateTime}" ng-readonly="vm.step>3 || vm.mode == 3" ng-blur="vm.flightDateTimeChanged();" required="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="row" ng-if="vm.agreement.isFlightDetail">
                                    <div class="col-md-6">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>{{vm.withoutLocalize("Airline")}}</label>
                                            <input class="form-control" type="text" name="notes" ng-class="{'edited':vm.agreement.airline}" ng-model="vm.agreement.airline" ng-readonly="vm.step>3 || vm.mode == 3">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>{{vm.withoutLocalize("AirportTerminal")}}</label>
                                            <input class="form-control" type="text" name="notes" ng-class="{'edited':vm.agreement.terminal}" ng-model="vm.agreement.terminal" ng-readonly="vm.step>3 || vm.mode == 3">
                                        </div>
                                    </div>
                                </div>
                               <div style="margin-bottom: 12px;">

    <label for="viewAnotherRemark">
        <input id="viewAnotherRemark"
               style="transform: scale(1.5); margin-right: 5px !important;"
               class="md-check"
               type="checkbox"
               name="isAnotherRemark"
               ng-model="vm.agreement.isAnotherRemark"
               ng-disabled="vm.step>3 || vm.mode == 3">
        {{vm.withoutLocalize("SpecialRequest")}}
    </label>
  <textarea 
			rows="4" cols="50"
			ng-if="vm.agreement.isAnotherRemark"
          class="md-input"
          ng-model="vm.agreement.anotherRemark"
          style="width:100%; margin-top:10px; border: 1px solid #ccc; 
                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
                 outline: none;"
          onfocus="this.style.boxShadow='inset 0 1px 1px rgba(0, 0, 0, .075)'"
          onblur="this.style.boxShadow='inset 0 1px 1px rgba(0, 0, 0, .075)'">
</textarea>

</div>
<!--                                 <div class="row" ng-if="vm.agreement.isAnotherRemark">
                                    <div class="col-md-12">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <input class="form-control" type="text" name="notes" ng-class="{'edited':vm.agreement.notes}" ng-model="vm.agreement.notes" ng-readonly="vm.step>3 || vm.mode == 3">
                                        </div>
                                    </div>
                                </div> -->
                                <!--<div class="row">
                                    <div class="col-sm-6">
                                        <h2>Documents* <span style="color:red;font-size:12px;font-style:italic">(Driving License is mandatory)</span></h2>
                                    </div>
                                    <div class="col-sm-6 text-right" style="line-height: 4;">
                                        <input type="button" value="Upload" ng-click="vm.openDocUploadModal()" style="border-radius: 6px;" class="btn btn-xs btn-primary">
                                    </div>
                                </div>
                                <div class="row" ng-if="vm.agreement.customer.identityDocuments.length > 0">
                                    <div class="col-md-12">
                                        <table style="font-size:12px" class="table table-striped table-borderless table-hover">
                                            <thead>
                                                <tr>
                                                    <th style="color:#fff">
                                                        Type
                                                    </th>
                                                    <th style="color:#fff">
                                                        No.
                                                    </th>
                                                    <th style="color:#fff">
                                                        Issue Date
                                                    </th>
                                                    <th style="color:#fff">
                                                        Expiry Date
                                                    </th>
                                                    <th style="color:#fff">
                                                        File
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="row in vm.agreement.customer.identityDocuments">
                                                    <td>
                                                        {{row.identityDocumentType == 3? 'National ID': 'Driving License'}}
                                                    </td>
                                                    <td>
                                                        {{row.documentNo}}
                                                    </td>
                                                    <td>
                                                        {{vm.getlocalDate(row.issueDate)}}
                                                    </td>
                                                    <td>
                                                        {{vm.getlocalDate(row.expiryDate)}}
                                                    </td>
                                                    <td>
                                                        <a ng-repeat="img in row.images" href="{{img.url+img.token}}" target="_blank"><img src="{{img.url+img.token}}" style="height:30px" />&nbsp;</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>-->
                            </form>
                        </div>


                    </div>



                    <div class="row" style="margin-top:20px;" ng-if="vm.mode==3 && !vm.iscancelled">
                        <div class="col-md-12">
                            <div class="bold" style="text-align:center;">
                                <button ng-disabled="vm.loading" type="submit" button-busy="vm.cancelling" class="btn btn-primary blue" ng-click="vm.cancelBooking()" style="min-width:250px;min-height:50px;"><i class="fa fa-car"></i><span>Cancel</span></button>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px;" ng-show="vm.step == 4 && vm.mode != 3">
                        <div class="col-md-12 text-danger">
                            <h4>
                                {{vm.withoutLocalize("ThankYou")}}
                            </h4>
                            <h4 style="margin-top: 15px;">{{vm.withoutLocalize("YourBookingNoIs")}} {{vm.booked.agreementNo}}. {{vm.withoutLocalize("BookingEmailSentMessage")}} </h4>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px;" ng-show="vm.mode==3 && vm.iscancelled">
                        <div class="col-md-12">
                            <h2>{{vm.withoutLocalize("SuccessfullyCancelledBooking")}}</h2>
                        </div>
                    </div>

                </div>
                <!-------------------------------------------------Driver Detail End--------------------------------------------------------->


                <div class="col-md-4 step-2" ng-if="vm.step==2 || vm.step==3">
                    <div class="panel panel-default row charges-summary" ng-hide="" style="margin-top: 20px; margin-left: 10px; margin-right: 0px; display: flow-root;" ng-disabled="vm.loading">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <span style="font-size:18px; color:black;margin-left:-2px">Charges Summary</span>
                                </div>
                            </div>
                            <div class="row" style="height:10px">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-left font-lg bold">
                                    Sub Total:
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right font-lg bold">
                                    {{vm.currency}} {{(vm.agreement.totalCharges - vm.taxAmount) | number:0}}
                                </div>
                            </div>
                            <div class="row" ng-if="vm.taxPercent > 0 && !vm.isTaxInclusive" style="height:50px">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-left font-lg bold">
                                    {{vm.localize("Tax")}} <span class="font-xs">{{vm.taxPercent}}% <span ng-if="vm.isTaxInclusive">{{vm.localize("Inclusive")}}</span></span>:
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right font-lg bold">
                                    {{vm.currency}} {{vm.taxAmount}}
                                </div>
                            </div>
                            <div class="row" style="background: #F2F4F6; border-radius: 5px; padding-top: 15px; margin-top: 20px;">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-left font-lg bold">
                                    <span class="font-lg" style="font-weight:700">{{vm.localize("Total Charges")}}:</span>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right font-lg bold" style="font-weight:700">
                                    {{vm.currency}} {{vm.calculate()}}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>



                <!------------------------------Driver Detail----------------------------->




            </div>

            <div class="row" ng-if="vm.step==3 || vm.step==2" ng-disabled="vm.loading" id="other-pricing-tabs">
                <div class="col-md-12 disclaimer-section">
                    <div class="row" style="margin-left: -13px;;" ng-if="vm.step==3">
                        <div class="col-md-12">
                            <label for="TermsAndCondition">
                                <input id="TermsAndCondition" style="transform: scale(1.5);" class="md-check" type="checkbox" name="TermsAndCondition" ng-model="vm.isTermsAndConditionChecked">
                              <a href="https://car2go.rent/terms/" 
   style="margin-left:5px; text-decoration: none; font-size: 14px" 
   target="_blank" 
   class="green-text font-weight-bold s-9">
  {{vm.withoutLocalize("I confirm that I have read and accept the rental information and ")}}
  <span style="text-decoration: underline;">{{vm.withoutLocalize("terms and conditions")}}</span>
  {{vm.withoutLocalize(".")}}
</a>
                            </label>
                        </div>
                    </div>

                    <div class="row no-mobile-change" ng-if="vm.step==2">

                        <!-- row panel panel-default -->

                        <div class="col-md-6 col-sm-6 col-xs-6">

                            <button ng-disabled="vm.loading" type="submit" button-busy="vm.saving" class="btn btn-default mrgn-btm back-btn" ng-click="vm.customBackButton(1)"><i class="fa fa-back"></i> {{vm.withoutLocalize("Back")}}</button>

                        </div>

                        <div class="bold col-md-6 col-sm-6 col-xs-6 text-right a-41">

                            <button ng-disabled="vm.loading" type="submit" button-busy="vm.saving" class="btn btn-primary blue btn-style-custome next-btn" ng-click="vm.setStep3(3)"><i class="fa fa-car"></i> <span ng-if="!vm.clickedDetailedBtn"> {{vm.withoutLocalize("Next")}}</span> <span ng-if="vm.clickedDetailedBtn"> {{vm.withoutLocalize("Book")}}</span></button>

                        </div>

                    </div>

                    <div class="row no-mobile-change" ng-show="vm.step==3">
                        <div class="col-md-6 col-sm-6 col-xs-6">

                            <button ng-disabled="vm.loading" type="submit" style="background-color: #fff !important;" button-busy="vm.saving" class="btn btn-default mrgn-btm back-btn" ng-click="vm.customBackButton(2)"><i class="fa fa-back"></i> {{vm.withoutLocalize("Back")}}</button>

                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="bold" style="text-align:right;">
                                <button 
                                ng-disabled="!vm.isTermsAndConditionChecked || !vm.agreement.customer.firstName || !vm.agreement.customer.email || !vm.mobileNo || bookingForm.$invalid || vm.disableSubmitBtn || vm.loading || vm.saving" 
                                type="submit" 
                                class="btn btn-primary blue book-my-reservation" 
                                ng-click="vm.save()">
                                <i class="fa fa-car"></i>
                                <span ng-if="vm.mode == 1" id='bookMyReservationSpan'> Book</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--<div class="row" ng-show="vm.step==3">
                <div class="col-md-12">
                    <span style="
                        font-weight: 600;
                        font-size: 18px;
                        ">Payment Method Accepted:</span>
                    <img src="https://rentalcaruae.com/wp-admin/images/payment_method_accepted.png">
                </div>
            </div>-->

        </div>

    </div>

</div>
</div>





<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->



<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/select.min.js" type="text/javascript"></script>



<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/datetimepickerDirective.js" type="text/javascript"></script>



<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>



<script src="https://car2go.rent/lb/wp-content/plugins/speed-bookings-engine-lb/admin/js/angular-daterangepicker.min.js" type="text/javascript"></script>{"id":1175,"date":"2026-04-10T15:09:53","date_gmt":"2026-04-10T12:09:53","guid":{"rendered":"https:\/\/car2go.rent\/lb\/?page_id=1175"},"modified":"2026-04-10T15:11:02","modified_gmt":"2026-04-10T12:11:02","slug":"reservation","status":"publish","type":"page","link":"https:\/\/car2go.rent\/lb\/reservation\/","title":{"rendered":"reservation"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1175","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"c2gadmin","author_link":"https:\/\/car2go.rent\/lb\/news\/author\/c2gadmin\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/pages\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/comments?post=1175"}],"version-history":[{"count":3,"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/pages\/1175\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/pages\/1175\/revisions\/1178"}],"wp:attachment":[{"href":"https:\/\/car2go.rent\/lb\/wp-json\/wp\/v2\/media?parent=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}