/*Book and complete page*/
body.book .content-box,
body.complete .content-box, 
body.dossier .content-box
{
	@pv-book-contentbox();
}

body.book div.popupContainer > .popUpBox > .content-box {
	margin-top:0;
}

body.book .step-content .travelers table.rbtGender {
    float: left;

    td {
        padding: 5px 0;
        & > label {
            width: 50px;
        }
    }

    & + .genderValidator > .formErrorImg {
        margin-left: 133px;
    }
}

body.book .box .step-content select.ddlPhoneAreaCode,
body.book .box .step-content select.ddlHomeStayPhoneAreaCode {
    width: 74px !important;
    z-index: 2;
    position: absolute;
    opacity: 0;
    left: 0;

	&:focus + div.PhoneNumberOverlay {
        border-color: @pv-color-blue; /* IE and Edge */
    }
}


body.book .box .step-content .phone-dropdown-container,
body.book .box .step-content .homestayphone-dropdown-container {
    position: relative;

    float: left;

    &:hover, 
	&:focus-within {
        & + input[type="text"]{
            border-left-color: @pv-color-blue;
        }

        & > div.PhoneNumberOverlay {
            border-color: @pv-color-blue;
        }
    }
}

body.book .box .step-content input.txtPhone,
body.book .box .step-content input.txtHomeStayPhoneFixed {
    width: 203px;
    margin-left:0;
    border-bottom-left-radius:0;
    border-top-left-radius:0;
}

body.book .box .step-content .PhoneNumberOverlay {
    @pv-book-areacode-overlay();
}


body.book .step-header, 
body.complete .step-header, 
body.dossier .step-header, 
.upsell .step-header {
	width:268px;
	height:33px;
	margin:0;
	padding:10px 0 0 10px;
	font-size:20px;
	line-height:20px;
	margin:0 0 15px -15px;
	float:left;
	@pv-book-step-header();
}

    body.book .inactive .step {
		@pv-book-inactive-step();
	}

	body.book .inactive .step-header, 
	body.complete .inactive .step-header, 
	body.dossier .inactive .step-header {
		background:none;
		width:268px;
		height:32px;
		margin:0;
		padding:10px 0 0 10px;
		font-size:20px;
		float:left;
		@pv-book-inactive-step-header();
	}
	body.book .step, 
	body.complete .step, 
	body.dossier .step {
		float:right;
		font-size:20px;
		line-height:20px;
		padding:10px 0 0 0;
		@pv-book-step();
	}
    
	body.book .step.complete {
		background-position:left bottom;
		background-repeat:no-repeat;
		padding-left:25px;
	}

    body.book .step.complete, 
	body.complete .step.complete, 
	body.dossier .step.complete 
	{
		color:#009900;
	}

			.book .content-box.inactive .content, .complete .content-box.inactive .content,
		body.dossier .content-box.inactive .content
		{
			padding:0 15px 0 0;
		}

        .book .content-box.inactive
	    {
			@pv-book-inactive-contentbox();

	    }

body.book .step-content, body.complete .step-content, body.dossier .step-content {
	float:left;
	clear:both;
	width:100%;
	@pv-book-step();
}

	body.book .step-content h4, 
	body.complete .step-content h4, 
	body.dossier .step-content h4 
	{
		margin-bottom:13px;
		@pv-book-step-h4();
	}

	body.book .step-content .extras h4, 
	body.complete .step-content .extras h4, 
	body.dossier .step-content .extras h4 
	{
		margin-bottom:13px;
		@pv-book-step-extras-h4();
	}

    body.book input[type="text"].txtdateofbirth
	{
		background-color: #C8E8FD;
	}

    body.book select:focus
	{
		@pv-book-select-focus();
	}

	.label-text { line-height:16px; }
	.label-text small { font-size:100%; }

	body.book .step-content .dashed-box p, 
	body.complete .step-content .dashed-box p, 
	body.book .step-content .dashed-box .toggleText, 
	body.dossier .step-content .dashed-box p, 
	body.dossier .step-content .dashed-box .toggleText 
	{
		float:left;
		width:100%;
		margin-bottom:20px;
	}

	body.book .step-content .dashed-box .toggleText,
	body.dossier .step-content .dashed-box .toggleText 
	{
		width:430px;
	}

	body.book .step-content .dashed-box .partner, body.complete .step-content .dashed-box .partner, body.dossier .step-content .dashed-box .partner {
		clear: right;
		min-height:60px;
	}

	body.book .step-content.complete h4, body.complete .step-content.complete h4, body.dossier .step-content.complete h4 {
		margin:10px 0 10px 0;
		width:100%;
	}

	body.book .step-content.complete span, 
	body.complete .step-content.complete span, 
	body.dossier .step-content.complete span {
		@pv-book-content-complete-span();
	}

