/* Auto-generated from .local/reference/debundle devpanel CSS — run: node scripts/extract-devpanel-css.js */

/* 950-css_alert.js */

/**弹框**/
/* 遮罩层 */
#alertView  {
    
    position: fixed;
    
    left: 0px;
    
    top: 0px;
    
    width: 100%;
    
    height: 100%;
    
    font-size: 16px;
    
    /* IE9以下不支持rgba模式 */
    background-color: rgba(0,
     0,
     0,
     0.5);
    
    /* 兼容IE8及以下 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,
     endColorstr=#7f000000);
    
    display: none;
    

  }

/* 弹出框主体 */
.popup  {
    
    background-color: #ffffff;
    
    color: #091528;
    
    z-index: 1000;
    
    border-radius: 0.5em;
    
    box-shadow: 0 10px 20px rgba(0,
     0,
     0,
     0.2);
    
    left: 50%;
    
    max-width: 90%;
    
    min-height: 120px;
    
    padding-bottom: 50px;
    /**底部按钮的位置**/
    position: absolute;
    
    top: 50%;
    
    transform: translate(-50%,
     -50%);
    
    width: 30em;
    
    text-align: left;
    
    max-height: 90vh;
    
    display: flex;
    
    flex-direction: column;
    

  }

/* 弹出框的标题 */
.popup_title  {
    
    text-align: center;
    
    margin: 5px;
    
    padding: 10px;
    
    border-bottom: solid 1px #e0e0e0;
    

  }

/* 弹出框的内容 */
.popup_content  {
    
    padding: 10px 10px;
    
    overflow: auto;
    
    margin: 0px;
    

  }

/* 弹出框的按钮栏 */
.popup_btn  {
    
    width: 100%;
    
    display: inline-flex;
    
    bottom: 10px;
    
    position: absolute;
    

  }

/* 弹出框的按钮 */
.popup_btn button  {
    
    color: #778899;
    
    height: 40px;
    
    cursor: pointer;
    
    border: solid 1px #cccccc;
    
    border-radius: 5px;
    
    margin: 0px 0px;
    
    color: #ffffff;
    
    background-color: #055499;
    

  }

/* 977-css_chunk.js */


/**代码编辑**/
#codeEditorView  {
    
    background-color: #ffffff;
    
    color: #091528;
    
    border-radius: 0.5em;
    
    box-shadow: 0 10px 20px rgba(0,
     0,
     0,
     0.2);
    
    /**padding-bottom: 50px;
    底部按钮的位置**/
    position: absolute;
    
    width: 100%;
    
    height: 100%;
    
    display: none;
    
    text-align: left;
    

  }
#codeEditor {
    
    width: 100%;
    
    font-size: 20px;
    
    

  }
.codeEditor .ͼo {
    
    background-color: #02060f;
    

  }

.cm-editor {
    
    height: 100%;
    

  }

.codeEditorTop {
    
    display: block;
    
    width: 100%;
    
    height: 30px;
    
    background: #000;
    

  }
.codeEditorTitle {
    
    color: #ff089b;
    
    position: absolute;
    
    width: 100%;
    
    text-align: center;
    
    font-size: 20px;
    

  }
.codeEditorTitleRight {
    
    position: absolute;
    
    right: 5px;
    
    top: 4px;
    

  }
.codeEditorTitleRight button {
    
    border-radius: 5px;
    

  }
.codeEditorTools {
    
    display: inline-flex;
    
    background: #b9b9b9;
    
    height: 26px;
    
    width: 100%;
    
    color: #c13011;
    
    font-size: 16px;
    

  }
.codeEditorTools select  {
    
    height: 20px;
    
    width: 120px;
    
    font-size: 16px;
    
    color: #333;
    

  }
.codeEditorTools button  {
    
    height: 25px;
    
    font-size: 16px;
    
    color: #1e0000;
    

  }
.codeEditorPlayTxt {
    
    color: #060cef;
    
    margin-left: 10px;
    
    display: inline-flex;
    

  }
.codeEditorPlay  {
    
    height: 18px;
    
    width: 18px;
    
    border-radius: 50%;
    
    border: 4px solid #FFFFFF;
    
    background: rgba(255,
     255,
     255,
     .3);
    
    cursor: pointer;
    
    margin-left: 2px;
    
    display: inline-block;
    

  }

.codeEditorPlay::after  {
    
    content: '▶';
    
    font-size: 18px;
    
    color: #FFFFFF;
    
    top: -4px;
    
    left: 3px;
    
    position: relative;
    

  }

#codeEditorSaveOper {
    
    margin-left: 5px;
    

  }
#codeEditorSaveName {
    
    width: 200px;
    
    height: 22px;
    

  }
.codeRuleEditor {
    
    font-size: 20px;
    
    height: 120px;
    

  } 
.codeRuleEditor .ͼo {
    
    background-color: #000000;
    

  }   
#codeEditorNameError {
    
    color: #FF0000;
    

  }
#codeEditorSplit  {
    
    width: 100%;
    
    height: 4px;
    
    cursor: ns-resize;
    
    background-color: #0060cb;
    

  }

/* 4663-css_chunk.js */
html,
  
body  {
    
    height: 100%;
    
    margin: 0;
    
    padding: 0;
    
    background-color: #000;
    

  }

::-webkit-scrollbar  {
    
    -webkit-appearance: none;
    
    width: 7px;
    
    height: 7px;
    

  }

::-webkit-scrollbar-corner  {
    
    -webkit-appearance: none;
    

  }

::-webkit-scrollbar-thumb  {
    
    border-radius: 4px;
    
    background-color: rgba(120,
     120,
     120,
     .5);
    
    -webkit-box-shadow: 0 0 2px rgba(255,
     255,
     255,
     .5);
    

  }


.dev-panel  {
    
    color: #DDD;
    
    position: fixed;
    
    top: 0;
    
    right: 0;
    
    bottom: 0;
    
    display: block;
    
    width: 300px;
    
    text-align: left;
    
    font-size: 14px;
    
    background-color: #091528;
    

  }

/**顶部**/
.top  {
    
    width: 100%;
    
    height: 20px;
    
    border-bottom: 2px solid #d5d5d5;
    
    background-color: #40017a;
    

  }

.topLeft  {
    
    float: left;
    
    display: inline-flex;
    

  }

.topRight  {
    
    float: right;
    
    position: relative;
    

  }

.topRight div  {
    
    float: left;
    
    margin-right: 5px;
    

  }

.topButton  {
    
    text-align: center;
    
    background: #f2f2f2;
    
    border: 1px solid #bfbfbf;
    
    color: #444;
    
    border-radius: 4px;
    
    cursor: pointer;
    
    display: inline-block;
    
    font-family: 微软雅黑;
    
    font-size: 11px;
    
    line-height: 10px;
    
    padding: 5px 5px 5px;
    
    margin: 0px 0 0 0px;
    
    vertical-align: top;
    

  }

.gameName,
  
.gameEngin,
  
.gameVersion  {
    
    color: #5bff07

  }
.gameExtends {
    
    color: #f34e4e;
    

  }

/* 左边区域 */
.left  {
    
    float: left;
    
    padding-top: 5px;
    

  }

/**顶部**/
.controls  {
    
    clear: both;
    

  }

.controls input  {
    
    vertical-align: sub;
    

  }

.refresh  {
    
    border-radius: 10px;
    
    width: 18px;
    
    height: 18px;
    
    outline: none;
    
    vertical-align: middle;
    
    background-color: white;
    
    cursor: pointer;
    

  }

.parent:hover  {
    
    background-color: #000;
    

  }

.parent.selected  {
    
    background-color: #16376B;
    

  }

/* 列表项**/
.nodes  {
    
    height: 100%;
    
    overflow-y: auto;
    
    width: 100%;
    
    clear: both;
    
    position: relative;
    
    padding: 0;
    

  }

.memberName  {
    
    columns: #FF9DC3;
    

  }

.memberName:after  {
    
    content: " : ";
    

  }

input.toggle  {
    
    margin: 0;
    
    height: 14px;
    
    float: right;
    

  }

.display-object  {
    
    color: yellowgreen;
    
    cursor: default;
    
    line-height: 16px;
    
    white-space: nowrap;
    
    clear: both;
    

  }

.display-object .icon  {
    
    cursor: pointer;
    

  }

.display-object .icon::after  {
    
    content: " ";
    

  }

.display-object .icon::before  {
    
    content: " ";
    

  }
.treeNodeSpecialName {
    
    color: #b53e6c;
    

  }
/* .children {
    
    display: none;
    

  } */

.display-object.invisible  {
    
    opacity: 0.5;
    
    /* color: #9acd3288;
     */

  }

.display-object.hidden,
  
.display-object.hidden .display-object  {
    
    columns: #B6B5B6;
    

  }


/**中间的线**/
.handle-v  {
    
    cursor: ew-resize;
    
    width: 5px;
    
    height: 100%;
    
    float: left;
    
    background-color: #666;
    

  }


/* 右边区域 */
.right  {
    
    height: 100%;
    
    width: 300px;
    
    position: absolute;
    
    right: 0;
    
    padding-top: 5px;
    

  }

.props  {
    
    overflow-y: auto;
    
    width: 100%;
    
    height: 100%;
    

  }

.props .title  {
    
    float: left;
    

  }
.propsChangeCursor  {
    
    cursor: ew-resize;
    
    user-select: none;
    

  }

.property  {
    
    text-indent: 5px;
    
    margin: 1px;
    

  }

.property.function .name:after  {
    
    content: "()"

  }

.property.searchResult.searchCurrent  {
    
    color: black;
    
    background-color: yellow;
    

  }
/**属性boolean 值的复选框**/
.propCheck {
    
    margin: 0;
    
    margin-left: 5px;
    
    height: 14px;
    
    vertical-align: middle;
    

  }
.propColor {
    
    margin: 0;
    
    margin-left: 5px;
    
    height: 14px;
    
    width:14px;
    
    vertical-align: middle;
    
    display: inline-block;
    
    border-radius: 5px;
    
    border: #9b9b9b solid 1px;
    

  }


ol  {
    
    outline-style: none;
    
    padding-left: 2em;
    
    margin: 0;
    

  }

ol li  {
    
    list-style: none;
    

  }

li.expandable  {
    
    cursor: pointer;
    

  }

li.expandable ul  {
    
    cursor: default;
    
    padding-left: 2em;
    

  }

