html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

#pgOms p{margin-bottom:0;display:inline;}
#zkbkContainer {
    flex: 1 0 auto; /* neemt alle beschikbare ruimte */
}

.footerWrapper {
    flex-shrink: 0; /* voorkomt dat footer omhoog gedrukt wordt */
}


#zkbkBody			{margin-top:0;margin-left:3;background:#BFFFBF;}
#zkbkHeader			{}
.zkbkVlag			{width:30px;margin-top:3px}
.zkbkBalloon		{width:200px;}
.zkbkTabSpace		{width:10px;}
//**#zkbkLijstTab		{width:240px;border: 2px solid white;white-space:nowrap;font-size:larger;cursor:pointer;margin-bottom:3px;border-radius:2px;display:none;float: right;}*/
/*#zkbkLijstTab		{width:50%;border: 2px solid #CCC;white-space:nowrap;font-size:larger;cursor:pointer;margin-bottom: 5px;border-top-left-radius:8px;border-bottom-left-radius:8px;display:none;float:left;color:#444;background:#DDD;box-shadow:3px 3px 5px -1px rgb(0 0 0 / 20%);vertical-align:middle;padding:5px;text-align: center;}*/
/*#zkbkLijstTab:hover	{box-shadow: 0 0 5px -1px rgb(0 0 0 / 60%);font-weight: bold;}*/
/*#zkbkKaartTab		{width:300px;border: 2px solid white;white-space:nowrap;font-size:larger;cursor:pointer;margin-bottom:3px;border-radius:2px;display:none;float: right;}*/
#zkbkPopupKnop		{border:2px solid #CCC;margin-bottom:3px;margin:0px 3px 3px 3px;border-radius:8px;color:#444;background:#DDD;box-shadow:3px 3px 5px -1px rgb(0 0 0 / 20%);padding:5px;text-align:center;}
#zkbkPopupKnop:hover	{box-shadow: -5px -5px 8px -1px rgb(0 0 0 / 60%);}
/*#zkbkKaartTab		{width:50%;border: 2px solid #CCC;white-space:nowrap;font-size:larger;cursor:pointer;margin-bottom:5px;border-top-right-radius:8px;border-bottom-right-radius:8px;display:none;float:right;color:#444;background:#DDD;box-shadow:3px 3px 5px -1px rgb(0 0 0 / 20%);vertical-align:middle;padding:5px;text-align: center;}
#zkbkKaartTab:hover	{box-shadow: 0 0 5px -1px rgb(0 0 0 / 60%);font-weight: bold;}*/

