#name01 {
	border-left: 0;
	padding: 0 0 0 30px;
}
.colorinput {
    float: left;
	width: 100px;
    padding-left: 30px;
}
input[type="number"], .hexanumber {
	color: #ffffff;
	background: #000000;
	border: 0;
	font-size: 90%;
	border-radius: 0;
	width: 50px;
	padding-left: 15px;
}
#sliders {
	font-size: 70%;
	padding-bottom: 50px;
}
input[type="range"] {
	width: -webkit-calc(100% - 140px);
    height: 28px; /* thumbHeight + (2 x thumbBorderWidth)*/
    -webkit-appearance: none; /*remove the line*/
    outline: none;
    background-color:black;
    border: 0; /*for firefox on android*/
    padding: 0; /*for IE*/
    margin: 0;
}

/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
    background: #ccc; /*trackColor*/
    height: 4px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    transition: 0.3s;
}
/*
input[type="range"]:hover::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #509600; 
} */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: white; /*thumbColor*/
    width: 28px; /* thumbHeight + (2 x thumbBorderWidth)*/
    height: 28px; /* thumbHeight + (2 x thumbBorderWidth)*/
    border-radius: 50%;
    margin-top: -12px; /* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
    cursor: pointer;
    border: 4px solid #fff; /*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
    transition: 0.3s;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
    background: white; /*activeThumbColor*/
}

/*firefox*/
input[type="range"]::-moz-focus-outer {
    border: 0;
}

input[type="range"]::-moz-range-track {
    background: #ccc; /*trackColor*/
    height: 4px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    /*background isn't animatable, so can't use transition*/
}
/*
input[type="range"]:hover::-moz-range-track,
input[type="range"]:focus::-moz-range-track {
    background: #777; 
} */

input[type="range"]::-moz-range-thumb {
    background: white; /*thumbColor*/
    width: 20px; /*thumbHeight*/
    height: 20px; /*thumbHeight*/
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff; /*border-width = thumbBorderWidth, border-color should match the background*/
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
    background: white; /*activeThumbColor*/
}

input[type="range"]::-moz-range-progress {
    background: white; /*thumbColor*/
    border-radius: 4px; /*trackHeight*/
    height: 4px; /*trackHeight*/
}

input[type="range"]:hover::-moz-range-progress,
input[type="range"]:focus::-moz-range-progress {
    background: white; /*activeThumbColor*/
}

/*edge and IE*/
input[type="range"]::-ms-track {
    background: #ccc; /*trackColor*/
    height: 4px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    border: none;
    color: transparent;
}
/*
input[type="range"]:hover::-ms-track,
input[type="range"]:focus::-ms-track {
    background: #777; 
} */

input[type="range"]::-ms-thumb {
    background: red; /*thumbColor*/
    width: 20px; /*thumbHeight*/
    height: 20px; /*thumbHeight*/
    border-radius: 50%;
    border: none;
    margin: 0 4px 0; /*0 thumbBorderWidth 0*/
    box-shadow: 0 0 0 4px #fff; /*0 0 0 thumbBorderWidth #fff, box-shadow color should match the background*/
    /*cursor:pointer; doesn't work*/
}

input[type="range"]:hover::-ms-thumb,
input[type="range"]:focus::-ms-thumb {
    background: white; /*activeThumbColor*/
}

input[type="range"]::-ms-tooltip {
    display: none; /*tooltip makes thumb sliding lagy*/
}

input[type="range"]::-ms-fill-lower,
input[type="range"]:hover::-ms-fill-lower,
input[type="range"]:focus::-ms-fill-lower {
    background: white; /*activeThumbColor*/
    border-radius: 4px; /*trackHeight*/
}