/* range slider css start */

.sliderContainer{
	display:inline-block;
	height:100px;
}

.a-slider{
	position:relative;
	width:360px;
	height:80px;
	left:40px;
}
.a-slider .bar {
    position: absolute;
    top: 50%;
    left: 2.5%;
    width: 95%;
    height: 2px;
    border-bottom: 2px solid #d5d5d5;
    box-sizing: border-box;
    z-index: 1;
}
.range-bar{
	position:absolute;
	top:50%;
	margin-top:-1px;
	left:2.5%;
	width:95%;
	height:1px;
	border-top:3px solid #349c29;
	box-sizing:border-box;
	z-index:10;
}

.btns{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.drag-box{
	width:120px;
	height:80px;
	position:absolute;
	z-index:20;
}
.min-box{ left:-30px; }
.max-box{ left:310px; }

.drag-box > div{
	height:30px;
	
}
.drag-box .ball{
	width:20px;
	height:20px;
	margin-left:30px;
	border-radius:10px;
	background-color:#349c29;
}
.name-tag{
	margin-top:15px;
	width:80px;
	height:20px;
	font-size:12px;
	color:white;
	text-align:center;
	line-height:25px;
	border-radius:5px;
	background-color:#349c29;
}
.name-tag >div:first-child{
	position:relative;
	top:-5px;
	left:50%;
	margin-left:-5px;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	background-color:inherit;
}
.name-tag .text{
	width:80px;
	height:20px;
	font-size:12px;
	color:white;
	text-align:center;
	line-height:10px;
}

@media(max-width:1199px){
	.a-slider{
		width:320px;
	}
	.max-box{
		left:270px;
	}
	
	.a-slider.month{
		width:280px;
	}
	.a-slider.month .max-box{
		left:230px;
	}
}

@media(max-width:991px){
	.a-slider{
		width:320px;
	}
	.max-box{
		left:400px;
	}

	.a-slider.month{
		width:180px;
		left:20px;
	}
	.a-slider.month .max-box{
		left:130px;
	}
}

@media(max-width:767px){
	.sliderContainer{
		margin-bottom:30px;
	}

	.a-slider{
		width:360px;
	}
	.max-box{
		left:310px;
	}
	
	.a-slider.month{
		width:360px;
		left:60px;
	}
	.a-slider.month .max-box{
		left:310px;
	}
}

@media(max-width:537px){
	.sliderContainer{
		width:100%;
		padding-right:30px;
	}

	.a-slider{
		width:80%;
	}
	.max-box{
		left:85%;
	}
	
	.a-slider.month{
		width:80%;
	}
	.a-slider.month .max-box{
		left:85%;
	}
}

@media(max-width:479px){
	.a-slider{
		width:75%;
	}
	.max-box{
		left:80%;
	}
	
	.a-slider.month{
		width:75%;
	}
	.a-slider.month .max-box{
		left:83%;
	}

}

@media(max-width:439px){
	.a-slider{
		width:73%;
	}
	.max-box{
		left:80%;
	}
	
	.a-slider.month{
		width:73%;
	}
	.a-slider.month .max-box{
		left:80%;
	}
}

@media(max-width:399px){
	.a-slider{
		width:70%;
	}
	.max-box{
		left:77%;
	}
	
	.a-slider.month{
		width:70%;
	}
	.a-slider.month .max-box{
		left:77%;
	}
}

@media(max-width:360px){
	.a-slider{
		width:67%;
	}
	.max-box{
		left:75%;
	}
	
	.a-slider.month{
		width:67%;
	}
	.a-slider.month .max-box{
		left:75%;
	}
}

/* range slider css end */