/* ------------------------------------------------------------
	Color Converters
------------------------------------------------------------ */

/* RGB to HEX Converter -------------- */


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield !important;
}

#color-converter #calcform input { }

#color-converter #calcform button img,
#color-converter button.btn img { 
	filter: invert(1); 
}

#color-converter #calcform button,
#color-converter button.btn {
    color: #fff;
    padding: 15px 40px;
    background: #0068d8;
	font-size: 16px;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 30px;
}

#color-converter #red, 
#color-converter #green, 
#color-converter #blue {
	float: left;
	clear: left;
	width: 300px;
	margin: 15px;
}

#color-converter #swatch {
    width: 100% !important;
    height: 130px;
    margin-left: 0px;
    background-image: none;
    margin-top: 20px;
    margin-bottom: 30px;
    border: 1px solid #d9e1e8 !important;
}

#color {
    min-height: 120px;
}

#color-converter #calcform { 

}

#color-converter #calcform button img { 
	   filter: invert(1); 
}

#color-converter #red .ui-slider-range { 
	background: #ef2929; 
}
#color-converter #green .ui-slider-range { 
	background: #8ae234; 
}
#color-converter #blue .ui-slider-range { 
	background: #729fcf; 
}

#color-converter .ui-slider-range {
    border: none !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: none !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
    -webkit-border-top-right-radius: 0px !important;
    -webkit-border-bottom-right-radius: 0px !important;
    -moz-border-radius-topright: 0px !important;
    -moz-border-radius-bottomright: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#color-converter #red .ui-slider-handle {  }
#color-converter #green .ui-slider-handle {  }
#color-converter #blue .ui-slider-handle {  }

#color-converter #red .ui-slider-range {  }
#color-converter #green .ui-slider-range {  }
#color-converter #blue .ui-slider-range { background: #037dff;  }

#color-converter #cyan .ui-slider-range { background: #0ec7f1; }
#color-converter #magenta .ui-slider-range { background: #ea138c; }
#color-converter #yellow .ui-slider-range { background: #fff02a; }
#color-converter #black .ui-slider-range { background: #000; }

#color-converter #red .ui-widget.ui-widget-content {  }
#color-converter #green .ui-widget.ui-widget-content {  }
#color-converter #blue .ui-widget.ui-widget-content {  }

#color-converter #red .ui-slider-handle {  }
#color-converter #green .ui-slider-handle {  }
#color-converter #blue .ui-slider-handle {  }

#color-converter .ui-slider-handle {	
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); 
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( 
		startColorstr='#eeeeee', 
		endColorstr='#cccccc',
		GradientType=0 ); /* IE6-9 */
	border-radius: 4px;
	border: 1px solid #ccc !important;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.0) !important;
	height: 30px;
	width: 30px;
	margin-top: -3px;
	margin-left: -1px;
}

#color-converter #red .ui-slider-handle:focus,
#color-converter #green .ui-slider-handle:focus,
#color-converter #blue .ui-slider-handle:focus,
#color-converter .ui-slider-handle, 
#color-converter span.ui-slider-handle { 
    border: 1px solid #ccc !important;
    outline: none !important; 
}

#color-converter .ui-widget.ui-widget-content {
    border: 1px solid #d3d3d3;
    display: block !important;
    width: 100% !important;
    margin-left: 0px !important;
}

#color-converter label {
    font-weight: 500 !important;
    font-size: 0.88em !important;
    color: #485b68 !important;
    font-size: 16px !important;
    margin-bottom: 20px;
	display: block;
	width: 100%;
}


.color-sliders {
    display: block;
    margin-bottom: 30px;
}

.color-sliders label {
    margin-bottom: 20px !important;
}

.color-sliders .col:first-child {
    width: 20%;
    display: inline-block;
}
.color-sliders .col:last-child {
    width: 60%;
    display: inline-block;
    margin-left: 40px;
	margin-bottom: -14px;
}



.color-sliders .ui-slider-handle {
	transform: rotate(90deg);
	text-align: middle;
}

 .fa-bars {
      color: #979797;
	 margin: 5.5px 6.5px;
    }