:root{--oc-top:0px;--oc-right:0px;--oc-left:0px;--oc-width:75vw;--oc-min-width:320px;--oc-background:#fff}.off-canvas{opacity:0;position:fixed;top:var(--oc-top);display:flex;flex-direction:column;bottom:0px;width:max(var(--oc-width),var(--oc-min-width));z-index:999999;background-color:var(--off-canvas-background-color,var(--bg-color));right:calc(-1 * max(var(--oc-width),var(--oc-min-width)));transition:opacity 0.3s,right 0.3s}.off-canvas.is-active{opacity:1;right:0px}.off-canvas .off-canvas__header{display:flex;align-items:center;padding:15px 15px;border-bottom:1px solid var(--border-color);background-color:var(--off-canvas-header-background-color,var(--bg-color))}.off-canvas .off-canvas__header svg{max-width:min(20vw,250px)}.off-canvas .off-canvas__body{padding:15px 15px;flex-grow:1;position:relative}.off-canvas .off-canvas__footer{padding:15px 15px;border-top:1px solid var(--border-color)}.off-canvas .off-canvas-close{margin-left:auto;margin-right:0}.off-canvas .off-canvas__submenu{background-color:#fff;position:absolute;inset:0 0 0 0;z-index:999}