/* 改变主题色变量 */
$--color-primary: #D6000F;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  --primaryColor: #D6000F;
  --colorColor: #303133;
  --bgColor: #f0f2f5;

  font-size: 14px;
  font-family: 'Microsoft YaHei';
  color: var(--colorColor);
}

.el-button {
  padding: 8px 20px;
}

.el-input__wrapper{
  box-shadow: none;
  padding: 0px;
}

.fill.el-button {
  width: 100%;
}

.slide {
  .el-menu {
    border-right: none;
    background: #000;
  }

  .el-menu-item.is-active,
  .el-menu-item:hover, 
  .el-menu-item:focus,
  .el-submenu__title:hover {
    background: var(--primaryColor);
  }

  
  .el-menu-item,
  .el-menu-item i {
    color: #fff !important;
  }

  .el-submenu__title {
    background-color: #0C0E2E !important;
  }

  .el-submenu__title,
  .el-submenu__title i{
    color: rgb(191,191,191) !important;
  }

  .el-submenu i {
    vertical-align: baseline;
  }
}

.head-layer {
  flex: 0 0 auto;

}

.body-layer {
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 4px;;
  padding: 16px;
  display: flex;
  flex-direction: column;

  .body-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      font-size: 1rem;
      font-weight: normal;
      color: var(--colorColor);
    }
  }

  > * {
    flex: 0 0 auto;
  }
  > .el-table {
    flex: 1;
    display: flex;
    flex-direction: column;

    > * {
      flex: 0 0 auto;
    }

    .el-table__body-wrapper {
      flex: 1;
      overflow-y: auto;
    }
  }
}

.el-table th {
  background: #FAFAFA;
  .cell {
    font-size: 0.825rem;
    color: var(--colorColor);
    font-weight: normal;
  }
}


.pag-block {
  margin-top: 16px;
  .el-pagination {
    display: flex;
  }

  &.no-sizes {
     .el-pagination__total {
        flex: 1;
        text-align: left;
     }
  }
  .el-pagination__sizes {
    flex: 1;
    text-align: left;
  }

}


.oper-span {
  color: #3366FF;
  font-size: 0.825rem;
  margin-right: 8px;

  &.disable {
    color: #BFBFBF;
  }

  &:not(.disable) {
    cursor: pointer;
  }
}



.el-dropdown-menu__item {
  word-break: keep-all;
}

.head-content {
  .el-form {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .el-form-item {
    display: flex;
    flex: 0 0 auto;
  }
  .el-form-item__label {
    flex: 0 0 auto;
  }
  .el-form-item__content {
    flex: 1;
  }

  .el-select {
    display: block;
  }

  .el-date-editor--daterange.el-input__inner,
  .el-form-item__content {
    width: 100%;
    max-width: 300px;
  }

  
  

  .searh-btns {
    max-width: 390px;
    min-width: 200px;
    grid-column-start: 3;
    grid-column-end: 4;
    text-align: right;

    
    .el-form-item__content {
      width: 100%;
      max-width: inherit;
    }
  }

  .range-number {
    display: flex;
    position: relative;
    padding: 1px;
    z-index: 1;
    > span {
      border: 1px solid #DCDFE6;
      border-left: 0;
      border-right: 0;
      height: 38px;
      flex: none;
    }
    >.el-input {
      flex: 1;
    }
    >.el-input:nth-of-type(1) .el-input__inner {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    >.el-input:nth-of-type(2) .el-input__inner {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    > span, 
    >.el-input:nth-of-type(1) .el-input__inner,
    >.el-input:nth-of-type(2) .el-input__inner {
      border-color: #DCDFE6 !important;
    }
  }
}


.mandatory {
  .el-form-item__label {
    position: relative;

    &::before {
      content: '*';
      color: var(--primaryColor);
    }
  }
}

.el-autocomplete-suggestion,
.el-select-dropdown {
  margin-top: -10px;
}

.info-from {
  width: 380px;
  margin: 0 auto;
}

.loading {
  i,
  .el-loading-text {
    color: inherit;
  }
}

/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}


/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: var(--bgColor);
}

/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
  display: none;
}


.el-message-box__message {
  min-height: 50px;
  padding: 0 30px;
}

.el-message-box__title span::before {
  content: "\e7a3";
  font-size: 1.5rem;
  margin-right: 5px;
  color: rgb(144,157,153);
  font-family: "element-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: text-bottom;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

.click-row .el-table__body td:not(:first-child) {
  cursor: pointer;
}


.stop-psw {
  position: absolute;
  left: -9999999999px;
  top: -999999999px;
}

.el-popper.is-dark {
  position: absolute;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
  background: #303133;
  color: #fff;

  .el-popper__arrow {
    
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    bottom: -6px;
    border-top-color: #303133;
    border-bottom-width: 0;
  }
}


.oper-link {
  cursor: pointer;

  &:hover {
    color: #3366FF;
  }
}

.el-table::before {
  background: none;
}
.el-dropdown__popper{
.el-scrollbar{
  overflow:initial
}
}