﻿body.detail .filters-matrix .dropdown-container
{
    float:right;
}
body.detail .filters-matrix #travelparty-container .dropdown-container { float:none !important; }

body.detail #content{
	background:@pv-color-grey-light !important;
}

//Acm balk styling
body.detail .acm-balk {
	background-color: #F9F9F9;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
	position: relative;

	p {
		width: 90%;
	}
}

body.detail .acm-temp-balk {
	background-color: #F9F9F9;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top:5px; 
	position: relative;
}

body.detail .btnCloseACMBalk {
	background-color: transparent;
	border: none;
	margin-left: 10%;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	font-weight: 10;
	padding: 0;
	color: #333;
	position: absolute;
	right: 5px;
	top: 5px;
}

body.detail .modal {
	display: none;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(5px);
}

@media (max-width: 767px) {
	body.detail .modal {
		width:100vw;
		background-color: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(5px);
		padding-top: 20px;
	}
}

body.detail .modal-content {
	box-sizing: border-box;
	background-color: #fefefe;
	margin: 5% auto;
	width:600px;
	border-radius: 15px;
	padding: 0;
}


/* Media query for screen sizes less than 767px */
@media (max-width: 767px) {
	body.detail .modal-content {
		width: 100%;
		margin: 0;
		border-radius: 15px;
	}
}

body.detail .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #e0e0e0;
}

body.detail .modal-header h1 {
	color: black;
	font-weight: bold;
	align-items: center;
	color: black;
	font-weight: 900;
}

body.detail .close-icon {
	font-size: 24px;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #004979;
}

