/* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
:root {
  scrollbar-color: #393F4A #393F4A; /* Firefox thumb color and track color */
  scrollbar-width: thin; /* Firefox track width */
}
/* scrollbar:hover thumb {background-color: rgba(117,193,255,0.7);} */

/* scrollbar width */
::-webkit-scrollbar {
  /* width: 10px;  Chrome and Edge track width */
  cursor: pointer; /* doesn't work as of 2022.05.24 */
}

/* scrollbar track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.0); /* fallback for old browsers */
  background: -webkit-linear-gradient(to right #393F4A, #393F4A, #393F4A, #393F4A); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #393F4A, #393F4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0.1rem;
  transition: all 250ms;
  cursor: pointer; /* doesn't work as of 2022.05.24 */
}

/* scrollbar handle */
::-webkit-scrollbar-thumb {
  background: #393F4A; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right #393F4A, #393F4A, #393F4A, #393F4A); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #393F4A, #393F4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0.1rem;
  transition: all 250ms;
  cursor: pointer; /* doesn't work as of 2022.05.24 */
}

/* scrollbar handle on hover for Chrome and Edge */
panel-list:hover::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: rgba(117,193,255,0.3); /* rgba(62,144,252,1.0); */
  background: linear-gradient(to right, rgba(117,193,255,0.3), rgba(117,193,255,0.3));
}

panel-list:hover {scrollbar-color: rgba(117,193,255,0.3) #393F4A;}