/*MATRIX*/
.box-matrix
{
	padding-top:15px;

	.stepsummary 
    {
		float:left;
		clear:both;
		margin:10px 0;
	}

    .prices
    {
	    span.wait-sub-title
	    {
		    font-weight: bold;
		    font-size:16px;
		    margin:13px;
            display:inline-block;
			@header-small();
			color:@color-text-body;
	    }

	    p.text 
        {
		    padding:0 13px;
	    }

        .prefdate
        {
	        .filters-matrix
	        {
		        width:626px;
                background:@pv-matrix-filters-background; 
	        }

	        .pref
	        {		
		        display:block;
		        position:relative;

	            .filters
	            {		
		            overflow:visible;
		            width:289px;
		            padding:0px 0px 13px 17px;
					box-sizing:border-box;
		            display:block;
		            float:left;
		            height:auto;
					position:relative;
					border-bottom-left-radius:4px;

					& > span{
						position:absolute;
						top:10px;
						left:62px;
						color:@color-dark-light-25;
						@text-small();
					}

	                .travgroup
	                {
		                width:250px;
		                height:auto;
		                z-index:1;
		                margin-bottom:6px;
		                margin-top:4px;
						position:relative;
						@pv-matrix-travelparty();

						&:hover{
							border-color:@color-primary;
							&::after{
								color:@color-primary;
							}
						}

						&::before{
							position:absolute;
							top:15px;
							left:10px;
							font-family:@pv-font-icons-name;
							content:'\e929';
							color:@color-primary-dark-50;
							font-size:24px;
						}

								&::after {
							position: absolute;
							right: 10px;
							top: 15px;
							font-size:24px;
							font-family:@pv-font-icons-name;
							color:@color-primary-light-50;
							content:'\e932';
							z-index:2;
							pointer-events:none;
						}

		                a:not(.delete):not(.add):not(.fluid-close)
                        {
							/*padding: 20px 16px 12px 45px;*/
			                position:absolute;
							left:-45px;
							top:-20px;
			                width:~"calc(100% + 61px)";
							height:~"calc(100% + 32px)";
							font-size:0;
		                }

		                .travlrs
		                {
			                display:block;
			                width:100%;
							li{
								@text-small();
								color:@color-text-subtle;
							}
		                }

		                ul
		                {
			                width:100%;
			                float:left;
		                }

						& + div{
							width:100%;
						}
	                }

		            fieldset
		            {
			            width:100%;

		                .row
		                {
			                height:48px;
			                margin-bottom:8px;
			                position:relative;

							border:1px solid @color-primary-light-50;
							border-radius:4px;
							box-sizing:border-box;
							width:100%;
							padding:22px 2px 2px 45px;
							pointer-events:none;

							&:hover{
								border-color:@color-primary;
								&::after{
									color:@color-primary;
								}
							}
			              
		&::before {
			position: absolute;
			top: 15px;
			left: 10px;
			font-size:24px;
			font-family:@pv-font-icons-name;
			content:'\e913';
			z-index:2;
			pointer-events:none;
		}

		&::after {
			position: absolute;
			right: 10px;
			top: 15px;
			font-size:24px;
			font-family:@pv-font-icons-name;
			color:@color-primary-light-50;
			content:'\e932';
			z-index:2;
			pointer-events:none;
		}

							&.departure::before{
								content:'\e937';
							}
							&.duration::before{
								content:'\e939';
							}
							&.transport::before{
								content:'\e912';
							}
							&.airport::before{
								content:'\e90f';
							}
							&.airport.arrival::before{
								content:'\e90e';
							}
							&.board::before{
								content:'\e925';
							}
							&.roomTypeFilter:before{
								content:'\e913';
							}
							&.supplier:before{
								content:'\e92d';
							}
			                select, 
                            .textBox,
							.fakeselect
			                {
				             
			border:none;
			background:none;
			position:absolute;
			top:0;
			left:0;
			padding: 18px 0 0 45px;
			width:100%;
			height:100%;
			pointer-events:all;
		}

							.fakeselect{
								padding: 22px 0 0 45px !important;
								position:absolute !important;
								width:100% !important;
								height:100% !important;
								margin-right:0 !important;
								box-sizing:border-box;
							}
.dd_chk_drop{
	z-index:4;
	top:56px !important;
}

							 select {
         
								 font-size: 14px;
								 background:none;
								 
							 }

			                & > label 
                            {
								position:absolute;
								top:5px;
								left:45px;
								@text-small();
								color:@color-dark-light-25;
								z-index: 3;
			                }

							.dropdown-container{
								width:100%;
							}
							.fakeselect{
								border:none !important;
								background: white !important;
								/*
								width:100% !important;
								box-sizing:border-box;
								margin:0;
								padding-left:0 !important;
									*/
								div#caption{
									margin-left:0;
									padding-left:0;
								}

							}

			                .textBox
			                {
								@pv-matrix-textbox();
			                }

			                .posAbs
			                {
				                position:absolute;
			                }
                        @pv-matrix-fieldset();
		                }
		            }

	                .legenda
	                {
		                height:auto;
		                position:relative;
		                z-index:0;
						@pv-matrix-legenda();

												ul{
							display:flex;
							justify-content:space-between;

							@media @mobile{
								flex-direction:column;
							}
						}

		                li
		                {
			                height:18px;
			                padding-bottom:6px;
							@pv-matrix-legenda-li();

							
		                    div
		                    {
			                    width:41px;
			                    height:18px;
			                    margin-right:15px;

			                    span
			                    {
				                    display:block;
				                    float:left;
				                    width:100%;
				                    height:15px;
				                    text-align:center;
				                    padding-top:1px;
			                    }
		                    }
		                }
	                }
	            }
	        }

	        .date
	        {
		        margin:-48px 0px 0 0;
		        display:block;
		        padding:10px 0px 0px 13px;
		        position:relative;
		        width:306px;
		        .box-sizing();
		        min-height:290px;
				@pv-matrix-prices-container();

	
		        .arrow-matrix
		        {
			        position:absolute;
			        left:-2px;
			        top:195px;
			        width:16px;
			        height:30px;
                    background:url(img/base/elements/pc/arrow-matrix.png) no-repeat left top;
		        }
            }

        }
    }

	.wait-box
	{
		top: 200px;
	}
}

