@charset "UTF-8";

.modaldialogue{
	--modaldialogueradius: 10px;
	--modaldialoguemargin: 20px;
	
	--modaldialoguebodycolour: #fff;
	
	--modaldialoguetextsize: 1em;
	--modaldialogueheadertextsize: 1.125em;
	--modaldialoguetextcolour: #111;
	--modaldialogueclosecolour: #c51a16;
	--modaldialoguecloselabelcolour: #fff;
	--modaldialogueoutlinecolour: rgba(109,62,171,0.5);
	--modaldialoguebordercolor: rgba(0,0,0,0.2);
	
	--modaldialoguecontentpadding: 0 1em 1em;
	--modaldialoguelinkcolour: #000;
	--modaldialoguelinkhovercolour: #666;
	--modaldialoguelinkactivecolour: #333;
	
	--modaldialoguebodyshadow: 0 10px 30px rgba(0,0,0,0.1);
	
	--modaldialogueshadowcolour: #000;
	--modaldialogueshadowopacity: 0.4;
	
	display: none !important;
}
.js .modaldialogue{
	display: inline !important;
}
.modaldialogue[hidden]{
	display: none !important;
}
.modaldialogue *{
	outline-width: 3px !important;
	outline-color: var(--modaldialogueoutlinecolour) !important;
}

.modaldialogue .modaldialogueshadow{
	position: fixed;
	z-index: 4999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	background-color: var(--modaldialogueshadowcolour);
	opacity: 0;
	transition: opacity 0.2s ease-out;
}
.modaldialogue.on .modaldialogueshadow{
	opacity: var(--modaldialogueshadowopacity);
}

.modaldialogue .modaldialoguebody{
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	width: 640px;
	height: 640px;
	height: min-content;
	max-width: calc(100% - (var(--modaldialoguemargin) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right));
	max-height: calc(100% - (var(--modaldialoguemargin) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	
	padding: 0;
	
	display: flex;
	flex-direction: column;
	
	border-radius: var(--modaldialogueradius);
	box-shadow: var(--modaldialoguebodyshadow);
	
	background-color: var(--modaldialoguebodycolour);
	color: var(--modaldialoguetextcolour);
	font-size: var(--modaldialoguetextsize);
	
	opacity: 0;
	transform: scale(0.97);
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.modaldialogue.fixedheight .modaldialoguebody{
	height: 640px;
}
.modaldialogue.bigsize .modaldialoguebody{
	margin: var(--modaldialoguemargin);
	margin: calc(var(--modaldialoguemargin) + env(safe-area-inset-top)) calc(var(--modaldialoguemargin) + env(safe-area-inset-right)) calc(var(--modaldialoguemargin) + env(safe-area-inset-bottom)) calc(var(--modaldialoguemargin) + env(safe-area-inset-left));
	min-height: 0;
	height: auto;
	min-width: 0;
	width: auto;
	max-width: none;
	max-height: none;
}
.modaldialogue.fitwindow .modaldialoguebody{
	margin: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	min-height: 0;
	height: auto;
	min-width: 0;
	width: auto;
	max-width: none;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
}
.modaldialogue.on .modaldialoguebody{
	opacity: 1;
	transform: none;
}
@media (max-height:640px), (max-width:640px){
	/* .modaldialogue .modaldialoguebody{
		margin: var(--modaldialoguemargin);
		margin: calc(var(--modaldialoguemargin) + env(safe-area-inset-top)) calc(var(--modaldialoguemargin) + env(safe-area-inset-right)) calc(var(--modaldialoguemargin) + env(safe-area-inset-bottom)) calc(var(--modaldialoguemargin) + env(safe-area-inset-left));
		min-height: 0;
		height: auto;
		min-width: 0;
		width: auto;
		max-width: none;
		max-height: none;
	} */
}
@media (prefers-reduced-motion){
	.modaldialogue .modaldialoguebody{
		transform: none;
	}
}

.modaldialogueCloserHolder{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}
.windows .modaldialogueCloserHolder{
	left: auto;
	right: 0;
}
.modaldialogueCloserHolder a{
	display: inline-block;
	vertical-align: top;
	color: inherit;
	text-decoration: none;
	
	font-size: var(--modaldialogueheadertextsize);
	font-weight: bold;
	line-height: 1.5;
	height: 2.5em;
	width: 2.5em;
	text-align: center;
	
	-webkit-user-select: none;
	user-select: none;
	
	outline-offset: -3px !important;
}
.mouseUI .modaldialogueCloserHolder a:hover,
.mouseUI .modaldialogueCloserHolder a:active{
	color: var(--modaldialogueclosecolour);
}
.mouseUI .modaldialogueCloserHolder a:active{
	color: var(--modaldialogueclosecolour);
	filter: brightness(80%);
}
.modaldialogueCloserHolder a:before{
	font-family: "AmaitorteSugarpowder";
	content: "✕";
	display: block;
	font-size: 1.25em;
	line-height: 1;
	width: 1em;
	height: 1em;
	margin: auto;
	text-align: center;
	font-weight: normal;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.modaldialogueCloserHolder a span{
	color: var(--modaldialoguecloselabelcolour);
	font-size: max(12px, 0.75rem);
	text-transform: uppercase;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	opacity: 0;
	transition: opacity 0.25s ease-out;
}
.mouseUI .modaldialogueCloserHolder a:hover span{
	opacity: 1;
	transition: opacity 0.4s 1s ease-out;
}

.modaldialogue .modaldialoguebody > h2,
.modaldialogue .modaldialogueheader{
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0;
	padding: 0.5em 2.5em;
	box-shadow: 0 1px var(--modaldialoguebordercolor);
	
	font-size: var(--modaldialogueheadertextsize);
	line-height: 1.5;
	text-align: center;
	font-weight: normal;
}

.modaldialogueContent{
	flex-grow: 1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--modaldialoguecontentpadding);
}
.modaldialogueContent:before{
	content: "";
	display: block;
	margin: 0 -1em -1em;
	height: 1em;
	box-shadow:
		0 4px 2px var(--modaldialoguebodycolour) inset,
		0 -100px var(--modaldialoguebodycolour);
}

.modaldialogue h3{
	font-size: 1.1em;
	margin: 0 0 0.909090909090909em;
}
.modaldialogue h4{
	font-size: 1em;
	margin: 0 0 1em;
}
.modaldialogueContent > section{
	margin: 0;
}
.modaldialogueContent > section + section{
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--modaldialoguebordercolor);
}
.modaldialogueContent section{
	margin: 1em 0 0;
}
.modaldialogueContent p,
.modaldialogueContent table{
	margin: 1em 0;
}
.modaldialogueContent section:first-child,
.modaldialogueContent p:first-child,
.modaldialogueContent table:first-child{
	margin-top: 0;
}
.modaldialogueContent section:last-child,
.modaldialogueContent p:last-child,
.modaldialogueContent table:last-child{
	margin-bottom: 0;
}
.modaldialogueContent p > small:only-child{
	font-size: 0.9em;
	display: block;
}
.modaldialogueContent a{
	text-decoration: underline;
	color: var(--modaldialoguelinkcolour);
}
.mouseUI .modaldialogueContent a[href]:hover{
	color: var(--modaldialoguelinkhovercolour);
}
.mouseUI .modaldialogueContent a[href]:active{
	color: var(--modaldialoguelinkactivecolour);
}