/*RECEIPT*/

#receipt
{	
	padding:5px 0 0px 0;
	margin:44px 0 0 0;
	position:relative;
	display:block;
	.box-sizing();
	width:100%;
	@pv-receipt();

    .wait-box
    {
	    width:100% !important;
	    padding:0 !important;
	    position:relative !important;
	    top:0;left:0;
	    border:none !important;
        background:url(img/base/gradient/gradient_even-wachten-aub.png) repeat-x left bottom;

        &.shadow
        {
            .box-shadow(none) !important;
	        -ms-filter: none !important;
        }
    }

    span.tt
    {
        display:block;
        width: 20px;
        height: 20px;
        position:absolute;
        left: 13px;
    	@pv-transport-blue();    
    }


	.box-header
	{
		background:none;
        color: @pv-color-red;
		filter:none;
	}

	.box-content
	{
		background:none;
		border:none;
		padding:16px;
		padding-top: 50px;
		
		a
		{
			@pv-receipt-a();
		}

        

        label.accommodation {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Vacation/Citytrips.svg) no-repeat center center;
        }
        label.destination {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/General/Map.svg) no-repeat center center;
        }
        label.travelers {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Other/Party.svg) no-repeat center center;
        }
        label.transport {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Transport/Flight.svg) no-repeat center center;
			&.EV{
				background:none;
				& + span.field > span.tt.EV{
					background:url('img/base/ico/2021/Transport/Own Transport.svg') no-repeat center center;
					filter: invert(47%) sepia(12%) saturate(0%) hue-rotate(255deg) brightness(88%) contrast(80%);
					margin-left:5px;
				}
			}
        }
        label.outward {
            @pv-receipt-icon();
            //background:url(img/base/ico/Vliegtuig_heen.svg) no-repeat center center;
        }
        label.return {
            @pv-receipt-icon();
            //background:url(img/base/ico/Vliegtuig_terug.svg) no-repeat center center;
        }
        label.provider {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Other/Food.svg) no-repeat center center;
        }
        label.travelduration {
            @pv-receipt-icon();
            background:url('img/base/ico/2021/Transport/Flight Duration 2.svg') no-repeat center center;
        }
        label.care {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Other/Food.svg) no-repeat center center;
        }
        label.rooms {
            @pv-receipt-icon();
            background:url(img/base/ico/2021/Transport/Hotel.svg) no-repeat center center;
        }

		label {
			filter: invert(47%) sepia(12%) saturate(0%) hue-rotate(255deg) brightness(88%) contrast(80%);
		}

	}

	.image 
    {
		width:290px;
		padding:0 0 10px 0;
		margin:0 0 10px 0;
		@pv-receipt-image();

        img 
        {
			width:100%;
		}

		h2 
        {
			font-size: 17px;
            font-weight:bold;
			line-height:24px;
			@pv-receipt-image-h2();
		}

		h3 
        {
            margin-bottom:5px;
			font-size: 12px;
			@pv-receipt-image-h3();
		}
	}

	#ctl00_ContentPlaceContentBlock3_Receipt_pnlButtonSave{
		& > .row{
			display:flex;
			flex-direction:column;
		}

		#ctl00_ContentPlaceContentBlock3_Receipt_btnMailTrip {
			float:none;
			justify-content:center;
			margin-top:10px;
		}
	}
}