.matrix-head
{
	display:block;
	width:281px;
    @pv-matrix-head();
		display:flex;
	flex-wrap:wrap;
	justify-content:space-between;

	div
	{
		width:25%;
		display:block;
		text-align:center;

		&.spacer{display:none;}

		&.shorter{
			order:2;
			margin-left:25%;

		}
		&.longer{ 
			order:3;

		}

		&.txt {
			flex-basis:100%;
			padding-left:25%;
			order:1;
		}
	}

	div.shorter a, div.longer a{
		@header-xsmall();
		text-decoration:none;
	}

    div.shorter a {
        @pv-matrix-shorter();
    }

    div.txt {
        @header-small();
		color:@color-text-body;
    }

    div.longer a {
        @pv-matrix-longer();
    }
}

.noMatrixOverlay 
{
    position: absolute;
    left: 85px;
    text-align: center;
    max-width: 186px;
    top: 160px;
    padding: 10px;
    
	@pv-nomatrixoverlay();
}

#matrix
{
	border-collapse:collapse;
	border:none;
	border-spacing:0;
	width:100%;

	thead th
	{
		text-align:center;
		height:22px;

		&:first-child
		{
			font-weight:normal;
		}
    }

    td
    {
	    min-width:41px;
	    height:18px;
	    text-align:center;
	    padding:0;
	    .box-sizing();
		@pv-matrix-cell();

	    a
	    {
		    text-decoration:none;
		    min-width:40px;
		    height:16px;
		    display:block;
		    padding-top:3px;
		    text-align:center;
			@pv-matrix-cell-link();
	    }

	    &.chea:hover 
        {
		    font-weight:bold;
	    }
    }

    td:first-child, 
    th:first-child
    {
	    width:65px;
	    text-align:right;
	    padding-right:6px;
        
		@pv-matrix-first-column();
    }

	th:first-child a,
	tfoot td:first-child a{
		@header-xsmall();
		text-decoration:none;
	}

    th:first-child a {
        @pv-matrix-earlier();
    }
    tfoot td:first-child a {
        @pv-matrix-later();
    }
}


    /*gewone prijzen, blauw*/
	#matrix td a.avai, 
    .legenda li div.avai, 
    #matrix td a.deeplink
	{
		@pv-matrix-cell-default();
	}
    #matrix td a.avai:hover,
    #trips td.avail span.status:hover,
    #matrix td a.deeplink:hover
    {
		@pv-matrix-cell-default-hover();
		
	}
    #matrix td a.avai, 
    .legenda li div.avai span, 
    #matrix td a._avai, 
    #matrix td a.deeplink
	{
		@pv-matrix-cell-default-link();
	}
		
	#matrix td a.sele, 
    .legenda li div.sele
	{
		position:relative;
	}

	#matrix td a.sele, 
	.legenda li div.sele span
	{
		font-weight:bold;
		overflow:visible;
		@pv-matrix-cell-selected();

	}
		#matrix td a.sele {
			@pv-matrix-cell-selected-link();

		}

    #matrix td a.budget-hightlight 
    {
		@pv-matrix-cell-budget-highlight();
	}

    /*goedkoopste prijs, geel*/
	#matrix td a.chea, 
    .legenda li div.chea
	{
		@pv-matrix-cell-cheapest();
	}

	#matrix td.chea:hover 
    {
		@pv-matrix-cell-cheapest-hover();
	}
	#matrix td a.chea, 
    .legenda li div.chea span
	{
		@pv-matrix-cell-cheapest-link();
	}

	#matrix tfoot
	{
		padding:0;
		margin:0;

        td
        {
	        height:30px;
	        padding:0;
	        border-bottom:none;
			@pv-matrix-footer-cell();
            

	        &.footnote 
            {
		        padding-top:5px;
				font-size:12px;
				color:@color-text-subtle;
	        }

	        &:first-child
	        {
		        vertical-align: top;
	        }

        }
    }


	#matrix tfoot td a, 
    #matrix thead th a
	{
		text-decoration:underline;
		text-align:right;
		width:100%;
		background:none !important;
		
		&.aspNetDisabled
		{
			text-decoration:none;
		}
    }

    .cheapest-duration:not(.sele) 
    {
		@pv-matrix-cheapest-duration();
        
		&:hover 
        {
			@pv-matrix-cheapest-duration-hover();
		}
    }

	.chea
    {
		@pv-matrix-cheapest-cell();
        
    }
	.legenda li div.chea span
    {
		@pv-matrix-cheapest-cell-span();
    }

