.sp-container{
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    z-index:9999994;
    overflow:hidden
}
.sp-original-input-container{
    position:relative
}
.sp-original-input-container input+.sp-add-on{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    border-top:none!important;
    border-bottom:none!important;
    border-top-right-radius:0!important;
    border-bottom-right-radius:0!important
}
input.spectrum.with-add-on{
    padding-left:45px
}
.sp-original-input-container input+.sp-add-on .sp-colorize{
    height:100%;
    width:100%;
    border-radius:inherit
}
backgrou .sp-colorize-container{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}
.sp-container.sp-flat{
    position:relative
}
.sp-container,.sp-container *{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
.sp-top{
    position:relative;
    width:100%;
    display:inline-block
}
.sp-top-inner{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0
}
.sp-color{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:20px!important
}
.sp-hue{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:12px;
    height:100%;
    left:initial!important
}
.sp-clear-enabled .sp-hue{
    top:15%;
    height:85%
}
.sp-fill{
    padding-top:80%
}
.sp-sat,.sp-val{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
.sp-alpha-enabled .sp-top{
    margin-bottom:28px
}
.sp-alpha-enabled .sp-alpha{
    display:block
}
.sp-alpha-handle{
    position:absolute;
    top:-3px;
    cursor:pointer;
    height:16px;
    border-radius:50%;
    width:16px;
    margin-right:5px;
    left:-2px;
    right:0;
    background:#f9f9f9;
    box-shadow:0 0 2px 0 #3a3a3a
}
.sp-alpha{
    display:none;
    position:absolute;
    bottom:-18px;
    right:0;
    left:0;
    height:10px
}
.sp-alpha-inner{
    border-radius:4px
}
.sp-clear{
    display:none
}
.sp-clear.sp-clear-display{
    background-position:center
}
.sp-clear-enabled .sp-clear{
    display:block;
    position:absolute;
    top:3px;
    right:0;
    bottom:0;
    cursor:pointer;
    left:initial;
    height:12px;
    width:12px
}
.sp-alpha,.sp-alpha-handle,.sp-clear,.sp-container,.sp-container button,.sp-container.sp-dragging .sp-input,.sp-dragger,.sp-preview,.sp-replacer,.sp-slider{
    -webkit-user-select:none;
    -moz-user-select:-moz-none;
    -o-user-select:none;
    user-select:none
}
.sp-container.sp-input-disabled .sp-input-container{
    display:none
}
.sp-container.sp-buttons-disabled .sp-button-container{
    display:none
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{
    display:none
}
.sp-palette-only .sp-picker-container{
    display:none
}
.sp-palette-disabled .sp-palette-container{
    display:none
}
.sp-initial-disabled .sp-initial{
    display:none
}
.sp-sat{
    background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(rgba(204,154,129,0)));
    background-image:-webkit-linear-gradient(left,#fff,rgba(204,154,129,0));
    background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));
    background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));
    background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));
    background-image:linear-gradient(to right,#fff,rgba(204,154,129,0))
}
.sp-val{
    border-radius:4px;
    background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));
    background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));
    background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));
    background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));
    background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));
    background-image:linear-gradient(to top,#000,rgba(204,154,129,0))
}
.sp-hue{
    background:-moz-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);
    background:-ms-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);
    background:-o-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);
    background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(.17,#ff0),color-stop(.33,#0f0),color-stop(.5,#0ff),color-stop(.67,#00f),color-stop(.83,#f0f),to(red));
    background:-webkit-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);
    background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)
}
.sp-1{
    height:17%
}
.sp-2{
    height:16%
}
.sp-3{
    height:17%
}
.sp-4{
    height:17%
}
.sp-5{
    height:16%
}
.sp-6{
    height:17%
}
.sp-hidden{
    display:none!important
}
.sp-cf:after,.sp-cf:before{
    content:"";
    display:table
}
.sp-cf:after{
    clear:both
}
@media (max-device-width:480px){
    .sp-color{
        right:40%
    }
    .sp-hue{
        left:63%
    }
    .sp-fill{
        padding-top:60%
    }
}
.sp-dragger{
    border-radius:5px;
    height:10px;
    width:10px;
    border:1px solid #fff;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    margin-left:3px;
    margin-top:3px;
    box-shadow:0 0 2px 1px rgba(0,0,0,.2)
}
.sp-slider{
    position:absolute;
    top:0;
    cursor:pointer;
    height:16px;
    border-radius:50%;
    width:16px;
    left:-2px;
    background:#f9f9f9;
    box-shadow:0 0 2px 0 #3a3a3a;
    margin-top:8px
}
.sp-container{
    border-radius:0;
    background-color:#fff;
    padding:0;
    border-radius:4px;
    color:#000;
    box-shadow:0 0 0 1px rgba(99,114,130,.16),0 8px 16px rgba(27,39,51,.08)
}
.sp-clear,.sp-color,.sp-container,.sp-container button,.sp-container input,.sp-hue{
    font-size:12px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box
}
.sp-top{
    margin-bottom:10px
}
.sp-clear,.sp-color,.sp-hue,.sp-sat,.sp-val{
    border-radius:3px
}
.sp-input-container{
    margin-top:-5px;
    margin-bottom:10px
}
.sp-button-container.sp-cf,.sp-initial.sp-thumb.sp-cf,.sp-input-container.sp-cf{
    height:25px
}
.sp-palette-row-initial>span:first-child{
    cursor:pointer
}
.sp-initial-disabled .sp-input-container{
    width:100%
}
.sp-input{
    padding:0 5px!important;
    margin:0;
    width:100%;
    box-shadow:none!important;
    height:100%!important;
    background:0 0;
    color:#3a3a3a;
    border-radius:2px!important;
    border:1px solid #e0e0e0!important;
    text-align:center;
    font-family:monospace;
    font-size:inherit!important
}
.sp-input:focus{
    border:1px solid orange
}
.sp-input.sp-validation-error{
    border:1px solid red;
    background:#fdd
}
.sp-palette-container,.sp-picker-container{
    float:left;
    position:relative;
    padding:10px;
    padding-bottom:300px;
    margin-bottom:-290px
}
.sp-picker-container{
    width:200px;
    border-left:solid 1px #fff
}
.sp-palette-container{
    border-right:solid 1px #ccc
}
.sp-palette-only .sp-palette-container{
    border:0
}
.sp-palette .sp-thumb-el{
    display:block;
    position:relative;
    float:left;
    width:24px;
    height:15px;
    margin:3px;
    cursor:pointer;
    border:solid 2px transparent
}
.sp-palette .sp-thumb-el.sp-thumb-active,.sp-palette .sp-thumb-el:hover{
    border-color:orange
}
.sp-thumb-el{
    position:relative
}
.sp-initial{
    float:left
}
.sp-initial span{
    width:30px;
    height:25px;
    border:none;
    display:block;
    float:left;
    margin:0
}
.sp-initial .spe-thumb-el.sp-thumb-active{
    border-radius:0 5px 5px 0
}
.sp-initial .spe-thumb-el{
    border-radius:5px 0 0 5px
}
.sp-initial .sp-clear-display{
    background-position:center
}
.sp-button-container{
    float:right
}
.sp-palette-button-container{
    margin-top:10px
}
.sp-replacer{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    display:inline-block;
    border-radius:3px;
    border:1px solid #ccc;
    color:#666;
    transition:color .3s,border-color .3s;
    vertical-align:middle;
    width:3rem;
    height:1.5rem
}
.sp-replacer.sp-active,.sp-replacer:hover{
    border:1px solid #666;
    color:#000
}
.sp-replacer.sp-disabled{
    cursor:default;
    border-color:silver;
    color:silver
}
.sp-dd{
    position:absolute;
    font-size:10px;
    right:0;
    top:0;
    bottom:0;
    padding:0 2px;
    line-height:1.6rem;
    background-color:#fff
}
.sp-preview{
    position:relative;
    width:100%;
    height:100%;
    float:left;
    z-index:0
}
.sp-preview-inner{
    transition:background-color .2s
}
.sp-preview-inner.sp-clear-display{
    width:1rem;
    margin-left:.3rem
}
.sp-palette .sp-thumb-el{
    width:16px;
    height:16px;
    margin:3px;
    border:none;
    border-radius:3px
}
.sp-container{
    padding-bottom:0
}
.sp-container button{
    border-radius:3px;
    border:none;
    background:0 0;
    line-height:1;
    padding:0 8px;
    height:25px;
    text-transform:capitalize;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    color:#606c72;
    font-weight:700
}
.sp-container button.sp-choose{
    background-color:#3cab3b;
    color:#fff;
    margin-left:5px
}
.sp-container button:hover{
    opacity:.8
}
.sp-container button.sp-palette-toggle{
    width:100%;
    background-color:#f3f3f3;
    margin:0
}
.sp-palette span.sp-thumb-active,.sp-palette span:hover{
    border-color:#000
}
.sp-alpha,.sp-preview,.sp-thumb-el{
    position:relative;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}
