.offcanvas{position:fixed;opacity:1;transition:width .3s ease-out,height .3s ease-out;overflow:hidden;z-index:1032;text-align:left}.offcanvas.left{left:0;top:0;width:420px;transform:translateX(-100%)}.offcanvas.right{right:0;top:0;width:420px;transform:translateX(100%)}.offcanvas.top{top:0;height:300px;transform:translateY(-100%)}.offcanvas.bottom{bottom:0;height:300px;transform:translateY(100%)}.offcanvas.active.left,.offcanvas.active.right{height:100%;overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;transform:translateX(0)}.offcanvas.active.bottom,.offcanvas.active.top{width:100%;transform:translateY(0)}.offcanvas-header{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid;display:flex;flex-direction:row;justify-content:space-between}.offcanvas-close{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center center no-repeat;width:1.2rem;height:1.2rem;border:0;opacity:.8;cursor:pointer}.offcanvas-close:hover{opacity:1}.offcanvas-dark{background-color:#111;color:#fff}.offcanvas-dark .offcanvas-close{filter:invert(1) grayscale(100%) brightness(200%)}.offcanvas-dark .offcanvas-header{border-color:rgba(255,255,255,.2)}.offcanvas-dark .offcanvas-title{background-color:transparent;color:#fff}.offcanvas-light{background-color:#f7f7f7;color:#000}.offcanvas-light .offcanvas-header{border-color:rgba(0,0,0,.2)}.offcanvas-light .offcanvas-title{background-color:transparent;color:#000}@media (min-width:1200px){.offcanvas.active.left,.offcanvas.active.right{width:420px}}@media (max-width:1200px){.offcanvas.active.left ul li,.offcanvas.active.right ul li{font-size:.975rem}}@media (max-width:768px){.offcanvas.active.left ul li,.offcanvas.active.right ul li{font-size:.9rem}}