body{margin:0;font-family:Arial,sans-serif}.offcanvas-toggle{padding:20px 30px 20px 0;font-size:26px;color:black;border:none;border-radius:4px}.offcanvas-panel{position:fixed;top:0;left:-100%;width:70%;height:100vh;background-color:#fff;box-shadow:2px 0 5px rgba(0,0,0,.2);transition:left .3s ease;z-index:11500;overflow-y:scroll}.offcanvas-panel::-webkit-scrollbar{width:9px;height:8px}.offcanvas-panel::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:10px}.offcanvas-panel::-webkit-scrollbar-thumb{background-color:gray;border-radius:10px;border-right:2px solid white}.offcanvas-content{padding:20px}.offcanvas-panel.open{left:0}.close-btn{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px}.offcanvas-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1045}