body.detail .close {
	color: #aaa;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

body.detail .close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

body.detail .modal-body {
	margin: 15px 0;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

body.detail .modal-body h1 {
	color: black;
	font-weight: bold;
	align-items: center;
	color: #0077BF;
}

body.detail .modal-body p {
	margin-left: 36px;
}

body.detail .title-with-icon {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.detail .title-with-icon svg {
	flex-shrink: 0;
}

body.detail .title-with-icon span {
}

body.detail .modal-footer {
	display: flex;
	justify-content: flex-end;
	padding: 20px;
	border-top: 1px solid #e0e0e0;
}

body.detail .modal-footer button {
	background-color: #4CAF50;
	border: none;
	width: 210px;
	height: 40px;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 10px;
}

body.detail #content-center {
	background: @pv-color-grey-light;

	& > .container:first-child .row {
		display: flex;
		width: 100%;
		flex-direction: row;
		position: relative;
		padding-top: 100px;

		.accommodation {


			.title {
				width: 60%;
				flex-basis: 100%;
				margin-bottom: 0;
				position: absolute;
				top: 0;
				left: 0;

				@media @tablet {
					width: 100%;
				}

				
					display: flex;
					flex-direction: column;

					ul.list-classification {
						order: 1;
					}

					h1 {
						order: 2;
					}

					h2 {
						order: 3;
					}
				

				h1 {
					/*max-width: ~"calc(100% - 85px)";*/
					overflow: hidden;
					text-overflow: ellipsis;
					height: auto;
					white-space: normal;
					display: inline-block;
					vertical-align: middle;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					line-height:30px;

					@media @mobile {
						width: 100% !important;
						margin-top: 0;
						max-width: 100%;
						max-height: 56px;
					}
				}
			}

			.details {
				margin-top: 15px;
			}
		}

		.image {
		}

		.package {
			position: absolute;
			top: -10px;
			right: 0;
			z-index: 1;

			&.disclaimer{
				@media @mobile {
					padding-bottom:40px;
					width:~"calc(100% - 12px)";
				}
				@media @tablet{
					padding-bottom:30px;
				}
			}
		}
	}

	.image {
		height: 206px;
		width: 310px;
		position: relative;
		filter: hue-rotate(185deg);

		img {
			width: 100%;
			margin: 0 auto;
			display: block;
		}

		span.photo {
			display: block;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: left center;
			filter: hue-rotate(185deg);
		}

		.photo-count {
			position: absolute;
			bottom: 10px;
			left: 10px;
			background: #333;
			opacity: 0.8;
			color: #fff;
			padding: 2px 4px;
			border-radius: 2px;
			display: block !important;
			font-size: 12px;
			font-weight: bold;

			& > i {
				width: 16px;
				height: 16px;
				color: #fff;
				display: inline-block;
				filter: invert(100%);
				vertical-align: sub;
			}
		}
	}

	.accommodation {
		padding-left: 10px;
		.box-sizing();
	}

	.package {
		background: #fff;
		padding: 74px 16px 16px 16px;
		height: ~"calc(100% - 20px)";
		margin-right: 0;
		filter: drop-shadow( 0px 4px 80px rgba(0, 0, 0, 0.07)) drop-shadow(0px 0.893452px 17.869px rgba(0, 0, 0, 0.0417275)) drop-shadow(0px 0.266004px 5.32008px rgba(0, 0, 0, 0.0282725));
		-webkit-filter: drop-shadow( 0px 4px 80px rgba(0, 0, 0, 0.07)) drop-shadow(0px 0.893452px 17.869px rgba(0, 0, 0, 0.0417275)) drop-shadow(0px 0.266004px 5.32008px rgba(0, 0, 0, 0.0282725));

		.offer {
			width: 100%;
			border-top: 1px solid #EFEFEF;

			&.dashed-box {
				border: none;
			}

			.content {
				margin-bottom: 0;
				@pv-dashed-box();
				background: none;
				border: none;
				border-top: 1px solid @pv-color-grey-light;
				padding: 15px 0 0 0;

				&.no-trip {
					padding-top: 89px;
				}

				dl {
					margin-bottom: 10px;

					dt {
						color: @pv-color-grey;
						font-size: 12px;
						line-height: 16px;
						text-transform: uppercase;
						font-weight: bold;
						margin-bottom: 10px;
						letter-spacing: 0.2em;
					}

					dd {
						width: 50%;
						float: left;
						color: #333;
						font-size: 12px;
						line-height: 12px;
						font-weight: bold;
						min-height: 50px;

						small {
							display: block;
							clear: both;
							font-size: 12px;
							margin-left: 30px;
							margin-top: 5px;

							&:not(.airport){
								color: @pv-color-grey;
							}

							&.airport{
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
							}
						}

						i {
							filter: invert(44%) sepia(0%) saturate(27%) hue-rotate(141deg) brightness(97%) contrast(80%);
							width: 20px;
							height: 20px;
							display: inline-block;
							vertical-align: sub;
							margin-right: 10px;
							top: 4px;
						}
					}
				}

				a.btn-rood {
					width: 100%;
					box-sizing: border-box;
					height: 36px;
				}
			}

			.price {
				small {
					position: static;
				}

				.pricelabel {
					@pv-detail-offer-pricelabel();
					font-size: 32px;
					line-height: 48px;
					font-weight: bold;
					text-align: right;

					span.value {
						position: static;
					}
				}

				.price-popup{
					input:checked+span{
						top:-40px !important;
						left:auto !important;
						right:30px !important;
					}

					span:after{
						border:none !important;
						border-top: solid 10px transparent !important;
						border-right: solid 0px transparent !important;
						border-bottom: solid 10px transparent !important;
						border-left: solid 10px white !important;
						right:0 !important;
						top:~"calc(50% - 50px) !important";
					}
				}
			}

			.excluded{
				color:@color-text-subtle;
				display:block;
				font-size:9px;
				line-height:14px;
				margin-top:50px;
			}

		}
	}

	.title {
		margin-right: 0;
		margin-bottom: 10px;
		width: 630px;

		h1 {
			font-size: 25px;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 0;
			display: inline;
			margin-right: 6px;
			@pv-detail-h1();
		}

		h2 {
			font-size: 13px;
			float: left;
			width: 100%;
			clear: both;
			@pv-detail-h2();
		}
	}
}



    @media (max-width: 767px)
    {
        body.detail.no-prices #content-center {
            padding-bottom: 0;

            .package {
                height:150px;

                .offer {
                    bottom: auto;
                    top: 15px;
                    margin-bottom:0;
                }
            }
        }
    }

	@media @tablet{
        body.detail.no-prices #content-center {
            padding-bottom: 0;

            .package {
                height:150px;

                .offer {
                    bottom: auto;
                    top: 15px;
                    margin-bottom:0;
                }
            }
        }
	}


body.detail #content-center .facts {
	min-height: 100px;

	li {
		position: relative;
		padding: 0 0 10px 25px;
		background-size: 19px;
		background-position-y: 2px;
		background-image: url(img/base/ico/2021/General/Success-Green.svg);
		background-repeat: no-repeat;

		&.errorText {
			background: none;
		}
	}
}


