page-rule-detail {
  display: block;

  .rule-detail-app {
    padding: 10px 20px;
    background: white;
    box-sizing: border-box;
  }

  .trigger-operation {
    position: relative;

    .svg-removebtn {
      position: absolute;
      right: 10px;
      top: 10px;
      display: none;
    }
  }

  .form-flex:hover {
    .svg-removebtn {
      display: block;
    }
  }

  .form-flex {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .item-label {
      display: flex;
      width: 100px;
      margin: 0 10px 0 0;
      justify-content: flex-end;
      font-weight: 500;
    }

    .content-title {
      font-weight: 500;
      display: inline-block;
      width: 108px;
      margin-right: 15px;
    }

    .item-flex {
      display: flex;
      box-sizing: border-box;
      align-items: center;
    }

    .flex-box {
      display: flex;
      align-items: center;
    }

    .item-excision {
      padding-bottom: 15px;
      border-bottom: 2px solid #ccc;
    }

    .flex-box-top {
      display: flex;
      align-items: flex-start;
    }

    .flex-column {
      display: flex;
      flex-direction: column;
      align-items: center;

      input {
        border: none;
      }

      span {
        display: inline-block;
        width: 100%;
        color: #fff;
      }
    }

    fieldset {
      background: #F9F9F9;
      border-radius: 3px;
      padding: 15px;
    }

    label {
      margin-bottom: 0;
    }

    .form-content-l {
      flex: 1;
    }

    .form-content-m {
      flex: .5;
    }

    .form-content-m::selection {
      background-color: red;
    }

    .select-s {
      width: 108px;
      background: white;
    }

    .form-normal-width {
      width: 65px;
    }

    .form-middle-width {
      width: 130px;
    }

    .border {
      border: 1px solid #E2E2E2;
      margin-bottom: 5px;
    }
  }

  .button-flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item-right {
    margin-right: 15px;
  }

  .icon-font-size {
    font-size: 34px;
  }

  .format {
    line-height: 21px;
  }

  .textarea {
    display: flex;
    flex: 1;
    margin-left: 123px;
  }

  .item-bottom {
    margin-bottom: 10px;
  }

  .flex-box-input {
    width: 125px;
    width: fit-content;
    border-right: none;
    border-radius: 2px 0 0 2px;
    background: #f4f4f4;
    white-space: nowrap;

    .fa {
      margin-left: 10px;
    }
  }

  .btn-label {
    width: 127px;
    background: linear-gradient(#fff, #F3F3F3);
    margin-right: 15px;
  }

  .alarm-arrow {
    background: #F4F4F4;
    input {
      width: 85px !important;
    }
  }

  .arrow {
    display: inline-block;
    width: 27px;
    height: 34px;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
  }

  .arrow-info {
    background: url(~@images/arrow-info.svg) center no-repeat;
  }

  .arrow-warning {
    background: url(~@images/arrow-warning.svg) center no-repeat;
  }

  .arrow-critical {
    background: url(~@images/arrow-critical.svg) center no-repeat;
  }

  .warn-add {
    display: inline-block;
    width: 20px;
    height: 34px;
    background: url(~@images/warn-add.svg) center no-repeat;
  }

  .margin-top {
    margin-top: 7px !important;
  }

  plan-cycle {
    .uib-time {
      input {
        background: var(--global-theme-color-light, #00c8c1) !important;
        color: #fff;
        border-color: var(--global-theme-color-light, #00c8c1);
        width: 74px;
      }
    }

    .uib-increment, .uib-decrement {
      a {
        color: var(--global-theme-color-light, #00c8c1) !important;
      }
    }

    .uib-separator {
      width: 15px;
      text-align: center;
    }

    .btn-day {
      &.active, &:active {
        &::before {
          background: var(--global-theme-color-light, #00c8c1) !important;
        }
      }
    }
  }

  .warning {
    color: #F5A623;
    background: #F5A623;
  }

  .info {
    color: var(--pageWarning-info-color, #00c8c1);
    background: var(--pageWarning-info-color, #00c8c1);
  }

  .critical {
    color: var(--pageWarning-critical-color, #EA4B55);
    background: var(--pageWarning-critical-color, #EA4B55);
  }

  .flex-intelligent {
    display: inline-block;
    border: 1px solid #D0D0D0;
    padding: 16px;
    margin-left: 109px;
    border-radius: 3px;
    width: calc(100% - 110px);

    p {
      font-weight: 500;
    }
  }

  .threshold-config {
    position: relative;
    padding-left: 110px;
  }

  .form-line {
    position: absolute;
    left: 85px;
    top: 100px;
    display: inline-block;
    width: 25px;
    height: 159px;
    border: 1px solid #D0D0D0;
    border-right: none;

    span {
      display: inline-block;
      width: 33px;
      height: 33px;
      padding: 5px 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--pageWarning-info-color, #00c8c1);
      margin-left: -17px;
      background: #F9F9F9;
      margin-top: 66px;
    }
  }

  .form-threshold {
    margin-left: 109px;
  }

  sharp-selector {
    width: 110px !important;
  }

  .flex-box-margin {
    margin: 0 15px;

    input {
      color: #fff;
      background-color: var(--global-theme-color-light, #00c8c1) !important;
      border-color: var(--global-theme-color-light, #00c8c1) !important;
    }

    span {
      color: var(--global-theme-color-light, #00c8c1) !important;
    }
  }

  .i-margin-left {
    margin-left: 5px;
  }

  .flex-end {
    justify-content: flex-end;
  }

  .white {
    visibility: hidden;
  }

  .form-unnormal {
    border: 1px solid #D0D0D0;
    padding: 16px;
    border-radius: 3px;

    p {
      font-weight: 500;
    }
  }

  .custom-fz {
    border: 1px solid rgba(0, 0, 0, .13);
    padding: 5px;
    margin: 0 5px 0 0;
    display: flex;
    flex: 9;
    height: 34px;
    flex-wrap: wrap;
    overflow-y: auto;

    li {
      border: 1px solid rgba(0, 0, 0, .13);
      padding: 0 3px;
      position: relative;
      margin: 0 2px 2px 0;
      height: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .i-close {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: -4px;
    color: #5688E3;
    background: white;
    text-align: center;
    transform: scale(.5);
    transform-origin: right top;
    transition: all .2s;

    &:hover {
      color: red !important;
    }
  }
}