/* modal */

.modal-dark.modal,
.theme-dark .modal {
	--modal-overlay-background: rgb(29, 29, 31);
	--modal-close-background: rgb(51, 51, 54);
	--modal-close-background-hover: #37373a;
	--modal-close-background-active: #2f2f32;
	--modal-close-color: rgba(255, 255, 255, 0.8);
	--modal-close-color-hover: rgb(255, 255, 255);
}

.modal-dark.modal.modal-close-button-high-contrast,
.theme-dark .modal.modal-close-button-high-contrast {
	--modal-close-background: rgb(245, 245, 247);
	--modal-close-background-hover: rgb(255, 255, 255);
	--modal-close-background-active: #ededf2;
	--modal-close-color: rgb(0, 0, 0);
	--modal-close-color-hover: var(--modal-close-color);
}

.theme-light .modal.modal-dark {
	--modal-overlay-background: rgb(29, 29, 31);
	--modal-close-background: rgb(51, 51, 54);
	--modal-close-background-hover: #37373a;
	--modal-close-background-active: #2f2f32;
	--modal-close-color: rgba(255, 255, 255, 0.8);
	--modal-close-color-hover: rgb(255, 255, 255);
}

.theme-light .modal.modal-dark.modal-close-button-high-contrast {
	--modal-close-background: rgb(245, 245, 247);
	--modal-close-background-hover: rgb(255, 255, 255);
	--modal-close-background-active: #ededf2;
	--modal-close-color: rgb(0, 0, 0);
	--modal-close-color-hover: var(--modal-close-color);
}

.modal-light.modal-close-button-high-contrast {
	--modal-close-background: rgb(29, 29, 31);
	--modal-close-background-hover: #272729;
	--modal-close-background-active: #18181a;
	--modal-close-color: rgb(255, 255, 255);
	--modal-close-color-hover: var(--modal-close-color);
}

.theme-dark .modal.modal-light {
	--modal-overlay-background: rgb(255, 255, 255);
	--modal-close-background: rgb(232, 232, 237);
	--modal-close-background-hover: #ececf0;
	--modal-close-background-active: #dfdfe4;
	--modal-close-color: rgba(0, 0, 0, 0.56);
	--modal-close-color-hover: rgba(0, 0, 0, 0.64);
}

.theme-dark .modal.modal-light.modal-close-button-high-contrast {
	--modal-close-background: rgb(29, 29, 31);
	--modal-close-background-hover: #272729;
	--modal-close-background-active: #18181a;
	--modal-close-color: rgb(255, 255, 255);
	--modal-close-color-hover: var(--modal-close-color);
}

.modal-close-button {
	cursor: auto;
	position: var(--modal-close-button-position);
	order: 1;
	display: flex;
	align-self: flex-end;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	height: var(--modal-close-button-size);
	width: var(--modal-close-button-size);
	margin: 0;
	padding: 0;
	border: 0;
	margin-inline-end: var(--modal-close-button-offset-inline-start);
	margin-top: var(--modal-close-button-offset-top);
	top: var(--modal-close-button-offset-top);
}

html.has-modal .modal-close-button {
	cursor: pointer;
}

.modal-close-button:focus-visible {
	outline: none;
}

