.dialog-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;overflow:auto;opacity:0;display:none;justify-content:center;align-items:center;transition:opacity .3s cubic-bezier(0,0,.2,1)}.dialog-container.open{display:flex}.dialog-container .backdrop{background-color:#000;opacity:.5;width:100%;height:100%;position:fixed}.dialog-container .offcanvas{min-width:200px;max-width:650px;position:fixed;top:0;right:0;bottom:0;background:#fff;border:1px solid #ccc;padding:25px;display:flex;flex-direction:column;z-index:1000;transform:translateX(100%);transition:transform .3s cubic-bezier(0,0,.2,1)}.dialog-container .offcanvas .dialog-body{flex:1;overflow:auto}.dialog-container .modal{min-width:200px;max-width:650px;max-height:80vh;margin:0 auto;margin-top:2rem;background:#fff;border:1px solid #ccc;padding:25px;display:flex;flex-direction:column;z-index:1000;transform:translateY(15%);transition:transform .3s cubic-bezier(0,0,.2,1);position:static}.dialog-container .modal .dialog-body{flex:1;overflow:auto}.dialog-container[aria-hidden=false]{opacity:1}.dialog-container[aria-hidden=false] .offcanvas{transform:translateX(0)}.dialog-container[aria-hidden=false] .modal{transform:translateY(0)}