@import "./styles_matrix_trips.less";


.detail .content-box .priceInfo .col4
{
	.box-sizing();
	margin-right:8px;
	width:296px;
	position:relative;

	.dashed-box
	{
		padding:10px;
	}

	&:last-child
	{
		margin-right: 0px;

		.dashed-box
		{
			padding-top:40px;
		}
	}
}





.detail .sidebar,
.book .sidebar {
	position: sticky;
	right: 0;
	top: 10px;
	margin-top: 30px;
	margin-right: 0px;
}

.sticker-blue
{
	width:110px;
	height:68px;
	position:absolute;
	top:-30px;
	left:10px;
}

.headPriceDif
{
	font-size:16px;
	margin:0 0 12px 0;
	font-weight:bold;
	display:block;	
}

.priceDif 
{
	float:left;
    width:100%;
    margin-top:8px;
    margin-bottom:30px;

    li
    {
        p 
        {
	        float:left;
	        display:block;
	        width:160px;
        }

        span
        {
	        float:right;
	        display:block;
	        /*width:99px;*/
	        text-align:right;

	        span 
            {
		        float:none;
                display:inline;
                width:auto;
                text-align:left;
	        }
        }

        &.totalOther span span.currency 
        {
	        font-family:@pv-font-default;
	        font-size:15px;
        }
    }
}

.breakdown-right-col-empty-container 
{
    float:left;
    width:100%;
}



.priceDif li.totalOther,
.priceDif li.totalOur, 
.row.total.discount
{
	font-weight:bold;
	@pv-matrix-pricedif-totalour();
}

	.priceDif li.totalOther > span
	{
		@pv-matrix-pricedif-totalother-span();
	}

	.priceDif li.totalOur > span
	{
		@pv-matrix-pricedif-totalour-span();
	}


	.priceDif li.totalOur,
	.priceDif li.totalOther{
		float:left;
		clear:both;
		width:100%;
		border-top:1px solid @color-primary-light-50;
		padding-top:10px;
		margin-top:15px;

		small{
			font-size:100%;
		}

		&.large{
			font-size:16px;
		}
	}

	.priceDif li.totalOur{
		
	}

	.priceDif li.totalLocal{
		margin-top:8px;
	}

	.priceDif li.totalUs{
		font-size:16px;
		font-weight:bold;
	}

	.priceDif li.additional{
		display:flex;
		flex-direction:row;
		column-gap:8px;
		margin-bottom:0;

		& > span:first-child{
			flex:1;
			text-align:left;
		}
	}

	.row.total.discount
	{
		margin: 10px -11px -11px -11px !important;
		padding: 11px;
        background-color:#88ccf9;

		span.currency 
        {

		}
    }

.detail .content-box .priceInfo .col4 .dashed-box
{
    .row
    {
	    margin:0px;

        .spacer
        {
            height:0px;
            margin:10px 0;
	        width: 100%;
	        display: block;
	        float: left;
            border-bottom: 1px dashed #88ccf9;
            .border-image("../img/Base/elements/pc/dashed-lines.png"; 0 0 1 0 repeat);
        }
    }

    li
    {
	    width:100%;
	    display:block;
	    float:left;
	    margin-left:0;
    }
}



.supersaleimg
{
	display:inline-block;
	float:none;
	width:209px;
	height:19px;
	vertical-align:top;
	background-size:contain !important;
	/*margin-left:4px;*/
	position:relative;

	.dashed-box.formErrorBox
	{
		padding-top:10px !important;
	}
}




/* TIJDELIJK: De kop Exclusief in prijsopbouw uitzetten!! */
.price-overview span.excluded { display:none !important; }


span.vink
{
	@pv-vink();
}

@import "./styles_matrix_room.less";
@import "./styles_matrix_transport.less";

/*MATRIX*/