:root{
	--dialog-border-color: #5353c8;
	--dialog-border-color-tint-1:  #5353c8;
	--dialog-header-color: #5353c8;
	/* font-size: 16pt; */
}
.modal-dialog-container {
	position:fixed;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	background: rgba(0, 0, 0, 0.75);
	z-index: 1004;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin: 0;
	max-width:100vw !important;
	max-height:100vh !important;
}
.modal-dialog-container::backdrop {
	background:  rgba(0, 0, 0, 0.05);
}
dialog.modal-dialog-container:not([open]){
	visibility: hidden;
}

.modal-dialog {
	border	: 1px solid;
	border-color: var(--dialog-border-color);
	display : flex;
	flex-direction: column;
	box-sizing: border-box;
	flex-wrap: nowrap;
	justify-content: flex-start;
	min-width: 20vw;
	min-height:15vh;
	border-radius: 3pt;
	overflow: hidden
	max-width: calc((100% - 6px) - 4em);
	max-height: calc((100% - 6px) - 3em);
}

.modal-dialog > header{
	margin: 0;
	border-bottom:1px solid var(--dialog-border-color);
	background-color:var(--dialog-header-color);
	background-origin: border-box;
	background-position-y: 50%;
	background-position-x: 90%;
	background-size: 130%;
	color: white;
	background-repeat: no-repeat;
	/* padding-left: 0.5em; */
	text-align: left;
	display: flex;
	color: var(--dominant-contrast);
	color: white;
	background-color: var(--primary-shade);
}
.modal-dialog > header * {
    vertical-align: inherit;
}
.modal-dialog > header button, .modal-dialog > header .button{
    background: none;
    border: none;
    color :white;
    flex-basis: 1.5rem;
    flex-grow: 0;
    order:1;
    padding-inline: 0;
    display: block;
    border: none;
    outline: none;
    font-size: inherit;
    /* vertical-align: middle; */
    line-height: 1.4em;
    text-align: center;
    vertical-align: middle;
    /* margin: 0; */
}
.modal-dialog > header::after{
	content:'';
	flex-basis:max-content;
	flex-grow:1;
}
.modal-dialog > header button:hover, .modal-dialog > header .button:hover{
    /* background: #f53d3d; */
}


.modal-dialog > main {
    padding: 2em;
    box-sizing: border-box;
    overflow: auto;
    flex-grow: 2;
    max-height: calc(100vh - 5em);
    /* background-color: white; */
}
.modal-dialog > main > *:first-child{
	margin-top:0;
}

.modal-dialog > main address{
	font-style:normal;
}
.modal-dialog > main address > *{
	margin:0.5em 0;
}

.modal-dialog > main a{
	color: var(--dialog-border-color-shade);
	text-decoration: none;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
.modal-dialog > main a.email::before{
	content:'email:';
}

.modal-dialog > main a.phone::before{
	content:'phone:';
}

.modal-dialog > main a:hover{
	text-decoration: underline;
}
.modal-dialog > main hr{
	border:none;
	border-bottom:1px solid var(--dialog-border-color);
	height:1px;
	margin-top:1em;
}

.modal-dialog > footer{
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: flex-end;
	border-top: 1px solid silver;
	box-sizing: border-box;
	padding: 0.5em;
	flex-wrap: wrap;
}

.modal-dialog > :not(header) :where(button,a.button) {
    line-height: 2em;
    flex-basis:  8em;
    margin-left: 2pt;
    border: 1px solid var(--dialog-border-color);
    border-radius: 3pt;
    outline:none;
    flex-shrink: 1;
}
.modal-dialog > footer button, .modal-dialog > footer a.button{
	flex-shrink: 0;
	flex-basis: fit-content;
	min-width: 6em;
	font-size: 100%;
}
.modal-dialog > :not(header) button[disabled]{
	color: gray;
	border-color: gray;
}
.modal-dialog > :not(header) button:not[disabled]:hover{
	background-color:var(--dialog-border-color-tint-1);
	color:white;
}
.modal-dialog > :not(header) button:focus{
	border: 2px solid var(--dialog-border-color-tint-1);
}