.message-tip {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999999;
  .widget-box {
    position: fixed;
    right: 0px;
    top: 200px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    cursor: pointer;
    &.isPressed {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
    .tip-icon-list {
      list-style: none;
      padding: 16px;
      height: 100%;
      margin: 0;
      li {
        display: block;
        height: 6px;
        width: 28px;
        margin: 3px 0;
        position: relative;
        border: 1px solid #5f48ff;
        &::before {
          display: inline-block;
          content: '';
          height: 100%;
          background-color: #5f48ff;
          position: absolute;
          top: 0;
          left: 0;
        }
        &:nth-child(1)::before {
          width: 16px;
        }
        &:nth-child(2)::before {
          width: 10px;
        }
        &:nth-child(3)::before {
          width: 16px;
        }
      }
      
    }
    .running-num {
      background-color: #f35b5d;
      color: #fff;
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 50%;
      top: -6px;
      right: 0;
      font-size: 12px;
      text-align: center;
      
    }
  }

  .sideList {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 360px;
    height: 100%;
    padding-top: 20px;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    font-size: 14px;
    animation-fill-mode: both;
    font-family: PingFangSC;
    .ant-tabs-nav-container {
      padding-left: 30px;
      .ant-tabs-nav .ant-tabs-tab {
        padding:12px 3px;
        margin: 0 22px 0 0;
      }
      .ant-tabs-top .ant-tabs-ink-bar-animated {
        width: 79px;
      }
    }
    .tit {
      height: 32px;
      line-height: 28px;
      margin: 10px 32px 10px 0;
      font-size: 16px;
      color: rgba(0,0,0, 0.45);
      h3 {
        float: left;
        font-weight: normal;
        font-size: 20px;
        padding-left: 30px;
        margin: 0;
      }
      i {
        float: right;
        line-height: 32px;
        font-size: 18px;
        cursor: pointer;
      }

    }
    .content {
      padding-top: 10px;

      .empty-task-msg {
        text-align: center;
        color: rgba(0, 0, 0, 0.25);
        img {
          margin: 50px 0 22px 0;
          width: 112px;
        }

      }
      .task-item {
        border-bottom: 1px solid #e8e8e8;
        padding: 20px 45px 20px 30px;
        
        h4.name {
          font-weight: normal;
          font-size: 16px;
          .icon-wrap {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            font-weight: bold;
            text-align: center;
            i.anticon {
              color: #fff;
            }
          }
          &.reset-name {
            .icon-wrap {
              background-color: rgba(0, 0, 0, 0.16);
            }
          }
          &.fail-name {
            .icon-wrap {
              background-color: #f55656;
            }
          }
          &.outtime-name {
            .icon-wrap {
              background-color: yellow;
            }
          }
          &.success-name {
            .icon-wrap {
              background-color: #39b54a;
            }
          }

        }
        .desc {
          color: rgba(0, 0, 0, 0.45);
          a {
            padding-left: 5px;
          }
        }

        .notice {
          color: rgba(0, 0, 0, 0.45);
          padding-top: 10px;
        }
        .ant-progress-text{
          margin-left: 6px;
        }
        .process-wrap {
          padding-bottom: 5px;
          .process-inner {
            float: left;
            width: calc(~'100% - 55px');
          }
          a {
            top: 1px;
            position: relative;
          }

        }
        .fail-box {
          .message {
            display: inline-block;
            width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          a {
            vertical-align: 4px;
          }
        }

        &.finish-item {
          padding-left: 80px;
          h4.name {
            position: relative;
            .icon-wrap {
              position: absolute;
              left: -42px;
              top: -1px;
            }
          }
        }
      }
    }
  }
  .clearfix() {
    zoom: 1;
    &:before,
    &:after {
      content: ' ';
      display: table;
    }
    &:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
  @-webkit-keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      pointer-events: none;
    }
  }
  
  .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }
  
  @-webkit-keyframes fadeOutRight {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }
  
  @keyframes fadeOutRight {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      pointer-events: none;
    }
  }
  
  .fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
  }
  
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}