.slideout-panel {
  position: fixed;
  top: 0;
  left: -300px; /* hidden offscreen */
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  transition: left 0.3s ease;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.slideout-panel.active {
  left: 0; /* slide in */
}

#open-slideout {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1100;
  padding: 10px 20px;
  background-color: #3399aa;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#close-slideout {
  background: #555;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}