:root{--off-canvas-width:300px}html,body,.off-canvas-wrapper{width:100%;height:100%}.off-canvas-wrapper{overflow-x:hidden}.off-canvas-wrapper .off-canvas{height:100%;min-height:100%;display:flex;align-items:stretch;box-sizing:border-box;width:calc(100% + var(--off-canvas-width));margin-left:calc(var(--off-canvas-width) * -1);transition:margin-left 300ms ease-in-out}.off-canvas-wrapper .off-canvas .off-canvas-nav{width:var(--off-canvas-width);height:100%;min-height:100%;padding:20px;flex-grow:0;flex-shrink:0;overflow-y:auto;box-sizing:border-box;box-shadow:-10px 0 10px -5px rgb(0 0 0 / .3) inset}.off-canvas-wrapper .off-canvas .off-canvas-content:not(.off-canvas-no-close).overlay::after{background-color:#fff0;transition:background-color 300ms ease-in-out,width 0s 300ms,height 0s 300ms}.off-canvas-wrapper .off-canvas.active .off-canvas-content:not(.off-canvas-no-close).overlay::after{background-color:rgb(0 0 0 / .5);transition:background-color 300ms ease-in-out}.off-canvas-wrapper .off-canvas .off-canvas-content:not(.off-canvas-no-close)::after{content:"";width:0;height:0;display:block;position:absolute;top:0;left:0;z-index:10000}.off-canvas-wrapper .off-canvas.active .off-canvas-content:not(.off-canvas-no-close)::after{background-color:#fff0;width:100%;height:100%}.off-canvas-wrapper .off-canvas.active{margin-left:0}.off-canvas-wrapper .off-canvas:not(.off-canvas-floating) .off-canvas-content{overflow:auto;position:relative;flex-grow:1}.off-canvas-floating{display:none}.off-canvas-floating.active{height:100%;min-height:100%;display:flex;align-items:stretch;box-sizing:border-box;width:95%;height:100vh;position:fixed;top:0;left:auto;transition:left 300ms ease-in-out;z-index:10001;background-color:#fff}@media (min-width:992px){.off-canvas-floating{left:calc(var(--off-canvas-width) * -1)}}.off-canvas-floating .off-canvas-nav{width:100%;height:100%;min-height:100%;flex-grow:0;flex-shrink:0;box-sizing:border-box}@media (max-width:992px){.off-canvas-floating .off-canvas-nav{overflow-y:auto}}.off-canvas-floating+.off-canvas-content:not(.off-canvas-no-close).overlay{background-color:#fff0;transition:background-color 300ms ease-in-out,width 0s 300ms,height 0s 300ms}.off-canvas-floating.active+.off-canvas-content:not(.off-canvas-no-close).overlay{background-color:rgb(0 0 0 / .5);transition:background-color 300ms ease-in-out}.off-canvas-floating+.off-canvas-content:not(.off-canvas-no-close){content:"";width:0;height:0;display:block;position:fixed;top:0;left:0;z-index:10000}.off-canvas-floating.active+.off-canvas-content:not(.off-canvas-no-close){background-color:#fff0;width:100vw;height:100%}.off-canvas-floating.active{right:0}.off-canvas-floating+.off-canvas-content{position:fixed;top:0}