.dt-popup[hidden] {
	display: none !important;
}


.dt-popup {
	position: fixed;
	inset: 0;

	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	padding: 20px;

	opacity: 0;

	transition:
		opacity 0.18s ease;
}


.dt-popup.is-visible {
	opacity: 1;
}


.dt-popup__overlay {
	position: absolute;
	inset: 0;

	background:
		rgba(0, 0, 0, 0.6);
}


.dt-popup__dialog {
	position: relative;

	z-index: 1;

	width: min(700px, 100%);

	max-height:
		calc(100vh - 40px);

	max-height:
		calc(100dvh - 40px);

	overflow-y: auto;

	box-sizing: border-box;

	background: #fff;
	color: #222;

	box-shadow:
		0 20px 60px
		rgba(0, 0, 0, 0.25);
}


.dt-popup__content {
	position: relative;

	box-sizing: border-box;

	padding: 40px;
}


.dt-popup__title {
	margin-top: 0;
}


.dt-popup__text > :first-child {
	margin-top: 0;
}


.dt-popup__text > :last-child {
	margin-bottom: 0;
}


/**
 * Close Button
 */
.dt-popup__close {
	position: absolute;

	top: 14px;
	right: 14px;

	z-index: 2;

	width: 36px;
	height: 36px;

	padding: 0;

	border: 0;

	background: transparent;

	cursor: pointer;
}


.dt-popup__close span,
.dt-popup__close span::before,
.dt-popup__close span::after {
	position: absolute;

	display: block;

	width: 22px;
	height: 2px;

	background: currentColor;
}


.dt-popup__close span {
	top: 17px;
	left: 7px;

	background: transparent;
}


.dt-popup__close span::before,
.dt-popup__close span::after {
	content: '';

	top: 0;
	left: 0;
}


.dt-popup__close span::before {
	transform: rotate(45deg);
}


.dt-popup__close span::after {
	transform: rotate(-45deg);
}


.dt-popup__close:focus-visible {
	outline:
		2px solid currentColor;

	outline-offset: 2px;
}


/**
 * Inhalt
 */
.dt-popup__button-wrap {
	margin-top: 24px;
}


.dt-popup__close-link {
	margin-top: 20px;
	margin-bottom: 0;
}


/**
 * Hintergrund nicht scrollen,
 * solange Popup offen ist.
 */
body.dt-popup-open {
	overflow: hidden;
}


/**
 * Mobile
 */
@media (max-width: 600px) {

	.dt-popup {
		padding: 12px;
	}


	.dt-popup__dialog {
		max-height:
			calc(100vh - 24px);

		max-height:
			calc(100dvh - 24px);
	}


	.dt-popup__content {
		padding:
			32px 24px 24px;
	}
}


/**
 * Accessibility
 */
@media (prefers-reduced-motion: reduce) {

	.dt-popup {
		transition: none;
	}
}