@keyframes t-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .t-icon {
      display: inline-block;
      vertical-align: middle;
      width: 1em;
      height: 1em;
    }

    .t-icon::before {
      font-family: unset;
    }

    .t-icon-loading {
      animation: t-spin 1s linear infinite;
    }

    .t-icon {
      fill: currentColor;
    }

    .t-icon.t-size-s,
    i.t-size-s {
      font-size: 14px;
    }

    .t-icon.t-size-m,
    i.t-size-m {
      font-size: 16px;
    }

    .t-icon.t-size-l,
    i.t-size-l {
      font-size: 18px;
    }

    .ewp_mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #ewp-task-record .panel_wrap {
      position: fixed;
      bottom: 16px;
      right: 16px;
      height: 600px;
      width: 364px;
      background: #f2f4f8;
      border: 1px solid #e6e9ef;
      border-radius: 10px;
      box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 8px 12px -8px rgba(0, 0, 0, 0.05);
      z-index: 9999;
      box-sizing: border-box;
    }

    #ewp-task-record .panel_content {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
    }

    #ewp-task-record .panel_animate_down {
      animation: panel_height_down 0.3s ease;
      height: 60px;
    }

    #ewp-task-record .panel_animate_up {
      animation: panel_height_up 0.3s ease;
      height: 600px;
    }

    #ewp-task-record .panel_header {
      height: 60px;
      padding: 0 20px;
      position: relative;
      border-top-right-radius: 12px;
      cursor: pointer;
      border-bottom: 1px solid #e9ecf1;
      background: linear-gradient(270deg, #F2F4F8 44.75%, rgba(241, 242, 245, 0.1) 100%);
    }

    #ewp-task-record .panel_header_bg_img {
      background-image: url(https://qcloudimg.tencent-cloud.cn/raw/5501345d6bec9942424ae5eacc89a6a5.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      right: -250px;
      bottom: 0;
    }

    #ewp-task-record .panel_header_folded {
      border-bottom: unset;
      border-bottom-right-radius: 12px;
    }

    #ewp-task-record .panel_row {
      display: flex;
      flex-direction: row;
    }

    #ewp-task-record .panel_row_center {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    #ewp-task-record .panel_space_between {
      justify-content: space-between;
    }

    #ewp-task-record .panel_center {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #ewp-task-record .panel_title {
      margin-left: 12px;
      margin-right: 8px;
      color: rgba(0, 0, 0, 0.9);
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      font: PingFang SC;
    }

    #ewp-task-record .panel_footer {
      height: 64px;
      border-top: 1px solid #e9ecf1;
      padding: 0 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    }

    #ewp-task-record .panel_text {
      font-size: 12px;
      font: PingFang SC;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
    }

    #ewp-task-record .panel_text--primary {
      color: #0052d9;
    }

    #ewp-task-record .panel_text--thin {
      font-weight: 400;
    }

    #ewp-task-record .panel_text--grey {
      color: rgba(0, 0, 0, 0.4);
    }

    #ewp-task-record .panel_button {
      line-height: 32px;
      padding: 0 24px;
      background-color: #3377ff;
      border-radius: 4px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      font-family: PingFang SC;
    }

    #ewp-task-record .panel_text_wrap {
      display: "block";
      line-height: 18px;
      vertical-align: middle;
      margin-bottom: 2px;
      display: flex;
      flex-direction: row;
    }

    #ewp-task-record .panel_task_list_wrap {
      flex: 1;
      padding: 8px 16px 16px 16px;
      overflow-y: scroll;
      background: #f2f4f8;
      position: relative;
    }

    #ewp-task-record .panel_task_list_wrap_hide {
      flex: 0;
      padding: 0px;
      position: relative;
    }

    #ewp-task-record .panel_word_break {
      width: calc(100% - 35px);
      word-wrap: break-word;
    }

    #ewp-task-record .panel_task_wrap {
      margin-bottom: 8px;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 12px 12px 12px 12px;
    }

    #ewp-task-record .panel_intro_task_wrap {
      background-color: rgba(227, 236, 255, 0.8);
      padding: 8px 16px;
    }

    #ewp-task-record .panel_task_left {
      width: 20px;
      height: 20px;
      border-radius: 12px;
      overflow: hidden;
      background: #e9ecf1;
      text-align: center;
      display: inline-block;
      color: rgba(0, 0, 0, 0.9);
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;
      font-family: PingFang SC;
    }

    #ewp-task-record .panel_task_step_img {
      width: 268px;
      height: 156px;
      border-radius: 4px;
      border: 1px #e9ecf1 solid;
      position: relative;
      overflow: hidden;
    }

    #ewp-task-record .panel_task_step_combine_info {
      justify-content: space-between;
      height: 24px;
      padding-left: 8px;
      padding-right: 4px;
      margin-bottom: 8px;
      cursor: pointer;
    }

    #ewp-task-record .panel_task_step_combine_info_text {
      font-size: 12px;
      line-height: 20px;
    }

    #ewp-task-record .panel_task_dom_recorder {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      overflow: hidden;
      cursor: pointer;
    }

    #ewp-task-record .panel_task_dom_recorder_preview {
      position: fixed;
      left: 15%;
      right: 15%;
      bottom: 15%;
      top: 15%;
      z-index: 1;
    }

    #ewp-task-record .panel_task_mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
    }

    #ewp-task-record .panel_task_right {
      margin-left: 12px;
      flex: 1;
      overflow: hidden;
    }

    #ewp-task-record .panel_task_step_title {
      line-height: 20px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
      display: inline-block;
    }

    #ewp-task-record .panel_task_title_button {
      margin-left: 8px;
      font-size: 12px;
      color: #3377ff;
      font-weight: 500;
      cursor: pointer;
    }

    #ewp-task-record .panel_match_parent {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      border-radius: 12px;
    }

    #ewp-task-record .panel_task_title_wrap {
      margin-bottom: 2px;
    }

    #ewp-task-record .panel_task_pv_circle {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      flex-shrink: 0;
      margin-right: 4px;
      border: 1px solid;
      border-color: #c5c5c5;
    }

    #ewp-task-record .panel_task_label {
      display: inline-block;
      min-width: 35px;
    }

    #ewp-task-record .panel_task_circle {
      height: 6px;
      width: 6px;
      margin: 2px;
      border-radius: 3px;
      background-color: #a6a6a6;
    }

    #ewp-task-record .panel_task_content {
      margin-bottom: 2px;
      min-height: 32px;
      position: relative;
    }

    #ewp-task-record .panel_task_content_space {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 10px;
    }

    #ewp-task-record .panel_task_content_block {
      margin: 5px 0 5px 10px;
      background: rgba(241, 242, 245, 0.5);
      padding: 10px;
      width: calc(100% - 30px);
    }

    #ewp-task-record .panel_loading {
      margin-right: 4px;
      animation: linear panel_loading 1s infinite;
    }

    #ewp-task-record .panel_pointer {
      cursor: pointer;
      pointer-events: all;
    }

    #ewp-task-record .task_add_wrap {
      position: fixed;
      z-index: 99999;
    }

    #ewp-task-record .task_add_content_border {
      box-sizing: border-box;
      padding: 1px;
      border-radius: 8px;
      background-image: linear-gradient(79.4deg, #004FEE 7.89%, #593BFD 50%);
      box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    #ewp-task-record .task_add_content {
      border-radius: 8px;
      padding: 12px;
      background: #ffffff;
    }

    #ewp-task-record .task_add_text {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      display: flex;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 5px;
    }

    #ewp-task-record .task_add_grey {
      font-size: 12px;
      margin-left: 4px;
      color: rgba(0, 0, 0, 0.4);
    }

    #ewp-task-record .task_add_bold {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
    }

    #ewp-task-record .panel_footer_redo {
      margin-left: 8px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
    }

    #ewp-task-record .panel_add_checkbox_label {
      display: inline-block;
      vertical-align: middle;
      min-height: 16px;
      box-sizing: border-box;
      position: relative;
      padding-left: 20px;
    }

    #ewp-task-record .panel_add_checkbox_input:checked,
    #ewp-task-record .panel_add_checkbox_input:focus,
    #ewp-task-record .panel_add_checkbox_input:checked:hover {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNNS43IDguM0wyLjkgNS41IDEuNSA2LjlsNC4yIDQuMiA2LjQtNi40LTEuNC0xLjQtNSA1eiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);
      background-color: #0052d9;
      border-color: #0052d9;
      background-position: inherit;
      background-size: 100% auto;
    }

    #ewp-task-record .panel_add_checkbox_input:indeterminate {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTIgNmgxMHYySDJ6Ii8+PC9zdmc+);
      background-color: #0052d9;
      border-color: #0052d9;
      background-position: inherit;
      background-size: 100% auto;
    }

    #ewp-task-record .panel_add_checkbox_input {
      height: 16px;
      cursor: pointer;
      vertical-align: middle;
      outline: none;
      -webkit-appearance: none;
      border: 1px solid #d6dbe3;
      background-color: #fff;
      border-radius: 0;
      color: rgba(0, 0, 0, 0.9);
      position: absolute;
      top: 1px;
      left: 0;
      box-sizing: border-box;
      padding: 0;
    }

    #ewp-task-record .panel_add_checkbox_text {
      line-height: 16px;
      cursor: pointer;
      font-size: 12px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
    }

    #ewp-task-record .panel_bubble_wrap {
      box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      position: absolute;
      z-index: 1;
    }

    #ewp-task-record .panel_bubble_item {
      height: 30px;
      width: 90px;
      padding-left: 10px;
      background-color: #fff;
      cursor: pointer;
      align-items: center;
      display: flex;
    }

    #ewp-task-record .panel_task_exit_pop_content {
      background: #fff;
      z-index: 1;
      padding: 20px;
      width: 250px;
      box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
    }

    #ewp-task-record .panel_task_exit_pop_title {
      font-size: 14px;
      margin-bottom: 10px;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
    }

    #ewp-task-record .panel_task_exit_pop_text {
      font-size: 12px;
      word-wrap: break-word;
      word-break: break-word;
      color: rgba(0, 0, 0, 0.9);
    }

    #ewp-task-record .panel_task_exit_pop_footer {
      margin-top: 24px;
      text-align: right;
    }

    #ewp-task-record .panel_task_exit_pop_button {
      margin-left: 10px;
      display: inline-block;
      text-align: center;
      height: auto;
      padding: 5px;
      vertical-align: middle;
      line-height: 1.5;
      background-color: transparent;
      border: none;
      cursor: pointer;
      outline: 0 none;
      min-width: 24px;
      box-sizing: border-box;
      color: rgba(0, 0, 0, 0.9);
    }

    #ewp-task-record .task_add_primary {
      color: #0052d9;
      margin-left: 8px;
    }

    #ewp-task-record .combine-modal-wrap {
      position: fixed;
      z-index: 1001;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #ewp-task-record .combine-modal-mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 1000;
      overflow-y: auto;
    }

    #ewp-task-record .combine-modal-content {
      width: 750px;
      height: 542px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      z-index: 1001;
      position: relative;
    }

    #ewp-task-record .combine-modal-title {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.9);
      font-size: 600;
      font-family: PingFang SC;
    }

    #ewp-task-record .combine-modal-desc {
      display: block;
      margin-top: 20px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.6);
    }

    #ewp-task-record .combine-modal-events {
      display: flex;
      margin-top: 20px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    #ewp-task-record .combine-modal-events-content {
      display: flex;
      flex-direction: column;
    }

    #ewp-task-record .combine-modal-events-title {
      display: block;
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 10px;
    }

    #ewp-task-record .combine-modal-events-list {
      height: 360px;
      width: 360px;
      display: flex;
      flex-direction: column;
      border: 1px solid #dbdfe6;
    }

    #ewp-task-record .combine-modal-events-list-content {
      height: 320px;
      overflow-y: scroll;
    }

    #ewp-task-record .combine-modal-events-list-loading {
      height: 30px;
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
      width: 100%;
    }

    #ewp-task-record .combine-modal-events-content-close {
      position: absolute;
      top: 0;
      right: 0;
      height: 40px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    #ewp-task-record .combine-modal-events-list-item {
      height: 56px;
      border-bottom: 1px solid var(--color-border-primary-default, #e6e9ef);
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 10px;
    }

    #ewp-task-record .combine-modal-events-list-item-header {
      height: 40px;
    }

    #ewp-task-record .combine-modal-events-list-item-name-wrap {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      overflow: hidden;
    }

    #ewp-task-record .combine-modal-events-list-item-name {
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.9);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    #ewp-task-record .combine-modal-events-list-item-id {
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 18px;
      color: #888888;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    #ewp-task-record .combine-modal-events-list-item-icon-wrap {
      width: 36px;
      cursor: pointer;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #ewp-task-record .combine-modal-footer {
      height: 30px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    #ewp-task-record .combine-modal-footer-btn {
      display: inline-block;
      line-height: 30px;
      padding: 0 20px;
      background: #0052d9;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
    }

    #ewp-task-record .combine-modal-footer-btn-cancel {
      background: #fff;
      color: #0052d9;
      border: 1px solid #cfd5de;
    }

    .panel_target_bg {
      border: 3px solid rgba(255, 132, 32, 0.5);
      position: fixed;
      background-color: rgba(255, 132, 32, 0.16);
      z-index: 99999;
      border-radius: 4px;
    }

    @keyframes panel_height_down {
      0% {
        height: 600px;
      }

      100% {
        height: 60px;
      }
    }

    @keyframes panel_height_up {
      0% {
        height: 60px;
      }

      100% {
        height: 600px;
      }
    }

    @keyframes panel_loading {
      0% {
        rotate: 0deg;
      }

      100% {
        rotate: 360deg;
      }
    }