.offcanvas-active{
	overflow:hidden;
}
.screen-overlay {
  height: 100%;
  z-index: 1301;
  position: fixed;
  top: 0;
  right:0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
}
.screen-overlay.show {
  transition:opacity .5s ease, width 0s;
  opacity:1;
  width:100%;
  visibility:visible;
}

.offcanvas{
	transition:all .2s;
  border-radius:0; 
  box-shadow: 0 5px 10px rgba(0,0,0, .2);
	display:flex;
  position: fixed;
  z-index: 1302;
  background-color: #fff;
  visibility: hidden;
}

.offcanvas[data-durum="bottom"]{
  width:100%;
  /* height:350px; */
	transform:translateY(100%);
  bottom: 0;
}
.offcanvas[data-durum="top"]{
  width:100%;
  /* height:350px; */
	transform:translateY(-100%);
  top: 0;
}
.offcanvas[data-durum="right"]{
  width:350px;
  height:100%;
  transform:translateX(100%);
  right:0;
  top:0;
  overflow: auto;
}
.offcanvas[data-durum="left"]{
  width:350px;
  height:100%;
  transform:translateX(-100%);
  left:0;
}

.offcanvas.show{
  visibility: visible;
  transition: transform .2s;
}
.offcanvas.show[data-durum="bottom"]{
  transform: translateY(0);
}
.offcanvas.show[data-durum="top"]{
  transform: translateY(0);
}
.offcanvas.show[data-durum="right"]{
  transform: translateX(0);
}
.offcanvas.show[data-durum="left"]{
  transform: translateX(0);
}

.offcanvas .btn-close{ }

@media (max-width: 375px) {
  .offcanvas[data-durum="right"], .offcanvas[data-durum="left"]{
    width:100%;
  }
}