dialog {
	border: 4px solid #583e23;
	border-radius: 0px 25px;
	border-image: url(../assets/decoration/border-flowing-simple-thin.svg) 40 fill / 40px / 16px stretch;
	filter: var(--drop-shadow);
	padding: 6px;
	margin: auto;
	/*background-color: #000000CC;*/
	background: none;
}
dialog::backdrop, dialog + .backdrop {
	background-color: #0d080790;
}
dialog > .title {
	margin: 0px 6px;
	border-bottom: 4px solid #583e23;
	border-image: url(../assets/decoration/border-flowing-simple-horiz-bottom.svg) 40 fill / 20px / 8px stretch;
	filter: var(--drop-shadow);
}
dialog > .title > p{
	font-family: dcabold;
	margin: 0px;
	margin-right: 24px;
}
.titledBox > .title > .closeButton {
	transition: all 0.15s cubic-bezier(.25,.46,.45,.94);
	content: "🗙";
	float: right;
	position: relative;
	top: -2px;
}
.titledBox > .title > .closeButton::before{
	content: "🗙";
}
.titledBox > .title > .closeButton:hover{
	color: #e00;
	filter: drop-shadow(0px 0px 1px red);
}

.titledBox > .title > .closeButton:active {
	filter:none;
	color: #a00;
}

.titledBox > .content > .message{
	min-height: 72px;
	display:flex;
	align-items:center;
}

.buttonRowLeft, .buttonRowCenter, .buttonRowRight {
	padding: 0px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 6px;
	margin-bottom: 6px;
}
.buttonRowLeft {
	justify-content: flex-start;
}
.buttonRowCenter {
	justify-content: space-evenly;
}
.buttonRowRight {
	justify-content: flex-end;
}

button {
	transition: outline transform 0.2s ease-in-out;
	font-weight: 900;
	padding: 2px 10px;
	margin: 0px 6px;
	border: 2px solid #583e23;
	border-radius: 0px 6px;
	background-color: #faeadd66
}
button.primary{
	border-color: #893837;
}
button.info{
	border-color: #0000a9;
}
button.success{
	border-color: #2c5323;
}
button.warning{
	border-color: #c7c700;
}
button.danger{
	border-color: #a90000;
}
button:hover, button:focus{
	outline: 1px solid #fff;
}
button:active {
	transform: scale(0.95, 0.95);
}