#receipt.content-box .price-overview-block
{
	float:right;
}

	#receipt .price-overview 
    {
		padding:0 0 10px 0;
		margin:0 0 10px 0;
		width:290px;
		@pv-receipt-priceoverview();
	
	    h3 {
		    font-size: 16px;
		    line-height:19px;
		    margin-bottom:5px;
		    font-weight: normal;
            
			@pv-receipt-priceoverview-h3();
	    }
    

	    ul.ulPrices
	    {
		    float:left;
		
		    li
		    {
			    float:left;
		    }

		    .description
		    {
			    width:190px;
		    }

		    .total
		    {
			    width:100px;
		    }
        }

	    dt {
		    float:left;
		    text-align:left;
		    clear:left;
		    width:190px;
	    }
	    dd {
		    float:right;
		    text-align:right;
		    clear:right;
		    width:100px;
	    }

	    dl
        {
            width:290px;

		    &.price {
			    font-weight:bold;
			    margin-top:4px;
			    padding-top:4px;

			    dt {
				    font-size:16px;
                    width:120px;
			    }
			    dd {
				    font-size:20px;
                    width: 170px;
			    }
				@pv-receipt-price();
            }

		    &:not(.price) {
			    padding-bottom:4px;
			    float:left;
                border-bottom:1px solid #8cd1ff;
		    }
        }
    }

	#receipt .downpayment {
		width:290px;
	}

	#receipt .savings {
		position:relative;
		height:41px;
		width:100%;
		padding:8px 10px 0;
		.box-sizing();
		font-size:20px;
		text-transform:uppercase;
		@pv-receipt-savings();

		dt {
			float:left;
			@pv-receipt-savings-dt();
		}
		dd {
			float:right;
			text-align:right;
		}
    }



			


	#receipt .pricelabel,
    #receipt .pricelabel.huge
	{
		top: -44px;
		text-align: center;
		padding-top: 20px;
		font-weight: bold;
		height: 61px;
        @pv-pricelabel-huge();
	}

	#receipt .row
	{
		display:block;
		float:left;
		width:100%;

        @pv-receipt-row();

		label
		{
			width:22%;
			float:left;

            &.font-twc.fwb {
                font-size:16px !important;
            }
		}

		.field, 
        ul
		{
			width:84%;
			word-break:break-word;
		}

	    .spacer{
            height:9px;
		    width:100%;
		    display:block;
		    float:left;
		    margin:0 0 10px 0;
			@pv-receipt-spacer();

	    }
    }

    #receipt .receipt-transport-date {
        text-transform:capitalize;
		font-family: Lato;
		font-style: normal;
		font-weight: bold;
		font-size: 16px;
		line-height: 24px;
    }

    #receipt .receipt-transport-departure-time,
    #receipt .receipt-transport-arrival-time {
        position: absolute;
        left: -45px;
    }

	#transport-overview .row ul { width:100%; }

	#transport-overview .row .airline {
		position:relative;
		width:100%;
		.box-sizing();
	}
	#receipt .row .airline {
		position:relative;
	}

		#transport-overview .row .airline span {
			position:absolute;
			left:0px;
			top:25px;
		}
		#receipt .row .airline span {
			position:absolute;
			left:-110px;
			top:25px;
		}

	#receipt .last-row {
		padding-bottom:5px;
		@pv-receipt-lastrow();
		border-bottom: none;
		font-size:13px;
	}
	#receipt .price-container {
		margin-top:2px;
		position:relative;
		padding:20px 0 0 0;
		@pv-receipt-pricecontainer();
	    height: auto;
		border-top: 1px solid #efefef;
		display:flex;
		flex-direction:column;
		font-size:13px;
		&.large{
			font-size:16px;
		}

		.price-info:empty{
			display:none;
		}

		.total-us{
			font-size:16px;
			font-weight:bold;
			padding-top:10px;
		}
    }

	#receipt .deal-guarantee-holder{
		position:relative;
		width:100%;
		float:left;

		.deal-guarantee{
			position:absolute;
		    right:0;
		    top:0;
            height:60px;
            width:60px;
			filter:none;
            img {
                width:100%;
            }
	    }
	}

		#receipt .price-container dl {
			margin-top:-5px;

		    dt {
			    font-weight:bold;
			    font-size:15px;
			    width:65%;
			    line-height:21px;
			    vertical-align:bottom;
		    }

		    dd {
			    font-weight:bold;
			    width:35%;
                text-align:right;
			    white-space:nowrap;

			    small {
				    font-size:100%;
			    }
		    }
        }

        #receipt .price-container .price {
            width:100%;
            text-align:left;
        }

		#receipt .price-container p,
        #receipt .price-container ul  {
			width:185px;
            @pv-receipt-pricecontainer-width();
		}

		#receipt .price-container div.price-info {
            /*margin-top: 5px;
			width:185px;
            @pv-receipt-pricecontainer-width();*/
			width:100%;
			margin-right:0;
			box-sizing:border-box;

			p{
				width:100%;
			}
			a.excluded{
				text-decoration:none;
				text-align:left;
			}
		}

	#receipt .receiptMessage
	{
		margin:10px 0;
	}

	#receipt .receiptMessage .receiptMessageText
	{
		padding:15px;
        background-color: #f1f1f1;
	}

		#receipt .receiptMessage .receiptMessageText strong
		{
			float:left;
		}

		#receipt .receiptMessage .receiptMessageText .receiptMessageToDo
		{
			width:100%;
		}

			#receipt .receiptMessage .receiptMessageText .receiptMessageToDo li
			{ 
                position: relative;
                padding-left: 13px;
                &::before {
                    content: '';
                    display: inline-block;
                    width:6px;
                    height:6px;
                    .border-radius(3px);
                    background-color:#c00;
                    position:absolute;
                    left:0;
                    top:4px;
                    @pv-list-bullet();
                }
			}

		#receipt .receiptMessage .receiptMessageText .btn-geel {
			padding-left:5px;
			width:135px;
			@pv-receipt-btngeel();
            margin-top: 15px !important;
		}

	#receipt .receiptChooseTrip
	{
		margin:10px 0;
		width:100%;
	}

