@import '../base/variables.less';
.config-title-outer {
  font-size: 14px;
  color: #b5b5b5;
  font-weight: normal;
  padding: 1px 2px;
  cursor: pointer;
  .setFlexPos(row, space-between, center);
  .el-icon-around {
    padding: 2px 4px;
    border: 1px solid #2a6aaa;
    color: #409eff;
    border-radius: 4px;
    cursor: pointer;
    &.edu {
      color: rgb(230, 162, 60);
      border-color: rgb(185, 120, 21);
    }
    &.discount {
      color: rgb(103, 194, 58);
      border-color: rgb(62, 150, 18);
    }
    &.after-dentention {
      color: rgb(245, 108, 108);
      border-color: rgb(175, 50, 50);
    }
  }
  &.c-red {
    color: #f00737;
    &::after {
      content: '*';
      position: relative;
      top: 3px;
    }
  }
  .c-red {
    color: #f00737;
    &::after {
      content: '*';
      position: relative;
      top: 3px;
    }
  }
  .el-switch {
    position: relative;
    top: -2px;
  }
}
.inner-container {
  border: 1px dashed #4c4c4c;
  padding: 2px 4px;
  box-sizing: border-box;
  margin: 4px 0;
  .form-group {
    &.label{
      font-size: 13px;
      color: #aaa;
    }   
  }
  &.dashed {
    border-style: dashed;
  }
}
.form-group {
  .label {
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    &.c-red {
      color: #f00737;
      &::after {
        content: '*';
        position: relative;
        top: 3px;
      }
    }
  }
  &.dash-border{
    border:1px dashed rgb(102, 102, 102);
  }
  .link-input{
    .setFlexPos(row, flex-start, center);
  }
  .setFlexPos(row, space-between, center);
  &.f-start {
    .setFlexPos(row, flex-start, center);
  }
  &.f-center {
    .setFlexPos(row, center, center);
  }
  .tool-input-minus,
  .tool-input-plus,
  .tool-input-expend,
  .tool-input-copy {
    display: inline-block;
    .setFlexPos(row, center, center);
    background-color: #343437;
    border: #707070 solid 1px;
    border-radius: 4px;
    outline: none;
    color: #c3c3c3;
    font-size: 14px;
    .setSize(24px, 22px);
    cursor: pointer;
    &:hover {
      border-color: #2a6aaa;
      color: #409eff;
    }
    &.blue {
      border-color: #2a6aaa;
      color: #409eff;
    }
  }
  margin-bottom: 2px;
  padding: 4px 0 0 0;
  .config-title {
    font-size: 12px;
    color: #e4e4e4;
    font-weight: 500;
    line-height: 1.2;
    &.c-red {
      color: #f00737;
    }
    &.has-inner-config {
      border: 1px solid #ccc;
      padding: 3px 4px;
      border-radius: 4px;
    }
  }
  .tool-input {
    background-color: #343437;
    border: #49494c solid 1px;
    border-radius: 2px;
    outline: none;
    color: #c3c3c3;
    padding: 3px 6px;
    height: 24px;
    font-size: 13px;
    width: 148px;
    margin-left: 2px;
    &.full-width {
      width: 100%;
    }
    &.auto-height {
      height: auto;
    }
    @width_list: range(50, 240, 10);
    each(@width_list, {
      &.w-@{value} {
        width: ~'@{value}px';
        min-width: ~'@{value}px';
      }
    });
    &[readonly] {
      cursor: not-allowed;
    }
  }
  .connection-text {
    font-size: 12px;
    color: #fff;
    margin: 0 8px;
  }
  .tool-button,.normal-button {
    background-color: #343437;
    border: #49494c solid 1px;
    border-radius: 2px;
    outline: none;
    color: #c3c3c3;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 12px;
    margin: 0 5px;
    &:hover {
      color: #343437;
      background-color: #fff;
    }
  }
  .tool-button{
    .setSize(80px, 24px);
  }
  .img-preview {
    .setSize(100px, 160px);
    .setFlexPos(row, center, center);
    img {
      max-height: 156px;
      height: auto;
      max-width: 100px;
    }
    border-radius: 2px;
    padding: 2px;
    background-color: rgba(153, 153, 153, 0.507);
  }
  .upload-img {
    position: relative;
    input[type='file'] {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      bottom: 0;
    }
  }
}
.form-content-wrap {
  border: 1px solid #4c4c4c;
  padding: 2px;
  box-sizing: content-box;
  .is-hidden {
    .link-input {
      .label {
        color: #ffffff;
        font-weight: bold;
      }
    }
  }
}
.no-data {
  .setSize(100%, 36px);
  .setFlexPos(row, center, center);
  font-size: 12px;
  color: #eee;
}