// 上方搜索
/deep/.seachData {
    height: 64px;
    display: flex;
    background: #fff;
    box-shadow: inset 0px -1px 0px 0px #DCDCDC;
    .el-form {
        display: flex;
        flex-wrap: wrap;
    }
    .el-button--primary {
        min-width: 112px;
        height: 32px;
        background: rgba(0, 82, 217, 1);
        border-color: rgba(0, 82, 217, 1);
        font-size: 14px;
        margin: 16px 0 16px 16px;
    }
    .el-button--text {
        margin-left: 36px;
    }
        .el-form-item {
            margin: 0 20px 20px 0;
            &.active {
                margin-bottom: 0;
            }
        }
        .el-form-item__label {
            width: 80px;
            font-size: 14px;
            font-weight: 400;
            padding-right: 10px;
        }
        .el-range-editor {
            &.el-input__inner {
                width: 220px;
            }
        }
        .el-range-editor--small {
            .el-range__close-icon {
                vertical-align: middle;
            }
            .el-range-separator, .el-range__icon {
                line-height: 18px;
            }
        }
        .el-select {
            width: 220px;
        }
        .seachData-left {
            width: 50%;
            color: rgba(0, 0, 0, 0.9000);
            line-height: 64px;
            padding-left: 32px;
            font-size: 20px;
            font-weight: 500;
        }
        .seachData-right {
          width: 50%;
          padding-right: 40px;
          display: flex;
          justify-content: flex-end;
          .el-input {
            width: 320px;
            height: 32px;
            margin: 16px 0;
          }
          .el-input__inner {
            height: 32px;
            width: 320px;
            font-size: 14px;
            padding: 8px 10px;
          }
        }
        .seachData-next-line {
            width: 100%;
            margin-top: 20px;
            border-top:1px dashed #E4E4E4;
            padding: 20px 0;
            display: flex;
            &.active-top {
                margin-top: 0;
                border-top: 0;
            }
            .seachData-next-div {
                width: 50%;
                &.left-div {
                    .el-button--primary {
                        float: left;
                        margin-left: 0;
                        color: #fff;
                        color: #FFFFFF;
                        cursor: pointer;
                        background-color: #1890ff;
                        border-color: #1890ff;
                        .el-icon-plus {
                            margin-right: 4px;
                            font-weight: 600;
                        }
                    }
                }
                &.right-div {
                    .el-button--primary {
                        float: right;
                    }
                }
                .el-button--primary {
                    padding: 7px;
                    background: #F6F6F6;
                    color: #333;
                    margin-bottom: 0;
                    border-color: #DFDFDF;
                }
                .el-button [class*="el-icon-"] + span {
                    margin-left: 0;
                }
            }
        }
}
// 表格弹框
/deep/.from-pop-up {
    .el-dialog {
        border-radius: 4px;
    }
    .el-dialog__header {
        height: 50px;
        font-size: 16px;
        padding: 14px 24px;
        border-bottom: 1px solid #DDDDDD;
    }
    .el-dialog__headerbtn {
        font-size: 24px;
        top: 14px;
    }
    .el-dialog__body {
        padding: 24px;
        max-height: 540px;
        overflow-y: auto;
        .el-form-item__label {
            font-size: 14px;
            padding-right: 16px;
            font-weight: 400;
        }
        .el-input--medium, .el-form-item__content {
            width: 400px;
        }
        .el-range-editor--small {
            .el-range-separator, .el-range__icon {
                line-height: 16px;
            }
        }
        .el-form-item {
            margin-bottom: 24px;
            &.content-active {
                .el-form-item__content {
                    width: 626px;
                }
            }
            .el-input__inner {
                font-size: 14px;
                padding: 8px 16px;
                height: 34px;
            }
            .oneDate {
                .el-input__inner {
                    padding: 8px 34px;
                }
            }
        }
        .switch-span {
            margin-left: 6px;
            vertical-align: middle;
            color: #151B39;
            font-size: 14px;
        }
    }
    .el-dialog__footer {
        padding: 12px 24px;
        .el-button {
            height: 34px;
            width: 104px;
            font-size: 12px;
        }
    }
}
// 下面的分页高度
.pagination-container {
    height: 52px;
}
// 列表样式
/deep/.el-table--enable-row-transition {
    .el-table__body {
        td {
            height: 56px;
            font-size: 14px;
            color: #333;
            line-height: 22px;
        }
    }
}
/deep/.seachTable {
    .el-dialog__title {
        font-weight: 600;
    }
    &.el-table {
        th {
            height: 56px;
            font-size: 14px;
            color: #333;
            background: #f8f8f9;
            font-weight: 400;
        }
        .el-table__header-wrapper {
            th {
                height: 56px;
                padding: 0;
                font-size: 14px;
                color: #333;
            }
        }
        .cell.el-tooltip {
            .ellipsis-hidden {
                width: 100%;
                display: flow-root;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
    }
}
/deep/.ql-editor {
    min-height: 240px;
    height: 240px;
}

.app-container {
  padding: 0;
  background-color: #fafafa;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 96px;
    .scroll {
        overflow-y: auto;
        &::-webkit-scrollbar-track-piece {
            background: #d3dce6;
          }
      
          &::-webkit-scrollbar {
            width: 6px;
          }
      
          &::-webkit-scrollbar-thumb {
            background: #99a9bf;
            border-radius: 20px;
          }
    }
    .not-data {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        color: #222;
    }
    .loading-left {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    .loading {
        z-index: 10;
        background: hsla(0,0%,100%,.9);
        color: rgb(64, 158, 255);
        text-align: center;
        .loading-center {
            margin-bottom: 8px;
        }
        .loading-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .content-left {
        position: absolute;
        left: 0;
        right: 432px;
        top: 0;
        bottom: 0;
        right: 0;
        .content-left-center {
            width: 100%;
            height: 100%;
            padding: 0 16px 0 16px;
            position: relative;
            /deep/.pagination-container {
                background: #fafafa;
            }
            /deep/.el-pagination {
                text-align: center;
                width: 100%;
            }
            /deep/.el-pagination.is-background {
                .el-pager li {
                    background-color: #fafafa;
                    border-radius: 3px;
                    color: rgba(0, 0, 0, 0.6000);
                    border: 1px solid rgba(220, 220, 220, 1);
                    border-radius: 3px;
                    &:not(.disabled).active {
                        color: #fff;
                        background: rgba(0, 82, 217, 1);
                    }
                }
                .btn-prev, .btn-next {
                    border: 0;
                    background: #fafafa;
                    color: rgba(0, 0, 0, 0.6000);
                }
            }
        }
        .left-content {
            position: relative;
            padding-left: 80px;
            width: 752px;
            margin-bottom: 40px;
            &:first-child {
                margin-top: 40px;
            }
            .left-content-title {
                width: 100%;
                margin-bottom: 12px;
                height: 20px;
                .logo {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #fff;
                    border: 1px solid #ccc;
                    margin-right: 8px;
                    float: left;
                    .logo-img {
                        width: 18px;
                        height: 18px;
                        border-radius: 50%;
                    }
                }
                .media {
                    margin-right: 32px;
                }
                .text {
                    float: left;
                    font-size: 14px;
                    line-height: 20px;
                    color: rgba(0,0,0,0.4); 
                }
            }
            .content-text-header {
                height: 28px;
                line-height: 28px;
                font-size: 20px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.9000);
                text-align: left;
                margin-bottom: 8px;
                .link {
                  cursor: pointer;
                  color: #222;
                  &:hover {
                    color: #0052d9;
                  } 
                }
            }
            .content-text {
                margin-bottom: 4px;
                margin-top: 0;
                text-align: left;
                font-size: 14px;
                line-height: 20px;
                color: rgba(0,0,0,0.6);
                word-break: break-all;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    .content-right {
        position: absolute;
        right: 0;
        top: 32px;
        bottom: 0;
        width: 400px;
        .change {
            height: 40px;
            line-height: 40px;
            padding: 0 16px;
            font-size: 20px;
            text-align: left;
            color: #222;
        }
        .content-right-content {
            height: calc(100% - 40px);
            padding: 16px 16px 0 16px;
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .right-content {
            padding: 16px 24px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            .content-text-header {
                height: 32px;
                font-size: 20px;
                font-weight: 500;
                color: #222;
                text-align: left;
            }
            .content-text {
                margin-top: 8px;
                text-align: left;
                font-size: 14px;
                color: #222;
                word-break: break-all;
            }
        }
    }
    .add-more {
        color: #222;
        border: 1px solid #ccc;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        margin-bottom: 20px;
        cursor: pointer;
        &:hover {
            background: #f5f5f5;
        }
    }
  }
}
.blue {
    color: #0052d9;
    cursor: pointer;
    &:hover {
        color: #025cf1;
    }
}
.app-header {
  height: 96px;
  background: #fff;
  padding: 24px 36px;
  display: flex;
  .search-logo {
    height: 32px;
    width: 32px;
    background: #fafafa;
    margin: 8px 12px 8px 0;
    float: left;
  }
  /deep/.el-input-group {
    width: 800px;
  }
  /deep/.el-input-group--append {
    float: left;
    .el-input__inner {
      height: 48px;
      width: 680px;
      padding-left: 40px;
      border-color: rgba(220, 220, 220, 1);
      border-radius: 4px 0 0 4px;
    }
    .el-input-group__append {
      width: 120px;
      text-align: center;
      background: rgba(0, 82, 217, 1);
      color: rgba(255,255,255,0.9);
      border-radius: 0 4px 4px 0;
      &:hover {
        background: rgba(0, 82, 217, .8);
      }
    }
    .el-input__prefix {
        font-size: 16px;
    }
  }
}