.gradient-left-block{
	width:400px;
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
}
.gradient-right-block {
	vertical-align:top;
	width:400px;
	display:inline-block;
	margin-left:25px !important;
	margin-top:10px;
}
.gradient-block{
	width:100%;
}

.gradient-block .gradient {
	height:50px;
	border: 1px solid #999;
}
.gradient-block .gradient-color {
	height:20px;
	background-color:#FFF;
	position:relative;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ1JREFUeNq8VAEKwCAITOn%2FX3ZzTBCxUicTBsvsOO9EIKJhAwCe5H0H4xBvLQgOegV8yZ8AZwJHc8zKI4c53bk6IGNqMH3GCJuMlkeG4p4G1e5Lq1KXatmCM7AdrbLLq7FC0agycx7oXOmk8%2FY%2FPNjRR7s6ZFHFqY5AcasLFDPtpAC7WH7aNkxgO9gdLNv3oWdKiKXX7r8bu6rlJcAA9ZRfMt5oHoIAAAAASUVORK5CYII%3D) 5 0,pointer;
}
.gradient-block .gradient-color .gradient-color-pos{
	cursor:  pointer;
    width: 11px;
    height: 17px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAARCAYAAADZsVyDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJNJREFUeNrsU0EOgCAM2wi%2FgD%2FCU%2BCP%2FGOKiUZx03rwYGIvy5au6cZgEaERzDyXhQmAxXUacR8RUY3rNFErt5yWUs696yosEW1Mbfyx5pBxkV2Prj3SvHdjPVZKqddk23tP6AG6szvknGkRbq3dkmOMS0S5fk1CCObd1loPUyFcRy%2FhF%2F6wsLdO6goI9%2FHPQzEJMAB64VRGrQShWQAAAABJRU5ErkJggg%3D%3D);
    background-position: right;
    position: absolute;
	margin-left:-5px;
}
.gradient-block .gradient-color .gradient-color-sel{
	background-position: left;
}
.gradient-block .gradient-color .gradient-color-pos span{
    position: absolute;
    top: 8px;
    left: 2px;
    width: 7px;
    height: 7px;	
}
.color-block {
	width:100%;	
}
.color-block div{
	display:inline-block;
}
.color-block .color-name{
	width:20%;	
}
.color-block .color-sel{
	width:60px;	
}
.color-block .Icon{
	width:55px;	
}
.color-block .Icon .Image{
	background-image:none !important;
	border:#999 solid 1px;	
}
.color-block input{
	width:40px;
	text-align:center;
}

.center .content .gradient-left-block .container table td, .center .content .gradient-left-block .container table th{
	border: none;
}
.transparency {
    width: 130px;
    height: 11px;
    background: url(/img/slider-bg.png);
    position: relative;
    margin: 0;
    padding: 0 10px;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.ui-slider-handle {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -7px;
    margin-left: -12px;
    z-index: 200;
    background: url(/img/slider-button.png);
}
.gradient-left-block .sel-gradient
{
	width:100%;
	height:170px;
	overflow-y:scroll;
    border: 1px solid #ddd;
	margin-bottom: 30px;
}
.gradient-right-block .fon{
	width:100%;
	height:150px;
    border: 1px solid #666;
}
.gradient-right-block .orientation{
	width:100%;
}
.gradient-right-block .res{
	font: 11px monospace;
    border: 1px #ddd solid;
width:97%;
padding: 5px;
text-align: left;
}
.gradient-right-block .res div{
	margin-bottom:8px;
}
.gradient-background,.fon-background,.gradient-backgroun-sel{
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiPHPmDAMMGBsbw9lMDDgA6RKM%2F%2F%2F%2Fh3POnj1LCzsAAgwAQtYIcFfEyzkAAAAASUVORK5CYII%3D);
}
.fon-background{
	margin-bottom:10px;
}
.gradient-backgroun-sel{
	margin:4px;
	border: 1px inset #000;
	float: left;
    display: block;
}
.gradient-style{
	width:30px;
	height:30px;
}

    .list-select{
        background:#85AB70;
        color: azure !important;
    }
    
    @media screen and (max-width: 1020px) {
.gradient-left-block {
    width: 100% !important;
    }
    .gradient-right-block {
    width: 100%  !important;
    margin-left: 0 !important;
}
}

.gradients {
padding-bottom: 30px;
}
    
    .jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{color:#000;z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:10px 0 0 0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 10px 10px 10px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;padding:5px 0 0 0;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker input{font-size:13px}.jPicker .Button{text-align:center;padding:0 4px;width:115px}.jPicker .Button{ vertical-align:top}.jPicker .Button input{padding:2px 0;width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td{margin:0;padding:0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}