.main-popup {
	--popup-spacer: var(--container-padding, var(--container-spacer));
	--popup-max-width: 40rem;
	--popup-transition: var(--transition);
	--popup-background-color: var(--color-white);
	--popup-color: currentColor;
	--popup-border-radius: var(--border-radius);
	position: fixed;
	inset: 0;
	z-index: 2000;
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity var(--transition), visibility var(--transition);
	visibility: hidden;
	padding: var(--popup-spacer);
}
.main-popup.active {
	opacity: 1;
	visibility: visible;
}

.main-popup__main {
	background-color: var(--popup-background-color);
	color: var(--popup-color) !important;
	margin: 0 auto;
	width: 100%;
	max-height: 100%;
	max-width: var(--popup-max-width);
	position: relative;
	z-index: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.main-popup__title-wrap {
	padding: var(--popup-spacer) 0 0 var(--popup-spacer) !important;
}
.main-popup__body {
	padding: 0 var(--popup-spacer) var(--popup-spacer);
}
.main-popup__body > :first-child {
	margin-top: 0;
}
.main-popup__body > :last-child {
	margin-bottom: 0;
}
.main-popup__close-button {
	outline: none;
}
.main-popup__close-icon {
	mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 6L18 5.5L12 11.5L6 5.5L5.5 6L11.5 12L5.5 18L6 18.5L12 12.5L18 18.5L18.5 18L12.5 12L18.5 6Z' fill='currentColor'/%3E%3C/svg%3E%0A");
	display: block;
	background-color: currentColor;
	width: 1em;
	height: 1em;
	mask-position: center;
	mask-repeat: no-repeat;
}