@import "fmt_accoOverzicht.css"; /*Hierin staat alles wat te maken heeft met fmt_accoOverzicht*/

html, body { /*voorkomt problemen op mobiel. Let op: overflow-x:hidden geeft problemen met tabbladen!*/ 
		margin: 0;padding: 0;}
p{font-size:0.9rem;}
p, ul, li, table, tr, td{font-size:1rem;}
/* boekingsbalk */
#boekingsbalk {
    padding: 10px 15px;
    position:fixed; 
    bottom:0; 
    /*left:0;*/
    z-index:1010; 
    background-color:white; 
    border-top:solid 1px lightgrey; 
    display:flex; 
    align-items:center;
  }
  @media (max-width: 768px) {
  	#boekingsbalk, .ms_footer{
	    width: 100vw;
	  }
  }
  @media (min-width: 768px) {
  	#boekingsbalk, .ms_footer{
	    width: 750px;
	  }
  }
  @media (min-width: 992px) {
  	#boekingsbalk, .ms_footer{
	    width: 970px;
	  }
  }
  @media (min-width: 1200px) {
  	#boekingsbalk, .ms_footer{
	    width: 1170px;
	  }
  }

  #BBknopmobiel{
  	padding:0;
  }
  #BBknopdesktop{
	padding:0;
	font-size:;
  }
  #BBtekstdesktop{font-size:.9rem;}
  #BBknopdesktop a{font-size:.9rem;}
  #BBtekstmobiel span{line-height:1.2rem;}

/*prijspopup mobiel*/
#svprijspopupxs{font-weight:bold;}
/*menu*/
.offcanvas-title span{font-weight:bold;

}

ul.dropdown-menu li.active {
    background: var(--highlightkleur);
}

/* meerdere acco's aanwezig */
/*.zkbkAccInfoCol	{max-width:260px;}
.zkbkAccInfo.zkbkOverview	{overflow:hidden;}
.zkbkAccInfo.zkbkOverview:hover	{border:1px solid var(--groen);}
.zkbkAccInfo.zkbkPreview	{width:350px;height:500px;padding:5px;margin:2px;z-index:2;background:var(--achtergrondkleur)}

.zkbkAccFotoBlok		{width: 100%;aspect-ratio: 320 / 240;overflow: hidden;position: relative;}
.zkbkAccFoto			{width: 100%;height: 100%;object-fit: cover;display: block;}*/
/*.zkbkAccFoto.zkbkOverview	{width:215px;height:162px;border-radius:2px;}*/
/*.zkbkAccFoto.zkbkPreview	{width:320px;height:240px;}

.zkbkAccBalkBlok		{backXground:var(--achtergrondkleur);width:210px;}
.zkbkAccBalkTab			{width:100%;maXrgin-top:2px;border:2px solid var(--achtergrondkleur);}
.zkbkAccBalkPrijs		{backXground:var(--achtergrondkleur);font-size:smaller;}
.zkbkAccBalkPrijs > *	{font-weight: bold;}
.zkbkAccBalkLmFlag		{}
.zkbkAccBalkXfFlag		{width:34px;font-size:17px;padding:2px;}
.zkbkAccBalkXfImg		{}
.zkbkAccBalkVvFlag		{background:var(--achtergrondkleur);text-align:center;font-size:17px;}
.zkbkAccBalkRevScore	{white-space:nowrap;font-size:small;}
.revSter				{color:var(--highlightkleur);}*/
/*.zkbkAccBalkVvImg		{height:13px;}*/
/*.zkbkAccTextBlok		{width:auto;}
.zkbkAccTextNaam		{color: var(--tekstkleur);text-decoration: none;}
.zkbkAccTextNaam > *	{font-weight: bold;margin:0;}
.zkbkAccTextLocatie		{}
.zkbkAccGebied			{}
.zkbkAccTextAanbieding	{}
.zkbkAccTextLmText		{}

.zkbkAccAvailBlok		{width:100%;}
.zkbkAccAvailBlok.zkbkOverview	{display:none;}
.zkbkAccAvailBlok.zkbkPreview	{display:block;}*/






