/* .sidebar */

.sidebar {
  position: fixed;
  background-color: #333;
  color: white;
  z-index: 100;
  padding: 10px;
  
  transition-property: top, left, right, bottom;
  transition-duration: 0.33s;
  transition-timing-function: linear;
  
}

/* .sidebar.<key> */

.sidebar.left {
  width: 150px;
  height: 100%;
  top: 0px;
}

.sidebar.right {
  width: 250px;
  height: 250px;
  top: 100px;
}

.sidebar.top {
  height: 60px;
  width: 100%;
  left: 0px;
  background-color: #ddd;
  color: white;
}

.sidebar.bottom {
  height: 150px;
  width: 100%;
  left: 0px;
}

.sidebar.psx {
  width: 500px;
  height: 250px;
  top: 375px;
  background-color: #888;
  color: white;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}

.sidebar.right2 {
  width: 250px;
  height: 250px;
  top: 650px;
}

/* .sidebar.<key>.closed */

/* NOT YET ADDED */

.sidebar.left.closed {
    left: -150px;
}

.sidebar.right.closed {
    right: -250px;
}

.sidebar.top.closed {
    top: -60px;
}

.sidebar.bottom.closed {
    bottom: -150px;
}

.sidebar.psx.closed {
    right: -500px;
}

.sidebar.right2.closed {
    right: -250px;
}


/* .sidebar.<key>.open */

.sidebar.left.open {
  left: 0px;
}

.sidebar.right.open {
  right: 0px;
}

.sidebar.top.open {
  top: 0px;
}

.sidebar.bottom.open {
  bottom: 0px;
}

.sidebar.psx.open {
  right: 0px;
}

.sidebar.right2.open {
  right: 0px;
}

/* Optional: Styling for the toggle button and main content */
#sidebarCon {
  margin: auto;
}

#sidebarCon button {
  width: 100%;
  height: 100%;
}

.main-content {
  margin-left: 0; /* Default margin for main content */
  transition: margin-left 0.3s ease-in-out;
  padding: 20px;
}

.main-content.shifted {
  margin-left: 250px; /* Shifts main content when sidebar is open */
}

#graph {
  background-color: black;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
  grid-template-rows: repeat(3, 1fr);    /* Creates 3 equal-height rows */
  gap: 2px; /* Adds space between grid items */
  width: 150px; /* Example width for the container */
  height: 150px; /* Example height for the container */
}

.grid-item {
  display: flex; /* Optional: Use flexbox within each item for centering content */
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.bottom .col h3 {
  text-align: center;
}