::-webkit-scrollbar {
  width: 15px;
  background: linear-gradient(to right, #e3e3e3 5%, #ededed 20%, #f2f2f2 100%);
}

::-webkit-scrollbar-track {
  border: 1px solid #eaeaea;
  border-bottom: 0px;
  border-top: 0px;
  background: linear-gradient(to right, #e3e3e3 5%, #ededed 20%, #f2f2f2 100%);
}

::-webkit-scrollbar-thumb {
 background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'><defs><linearGradient id='grad1' x1='0%25' x2='100%25'><stop offset='0%25' stop-color='%23303030'/><stop offset='100%25' stop-color='%23cccccc'/></linearGradient></defs><g fill='url(%23grad1)' stroke='%23f5f5f580' stroke-width='0.5' ><rect x='3' y='0' width='6' height='1.2' rx='0'/><rect x='3' y='2.2' width='6' height='1.2' rx='0'/><rect x='3' y='4.4' width='6' height='1.2' rx='0'/></g></svg>"), linear-gradient(to right, #f5f5f5 0%, #e9e9eb 49%, #d9dadc 50%, #c0c0c4 100%);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.8px #e3e3e3, inset 0 0 0 1.6px #979797, inset 0 0 0 2.4px #f5f5f580;
}

::-webkit-scrollbar-thumb:hover {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'><defs><linearGradient id='grad1' x1='0%25' x2='100%25'><stop offset='0%25' stop-color='%23303030'/><stop offset='100%25' stop-color='%23cccccc'/></linearGradient></defs><g fill='url(%23grad1)' stroke='%23f5f5f580' stroke-width='0.5' ><rect x='3' y='0' width='6' height='1.2' rx='0'/><rect x='3' y='2.2' width='6' height='1.2' rx='0'/><rect x='3' y='4.4' width='6' height='1.2' rx='0'/></g></svg>"), linear-gradient(to right, #f0faff 0%, #e4f4fe 49%, #c4e8fc 50%, #b4def6 100%);
  box-shadow: inset 0 0 0 0.8px #e3e3e3, inset 0 0 0 1.6px #5292c3, inset 0 0 0 2.4px #f0faff, inset 0 0 0 3.2px #00000010;
}

::-webkit-scrollbar:hover{
  background: linear-gradient(transparent calc(0% + 14.4px), #979797 calc(0% + 14.4px), #979797 calc(100% - 14.4px), transparent calc(100% - 14.4px)), linear-gradient(to right, #f5f5f5 0%, #e9e9eb 49%, #d9dadc 50%, #c0c0c4 100%);
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.8px #e3e3e3, inset 0 0 0 1.6px #979797, inset 0 0 0 2.4px #f5f5f580;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-3.5 -3 16 16'><linearGradient id='grad1' x1='0%' x2='100%' y1='0%' y2='100%'><stop offset='0%' stop-color='%23303030' /><stop offset='100%' stop-color='%23cccccc' /></linearGradient><path d='M1 6 L4.5 2 L8 6 Z' fill='url(%23grad1)'/></svg>"), linear-gradient(to right, #f0faff 0%, #e4f4fe 49%, #c4e8fc 50%, #b4def6 100%);
  box-shadow: inset 0 0 0 0.8px #5292c3, inset 0 0 0 1.6px #f0faff, inset 0 0 0 2.4px #00000010;
  border-radius: 2px;
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-3.5 -3 16 16'><linearGradient id='grad1' x1='0%' x2='100%' y1='0%' y2='100%'><stop offset='0%' stop-color='%23303030' /><stop offset='100%' stop-color='%23cccccc' /></linearGradient><path d='M1 3 L8 3 L4.5 7 Z' fill='url(%23grad1)'/></svg>"), linear-gradient(to right, #f0faff 0%, #e4f4fe 49%, #c4e8fc 50%, #b4def6 100%);
  box-shadow: inset 0 0 0 1px #5292c3, inset 0 0 0 2px #f0faff, inset 0 0 0 3px #00000010;
  border-radius: 2px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-3.5 -3 16 16'><linearGradient id='grad1' x1='0%' x2='100%' y1='0%' y2='100%'><stop offset='0%' stop-color='%23303030' /><stop offset='100%' stop-color='%23cccccc' /></linearGradient><path d='M1 6 L4.5 2 L8 6 Z' fill='url(%23grad1)'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #eaeaea;
  border-bottom: 0px;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='-3.5 -3 16 16'><linearGradient id='grad1' x1='0%' x2='100%' y1='0%' y2='100%'><stop offset='0%' stop-color='%23303030' /><stop offset='100%' stop-color='%23cccccc' /></linearGradient><path d='M1 3 L8 3 L4.5 7 Z' fill='url(%23grad1)'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #eaeaea;
  border-top: 0px;
}