:root {

    /* Transition
  -------------------------- */

    /* Colors
  -------------------------- */

    /* Link
  -------------------------- */

    /* Border
  -------------------------- */

    /* Box-shadow
  -------------------------- */

    /* Fill
  -------------------------- */

    /* Font
  -------------------------- */

    /* Size
  -------------------------- */

    /* z-index
  -------------------------- */

    /* Disable base
  -------------------------- */

    /* Icon
  -------------------------- */

    /* Checkbox
  -------------------------- */

    /* Radio
  -------------------------- */

    /* Select
  -------------------------- */

    /* Alert
  -------------------------- */

    /* Message Box
  -------------------------- */

    /* Message
  -------------------------- */

    /* Notification
  -------------------------- */

    /* Input
  -------------------------- */

    /* Cascader
  -------------------------- */

    /* Group
  -------------------------- */

    /* Tab
  -------------------------- */

    /* Button
  -------------------------- */

    /* cascader
  -------------------------- */

    /* Switch
 -------------------------- */

    /* Dialog
 -------------------------- */

    /* Table
 -------------------------- */

    /* Pagination
 -------------------------- */

    /* Popover
 -------------------------- */

    /* Tooltip
  -------------------------- */

    /* Tag
  -------------------------- */

    /* Dropdown
  -------------------------- */

    /* Badge
  -------------------------- */

    /* Card
  --------------------------*/

    /* Slider
  --------------------------*/

    /* Steps
  --------------------------*/

    /* Menu
  --------------------------*/

    /* Rate
  --------------------------*/

    /* DatePicker
  --------------------------*/

    /* Loading
  --------------------------*/

    /* Scrollbar
  --------------------------*/

    /* Carousel
  --------------------------*/

    /* Collapse
  --------------------------*/

    /* Transfer
  --------------------------*/
}

.el-color-hue-slider {

    position: relative;

    box-sizing: border-box;

    width: 280px;

    height: 12px;

    background-color: #f00;

    padding: 0 2px;
}

.el-color-hue-slider.is-vertical {

    width: 12px;

    height: 180px;

    padding: 2px 0;
}

.el-color-hue-slider.is-vertical .el-color-hue-slider__bar {

    background: linear-gradient(
          to bottom, #f00 0%,
          #ff0 17%, #0f0 33%,
          #0ff 50%, #00f 67%,
          #f0f 83%, #f00 100%);
}

.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb {

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;
}

.el-color-hue-slider__bar {

    position: relative;

    background: linear-gradient(
        to right, #f00 0%,
        #ff0 17%, #0f0 33%,
        #0ff 50%, #00f 67%,
        #f0f 83%, #f00 100%);

    height: 100%;
}

.el-color-hue-slider__thumb {

    position: absolute;

    cursor: pointer;

    box-sizing: border-box;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;

    border-radius: 1px;

    background: #fff;

    border: 1px solid #f0f0f0;

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);

    z-index: 1;
}

.el-color-svpanel {

    position: relative;

    width: 280px;

    height: 180px;
}

.el-color-svpanel__white, .el-color-svpanel__black {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;
}

.el-color-svpanel__white {

    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.el-color-svpanel__black {

    background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.el-color-svpanel__cursor {

    position: absolute;
}

.el-color-svpanel__cursor > div {

    cursor: head;

    width: 4px;

    height: 4px;

    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);

    border-radius: 50%;

    transform: translate(-2px, -2px);
}

.el-color-alpha-slider {

    position: relative;

    box-sizing: border-box;

    width: 280px;

    height: 12px;

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}

.el-color-alpha-slider.is-vertical {

    width: 20px;

    height: 180px;
}

.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar {

    background: linear-gradient(
          to bottom, rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 1) 100%);
}

.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb {

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;
}

.el-color-alpha-slider__bar {

    position: relative;

    background: linear-gradient(
        to right, rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%);

    height: 100%;
}

.el-color-alpha-slider__thumb {

    position: absolute;

    cursor: pointer;

    box-sizing: border-box;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;

    border-radius: 1px;

    background: #fff;

    border: 1px solid #f0f0f0;

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);

    z-index: 1;
}