li.noSetter>span.getter  {
    
    display: inline;
    
    opacity: 0.5;
    

  }

/**设置属性的颜色**/
span.name  {
    
    color: #FF9DC3;
    

  }

span.value  {
    
    color: yellowgreen;
    

  }

span.getter  {
    
    display: none;
    

  }

span.getter:after  {
    
    content: "get ";
    

  }

span.value input  {
    
    height: 12px;
    
    border: 0;
    
    box-shadow: #fff 0px 0px;
    
    width: 100px;
    
    background-color: #091528;
    
    color: yellowgreen;
    
    font-family: Consolas,
     Courier New,
     Courier,
     monospace;
    
    vertical-align: text-top;
    
    border-bottom: #EEE 1px solid;
    
    font-size: 12px;
    

  }

span.expand  {
    
    cursor: pointer;
    

  }

.picker  {
    
    width: 15px;
    
    height: 15px;
    
    cursor: pointer;
    
    position: absolute;
    
    left: 40px;
    
    top: 40px;
    

  }


/**菜单css*/
.contextmenu  {
    
    display: none;
    
    position: absolute;
    
    min-width: 120px;
    
    max-width: 250px;
    
    background: white;
    
    color: #555;
    
    border: black solid 1px;
    
    border-radius: 5px;
    
    overflow: hidden;
    
    z-index: 101;
    
    margin: 0;
    
    padding: 0;
    
    font-family: Verdana,
     Arial,
     Helvetica,
     sans-serif;
    
    font-size: 11px;
    

  }

.contextmenu li  {
    
    height: 22px;
    
    border-left: 3px solid transparent;
    
    list-style: none;
    

  }

.contextmenu li:hover  {
    
    background: #c8c8c9;
    
    border-left: 3px solid #1976d2;
    

  }

.contextmenu li span  {
    
    display: block;
    
    padding: 3px;
    
    text-decoration: none;
    

  }

.contextmenu li span:hover  {
    
    color: #1976d2;
    
    cursor: pointer;
    

  }


/**说明**/
.readMeEngineName  {
    
    color: #d307e1;
    

  }
.readMeEngineDes {
    
    color: #df4800;
    

  }
.readMeQQ  {
    
    color: #2600f9;
    

  }
.readMeLink {
    
    border-bottom: solid 1px #0060cb;
    
    cursor: pointer;
    
    color: #1976d2;
    

  }
.privacyDes {
    
    color: #c8c8c9;
    
    font-size: 12px;
    

  }

/**作者信息**/
.authorInfo  {
    
    touch-action: none;
    
    user-select: none;
    
    position: absolute;
    
    bottom: 5px;
    
    color: #666;
    
    right: 5px;
    

  }
/**支持**/
.supportImg  {
    
    display: block;
    
    margin: 5px auto;
    

  }

/**链接状态**/

.versionIngore  {
    
    color: #7375a8;
    

  }

.versionDes {
    
    color: #ff6124;
    

  }

.currentVersion {
    
    color: #ff0767;
    

  }

/**totast提示框**/
.totast  {
    
    width: 100%;
    
    height: 30px;
    
    position: absolute;
    
    background-color: #e6c6cb;
    
    color: #fd4113;
    
    z-index: 1000;
    
    font-size: 20px;
    
    text-align: center;
    

  }


