.dialog-on {overflow:hidden;}
.dialog, .dialog * {box-sizing:border-box;}
.dialog {position:fixed;left:0;top:0;right:0;bottom:0;overflow:auto;padding:20px;opacity:1;z-index:65001;display:none;}
/*.dialog:before {content:"";display:block;opacity:0.5;background:#000;position:fixed;left:0;top:0;right:0;bottom:0;}*/
.dialog-body {display:table;background:#fff;margin:0 auto;position:relative;z-index:65002;max-width:90%;min-width:280px;box-shadow:#555 0 0 50px;}
.dialog.on {display:block;background:rgba(0,0,0,0.5);}

.dialog-body {padding:30px;}
.dialog-body .header {border-bottom:solid 1px #ddd;padding-bottom:10px;margin-bottom:10px;}
.dialog-body .footer {padding-top:10px;margin-top:10px;clear:both;}
.dialog-body a.close {position:absolute;top:0;right:0;display:block;width:30px;height:30px;line-height:30px;min-height:30px;background:#000;text-align:center;font-size:16px;color:#fff;cursor:pointer;text-decoration:none;user-select:none;padding:0;margin:0;}
.dialog-body a.close:focus,
.dialog-body a.close:hover {background-color:#a9251a;text-decoration:none;}
.dialog-body .help {background:#efefef;color:#333;font-size:0.9em;padding:1em;text-align:justify;margin:8px 0;clear:both;}
.dialog-body .help:after {content:"";clear:both;display:table;}

.dialog.Fade .dialog-body {transform:translateY(-100%);opacity:0;}
.dialog.Fade.left .dialog-body {transform:translateX(-100%);}
.dialog.Fade.right .dialog-body {transform:translateX(100%);}
.dialog.Fade.bottom .dialog-body {transform:translateY(100%);}
.dialog.Fade.fix-left .dialog-body {transform:translateX(-100%);}
.dialog.Fade.fix-right .dialog-body {transform:translateX(100%);}
.dialog.Fade .dialog-body.Fade-in {transform:none;opacity:1;}

.dialog.fix-left {padding:0;}
.dialog.fix-left .dialog-body {margin-left:0;height:100%;overflow-y:auto;/*min-width:1%;*/}
.dialog.fix-right {padding:0;}
.dialog.fix-right .dialog-body {margin-right:0;height:100%;overflow-y:auto;/*min-width:1%;*/}

@media (min-width:641px) {
    .dialog .fx.inline {width:auto;}
    .dialog .fx.inline .fx-l,
    .dialog .fx.inline .fx-i,
    .dialog .fx.inline .fx-b {width:auto;}
}

@media (max-width:640px) {
    .dialog .dialog-body {/*min-width:100% !important;*/}
    .dialog.fix-left .dialog-body,
    .dialog.fix-right .dialog-body {/*min-width:1% !important;*/}
    .dialog .fx.inline,
    .dialog .fx.inline .fx-i {width:100%;}
    .dialog .gx *[class*="gx-"] {width:100% !important;float:none;}
}