#receipt #discountAndAdditions {
	width: 100%;

	li {
		padding-bottom: 6px;
	}

	.discount {
		color: #390;
		font-weight: bold;

		&.strike{
			
			span{
				text-decoration:line-through;
			}
		}
	}
}

/*RECEIPT*/
#receipt {
    .dashed-box {
        width: 100%;
        .box-sizing();
        border: none;
		text-align:center;

        span.title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            display: inline-block;
        }

        span.sub-title {
            font-size: 16px;
            font-weight: bold;
            clear: both;
            display: inline-block;
        }
    }

    .pnlwait2,
    .pnlwait4 {
        width: 100%;
    }
}
#receipt {
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	box-sizing: border-box;
	border-radius: 2px;
	float: left;
	box-shadow: 0px 4px 20px #eeeeee;

	.dashed-box {
		background: #ffffff;
	}

	.receipt-trustpilot {
		background: transparent url(img/base/elements/pc/trustpilot-receipt.jpg) no-repeat center center;
		background-size: contain;
	}

	.box-content .row {
		margin-bottom: 10px !important;
		float: left;

	}

	.box-content .row.last-row{
		margin-bottom:0 !important;
	}
	
	.box-content .row.last-row + .row.last-row + .row{
		display:none;
	}

	.receiptGroups {
		> div {
			> span {
				font-family: Lato;
				font-style: normal;
				font-weight: bold;
				font-size: 16px;
				line-height: 24px;
				color: #0077BF;
				margin-top: 10px;
			}
		}

		.green {
			font-family: Lato;
			font-style: normal;
			font-weight: bold;
			font-size: 16px;
			line-height: 24px;
			color: #52C75D !important;
		}
	}

	.receipt-icons {
		margin-top: 10px;
	}

	.pricelabel {
		background: none;
		transform: none;

		figcaption {
			margin-top: 10px;
		}

		.value {
			font-family: Titillium Web;
			font-style: normal;
			font-weight: bold;
			font-size: 32px;
			line-height: 34px;
			text-align: right;
			letter-spacing: -0.02em;
			color: #FF7801;
			position: relative;
			bottom: unset !important;
			right: unset !important;
		}

		small {
			font-family: Lato;
			font-style: normal;
			font-weight: bold;
			font-size: 12px;
			line-height: 100%;
			text-align: right;
			color: #333333;
			position: relative;
			top: unset;
			left: unset;
			margin-top: 10px;
		}
	}

	.box-content {
		border: none;

		.acco-img {
			width: ~"calc(100% + 32px)";
			margin-left: -16px;
		}
		.row{
		.spacer {
			border-bottom: 1px solid #EFEFEF;
			background-color: transparent;
		}
		}
	}

	.box-header {
		background-color: white !important;
		font-family: Titillium Web;
		font-style: normal;
		font-weight: bold;
		font-size: 20px;
		line-height: 24px;
		letter-spacing: -0.02em;
		color: #333 !important;
		padding-top: 12px;
	}

	h4 {
		font-family: Titillium Web;
		font-style: normal;
		font-weight: bold;
		font-size: 20px;
		line-height: 24px;
		letter-spacing: -0.02em;
		color: #333333 !important;
	}

	.savings {
		background: #0077BF !important;
		height: 40px;
		font-style: normal;
		font-weight: bold;
		font-size: 16px;
		line-height: 24px;
	}

	@media @tablet, @mobile {
		.pricelabel .price-popup input:checked+span{
			left:auto !important;
			right:-20px !important;
			z-index:99999 !important;
			&:after{
				right:10% !important;
			}
		}
	}
}



.excluded-costs {
	width: 100%;
	color: @color-text-subtle;
	clear: both;
	font-weight:300;
	font-size:12px;
	line-height:20px;

	.excluded {
		width: 100% !important;
		margin-bottom:10px;
	}

	ul {
		width: 100% !important;

		li {
			width: 100%;
			padding-bottom:6px;
			line-height:20px;
		}
	}

	.price-container{
		border:none !important;
		padding-top:0 !important;
	}
}

#ctl00_ContentPlaceContentBlock3_Receipt_pnlButtonSave {
	margin-top: 15px;
	float:left;
	clear:both;
	width:100%;
}

#receipt{
	ul#localTaxAndCosts{
		display:flex;
		flex-direction:column;
		li{
			display:flex;
			flex-direction:row;
			column-gap:8px;
			& > span:first-child{
				flex:1;
			}
		}
	}
}