/*#zkbkKaartTab		{width: 50%;}
#zkbkLijstTab		{width: 50%;}*/
#zkbkXsToCriteria	{position: fixed;top:15px;left:10px;z-index:5;background:#BFFFBF;border-radius:5px;;display:none;}
#zkbkXsToResultaten	{position: fixed;top:15px;right:10px;z-index:5;padding:5px;background:#BFFFBF;border-radius:2px;display:none;}
.zkbkXsResultPreview	{height:30px;}
#zkbkContainer		{padding-left:0px;padding-right:0px;width:100vw;min-height:670px;}
/*#zkbkResultaten	{position:absolute;overflow:auto;max-width:100vw;}*/
#zkbkCriteria	{    max-width: 100%;width: 100%;box-sizing: border-box;overflow-x:hidden;}
/*.periodeTips	{cursor:pointer;color:blue;white-space: nowrap;}*/
.zkbkCriteriaTitel	{background:#009900;color:var(--achtergrondkleur);font-weight:bold;height:22px;padding:2px;}
.zkbkCriteriaTitel.nr1 {width:100px;border-left:1px solid lightgrey;}
.zkbkCriteriaTitel.nr3	{width:50px;text-align:center;border-right:1px solid lightgrey;}
.zkbkCriteriaTitelClickable	{background:var(--achtergrondkleur);font-weight:bold;padding:2px;cursor:pointer;border-bottom:1px solid lightgrey;}
.zkbkCriteriaTitelClickable.nr1 {width:105px;border-top-left-radius:2px;}
.zkbkCriteriaTitelClickable.nr3 {width:50px;text-align:center;border-top-right-radius:2px;}
#vogelvluchtMap			{width:100%;height:90vw;display:none;}
#vogelvluchtMapClose	{position:absolute;width:16px;height:16px;cursor:pointer;display:none;z-index:100;}
/*.zkbkAccInfo			{position:absolute;background:var(--achtergrondkleur);}*/

@media (min-width: 768px) {
	.zkbkAccInfoCol	{max-width:320px;}
}
.zkbkAccInfo.zkbkOverview, .zkbkAccInfoDetail	{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		{align-items:stretch;font-size:1rem;height:fit-content}
.zkbkAccBalkBlok > div > div {padding: 0.3rem 0.5rem;}
.zkbkAccBalkTab			{width:100%;maXrgin-top:2px;border:2px solid var(--achtergrondkleur);}
.zkbkAccBalkPrijs		{backXground:var(--achtergrondkleur);font-size:smaller;}
.zkbkAccBalkPrijs > *	{font-weight: bold;}
.zkbkAccBalkLmFlag		{align-content:center;text-align:center;padding:0.5rem;border-radius:0.375rem;background-color:var(--highlightkleur);font-weight:bold;}
.zkbkAccBalkXfFlag		{width:34px;font-size:17px;padding:2px;}
.zkbkAccBalkXfImg		{}

/*.zkbkAccBalkVvImg		{height:13px;}*/
.zkbkAccTextBlok		{width:auto;}
.zkbkOverview, .zkbkAccInfoDetail 			{color: var(--tekstkleur);text-decoration: none;}
.zkbkAccTextNaam		{font-weight: bold;margin:0;}
.zkbkAccTextLocatie		{font-weight:normal;font-size:.9rem;}
.zkbkAccTextLocatie span {white-space: nowrap;}
.zkbkAccGebied			{}
.zkbkAccTextAanbieding	{}
.zkbkAccTextLmText		{}

.zkbkAccAvailBlok		{width:100%;}
.zkbkAccAvailBlok.zkbkOverview	{display:none;}
.zkbkAccAvailBlok.zkbkPreview	{display:block;}

#lijstkaartswitch 	{width: 100%;}

.zkbkAccInfoDetail{width:100%;}
.zkbkAccDetailcarousel{height:fit-content}
.zkbkAccDetailFoto{max-height:100%;max-width:100%;}
.zkbkDetailLeft{width:100%;}

.zkbkDetailLink{color:var(--tekstkleur);text-decoration:none;}
.zkbkAccDetailSymbolrow{align-items:stretch;font-size:1.6rem;height:fit-content;}
.zkbkAccDetailSymbolrow div, .zkbkAccDetailSymbolrow button{padding:.2rem .5rem;align-content:center;font-size:1.2rem;}
.zkbkAccBalkKaartFlag		{background:var(--achtergrondkleur);border: 1px solid var(--uitlichtkleur);text-align:center;padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkRevScore	{white-space:nowrap;font-size:.8rem !important;background-color:var(--tekstkleur);color:var(--achtergrondkleur);padding:0.5rem;border-radius:0.375rem;align-content:center;}
.revSter				{color:var(--highlightkleur);}
.zkbkAccBalkKorting{background:var(--highlightkleur);border-radius: 1px solid var(--highlightkleur);text-align:center;padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkHond, .zkbkAccBalkHondNee{background-color:var(--uitlichtkleur);color:var(--tekstkleur);padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkHond span, .zkbkAccBalkHondNee span{position:relative;display:inline-block;line-height:1;}
.zkbkAccBalkHondNee span::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%
  );
}
.zkbkDetailRechtsboven{}
.zkbkDetailVrij{background-color: var(--lichtgroen) !important;border-color: var(--lichtgroen) !important;}
.zkbkDetailVrij:hover{background-color:var(--bs-btn-hover-bg) !important;border-color:var(--bs-btn-hover-bg) !important;}
.zkbkDetailVrij > div:first-child {flex:1;}
.zkbkDetailVrijtype{width:fit-content;font-weight:bold;padding:.5rem;background-color: var(--uitlichtkleur);}
.zkbkDetailVrijKorting{background-color: var(--highlightkleur)}
.zkbkDetailVrijdata{}
.zkbkDetailVrijprijs > *{font-weight:bold;}
.zkbkDetailVrijprijsExtra{font-size:.8rem;}
.zkbkDetailVrijPijltje{font-size:1.2rem;}
.zkbkDetailVrijMeer{font-size:.9rem;}
.zkbkIntroText{}
.zkbkIntroText p{margin-bottom:.2rem;}
.zkbkDetailVrijSubnaam{font-weight:bold;}
@media (max-width: 767px) {
  .zkbkAccInfoDetail {
    flex-direction: column !important;
  }
  .zkbkDetailLeft {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .zkbkDetailRight {
    padding: 1rem !important;
  }
}

@media only screen and (max-width: 769px)
	{

	/*h1					{font-size:24px;}
	h2					{font-size:20px;}
	.zkbkResultatenBlok			{padding-left:0px;padding-right:0px;}
	.zkbkXVeldBlok				{padding-left:0px;padding-right:0px;}
	.zkbkCriteriaTitel.nr1 		{width:130px;}
	.zkbkCriteriaTitelClickable.nr1 {width:135px;overflow:hidden;white-space:nowrap;}
	.zkbkCriteriaTitelClickable	{height:44px;}
	.zkbkAccInfo.zkbkOverview	{width:100%;height:700px;margin:0px;border-radius:0px;padding:0px;border:0px;background-image: linear-gradient(white,ivory);}/*{width:363px;height:435px;}			/*373*/
	/*.zkbkAccInfo.zkbkOverview:hover	{border:0px;}
	.zkbkAccFotoBlok			{width:100%;}	/*353*/
	/*.zkbkAccFoto.zkbkOverview	{width:100%;XXmax-width:384px;height:inherit;border-radius:0px;}
	.zkbkAccBalkBlok			{width:100%;padding:5px;}
	.zkbkAccBalkTab				{}
	.zkbkAccBalkXfFlag			{font-size:22px;}
	.zkbkAccBalkKaartFlag			{font-size:22px;}
	.zkbkAccBalkVvImg			{height:17px;}
	.zkbkAccTextNaam			{}
	.zkbkAccTextBlok			{width:100%;padding:5px;}
	.zkbkAccTextAanbieding		{display:block;}
	.zkbkAccAvailBlok.zkbkOverview	{display:block;}*/
	}

@media (min-width: 768px) {
  #zkbkCritContainer {
    position: static;  /* offcanvas positie resetten */
    transform: none;
  }
  .zkbkAccDetailcarousel{max-width:320px;}
	.zkbkDetailLeft{max-width:320px;}
}

/* Sticky navbar */
.zkbkXsNavbar {width: 100vw;transition: top 0.2s;z-index: 999;background-color:var(--achtergrondkleur);align-items: center;flex-wrap: nowrap;}
.zkbkXsNavbar.sticky {position: fixed;top: 0;left: 0;}
.zkbkXsNavbar .btn {flex: 1 1 0;white-space: nowrap;font-size: clamp(0.8rem, 2vw, 1rem);padding: 0.25rem 0.5rem;}
#zkbkNavLogo {opacity:0;flex: 1 1 0; min-width: 0;text-align: center;}
#zkbkNavLogo img {max-height:2rem;height: auto;width: auto;display: block;margin: 0 auto;}
#zkbkNavLogo p {font-size: clamp(0.6rem, 1.5vw, 0.8rem);margin: 0;white-space: nowrap;}

/*filterfooter*/
.zkbkXsFilterBalk{white-space: nowrap;position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1050; background-color: var(--achtergrondkleur);}
.zkbkXsFilterBalk .aantalGeselecteerd, .zkbkXsFilterBalk .aantalKaart{font-size: clamp(0.7rem, 2.5vw, 0.8rem);min-width: 0;}
.zkbkXsFilterBalk button {font-size: clamp(0.9rem, 2.5vw, 1rem);min-width: 0;}

.fade-flex {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fade-flex.show {
  opacity: 1;
  pointer-events: auto;
}