.rightPanel {
  height: 100%;
  background-color: #444;
  .rightPanelContainer {
    color: #ddd;
    .ant-tabs-nav{
      margin: 0px;
      background-color: #1e2127;
      .ant-tabs-tab {
        background: transparent;
        border: 1px solid transparent;
        padding: 8px 16px;
        margin: 0;
        letter-spacing: 1px;
      }
      .ant-tabs-tab:hover {
        color: #fff;
      }
      .ant-tabs-tab-active {
        background-color: #3E3E3E;
        color: #fff;
      }
      .ant-tabs-tab-disabled {
        color: rgba(255,255,255,.25);
      }
      .ant-tabs-tab-disabled:hover {
        color: rgba(255,255,255,.25);
      }
      // tab选中时的顶部蓝条
      .ant-tabs-ink-bar {
        bottom: unset;
        top: 0;
        height: 3px;
      }
    }
    .ant-tabs-nav:before{
      border-bottom: 1px solid transparent;
    }
    // tab content style
    .ant-tabs-tabpane {
      padding-top: 10px;
    }
  }

  .dataType {
    .dataTypeLabel {
      margin-right: 5px;
    }
    .ant-radio-wrapper {
      color: #ddd !important;
      font-size: 14px !important;
      .ant-radio + span {
        padding-left: 4px;
        padding-right: 4px;
      }
    }
  }

  .header-flag {
    width: 10px;
    height: 10px;
    background-color: #1890ff;
    border-radius: 50%;
    margin-right: 10px;
  }

  .static-data {
    margin-top: 20px;
    padding: 0 10px;
    .static-data-header {
      display: flex;
      align-items: center;
      .header-button {
        margin-left:auto;
        position: relative;
        overflow: hidden;
        input[type='file'] {
          border: none;
          outline: none;
          background: none;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 99;
          width: 100%;
          opacity: 0;
        }
      }
    }
    .static-data-edit {
      margin-top: 20px;
      position: relative;
    }
    .data-label {
      margin-top: 5px;
      width: 100%;
      text-align: left;
      display: inline-flex;
      align-items: center;
      .svg-icon {
        fill:#dddddd;
        margin-right: 3px;
        width: 15px;
        height: 15px;
      }
    }
  }

  .code-mirror-container {
    //height: 40%;
    width: 100%;
    text-align: left;
    .CodeMirror {
      background: #1e2127;
      color: #fff;
      .cm-string {
        color: #54be0d;
      }
      .cm-number { 
        color: #2A00FF;
      }
      .CodeMirror-gutters {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        background-color: #1e2127;
      }
      .CodeMirror-foldmarker {
        color: blue;
        text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
        font-family: arial;
        line-height: .3;
        cursor: pointer;
      }
      .CodeMirror-foldgutter {
        width: .7em;
      }
      .CodeMirror-foldgutter-open,
      .CodeMirror-foldgutter-folded {
        cursor: pointer;
      }
      .CodeMirror-foldgutter-open:after {
        content: "\25BE";
      }
      .CodeMirror-foldgutter-folded:after {
        content: "\25B8";
      }
    }
  }

  .static-data-info {
    padding: 0 10px;
    margin-top: 50px;
    .static-data-info-label{
      text-align: left;
    }
    .static-data-info-list {
      .info-list-column {
        width: 50%;
        padding: 5px 0;
        background-color: #1e2127;
      }
      .column-first {
        border-right: 1px solid #f0f0f0;
      }
      .ant-list-item {
        padding: 0;
        color: #ddd;
        border-right: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .ant-list-item:last-child {
        border-bottom: 1px solid #f0f0f0;
      }
      .ant-list-item:first-child {
        border-top: 1px solid #f0f0f0;
      }
    }
  }

  ::-webkit-scrollbar-track-piece {
    //滚动条凹槽的颜色，还可以设置边框属性
    background-color: transparent;
  }
  
  ::-webkit-scrollbar {
    //滚动条的宽度
    display: auto;
    width: 10px;
    height: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    //滚动条的设置
    background-color: rgba(255, 255, 255, 0.2);
  }

  .readOnly {
    cursor: not-allowed;

    input, select, button, 
    .gjs-field-color-picker, 
    .gjs-sm-clear,
    .gjs-radio-items,
    .gjs-field-arrows,
    .gjs-field-checkbox,
    .basic-traits-position > input,
    .basic-traits-opacity,
    .gjs-trt-traits,
    .editable-cell-value-wrap {
      pointer-events: none;
      cursor: not-allowed;
    }
  }
}