/* VOORPAGINA */
.facAlg p{margin-bottom:0;}
.streep{
  	display: block;
  	border-top: 1px solid #eee;
  	padding-bottom: .3rem;padding-top: .3rem;
  	font-size:.875rem;
	  margin-top:0.8rem;
	}

#vpmTitel{font-size:unset;}
#msTitelInfo{font-size:0.8rem;}
#msTitelInfo span{white-space: nowrap;}

.msTopMenu{position:relative;background: var(--achtergrondkleur);}
.knoppenScrollbar{overflow-x: auto;scrollbar-width:none;scroll-behavior: smooth;white-space: nowrap;padding:0;}

.scroll-button.hidden {
  opacity: 0;
  pointer-events: none;
}
.msTopMenu a, .msTopMenu button, #msBottomMenu a, #msBottomMenu button, .headerTalenknop a{font-size:small}

.msFotoPreview{cursor:pointer;}
.vpKop{font-size:1.1rem;font-weight:700;}

.homeFotoBlok {margin-top:10px;}
.homeFotoImg {cursor:pointer;}
.homeTekstBlok {margin-top:10px;}
/*.homeFotoLijst {position:absolute;top:200px;left:800px;}*/
.homeExpFotoContext{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:inherit;	/*black*/
	z-index:999;
}
.homeExpFotoDiv{
	display:none;
	position:absolute;
	background:inherit;	/*black*/
	border-radius:20px;
	border:1px solid lightgrey;
	box-shadow: 5px 5px 10px lightgrey;
	z-index:1000;
}
.homeExpFotoTop{
	height:40px;
	font-family:verdana;
	font-size:14pt;
	color:black;	/*white*/
	text-align:center;
	line-height:40px
}
.homeExpFotoLeft{
	float:left;
	width:40px;
	font-size:20pt;
	font-weight:bold;
	color:black;	/*white*/
	cursor:pointer;
	text-align:center;
}
.homeExpFoto {float:left;cursor:pointer;border-radius:6px;border:1px solid lightgrey;}
.homeExpFotoRight{
	float:left;
	width:40px;
	font-size:20pt;
	font-weight:bold;
	color:black;	/*white*/
	cursor:pointer;
	text-align:center;
}
.homeExpFotoBottom{
	clear:both;
	height:40px;
	font-family:verdana;
	font-size:18pt;
	color:black;	/*white*/
	cursor:pointer;
	text-align:center;
}
.homeContact {border-spacing:2px 2px;border-collapse:separate;width:100%;}
.homeContactInfo {background:inherit;width:100%;}
.homeContactPrompt {background:inherit;text-align:right;}
.homeContactWaarde {background:inherit;padding-left:5px;}

.facAlg {}
.facAlgInfo {width:100%;margin-top:10px;border-collapse:separate;border-spacing:2px;box-shadow:1px 1px 5px lightgrey;}
.facAlgInfo .titel {background:inherit;font-weight:bold;padding-left:5px;}
.facAlgInfo .infoItem {background:inherit;padding-left:5px;}
.facAlgInfo .infoItem .titel {font-weight:bold;}
.facAlg .infoItem .titel {font-weight:bold;}
.facAlgInfo .infoItem .data {padding-left:5px;}
.facAlgInfo .infoItem .dierTab {background:inherit;}
.facAlgInfo .infoItem .dierTab .subItem {white-space:nowrap;}
.facAlgInfo .infoItem .dierTab .subItem .titel {}
.facAlgInfo .infoItem .dierTab .subItem .data {}
.facAlgInfo .infoItem .dierTab .opmerking {padding-left:5px;}
.facAlgInfo .infoItem .linnenTab {background:inherit;}
.facAlgInfo .infoItem .linnenTab .subItem {white-space:nowrap;}
.facAlgInfo .infoItem .linnenTab .subItem .titel {}
.facAlgInfo .infoItem .linnenTab .subItem .data {}
.facAlgInfo .infoItem .linnenTab .opmerking {padding-left:5px;}
.facAlgInfo .infoItem .schoonTab {background:inherit;}
.facAlgInfo .infoItem .schoonTab .subItem {white-space:nowrap;}
.facAlgInfo .infoItem .schoonTab .subItem .titel {}
.facAlgInfo .infoItem .schoonTab .subItem .data {}
.facAlgInfo .infoItem .schoonTab .opmerking {padding-left:5px;}
.facAlgInfo .infoItem .locatieTab .data {border:2px solid white;}

