/* Off Canvas Panel */
.offcanvas-panel {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  max-width: 330px; /* Set the maximum width to 300px */
  height: 100%;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  overflow: hidden; /* Add overflow: hidden */
}

.offcanvas-panel .panel-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out 0s;
}

.offcanvas-panel.panel-on {
  visibility: visible;
  opacity: 1;
  overflow-y: auto; /* Add overflow-y: auto */
}

.offcanvas-panel.panel-on .panel-overlay {
  visibility: visible;
  opacity: 0.4;
}

.offcanvas-panel .offcanvas-panel-inner {
  width: 100%; /* Set the width to 100% */
  max-width: 100%; /* Set the maximum width to 100% */
  height: 100%;
  padding: 30px;
  position: relative;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: all 0.3s ease-out 0s;
  background-color: #ffffff; /* Add a background color */
  box-sizing: border-box; /* Add box-sizing property */
  overflow: hidden; /* Add overflow: hidden */
}

.offcanvas-panel.panel-on .offcanvas-panel-inner {
  visibility: visible;
  opacity: 1;
  margin-right: 0;
  transition: all 0.4s ease-out 0s;
  overflow: auto; /* Add overflow: auto */
}