html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

#custom-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  user-select: none;
}

#custom-scrollbar .cs-btn {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 1px solid #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
  cursor: pointer;
  box-sizing: border-box;
}

#custom-scrollbar .cs-btn:active {
  background-color: #d9d9d9;
}

#custom-scrollbar .cs-btn-up {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='5,1 9,8 1,8' fill='black'/></svg>");
}

#custom-scrollbar .cs-btn-down {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='1,2 9,2 5,9' fill='black'/></svg>");
}

#custom-scrollbar .cs-track {
  position: relative;
  flex: 1 1 auto;
  background-color: #d9d9d9;
  background-image: radial-gradient(#000 1px, transparent 0);
  background-size: 3px 3px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  cursor: pointer;
}

#custom-scrollbar .cs-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 16px;
  background-color: #ffffff;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  box-sizing: border-box;
  cursor: grab;
}

#custom-scrollbar .cs-thumb:active {
  cursor: grabbing;
}