@import "~@/mixins.less";

.modalRef {
  :global {
    .ant-modal-body {
      background-color: #efefef;
    }
  }
}

.runningContent {
  .size();

  .showType {
    .size(100%, 68px);
    display: flex;
  }

  .noBorderRight {
    :global {
      .ant-form-item-row {
        border-right: 0 !important;
      }
    }
  }

  :global {
    .ant-form-item-row {
      border: 1px solid gray;
      border-top: none;
      flex-wrap: nowrap;
    }

    .ant-form-item-label {
      background-color: transparent !important;
      height: 68px !important;
      flex-basis: 20% !important;
      max-width: 20% !important;
      border-right: 1px solid gray;
      .flex(center, center);

      label {
        font-size: 24px;
      }
    }

    .input12 {
      .size(50%, auto);
    }

    .mesInputBlueBg,
    .table-title-editabled {
      display: none;
    }

    .ant-form-item-control {
      height: 68px !important;
      flex-basis: 80% !important;
      max-width: 80% !important;

      .ant-picker-input {
        height: 60px;

        * {
          height: 60px;
        }
      }
    }
  }
}

.settingBtn {
  position: absolute;
  bottom: 8px;
  right: 120px;
}

.runStatusTable {
  width: 100%;
  max-height: 100%;
  overflow: auto;

  :global {
    table {
      // min-width: 980px;
      width: 100%;

      td {
        height: auto;
        width: auto;
        min-width: 110px;
        max-width: 130px;
        font-size: 16px;
        text-align: center;
        padding: 0;

        &>div {
          .flex(center, center);
          flex-wrap: wrap;
          min-height: 48px;
          max-width: 120px;
          position: relative;

          p {
            margin-bottom: 0;
            line-height: normal;
            width: 100%;
            // color: #000;

            // span {
            //   font-size: 18px;
            //   font-weight: bold;
            // }

            &:first-child {
              font-size: 18px;
              font-weight: bold;
            }
          }


        }

        &.green {
          background-color: #F6FFED;
          color: #52C41A;
        }

        &.cyan {
          color: #00AEAE;
        }

        &.red {
          color: #FF4D4F;
        }

        &.blue {
          color: #1890FF;
        }

        &.tdTitle {
          color: #fff;
          font-weight: bold;
          font-size: 18px;

          &.green {
            background-color: #52C41A;
          }

          &.cyan {
            background-color: #00AEAE;
          }

          &.red {
            background-color: #FF4D4F;
          }

          &.blue {
            background-color: #1890FF;
          }
        }

      }

      .tdTitleContent {
        cursor: default;

        &:hover {
          font-weight: bold;
          background-color: #E2F6FF;
        }
      }

      .greenTd {
        background: rgba(82, 196, 26, 0.1) !important;
        border: 1px solid #52C41A;
        color: #52C41A;
      }

      .cyanTd {
        background: rgba(0, 174, 174, 0.1);
        border: 1px solid #00AEAE;
        color: #00AEAE;
      }

      .redTd {
        background: rgba(255, 77, 79, 0.1);
        border: 1px solid #FF4D4F;
        color: #FF4D4F;
      }

      .blueTd {
        background: rgba(24, 144, 255, 0.1);
        border: 1px solid #1890FF;
        color: #1890FF;
      }
    }
  }

  .tdName {
    position: absolute;
    top: 0;
    left: 0;
    .size(100%, 100%);
    .flex(center, center);
    font-size: 35px;
    color: rgba(0, 0, 0, 0.3);
  }
}

.runStatusTable1 {
  width: 100%;
  max-height: 100%;
  overflow: auto;

  :global {
    table {
      min-width: 980px;
      width: 100%;

      td {
        height: 54px;
        min-width: 140px;
        font-size: 18px;
        text-align: center;
        padding: 0;

        &>div {
          .flex();
          flex-wrap: wrap;

          p {
            margin-bottom: 0;
            line-height: normal;
            width: 100%;

            &:first-child {
              font-weight: bold;
            }
          }
        }

        &.green {
          background-color: #F6FFED;
          color: #52C41A;
        }

        &.cyan {
          color: #00AEAE;
        }

        &.red {
          color: #FF4D4F;
        }

        &.blue {
          color: #1890FF;
        }

        &.tdTitle {
          color: #fff;
          font-weight: bold;

          >div {
            .flex(center, center);
          }

          &.green {
            background-color: #52C41A;
          }

          &.cyan {
            background-color: #00AEAE;
          }

          &.red {
            background-color: #FF4D4F;
          }

          &.blue {
            background-color: #1890FF;
          }
        }

      }

      .tdTitleContent {
        cursor: default;

        &:hover {
          font-weight: bold;
          background-color: #E2F6FF;
        }
      }

      .greenTd {
        background: rgba(82, 196, 26, 0.1) !important;
        border: 1px solid #52C41A;
        color: #52C41A;
      }

      .cyanTd {
        background: rgba(0, 174, 174, 0.1);
        border: 1px solid #00AEAE;
        color: #00AEAE;
      }

      .redTd {
        background: rgba(255, 77, 79, 0.1);
        border: 1px solid #FF4D4F;
        color: #FF4D4F;
      }

      .blueTd {
        background: rgba(24, 144, 255, 0.1);
        border: 1px solid #1890FF;
        color: #1890FF;
      }
    }
  }
}