.qg-box {
    display:flex;
    flex-flow:column;
}
.qg-box.qg-box { /* stronger */
    padding:0;
}
.qg-box > .-head {
    flex:0 0 auto;
    display:flex;
    background:#000;
    color:#fff;
    padding:10px 20px;
}
.qg-box > .-head > .-title {
	flex:1;
}
.qg-box > .-body {
    flex:auto;
    overflow:auto;
    padding:20px;
}


.qg-dialog {
    display:none;
	position:fixed;
    flex-flow:column;
	box-sizing:border-box;
	overflow:auto;
	background:#fff;
    max-width:100vw;
    max-height:100vh;
    padding: 1em;

    top:25%;
    left:50%;
    transform:translateY(-25%) translateX(-50%);

    /* if browser support *
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    /**/
}



/*.qg-dialog[open], */
.qg-dialog.c1-focusIn {
	display:block;
    display:flex;
}
.qg-dialog:focus-within {
    display:block;
}