* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   min-height: 100vh;
   overflow-x: hidden;
}

#sidebar {
   min-width: 250px;
   max-width: 250px;
   min-height: 100vh;
   transition: all 0.3s;
}

#sidebar.collapsed {
   margin-left: -250px;
}

@media (max-width: 768px) {
   #sidebar {
      margin-left: -250px;
   }
   #sidebar.collapsed {
      margin-left: 0;
   }
}

.sidebar-link {
   padding: 10px 15px;
   display: block;
   color: #ffffff;
   text-decoration: none;
   transition: all 0.3s;
}

.sidebar-link:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-link.active {
   background-color: rgba(255, 255, 255, 0.2);
}

.content {
   width: 100%;
   min-height: calc(100vh - 56px);
   padding: 20px;
}