.opsPanel
{
  margin:20px auto;
  width: 1200px;
  // 开始激活页面
  .activatePanel{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:60px 0px;
  }
  .disposePanel{
    .language{
      display: flex;
      margin-bottom: 20px;
      li{
        margin-right: 20px;
        cursor: pointer;
        border:1px solid #fff;
        &.active{
          border:1px solid #5091FF;
        }
      }
    }
    .editorBody{
      border:1px solid #ddd;
      margin:20px 0px;
      .editorHead{
        background-color: #F1F8FF;
        height: 48px;
        line-height: 48px;
        display: flex;
        justify-content: space-between;
        padding:0px 20px;
        border-bottom: 1px solid #ddd;
      }
      .monaco-editor{
        width:1138px!important;
      }
    }
    .ant-modal-close{
      top:7px;
    }
    .listPart{
      min-height: 400px;
      .listNav{
        display: flex;
        li{
          background-color: #fafafa;
          border:1px solid #eee;
          border-radius: 5px;
          height: 38px;
          line-height:38px;
          padding:0px 20px;
          color: #333;
          margin-right: 20px;
          cursor: pointer;
          &:last-child{
            margin-right: 0px;
          }
          &.active{
            border:1px solid #5091FF;
            color: #5091FF;
            background-color: #fff;
          }
        }
      }
      .normalTable{
        margin-top: 20px;
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
          padding:10px 5px;
          color:#333;
          cursor: pointer;
        }
        .ant-table-thead{
          border:1px solid rgba(238,238,238,1)
        }
      }
    }
  }
  .ant-modal-close{
    top:7px;
  }
  // 列表
  .listPart{
    .statusTag{
      display: flex;
      padding:0px 16px;
      height: 32px;
      line-height: 32px;
      border-radius:20px;
      float: left;
      i{
        font-size: 20px!important;
        margin-right: 7px;
      }
      &.running{
        background:#F1F8FF;
        border:1px solid #5091FF;
        color: #5091FF;
      }
      &.Preparing{
        background:rgba(255,248,244,1);
        border:1px solid rgba(255,110,33,1);
        color:rgba(255,110,33,1) ;
      }
      &.pass{
        background:#EEFDF5;
        border:1px solid #28BD6C;
        color:#28BD6C ;
      }
      &.failed{
        background:#FCEEEE;
        border:1px solid #F73030;
        color:#F73030 ;
      }
      &.killed{
        background:#eee;
        border:1px solid #999;
        color:#999 ;
      }
    }

  }

}
// ops详情
.opsDetailPanel{
  height: 100vh;
  background-color: #114879;
  .opsInfos{
    height: 60px;
    background-color: #114879;
    color:#fff;
    padding:0px 20px;
  }
  .opsSection{
    height:calc( 100% - 60px );
    background-color: #fff;
    display: flex;
    section{
      height: 100%;
      float: left;
      &.leftSection{
        width:100%;
        .leftheader{
          background-color: #F1F8FF;
          padding:10px 20px;
          .nest{
            color: #888888;
            margin-right: 18px;
            &>span{
              color: #333;
            }
          }
        }
        .leftMainContent{
          padding:14px 20px;
          .contentBranch{
            border:1px solid #eee;
            background-color: #fafafa;
            padding:0px 18px;
            height: 40px;
            border-radius: 3px;
            color:#888;
            i{
              font-size: 16px;
              color:#BBB;
              margin-right: 10px;
            }
            .branchname{
              color:#333;
              margin-right: 15px;
            }
            .branchsha{
              color:#FF6E21;
            }
          }
        }
        .leftMenu{
          li.ant-menu-item,.ant-menu-submenu{
            padding:0px 13px 0px 20px!important;
            position: relative;
            color: #333;
          }
          .ant-menu-submenu-title{
            margin:0px;
            padding:0px 0px 0px 20px!important
          }
          .ant-menu-submenu-arrow{
            position: absolute;
            left: 2px;
          }
          .ant-menu.ant-menu-sub{
            .ant-menu-item:hover{
              background-color: #F1F8FF;
            }
          }
        }
        .statuslineColor{
          display: inline-block;
          height: 20px;
          line-height: 20px;
          padding:0px 10px;
          border-radius: 11px;
          font-size: 12px;
          margin-left: 6px;
          &.pass{
            border:1px solid rgba(40,189,108,1);
            color:rgba(40,189,108,1);
          }
          &.failed{
            border:1px solid #F73030;
            color:#F73030;
          }
          &.running{
            border:1px solid #5091FF;
            color:#5091FF;
          }
          &.Preparing{
            border:1px solid rgba(255,110,33,1);
            color:rgba(255,110,33,1);
          }
          &.killed{
            border:1px solid #999;
            color:#999;
          }
          &.skipped{
            border:1px solid #d4d9de;
            color:#798390;
          }
        }
      }
      &.rightSection{
        width:100%;
        background-color: #081930;
        .rightMainContent{
          padding:24px 30px;
          height:100vh;
          overflow-y: auto;
          & > div{
            margin-bottom: 12px;
            .items{
              height: 45px;
              line-height: 45px;
              padding:0px 24px;
              background:rgba(24,41,62,1);
              border-radius:5px;
              color:#fff;
              cursor: pointer;
              i{
                font-size: 13px;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .Resizer.vertical{
      position: relative;
    }
    .Resizer.vertical:hover:before{
      background: #eee;
    }
    .Resizer.vertical:before {
      content: "";
      border-radius: 50%;
      background: hsla(0,0%,92.2%,.3);
      width: 24px;
      height: 24px;
      position: absolute;
      z-index: 999;
      top: 50%;
      margin-top: -12px;
      right: -12px;
    }
    .Resizer.vertical::after{
      position: absolute;
      content: "\e712";
      font-family: iconfont;
      font-size: 10px;
      transform: scale(.8);
      top: 50%;
      margin-top: -10px;
      color: #666;
      right: -12px;
      opacity: .3;
      z-index: 1000;
      cursor: col-resize;
    }
  }
}
.opsDetailOut{
  display: flex;
  color: #fff;
  line-height: 22px;
  align-items: flex-start;
  margin-top: 5px;
  &>span{
    margin-right: 10px;
    min-width: 20px;
    text-align: left;
    padding-left: 3px;
  }
  &>p{
    margin-bottom: 0px;
  }
}
.noOperation{
  margin-bottom:20px;
  width:380px;
  text-align:center;
  line-height:22px;
  color:#666;
}

.disposeList{
  min-height: 450px;
  .ant-table-body{
    margin:0px!important;
    .ant-table-thead{
      background-color: #fafafa;
    }
  }
}
.txtright{
  text-align: right;
}
.menus{
  display: flex;
  box-shadow: 0px 0px 6px rgba(0,3,8,0.1);
  padding:20px 0px 10px 0px;
  justify-content: space-between;
  margin-bottom: 20px;
  & > li{
    display: flex;
    flex-flow: column;
    align-items:center;
    justify-content: flex-start;
    text-align: center;
    color: #787878;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    max-width: 122px;
    flex:2;
    &>i{
      font-size: 30px!important;
      height: 30px;
      width: 30px;
      line-height: 30px;
    }
    &:hover,&.active{
      & > i{
        color: #1890FF;
      }
    }
    &.active::after{
      position: absolute;
      left: 50%;
      margin-left: -25px;
      bottom:-10px;
      width: 50px;
      height: 2px;
      background-color: #1890FF;
      content: "";
    }
    .aboutEdit{
      width: 100%;
      .operateName{
        position: relative;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 15px;
        min-height: 40px;
        & > i{
          position: absolute;
          right:0px;
          top:10px;
          display: none;
        }
      }
      &:hover i{
        display: block;
      }
    }
  }
  & > li.menuAdd{
    position: relative;
    flex: 1;
    &:hover{
      & > i{
        color: #787878;
      }
    }
    & > i{
      font-size: 18px!important;
      position: absolute;
      z-index: 1;
      top:0px;
    }
    & > input{
      position: absolute;
      z-index: 1;
      top:3px;
    }
    &::before{
      position: absolute;
      left: 0;
      width: 100%;
      border-bottom: 1px dashed #eee;
      content: "";
      top:15px;
      margin-top: -1px;
      z-index: 0;
    }
  }
}

.choosenList{
  display: flex;
  flex-wrap: wrap;
  line-height: 35px;
  align-items: center;
  & > span{
    display: block;
    min-width: 75px;
    text-align: right;
    font-size: 14px;
    color: #333;
    height: 35px;
    margin-right: 12px;
  }
  & > ul{
    display: flex;
    flex-wrap: wrap;
    li{
      padding:0px 12px;
      height: 35px;
      line-height: 35px;
      border:1px solid #e1e4e8;
      background-color: #fff;
      margin:6px 0px;
      margin-right: 12px;
      border-radius: 5px;
      cursor: pointer;
      color: #333;
    }
    li.active{
      color: #fff;
      background-color: #1890FF;
    }
  }
}
.addBtn{
  display: block;
  width: 100%;
  border:1px solid #e1e4e8;
  height: 48px;
  line-height: 48px;
  color: #1890FF;
  font-size: 16px;
  border-radius: 3px;
  padding: 0px 20px;
}
.stepsItem{
  border:1px solid #e1e4e8;
  border-radius: 4px;
  margin-bottom: 15px;
  .stepsHead{
    padding:8px 15px;
    span > a > i{
      margin-left: 8px;
      color: #666!important;
    }
  }
  .stepsBody{
    padding:10px 15px;
    border-top: 1px solid #e1e4e8;
    background-color: rgb(251, 251, 251);
    display: none;
    transition: 0.3s;
  }
  .stepsBody.active{
    display: block;
  }
}