app.css

::-webkit-scrollbar {
  width: 8px; /* scrollbar width */
  height: 8px; /* horizontal scrollbar height */
}

::-webkit-scrollbar-track {
  background: transparent; /* track background */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5); /* thumb color */
  border-radius: 10px; /* rounded ends */
  border: 2px solid transparent; /* padding around thumb */
  background-clip: content-box; /* ensures border doesn’t overlap thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 100, 100, 0.7);
}

.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari + Chrome */
}