.ew-alpha-slider-bg, .ew-alpha-slider-thumb, .ew-alpha-slider-wrapper, .ew-color-black-panel, .ew-color-cursor, .ew-color-drop-btn-group, .ew-color-picker, .ew-color-picker-arrow, .ew-color-picker-no, .ew-color-slider-thumb, .ew-color-white-panel {
    position: absolute
}

.ew-alpha-slider-bar, .ew-color-drop-container, .ew-color-mode-container .ew-color-mode-down, .ew-color-mode-container .ew-color-mode-up, .ew-color-panel, .ew-color-picker-arrow-left, .ew-color-picker-arrow-right, .ew-color-picker-box, .ew-color-slider, .ew-color-slider-bar {
    position: relative
}

.ew-alpha-slider-thumb, .ew-color-drop-btn, .ew-color-input, .ew-color-slider, .ew-color-slider-thumb {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.ew-alpha-slider-bar, .ew-alpha-slider-thumb, .ew-color-drop-btn, .ew-color-panel, .ew-color-picker-box, .ew-color-slider-bar, .ew-color-slider-thumb, .ew-pre-define-color {
    cursor: pointer
}

.ew-color-input, .ew-color-picker, .ew-color-picker-arrow-left, .ew-color-picker-arrow-right, .ew-color-picker-box, .ew-color-sure {
    background-color: #fff
}

.ew-color-drop-btn, .ew-color-input, .ew-color-picker-box, .ew-pre-define-color {
    outline: none
}

.ew-color-drop-btn, .ew-color-input, .ew-color-picker-arrow-left, .ew-color-picker-arrow-right, .ew-color-picker-box {
    display: inline-block
}

.ew-color-picker .ew-color-picker-content:after, .ew-pre-define-color-container:after {
    content: "";
    display: table;
    clear: both
}

.ew-color-slider.ew-is-vertical .ew-alpha-slider-bar, .ew-color-slider.ew-is-vertical .ew-color-slider-bar, .ew-pre-define-color {
    float: left
}

.ew-color-drop-btn, .ew-color-picker-no {
    text-align: center
}

.ew-color-picker {
    min-width: 320px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ebeeff;
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    border-radius: 5px;
    z-index: 10;
    padding: 7px;
    text-align: left;
    display: none
}

.ew-color-picker.ew-color-picker-disabled * {
    cursor: not-allowed
}

.ew-color-picker-content {
    margin-bottom: 6px
}

.ew-color-panel {
    width: 280px;
    height: 180px
}

.ew-alpha-slider-bg, .ew-alpha-slider-wrapper, .ew-color-black-panel, .ew-color-picker-arrow, .ew-color-picker-no, .ew-color-white-panel {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.ew-color-white-panel {
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))
}

