.loading-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.8); /* Adjust the background color and opacity as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff; /* Adjust the text color as needed */
  font-size: 24px;
  z-index: 999; /* Ensure the panel is on top of other elements */
  animation: wipeAnimation 1s ease-out forwards;
}

.loading-panel.out {
  animation-direction: reverse; /* Reverse the wipe animation for inner pages */
}

@keyframes wipeAnimation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%); /* Move the panel off-screen */
  }
}