body.book .step-content.complete .travelers .row, body.complete .step-content .travelers .row,
body.book .step-content.complete .extras .row, body.complete .step-content .extras .row,
body.dossier .step-content.complete .extras .row, body.complete .step-content .extras .row
{
	float:left;
	clear:both;
}
    
	body.book .step-content .travelers label, body.complete .step-content .travelers label,
	body.book .step-content .extras label, body.complete .step-content .extras label,
	body.dossier .step-content .extras label, body.complete .step-content .extras label {
		float:left;
		width:150px;
		clear:left;
		@pv-book-label();
	}

	body.book .step-content .travelers .wide label,
	body.book .step-content .extras .wide label, 
	body.dossier .step-content .extras .wide label {
		width:auto;
	}

	body.book .step-content .travelers .wide,
	body.book .step-content .extras .wide, 
	body.dossier .step-content .extras .wide  {
		float:left;
	}

    body.book .step-content .extras .notifyForUpsell label{width:auto; padding-right:5px;}

	body.book .step-content .travelers select, 
	body.book .step-content .travelers input,
	body.book .step-content .extras select, 
	body.book .step-content .extras input,
	body.book .step-content .extras textarea,
	body.complete .step-content .travelers select, 
	body.complete .step-content .travelers input
	{
			float:left;
			clear:right;
			margin-right:5px;
			@pv-book-travelers-elements();
		}


	body.book .step-content .travelers span
	{
		@pv-book-travelers-span();
	}

	body.book .step-content.complete label
	{
		font-weight:@pv-font-weight-semibold;
	}

	body .step-content .extras .txt-discount {
		clear:none;
	}
	body .step-content .extras .btn-discount {
		float: left;
		margin-bottom:10px; 
	}
body .step-content .extras .insuredList{ float: left;margin-bottom: 5px;}

body.book .qpWash li
{
	float:left;
	display:block;
	width:100%;
}

	body.book .qpWash li label
	{
		width:300px !important;
	}

    @import "./styles_book_holidayextras.less";
	@import "./styles_book_parcompare.less";
    @import "./styles_book_servicepackage.less";
    @import "./styles_book_holidaytaxis.less";
    @import "./styles_book_transfer_rental.less"; 
    @import "./styles_book_sunnycars.less";

body.complete .content-box .content .description, body.dossier .content-box .content .description
{
	width:100%;
}

body.complete .content-box .content .description .reservationNumber, body.dossier .content-box .content .description .reservationNumber
{
	width:100%;
	font-size:18px;
	.box-sizing();
	background-position-y:-50px !important;
	white-space:nowrap;
	@pv-book-reservationnumber();
}

body.book .step-content .link-change-data
{
	margin-top:10px;
}

/* form */

body.book div {

    #HomeNumberContainer{
        float: left;

        label{
            width: 63px;
            margin-left: 35px;
        }
    }
}

/* If error display warning sign, else don't */
body.book div[id*="fieldZipcode"]{
    div.wrong-postalcode-errortext{
        display: none;
        clear: both;
        margin-left: 170px;
        padding-top: 10px;
    }

    &.wrong-postalcode{
        background-color: @pv-wrong-postalcode-bgcolor;

        div.wrong-postalcode-errortext{
            display: inherit;
        }
    }
}

#addressPretty{
    .addresspretty-textpanel {
        .box-sizing();
        padding-left: 10px;
        width: 278px;
        float: left;
        clear: right;
        margin-right: 5px;
        background-color: @pv-addresspretty-bgcolor;
    }
}

   
#streetTextField,
#locationTextField {
    animation: quick-highlight 2.5s;
}

