/* Input */
.sp-replacer {
    padding: 0px;
    display: flex;
    border: solid 1px #ccd0d2;
    background: none;
    color: #333;
    vertical-align: middle;
    width: -webkit-fill-available;
    border-radius: 4px;
    align-items: center;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #98cbe8;
}
.sp-preview {
    height: 36px;
    border: none;
    flex-grow: 1;
}
.sp-dd {
    margin-right: 5px;
    color: #636b6f;
}

/* Color Picker */
.sp-container {
    border-radius: 4px;
    background-color: white;
    border: none;
    box-shadow: 1px 1px 5px 1px #ccc;
}
.sp-container button {
    border-radius: 4px;
    line-height: initial;
    padding: 6px 12px;
    text-shadow: none;
    vertical-align: middle;
    border: none;
    background: #3097D1;
    color: white;
}
.sp-container button:hover {
    text-shadow: none;
    border: none;
    background: #3097D1;
}
.sp-cancel {
    color: #636b6f !important;
    text-decoration: none;
}
.sp-cancel:hover {
    color: #636b6f !important;
    text-decoration: none;
    font-weight: bold;
}
.sp-initial {
    border: none;
}
.sp-color, .sp-hue, .sp-clear {
    border: none;
}
.sp-slider {
    border: 1px solid #252525;
    background: #252525;
}
.sp-dragger {
    border: 1px solid #fff;
    background: #3097d1;
}
.sp-palette .sp-thumb-el {
    border: none;
    padding: 1px;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background: none;
    border: 2px solid #3097D1;
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background: none;
    border: 2px solid #3097D1;   
}