.ew-color-black-panel {
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
    background: linear-gradient(0deg, #000, transparent)
}

.ew-color-slider.ew-is-vertical {
    width: 27px;
    height: 180px;
    float: right
}

.ew-color-slider.ew-is-horizontal {
    width: 100%;
    height: 14px
}

.ew-color-slider.ew-is-vertical .ew-color-slider-bar {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
    background: linear-gradient(180deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
    margin-left: 3px
}

.ew-color-slider.ew-is-horizontal .ew-color-slider-bar {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
    background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
}

.ew-color-slider.ew-is-vertical .ew-alpha-slider-bar, .ew-color-slider.ew-is-vertical .ew-color-slider-bar {
    width: 12px;
    height: 100%
}

.ew-color-slider.ew-is-horizontal .ew-alpha-slider-bar, .ew-color-slider.ew-is-horizontal .ew-color-slider-bar {
    width: 100%;
    height: 12px
}

.ew-color-slider.ew-is-horizontal .ew-alpha-slider-bar {
    margin-top: 3px
}

.ew-alpha-slider-wrapper, .ew-pre-define-color.ew-has-alpha {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")
}

.ew-alpha-slider-thumb, .ew-color-slider-thumb {
    left: 0;
    top: 0;
    border-radius: 1px;
    background: #fff;
    border: 1px solid #f0f0f0;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .6);
    box-shadow: 0 0 2px rgba(0, 0, 0, .6)
}

.ew-color-slider.ew-is-horizontal .ew-alpha-slider-thumb, .ew-color-slider.ew-is-horizontal .ew-color-slider-thumb {
    width: 4px;
    height: 100%
}

.ew-color-slider.ew-is-vertical .ew-alpha-slider-thumb, .ew-color-slider.ew-is-vertical .ew-color-slider-thumb {
    width: 12px;
    height: 4px
}

.ew-color-cursor {
    left: 100%;
    top: 0;
    cursor: default;
    width: 4px;
    height: 4px;
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 3px #fff, inset 0 0 2px 2px rgba(0, 0, 0, .4), 0 0 2px 3px rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 3px #fff, inset 0 0 2px 2px rgba(0, 0, 0, .4), 0 0 2px 3px rgba(0, 0, 0, .5);
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px)
}

.ew-color-drop-container {
    margin-top: 6px;
    padding-top: 4px;
    min-height: 28px;
    border-top: 1px solid #cdcdcd
}

.ew-has-mode-container .ew-color-input {
    width: 210px
}

.ew-has-mode-container .ew-color-mode-container {
    margin-left: 3px
}

.ew-color-input {
    width: 160px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #dcdfe6;
    padding: 0 5px;
    -webkit-transition: border-color .2s cubic-bezier(.175, .885, .32, 1.275);
    transition: border-color .2s cubic-bezier(.175, .885, .32, 1.275);
    border-radius: 5px
}

.ew-color-input:not(.ew-input-disabled):focus {
    border-color: #239fe6
}

.ew-color-drop-btn {
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    color: #606266;
    border: 1px solid #dcdfe6;
    letter-spacing: 1px
}

.ew-color-drop-btn-group {
    right: 0;
    top: 5px
}

.ew-color-clear {
    color: #4096ef;
    border-color: transparent;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0
}

.ew-color-clear:active, .ew-color-clear:hover {
    color: #66b1ff
}

.ew-color-sure {
    margin-left: 10px
}

.ew-color-sure:active, .ew-color-sure:hover {
    border-color: #4096ef;
    color: #4096ef
}

.ew-pre-define-color-container {
    width: 280px;
    font-size: 12px;
    margin-top: 8px
}

.ew-pre-define-color-container:after {
    visibility: hidden;
    height: 0
}

.ew-pre-define-color {
    margin: 0 0 8px 8px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #9b979b
}

.ew-pre-define-color-item {
    height: 100%;
    border-radius: 3px
}

.ew-pre-define-color.ew-pre-define-color-disabled {
    cursor: not-allowed
}

.ew-pre-define-color:nth-child(10n+1) {
    margin-left: 0
}

.ew-pre-define-color:not(.ew-pre-define-color-disabled):active, .ew-pre-define-color:not(.ew-pre-define-color-disabled):hover {
    opacity: .8
}

.ew-pre-define-color-active {
    -webkit-box-shadow: 0 0 3px 2px #409eff;
    box-shadow: 0 0 3px 2px #409eff
}

.ew-color-picker-box {
    border: 1px solid #dcdee2;
    color: #535353;
    border-radius: 4px;
    padding: 4px 7px;
    line-height: 1.5;
    font-size: 14px;
    -webkit-transition: border-color .2s cubic-bezier(.175, .885, .32, 1.275);
    transition: border-color .2s cubic-bezier(.175, .885, .32, 1.275)
}

.ew-color-input.ew-input-disabled, .ew-color-picker-box-disabled {
    background-color: #ebe7e7;
    cursor: not-allowed
}

.ew-color-picker-arrow, .ew-color-picker-no {
    width: 20px;
    height: 20px;
    margin: auto;
    z-index: 3
}

.ew-color-picker-no {
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    color: #5e535f;
    border: 1px solid #e2dfe2;
    border-radius: 2px
}

.ew-color-picker-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ew-color-picker-arrow-left, .ew-color-picker-arrow-right {
    width: 12px;
    height: 1px
}

.ew-color-picker-arrow-left {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ew-color-picker-arrow-right {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 3px
}

.ew-color-mode-container {
    display: inline-block;
    vertical-align: middle;
    padding: 6px;
    border-radius: 2px
}

.ew-color-mode-container:hover {
    background-color: #ebe7e7
}

.ew-color-mode-container .ew-color-mode-down, .ew-color-mode-container .ew-color-mode-up {
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    cursor: pointer
}

.ew-color-mode-container .ew-color-mode-up {
    bottom: 5px;
    border-color: transparent transparent #606266
}

.ew-color-mode-container .ew-color-mode-down {
    top: 5px;
    border-color: #606266 transparent transparent
}

.ew-color-mode-title {
    color: #535455;
    font-size: 16px;
    display: inline-block;
    padding-right: 2px
}

.ew-color-mode-title:after {
    content: ":";
    display: inline-block
}