.modal-close-button:focus-visible .modal-close-icon {
	outline: 2px solid var(--sk-focus-color, #0071e3);
	outline-offset: 3px;
}

.modal-close-button:hover .modal-close-icon {
	background: var(--modal-close-background-hover);
	color: var(--modal-close-color-hover);
}

.modal-close-button:active .modal-close-icon {
	background: var(--modal-close-background-active);
}

.modal-close-button .modal-close-icon {
	background: var(--modal-close-background);
	border-radius: var(--modal-close-border-radius);
	color: var(--modal-close-color);
	display: flex;
	align-items: center;
	height: var(--modal-close-icon-size);
	width: var(--modal-close-icon-size);
	outline: none;
	transition:
		color 100ms linear,
		background 100ms linear;
	position: relative;
}

.modal-close-button .modal-close-icon svg {
	fill: currentColor;
	position: absolute;
	inset-inline-start: 50%;
	height: var(--modal-close-icon-svg-size);
	width: var(--modal-close-icon-svg-size);
}

html:not([dir="rtl"]) .modal-close-button .modal-close-icon svg {
	transform: translateX(-50%);
}

.modal-close-button .modal-close-icon * {
	pointer-events: none;
}

.modal {
	--modal-overlay-background: rgb(255, 255, 255);
	--modal-overlay-padding-top: 76px;
	--modal-overlay-padding-bottom: 76px;
	--modal-overlay-padding-inline: 76px;
	--modal-close-button-offset-top: 16px;
	--modal-close-button-offset-inline-start: 16px;
	--modal-close-button-size: 44px;
	--modal-close-background: rgb(232, 232, 237);
	--modal-close-background-hover: #ececf0;
	--modal-close-background-active: #dfdfe4;
	--modal-close-color: rgba(0, 0, 0, 0.56);
	--modal-close-color-hover: rgba(0, 0, 0, 0.64);
	--modal-close-border-radius: 50%;
	--modal-close-button-position: sticky;
	--modal-close-icon-size: 36px;
	--modal-close-icon-svg-size: 20px;
	background: var(--modal-scrim-background, var(--modal-overlay-background));
	position: fixed;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: none;
	overflow: auto;
}

@media (max-width: 480px) {
	.modal {
		--modal-overlay-padding-inline: 6.25%;
	}
}

.modal.modal-animating {
	overflow: hidden;
}

.modal .modal-overlay-container {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 100%;
}

.modal .modal-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.modal .modal-overlay:focus-visible {
	outline: 2px solid var(--sk-focus-color, #0071e3);
	outline-offset: 3px;
}

.modal .modal-overlay[data-focus-method="mouse"],
.modal .modal-overlay[data-focus-method="touch"] {
	outline: none;
}

.modal .modal-content-container {
	background: var(--modal-overlay-background);
	order: 2;
	box-sizing: border-box;
	padding-inline-start: var(--modal-overlay-padding-inline);
	padding-inline-end: var(--modal-overlay-padding-inline);
	padding-top: var(--modal-overlay-padding-top);
	padding-bottom: var(--modal-overlay-padding-bottom);
	margin-top: calc(-44px + var(--modal-close-button-offset-top) * -1);
}

.modal-open {
	display: block;
	z-index: 11000;
}

.modal-touch-lock {
	touch-action: none;
}

.has-modal {
	overflow: hidden;
}

.has-modal body {
	padding-inline-end: var(--modal-scrollbar-buffer);
}

.modal-full-bleed {
	--modal-scrim-background: var(--modal-overlay-background);
	--modal-overlay-padding-top: 96px;
	--modal-overlay-padding-bottom: 96px;
	--modal-close-button-offset-top: max(16px, env(safe-area-inset-top));
}

html:not([dir="rtl"]) .modal-full-bleed {
	--modal-close-button-offset-inline-start: max(
		16px,
		env(safe-area-inset-left)
	);
}

@media (max-width: 1068px) {
	.modal-full-bleed {
		--modal-overlay-padding-top: 76px;
		--modal-overlay-padding-bottom: 76px;
	}
}

.modal-full-bleed .modal-overlay-container {
	flex-direction: column;
}

.modal-full-bleed .modal-overlay {
	flex-grow: 1;
	width: 100%;
}

.modal-full-bleed .modal-overlay:focus {
	outline-offset: -4px;
}

.modal-full-bleed .modal-content-container {
	flex-grow: 1;
}

.modal-page-overlay {
	--modal-scrim-background: rgba(0, 0, 0, 0.48);
	--modal-overlay-margin-top: 40px;
	--modal-overlay-margin-bottom: var(--modal-overlay-margin-top);
	--modal-overlay-border-radius-top: 18px;
	--modal-overlay-border-radius-bottom: var(
		--modal-overlay-border-radius-top
	);
	--modal-overlay-width: 816.6666666667px;
}

@media (max-width: 1068px) {
	.modal-page-overlay {
		--modal-overlay-width: 692px;
	}
}

@media (max-width: 734px) {
	.modal-page-overlay {
		--modal-overlay-width: max(87.5%, 480px);
		--modal-overlay-padding-bottom: 60px;
	}
}

@media (max-width: 480px) {
	.modal-page-overlay {
		--modal-overlay-border-radius-bottom: 0;
		--modal-overlay-width: 100%;
		--modal-close-button-offset-top: max(16px, env(safe-area-inset-top));
	}

	html:not([dir="rtl"]) .modal-page-overlay {
		--modal-close-button-offset-inline-start: max(
			16px,
			env(safe-area-inset-left)
		);
	}
}

@media (max-width: 480px) {
	.modal-page-overlay .modal-overlay-container {
		flex-direction: column;
	}
}

.modal-page-overlay .modal-overlay {
	margin-inline-start: auto;
	margin-inline-end: auto;
	box-sizing: border-box;
	border-radius: var(--modal-overlay-border-radius-top)
		var(--modal-overlay-border-radius-top)
		var(--modal-overlay-border-radius-bottom)
		var(--modal-overlay-border-radius-bottom);
	width: var(--modal-overlay-width);
	margin-top: var(--modal-overlay-margin-top);
	margin-bottom: var(--modal-overlay-margin-bottom);
}

@media (max-width: 480px) {
	.modal-page-overlay .modal-overlay {
		--modal-overlay-margin-top: 20px;
		--modal-overlay-margin-bottom: 0;
		flex-grow: 1;
	}

	.modal-page-overlay .modal-overlay .modal-content-container {
		flex-grow: 1;
	}
}

.modal-page-overlay .modal-overlay .modal-content-container {
	border-radius: inherit;
	mask-image: radial-gradient(white, black);
}

@media (min-width: 1069px) {
	.modal-wide {
		--modal-overlay-width: 1029px;
	}
}

.modal-crossfade {
	display: block;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s,
		z-index 0s linear 0.4s;
}

@media (prefers-reduced-motion) {
	.modal-crossfade {
		transition: none;
	}
}

.modal-crossfade.modal-open {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.modal-fixed-height {
	overflow: initial;
	--modal-close-button-position: static;
}

.modal-curtain-light {
	--modal-scrim-background: rgba(232, 232, 237, 0.48);
}

.modal-curtain-blur {
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.modal-close-button-static {
	--modal-close-button-position: static;
}

.modal-close-button-high-contrast {
	--modal-close-background: rgb(29, 29, 31);
	--modal-close-background-hover: #272729;
	--modal-close-background-active: #18181a;
	--modal-close-color: rgb(255, 255, 255);
	--modal-close-color-hover: var(--modal-close-color);
}