.offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl, .offcanvas {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
}
@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition); 
	} 
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-sm {
      transition: none; 
	}
}

@media (max-width: 575.98px) {
    .offcanvas-sm.offcanvas-start {
      top: 0;
      left: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(-100%); 
	}
    .offcanvas-sm.offcanvas-end {
      top: 0;
      right: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(100%); 
	}
    .offcanvas-sm.offcanvas-top {
      top: 0;
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(-100%); 
	}
    .offcanvas-sm.offcanvas-bottom {
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(100%); 
	}
    .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
      transform: none; 
	}
    .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
      visibility: visible; 
	} 
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    background-color: transparent !important; }
    .offcanvas-sm .offcanvas-header {
      display: none; }
    .offcanvas-sm .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
      background-color: transparent !important; } }


@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition); } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-md {
      transition: none; 
	 }
}

@media (max-width: 767.98px) {
    .offcanvas-md.offcanvas-start {
      top: 0;
      left: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(-100%); 
	}
    .offcanvas-md.offcanvas-end {
      top: 0;
      right: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(100%); 
	}
    .offcanvas-md.offcanvas-top {
      top: 0;
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(-100%); 
	}
    .offcanvas-md.offcanvas-bottom {
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(100%); 
	}
    .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
      transform: none; 
	}
    .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
      visibility: visible; 
	} 
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
	}
    .offcanvas-md .offcanvas-header {
      display: none; 
	}
    .offcanvas-md .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
	} 
}

@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition); 
	} 
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-lg {
      transition: none; 
	  } 
}

@media (max-width: 991.98px) {
    .offcanvas-lg.offcanvas-start {
      top: 0;
      left: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(-100%); 
	}
    .offcanvas-lg.offcanvas-end {
      top: 0;
      right: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(100%); 
	}
    .offcanvas-lg.offcanvas-top {
      top: 0;
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(-100%); 
	}
    .offcanvas-lg.offcanvas-bottom {
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(100%); 
	}
    .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
      transform: none; 
	}
    .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
      visibility: visible; } 
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
	}
    .offcanvas-lg .offcanvas-header {
      display: none; 
	}
    .offcanvas-lg .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
	} 
}

@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition); 
	} 
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-xl {
      transition: none; 
	} 
}

@media (max-width: 1199.98px) {
    .offcanvas-xl.offcanvas-start {
      top: 0;
      left: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(-100%); 
	}
    .offcanvas-xl.offcanvas-end {
      top: 0;
      right: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(100%); 
	}
    .offcanvas-xl.offcanvas-top {
      top: 0;
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(-100%); 
	}
    .offcanvas-xl.offcanvas-bottom {
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(100%); 
	}
    .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
      transform: none; 
	}
    .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
      visibility: visible; 
	} 
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    background-color: transparent !important; 
	}
    .offcanvas-xl .offcanvas-header {
      display: none; 
	}
    .offcanvas-xl .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
      background-color: transparent !important; 
	} 
}

@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition); 
	} 
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-xxl {
      transition: none; 
	} 
}

@media (max-width: 1399.98px) {
    .offcanvas-xxl.offcanvas-start {
      top: 0;
      left: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(-100%); 
	}
    .offcanvas-xxl.offcanvas-end {
      top: 0;
      right: 0;
      width: var(--bs-offcanvas-width);
      transform: translateX(100%); 
	}
    .offcanvas-xxl.offcanvas-top {
      top: 0;
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(-100%); 
	}
    .offcanvas-xxl.offcanvas-bottom {
      right: 0;
      left: 0;
      height: var(--bs-offcanvas-height);
      max-height: 100%;
      transform: translateY(100%); 
	}
    .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
      transform: none; 
	}
    .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
      visibility: visible; 
	} 
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    background-color: transparent !important; 
	}
    .offcanvas-xxl .offcanvas-header {
      display: none; 
	}
    .offcanvas-xxl .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
      background-color: transparent !important; 
	} 
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  transition: var(--bs-offcanvas-transition); 
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas {
      transition: none; 
	  } 
}

.offcanvas.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    transform: translateX(-100%); 
}

.offcanvas.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    transform: translateX(100%); 
}

.offcanvas.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    transform: translateY(-100%); 
}

.offcanvas.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    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;
}

.offcanvas-backdrop.fade {
    opacity: 0; 
}

.offcanvas-backdrop.show {
    opacity: 0.5; 
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offcanvas-header .btn-close {

}

.offcanvas-title {
  margin-bottom: 0;
 }

.offcanvas-body {
  flex-grow: 1;
  overflow-y: auto; 
}