@import '~antd/es/style/themes/default.less';

.reportSettings {
  //width: 100%;
  height: 100%;

  .reportFiled {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      color: #1685ff;
    }
  }

  .reportDetails {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 8px;

    .colorSketch {
      position: absolute;
      z-index: 1001;
      width: 100%;
      height: 100%;
    }

    :global {
      .@{ant-prefix}-form-item {
        margin-bottom: 0 !important;
      }
    }

    .tableWrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;

      .controlRow {
        display: flex;
        flex: 0 0 44px;
        //justify-content: space-between;
        align-items: center;
        height: 44px;
        margin-bottom: 4px;
        padding: 6px;
        background: #ffffff;

        .leftBtn {
          margin-right: 10px;
          font-weight: bold;
          font-size: 18px;
          cursor: pointer;

          &:hover {
            color: #1685ff;
            opacity: 0.8;
          }
        }
      }

      .tableContent {
        flex: 1;
        width: 100%;
        max-height: calc(100% - 44px);
        padding: 6px;
        overflow: hidden;
        background: #ffffff;

        .tableForm {
          height: 100%;
        }
      }
    }
  }
}

.boxShadow {
  border-color: #40a9ff;
  border-right-width: 1px;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.boxShadowOfSwitch {
  border-right-width: 1px;
  outline: 0;
  box-shadow: 0 0 4px 2px rgba(24, 144, 255, 0.6);
}
.boxShadowOfSelect {
  border-right-width: 1px;
  outline: 0;
  box-shadow: 0 0 2px 2px rgba(24, 144, 255, 0.2);

  :global {
    .@{ant-prefix}-select-selector {
      border-color: #40a9ff !important;
    }
  }
}

.fieldList {
  cursor: pointer !important;

  &:hover {
    color: #1685ff;
  }

  &.active {
    color: #1685ff;
  }
}
