// cover some ewan-ui styles
//.el-breadcrumb__inner,
//.el-breadcrumb__inner a {
//    font-weight: 400 !important;
//}
//
//.el-radio-button--mini .el-radio-button__inner {
//    padding: 4px 20px;
//    font-size: 14px;
//    border-radius: 0
//}
//
//.el-upload {
//    input[type="file"] {
//        display: none !important;
//    }
//    .el-icon-close {
//        font-size: 14px;
//    }
//}
//
//.el-upload__input {
//    display: none;
//}
//
//.cell {
//    .el-tag {
//        margin-right: 0px;
//    }
//}
//
//.small-padding {
//    .cell {
//        padding-left: 5px;
//        padding-right: 5px;
//    }
//}
//
//.fixed-width {
//    .el-button--mini {
//        padding: 7px 10px;
//        width: 60px;
//    }
//}
//
//.status-col {
//    .cell {
//        padding: 0 10px;
//        text-align: center;
//
//        .el-tag {
//            margin-right: 0px;
//        }
//    }
//}

// to fixed https://github.com/ElemeFE/element/issues/2461
//.el-dialog {
//    transform: none;
//    left: 0;
//    position: relative;
//    margin: 0 auto;
//    .el-dialog__headerbtn {
//        font-size: 22px;
//    }
//    .el-form-item--mini.el-form-item .el-form-item--mini.el-form-item {
//        margin-bottom: 0;
//    }
//    .el-form .el-form-item:last-child {
//        margin-bottom: 0;
//    }
//}

// refine element ui upload
//.upload-container {
//    .el-upload {
//        width: 100%;
//
//        .el-upload-dragger {
//            width: 100%;
//            height: 200px;
//        }
//    }
//}

// dropdown
//.el-dropdown-menu {
//    a {
//        display: block
//    }
//}
//
//// fix date-picker ui bug in filter-item
//.el-range-editor.el-input__inner {
//    display: inline-flex !important;
//}
//
//
////输入框
//.el-input__inner{
//    border: 1px solid #F6F7FB;
//}
//.el-input.is-active .el-input__inner, .el-input__inner:focus{
//    border-color: #A2C9FF;
//}
//.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
//    border-color: #A2C9FF;
//}
//
////日期
//.el-date-editor .el-range-input {
//    background-color: #F6F7FB;
//}
//.el-range-editor--mini .el-range__close-icon, .el-range-editor--mini .el-range__icon {
//    line-height: 16px;
//}
//
////图片
//.el-image-viewer__close{
//    color: #fff;
//}
//
////开关
//.el-switch {
//    height: 16px;
//
//    .el-switch__core {
//        width: 32px !important;
//        height: 16px;
//
//        &::after {
//            width: 14px;
//            height: 14px;
//
//            top: 0;
//        }
//    }
//
//    &.is-checked {
//        .el-switch__core {
//            &::after {
//                margin-left: -15px;
//            }
//        }
//    }
//}
//
////输入框
//.el-input.is-disabled .el-input__inner {
//    background-color: #F1F1F1;
//}
//
//.el-select {
//    .el-tag.el-tag--info{
//        color: #333;
//    }
//}
//
//
////消息提示
//.el-message {
//    word-break: break-all;
//}
//
//
////文字提示
//.el-tooltip__popper.is-dark {
//    white-space: pre-line;
//}

//表格
.report-table.el-table {
    border-radius: 4px;
    color: #000;
    box-shadow: 0 0 5px #d0d2d7;
    //table {
    //    border-collapse:collapse;
    //}
    .el-table__header {
        th, td {
            border-right: 1px solid #e1e1e1;
        }
        th {
            background-color: #F3F3F3;
            color: #000000;
            font-weight: 700;
            border-top: 1px solid #e1e1e1;
            &.highlight1 {
                background: #FFF4E2;
            }
            .cell {
                word-break: keep-all;
            }
        }
    }
    .el-table__gather td.highlight1 {
        background-color: #FFF4E2;
    }
    .cell {
        line-height: 18px;
        padding-left: 8px;
        // min-width: 22px;
    }
    .cell-auto .cell {
        width: fit-content;
        max-width: 144px;
        &.el-tooltip {
            min-width: auto;
            width: fit-content!important;
        }
    }
    td>.cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        .info {
            margin-left: 8px;
        }
    }
    th {
        &.is-sortable {
            .cell {
                position: static;
                padding-right: 12px;

            }
            &.descending,&.ascending  {
                color: #1677FF;
                .cell{
                    .caret-wrapper {
                        height: 34px;
                    }
                }
            }
        }
        >.cell {
            line-height: 18px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            .caret-wrapper {
                position: absolute;
                right: 3px;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 6px;
                overflow: hidden;
                .sort-caret {
                  left: 0;
                }
            }
        }
        &:hover {
            .caret-wrapper {
              height: 34px;
            }
        }
    }

    &.el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
        background-color: #fff4e2;
    }
}

