.CustomOverlay { display:block;position:fixed;top:0;left:-101vw;opacity:0;width:100vw;height:100vh;overflow:hidden;background-color:rgba(0,0,0, 0.3);z-index:100;/*transition:opacity 1s ease-in-out;*/ }
.CustomOverlay--enable { left:0;opacity:1; }
.CustomModal { display:block;position:fixed;top:0;left:-101vw;width:100vw;height:100%;overflow:hidden;z-index:100;pointer-events:none;/*transition:left .25s ease-in-out;*/ }
.CustomOverlay--enable +
.CustomModal { left:0;display:flex;align-items:center;justify-content:center; }
.CustomDialog { display:flex;flex-direction:column;width:100vw;height:100%;background-color:#fff;position:relative; }
.CustomDialog--open { overflow:hidden; }
.CustomDialog__item { pointer-events:auto; }
.CustomDialog__close { position:absolute;top:10px;right:10px;cursor:pointer; }
.CustomDialog__close:before { display:block;content:'';width:16px;height:16px;background-position:center center;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512' fill='%236c757d' %3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E"); }
.CustomDialog__header-title { line-height:40px;padding:0 .5em;font-size:18px;font-weight:bold;background-color:#17a2b8;color:#fff; }
.CustomDialog__header,
.CustomDialog__footer { display:none; }
.CustomDialog__header--active,
.CustomDialog__footer--active { display:block; }
.CustomDialog__footer-inner { display:flex;align-content:center;justify-content:flex-end;min-height:40px;border-top:1px solid #6c757d;background-clip:border-box;padding:5px; }
.CustomDialog__body { flex-grow:1;overflow-x:hidden;overflow-y:auto; }

@media (min-width: 768px) {
    .CustomDialog { max-width:700px;height:auto;box-shadow:3px 3px 18px #000; }
    .CustomDialog__body { min-height:50px;max-height:60vh;overflow-y:auto; }
}