body.detail #content-center .social-box
{
    @pv-detail-social-box-background();
}
	body.detail #content-center .social-box .content
	{
		padding:5px 10px;
	}
	body.detail #content-center .social-box li
	{
		line-height:16px;
		float:left;
	}
	
	body.detail #content-center .social-box div.dashed-box ul.form li
	{
		float:none;
		margin: 0 0 3px;
	}

	body.detail #content-center .social-box .like
	 {
		height:20px;
	}
	body.detail #content-center .social-box .like li
	{
		margin-right:10px;
	}

	body.detail #content-center .social-box .share {
		height:16px;
	}
		body.detail #content-center .social-box .share li {
			line-height:normal;
		}



        	#content-bottom .content-box .content .description {
		line-height: 16px;
	}

	#content-bottom .content-box .content .description p, 
    .book .content-box .content .description p, 
    .complete .content-box .content .description p, 
    .popUpBox .content-box .content #TranslatedText p, 
    .popUpBox .content-box .content #PricePopupTranslatedText p
	{
		float:left;margin:0 0 10px 0;width:100%;
	}


    /*#travelparty-container .content-box .content h3,*/
.popupContainer .content-box .content h3.title,
.popupBox .content-box .content #TranslatedText .title,
.popupBox .content-box .content #PricePopupTranslatedText .title,
#content-bottom .content-box .content .title,
body.dossier .content .description h3,
.book .content-box .content .title,
.complete .content-box .content .title {
	font-family: Titillium Web;
	font-style: normal;
	font-weight: bold;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: #333333 !important;
	margin-bottom: 15px !important;
	margin-top: 10px;
	display: inline-block;
	width: 90%;
}

#content-bottom {
	padding-top:50px;
}

    #content-bottom .content-box .content .description p:empty {display:none;}

		#content-bottom .content-box .content .description h3, #content-bottom .content-box .content .description h4, .book .content-box .content .description h3, .book .content-box .content .description h4, .complete .content-box .content .description h3, .complete .content-box .content .description h4, .popUpBox .content-box .content #TranslatedText h4,
        .popUpBox .content-box .content #PricePopupTranslatedText h4,
		body.dossier .content-box .content .description h3, body.dossier .content-box .content .description h4
		{
			float:left;
			clear:both;
			width:100%;
			font-family: Titillium Web;
			font-style: normal;
			font-weight: bold;
			font-size: 20px;
			line-height: 24px;
			letter-spacing: -0.02em;
			color: #333333;
		}

		#content-bottom .content-box .content .description h3:not(.title), .book .content-box .content .description h3:not(.title), .complete .content-box .content .description h3:not(.title), .popUpBox .content-box .content #TranslatedText h3:not(.title),
        .popUpBox .content-box .content #PricePopupTranslatedText h3:not(.title),
		body.dossier .content-box .content .description h3:not(.title)
		{
		 font-size:20px;
		 
		}

		#content-bottom .content-box .content .description h4, .book .content-box .content .description h4, .complete .content-box .content .description h4, .popUpBox .content-box .content #TranslatedText h4,
         .popUpBox .content-box .content #PricePopupTranslatedText h4,
		body.dossier .content-box .content .description h4
		{
			font-size:18px;
			line-height:18px;
			margin-bottom:10px;
            color:@pv-detail-h4-color;
			font-family:@pv-font-twc-bold;
		}

		#content-bottom .content-box .content .btn-rood.wide,.book .content-box .content .btn-rood.wide, .book .content-box .content .btn-rood.bold, .complete .content-box .content .btn-rood.wide, .complete .content-box .content .btn-rood.bold,
		body.dossier .content-box .content .btn-rood.wide, body.dossier .content-box .content .btn-rood.bold
		{
            margin-top:30px;
		}



	#content-bottom .sidebar > div.box, .book .sidebar > div.box {
		width:310px;
		float:left;
	}
    
	#content-bottom .content-box {
        padding-top:12px !important;
	}

	.book .sidebar .box.offers .box-content,
	.book .sidebar .box.about-us .box-content 
	{
		height:243px;
	}

	#content-bottom .sidebar > div:not(.spacer), .book .sidebar > div:not(.spacer)
	{
		margin-bottom:10px;
	}

	#content-bottom .offers
	{
	}
	#content-bottom .offers li
	{
		width:100%;
		float:left;
		line-height:22px;
		margin-bottom: 5px;
	}

		#content-bottom .offers li .price
		{
			margin-left:5px;
			margin-top:-1px;
			font-weight:bold;
            color:@pv-color-red;
			font-style:italic;
		}


        body.detail .priceBlock {
	}

	body.detail .price-overview {
		.box-sizing();
		width:100%;
		float:left;
		padding:0;
		position:relative;

		border-bottom:0;
		border-right:0;

        @pv-detail-priceoverview();
	}
		body.detail .price-overview .col {
			.box-sizing();
			width:50%;
			float:left;
			position:relative;
			left:50%;
			padding:20px;

			.headPriceDif{
				color:@dr-color-blue !important;
			}
		}

		body.detail .price-overview #container2 {
			clear: left;
			float: left;
			width: 100%;
			overflow: hidden;
			position:relative;
			z-index:100;
			@pv-detail-priceoverview-container2();
		}
		body.detail .price-overview #container1 {
			float: left;
			width: 100%;
			position: relative;
			right: 50%;
			@pv-detail-priceoverview-container1();
		}

		body.detail .priceInfo > .h5{ 
			margin:0 13px;

			@media @mobile {
				margin:0!important; 
			}
		}

		body.detail .priceInfo > .h5,
		body.detail .priceInfo > .row {
			width: ~"calc(100% - 26px)";
		}

		body.detail .price-overview ul.priceDif li:not(.totalOur)
		{
			line-height: 16px;
            margin-bottom:15px;
			float:left;
            clear:both;
            width:100%;
            @pv-detail-priceoverview-li();
		}

		body.detail .price-overview ul.priceDif li.discount,
		body.detail .price-overview ul.priceDif li .green
		{
			color:@pv-color-green;
			font-weight:bold;
		}

		body.detail .price-overview .col .image-box {
			float:left;
			width:100%;
			height:100px;
		}

		body.detail .price-overview ul.sale li.clickable > div:nth-child(2):hover {
			cursor:pointer;
			text-decoration:underline;
		}

	body.detail .price-overview ul.sale li .expendable {
		float:left;
        clear:both;
        width:~"calc(100% - 20px)";
		.box-sizing();
		padding:5px 8px;
        margin:5px 0 5px 20px;
        display:none;
        line-height:22px;
        font-weight:@pv-font-weight-regular;
	}

    body.detail .price-overview ul.sale li {
        margin-top:15px;
    }

    body.detail .price-overview ul.sale {
        margin-top:20px;
    }


	body.detail .price-overview .total.discount {
        display:none !important;
		/*position:absolute;
		bottom:0;
		left:50%;
		width:~"calc(50% + 1px)";
		margin:0 !important;
		.box-sizing();
	    height: 40px;
		line-height: 30px;
		font-size: 16px;
		padding:5px 20px;
		z-index:101;*/
	}

	#content-bottom .content .description .block table tr td ul,
	#content-bottom .content .description .block table tr td ul li
	{
		margin:0;
	}

	#content-bottom .content .description .block table tr td ul li
	{
		margin-left:20px;
	}


