.sidePanel {
  z-index: 98;

  position: fixed;
  overflow-x: hidden; /* Prevent horizontal overflow */
  padding: 0;
  font-size: 1.2em;
  background-color: #1C222E; /* Set the default background color */
  transition: left 0.6s ease-in-out, right  0.6s ease-in-out,
              top  0.6s ease-in-out, bottom 0.6s ease-in-out; /* Add transitions for all sides */
}
.sidePanel.top {
  left: 0;
  right: 0;
  top: -270px; /* Initially hidden at the top */
  height: 270px;
}
.sidePanel.bottom {
  left: 0;
  right: 0;
  bottom: -570px; /* Initially hidden at the bottom */
  height: 570px;
  font-size: 1.25em;
  overflow-y: scroll;
}
.sidePanel.left {
  top: 0;
  left: -330px; /* Initially hidden to the left */
  bottom: 0;
  width: 330px;
  overflow-y: hidden; /* or overflow-y: scroll gives one the y-scroll bar on the element; */
  overflow-x: hidden;
}
.sidePanel.right {
  top: 0;
  right: -330px; /* Initially hidden to the right (adjust width if needed) */
  bottom: 0;
  width: 330px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.sidePanel.top.open    {visibility: visible; top:    0; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); }
.sidePanel.bottom.open {visibility: visible; bottom: 0; box-shadow: 0 -8px 10px rgba(0, 0, 0, 0.3); }
.sidePanel.left.open   {visibility: visible; left:   0; box-shadow: 8px 0 10px rgba(0, 0, 0, 0.3); }
.sidePanel.right.open  {visibility: visible; right:  0; box-shadow: -8px 0 10px rgba(0, 0, 0, 0.3); }

/*#shoppingPanel.right.open  {visibility: visible; right:  0; }*/

/*#shoppingPanel{*/
/*  padding: 20px;*/
/*  top: 0;*/
/*  right: -390px; !* Initially hidden to the right (adjust width if needed) *!*/
/*  bottom: 0;*/
/*  width: 350px;*/
/*  overflow-y: scroll;*/
/*  overflow-x: hidden;*/
/*  transition: left 0.6s ease-in-out, right  0.6s ease-in-out;*/
/*}*/

.top-icons {
  width: 100%;
  display: flex;
  justify-content: space-between; /* Distribute icons evenly */
  align-items: center;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}

.top-icons i,
.top-icons svg {
  --primary-color: white;
  --fa-secondary-color: #fdfdfd;
  --fa-secondary-opacity: 0.3;
}
