/*=========================================================== Scrollbar 1 ===========================================================*/
#scrollbar {
  scrollbar-color: yellow green;
  scrollbar-width: auto; /*thin;*/
}


/*=========================================================== Scrollbar 2 ===========================================================*/
#scrollbar-1::-webkit-scrollbar {
  width: 10px;
}

#scrollbar-1::-webkit-scrollbar-track {
   background-color: green;
   border-radius: 10px;
  border: 2px solid white;
}

#scrollbar-1::-webkit-scrollbar-thumb {
  background-color: red;
  height: 100px;
   border-radius: 10px;
   border: 2px solid yellow;
}


/*=========================================================== Scrollbar 3 ===========================================================*/
#scrollbar-3::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-3::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
  border-radius: 10px;
}

#scrollbar-3::-webkit-scrollbar-thumb {
	background-color: blue;
  height: 100px;
  border-radius: 10px;
}


/*=========================================================== Scrollbar 4 ===========================================================*/
#scrollbar-4::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-4::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
}

#scrollbar-4::-webkit-scrollbar-thumb {
	background-color: red;
  height: 100px;
	background-image: -webkit-linear-gradient(45deg, green 25%, transparent 25%, transparent 50%, green 50%, green 75%, transparent 75%, transparent);
  border-radius: 10px;
}


/*=========================================================== Scrollbar 5 ===========================================================*/
#scrollbar-5::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-5::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
}

#scrollbar-5::-webkit-scrollbar-thumb {
	background-color: red;
    height: 100px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, Green), color-stop(.5, transparent), to(transparent));
    border-radius: 10px;
}



/*=========================================================== Scrollbar 6 ===========================================================*/
#scrollbar-3::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-6::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
	border-radius: 10px;
}

#scrollbar-6::-webkit-scrollbar-thumb {
	border-radius: 10px;
    height: 100px;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.30, green), color-stop(0.60, orange), color-stop(0.86, red));
    border-radius: 10px;
}



/*=========================================================== Scrollbar 7 ===========================================================*/
#scrollbar-7::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-7::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
}

#scrollbar-7::-webkit-scrollbar-thumb {
	background-color: red;
    height: 100px;
	background-image: linear-gradient(red, yellow, green);
    border-radius: 10px;
}

/*=========================================================== Scrollbar 8 ===========================================================*/
#scrollbar-8::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-8::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
	border-radius: 10px;
}

#scrollbar-8::-webkit-scrollbar-thumb {
	background-color: blue;
	background-image: -webkit-linear-gradient(90deg, green 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent 75%, transparent);
    height: 100px;
	border-radius: 10px;
}



/*=========================================================== Scrollbar 9 ===========================================================*/
#scrollbar-9::-webkit-scrollbar {
	width: 10px;
	background-color: white;
}

#scrollbar-9::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: white;
}

#scrollbar-9::-webkit-scrollbar-thumb {
	background-color: blue;
	background-image: -webkit-linear-gradient(90deg, orange 0%, orange 25%, transparent 100%, orange 75%, transparent);
    height: 100px;
    border-radius: 10px;
}



/*=========================================================== Scrollbar 10 ===========================================================*/
#scrollbar-10::-webkit-scrollbar {
	background-color: white;
    height: 10px;
}

#scrollbar-10::-webkit-scrollbar-track {
    background-image: repeating-linear-gradient(45deg, red 0, red 2px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    border-radius: 10px;
    border: 2px solid white;
}

#scrollbar-10::-webkit-scrollbar-thumb {
	background-color: blue;
	background-image: -webkit-linear-gradient(90deg, orange 0%, orange 25%, transparent 100%, orange 75%, transparent);
    height: 100px;
    border-radius: 10px;
}



/*=========================================================== Scrollbar 11 ===========================================================*/
#scrollbar-11 {
  scrollbar-width: 10px;
  scrollbar-color: transparent transparent;

  &:hover {
    scrollbar-color: blue transparent;
  }

  &:not(:hover)::-webkit-scrollbar-thumb {
    background: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 100px;
    transition: background 0.3s;
    background-color: blue;
	box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
  }
}