.el-color-dropdown {

    width: 300px;
}

.el-color-dropdown__main-wrapper {

    margin-bottom: 6px;
}

.el-color-dropdown__main-wrapper::after {

    content: "";

    display: table;

    clear: both;
}

.el-color-dropdown__btns {

    margin-top: 6px;

    text-align: right;
}

.el-color-dropdown__value {

    float: left;

    line-height: 26px;

    font-size: 12px;

    color: rgb(31, 48, 61);
}

.el-color-dropdown__btn {

    border: 1px solid #dcdcdc;

    color: #333;

    line-height: 24px;

    border-radius: 2px;

    padding: 0 20px;

    cursor: pointer;

    background-color: transparent;

    outline: none;

    font-size: 12px;
}

.el-color-dropdown__btn[disabled] {

    color: #cccccc;

    cursor: not-allowed;
}

.el-color-dropdown__btn:hover {

    color: #2ba7e7;

    border-color: #2ba7e7;
}

.el-color-dropdown__link-btn {

    cursor: pointer;

    color: #2ba7e7;

    text-decoration: none;

    padding: 15px;

    font-size: 12px;
}

.el-color-dropdown__link-btn:hover {

    color: rgb(85, 185, 236);
}

.el-color-picker {

    display: inline-block;

    position: relative;

    line-height: normal;
}

.el-color-picker__trigger {

    display: inline-block;

    box-sizing: border-box;

    height: 36px;

    padding: 6px;

    border: 1px solid #bfcbd9;

    border-radius: 4px;

    font-size: 0;
}

.el-color-picker__color {

    position: relative;

    display: inline-block;

    box-sizing: border-box;

    border: 1px solid #666;

    width: 22px;

    height: 22px;

    text-align: center;
}

.el-color-picker__color.is-alpha {

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}

.el-color-picker__color-inner {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;
}

.el-color-picker__empty {

    font-size: 12px;

    vertical-align: middle;

    color: #666;

    position: absolute;

    top: 4px;

    left: 4px;
}

.el-color-picker__icon {

    display: inline-block;

    position: relative;

    top: -6px;

    margin-left: 8px;

    width: 12px;

    color: #888;

    font-size: 12px;
}

.el-color-picker__panel {

    position: absolute;

    z-index: 10;

    padding: 6px;

    background-color: #fff;

    border: 1px solid rgb(209, 221, 229);

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
}
:root {

    /* Transition
  -------------------------- */

    /* Colors
  -------------------------- */

    /* Link
  -------------------------- */

    /* Border
  -------------------------- */

    /* Box-shadow
  -------------------------- */

    /* Fill
  -------------------------- */

    /* Font
  -------------------------- */

    /* Size
  -------------------------- */

    /* z-index
  -------------------------- */

    /* Disable base
  -------------------------- */

    /* Icon
  -------------------------- */

    /* Checkbox
  -------------------------- */

    /* Radio
  -------------------------- */

    /* Select
  -------------------------- */

    /* Alert
  -------------------------- */

    /* Message Box
  -------------------------- */

    /* Message
  -------------------------- */

    /* Notification
  -------------------------- */

    /* Input
  -------------------------- */

    /* Cascader
  -------------------------- */

    /* Group
  -------------------------- */

    /* Tab
  -------------------------- */

    /* Button
  -------------------------- */

    /* cascader
  -------------------------- */

    /* Switch
 -------------------------- */

    /* Dialog
 -------------------------- */

    /* Table
 -------------------------- */

    /* Pagination
 -------------------------- */

    /* Popover
 -------------------------- */

    /* Tooltip
  -------------------------- */

    /* Tag
  -------------------------- */

    /* Dropdown
  -------------------------- */

    /* Badge
  -------------------------- */

    /* Card
  --------------------------*/

    /* Slider
  --------------------------*/

    /* Steps
  --------------------------*/

    /* Steps
  --------------------------*/

    /* Rate
  --------------------------*/

    /* DatePicker
  --------------------------*/

    /* Loading
  --------------------------*/

    /* Scrollbar
  --------------------------*/

    /* Carousel
  --------------------------*/

    /* Collapse
  --------------------------*/
}