.acc_symbol {border: solid 1px var(--frmkalGroen); background-color:var(--frmKalGroen);color:black;}
.acc_symbol_nee {border:1px solid #eee; border-radius:6px;opacity: .7;position:relative;display:inline-block;}
.acc_symbol_nee::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
  background: linear-gradient(
    to bottom right,
    transparent 48%,
    black 49%,
    black 51%,
    transparent 52%
  );
}
.acc_symbol_row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem;}
.acc_symbol_item{display: flex;flex-wrap: nowrap;align-items: center;gap:0.3rem;}
.acc_symbol_txt, .opmerking{font-size:.85rem;}
.acc_symbol_nee_txt{color:#999;}


.legenda {margin-top:10px;}
.legenda .titel {font-weight:bold;}
.legenda .legendaTab {padding-left:5px;}
.legenda .legendaTab .item {background:inherit;padding-left:5px;border:2px solid white;}
.legenda .legendaTab .data {background:inherit;padding-left:5px;border:2px solid white;}

.toelichtingBlok {border-radius:6px;}
.toelichting .titel {background:inherit;font-weight:bold;}
.toelichting .data {background:inherit;}
@media only screen and (max-width: 768px)
{
.homeFotoBlok {margin-top:10px;padding-left:0px;padding-right:0px;text-align:center;}
.homeFotoImg {border-radius:0px;box-shadow:none;}
.facAlg {padding-left:0px;padding-right:0px;margin-top:10px;}
.toelichtingBlok {padding-left:0px;padding-right:0px;border-radius:0px;}
}

/*SLIDESHOW*/
#fotoCard {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
max-width: 85vw;
width: 80vw;
height:80vh;
}
#fotoThumbnails{overflow-x:auto;white-space: nowrap;max-width:100%;width:fit-content;}
#fotoThumbnails .thumbnail {
  height: 60px;
  width: auto;
  max-width: 10vw;   /* schaalt mee met schermbreedte */
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

#fotoThumbnails .thumbnail.active {
  opacity: 1;
  border: 2px solid var(--tekstkleur);
}
#fotoSlides{width:70%; max-height:100%;}
/* Overlay */
#fotoOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: var(--achtergrondkleur);
	opacity: 0.6;
	z-index: 1040;
}

/* Close-knop */
#fotoCard .btn-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 99999;
}
/* Carousel pijltjes */
#fotoCard .carousel-control-prev-icon,
#fotoCard .carousel-control-next-icon {
	filter: invert(100%);
}
#fotoCard .carousel-control-prev,#fotoCard .carousel-control-next{position:unset !important;}
/*.carousel-item img.landscape {
  width: 100%;
  height: auto;
  max-height: 100%;
  height: auto;
  object-fit:contain;
  margin:auto;
}

.carousel-item img.portrait {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit:contain;
  margin:auto;
}*/
#msCarouselContainer{height:80%;position:relative;}
#msThumbnailContainer{}
.carousel-item{position: relative;text-align: center;height: 100%;}
.carousel-item img {max-width: 100%;max-height: 100%;width: auto;height: auto;object-fit: contain;margin: auto;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*contactblok*/
#vpContactInfo{
	font-size:0.9rem;
}
#vpContactTalen {
  max-width: 100%;
  text-align:center;
}

#vpContactTalen table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

#vpContactTalen th, #vpContactTalen td {
  padding: 5px;
  font-size: 0.85rem;
}

#vpContactTalen th {
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  font-size:0.75rem;
}

#vpContactTalen td {
  border-bottom: 1px solid #eee;
  font-size:0.75rem;
}

/*LASTMINUTE POPUP / VOORHEEN YELLOWNOTE*/
.lmtoast_data, .lmtoast_prijsknop{
	font-weight:bold;
}