/* Jelte: I'll leave it here in case we need this later on.*/
/*#toTrips .uniqueTrip div.show {
    cursor: auto;

    & > div[id$="_key"]{
        transition: color 0.27s ease;
        font-weight: 600;

        &:hover{
            cursor: pointer;
            color: @pv-color-green;
        }
    }
}*/


@media (max-width: 767px) 
{
	#content-bottom .content .description .block table tr td
	{
		display:block;
		width:100% !important;
	}
}


/* TEMP FIX VOOR DE RYANAIR GROTE BAGAGE TEKST */
body.detail .price-overview ul.sale li span.vink.med.green { display: inline-block; float: left; }
body.detail .price-overview ul.sale li span.vink.med.green + div.vink.med { width: ~"calc(100% - 25px)"; }

.large-icons {
	a {
		width: 64px;
		height: 32px;
		border-radius: 50%;
		background: @pv-color-light-blue;
		position: relative;
		text-align: center;
		float: left;
		margin-right: 13px;
		padding: 16px 0;
		border: 2px solid @pv-color-light-blue;

		&:hover {
			border: 2px solid @pv-color-blue;
		}
	}
}

body.detail .prices .h5{
	font-weight:700;
	font-size:16px;
	line-height:24px;
}

body.detail div#ui-datepicker-div[inputId=ctl00_ContentPlaceContentBlock3_BaseMatrixControl_txtDate] {
	width: 272px;
}


body.detail #content-center .offer .content .p.result-page-result-priceinfo {
	font-size: 10px;
	line-height:12px;
	margin-top:5px;
}

#ctl00_ContentPlaceContentBlock3_Receipt_cntTextPopUpBox_updPopUp {
	.popUpBox .content-box {
		height:auto;
		min-height:100%;

		.content .popupContent {
			overflow-y: hidden;
			max-height: fit-content;
		}
	}
}