dialog{
  position:fixed;
  left:0; right:0;
  width:-moz-fit-content;
  width:-webkit-fit-content;
  width:fit-content;
  /*min-width:22.5rem;
	max-width:90%;*/
  height:-moz-fit-content;
  height:-webkit-fit-content;
  height:fit-content;
  margin:auto;
  border:solid;
  background:#fff;
  color:black;
  display:block;
  box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  border:0;
  outline:0;
  padding:2rem}

dialog::backdrop{
  background:rgba(9,30,39,0.75)}

dialog .close{
  display:block;
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  fill:black;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="black"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
  background-repeat:no-repeat;
  background-position:0 0;
  background-color:transparent}
dialog .close:focus, dialog .close:active{
  box-shadow:none;
  border:none;
  outline:none}

dialog:not([open]){
  display:none}

dialog + .backdrop{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  background:rgba(0,0,0,0.5)}

._dialog_overlay{
  position:fixed;
  top:0; right:0; bottom:0; left:0}

dialog.polyfilled{
  position:fixed;
  top:50%;
  transform:translate(0, -50%)}