.sp-alpha-inner,.sp-preview-inner,.sp-thumb-inner{
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0
}
.sp-palette .sp-thumb-inner{
    border-radius:3px;
    background-position:50% 50%;
    background-repeat:no-repeat
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)
}
.sp-clear-display{
    background-repeat:no-repeat;
    background-position:center;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABe0lEQVQokYXSsUtcQRTF4d8Jj+VhHSxkEQuLsEUKK0nhTBFTmLSSUhBCMCAWsmgIwWrBLk0akfwLCaSQKBJmtrIIISwpRFKIhViETScphGMzysMtvOVwvpm5d0bGNCuGWAOPgYdl6S8wSDn9b+bUhDHEKWAdeAFMANg+l/TV9ofcz6cjMIbYBvaBMds7QCqZ58CmpBNgPuV0DvAAIMyFGugWtJr7eTv38xEwkPRPErY7QDeG2LqFkjrAgu0dSd/KDVqSNmxvAZ8lfbS9AHRuYemnLWkv5XRVBrQMbAI/gTXgEzAJtJuwBVS2L2OIle03QA/4Lmkl5XQBXEqqbFcAVYFDYChpFngiqWf7l6TXKaezMt2Zkhk24THwG+jZriX9AFZvUAyxLbRke2D75O5zPAO+ADXwEtizjaRHwDvbTyUtppwOmicCHAJvbXcl9YA1SQDjtseA97YPRz7ATcUQp2y/kjRdevsjaTfldNrMjcDGBjXA3T96L7yvrgFzP69+0Ao/HAAAAABJRU5ErkJggg==)
}