a > *,
button > * { pointer-events: none;}

body:not(.wp-admin) > * { transition: opacity 175ms ease-in;}
body:not(.wp-admin).-trigger-popup { overflow: hidden; background-color: #000!important; pointer-events: none!important; }
body:not(.wp-admin).-trigger-popup > *:not(dialog) { pointer-events: none!important; opacity: 0.5!important; background-color: transparent!important;}

dialog[aria-label="popupkit"] {
	/* Reset global button markup */
	-webkit-appearance: none; 
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none; 
	appearance: none;
	/* Remove border radius default for all devices */
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	/* Remove text shadow default for all devices */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	/* Default bounding box behaviour (include padding in width) */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
	/* Reset dom to neutrals */
	display: inline-block; background-color: transparent; color: inherit; border: transparent 0px solid;
	font-family:inherit; font-size: inherit; line-height: inherit; text-decoration: none; outline: none;
	padding: 0px; margin:0px; 
	/* Misc */
	position: fixed; pointer-events:none; top:100%; left:50%; transform: translate(-50%,0%); opacity: 0;
	background-color: rgba(0,0,0,0.9); border-radius:3px; color:#fff; padding: 0px; text-align: center;
	transition: all 175ms ease-in-out; z-index: 999999; min-width:256px; width: 100%; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow: hidden; overflow-x: hidden; overflow-y: auto;
}
dialog[aria-label="popupkit"].-show {pointer-events:all; top:50%; left:50%; transform: translate(-50%,-50%); opacity: 1;}

dialog[aria-label="popupkit"] > *:not(header) { float: none; clear: both; z-index: 0; }
dialog[aria-label="popupkit"] > header { z-index: 10; position: sticky; position: -webkit-sticky; left:0px; right:0px; top:0px; height:0px; }
dialog[aria-label="popupkit"] > header > button {
	/* Reset global button markup */
	-webkit-appearance: none; 
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none; 
	appearance: none;
	/* Remove border radius default for all devices */
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	/* Remove text shadow default for all devices */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	/* Default bounding box behaviour (include padding in width) */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
	/* Reset dom to neutrals */
	display: inline-block; background-color: transparent; color: inherit; border: transparent 0px solid;
	font-family:inherit; font-size: inherit; line-height: inherit; text-decoration: none; outline: none;
	padding: 0px; margin:0px;
	/* Misc */
	position: absolute; right:0px; top:0px; white-space: nowrap; background-color: rgba(0,0,0,0.1);
	font-size: 16px; font-weight: 700; padding: 10px 15px;  margin-top: 10px; margin-right: 10px; float: right; border-radius:3px; transition: all 175ms ease-in;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.2); -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.2); box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.2);
}
dialog[aria-label="popupkit"] > header > button:hover { 
	cursor: pointer; background-color: rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
	}
dialog[aria-label="popupkit"] > header > button > i { display: inline-block; width: 16px; height:16px;  vertical-align: middle;}
dialog[aria-label="popupkit"] > header > button > i svg { height:16px;}
dialog[aria-label="popupkit"] > header > button > span { display: inline-block; vertical-align: middle; line-height: 16px; margin-left: 5px;}

@media all and (min-width: 768px) {
	dialog[aria-label="popupkit"] { min-width: 512px; width: auto; }
}