@keyframes PopUpfadeInOpacity {
	0% { opacity:0; }
	100% { opacity:1; }
}

.popup:hover {
cursor:pointer;
}

.overlay {
position:fixed;
inset:0;
background-color:rgb(0 0 0 / .8);
animation-name:PopUpfadeInOpacity;
animation-iteration-count:1;
animation-timing-function:ease-in;
animation-duration:0.6s;
display:none;
z-index:10000;
}
.showoverlay {
display:block;
}
.popupbox {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:96vw;
height:90svh;
padding-top:2.5rem;
background-color:rgb(255 255 255);
animation-name:PopUpfadeInOpacity;
animation-iteration-count:1;
animation-timing-function:ease-in;
animation-duration:0.4s;
display:none;
overflow:hidden;
z-index:10001;
}
@media only screen and (max-width:900px) and (orientation:landscape) {
	.popupbox {
	width:100vw;
	height:100vh;
	padding:0 1rem;
	}
}
.showpopupbox {
display:block;
}

.closepopup {
position:absolute;
top:0.5rem;
right:0.75rem;
font-size:1.5em;
font-weight:400;
text-shadow:0 0 3px #fff;
	@media screen and (max-width:900px) { right:0.5rem; }
	@media only screen and (max-width:900px) and (orientation:landscape) {
	top:1rem;
	right:0.5rem;
	}
}
.closepopup:hover {
color:var(--alertcolor);
text-decoration:none;
cursor:pointer;
}

.popup-iframe {
position:relative;
width:99.5%;
height:calc(100% - 5rem);
margin-left:0.5%;
border:none;
}
.popup-imgbox, .popup-txtbox {
position:relative;
width:100%;
height:calc(100% - 5rem);
margin:auto;
padding:2rem;
display:block;
overflow:hidden;
	@media screen and (max-width:900px) { padding:0.5rem; }
}
.popup-txtbox {
overflow-x:auto;
}
.popup-imgbox img {
position:relative;
width:auto;
max-width:100%;
height:auto;
max-height:70svh;
margin:auto;
display:block;
scroll-snap-align:center;
	@media only screen and (max-width:900px) and (orientation:landscape) { max-height:100vh; }
}
.popupbox h3 {
font-size:1em;
}

.popup-filesbox {
position:absolute;
inset:2rem 0 1rem 0;
width:auto;
height:auto;
padding:1rem;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
gap:2rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
	@media only screen and (max-width:900px) and (orientation:landscape) {
	inset:0;
	padding:0;
	}
}
.popup-filesbox::-webkit-scrollbar {
display: none;
}

.file-popup {
position:relative;
min-width:100%;
width:auto;
height:100%;
margin:auto;
display:flex;
align-items:center;
scroll-snap-align:center;
}
.file-popup img {
position:relative;
width:auto;
max-width:100%;
height:auto;
max-height:100%;
margin:auto;
display:block;
}

.prev-popup-file {
position:absolute;
inset:0 50% 4rem 0;
width:auto;
height:auto;
z-index:10002;
user-select:none;
}
.prev-popup-file:hover {
cursor:w-resize;
}
.next-popup-file {
position:absolute;
inset:0 0 4rem 50%;
width:auto;
height:auto;
z-index:10002;
user-select:none;
}
.next-popup-file:hover {
cursor:e-resize;
}

.prev-popup-pijl, .next-popup-pijl {
position:absolute;
bottom:0;
font-size:1.5em;
font-weight:400;
padding:0.5rem;
display:block;
	@media screen and (pointer:coarse) { display:none; }
}
.prev-popup-pijl {
left:-0.5rem;
}
.next-popup-pijl {
right:-0.5rem;
}
.prev-popup-pijl:hover, .next-popup-pijl:hover {
color:var(--alertcolor);
text-decoration:none;
cursor:pointer;
}