@keyframes quick-highlight {
    0% {
        background-color: transparent;
    } 
    50% {
        background-color: @quick-highlight-bgcolor;
    }
    100% {
        background-color: transparent;
    }
}

body.book select{
    padding-bottom: 0;
    padding-top: 0;
}

body.book input {

    &:not([type=checkbox]):not([type=radio]){
       
    }

    &[type="text"] {
        // Removes the grey inner top shadow on iOS https://stackoverflow.com/a/23211766/
        -webkit-appearance: none;

        &:not(.search) {
            width: 278px;
        }

        &.postalcode {
            width: 100px;
        }

        &.homenumber {
            &.loading {
                background: #fff url(img/base/ico/ajax-loader.gif) no-repeat 49px center;
            }

            width: 75px;
        }
    }

    &[readonly],
    &[disabled],
    &[contenteditable="false"] {
        cursor: not-allowed !important;
        background-color: #AFAFAF !important;
        color: white !important;
    }
}

body.book select:not(.paymentSubOptions)
{
	@pv-book-select();
}

body.book .form-error input,
body.book .form-error select{
    
	@pv-book-formerror();
}

	body.book input .txtinfix
	{
		width:100px;
	}

.travelers .dashed-box .row.field, .extras .dashed-box .row.field
{
	position: relative;
	width:100%;
	margin-bottom:6px;
	min-height:21px;
}

.ulInsHolder .ulIns {
    margin: 10px 0px 5px 20px;
}

.ulIns
{
	width:100%;
}

.ulIns li
{
	width:100%;
	margin-bottom:10px;
}

	.ulIns li .fn input
	{
		/*float:none !important;*/
	}

body.book .step-content .extras .fn input
{
	/*float:none !important;*/
	float:left !important;
	@pv-book-extras-input();
}
body.book .step-content .extras .fn label, body.dossier .step-content .extras .fn label
{
	clear:none;
	width:auto !important;
	@pv-book-extras-input-label();
}

	body.book .step-content .extras .fn label span {
		display:inline-block;
	}


/* form */
.payment-options {
}

    .payment-options h4 {
		font-size:19px;
		color:#bf0000;
		margin-bottom:10px;
	}

	.payment-options input {
		clear:left;
	}
	.payment-options input, .payment-options label {
		float:left;
		line-height:36px;
		height:36px;
		vertical-align:middle;
		margin-right:5px;
	}
	.payment-options label {
		cursor:pointer;
	}
	.payment-options .depositOptions {
	}

	.payment-options .depositOptions li {
		display:block;
		height:16px;
		line-height:16px;
		width:100%;
		clear:both;
	}

	.payment-options .depositOptions li label, .payment-options .depositOptions li input {		
		line-height:30px;
		height:30px;
	}

		.payment-options .depositOptions li:first-child label {
			float:none;
			display:block;
			
		}

	.payment-options .depositOptions li:first-child {
		display:block;
		line-height:16px;
		height:50px;
	}
		.payment-options .depositOptions li:first-child label, .payment-options .depositOptions li:first-child input {
			height:50px;
			line-height:16px;
		}


	ul.terms li small,
	.payment-options small {
		font-size:100%;
	}
    .payment-options small {
        
    }
	ul.terms li strong {
		white-space:nowrap;
	}

ul.terms {
	width:100%;
	float:left;
	margin-top:10px;
}

	ul.terms > li {
		margin-bottom: 10px;
		float: left;
		width:100%;
		.box-sizing();
		padding-left: 30px;
        /*background:url(../../img/Base/ico/vinkje.png) no-repeat left top;*/
	}

		ul.terms li span.vink.right {
			margin:0 0 0 -30px;
			background-size:20px 20px;
			width:20px;
			height:20px;
			margin-top:3px;
		}

	ul.terms .packageTextOrigin li {
		float:none;
        margin:0;
        padding:0;
        background:none;
	}

.terms-accept-link {
	width:100%;
	@pv-book-termsacceptlink();
}
	.terms-accept-link input {
		margin-right:5px;
	}


