.service-table {
  .ant-table-tbody > tr > td {
    word-break: break-all;
  }

  .table-progress {
    display: inline-block;
    width: 50px;
    margin-right: 15px;
    text-align: left;

    .color-danger {
      @include progress-bg($color-danger);
    }

    .color-warning {
      @include progress-bg($color-warning);
    }

    .color-success {
      @include progress-bg($color-success);
    }

    .color-crash {
      @include progress-bg(#b80000);

      .ant-progress-bg {
        animation: crashAnimation 1.5s infinite ease-in-out;
      }
    }

    @keyframes crashAnimation {
      0% {
        box-shadow: 0 0 -2px #b80000;
        opacity: 1;
      }

      50% {
        box-shadow: 0 0 2px #ff0000;
        opacity: 0.9;
      }

      100% {
        box-shadow: 0 0 -2px #b80000;
        opacity: 1;
      }
    }
  }

  .table-percent {
    display: inline-block;
    width: 50px;
    text-align: left;
  }

  .service-ops {
    .service-op-icon {
      position: relative;
      margin-right: 12px;
      font-size: 20px;

      &:hover {
        color: $color-primary;
        cursor: pointer;
      }

      &:after {
        content: '';
        position: absolute;
        top: 2px;
        right: -6px;
        width: 1px;
        height: 14px;
        background: $color-dark-1;
      }

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

        &::after {
          display: none;
        }
      }
    }
  }
}

.path-breadcrumb {
  padding-bottom: 20px;

  .ant-breadcrumb-link {
    color: $color-dark-4;
    cursor: pointer;

    &:hover {
      color: $color-primary;
    }
  }
}

.item-image {
  & > span {
    position: relative;
    left: 0;
    display: block;
    width: 100%;
    height: 28px;
    line-height: 28px;

    .image-txt-container {
      position: absolute;
      width: 100%;
      height: 100%;

      .tail {
        display: inline-block;
        width: calc(100% - 45px);
        direction: rtl;
      }

      .hack-safari {
        direction: ltr;
      }

      .head {
        display: inline-block;
        overflow: hidden;
        text-align: right;
      }
    }
  }
}

.service-table-progress {
  .table-tooltip {
    color: $lightnavy;

    .color-crash {
      color: #ff0000;
    }
  }
}
