.scrollbar.show { opacity: 1; }

.scrollbar {
  position: absolute;
  top: 50%;
  right: 21px;
  height: 60%;
  width: 3px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  opacity: 0;


	transition: all 250ms ease-in-out;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.scrollbar {
  position: absolute;
  top: 50%;
  right: 20px;
  height: 60%;
  width: 4px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;

	border-radius: 10px;
	background: #6E54A3;
}

.show .handle { cursor: pointer; }

.handle {
	position: absolute; top: 0; left: -8px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 50%;

	border-radius: 20px;
	border: 3px solid #6E54A3;

	
	box-sizing: border-box;
}









#open_egg_02 .bar { background: #C76464; }
#open_egg_02 .handle { border: 3px solid #C76464; }


#open_egg_03 .bar { background: #E88F5C; }
#open_egg_03 .handle { border: 3px solid #E88F5C ; }


#open_egg_04 .bar { background: #C7AC3CCC; }
#open_egg_04 .handle { border: 3px solid #C7AC3CCC; }


#open_egg_05 .bar { background: #7E9265; }
#open_egg_05 .handle { border: 3px solid #7E9265; }


#open_egg_06 .bar { background: #507FB7; }
#open_egg_06 .handle { border: 3px solid #507FB7; }


#open_egg_07  .bar { background: #485B78; }
#open_egg_07  .handle { border: 3px solid #485B78; }