body.book .dashed-box, 
body.complete .dashed-box, 
body.dossier .dashed-box
{
	.box-sizing();
	width:100%;
	@pv-book-dashedbox();
}

body.book .dashed-box.red, 
body.complete .dashed-box.red, 
body.dossier .dashed-box.red
{
	.box-sizing();
	width:100%;
	@pv-book-dashedbox-red();
}

.complete #receipt .pricelabel { display: none; }

body.book .content-box .col4 .row,
body.complete .content-box .col4 .row
{
	padding-right:20px;
	padding-bottom:10px;
	position:relative;
}

body.book .content-box .col4 .row a.popupshow,
body.complete .content-box .col4 .row a.popupshow
{
	position:absolute;
	top:0;
	right:20px;
}

body.book .content-box .col4 .row > label,
body.book .content-box .col4 .row > span.field,
body.complete .content-box .col4 .row > label,
body.complete .content-box .col4 .row > span.field
{
	width:100%;
}

body.book .extras .row.field,
body.complete .extras .row.field,
body.book .ulInsHolder li,
body.book #servicepackages li,
body.book .travelers .row.field,
body.book .payment-options .paymentSelection li,
body.book .payment-options .depositOptions li,
body.book #parcompare ul.ulIns li
{
	@pv-custom-checkbox();
}

body.book #parcompare ul.ulIns li input[type=radio]+label
{
	font-weight:600;
	padding-left:25px;
}

body.book ul.ulIns li label
{
	font-weight:@pv-font-weight-regular;
}
body.book ul.ulIns li label:hover
{
	font-weight:@pv-font-weight-semibold !important;
}


body.book .payment.fl.paymentSelection li
{
	height:40px;
}

body.book .payment.fl.paymentSelection li label
{
	line-height:32px !important;
}

@media(max-width: 979px)
{
	body.complete .partner-box ul li
	{
		width:100% !important;
		margin-right:0 !important;
		margin-bottom:10px;
	}

	body.book .payment.fl.paymentSelection li
	{
		height:60px;
	}

	body.book .payment li select.paymentSubOptions {
		margin-left: 105px !important;
		margin-top: 5px !important;
	}
}

body.book .content-box > .content 
{
	padding-bottom:30px;
}

body.book .content-box > .content .step-content .btn{
	margin-top:20px;
}

body.book #ContentPlaceHolderContent_CustomerNAW_chkNewsletter + label{
    line-height: 22px;
    margin-top: 5px;
}

body.book .content-box .content .row.rooms h4,
body.book .content-box .content .row.transport h4,
body.complete .content-box .content .row.rooms h4,
body.complete .content-box .content .row.transport h4
{
	margin-top:20px;

}

body.book .step-content .box:not(:last-child)
{
	margin-bottom:15px;
}

body.book .payment-options h4 .infoBalloon
{
	margin-left:10px;
}

body.book .terms-accept-link
{
	@pv-book-terms-acceptlink();
}

@media(max-width: 767px)
{
	body.complete .content-box .content .description .reservationNumber
	{
		white-space:normal;
	}

	#transport-overview .col4:not(:first-child)
	{
		margin-top:20px;
	}

	.book .content-box .content .step-content .dashed-box
	{
		padding:0;
	}

	.book ul.depositOptions > li:not(:last-child)
	{
		margin-bottom:15px;
	}
}

body.book #receipt .image img
{
	max-height:206px;
}

ul#servicepackages > li > ul > li,
body.book #content .content-box ul.list > li {
	text-align: left;
    line-height: 24px;
    font-size: 14px;
    padding-left: 30px;

	&.included {
		background: url(img/base/ico/vinkje.svg) no-repeat 3px 6px;
		background-size: 15px 15px;
	}
	&.not-included {
		color: #ccc;
		text-decoration: line-through;
		position: relative;

		&::before {
			content: '×';
			color: #fff;
			font-family: 'Open Sans';
			font-size: 16px;
			line-height: 16px;
			text-align: center;
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			top: 3px;
			font-size: 24px;
			color: #ccc;
			width: 22px;
		}
	}
}

.book div#site:not(.mobile) .popUpBox .content-box { margin-top:0 !important; }

/*Book and complete page*/