/*
* 需要编辑的特殊公共样式文件
* 如果有特殊的公共样式, 需要在这里编写
*/

/*
* 话术库搜索关键词颜色
*/
em.hlt1{
  color: $phone-button-hangup;
  font-style: normal;
}

/*
* 工单超时颜色
*/
.el-table {
  .row-green {
    background-color: #67C23A
  }
  .row-blue {
    background-color: #409EFF
  }
  .row-orange {
    background-color: #E6A23C
  }
  .row-red {
    background-color: #F56C6C
  }
}

/*
* 表格样式
*/
.el-table {
  font-size: $text-font-size !important;
  height: 100%;
}

/*
* table 中使用文字按钮清除上下填充空白
*/
.el-table .cell .el-button--text {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: $text-font-size !important;
  color: $main-color;
}
.el-table th {
  background-color: $table-header-color !important;
}

/*
* 表格展开行的内容填充修改
*/
.el-table__expanded-cell[class*=cell] {
  padding: 0 !important;
}

/*
* 表单禁用状态字体样式
*/
.el-input.is-disabled .el-input__inner , .el-textarea.is-disabled .el-textarea__inner {
  color: $color-text-regular !important;
}

/*
* 按钮禁用状态的边框线颜色以及字体颜色
*/
.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  border-color: $color-text-placeholder;
  color: #999999 !important;
}

/*
* 富文本编辑器图片样式
*/
.ql-editor img{
  max-width: 100%;
  height: auto;
}
/*
* 知识库富文本编辑器框
*/
.ql-container {
  min-height: 460px !important;
  overflow: hidden auto;
}

