body {
  position: relative;
  font-family: Georgia, Times, serif;
  font-size: 16px;
  color: #333;
  }

#agenda .ud {font-size: 10px;}
.agendatop .btn:hover .ud {color: #c4e3ed;}
.agendabottom {text-align: center;}
.agendabottom .btn:hover .ud {color: #c4e3ed;}

.jaardiv {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 100%;
  padding: 5px 0; /* 10px ruimte tussen 2 jaargangen */
}

.flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  }

.popknop {
  padding: 0px 6px 1px;
  font-size: 14px;
  cursor: zoom-in;
}
.wissel {cursor: zoom-out!important;}
.popover {display: block;max-width: 264px;color: #333;border: .5px solid grey;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}


.afl::first-letter {
  font-family: fdpFont, vivaldi, Georgia, serif;
  font-size: 150%;
  color: #e60000;
  line-height: 80%;
  letter-spacing: 3px;
}

ins {color: blue;padding: 0 5px;text-decoration: none;}
s {color: #999999;text-decoration: line-through 1.5px solid blue;}
.popover {--bs-popover-border-color: var(--bs-dark);}

/* popover Entree vanaf nov 2023 */
.agendaitem .popknop, .aid .popknop {
  padding: 0px 6px 1px;
  font-size: 14px;
  cursor: zoom-in;
}

.vraagteken {
  display: inline-block;
  margin-left: 3px;
  line-height: 10px;
  transition: all 0.4s ease;
}

.vraagteken::before {content: "?";}

.draai {
  font-family: Arial;
  padding-bottom: 2px;
  transform: rotate(-180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

.draai::before {content: "x";}

.wissel {cursor: zoom-out;}

.popover {display: block;max-width: 264px;color: #333;border: .5px solid grey;box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
 /* einde popover Entree vanaf nov 2023 */

.disabled {
  opacity: 0.5; /* Maakt de knop visueel "uitgeschakeld" */
  cursor: not-allowed;
}

.disabled a {
  pointer-events: auto; /* Laat de tooltip w�l werken */
}

.ticket.disabled {
	pointer-events: auto; /* Laat de tooltip w�l werken */
    cursor: not-allowed;
    opacity: 0.3 !important; /* Optioneel, maakt de knop visueel 'inactief' */
}

.jaar-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px;
	flex-wrap: wrap;
}

.jaar-button-container button {
    width: 70px;
    padding: 2px 10px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    background-color: light-grey;
    color: black;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.jaar-button-container button:hover,
.jaar-button-container button.active  {
    background-color: grey;
	color: white;
}

.spacer {
    display: block;
    height: 10px; /* Pas eventueel de ruimte aan */
}

  .yeardiv {padding:0 0px}
  .aid {position: relative;width: 100%;max-width: 1240px;margin: 20px auto;padding: 2px;background: white;box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);border-radius: 6px;}
  .aida {position: relative;padding: 0px;}
  .aidb {position: relative;padding: 0px;margin-top: -80px;max-height: 80px;min-height: 80px;overflow: hidden;}
  .aidb h5 {margin: 0 40px 0 0;font-style: italic;color: #800000}
  .aid1 {width: 250px;max-height: 150px;}
  .aid1 .reserveer {position: absolute;display: none;right: -5px;bottom: 0px;padding: 0 5px;font-size: 14px;text-align: center;color: #ffffff;background-color: #337AB7;border: 1px solid #337AB7;border-radius: 5px;-webkit-transform: rotate(354deg);-ms-transform: rotate(354deg);transform: rotate(354deg);}
  .aid1 .reserveer:hover {color: #337AB7;background-color: #ffffff;border: 1px solid #337AB7;}
  .aid1 .xxpopknop {position: absolute;display: none;right: -5px;bottom: 0px;padding: 0 5px;font-size: 14px;text-align: center;color: #ffffff;background-color: #337AB7;border: 1px solid #337AB7;border-radius: 5px;-webkit-transform: rotate(354deg);-ms-transform: rotate(354deg);transform: rotate(354deg);}
  .aid1img {position: relative;width: 250px;height: 150px;padding: 0px;background: white;z-index: 1;}
  .aid1 .aid1img img {width: 100%;height: 100%;padding: 1px;border-radius:5px;object-fit: cover;}
  .aid2 {height: 70px;padding: 4px 12px;min-width: 0;}
  .aid2 .dts svg {margin-bottom: 4px;width: 130px;}
  .aid2 .dtpr svg {margin-bottom: 4px;width: 100px;}
  .aid2 .dts svg text, 
  .aid2 .dtpr svg text {fill: #4d4d4d;font-family: Georgia, Times, serif;font-size: 24px;font-weight: normal;text-transform: none;}
  .aid2 .dts line {stroke: red;stroke-width: 2}
  .aid2 .dtpr line {stroke: blue;stroke-width: 2}
  .aid2 p {margin: 0;font-size: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .aid2 .p1 .da {font-weight: bold;}
  .aid2 .p2 {margin: 3px 0 0;}
  .aid2 .p2 .au {font-size: 85%;}
  .aid3 {width: 250px;height: auto;padding: 0px;}
  .aid3vul {position: relative;width: 250px;height: 0px;}
  .aid3prog {position: relative;width: auto;height: auto;max-height: 0px;margin: 85px 0px 0px;padding: 2px;overflow: hidden;}
  .aid3prog .programma {position:relative;width:auto;height:auto;padding:0px 5px;border:1px solid #800000;border-radius: 4px;}  
  .aid3prog .programma .disabled-link {color: #800000 !important;pointer-events: none;cursor: default;text-decoration: none;}
  .aid3prog .programma .upd {position: absolute;right: 6px;bottom: 3px;padding: 14px 6px 6px 6px;cursor: zoom-out;}
  .aid3prog .programma .upd .upa {padding: 5px;border: solid #999; border-width: 3px 0 0 3px;rotate: 45deg;}
  .aid3prog .programma .upd:hover .upa {border: solid #111; border-width: 3px 0 0 3px;}
  .aid4 {min-height: 80px;padding: 4px 12px 12px 12px;text-align: justify;transition: max-height 0.50s ease-out;}
  .aid4 .lmib {position: absolute;display: none;right: 10px;bottom: 5px;margin-left: 5px;padding: 0px 5px;font-size: 13px;cursor: zoom-out;}
  .aid4 .lmd .lmeb {position: relative;float: right;margin: 2px;padding: 0px 5px;font-size: 13px;cursor: zoom-in;}
  .aid4 .lmd {position: absolute;bottom: .25em;right: 8px;height: 26px;width: 140px;background-image: linear-gradient(to right, rgba(255,255,255,.4) 10%, rgba(255,255,255,1) 50%);}
  .aid4 p {margin-top: -3px;line-height: 25px;}
  .aid4 .p3m a:hover {text-decoration: underline;}
  
  #jaar-huidig-nummer {
	font-family: 'Times New Roman', serif;
	font-style: normal;
}
 
.eerdertxt {
	position: relative;
	margin: 0 auto -15px;
	padding: 0 5px 0 20px;
  }

 .volgendjaarnr {
	position: relative;
	margin: 0 auto -15px;
	padding: 0 10px;
 }
 
.jaartitel {
    font-family: 'Times New Roman', serif;
    font-size: 1.5em;
    color: #333;
}

.jaartitel.huidig-jaar {
	margin:20px auto -15px;
	padding:0 10px;
}

.jaartitel.volgend-jaar {
	margin:20px auto -15px;
	padding:0 10px;
}

.jaarstreep {
	margin:auto;
    border: none;
    border-top: 2px solid #000;
	width:99%;
}

 @media screen and (max-width: 768px) {
	.eerdertxt {max-width: 576px;}
	.volgendjaarnr, .jaartitel, .jaarstreep {max-width: 556px;}
 }
  
/********* dit voor alle 'active items' met een scherm groter dan 1081px *********** aid1g = agenda item div 1 groot */
 @media screen and (min-width: 1081px) {
  .aidg .aidb {margin-top: -90px;max-height: 90px;min-height: 90px;}
  .aidg .aid1 {width: 360px;max-height: 190px;}
  .aidg .aid1img {width: 356px;height: 190px;}
  .aidg .aid2 .dtpr svg text, 
  .aidg .aid2 .dts svg text {font-family: Times;font-size: 24px;text-transform: uppercase;}
  .aidg .aid2 .p1 {margin: 2px 0;padding: 4px 0;font-family: Times;font-size: 24px;text-transform: uppercase;}
  .aidg .aid2 .p1 .da {font-weight: normal;}
  .aidg .aid2 .p1 .lo {font-weight: normal;}
  .aidg .aid2 .p2 {font-size: 28px;}
  .aidg .aid3 {width: 360px;min-width: 360px;padding: 8px 4px 4px;}
  .aidg .aid4 p {font-size: 18px;line-height: 28px;}
 }
/********* einde dit voor alle 'active items' met een scherm groter dan 1081px ***********/
    
 @media screen and (max-width: 768px) {
  .jaar-button-container button {width: auto;padding: 0px 7px;}
  .aid {max-width: 556px;}
  .aidb {margin: 0px;}
  .aid1 {width: 100%;max-height: 200px;}
  .aid1img {width: 100%;height: 250px;margin: 0;}
  .aid2 {width: 100%;margin-top: 50px;text-align: center;}
  .aid3 {width: 100%;}
  .aid3prog {width: auto;height: auto;padding: 0 10px;margin: 0px;}
  .aid3prog .programma .upd  {display: block;}
  .aid4 {min-height: 80px;max-height: 2000px;text-align: left;}
  }
  
@media (max-width: 600px) {
  .jaardiv {grid-template-columns: 50% 50%;gap: 0 10px;}
  .flex-container {flex-direction: column;text-align: center;font-size: 16px;}
  .pop::before {content: "\A"; white-space: pre;} 
}

 @media (max-width: 500px) {
  .aid2 .p1 .lo {display: none}
  .aid2 .p2 .au {display: none;}
 }