#layers-menu{
	position:fixed;
	width :800px;
	margin-left:0;
	z-index:1;
	bottom:10px;
	left  :38px;
}

#layers-menu.bars-hidden{
	width:130px;
}

.colorbars{
	background:rgba(0,0,0,0.85);
	border:1px solid rgba(255,255,255, 0.35);
	padding:2px 5px;
	font-size:12px;
	color:#fff;
	text-align:left;
	cursor:pointer;
	box-sizing:border-box;
}

.colorbars .colorbar{
	position:relative;
	white-space:nowrap;
	line-height:1;
	padding:1px 0;
}

.colorbars .colorbar:hover{
	background:#0e71ca;
}

.colorbars *,
.colorbars .colorbar,
.colorbars .colorbar *{
	font-family:'Ropa Sans';
}

.colorbars .colorbar .toggle{
	position:absolute;
	width :22px;
	height:10px;
	background:rgb(14, 113, 202);
	border:1px solid rgba(255,255,255, 0.35);
	top:-4px;
	bottom:0;
	left:-34px;
	padding:1px 0;
	margin:auto;
	font-size:10px;
	text-align:center;
}

.colorbars .colorbar .toggle.toggle-hidden{
	background:rgba(0,0,0,0.85);
}

.colorbars .colorbar .toggle:hover{
	-webkit-filter:brightness(1.5);
 	        filter:brightness(1.5);
}

.colorbars .colorbar .lbl{
	display:inline-block;
	width:110px;
	height:15px;
	text-align:right;
	padding:1px 5px 0;
	white-space:nowrap;
	overflow-x:hidden;
	text-overflow:ellipsis;
	vertical-align:middle;
}

.colorbars .colorbar .colors{
	display:inline-block;
	position:relative;
	width :calc( 100% - 85px - 110px );
	height:15px;
	vertical-align:middle;
	overflow:hidden;
}

.colorbars .colorbar .colors div{
	display:inline-block;
	height:100%;
}

.colorbars .colorbar .colors .tick{
	position:absolute;
	font-size:11px;
	font-family:'Source Sans Pro';
	height:auto;
	background:#000;
	color:#fff;
	padding:0px 4px 1px;
	margin-top:2px;
	transform: translate(-50%, 0);
	border-radius:100px;
	opacity:0.9;
}

.colorbars .colorbar .colors .tick.tick-0,
.colorbars .colorbar .colors .tick.tick-4{
	transform:none;
	margin-left:-2.5%;
}

.colorbars .colorbar .values{
	display:inline-block;
	text-align:right;
	width:70px;
	padding-left:3px;
	margin-top:-2px;
	font-size:10px;
	vertical-align:middle;
}

.colorbars .colorbar.not-visible .lbl,
.colorbars .colorbar.not-visible .values{
	color:#888;
}

.colorbars .colorbar.placeholder .lbl{
	font-style:italic;
	color:rgba(255,255,255,0.8);
}

.colorbars .colorbar.placeholder .lbl svg{
	margin-right:3px;
}

.colorbars #layers-label,
.colorbars #colorbar-toggle{
	position:absolute;
	bottom:100%;
	left:0px;
	padding:1px 5px;
	font-size:10px;
	background:rgba(0,0,0,0.85);
	color:rgba(255,255,255,0.9);
	border:1px solid rgba(255,255,255, 0.35);
	border-bottom:0;
}

.colorbars #layers-label i,
.colorbars #layers-label svg{
	margin-right:3px;
}

.colorbars #colorbar-toggle{
	left:108px;
	/*
	left:auto;
	right:0px;
	*/
}

@media only screen and (max-width : 1550px){
	#layers-menu{
		width:400px;
	}

	.colorbars .tick-1,
	.colorbars .tick-3{
		display:none !important;
	}
}