/* 2754-css_chunk.js */
/* easylogic-colorpicker */
.easylogic-colorpicker  {
    
    position: relative;
    
    width: 224px;
    
    z-index: 1000;
    
    display: inline-block;
    
    border: 1px solid rgba(0,
     0,
     0,
     0.2);
    
    background-color: #fff;
    
    border-radius: 3px;
    
    -webkit-box-shadow: 0 0px 10px 2px rgba(0,
     0,
     0,
     0.12);
    
            box-shadow: 0 0px 10px 2px rgba(0,
     0,
     0,
     0.12);
    
    outline: none;
    
    /* theme */ 
  }
    .easylogic-colorpicker > .arrow  {
    
      position: absolute;
    
      top: -10px;
    
      left: 7px;
    
      width: 0;
    
      height: 0;
    
      border-left: 10px solid transparent;
    
      border-right: 10px solid transparent;
    
      display: none;
    
      border-bottom: 10px solid rgba(0,
     0,
     0,
     0.2);
    
      pointer-events: none;
  }
      .easylogic-colorpicker > .arrow:after  {
    
        position: absolute;
    
        content: "";
    
        top: 1px;
    
        left: -9px;
    
        width: 0;
    
        height: 0;
    
        border-left: 9px solid transparent;
    
        border-right: 9px solid transparent;
    
        border-bottom: 9px solid white;
  }
    .easylogic-colorpicker .colorpicker-body .arrow-button  {
    
      position: relative;
    
      width: 10px;
    
      height: 12px;
    
      padding: 0px;
    
      background-color: transparent;
  }
      .easylogic-colorpicker .colorpicker-body .arrow-button:before  {
    
        content: "";
    
        display: inline-block;
    
        position: absolute;
    
        left: 0px;
    
        right: 0px;
    
        top: 0px;
    
        height: 50%;
    
        width: 0;
    
        height: 0;
    
        border-left: 3px solid transparent;
    
        border-right: 3px solid transparent;
    
        border-bottom: 3px solid black;
    
        pointer-events: none;
    
        margin: 2px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
      .easylogic-colorpicker .colorpicker-body .arrow-button:after  {
    
        content: "";
    
        display: inline-block;
    
        position: absolute;
    
        left: 0px;
    
        right: 0px;
    
        bottom: 0px;
    
        top: 50%;
    
        width: 0;
    
        height: 0;
    
        border-left: 3px solid transparent;
    
        border-right: 3px solid transparent;
    
        border-top: 3px solid black;
    
        pointer-events: none;
    
        margin: 2px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
    .easylogic-colorpicker .colorpicker-body .color  {
    
      position: relative;
    
      height: 120px;
    
      overflow: hidden;
    
      cursor: pointer;
  }
      .easylogic-colorpicker .colorpicker-body .color > .saturation  {
    
        position: relative;
    
        width: 100%;
    
        height: 100%;
  }
        .easylogic-colorpicker .colorpicker-body .color > .saturation > .value  {
    
          position: relative;
    
          width: 100%;
    
          height: 100%;
  }
          .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer  {
    
            position: absolute;
    
            width: 10px;
    
            height: 10px;
    
            border-radius: 50%;
    
            -webkit-transform: translateX(-50%) translateY(-50%);
    
                    transform: translateX(-50%) translateY(-50%);
  }
            .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer > div  {
    
              border: 1px solid #ececec;
    
              -webkit-box-shadow: 0 0 2px 0 rgba(0,
     0,
     0,
     0.05);
    
                      box-shadow: 0 0 2px 0 rgba(0,
     0,
     0,
     0.05);
    
              -webkit-box-sizing: border-box;
    
                      box-sizing: border-box;
    
              position: absolute;
    
              width: 10px;
    
              height: 4px;
    
              background-color: white;
  }
            .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .left-saturation  {
    
              left: 0%;
    
              top: 50%;
    
              -webkit-transform: translateX(calc(-100% - 4px)) translateY(-50%);
    
                      transform: translateX(calc(-100% - 4px)) translateY(-50%);
    
              cursor: col-resize;
  }
            .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .right-saturation  {
    
              left: 100%;
    
              top: 50%;
    
              -webkit-transform: translateX(4px) translateY(-50%);
    
                      transform: translateX(4px) translateY(-50%);
    
              cursor: col-resize;
  }
            .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .top-value  {
    
              width: 4px;
    
              height: 10px;
    
              left: 50%;
    
              top: 0%;
    
              -webkit-transform: translateX(-50%) translateY(calc(-100% - 4px));
    
                      transform: translateX(-50%) translateY(calc(-100% - 4px));
    
              cursor: row-resize;
  }
            .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer .bottom-value  {
    
              width: 4px;
    
              height: 10px;
    
              left: 50%;
    
              top: 100%;
    
              -webkit-transform: translateX(-50%) translateY(4px);
    
                      transform: translateX(-50%) translateY(4px);
    
              cursor: row-resize;
  }
      .easylogic-colorpicker .colorpicker-body .color > .saturation  {
    
        background-color: rgba(204,
     154,
     129,
     0);
    
        background-image: -webkit-gradient(linear,
     left top,
     right top,
     from(#FFF),
     to(rgba(204,
     154,
     129,
     0)));
    
        background-image: linear-gradient(to right,
     #FFF,
     rgba(204,
     154,
     129,
     0));
    
        background-repeat: repeat-x;
  }
        .easylogic-colorpicker .colorpicker-body .color > .saturation > .value  {
    
          background-image: -webkit-gradient(linear,
     left bottom,
     left top,
     from(#000000),
     to(rgba(204,
     154,
     129,
     0)));
    
          background-image: linear-gradient(to top,
     #000000,
     rgba(204,
     154,
     129,
     0));
  }
          .easylogic-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer  {
    
            border: 1px solid #fff;
    
            -webkit-box-shadow: 0 0 2px 0 rgba(0,
     0,
     0,
     0.05);
    
                    box-shadow: 0 0 2px 0 rgba(0,
     0,
     0,
     0.05);
  }
    .easylogic-colorpicker .colorpicker-body .control  {
    
      position: relative;
    
      padding: 10px 0px 10px 0px;
    
      -webkit-user-select: none;
    
         -moz-user-select: none;
    
          -ms-user-select: none;
    
              user-select: none;
  }
      .easylogic-colorpicker .colorpicker-body .control > .color,
  
      .easylogic-colorpicker .colorpicker-body .control > .empty  {
    
        position: absolute;
    
        left: 12px;
    
        top: 14px;
    
        width: 30px;
    
        height: 30px;
    
        border-radius: 50%;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
      .easylogic-colorpicker .colorpicker-body .control > .color2,
  
      .easylogic-colorpicker .colorpicker-body .control > .empty2  {
    
        position: absolute;
    
        left: 12px;
    
        top: 50px;
    
        width: 30px;
    
        height: 20px;
    
        border-radius: 4px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
      .easylogic-colorpicker .colorpicker-body .control > .color  {
    
        border: 1px solid rgba(0,
     0,
     0,
     0.1);
  }
      .easylogic-colorpicker .colorpicker-body .control > .hue  {
    
        position: relative;
    
        padding: 3px 16px;
    
        margin: 0px 0px 0px 42px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        cursor: pointer;
  }
        .easylogic-colorpicker .colorpicker-body .control > .hue > .hue-container  {
    
          position: relative;
    
          width: 100%;
    
          height: 14px;
    
          border-radius: 3px;
  }
      .easylogic-colorpicker .colorpicker-body .control > .hue-scale  {
    
        position: relative;
    
        padding: 3px 16px;
    
        margin: 0px 0px 0px 42px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        cursor: pointer;
  }
        .easylogic-colorpicker .colorpicker-body .control > .hue-scale > .hue-scale-container  {
    
          position: relative;
    
          width: 100%;
    
          height: 14px;
  }
      .easylogic-colorpicker .colorpicker-body .control > .opacity  {
    
        position: relative;
    
        padding: 3px 16px;
    
        margin: 0px 0px 0px 42px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        cursor: pointer;
  }
        .easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container  {
    
          position: relative;
    
          width: 100%;
    
          height: 14px;
    
          border-radius: 3px;
  }
      .easylogic-colorpicker .colorpicker-body .control .drag-bar,
  
      .easylogic-colorpicker .colorpicker-body .control .drag-bar2  {
    
        position: absolute;
    
        cursor: pointer;
    
        top: 50%;
    
        left: 0px;
    
        -webkit-transform: translateX(-50%) translateY(-50%);
    
                transform: translateX(-50%) translateY(-50%);
    
        width: 12px;
    
        height: 12px;
    
        border-radius: 50%;
  }
      .easylogic-colorpicker .colorpicker-body .control > .hue > .hue-container  {
    
        background: -webkit-gradient(linear,
     left top,
     right top,
     from(#ff0000),
     color-stop(17%,
     #ffff00),
     color-stop(33%,
     #00ff00),
     color-stop(50%,
     #00ffff),
     color-stop(67%,
     #0000ff),
     color-stop(83%,
     #ff00ff),
     to(#ff0000));
    
        background: linear-gradient(to right,
     #ff0000 0%,
     #ffff00 17%,
     #00ff00 33%,
     #00ffff 50%,
     #0000ff 67%,
     #ff00ff 83%,
     #ff0000 100%);
  }
      .easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container  {
    
        background-color: transparent;
    
        background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
        background-size: 10px 10px;
    
        background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
  }
        .easylogic-colorpicker .colorpicker-body .control > .opacity > .opacity-container > .color-bar  {
    
          position: absolute;
    
          display: block;
    
          content: "";
    
          left: 0px;
    
          right: 0px;
    
          bottom: 0px;
    
          top: 0px;
  }
      .easylogic-colorpicker .colorpicker-body .control > .empty,
  
      .easylogic-colorpicker .colorpicker-body .control > .empty2  {
    
        background-color: transparent;
    
        background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
        background-size: 10px 10px;
    
        background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
  }
      .easylogic-colorpicker .colorpicker-body .control .drag-bar,
  
      .easylogic-colorpicker .colorpicker-body .control .drag-bar2  {
    
        border: 1px solid rgba(0,
     0,
     0,
     0.05);
    
        -webkit-box-shadow: 2px 2px 2px 0px rgba(0,
     0,
     0,
     0.2);
    
                box-shadow: 2px 2px 2px 0px rgba(0,
     0,
     0,
     0.2);
    
        background-color: #fefefe;
  }
    .easylogic-colorpicker .colorpicker-body .information  {
    
      /*border-top: 1px solid #e8e8e8;
    */
      position: relative;
    
      -webkit-box-sizing: padding-box;
    
              box-sizing: padding-box;
  }
      .easylogic-colorpicker .colorpicker-body .information > input  {
    
        position: absolute;
    
        font-size: 10px;
    
        height: 20px;
    
        bottom: 20px;
    
        padding: 0 0 0 2px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        -webkit-user-select: text;
    
           -moz-user-select: text;
    
            -ms-user-select: text;
    
                user-select: text;
  }
        .easylogic-colorpicker .colorpicker-body .information > input[type=number]  {
    
          -webkit-appearance: none;
    
             -moz-appearance: none;
    
                  appearance: none;
  }
        .easylogic-colorpicker .colorpicker-body .information > input[type=number]::-webkit-inner-spin-button,
   .easylogic-colorpicker .colorpicker-body .information > input[type=number]::-webkit-outer-spin-button  {
    
          -webkit-appearance: none;
    
                  appearance: none;
    
          margin: 0;
  }
      .easylogic-colorpicker .colorpicker-body .information.hex > .information-item.hex  {
    
        display: -webkit-box;
    
        display: -ms-flexbox;
    
        display: flex;
  }
      .easylogic-colorpicker .colorpicker-body .information.rgb > .information-item.rgb  {
    
        display: -webkit-box;
    
        display: -ms-flexbox;
    
        display: flex;
  }
      .easylogic-colorpicker .colorpicker-body .information.hsl > .information-item.hsl  {
    
        display: -webkit-box;
    
        display: -ms-flexbox;
    
        display: flex;
  }
      .easylogic-colorpicker .colorpicker-body .information > .information-item  {
    
        display: none;
    
        position: relative;
    
        padding: 0px 5px;
    
        padding-left: 9px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        margin-right: 40px;
  }
        .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field  {
    
          display: block;
    
          -webkit-box-flex: 1;
    
              -ms-flex: 1;
    
                  flex: 1;
    
          padding: 3px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          position: relative;
  }
          .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field > .title  {
    
            text-align: center;
    
            font-size: 12px;
    
            color: #a9a9a9;
    
            padding-top: 2px;
  }
          .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input  {
    
            text-align: center;
    
            width: 100%;
    
            padding: 3px;
    
            height: 21px;
    
            font-size: 11px;
    
            color: #333;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            -webkit-user-select: text;
    
               -moz-user-select: text;
    
                -ms-user-select: text;
    
                    user-select: text;
    
            border: 1px solid #cbcbcb;
    
            border-radius: 2px;
  }
            .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]  {
    
              -webkit-appearance: none;
    
                 -moz-appearance: none;
    
                      appearance: none;
  }
            .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button,
   .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button  {
    
              -webkit-appearance: none;
    
                      appearance: none;
    
              margin: 0;
  }
          .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-l input[type=number],
   .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-s input[type=number]  {
    
            padding-left: 1px;
    
            padding-right: 10px;
  }
          .easylogic-colorpicker .colorpicker-body .information > .information-item > .input-field .postfix  {
    
            display: inline-block;
    
            position: absolute;
    
            right: 3px;
    
            top: 2px;
    
            height: 21px;
    
            line-height: 2;
    
            padding: 2px;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            text-align: center;
    
            font-size: 11px;
  }
      .easylogic-colorpicker .colorpicker-body .information > .information-change  {
    
        position: absolute;
    
        display: block;
    
        width: 40px;
    
        top: 0px;
    
        right: 0px;
    
        bottom: 0px;
    
        text-align: center;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        padding-top: 5px;
  }
        .easylogic-colorpicker .colorpicker-body .information > .information-change > .format-change-button  {
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          background: transparent;
    
          border: 0px;
    
          cursor: pointer;
    
          outline: none;
  }
      .easylogic-colorpicker .colorpicker-body .information > .title  {
    
        color: #a3a3a3;
  }
      .easylogic-colorpicker .colorpicker-body .information > .input  {
    
        color: #333;
  }
    .easylogic-colorpicker .colorpicker-body .colorsets  {
    
      border-top: 1px solid #e2e2e2;
  }
      .easylogic-colorpicker .colorpicker-body .colorsets > .menu  {
    
        float: right;
    
        padding: 10px 5px;
    
        padding-right: 15px;
  }
        .easylogic-colorpicker .colorpicker-body .colorsets > .menu button  {
    
          border: 0px;
    
          font-size: 14px;
    
          font-weight: 300;
    
          font-family: serif,
     sans-serif;
    
          outline: none;
    
          cursor: pointer;
  }
      .easylogic-colorpicker .colorpicker-body .colorsets > .color-list  {
    
        margin-right: 30px;
    
        display: block;
    
        padding: 12px 0px 0px 12px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        line-height: 0;
  }
        .easylogic-colorpicker .colorpicker-body .colorsets > .color-list h6  {
    
          margin-top: 0px;
    
          margin-bottom: 8px;
  }
        .easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item  {
    
          width: 13px;
    
          height: 13px;
    
          border-radius: 2px;
    
          display: inline-block;
    
          margin-right: 12px;
    
          margin-bottom: 12px;
    
          position: relative;
    
          background-size: contain;
    
          overflow: hidden;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          cursor: pointer;
    
          vertical-align: middle;
  }
          .easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item:hover  {
    
            -webkit-transform: scale(1.2);
    
                    transform: scale(1.2);
  }
          .easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item .empty  {
    
            position: absolute;
    
            left: 0px;
    
            top: 0px;
    
            background-color: transparent;
    
            background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
            background-size: 10px 10px;
    
            background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
    
            width: 100%;
    
            height: 100%;
    
            padding: 0px;
    
            margin: 0px;
    
            pointer-events: none;
  }
          .easylogic-colorpicker .colorpicker-body .colorsets > .color-list .color-item .color-view  {
    
            position: absolute;
    
            left: 0px;
    
            top: 0px;
    
            width: 100%;
    
            height: 100%;
    
            padding: 0px;
    
            margin: 0px;
    
            pointer-events: none;
    
            border: 1px solid rgba(0,
     0,
     0,
     0.1);
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
  }
        .easylogic-colorpicker .colorpicker-body .colorsets > .color-list .add-color-item  {
    
          width: 13px;
    
          height: 13px;
    
          display: inline-block;
    
          margin-right: 12px;
    
          margin-bottom: 12px;
    
          cursor: pointer;
    
          line-height: 1;
    
          text-align: center;
    
          font-size: 16px;
    
          font-weight: 400;
    
          font-family: serif,
    sans-serif;
    
          color: #8e8e8e;
    
          vertical-align: middle;
  }
    .easylogic-colorpicker .colorpicker-body .color-chooser  {
    
      position: absolute;
    
      left: 0px;
    
      right: 0px;
    
      bottom: 0px;
    
      top: 0px;
    
      opacity: 0;
    
      background-color: rgba(0,
     0,
     0,
     0.5);
    
      -webkit-transition: opacity 0.05s ease-out;
    
      transition: opacity 0.05s ease-out;
    
      pointer-events: none;
  }
      .easylogic-colorpicker .colorpicker-body .color-chooser.open  {
    
        opacity: 1;
    
        pointer-events: all;
  }
      .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container  {
    
        position: absolute;
    
        top: 120px;
    
        left: 0px;
    
        right: 0px;
    
        bottom: 0px;
    
        background-color: white;
  }
        .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header  {
    
          position: absolute;
    
          top: 0px;
    
          left: 0px;
    
          right: 0px;
    
          height: 34px;
    
          display: -webkit-box;
    
          display: -ms-flexbox;
    
          display: flex;
    
          padding: 3px 0px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          border-bottom: 1px solid rgba(0,
     0,
     0,
     0.2);
  }
          .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title  {
    
            -webkit-box-flex: 2;
    
                -ms-flex: 2;
    
                    flex: 2;
    
            font-weight: bold;
    
            font-size: 15px;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            margin-right: 30px;
    
            vertical-align: middle;
    
            margin: 0px;
    
            padding: 5px;
    
            padding-left: 14px;
    
            overflow: hidden;
    
            text-overflow: ellipsis;
    
            white-space: nowrap;
    
            color: #000;
    
            text-align: left;
  }
          .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items  {
    
            -webkit-box-flex: 1;
    
                -ms-flex: 1;
    
                    flex: 1;
    
            text-align: right;
    
            padding-right: 10px;
    
            display: block;
    
            height: 100%;
    
            line-height: 2;
    
            cursor: pointer;
  }
        .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list  {
    
          position: absolute;
    
          top: 34px;
    
          left: 0px;
    
          right: 0px;
    
          bottom: 0px;
    
          overflow: auto;
  }
          .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item  {
    
            cursor: pointer;
    
            display: -webkit-box;
    
            display: -ms-flexbox;
    
            display: flex;
    
            padding: 3px 0px;
    
            border-bottom: 1px solid rgba(0,
     0,
     0,
     0.1);
  }
            .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover  {
    
              background-color: rgba(0,
     0,
     0,
     0.05);
  }
            .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title  {
    
              -webkit-box-flex: 2;
    
                  -ms-flex: 2;
    
                      flex: 2;
    
              font-size: 14px;
    
              -webkit-box-sizing: border-box;
    
                      box-sizing: border-box;
    
              margin-right: 30px;
    
              vertical-align: middle;
    
              pointer-events: none;
    
              margin: 0px;
    
              padding: 5px;
    
              padding-left: 14px;
    
              font-weight: normal;
    
              font-size: 13px;
    
              overflow: hidden;
    
              text-overflow: ellipsis;
    
              white-space: nowrap;
    
              color: #000;
    
              text-align: left;
  }
            .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items  {
    
              -webkit-box-flex: 3;
    
                  -ms-flex: 3;
    
                      flex: 3;
    
              display: block;
    
              height: 100%;
    
              line-height: 1.6;
    
              cursor: pointer;
    
              pointer-events: none;
  }
              .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item  {
    
                width: 13px;
    
                height: 13px;
    
                border-radius: 3px;
    
                display: inline-block;
    
                margin-right: 10px;
    
                background-color: transparent;
    
                background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
                background-size: 10px 10px;
    
                background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
    
                background-size: contain;
    
                border: 1px solid #dddddd;
    
                overflow: hidden;
    
                -webkit-box-sizing: border-box;
    
                        box-sizing: border-box;
    
                cursor: pointer;
    
                vertical-align: middle;
  }
                .easylogic-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view  {
    
                  width: 100%;
    
                  height: 100%;
    
                  padding: 0px;
    
                  margin: 0px;
    
                  pointer-events: none;
  }
    .easylogic-colorpicker .gradient-editor  {
    
      position: relative;
    
      -webkit-user-select: none;
    
         -moz-user-select: none;
    
          -ms-user-select: none;
    
              user-select: none;
  }
      .easylogic-colorpicker .gradient-editor .tools  {
    
        padding: 4px 6px;
  }
      .easylogic-colorpicker .gradient-editor .unit  {
    
        display: grid;
    
        grid-template-columns: 110px 35px 50px;
    
        grid-column-gap: 5px;
    
        font-size: 11px;
  }
        .easylogic-colorpicker .gradient-editor .unit input,
   .easylogic-colorpicker .gradient-editor .unit select  {
    
          width: 100%;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
  }
        .easylogic-colorpicker .gradient-editor .unit input  {
    
          width: 35px;
  }
      .easylogic-colorpicker .gradient-editor [data-editor]  {
    
        display: none;
    
        margin-top: 2px;
  }
        .easylogic-colorpicker .gradient-editor [data-editor] > label  {
    
          font-size: 11px;
  }
      .easylogic-colorpicker .gradient-editor:not([data-selected-editor*='static-gradient']) [data-editor='gradient'],
  
      .easylogic-colorpicker .gradient-editor:not([data-selected-editor*='static-gradient']) [data-editor='tools']  {
    
        display: block;
  }
      .easylogic-colorpicker .gradient-editor[data-selected-editor='linear-gradient'] [data-editor='angle'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-linear-gradient'] [data-editor='angle'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='angle'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='angle']  {
    
        display: block;
  }
      .easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='centerX'],
  
      .easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='centerY'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='centerX'],
  
      .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='centerY'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='centerX'],
  
      .easylogic-colorpicker .gradient-editor[data-selected-editor='conic-gradient'] [data-editor='centerY'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='centerX'],
  
      .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-conic-gradient'] [data-editor='centerY']  {
    
        display: block;
  }
      .easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='radialType'],
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='radialType']  {
    
        margin-top: 5px;
    
        display: grid;
    
        grid-template-columns: 110px 90px;
    
        grid-column-gap: 2px;
  }
        .easylogic-colorpicker .gradient-editor[data-selected-editor='radial-gradient'] [data-editor='radialType'] select,
   .easylogic-colorpicker .gradient-editor[data-selected-editor='repeating-radial-gradient'] [data-editor='radialType'] select  {
    
          width: 100%;
  }
      .easylogic-colorpicker .gradient-editor .sub-editor  {
    
        padding: 0px 8px;
  }
      .easylogic-colorpicker .gradient-editor .gradient-steps  {
    
        position: relative;
    
        height: 30px;
  }
      .easylogic-colorpicker .gradient-editor .hue-container,
  
      .easylogic-colorpicker .gradient-editor .hue  {
    
        position: absolute;
    
        left: 10px;
    
        right: 10px;
    
        top: 4px;
    
        height: 14px;
    
        border-radius: 10px;
    
        border: 1px solid #cccccc;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        background-color: transparent;
    
        background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
        background-size: 10px 10px;
    
        background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
    
        pointer-events: all;
  }
      .easylogic-colorpicker .gradient-editor .hue  {
    
        pointer-events: none;
  }
        .easylogic-colorpicker .gradient-editor .hue .step-list  {
    
          position: absolute;
    
          width: 100%;
    
          height: 100%;
    
          top: 0px;
    
          left: 0px;
    
          border-radius: 10px;
    
          pointer-events: none;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="0"] [data-index="0"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="1"] [data-index="1"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="2"] [data-index="2"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="3"] [data-index="3"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="4"] [data-index="4"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="5"] [data-index="5"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="6"] [data-index="6"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="7"] [data-index="7"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="8"] [data-index="8"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="9"] [data-index="9"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="10"] [data-index="10"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="11"] [data-index="11"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="12"] [data-index="12"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="13"] [data-index="13"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="14"] [data-index="14"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="15"] [data-index="15"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="16"] [data-index="16"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="17"] [data-index="17"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="18"] [data-index="18"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"]  {
    
            border: 0px;
    
            -webkit-transform: translateX(-50%) translateY(calc(100%));
    
                    transform: translateX(-50%) translateY(calc(100%));
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list[data-selected-index="19"] [data-index="19"] .arrow  {
    
              display: block;
  }
          .easylogic-colorpicker .gradient-editor .hue .step-list .step  {
    
            pointer-events: all;
    
            width: 10px;
    
            height: 10px;
    
            border: 1px solid white;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            display: inline-block;
    
            position: absolute;
    
            top: 50%;
    
            border-radius: 100%;
    
            -webkit-box-shadow: 0 0 2px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0 0 2px 0px rgba(0,
     0,
     0,
     0.5);
    
            -webkit-transform: translateX(-50%) translateY(-50%);
    
                    transform: translateX(-50%) translateY(-50%);
    
            background-color: transparent;
    
            background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
            background-size: 10px 10px;
    
            background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list .step[data-cut='true']  {
    
              border-radius: 0%;
  }
              .easylogic-colorpicker .gradient-editor .hue .step-list .step[data-cut='true'] .color-view  {
    
                border-radius: 0%;
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list .step .color-view  {
    
              position: absolute;
    
              left: 0px;
    
              top: 0px;
    
              bottom: 0px;
    
              right: 0px;
    
              border-radius: 100%;
    
              pointer-events: none;
  }
            .easylogic-colorpicker .gradient-editor .hue .step-list .step .arrow  {
    
              position: absolute;
    
              left: 50%;
    
              display: none;
    
              top: 0%;
    
              width: 5px;
    
              height: 5px;
    
              -webkit-transform: translateX(-50%) translateY(-120%);
    
                      transform: translateX(-50%) translateY(-120%);
    
              pointer-events: none;
    
              -webkit-clip-path: polygon(40% 0%,
     60% 0%,
     60% 100%,
     40% 100%);
    
                      clip-path: polygon(40% 0%,
     60% 0%,
     60% 100%,
     40% 100%);
  }
      .easylogic-colorpicker .gradient-editor input[type=range]  {
    
        -webkit-appearance: none;
    
           -moz-appearance: none;
    
                appearance: none;
    
        width: 100%;
    
        margin: 6.2px 0;
    
        background-color: transparent;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]:focus  {
    
        outline: none;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-webkit-slider-runnable-track  {
    
        width: 100%;
    
        height: 1px;
    
        cursor: pointer;
    
        background: #556375;
    
        border-radius: 0px;
    
        border: 0px solid #010101;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-webkit-slider-thumb  {
    
        height: 10px;
    
        width: 10px;
    
        border-radius: 10px;
    
        background: #556375;
    
        cursor: pointer;
    
        -webkit-appearance: none;
    
                appearance: none;
    
        margin-top: -5px;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]:focus::-webkit-slider-runnable-track  {
    
        background: #3174ad;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-moz-range-track  {
    
        width: 100%;
    
        height: 1px;
    
        cursor: pointer;
    
        background: #556375;
    
        border-radius: 0px;
    
        border: 0px solid #010101;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-moz-range-thumb  {
    
        border: 1px solid #000000;
    
        height: 10px;
    
        width: 10px;
    
        border-radius: 9px;
    
        background: #556375;
    
        cursor: pointer;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-ms-track  {
    
        width: 100%;
    
        height: 1px;
    
        cursor: pointer;
    
        background: transparent;
    
        border-color: transparent;
    
        color: transparent;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-ms-fill-lower  {
    
        background: #556375;
    
        border: 0px solid #010101;
    
        border-radius: 0px;
    
        box-shadow: 0px 0px 0px #000000,
     0px 0px 0px #0d0d0d;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-ms-fill-upper  {
    
        background: #556375;
    
        border: 0px solid #010101;
    
        border-radius: 0px;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]::-ms-thumb  {
    
        height: 10px;
    
        width: 10px;
    
        border-radius: 9px;
    
        background: #556375;
    
        cursor: pointer;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]:focus::-ms-fill-lower  {
    
        background: #556375;
  }
      .easylogic-colorpicker .gradient-editor input[type=range]:focus::-ms-fill-upper  {
    
        background: #556375;
  }
    .easylogic-colorpicker.gradient-picker  {
    
      width: 460px;
    
      -webkit-box-sizing: border-box;
    
              box-sizing: border-box;
  }
      .easylogic-colorpicker.gradient-picker .gradient-body  {
    
        display: grid;
    
        grid-template-columns: 1fr 224px;
  }
        .easylogic-colorpicker.gradient-picker .gradient-body > div:first-child  {
    
          padding: 5px;
    
          border-right: 1px solid #cccccc;
  }
      .easylogic-colorpicker.gradient-picker .popup-item  {
    
        margin-bottom: 5px;
  }
      .easylogic-colorpicker.gradient-picker .grid-2  {
    
        display: grid;
    
        grid-template-columns: 60px 1fr;
  }
        .easylogic-colorpicker.gradient-picker .grid-2 label  {
    
          font-size: 11px;
    
          padding-right: 2px;
    
          text-align: left;
  }
      .easylogic-colorpicker.gradient-picker label  {
    
        font-size: 11px;
  }
      .easylogic-colorpicker.gradient-picker .gradient-preview  {
    
        width: 100%;
    
        height: 100px;
    
        position: relative;
    
        margin-bottom: 5px;
    
        border: 1px solid #cccccc;
    
        border-radius: 3px;
    
        overflow: hidden;
    
        background-color: transparent;
    
        background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
        background-size: 10px 10px;
    
        background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
  }
        .easylogic-colorpicker.gradient-picker .gradient-preview .gradient-view  {
    
          position: absolute;
    
          left: 0px;
    
          top: 0px;
    
          right: 0px;
    
          bottom: 0px;
  }
      .easylogic-colorpicker.gradient-picker .picker-tab  {
    
        -webkit-user-select: none;
    
           -moz-user-select: none;
    
            -ms-user-select: none;
    
                user-select: none;
  }
        .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list  {
    
          text-align: center;
    
          padding: 2px 5px;
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="linear-gradient"] .picker-tab-item[data-selected-value="linear-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="linear-gradient"] .picker-tab-item[data-selected-value="linear-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-linear-gradient"] .picker-tab-item[data-selected-value="repeating-linear-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-linear-gradient"] .picker-tab-item[data-selected-value="repeating-linear-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="radial-gradient"] .picker-tab-item[data-selected-value="radial-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="radial-gradient"] .picker-tab-item[data-selected-value="radial-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-radial-gradient"] .picker-tab-item[data-selected-value="repeating-radial-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-radial-gradient"] .picker-tab-item[data-selected-value="repeating-radial-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="conic-gradient"] .picker-tab-item[data-selected-value="conic-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="conic-gradient"] .picker-tab-item[data-selected-value="conic-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-conic-gradient"] .picker-tab-item[data-selected-value="repeating-conic-gradient"]  {
    
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
    
                    box-shadow: 0px 0px 3px 0px rgba(0,
     0,
     0,
     0.5);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list[data-value="repeating-conic-gradient"] .picker-tab-item[data-selected-value="repeating-conic-gradient"] .icon svg path  {
    
              fill: rgba(0,
     0,
     255,
     0.5);
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item  {
    
            display: inline-block;
    
            vertical-align: middle;
    
            height: 20px;
    
            width: 20px;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            cursor: pointer;
    
            position: relative;
    
            border-radius: 20%;
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon  {
    
              pointer-events: none;
    
              border-radius: 100%;
    
              display: inline-block;
    
              width: 90%;
    
              height: 90%;
    
              position: absolute;
    
              left: 50%;
    
              top: 50%;
    
              -webkit-transform: translateX(-50%) translateY(-50%);
    
                      transform: translateX(-50%) translateY(-50%);
  }
              .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item .icon svg  {
    
                width: 100%;
    
                height: 100%;
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="static-gradient"] .icon  {
    
              background-image: -webkit-gradient(linear,
     left top,
     right top,
     from(red),
     to(red));
    
              background-image: linear-gradient(to right,
     red,
     red);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="linear-gradient"] .icon  {
    
              background-image: -webkit-gradient(linear,
     left top,
     right top,
     from(black),
     to(gray));
    
              background-image: linear-gradient(to right,
     black,
     gray);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="radial-gradient"] .icon  {
    
              background-image: radial-gradient(closest-side,
     black,
     #ebf8e1,
     gray);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="conic-gradient"] .icon  {
    
              background-image: conic-gradient(black,
     #ebf8e1);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-linear-gradient"] .icon  {
    
              background-image: repeating-linear-gradient(45deg,
     #3f87a6,
     #ebf8e1 15%,
     #f69d3c 20%);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-radial-gradient"] .icon  {
    
              background-image: repeating-radial-gradient(circle,
     #3f87a6,
     #ebf8e1 15%,
     #f69d3c 20%);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-tab-list .picker-tab-item[data-selected-value="repeating-conic-gradient"] .icon  {
    
              background-image: repeating-conic-gradient(#3f87a6,
     #ebf8e1 5%,
     #f69d3c 10%);
  }
        .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector  {
    
          padding: 2px 10px;
  }
          .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps  {
    
            position: relative;
    
            display: block;
    
            height: 30px;
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue-container  {
    
              width: 100%;
    
              height: 14px;
    
              position: absolute;
    
              z-index: 0;
    
              background-color: transparent;
    
              background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
              background-size: 10px 10px;
    
              background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
    
              -webkit-box-shadow: 0 0 1px 0 rgba(0,
     0,
     0,
     0.1);
    
                      box-shadow: 0 0 1px 0 rgba(0,
     0,
     0,
     0.1);
  }
            .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue  {
    
              position: relative;
    
              padding: 0px;
    
              margin: 0px;
    
              cursor: pointer;
  }
              .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue > .step-list  {
    
                position: relative;
    
                width: 100%;
    
                cursor: copy;
    
                height: 14px;
    
                z-index: 1;
  }
                .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue > .step-list.mode-drag  {
    
                  cursor: pointer;
  }
              .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar  {
    
                border: 0px;
    
                background-color: transparent;
    
                border: 2px solid white;
    
                -webkit-box-shadow: 0 0 2px 0px rgba(0,
     0,
     0,
     0.6);
    
                        box-shadow: 0 0 2px 0px rgba(0,
     0,
     0,
     0.6);
    
                width: 10px;
    
                height: 10px;
    
                -webkit-transform: none;
    
                        transform: none;
    
                border-radius: 50%;
    
                display: inline-block;
    
                left: 0px;
    
                top: 17px;
    
                -webkit-transform: translateX(-50%);
    
                        transform: translateX(-50%);
    
                position: absolute;
    
                background-color: rgba(255,
     255,
     255,
     0.8);
    
                cursor: pointer;
    
                -webkit-transition: top 0.3s ease-out;
    
                transition: top 0.3s ease-out;
  }
                .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar .guide-line  {
    
                  pointer-events: none;
    
                  position: absolute;
    
                  width: 1px;
    
                  height: 0px;
    
                  bottom: 8px;
    
                  left: 3px;
    
                  -webkit-transform: translateX(-1px);
    
                          transform: translateX(-1px);
    
                  -webkit-transition: all 0.3s ease-out;
    
                  transition: all 0.3s ease-out;
  }
                .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected  {
    
                  z-index: 1;
    
                  top: 30px;
  }
                  .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-line  {
    
                    height: 17px;
  }
                  .easylogic-colorpicker.gradient-picker .picker-tab .picker-gradient-selector .gradient-steps .hue .drag-bar.selected .guide-change  {
    
                    opacity: 1;
  }
      .easylogic-colorpicker.gradient-picker .easylogic-colorpicker  {
    
        width: 223px;
    
        border-radius: 0px;
    
        border-top-right-radius: 3px;
    
        border-bottom-right-radius: 3px;
    
        border: 0px;
    
        -webkit-box-shadow: none;
    
                box-shadow: none;
  }
    .easylogic-colorpicker.sketch  {
    
      border-radius: 5px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .color  {
    
        margin: 10px 10px 2px 10px;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        height: 150px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .control  {
    
        padding: 0px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .color,
   .easylogic-colorpicker.sketch > .colorpicker-body > .control > .empty  {
    
          position: absolute;
    
          right: 10px;
    
          left: auto;
    
          top: 2px;
    
          width: 40px;
    
          height: 44px;
    
          border-radius: 2px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .color2,
   .easylogic-colorpicker.sketch > .colorpicker-body > .control > .empty2  {
    
          position: absolute;
    
          right: 10px;
    
          left: auto;
    
          top: 50px;
    
          width: 40px;
    
          height: 20px;
    
          border-radius: 2px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .color  {
    
          -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,
     0,
     0,
     0.5);
    
                  box-shadow: inset 0px 0px 1px 0px rgba(0,
     0,
     0,
     0.5);
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue  {
    
          position: relative;
    
          padding: 2px 2px 2px 10px;
    
          margin: 0px 50px 0px 0px;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue > .hue-container  {
    
            border-radius: 0px;
    
            height: 20px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue-scale  {
    
          position: relative;
    
          padding: 2px 2px 2px 10px;
    
          margin: 0px 50px 0px 0px;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .control > .hue-scale > .hue-scale-container  {
    
            border-radius: 0px;
    
            height: 20px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control > .opacity  {
    
          position: relative;
    
          padding: 2px 2px 2px 10px;
    
          margin: 0px 50px 0px 0px;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .control > .opacity > .opacity-container  {
    
            border-radius: 0px;
    
            height: 20px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar,
   .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2  {
    
          border-radius: 0px;
    
          top: 50%;
    
          left: 0px;
    
          width: 5px;
    
          height: 80%;
    
          -webkit-transform: translateX(-50%) translateY(-50%);
    
                  transform: translateX(-50%) translateY(-50%);
    
          border-radius: 1px;
    
          bottom: 1px !important;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar.first,
   .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.first  {
    
            left: 0px;
    
            -webkit-transform: translateX(50%) translateY(-50%) !important;
    
                    transform: translateX(50%) translateY(-50%) !important;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar.last,
   .easylogic-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.last  {
    
            -webkit-transform: translateX(-110%) translateY(-50%) !important;
    
                    transform: translateX(-110%) translateY(-50%) !important;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-change  {
    
        display: none;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.rgb  {
    
        display: inherit;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.hsl  {
    
        display: none !important;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hex  {
    
        display: inherit;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hsl  {
    
        display: none !important;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.rgb  {
    
        display: none !important;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.hsl  {
    
        display: inherit;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item  {
    
        display: -webkit-inline-box !important;
    
        display: -ms-inline-flexbox !important;
    
        display: inline-flex !important;
    
        margin-right: 0px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field  {
    
          padding-left: 0px;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child  {
    
            padding-right: 0px;
  }
          .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title  {
    
            color: black;
    
            font-size: 11px;
    
            cursor: pointer;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child:not(:first-child)  {
    
          padding-right: 0px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.hex  {
    
        width: 74px;
    
        padding-right: 0px;
    
        padding-left: 5px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.rgb  {
    
        width: 140px;
    
        padding-left: 0px;
    
        padding-right: 0px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl  {
    
        display: none;
    
        width: 140px;
    
        padding-left: 0px;
    
        padding-right: 0px;
  }
      .easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list  {
    
        margin-right: 0px;
    
        padding-right: 12px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list h6  {
    
          margin-top: 0px;
    
          margin-bottom: 8px;
  }
        .easylogic-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list .color-item  {
    
          width: 16px;
    
          height: 16px;
    
          border-radius: 3px;
    
          margin-right: 9px;
    
          margin-bottom: 10px;
  }
    .easylogic-colorpicker.palette  {
    
      border-radius: 3px;
    
      -webkit-box-shadow: none;
    
              box-shadow: none;
  }
      .easylogic-colorpicker.palette > .colorpicker-body > .color  {
    
        display: none;
  }
      .easylogic-colorpicker.palette > .colorpicker-body > .control  {
    
        display: none;
  }
      .easylogic-colorpicker.palette > .colorpicker-body > .information  {
    
        display: none;
  }
      .easylogic-colorpicker.palette > .colorpicker-body > .colorsets  {
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        border-top: 0px;
  }
        .easylogic-colorpicker.palette > .colorpicker-body > .colorsets > .color-list h6  {
    
          margin-top: 0px;
    
          margin-bottom: 8px;
  }
        .easylogic-colorpicker.palette > .colorpicker-body > .colorsets > .color-list .color-item  {
    
          width: 15px;
    
          height: 15px;
    
          margin-right: 10px;
    
          margin-bottom: 10px;
  }
      .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser  {
    
        display: none;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
        .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open  {
    
          display: block;
    
          top: -1px;
    
          left: -1px;
    
          right: -1px;
    
          bottom: auto;
    
          border-radius: 3px;
    
          border: 1px solid #d8d8d8;
    
          -webkit-box-shadow: 0 0px 10px 2px rgba(0,
     0,
     0,
     0.12);
    
                  box-shadow: 0 0px 10px 2px rgba(0,
     0,
     0,
     0.12);
  }
          .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container  {
    
            position: relative;
    
            top: auto;
    
            left: auto;
    
            right: auto;
    
            bottom: auto;
    
            background-color: white;
    
            -webkit-box-sizing: border-box;
    
                    box-sizing: border-box;
    
            border-radius: 2px;
  }
            .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-item-header  {
    
              position: relative;
    
              left: auto;
    
              top: auto;
    
              right: auto;
    
              bottom: auto;
    
              border-top-left-radius: 3px;
    
              border-top-right-radius: 3px;
  }
            .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list  {
    
              position: relative;
    
              top: auto;
    
              left: auto;
    
              right: auto;
    
              bottom: auto;
    
              overflow: auto;
  }
              .easylogic-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list .colorsets-item:last-child  {
    
                border-bottom-left-radius: 3px;
    
                border-bottom-right-radius: 3px;
  }
    .easylogic-colorpicker.macos .colorpicker-body .wheel  {
    
      width: 224px;
    
      height: 224px;
    
      position: relative;
    
      -webkit-box-sizing: border-box;
    
              box-sizing: border-box;
  }
      .easylogic-colorpicker.macos .colorpicker-body .wheel .wheel-canvas  {
    
        width: 214px;
    
        height: 214px;
    
        border-radius: 50%;
    
        position: absolute;
    
        left: 5px;
    
        top: 5px;
  }
      .easylogic-colorpicker.macos .colorpicker-body .wheel .drag-pointer  {
    
        display: inline-block;
    
        position: absolute;
    
        width: 10px;
    
        height: 10px;
    
        left: 50%;
    
        top: 50%;
    
        border: 1px solid white;
    
        border-radius: 50%;
    
        -webkit-transform: translateX(-50%) translateY(-50%);
    
                transform: translateX(-50%) translateY(-50%);
    
        z-index: 2;
  }
    .easylogic-colorpicker.macos .control  {
    
      padding-top: 0px;
  }
      .easylogic-colorpicker.macos .control > .color,
   .easylogic-colorpicker.macos .control > .empty  {
    
        top: 4px;
  }
    .easylogic-colorpicker.macos .value  {
    
      position: relative;
    
      padding: 6px 16px;
    
      margin: 0px 0px 0px 42px;
    
      -webkit-box-sizing: border-box;
    
              box-sizing: border-box;
    
      cursor: pointer;
  }
      .easylogic-colorpicker.macos .value > .value-container  {
    
        position: relative;
    
        width: 100%;
    
        height: 10px;
    
        border-radius: 3px;
    
        background-image: -webkit-gradient(linear,
     left top,
     right top,
     from(#000000),
     to(rgba(255,
     255,
     255,
     0)));
    
        background-image: linear-gradient(to right,
     #000000 0%,
     rgba(255,
     255,
     255,
     0) 100%);
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
  }
        .easylogic-colorpicker.macos .value > .value-container .drag-bar  {
    
          position: absolute;
    
          cursor: pointer;
    
          top: 50%;
    
          left: 0px;
    
          -webkit-transform: translateX(-50%) translateY(-50%);
    
                  transform: translateX(-50%) translateY(-50%);
    
          width: 12px;
    
          height: 12px;
    
          border-radius: 50%;
  }
    .easylogic-colorpicker.mini  {
    
      width: 180px;
    
      display: inline-block;
  }
      .easylogic-colorpicker.mini .control  {
    
        padding: 0px;
  }
        .easylogic-colorpicker.mini .control .hue,
   .easylogic-colorpicker.mini .control .opacity  {
    
          margin: 0px;
    
          padding: 0px;
  }
        .easylogic-colorpicker.mini .control .hue > .hue-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 20px;
  }
        .easylogic-colorpicker.mini .control .opacity > .opacity-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 20px;
  }
        .easylogic-colorpicker.mini .control .drag-bar,
   .easylogic-colorpicker.mini .control .drag-bar2  {
    
          border: 0px;
    
          background-color: transparent;
    
          height: 100%;
    
          width: 5px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          -webkit-box-shadow: none;
    
                  box-shadow: none;
  }
          .easylogic-colorpicker.mini .control .drag-bar.last:before,
   .easylogic-colorpicker.mini .control .drag-bar.lastafter,
   .easylogic-colorpicker.mini .control .drag-bar2.last:before,
   .easylogic-colorpicker.mini .control .drag-bar2.lastafter  {
    
            left: 1px;
  }
          .easylogic-colorpicker.mini .control .drag-bar.first:before,
   .easylogic-colorpicker.mini .control .drag-bar.first:after,
   .easylogic-colorpicker.mini .control .drag-bar2.first:before,
   .easylogic-colorpicker.mini .control .drag-bar2.first:after  {
    
            left: 3px;
  }
          .easylogic-colorpicker.mini .control .drag-bar:before,
   .easylogic-colorpicker.mini .control .drag-bar2:before  {
    
            content: "";
    
            position: absolute;
    
            left: 2px;
    
            top: 0px;
    
            width: 0;
    
            height: 0;
    
            -webkit-transform: translateX(-50%);
    
                    transform: translateX(-50%);
    
            border-left: 4px solid transparent;
    
            border-right: 4px solid transparent;
    
            border-top: 4px solid black;
  }
          .easylogic-colorpicker.mini .control .drag-bar:after,
   .easylogic-colorpicker.mini .control .drag-bar2:after  {
    
            content: "";
    
            position: absolute;
    
            left: 2px;
    
            bottom: 0px;
    
            width: 0;
    
            height: 0;
    
            -webkit-transform: translateX(-50%);
    
                    transform: translateX(-50%);
    
            border-left: 4px solid transparent;
    
            border-right: 4px solid transparent;
    
            border-bottom: 4px solid black;
  }
    .easylogic-colorpicker.mini-vertical  {
    
      width: 180px;
    
      display: inline-block;
  }
      .easylogic-colorpicker.mini-vertical .color  {
    
        display: inline-block;
    
        width: 140px;
    
        height: 160px;
    
        vertical-align: middle;
  }
      .easylogic-colorpicker.mini-vertical .control  {
    
        height: 160px;
    
        padding: 0px;
    
        vertical-align: middle;
    
        display: inline-block;
  }
        .easylogic-colorpicker.mini-vertical .control .hue,
   .easylogic-colorpicker.mini-vertical .control .opacity  {
    
          margin: 0px;
    
          padding: 0px;
    
          width: 20px;
    
          display: inline-block;
    
          vertical-align: middle;
    
          height: 100%;
    
          position: relative;
  }
        .easylogic-colorpicker.mini-vertical .control .hue > .hue-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 100%;
    
          background: -webkit-gradient(linear,
     left bottom,
     left top,
     from(#ff0000),
     color-stop(17%,
     #ffff00),
     color-stop(33%,
     #00ff00),
     color-stop(50%,
     #00ffff),
     color-stop(67%,
     #0000ff),
     color-stop(83%,
     #ff00ff),
     to(#ff0000));
    
          background: linear-gradient(to top,
     #ff0000 0%,
     #ffff00 17%,
     #00ff00 33%,
     #00ffff 50%,
     #0000ff 67%,
     #ff00ff 83%,
     #ff0000 100%);
  }
        .easylogic-colorpicker.mini-vertical .control .opacity > .opacity-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 100%;
    
          width: 20px;
  }
        .easylogic-colorpicker.mini-vertical .control .drag-bar,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2  {
    
          border: 0px;
    
          background-color: transparent;
    
          height: 2px;
    
          width: 100%;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          -webkit-box-shadow: none;
    
                  box-shadow: none;
    
          -webkit-transform: none;
    
                  transform: none;
  }
          .easylogic-colorpicker.mini-vertical .control .drag-bar.last:before,
   .easylogic-colorpicker.mini-vertical .control .drag-bar.last:after,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2.last:before,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2.last:after  {
    
            top: 2px;
  }
          .easylogic-colorpicker.mini-vertical .control .drag-bar.first:before,
   .easylogic-colorpicker.mini-vertical .control .drag-bar.first:after,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2.first:before,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2.first:after  {
    
            top: -1px;
  }
          .easylogic-colorpicker.mini-vertical .control .drag-bar:before,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2:before  {
    
            content: "";
    
            position: absolute;
    
            left: 0px;
    
            top: 2px;
    
            width: 0;
    
            height: 0;
    
            -webkit-transform: translateY(-50%);
    
                    transform: translateY(-50%);
    
            border-top: 4px solid transparent;
    
            border-bottom: 4px solid transparent;
    
            border-left: 4px solid black;
  }
          .easylogic-colorpicker.mini-vertical .control .drag-bar:after,
   .easylogic-colorpicker.mini-vertical .control .drag-bar2:after  {
    
            content: "";
    
            position: absolute;
    
            top: 2px;
    
            right: 0px;
    
            width: 0;
    
            height: 0;
    
            -webkit-transform: translateY(-50%);
    
                    transform: translateY(-50%);
    
            border-top: 4px solid transparent;
    
            border-bottom: 4px solid transparent;
    
            border-right: 4px solid black;
  }
    .easylogic-colorpicker.ring .colorpicker-body > .color  {
    
      position: absolute;
    
      width: 120px;
    
      height: 120px;
    
      left: 52px;
    
      top: 52px;
  }
    .easylogic-colorpicker.ring .colorpicker-body .wheel  {
    
      width: 224px;
    
      height: 224px;
    
      position: relative;
    
      -webkit-box-sizing: border-box;
    
              box-sizing: border-box;
  }
      .easylogic-colorpicker.ring .colorpicker-body .wheel .wheel-canvas  {
    
        width: 214px;
    
        height: 214px;
    
        border-radius: 50%;
    
        position: absolute;
    
        left: 5px;
    
        top: 5px;
  }
      .easylogic-colorpicker.ring .colorpicker-body .wheel .drag-pointer  {
    
        display: inline-block;
    
        position: absolute;
    
        width: 10px;
    
        height: 10px;
    
        left: 50%;
    
        top: 50%;
    
        border: 1px solid white;
    
        border-radius: 50%;
    
        -webkit-transform: translateX(-50%) translateY(-50%);
    
                transform: translateX(-50%) translateY(-50%);
    
        z-index: 2;
  }
    .easylogic-colorpicker.ring .control  {
    
      padding-top: 0px;
  }
      .easylogic-colorpicker.ring .control .value  {
    
        display: none;
  }
      .easylogic-colorpicker.ring .control > .color,
   .easylogic-colorpicker.ring .control > .empty  {
    
        top: -17px;
    
        width: 30px;
    
        height: 30px;
    
        border-radius: 2px;
  }
    .easylogic-colorpicker.xd  {
    
      display: inline-block;
    
      padding-top: 12px;
    
      width: 245px;
  }
      .easylogic-colorpicker.xd .color  {
    
        display: inline-block;
    
        margin-left: 12px;
    
        margin-bottom: 12px;
    
        width: 170px;
    
        height: 170px;
    
        vertical-align: middle;
    
        border-radius: 3px;
    
        overflow: hidden;
    
        -webkit-box-sizing: border-box;
    
                box-sizing: border-box;
    
        border: 1px solid #cecece;
  }
        .easylogic-colorpicker.xd .color > .saturation > .value > .drag-pointer  {
    
          border: 2px solid white;
    
          width: 7px;
    
          height: 7px;
    
          -webkit-box-shadow: 0 0 1px 0px black,
     inset 0 0 1px 0px black;
    
                  box-shadow: 0 0 1px 0px black,
     inset 0 0 1px 0px black;
  }
      .easylogic-colorpicker.xd .control  {
    
        height: 170px;
    
        padding: 0px;
    
        vertical-align: middle;
    
        display: inline-block;
    
        margin-right: 12px;
    
        margin-bottom: 12px;
  }
        .easylogic-colorpicker.xd .control .hue,
   .easylogic-colorpicker.xd .control .opacity  {
    
          margin: 0px;
    
          padding: 0px;
    
          width: 13px;
    
          display: inline-block;
    
          vertical-align: middle;
    
          height: 100%;
    
          position: relative;
    
          overflow: hidden;
    
          border-radius: 3px;
    
          margin-left: 8px;
  }
        .easylogic-colorpicker.xd .control .hue > .hue-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 100%;
    
          background: -webkit-gradient(linear,
     left bottom,
     left top,
     from(#ff0000),
     color-stop(17%,
     #ffff00),
     color-stop(33%,
     #00ff00),
     color-stop(50%,
     #00ffff),
     color-stop(67%,
     #0000ff),
     color-stop(83%,
     #ff00ff),
     to(#ff0000));
    
          background: linear-gradient(to top,
     #ff0000 0%,
     #ffff00 17%,
     #00ff00 33%,
     #00ffff 50%,
     #0000ff 67%,
     #ff00ff 83%,
     #ff0000 100%);
  }
        .easylogic-colorpicker.xd .control .opacity > .opacity-container  {
    
          border-radius: 0px;
    
          overflow: hidden;
    
          height: 100%;
  }
        .easylogic-colorpicker.xd .control .drag-bar,
   .easylogic-colorpicker.xd .control .drag-bar2  {
    
          border: 0px;
    
          background-color: transparent;
    
          border: 2px solid white;
    
          -webkit-box-shadow: 0 0 1px 0px black,
     inset 0 0 1px 0px black;
    
                  box-shadow: 0 0 1px 0px black,
     inset 0 0 1px 0px black;
    
          width: 10px;
    
          height: 10px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          -webkit-transform: none;
    
                  transform: none;
    
          overflow: hidden;
    
          left: 50%;
    
          -webkit-transform: translateX(-50%) translateY(-50%);
    
                  transform: translateX(-50%) translateY(-50%);
  }
      .easylogic-colorpicker.xd .information  {
    
        margin-top: 5px;
  }
    .easylogic-colorpicker.vscode  {
    
      width: 336px;
    
      display: inline-block;
    
      background-color: #333;
    
      border: 1px solid #ececec;
    
      -webkit-box-sizing: border-box;
    
              box-sizing: border-box;
    
      border-radius: 0px;
  }
      .easylogic-colorpicker.vscode .colorpicker-body  {
    
        border-radius: 0px;
    
        display: inline-block;
  }
        .easylogic-colorpicker.vscode .colorpicker-body .color-view  {
    
          height: 34px;
    
          background-color: transparent;
    
          background-image: linear-gradient(45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(-45deg,
     #ccc 25%,
     transparent 25%),
     linear-gradient(45deg,
     transparent 75%,
     #ccc 75%),
     linear-gradient(-45deg,
     transparent 75%,
     #ccc 75%);
    
          background-size: 10px 10px;
    
          background-position: 0 0,
     0 5px,
     5px -5px,
     -5px 0px;
  }
          .easylogic-colorpicker.vscode .colorpicker-body .color-view .color-view-container  {
    
            line-height: 34px;
    
            font-size: 14px;
    
            text-align: center;
    
            width: 100%;
    
            height: 100%;
    
            cursor: pointer;
    
            -webkit-user-select: none;
    
               -moz-user-select: none;
    
                -ms-user-select: none;
    
                    user-select: none;
    
            text-shadow: 0 0 3px #535353;
  }
        .easylogic-colorpicker.vscode .colorpicker-body .color-tool  {
    
          padding: 8px;
  }
      .easylogic-colorpicker.vscode .color  {
    
        display: inline-block;
    
        width: 240px;
    
        height: 160px;
    
        vertical-align: middle;
  }
      .easylogic-colorpicker.vscode .control  {
    
        height: 160px;
    
        vertical-align: middle;
    
        display: inline-block;
    
        padding: 0px 0px 0px 4px;
  }
        .easylogic-colorpicker.vscode .control .hue,
   .easylogic-colorpicker.vscode .control .opacity  {
    
          margin: 0px;
    
          padding: 0px;
    
          width: 30px;
    
          display: inline-block;
    
          vertical-align: middle;
    
          height: 100%;
    
          position: relative;
  }
        .easylogic-colorpicker.vscode .control .hue  {
    
          padding-left: 5px;
    
          width: 35px;
  }
        .easylogic-colorpicker.vscode .control .hue > .hue-container  {
    
          border-radius: 0px;
    
          height: 100%;
    
          background: -webkit-gradient(linear,
     left bottom,
     left top,
     from(#ff0000),
     color-stop(17%,
     #ffff00),
     color-stop(33%,
     #00ff00),
     color-stop(50%,
     #00ffff),
     color-stop(67%,
     #0000ff),
     color-stop(83%,
     #ff00ff),
     to(#ff0000));
    
          background: linear-gradient(to top,
     #ff0000 0%,
     #ffff00 17%,
     #00ff00 33%,
     #00ffff 50%,
     #0000ff 67%,
     #ff00ff 83%,
     #ff0000 100%);
  }
        .easylogic-colorpicker.vscode .control .opacity > .opacity-container  {
    
          border-radius: 0px;
    
          height: 100%;
    
          width: 30px;
  }
        .easylogic-colorpicker.vscode .control .drag-bar,
   .easylogic-colorpicker.vscode .control .drag-bar2  {
    
          background-color: transparent;
    
          height: 5px;
    
          width: 33px;
    
          -webkit-box-sizing: border-box;
    
                  box-sizing: border-box;
    
          -webkit-box-shadow: none;
    
                  box-shadow: none;
    
          -webkit-transform: translateY(-50%) translateX(-2px);
    
                  transform: translateY(-50%) translateX(-2px);
    
          border: 1px solid rgba(255,
     255,
     255,
     0);
    
          border-radius: 0px;
    
          -webkit-box-shadow: 0 0 2px 0 black,
     inset 0 0 0 0 black;
    
                  box-shadow: 0 0 2px 0 black,
     inset 0 0 0 0 black;
  }
    .easylogic-colorpicker.hide-colorsets .colorsets  {
    
      display: none !important;
  }
  
  .colorsets-contextmenu  {
    
    position: fixed;
    
    padding-top: 4px;
    
    padding-bottom: 4px;
    
    border-radius: 6px;
    
    background-color: #ececec;
    
    border: 1px solid #cccccc;
    
    display: none;
    
    list-style: none;
    
    font-size: 13px;
    
    padding-left: 0px;
    
    padding-right: 0px;
  }
    .colorsets-contextmenu.show  {
    
      display: inline-block;
  }
    .colorsets-contextmenu .menu-item  {
    
      padding: 2px 20px;
    
      cursor: default;
  }
      .colorsets-contextmenu .menu-item:hover  {
    
        background-color: #5ea3fb;
    
        color: white;
  }
    .colorsets-contextmenu.small .menu-item.small-hide  {
    
      display: none;
  }

/* 4797-css_chunk.js */
/**游戏控制**/
#gameControlView  {
    
    background-color: #414141;
        
    color: #c7c7c7;
    
    border-radius: 0.5em;
    
    box-shadow: 0 10px 20px rgba(0,
     0,
     0,
     0.2);
    
    position: absolute;
    
    width: 100%;
    
    height: 100%;
    
    display: none;
    
    text-align: left;
    

  }
/**顶部**/
.gameControlTop {
    
    display: block;
    
    width: 100%;
    
    height: 30px;
    
    background: #000;
    

  }
.gameControlTitle {
    
    color: #ff089b;
    
    position: absolute;
    
    width: 100%;
    
    text-align: center;
    
    font-size: 20px;
    

  }
.gameControlTitleRight {
    
    position: absolute;
    
    right: 5px;
    
    top: 4px;
    

  }
.gameControlTitleRight button {
    
    border-radius: 5px;
    

  }
/**工具栏**/

.gameControlTools {
    
    display: inline-flex;
    
    background: #e1d9e3;
    
    border-radius: 10px;
    
    padding: 10px;
    
    color: #fb00ae;
    
    transform: translateX(-50%);
    
    left: 50%;
    
    position: relative;
    
    font-size: 18px;
    

  }
/* .gameControlTools select  {
    
    height: 20px;
    
    width: 120px;
    
    font-size: 16px;
    
    color: #333;
    

  } */
.gameControlTools button  {
    
    height: 60px;
    
    border-radius: 27px;
    
    font-size: 22px;
    
    color: #dbdbdb;
    
    background: #c30000;
    

  }
.gameControlTitle2  {
    
    font-size: 20px;
    
    color: #00dbc7;
    
    margin-right: 5px;
    
    background: #505050;
    
    border-radius: 4px;
    
    padding: 3px 5px 3px 5px;
    

  }

/** 帧渲染图 */
.gameControlDrawDetialView {
    
    background-color: #4a4a4a;
    
    color: #d2d2d2;
    

  }
.gameControlDrawDetialTop {
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    
    background-color: #181218;
    

  }
.gameControlDrawDetialTop button {
    
    margin-top: 5px;
    

  }
.drawDetialFrame {
    
    color: #3dff20;
    
    font-size: 14px;
    

  }
.drawDetialCurFrame {
    
    width: 40px;
    
    border: 1px solid #07a77e;
    
    border-radius: 5px;
    
    color: #f208ff;
    
    font-size: 14px;
    

  }

/**webgl 代码**/
.webglCodeView  {
    
    width: 100%;
    
    display: block;
    

  }

.webglCodeNeedRefushMask {
    
    width: 100%;
    
    height: 120px;
    
    background: #262d34;
    
    text-align: center;
    
    display: block;
    
    color: #ff5252;
    
    font-size: 16px;
    
    line-height: 40px;
    

  }
.webglCodeNeedRefushMask #webglCodeRefush {
    
    width: 100px;
    
    height: 30px;
    

  }


.webglCodeContain {
    
    width: 100%;
    
    background: #333333;
    

  }

/**Shader名字列表**/
.webglCodeList {
    
    width: 100%;
    
    height: 25px;
    
    display: inline-flex;
    
    background-color: #cccccc;
    
    color: #cc00cc;
    
    gap: 2px;
    
    text-align: center;
    
    line-height: 25px;
    
    padding-top: 3px;
    
    overflow-y:hidden;
    
    overflow-x:auto;
    

  }
.webglCodeProgramNameItem {
    
    width: 100px;
    
    height: 25px;
    
    background-color: #e5e5e5;
    
    border-radius: 5px 5px 0px 0px;
    
    border: 1px solid #919191;
    
    cursor: pointer;
    

  }

.webglCodeProgramNameItem:hover  {
        
    background-color: #d3d3d3;
    

  }

.webglCodeProgramNameSelected  {
    
    touch-action: none;
    
    user-select: none;
    
    /* pointer-events: none;
     */
    background-color: #bbbbbb;
    

  }
.webglCodeProgramNameSelected:hover  {
    
    background-color: #bbbbbb;
    

  }

.webglCodeProgramNameChange  {
    
    color: #f612f6;
    

  }
.webglCodeProgramNameChange::before  {
    
  content: '';
    
  margin: 3px;
    
  display: inline-block;
    
  width: 6px;
    
  height: 6px;
    
  background: #2090ff;
    
  border-radius: 50%;
    

  }

/**Shader 变量**/
.webglCodeShaderVars {
    
    width: 100%;
    
    background-color: #838282;
    
    display: inline-flex;
    

  }
.webglCodeShaderVarItem {
    
    width: 100%;
    

  }
.webglShaderVarName {
    
    color: #3dff20;
    
    float: left;
    

  }
.webglShaderVarValue {
    
    color: #07a77e;
    
    float: left;
    
    margin-left: 20px;
    

  }

.webglCodeContainLeft,
   .webglCodeContainRight {
    
    font-size: 16px;
    
    background-color: #000000;
    

  }
.webglCodeContainLeft {
    
    float: left;
    

  }
.webglCodeContainRight {
    
    float: right;
    

  }
.webglCodeSplit {
    
    height: 100%;
    
    width: 3px;
    
    float: left;
    
    z-index: 10;
    
    cursor: ew-resize;
    
    background-color: #afafaf;
    

  }

.vertexCode {
    
    width: 100%;
    
    background-color: #000000;
    

  }
.fragementCode {
    
    width: 100%;
    
    background-color: #000000;
    

  }
.webGLCode .ͼo {
    
    background-color: #000000;
    

  }   
.vertexCodeDes {
    
    color: #0cfcfb;
    
    font-size: 16px;
    
    width: 100%;
    
    height: 28px;
    
    text-align: center;
    
    background-color: #222222;
    

  }
.copyWebglCodeButton {
    
    float: left;
    


  }

/**alert 内描述**/
.gameControlDrawDes {
    
    padding-left: 20px;
    
    color: #454345;
    

  }
.gameControlDrawDes .gameControlTagDes {
    
    color: #be4bb3;
    

  }
.gameControlTagDes {
    
    color: #f208ff;
    

  }
.gameControlDrawDetialCanvas  {
    
    width: 100%;
    
    background: #333333;
    
    height: 180px;
    

  }

.gameControleDrawDetialNeedRefushMask {
    
    width: 100%;
    
    height: 180px;
    
    background: #262d34;
    
    text-align: center;
    
    display: block;
    
    color: #ff5252;
    
    font-size: 16px;
    
    line-height: 80px;
    

  }
.gameControleDrawDetialNeedRefushMask #gameControleDrawDetialRefush {
    
    width: 100px;
    
    height: 30px;
    

  }

/* 8964-css_chunk.js */
/**性能界面**/
#gamePerformanceView  {
    
    background-color: #414141;
        
    color: #c7c7c7;
    
    border-radius: 0.5em;
    
    box-shadow: 0 10px 20px rgba(0,
     0,
     0,
     0.2);
    
    position: absolute;
    
    width: 100%;
    
    height: 100%;
    
    display: none;
    
    text-align: left;
    

  }

/**顶部**/
.gamePerformanceTop {
    
    display: block;
    
    width: 100%;
    
    height: 30px;
    
    background: #000;
    

  }
.gamePerformanceTitle {
    
    color: #ff089b;
    
    position: absolute;
    
    width: 100%;
    
    text-align: center;
    
    font-size: 20px;
    

  }
.gamePerformanceTitleRight {
    
    position: absolute;
    
    right: 5px;
    
    top: 4px;
    

  }
.gamePerformanceTitleRight button {
    
    border-radius: 5px;
    

  }


/**性能界面容器*/
.gamePerformanceCanvas  {
    
    width: 100%;
    
    background: #161717;
    
    height: 120px;
    

  }

.gamePerformanceCanvasContain {
    
    width: 100%;
    
    background: #454545;
    
    overflow: scroll;
    

  }

.gamePerformanceLoadData {
    
    color: #ff7206;
    

  }
.gamePerformanceLoadDataDes {
    
    color: #009ffc;
    

  }

.gamePerformanceLoadDataCalue {
    
    color: #9f9a00;
    

  }
.gamePerformanceLoadDataTime {
    
    color: #f80cfc

  }

