body {
	font-family: 'Roboto', sans-serif;
	padding-top: 20px;
}


#click-list>li {
    cursor: pointer;
}

#click-list>li:hover {
	background-color: rgba(0,0,0,0.05);
  color: #000;
}

#click-list > li:before{
	content:"";
    background-color: rgb(0, 128, 255);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 60px;
}

#click-list li[data-index='0']:before { opacity: 0.40; }
#click-list li[data-index='1']:before { opacity: 0.36; }
#click-list li[data-index='2']:before { opacity: 0.32; }
#click-list li[data-index='3']:before { opacity: 0.28; }
#click-list li[data-index='4']:before { opacity: 0.24; }
#click-list li[data-index='5']:before { opacity: 0.20; }
#click-list li[data-index='6']:before { opacity: 0.16; }
#click-list li[data-index='7']:before { opacity: 0.12; }
#click-list li[data-index='8']:before { opacity: 0.08; }
#click-list li[data-index='9']:before { opacity: 0.04; }

#click-list>li>.index {

	display: inline-block;
	margin-right: 30px;
	text-align: right;
  width: 30px;
}

/* #click-list > li.active > .list-label:after {
	content: " (last clicked)"
} */