.msOpmerking{font-size:.75rem;}
.msOptieKosten{font-size:.7rem;}
/* Beschikbaarheid & Lastminutes & Jaaroverzicht & beschikbaarheid */
.bezet		{background-color:red;color:white;text-align:center;vertical-align:middle;text-decoration:overline;padding:3px;border:1px solid white;}
.vrij		{background-color:green;color:white;text-align:center;vertical-align:middle;padding:3px;border:1px solid white;}
.wissel		{background-color:LightYellow;text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;border:1px solid lightgrey;}
.weekend	{background-color:limeGreen;text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;}
/*.weekend	{background-color:#33cc33;text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;}*/
/*.vakantie	{background-color:lightGreen;text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;}*/
/*.vakantie	{background-color:#E1F5A9;text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;}*/
.vakantie	{background-color:var(--highlightkleur);text-align:center;vertical-align:middle;font-size:smaller;padding:3px;border:1px solid white;}
.vrijTab {border-spacing:4px;}
.vrijPeriode {font-size:.8rem;}
.vrijHead	{background:#FFFFFF;padding:5px;font-weight:bold;text-decoration:underline;}
.vrijDatum	{float:left;padding:5px;width:39%;heiXght:30px;margin-top:3px;margin-right:3px;}
.vrijStatus	{float:left;padding:5px;width:16%;margin-top:3px;}
.vrijToelichting {}
.vrijText	{float:left;backXground:#FFFFFF;padding:5px;width:100%;margin-top:3px;margin-bottom:3px;}
#jaarXTab td {border:1px solid white;}
.jaarMaanden	{padding:2px;text-align:right;}
.jaarWeekdagen	{padding:2px;}
#jaarVakText {background:white;padding:10px;}
@media only screen and (max-width: 768px)
	{
	.vrijPeriode {padding-left:0px;padding-right:0px;}
	.vrijDatum	{float:left;padding:5px;width:50%;margin-top:3px;margin-right:0px;}
	.vrijStatus {display:none;}
	.vrijToelichting {width:100%;padding-left:0px;padding-right:0px;}
	}

.KortingTitel 
	{
	display: inline-block;
    background-color: var(--highlightkleur);
    font-weight: bold;
    font-size: 14px;
    padding: 5px 5px;      
    border-radius: 6px; 
    margin-bottom: 5px;
	}

.KortingTitel1 
	{font-weight: bold; font-size: 13px;}

.BeschikbaarheidTitel 
	{
	display: inline-block;
    background-color: var(--lichtgroen);
    font-weight: bold;
    font-size: 14px;
    padding: 5px 5px;      
    border-radius: 6px; 
    margin-bottom: 5px;
	}	

@media (max-width: 480px) 
	{
	.titel {text-align: center;}	
  	.prijsop1regel {white-space: nowrap;}
  	.vrijText {text-align: center;}	
  	.rowFree {background-color: var(--frmKalGroen) !important;}
	}	

/* Huurprijzen  */
/*zit in 1inc/prijsB5.css*/


/* op de kaart */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background-color: var(--achtergrondkleur);
}
.mapPopupContent{overflow-x:hidden;overflow-y:hidden;color: var(--tekstkleur);}
.mapPopupContent a{color:var(--groen);}
.mapPopupContent a:hover;{color:var(--tekstkleur)}
#afstandentabel{}
#afstandentabel h6{font-weight:bold;}
#afstandentabel table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
}

#afstandentabel td {
  padding: 0.2rem;
  vertical-align: middle;
  word-break: break-word; /* lange namen mogen afbreken */
}

#afstandentabel td:last-child {
  white-space: nowrap;  /* afstand altijd op één regel */
  text-align: right;
  width: 4.5rem; /* vaste breedte voor afstands-kolom */
}

  #map {
    width: 100%;
    height: 60vh; /* desktop/tablet */
    text-align: center;
  }

  @media (max-width: 768px) {
    #map {
      height: 60vh;
    }
  }
.mapSpace {max-width:900px;min-width:350px;}
@media only screen and (max-width: 768px)
	{
	.mapSpace {padding-left:0px;padding-right:0px;}
	}

