.offcanvas {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 300px;
	background: #fff;
	z-index: 1039;
	overflow-y: auto;
	transition: transform .3s ease;
	box-shadow: 0 0 15px rgba(0,0,0,.2);
}

.offcanvas-left {
	left: 0;
	transform: translateX(-100%);
}

.offcanvas-right {
	right: 0;
	transform: translateX(100%);
}

.offcanvas.show {
	transform: translateX(0);
}

.offcanvas-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 1038;
}

.offcanvas .offcanvas-header {
	  position: sticky;
	  top: 0;
	  background-color: #fff;
	  padding: 15px;
	  z-index:1;
}
.offcanvas .offcanvas-title {
	margin:0;
}
.offcanvas .offcanvas-subtitle {
	flex-grow:1;
}

body.offcanvas-open {
	overflow: hidden;
}