.offcanvas{
    position:fixed;
    bottom:0;
    z-index:99999999;
    display:flex;
    flex-direction:column;
    max-width:100%;
    visibility:hidden;
    background-color:#fff;
    background-clip:padding-box;
    outline:0;
    transition:transform .3s ease-in-out
}
@media (prefers-reduced-motion:reduce){
    .offcanvas{
        transition:none
    }
}
.offcanvas-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 1rem
}
.offcanvas-header .btn-close{
    padding:.5rem .5rem;
    margin-top:-.5rem;
    margin-right:-.5rem;
    margin-bottom:-.5rem
}
.offcanvas-title{
    margin-bottom:0;
    line-height:1.5
}
.offcanvas-body{
    flex-grow:1;
    padding:1rem 1rem;
    overflow-y:auto
}
.offcanvas-start{
    top:0;
    left:0;
    width:400px;
    border-right:1px solid rgba(0,0,0,.2);
    transform:translateX(-100%)
}
.offcanvas-end{
    top:0;
    right:0;
    width:400px;
    border-left:1px solid rgba(0,0,0,.2);
    transform:translateX(100%)
}
.offcanvas-top{
    top:0;
    right:0;
    left:0;
    height:30vh;
    max-height:100%;
    border-bottom:1px solid rgba(0,0,0,.2);
    transform:translateY(-100%)
}
.offcanvas-bottom{
    right:0;
    left:0;
    height:30vh;
    max-height:100%;
    border-top:1px solid rgba(0,0,0,.2);
    transform:translateY(100%)
}
.offcanvas.show{
    transform:none
}