/*=========================================================== Scrollbar 12 ===========================================================*/
@supports not selector(::-webkit-scrollbar) {
  #scrollbar-12 {
    scrollbar-width: auto;
    scrollbar-color: ;
  }
}
#scrollbar-12::-webkit-scrollbar {
    width: 15px;
}

#scrollbar-12::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 10px;
    border: 1px solid blue;
}
#scrollbar-12::-webkit-scrollbar-track {
    background-color: white;
}

#scrollbar-12::-webkit-scrollbar-button {
    background-color: red;
    background-repeat: no-repeat;   
    background-size: 100%;
    background-position: center;
    cursor: pointer;
    border-radius: 10px;
 }

#scrollbar-12::-webkit-scrollbar-button:decrement {
    background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png");
 }

#scrollbar-12::-webkit-scrollbar-button:increment {
    background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png"); 
}



/*=========================================================== Scrollbar 14 ===========================================================*/
#scrollbar-13::-webkit-scrollbar {
  width: 10px;
}

#scrollbar-13::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#scrollbar-13::-webkit-scrollbar-thumb {
  background-color: green;
  height: 100px;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
  border-radius: 10px;
}



/*=========================================================== Scrollbar 15 ===========================================================*/
#scrollbar-14::-webkit-scrollbar {
  width: 10px;
}

#scrollbar-14::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#scrollbar-14::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    90deg,
    transparent,
    magenta,
    red,
    yellow,
    limegreen,
    turquoise,
    blue,
    magenta,
    transparent
  );
  border-radius: 50px;
}



/*=========================================================== Scrollbar 16 ===========================================================*/
#scrollbar-15::-webkit-scrollbar {
    width: 10px;
}

#scrollbar-15::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#scrollbar-15::-webkit-scrollbar-thumb {
    background-image: url("https://masumbillah6778.github.io/images/music-thumbnail-10.jpg"),
    linear-gradient(100deg, transparent, transparent);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
    height: 100px;
    border-radius: 10px;
}



/*=========================================================== Scrollbar 17 ===========================================================*/
#scrollbar-17::-webkit-scrollbar {
    width: 10px;
}

#scrollbar-17::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#scrollbar-17::-webkit-scrollbar-thumb {
    background-image: url("https://i.pinimg.com/originals/b5/2e/1b/b52e1bff41122d66aac6133d5718b6fb.gif"),
    linear-gradient(100deg, transparent, transparent);
    background-position: center bottom, center -40px;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    height: 100px;
    border-radius: 10px;
}



/*=========================================================== Scrollbar 18 ===========================================================*/
#scrollbar-18::-webkit-scrollbar {
    width: 10px;
}

#scrollbar-18::-webkit-scrollbar-track {
 background-color: #ddd;
 border: 10px solid #ccc;
}

#scrollbar-18::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, magenta 0%, gold 60%, gold 100%);
  border: 2px solid blue;
  border-radius: 5px;
}

#scrollbar-18::-webkit-scrollbar-track-piece:vertical:start {
  background-color: red;
}

#scrollbar-18::-webkit-scrollbar-track-piece:vertical:end {
  background-color: green;
}

#scrollbar-18::-webkit-scrollbar-button:vertical {
 background-color: blue;
 background-repeat: no-repeat;   
 background-size: 50%;
 background-position: center;
 border: 2px solid red;
}

.container::-webkit-scrollbar-button:vertical:decrement {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z'%3E%3C/path%3E%3C/svg%3E");   
}

.container::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E"); 
}

#scrollbar-18::-webkit-scrollbar-button:hover {
  background-color: red;
}



/*=========================================================== Scrollbar 19 ===========================================================*/
#scrollbar-19::-webkit-scrollbar {
  width: 12px;
}

#scrollbar-19::-webkit-scrollbar-track {
  background: white;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#scrollbar-19::-webkit-scrollbar-thumb {
  background: white;
  background: linear-gradient(red, blue, orange, green);
  border-radius: 10px;
}



/*=========================================================== Scrollbar 20 ===========================================================*/
/*=========================================================== Scrollbar 21 ===========================================================*/
/*=========================================================== Scrollbar 22 ===========================================================*/