.report-table.el-table .sort-caret.ascending,
.report-table.el-table .sort-caret.descending{
    border-width: 8px;
    border-left-width: 3px;
    border-right-width: 3px;
}
.report-table.el-table .sort-caret.ascending{
    top: 0px;
}
.report-table.el-table .sort-caret.descending{
    bottom: 0px;
}
.el-cell-flex {
    display: flex;
  }

  .el-cell-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    > i {
      vertical-align: middle;
    }
  }

.report-table .el-table__body tr.current-row>td {
    background-color: #FFF4E2;
}

.report-table.el-table .cell, 
.report-table.el-table--border td:first-child .cell,
.report-table.el-table--border th:first-child .cell {
    padding-left: 8px;
}
.report-table.el-table--mini .el-table__header th {
    padding: 1px 0;
    height: 36px;
}
// .el-table--mini .el-table__body tr {
//     // height: 48px;
// }
.report-table.el-table__fixed {
    height: auto !important;
    bottom: 10px;
}

////表单
//.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
//    line-height: 24px;
//}



/************************* viker start ****************************/

// text
.text-primary {
    color: #1677FF;
}
.text-warning {
    color: #FFAA2E;
}
.text-danger {
    color: #FD5451;
}
.text-base {
    color: #333333;
}
.text-light {
    color: #444444;
}
.text-sub {
    color: #666D7D;
}
.text-icon {
    color: #ADB2BD;
}
.text-white {
    color: #ffffff;
}


// bgc
.bg-primary {
    background-color: #1677FF;
}
.bg-warning {
    background-color: #FFAA2E;
}
.bg-danger {
    background-color: #FD5451;
}
.bg-add {
    background-color: #13C2C2;
}
.bg-page {
    background-color: #F4F6FC;
}


// dialog
//.el-dialog {
//    border-radius: 4px;
//}
//.el-dialog__body {
//    padding: 24px;
//}
//
//
//// icon
//.el-icon-close {
//    //font-size: 22px;
//    &:hover {
//        color: #1677FF;
//    }
//}
//.el-popconfirm__icon {
//    font-size: 16px;
//}
//
//
//// btn
//.el-button--danger.is-disabled, .el-button--danger.is-disabled:active, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:hover {
//    color: rgba(253, 118, 115, .5);
//}

.report-table.el-table .el-popover__reference {
    &.el-button--text {
        color: #1677FF;
        &.is-disabled {
            color: rgba(22, 119, 255, .5);
        }
    }
    &.el-button--danger {
        color: #FD5451;
    }
    &.el-button--primary {
        color: #ffffff;
    }
    &.el-button--warning {
        color: #ffffff;
    }
    &.el-button--default {
        color: #333333;
    }
}
//
//
//// popover
//.el-popover {
//    min-width: 130px;
//    .el-popconfirm__main {
//        margin-bottom: 12px;
//    }
//}
//
//// form item
//.el-textarea__inner{
//    border: 1px solid #F6F7FB;
//}
//.el-cascader__search-input {
//    background-color: #F6F7FB;
//}
//.el-select-dropdown__empty {
//    padding: 10px 15px;
//}
//
//// coustom table header''
//.el-tb-wcell {
//    line-height: 1.2;
//}
//
//
//
//
//// new ui version for condition, its need integrate to ewan-ui
//
//// select
//.el-select {
//    .el-select__tags {
//      outline: none;
//    }
//  }

.admin-condition {
    .el-button--mini,
    .el-button--mini.is-round {
    padding: 4px 20px
    }
}

// change ui to new fn
.ewan-select-new {

    .text-o {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-select__tags {
      flex-wrap: nowrap;

      .selected-labels {
        margin: 2px 2px 2px 16px;
        color: #444444;
        font-size: 12px;
      }
    }

    .selected-labels {
        margin-inline-start: 15px;
        color: #444444;
        font-size: 12px;
        line-height: 28px;
    }


}

.ewan-select-dropdown {
    // min-width: 210px !important;
    // max-width: 300px;

    .result-list {
      box-sizing: border-box;
      width: 0;
      height: auto;
      max-height: 100px;
      padding: 5px 15px;
      margin-bottom: 5px;
      border-bottom: 1px solid #f1f1f1;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.3);
      }
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: rgba(144, 147, 153, 0.5);
        }
      }

      .result-tag {
        margin: 2px;
      }

    }

    .button-bar {
        border-top: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 40px;
    }

}