/*
* 树的每一行节点的高度
*/
.el-tree-node__content {
  height: 32px !important;
}
/*
* 树选中节点背景色
*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: $current-selected-color;
}
/*
* 树样式
*/
.el-tree {
  background: inherit;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: $text-font-size;
    padding-right: 8px;
    .tree-label {
      font-size: $note-font-size;
      color: $color-text-primary;
      height: 26px;
      b {
        font-weight: normal;
      }
      .tree-ellipsis {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

/*
* el-menu 导航菜单样式
*/
.el-submenu .el-menu-item {
  height: 38px !important;
  line-height: 38px !important;
}
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  font-size: $text-font-size !important;
  &:hover {
    background-color: $menu-hover-color !important;
  }
  // color: $menu-text-color !important;
  color: $menu-text-color !important;
}
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  width: 200px !important;
  &:hover {
    background-color: $menu-hover-color;
    // background-color: $menu-hover-color !important;
  }
  // color: $menu-text-color !important;
  color: $menu-text-color;
}
.el-menu-item.is-active {
  background-color: $menu-selected-color !important;
  border-left: 4px solid $main-color;
  padding-left: 16px !important;
  color: $menu-active-text-color !important;
}

.el-submenu .el-menu-item.is-active{
  background-color: $menu-selected-color !important;
  border-left: 4px solid $main-color;
  padding-left: 36px !important;
  color: $menu-active-text-color !important;
}

.el-scrollbar__wrap {
  overflow: hidden scroll !important;
}
.nav-scroll {
  position: relative;
  background-color: $menu-bg-color;
  width: $menu-width;
  height: 100%;
  float: left;
  padding-top: 15px;
  & .el-menu {
    background-color: $menu-bg-color;
    border-right: none !important;
  }
}

/*
* 导航栏右侧容器样式
*/
.wrapper {
  height: calc(100%);
  width: calc(100% - #{$menu-width});
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  padding: 10px 10px 10px 20px;
}
.wrapper-inner {
  margin: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  box-sizing: border-box;
}

/*
* 右侧弹出面板中下拉菜单样式
*/
.el-popper[x-placement^="bottom"] {
  margin-top: 6px !important;
}
.el-dropdown-menu__item {
  height: 32px !important;
  line-height: 32px !important;
}
.el-dropdown-menu__item:hover {
  background-color: $main-color !important;
  color: #ffffff !important;
}
.dropdown-menu-width {
  width: 100px;
  .dropdown-menu-item {
    text-align: center;
  }
}

/*
* 查询条件中, 条件所在表单样式
*/
.el-form--inline .el-form-item {
  margin-bottom: 0 !important;
}

/**
 通用工单表单间距太大
 */
.currency-from .el-form-item {
  margin-bottom: 0px !important;
}
/**
  自定义工单表单间距太大
 */
.custom-work-order-form .el-form-item {
  margin-bottom: 0px !important;
}

/**
  表单字体大小13号
 */
.el-input {
  font-size: $title-font-size !important;
}

/*
* 微信聊天消息样式
*/
.row {
  .show-time {
    text-align: center;
    margin-top: 16px;
    font-size: $title-font-size;
  }
  .message {
    margin-bottom: 16px;
    width: 100%;
    .head-img {
      width: 40px;
      height: 40px;
      float: left;
      border-radius: 50%;
      i {
        font-size: 40px;
        color: #FFDBB3;
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .content {
      overflow: hidden;
      .time {
        width: calc(100% - 20px);
        height: 24px;
        padding: 0 10px;
      }
      .textAlignLeft {
        text-align: left;
      }
      .textAlignRight {
        text-align: right;
      }
      .bubble {
        max-width: 400px;
        min-height: 1em;
        display: inline-block;
        vertical-align: top;
        position: relative;
        text-align: left;
        font-size: 14px;
        border-radius: 3px;
        margin: 0 10px;
        background-color: #EAF1F5;
        color: $color-text-regular;
        .bubble_cont {
          word-wrap: break-word;
          word-break: break-all;
          min-height: 25px;
          .plain {
            padding: 9px 13px;
          }
          .picture {
            padding: 9px 13px;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            img {
              display: block;
              cursor: pointer;
              max-width: 350px;
              max-height: 240px;
              vertical-align: middle;
            }
          }
          .voice {
            padding: 9px 13px;
            cursor: pointer;
            position: relative;
          }
          .video {
            padding: 9px 13px;
            cursor: pointer;
            position: relative;
          }
          .attach {
            padding: 9px 13px;
            background-color: $white-color;
            min-height: 75px;
            border-radius: 4px;
            min-width: 250px;
            max-width: 300px;
            margin: 2px;
            position: relative;
          }
          .location {
            padding: 9px 13px;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            img {
              width: 370px;
              height: auto;
            }
          }
        }
      }
      .bubble.left:after, .bubble.left:before {
        position: absolute;
        top: 10px;
        left: -10px;
        border-right: 10px solid #EAF1F5;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        content: " ";
      }
      .bubble.right:after, .bubble.right:before {
        left: 100%;
        position: absolute;
        top: 10px;
        border-left: 10px solid $auxiliary-color;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        content: " ";
      }
    }
  }
  .message.me {
    text-align: right;
    clear: right;
    .head-img {
      float: right;
    }
    .bubble {
      background-color: $auxiliary-color;
      color: $white-color;
    }
  }
}
/*
* 微信聊天消息中 -> 预览图片
*/
.preview-image {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 999;
  background-color: #000;
  .preview-warp {
    position: relative;
    width: 80%;
    height: 80%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 5% 10%;
    background-color: #666666;
    border: 1px solid #999999;
    .image-wrapper {
      float: left;
      width: 200px;
      height: 180px;
      line-height: 180px;
      margin: 5px 5px 0;
      .image {
        position: relative;
        height: 100%;
        width: 100%;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

/*
* 鼠标滑过之后再展现输入框的边框
*/
.form-item-hide-border {
  margin-top: 10px;
  border-top: 1px solid $form-split-line-color;
  border-left: 1px solid $form-split-line-color;
  border-right: 1px solid $form-split-line-color;
  .el-form-item {
    margin-bottom: 0px;
    padding-right: 15px;
    border-bottom: 1px solid $form-split-line-color;
    .el-form-item__label, .el-form-item__content {
      line-height: 40px;
      color: $color-text-secondary;
      font-size: $text-font-size !important;
    }
  }
  .el-input, .el-select, .el-autocomplete {
    width: 100%;
  }
  .el-input__inner, .el-textarea__inner {
    border: 1px solid transparent;
    -webkit-transition: none;
    transition: none;
  }
  .el-input__inner:hover, .el-textarea__inner:hover {
    border: 1px solid $table-split-line-color;
  }

  .el-input {
    .el-select__caret {
      visibility: hidden;
    }
  }

  .el-input:hover {
    .el-select__caret {
      visibility: visible;
    }
  }
}

/*
* 工单附件 添加边框
*/
.from-row {
  border-left: 1px solid $form-split-line-color;
  border-right: 1px solid $form-split-line-color;
}

/*
* 图标90度旋转
*/
.transform-90 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

/*
* Tab标签页样式
*/
.el-tabs {
  height: 100%;
  .el-tabs__item {
    color: $color-text-primary;
    font-weight: 700;
    font-size: $text-font-size;
  }
  .el-tabs__item.is-active {
    color: $main-color;
  }
  .el-tabs__item:hover {
    color: $main-color;
  }
  .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
    }
  }
}

/*
* 公共示例样式
*/
.demoExmple {
  margin: 0;
  height: 100%;
  .el-dialog {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
}

/*
* 选取附件后的展示列表样式
*/
.file-selected-container {
  position: relative;
  width: 100%;
  .file {
    width: 260px;
    height: 40px;
    padding: 10px;
    margin: 0 10px 10px 0;
    display: flex;
    background-color: #F6F6F6;
    float: left;
    .file-icon {
      position: relative;
      width: 26px;
      height: 32px;
      padding: 4px 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .file-name-size {
      position: relative;
      width: 124px;
      height: 40px;
      padding: 0 10px;
      .name {
        position: relative;
        width: 100%;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #4A4A4A;
      }
      .size {
        position: relative;
        width: 100%;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        color: #999999;
      }
    }
    .file-oper {
      position: relative;
      width: 90px;
      height: 40px;
      display: flex;
      .el-button + .el-button {
        margin-left: 4px;
      }
    }
  }
  .file:nth-child(1), .file:nth-child(2) {
    margin-top: 10px;
  }
}

/**
* 时间线标题样式
*/
.el-timeline-item__timestamp {
  color: #333;
  font-size: 14px;
  font-weight: 700;
}

/**
  卡片描边色改为#e4e4e4
 */
.el-card {
  border: 1px solid #e4e4e4 !important;
}