.offcanvas { position: fixed; bottom: 0; z-index: 1045; display: flex; flex-direction: column; max-width: 100%; color: inherit; visibility: hidden; background-color: #ffffff; background-clip: padding-box; outline: 0; transition: transform 0.3s ease-out; }
  .offcanvas.offcanvas-start { top: 0; left: 0; border-right: 1px solid #dadada; transform: translateX(-100%); }

  .offcanvas.offcanvas-end { top: 0; right: 0; border-left: 1px solid #dadada; transform: translateX(100%); }

  .offcanvas.offcanvas-top { top: 0; right: 0; left: 0; max-height: 100%; border-bottom: 1px solid #dadada; transform: translateY(-100%); }

  .offcanvas.offcanvas-bottom { right: 0; left: 0; max-height: 100%; border-top: 1px solid #dadada; transform: translateY(100%); }

  .offcanvas.showing, .offcanvas.show:not(.hiding) { transform: none; }

  .offcanvas.showing, .offcanvas.hiding, .offcanvas.show { visibility: visible; }


.offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; }
  .offcanvas-backdrop.fade { opacity: 0; }
  .offcanvas-backdrop.show { opacity: 0.5; }

.offcanvas-header { display: flex; align-items: center; justify-content:space-between; padding: 4px; }
  .offcanvas-header .btn-close { background: none!important; border: none!important; color: #575555!important; }

.offcanvas-title { color: #304152; text-transform: uppercase; font-weight: bold; margin: 0 5px; font-size: 1.3em; }
.offcanvas-body { flex-grow: 1; padding: 0 4px; overflow-y: auto; }