.el-select-v2 .el-select-v2__wrapper.is-disabled {
    background-color: #f1f1f1;
}

.ewan-select {
    width: 100%;

    .el-select__tags {
      flex-wrap: nowrap;
    }

    .el-select__input,
    .el-input__inner,
    .el-input__icon {
      height: 24px !important;
      line-height: 24px;
      font-size: 12px;
    }

    .el-input__inner,.el-select-v2__wrapper {
      background-color: #f6f7fb;
      border: none;
    }
    .el-select-v2__wrapper {
        padding:0 30px 0 0;
        line-height: 24px;
    }
    .el-select-v2__suffix {
        height: 24px;
        .el-input__icon {
            vertical-align: top;
        }
    }
    .el-select-v2__placeholder {
        font-size: 12px;
        &.is-transparent{
            color: #9a9a9a;
        }

    }

    .el-tag {
      height: 20px;
      line-height: 18px;
      min-width: 0;
      font-size: 12px;
      margin: 0 0 0 6px;
    }

}

//.dropdown-form {
//    .el-form-item {
//        width: 20% !important;
//        .el-form-item__content {
//            flex: 1;
//            overflow: hidden;
//        }
//    }
//}
.top-form .el-form-item {


    .el-select-v2__wrapper{
        background-color: #e5e9ed;
        border: none;
        padding: 0 0 0 5px;
        //.el-select-v2__selection{
        //    width: calc(100% - 16px);
        //}
        .el-select-v2__input-wrapper {
            margin-left: 0;
            margin-right: 20px;
        }
    }
    .selected-labels {
        margin-left: 0;
    }
    .el-select-v2__placeholder {
        margin-left: 0;
        width: calc(100% - 24px);
    }
    //.el-select-v2__input-calculator {
    //    max-width: 100%;
    //}
    .el-select-v2__suffix {
        right: -5px;
    }
}


// input
.ewan-input {
    width: 100%;
    .el-input__inner,
    .el-input__icon {
        height: 24px !important;
        line-height: 24px;
        font-size: 12px;
    }
    .el-input__inner {
      background-color: #f6f7fb;
      border: none;
    }
}


// cascader
//.el-cascader {
//    .el-cascader__tags {
//      outline: none;
//    }
//  }

.ewan-cascader-new {

    .text-o {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-cascader__tags {
      flex-wrap: nowrap;

      .selected-labels {
        margin: 2px 2px 2px 16px;
        color: #444444;
        font-size: 12px;
      }
    }

}

.ewan-cascader__dropdown {
    // max-width: 300px;

    .result-list {
      box-sizing: border-box;
      width: 0;
      height: auto;
      max-height: 100px;
      padding: 5px 15px;
      margin-bottom: 5px;
      border-bottom: 1px solid #f1f1f1;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.3);
      }
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: rgba(144, 147, 153, 0.5);
        }
      }

      .result-tag {
        margin: 2px;
      }

    }
}


// only change ui to ewan-ui style
.el-cascader.ewan-cascader {
    width: 100%;
    height: 24px !important;
    line-height: 24px;
    font-size: 12px;

    .el-cascader__tags {
        flex-wrap: nowrap;
    }

    .el-cascader__search-input {
        height: 20px;
        font-size: 12px;
        margin: 2px 0 2px 16px;
        min-width: 10px;
        background-color: #f6f7fb;
    }

    .el-tag {
        height: 20px;
        line-height: 18px;
        min-width: 0;
        font-size: 12px;
        .el-tag__close {
            line-height: 17px;
            top: 0;
        }
    }

    // el-input
    .el-input {
        width: 100%;
        .el-input__inner,
        .el-input__icon {
            height: 24px !important;
            line-height: 24px;
            font-size: 12px;
        }
        .el-input__inner {
          background-color: #f6f7fb;
          border: none;
        }
    }
}

// pagination
.common-pagination-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    background-color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 20px;

    .el-pagination {
        width: 100%;
    }

    .el-pagination__sizes, .el-pagination__jump {
        float: right;
        margin: 0 10px;
    }
}