nezha-nezha-fronted/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss

.right-box-panel{
  .form-items--half-width-group{
    .query-expression{
      .el-form-item__label{
        display: flex;
      }
    }
  }
  .item-report{
    .form__sub-title{
      margin-bottom: 5px;
    }
  }
  .item-receivers{
    .el-select.el-select--small{
      width: 100%;
    }
    .item-receivers-text{
      font-size: 12px;
      color: $--color-text-secondary;
      padding-left: 5px;
      line-height: 30px;
    }
  }
  .el-input--suffix.el-date-editor--datetime .el-input__inner{
    padding-left: 10px;
  }
  .form-items--half-width-group{
    .item-receivers{
      width: 100%;
      .el-select.el-select--small{
        width: 100%;
      }
    }
    .form-item--half-width{
      .el-date-editor.el-date-editor--datetime{
        width: 100%;
        .el-input__inner{
          height: 32px;
        }
      }
    }
    .check-month_box{
      width: 100%;
      .el-checkbox-group{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        .el-checkbox-button{
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(100% / 7);
          margin-right: -3px;
          margin-bottom: -1px;
          border: 1px solid $--border-color-light;
          .el-checkbox-button__inner{
            border: 0px;
            border-left: 0px !important;
            border-bottom: 0px !important;
            display: block;
            width: 100%;
            height: 100%;
            background-color: $--background-color-empty;
            border-radius: 0;
          }
        }
      }
      .el-checkbox-button.is-checked{
        border: 1px solid #fbb569 !important;
      }
        
      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        color: #fff;
        border-radius: 0;
        background-color: $--color-primary !important;
      }

      .el-form-item__content{
        .el-form-item__error{
          top: 102%;
        }
      }
    }
    .range-time{
      width: 100%;
      .el-form-item__content{
        height: 41px;
        .el-radio-group{
          height: 100%;
          .el-radio-button{
            border: 1px solid $--border-color-light;
            margin-right: -1px;
          }
          .el-radio-button.is-active{
            border: 1px solid #fbb569 !important;
            border-radius: 0px !important;
            background-color: $--color-primary;
          }
          .el-radio-button__inner{
            border: 0;
            height: 100%;
            line-height: 1.5;
            font-size: 14px;
            color: $--color-text-primary;
          }
        }
        .el-checkbox-group{
          height: 100%;
          .el-checkbox-button{
            margin-right: -2px;
            width: calc(100% / 6.9) !important;
            .el-checkbox-button__inner{
              background-color: $--background-color-empty;
              border:1px solid $--border-color-light;
            }
          }
        }
      }
      .el-radio-group{
        display: flex;
        border-left: 0;
        .el-radio-button{
          flex: 1;
        }
      }

      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        color: #fff;
        border-radius: 0;
        background-color: $--color-primary !important;
        border: 1px solid $--color-primary !important;
        // margin-right: -1px;
      }
    }
    .form-tabs{
      width: 100%;
      margin-bottom: 0 !important;
      .el-tabs__nav{
        display: flex;
        .el-tabs__item{
          flex: 1;
        }
        .el-checkbox-button.is-checked .el-checkbox-button__inner {
          color: #fff;
          border-radius: 0;
          background-color: $--color-primary !important;
          border: 1px solid $--color-primary !important;
          // margin-right: -1px;
        }
      }
    }
    .form-day-week{
      width: 100%;
      .el-input-group__append{
        border: 1px solid $--border-color-light;
        background-color: $--right-box-sub-title-background-color;
        border-left: none;
      }
    }
  }
  .variable-box{
    margin-bottom: 16px;
    .variable-title{
      border: 1px solid $--border-color-light;
      border-radius: 2px;
      position: relative;
      display: flex;
      padding: 0;
      padding-left: 5px;
      line-height: 30px;
      justify-content: space-between;
      box-sizing: border-box;
      height: 32px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      .variable-title-left{
        width: 450px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        .nz-icon-arrow-down{
          display: inline-block;
          transition: transform .3s;
          cursor: pointer;
        }
        .nz-icon-arrow-down.is-active{
          transform: rotate(-90deg );
        }
        &>span{
          font-size: 14px;
          color: $--color-text-regular;
        }
      }
      .nz-icon{
        cursor: pointer;
        color: $--color-text-primary;
      }
      .nz-icon-mimabukejian{
        font-size: 17px;
      }
    } 
    .is-item-box-error .variable-title {
      border-color: #F56C6C
    }
    .add-variable{
      border: 1px solid $--border-color-light;
      border-radius: 2px;
      text-align: center;
      margin-bottom: 10px;
      padding: 3px 10px;
      color: $--color-text-regular;
      font-size: 14px;
      cursor: pointer;
      margin-top: 16px;
    }
  }
}
    
.el-form-item__content{
  .el-checkbox-button{
    width: calc(100% / 7) !important;
    .el-checkbox-button__inner{
      width: 100%;
      padding: 11px 3px;
    }
    
  }
  .el-checkbox-button.is-focus .el-checkbox-button__inner{
    border-color: $--border-color-base;
  }

  .el-tabs__item.is-top.is-active{
    color: #fff !important;
    background-color: $--color-primary !important;
  }
  .el-radio-button.el-radio-button--small.is-active{
    .el-radio-button__inner{
      color: #fff !important;
    }
  }
}

.query-variable-table{
  
}
.multiTip{
  max-width:200px;
}
.allOptionTip{
  max-width:208px;
}