/* reviews */
	.innerBlok {padding:5px; margin:5px 0;}
	.oneReview 
		{
    background-color: transparent !important;
    border: none !important;
    padding: 10px; 
		}

	@media only screen and (max-width: 768px)
		{
		.reviewBlok {padding-left:0px;padding-right:0px;border-radius:0px;}
		}
	ul.reviewpunten {padding-left:0px;list-style-position: inside;}
	/*ul.reviewpunten>li::before {content: "◦";margin-right:4px;font-weight:bold;}*/

	.revSchrijverInfo{padding:1rem 0;font-size:1rem;}
	.revSchrijverInfo img{width:1.2rem;height:1.2rem;border-radius:20px;margin-top:.2rem;}
	.revPeriode{font-size: .8rem;font-weight: bold;}
	.revTitel{font-size:1rem;}
	.revInhoud{min-width:20px;padding:.3rem;margin-bottom:.5rem;border-radius:6px;border:1px solid var(--lichtgroen);color:var(--tekstkleur);opacity:0.99;text-align:left;visibility:visible;background-color:var(--lichtgroen);}
	.reviewpunten li{font-size:.9rem;}
	.btn-outline-highlight 
		{    
    border: 1px solid var(--highlightkleur); 
    background-color: transparent;    
		}
	.btn-outline-highlight:hover 
		{
    background-color: var(--highlightkleur); 
		}
	.btn-outline-highlight.active 
		{
    background-color: var(--highlightkleur); 
    border-color: var(--highlightkleur); 
		}	
	button.btn.btn-warning.dynTxt11 
		{
	  background-color: var(--tekstkleur);
	  border-color: var(--tekstkleur);
	  color: var(--achtergrondkleur);
		}
/* vragen & reserveren */

	.svLight{
		color:#5b635b;
	}
	.svLabel{		
		font-size:1rem;
		font-weight:500;
	}
	.svLabelSmall{
		font-size:smaller;
	}
	.svRow{

	}
	.formblok{
		margin-bottom:2em;
	}
	.formblok .card-header{}
	.formblok .card-header h2{}
	.formblok .card-header h2 i{
		/*color:var(--groen);*/
		font-size:x-large;
		margin-right:1rem;
	}
	.bg-lichtgroen{
		background:#00990012;
		border-color:var(--groen);
	}
	#aanvraag_samenvatting.sticky{
	  position: fixed;
	  top: 24px;
	  right: /*0; /* pas dit aan afhankelijk van je layout */
	  width: */300px; /* zet de breedte vast zodat layout niet verspringt */
	}
	#samenvatting_foto img{border-radius:6px;width:100%;}
	#samenvatting_titel{}
	#samenvatting_beschrijving{font-size:smaller;}
	@media (max-width: 767.98px) {
	  #aanvraag_samenvatting {
	    position: static !important;
	    width: auto !important;
	    top: auto !important;
	  }
	}
	.pp_prijsregel_pijl{
		display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    width: 1.5em;
	    height: 1.5em;
	    /*border: 1px solid rgba(0, 0, 0, 0.15);*/
	    /*border-radius: 50%;*/
	    /*background-color: rgba(0, 0, 0, 0.05);*/
	    /*cursor: pointer;*/
	    transition: all 0.25s ease;
	    font-size: 1em;
	    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);*/
	    /*color: inherit;*/
	    margin-left:0.25em;
	}
	.pp_toelichting, .pp_opmerking{
		background-color: rgba(0, 0, 0, 0.05);
	    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	    border-radius: 5px;
	    margin: 0.25em 0;
        width: 100%;
	    border-collapse: separate;
	    border-spacing: 3px;
	}
	.pp_opmerking{
		border: 1px solid rgba(0, 0, 0, 0.15);
		padding:0.25em;
	}
	.pp_prijs{
		white-space: nowrap;
	}
	.form-header{
		/*background-color: white !important;*/
		border-bottom:none !important;
	}
	.groot-icoon{
		font-size: x-large;
		color:var(--tekstkleur);
	}

