﻿body.detail #content-bottom{
	background:@color-primary-light-75;
}

body.detail .filters-matrix .dropdown-container
{
    float:right;
}
body.detail .filters-matrix #travelparty-container .dropdown-container { float:none !important; }

//Acm balk styling
body.detail .acm-balk {
	background-color: @color-primary-light-75;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top:5px;
	position: relative; 
}

body.detail .acm-temp-balk {
	background-color: @color-primary-light-75;
	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: #004979;
}

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: #004979;
}

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 .image {
	height:206px;
	width:310px;
    position:relative;

    img {
		width: 100%;
		margin: 0 auto;
		display:block;
    }
	.photo {
		display:block;
		width:100%;
		height:100%;
		background-size:cover;
        background-position:left center;
		border-radius:8px;
	}
}

body.detail #content-center {
	.accommodation {
		padding-left:10px;
		.box-sizing();
	}

	 .package {
		position:relative;
		height:194px;
		margin-right:0;
	
		&.disclaimer{
			height:244px;
		}

		.offer {
			position:absolute;
			bottom:-60px;
			width:310px;
			z-index:1;

			@media @mobile, @tablet {
				bottom: -20px;
			}

			.excluded{
				color:@color-text-subtle;
				display:block;
				font-size:9px;
				line-height:14px;
				margin-top:10px;
			}
		}
	}

	 #no-prices-box{
		 .offer{
			 bottom:-15px;
		 }
	 }
}

    @media (max-width: 767px)
    {
        body.detail.no-prices #content-center {
            padding-bottom: 0;

            .package {
                height:150px;

                .offer {
                    bottom: auto;
                    top: 15px;
                    margin-bottom:0;
                }
            }
        }
    }

body.detail #content-center .package .offer.dashed-box {
    border:none;
}


body.detail #content-center .title {
    margin-right: 0;
    margin-bottom: 10px;
    width: 630px;

	h1
	{
		margin-top:0;
		margin-bottom:0;
		display:inline;
        margin-right:6px;
		@pv-detail-h1();
		color:@color-text-body;
		@header-large();
	}
	
	h2
	{
		float:left;
        width:100%;
        clear:both;
		@pv-detail-h2();
		color:@color-text-primary;
		@text-default();
	}
}

body.detail #content-center .facts {
	min-height:100px;

	li {
		padding-left:15px;
		position:relative;

		&::before {
			@pv-list-dot();
		}

		&.errorText{ background: none;}
	}
 }

body.detail #content-center .offer
{
	position:relative;

	 .content
	{
		padding:15px;
		margin-bottom:0;
		border:none;
		background: @color-white;;
		box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.07), 0px 0.893452px 17.869px rgba(0, 0, 0, 0.0417275), 0px 0.266004px 5.32008px rgba(0, 0, 0, 0.0282725);
		border-radius: 8px;
	
		&.no-trip {
			padding-top:89px;
		}

		dl {	

			dt{
				@header-small();
				margin-bottom:20px;
			}
			dd{
						width: 50%;
						float: left;
						@text-small();
						min-height: 50px;

						small {
							display: block;
							clear: both;
							margin-left: 30px;
							margin-top:0;
							font-size:100%;

							&.airport{
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
							}
						}

						i {
							display: inline-block;
							vertical-align: sub;
							margin-right: 10px;
							top: 4px;
							background:none;
							font-style:normal;
							width:20px;
							height:20px;
							font-size:20px;

							&:before{
								font-family:@pv-font-icons-name;
							}

							&.calendar:before{
								content:'\e937';
							}
							&.party:before{
								content:'\e929';
							}
							&.food:before{
								content:'\e925';
							}
							&.plane:before{
								content:'\e912';
							}
							&.car:before{
								content:'\e914';
							}
						}
					}
		}

		& > a{
			    float:none !important;
		}
	}

	.price
	{
		position:absolute;
		top:-20px;
		right:20px;
		@pv-pricetag();

		.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";
			}
		}
	}
}

body.detail #content-center .social-box
{
    @pv-detail-social-box-background();

	.content
	{
		padding:5px 10px;
	}
	li
	{
		line-height:16px;
		float:left;
	}
	
	div.dashed-box ul.form li
	{
		float:none;
		margin: 0 0 3px;
	}

	 .like
	 {
		height:20px;
	
		li
		{
			margin-right:10px;
		}
	}

	.share {
		height:16px;
	
		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 {
			margin-bottom:15px !important;
            display:inline-block;
			width:90%;
			@header-large();
		}

    #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;
			font-weight:bold;
			width:100%;
		}

		#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;
			
		}

		#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;

		&.active-box-information{
			border-top-left-radius:0;
		}
	}

	.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:@color-text-accent;
			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;
		}

		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:@color-cta;
			font-weight:bold;
		}

		body.detail .price-overview .col .image-box {
			float:left;
			width:100%;
			height:100px;
		}

    body.detail .price-overview ul.sale {
		margin-top:20px;

		li {
			margin-top:15px;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap; 
			column-gap:7px;

			& > .vink{
				margin-right:0;

				& + div.vink{
					width:~"calc(100% - 28px)";
				}
			}

			&.clickable > div:nth-child(2){
				&:hover {
					cursor:pointer;
				}
			}

			.expendable{
				float:left;
				clear:both;
				width:100%;
				.box-sizing();
				padding:5px 8px 5px 28px;
				margin:0;
				display:none;
				line-height:22px;
				font-weight:@pv-font-weight-regular;
			}
			.spacer{position:absolute;}
		}
	}


	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: @color-cta;
        }
    }
}*/


@media (max-width: 767px) 
{
	#content-bottom .content .description .block table tr td
	{
		display:block;
		width:100% !important;
	}
}


.large-icons {
	a {
		width: 64px;
		height: 32px;
		border-radius: 50%;
		background: @color-primary-light-75;
		position: relative;
		text-align: center;
		float: left;
		margin-right: 13px;
		padding: 16px 0;
		border: 2px solid @color-primary-light-75;

		&:hover {
			border: 2px solid @color-primary;
		}
	}
}

body.detail .prices .h5{
	@header-small();
}

body.detail div#ui-datepicker-div[inputId=ctl00_ContentPlaceContentBlock3_BaseMatrixControl_txtDate] {
	width: 289px;
}

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;
		}
	}
}