body {
  display: flex;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Sidebar Default (Collapsed) */
.sidebar {
  width: 60px;
  height: 100%;
  background: #2c3e50;
  position: fixed;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Sidebar Items */
.sidebar-content {
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  display: flex; /* Allows image + text alignment */
  align-items: center;
  width: 100%; 
  padding: 10px; 
  text-decoration: none; 
  cursor: pointer; 
  color: white;
}

.sidebar-item:hover {
  background-color: rgb(204, 98, 60); /* Highlight when hovered */
}

/* Image Default */
.sidebar-item img, .sidebar-item i {
  text-align: center;
  align-content: center;
  animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1s;
}
.sidebar-item img {
  width: 40px;
  height: 40px;
}
.sidebar-item i {
  width: 35px;
  height: 35px;
}

/* Hide text when collapsed */
.sidebar-text {
  color: white;
  margin-left: 10px;
  font-size: 16px;
  display: none;
}

/* Expanded Sidebar */
.sidebar:hover {
  width: 200px;
}

/* Show text when expanded */
.sidebar:hover .sidebar-text {
  display: inline-block;
  font-size: large;
}

/* Main Content */
.main-content {
  margin-left: 60px;
  padding: 20px;
  width: 100%;
}

.spinner {
  --clr: rgb(0, 113, 128);
  --gap: 1px;
    /* gap between each circle */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
}

.spinner span {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--clr);
  opacity: 0;
}

.spinner span:nth-child(1) {
  animation: fade 1s ease-in-out infinite;
}

.spinner span:nth-child(2) {
  animation: fade 1s ease-in-out 0.1s infinite;
}

.spinner span:nth-child(3) {
  animation: fade 1s ease-in-out 0.2s infinite;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}