.loading {
  display: none;
}

.loadBorder {
  border: 0px solid transparent;
  animation-name: loadingborder;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loadingborder {
  20% {
    border-top: 4px solid #000;
  }
  40% {
    border-top: 0px solid #000;
    border-right: 4px solid #000;
  }
  60% {
    border-right: 0px solid #000;
    border-bottom: 4px solid #000;
  }
  80% {
    border-bottom: 0px solid #000;
    border-left: 4px solid #000;
  }
  100% {
    border: 4px solid #000;
  }
}

@media (max-width: 1024px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  #sidebar.active {
    transform: translateX(0);
  }
}