// 因为我在这个里面做了scss变量全局注入 导致修改elment 主题性能会下降很多
// 结合系统考虑 我发现用到的element 组件的地方种类不多 所以这里全局修改elment 主题颜色

.v-modal {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}
.el-dialog__footer {
  padding-top: 0px !important;
}

.el-button--primary {
  background-color: $theme-color;
  border-color: $theme-color;
}
.el-button--primary:disabled {
  color: #fff;
  background-color: rgb(61, 110, 127);
  border-color: rgb(61, 110, 127);
}

.el-pagination__total {
  color: #fff;
}
.el-pagination__jump {
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $theme-color !important;
  color: #fff;
}

.el-pager li.active {
  font-size: 16px;
  background-color: rgba(111, 200, 255, 0.5);
  color: $theme-color;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: $theme-color;
}
.el-pager li.active:hover {
  color: #fff !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: $theme-color;
  border-color: $theme-color;
}

.el-checkbox__inner:hover {
  border-color: $theme-color;
}

.el-radio__label {
  color: #fff;
}

.el-date-picker__header-label {
  color: #fff;
}

.el-container {
  height: 100%;
}
.el-main {
  // height: calc(100vh - 500px);
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: rgb(16, 143, 182);
  border-color: rgb(16, 143, 182);
}

.el-table .has-gutter > tr,
.el-table .has-gutter > tr > th {
  background: #f5f5f5;
  padding: 11px 0;
}
.el-table {
  height: 560px;
  // overflow-y: scroll;
}

// 表格行高
.el-table__body td.el-table__cell {
  border-bottom: 1px solid rgb(13, 128, 164) !important ;
}
.el-table__row:last-child td {
  border-bottom: 0px;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #03171f !important;
}
.el-table .el-table__cell {
  padding: 8px 4px !important;
}
.el-table__empty-block {
  background-color: #072a36a4 !important;
}
.vue-treeselect__menu-container * {
  background-color: #072a36 !important;
}
.vue-treeselect__menu {
  border-color: rgb(13, 128, 164) !important;
  color: #fff !important;
}
.el-input-number.is-controls-right .el-input-number__increase {
  border-radius: 0;
  border-bottom: 1px solid rgb(255, 255, 255);
  color: #fff;
}
.el-input-number.is-controls-right .el-input-number__decrease {
  border-left: 1px solid rgb(13, 128, 164);
  border-radius: 0;
  bottom: 2px;
}
.el-input-group {
  height: 32px;
}
.el-input-number__decrease {
  border-radius: 0;
  color: #fff;
}
.el-input-number__increase,
.el-input-number__decrease {
  background-color: rgb(13, 128, 164);
  border-color: rgb(13, 128, 164);
  border-radius: 0;
  color: #fff;
}
.el-input-number {
  line-height: 30px !important;
}
.vue-treeselect {
}
.vue-treeselect__control {
  // border: 1px solid #ddd;
  border-radius: 0px !important;
  background: rgba(15, 79, 99, 0.5254901961) !important;
  border-width: 1px !important;
  border-style: solid;
  border-color: rgb(13, 128, 164) !important;
  box-sizing: border-box;
  .vue-treeselect__single-value {
    color: #fff !important;
  }
  .vue-treeselect__input {
    // background-color: rgba(15, 79, 99, 0.5254901961) !important;
  }
  .vue-treeselect__value-container {
    line-height: 36px !important;
  }
}
.el-form-item__content .el-select {
  width: 100%;
}
.el-form .el-date-editor {
  width: 100%;
}

.el-message-box {
  margin-top: -400px !important;
}
.el-table__empty-text {
  color: #fff;
}
.el-table th.el-table__cell {
  background-color: transparent !important;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #517f8a !important;
}

::v-deep .selected {
  background-color: transparent !important;
}

::v-deep .selected::-webkit-scrollbar-track-piece {
  width: 6px;

  background: rgba(33, 33, 33, 0.331) !important ;
}
::v-deep .selected::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::v-deep .selected::-webkit-scrollbar-thumb {
  width: 6px;
  background: rgb(13, 128, 164) !important;
  border-radius: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background: rgba(33, 33, 33, 0.331) !important ;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 12px;
  height: 6px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: rgb(13, 128, 164) !important;
  border-radius: 20px;
}

::v-deep .el-table__body-wrapper .el-button {
  padding: 4px !important;
}

::v-deep .el-input__inner {
  height: 35px !important;
}

// 表格按钮颜色
.table-btn {
  color: $table-btn-color !important;
}

// 按钮颜色 样式
::v-deep .el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  border-color: #34d9ff;
  background-color: #34d9ff;
}
::v-deep .el-icon-search {
  color: #fff;
}
::v-deep .el-input-group__append,
.el-input-group__prepend {
  border: 0;
}
.el-input__inner {
  height: 32px !important;
}

.el-input-group__append {
  border-color: rgba(13, 128, 164, 1) !important;
  background-color: rgba(13, 128, 164, 1) !important;
}
.el-input-group__append .el-button {
  border-color: rgba(13, 128, 164, 1) !important;
  background-color: rgba(13, 128, 164, 1) !important;
  color: #fff !important;
}
.el-input--suffix i {
  line-height: 32px !important;
}
.el-input-group__append,
.el-input-group__prepend {
  border-radius: 0 !important;
}
.el-tree {
  background-color: transparent !important;
  color: rgba(255, 254, 254, 0.651) !important;
}

.el-tree-node__content:hover,
.el-upload-list__item:hover {
  background: rgba(111, 200, 255, 0.443) !important;
  color: #fff !important;
}

.el-button--small {
  border-radius: 0 !important;
}
.tree .el-scrollbar .therearesonsinthetopmostnode .topnodelabel {
  color: rgba(255, 254, 254, 0.651) !important;
}
.el-button {
  border-radius: 0 !important;
}

.el-input__inner {
  background-color: rgba(15, 79, 99, 0.525490196078431) !important;
  border-width: 1px !important;
  border-style: solid;
  border-color: rgba(13, 128, 164, 1) !important;
  border-radius: 0px !important;
  color: #ffffff !important;
}

.el-upload-dragger {
  background-color: transparent;
}
.upload-success {
  color: #fff;
}
.el-upload--picture-card {
  background-color: rgba(15, 79, 99, 0.525490196078431) !important;
  border-radius: 0 !important;
}
.el-radio__input.is-checked .el-radio__inner {
  background-color: rgba(15, 79, 99, 0.525490196078431) !important;
  border-color: rgba(15, 79, 99, 0.525490196078431) !important;
}
.el-radio__inner {
  background-color: transparent !important;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #fff !important;
}
.el-form-item__label {
  color: #fff !important;
}

.view-user .view-rigth .tag-menu .tag-menu-title span {
  background-color: rgba(15, 79, 99, 0.525490196078431) !important;
  border-color: rgba(15, 79, 99, 0.525490196078431) !important;
  color: #fff !important;
}
.view-user .view-rigth .tag-menu .tag-menu-title {
  color: #fff;
}
.view-user .view-rigth .tag-menu.ac .tag-menu-title {
  color: #30daff !important;
}

.view-user .view-rigth .tag-menu .tag-menu-title span.ac {
  background-color: #30daff !important;
  color: #30daff !important;
}

.el-dialog {
  border-radius: 0 !important;
  background-color: #03171f !important;
}
.el-dialog__header {
  background-color: rgba(13, 128, 164, 1) !important;
}
.el-dialog__title {
  color: #fff !important;
}
.el-dialog__close {
  color: #fff !important;
}
.el-textarea__inner {
  background-color: rgba(15, 79, 99, 0.5254901961) !important;
  border-color: rgb(13, 128, 164) !important;
  border-radius: 0 !important;
}
.el-date-editor .el-range-input {
  background-color: transparent !important;
  border-color: rgb(13, 128, 164) !important;
  border-radius: 0 !important;
}
.el-picker-panel__body {
}

.el-picker-panel {
  background-color: rgb(15, 79, 99) !important;
  color: #fff !important;
}
.el-date-table td.available:hover {
  color: #2acfff !important;
}
.el-date-table th {
  color: #fff;
  font-weight: 400;
  // border-bottom: solid 1px rgb(13, 128, 164) !important;
  border-bottom: solid 1px rgb(255, 255, 255) !important;
}
.el-picker-panel__icon-btn {
  color: #fff;
}
.el-picker-panel {
  border-radius: 0 !important;
  border: solid 1px rgb(13, 128, 164) !important;
}
.el-date-table td.today span {
  color: #2acfff !important;
}
.el-date-range-picker__content.is-left {
  border-right: solid 1px rgb(13, 128, 164) !important;
}
.el-select-dropdown {
  background-color: rgb(15, 79, 99) !important;
  border-radius: 0 !important;
  border-color: rgba(13, 128, 164, 1) !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #072a36 !important;
}
.el-select-dropdown__item.selected {
  color: #2acfff !important;
}
.el-select-dropdown__item {
  color: #fff;
}
.el-message-box {
  background-color: rgb(15, 79, 99) !important;
  border-radius: 0 !important;
  border-color: rgba(13, 128, 164, 1) !important;
}
.el-message-box__title {
  color: #fff;
}
.el-message-box__content {
  color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #072a36 !important;
}
.Role-management .right-content .right-title {
  color: #fff;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #fff;
  border-radius: 0 !important;
  background-color: #072a36 !important;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #072a36 !important;
}

// #367cc3 !important
.el-button {
  padding: 8px 20px;
}

.el-dialog__footer .el-button--default {
  background: #e6a23c;
  color: #fff;
  border-color: #e6a23c;
}
.el-dialog__header span {
  color: #fff;
}
textarea {
  color: #fff !important;
}
.el-button--primary:focus {
  background-color: rgb(13, 128, 164) !important;
  border-color: rgb(13, 128, 164) !important;
}

.el-upload-list__item {
  .el-upload-list__item-name {
    color: #fff !important;
  }
}

.common-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  &-select {
    label {
      color: #fff;
      padding: 0 10px;
    }
  }
  &-search {
    display: flex;
  }
}
.el-input.is-disabled .el-input__inner {
  background-color: rgb(39, 60, 66) !important;
  border-color: rgb(39, 60, 66) !important;
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.el-tabs__item.is-active {
  color: #30daff !important;
}
.el-tabs__item {
  color: #fff;
}
.el-tabs__active-bar {
  background-color: #30daff !important;
}
.el-tabs__nav-wrap::after {
  background-color: rgb(13, 128, 164) !important;
}
.el-tabs__item:hover {
  color: #30daff !important;
  cursor: pointer;
}
.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border: none;
}
.el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
  border: none;
}

.el-table .el-button {
  padding: 4px !important;
}
.el-table--border th.el-table__cell.gutter:last-of-type {
  border-bottom: 0px;
}

.el-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-pagination__sizes {
    margin-top: -4px;
  }
}
.el-range-separator {
  color: #fff !important;
  margin-top: -6px !important;
}
.el-date-editor .el-range__icon {
  margin-top: -6px;
}
.el-date-editor .el-range-input {
  color: #fff !important;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #03171f !important;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: rgb(13, 128, 164) !important;
}

.el-descriptions .is-bordered .el-descriptions-item__cell {
}

.el-descriptions-item__label.is-bordered-label,
.el-descriptions__body {
  background-color: rgba(15, 79, 99, 0.5254901961) !important;
  border-color: rgb(13, 128, 164) !important;
  color: #fff !important;
}
.el-descriptions {
  color: #fff !important;
}

.el-descriptions .is-bordered .el-descriptions-item__cell {
  border-color: rgb(13, 128, 164) !important;
}
.cell-edit {
  margin-right: 10px;
  cursor: pointer;
  font-size: 20px;
}
.state {
  display: inline-block;
  padding: 0px 8px;
}
.state-succeed {
  color: #67c23a;
}
.state-error {
  color: red;
}

.el-drawer {
  background-color: rgba(9, 48, 59, 0.788) !important;
  color: #fff !important;
}

.el-drawer__header {
  color: #fff !important;
}

input {
  // background-color: rgba(15, 79, 99, 0.5254901961) !important;
  border-width: 1px !important;
  border-style: solid;
  border-color: rgb(13, 128, 164) !important;
  border-radius: 0px !important;
  color: #ffffff !important;
  height: 32px !important;
  outline: none;
  padding: 0 15px;
  // width: 100%;
}

.el-range-editor.is-disabled {
  background-color: rgb(39, 60, 66) !important;
  border-color: rgb(39, 60, 66) !important;
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}

.el-table__expand-icon {
  color: #fff;
}

.el-radio-button:first-child .el-radio-button__inner {
  // border-radius: 0 !important;
  // background-color: #0f4f63 !important;
  // border-color: #0f4f63 !important;
}

.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 !important;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-radius: 0 !important;
  background-color: #0f4f63 !important;
  border-color: #0f4f63 !important;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  box-shadow: -1px 0 0 0 #0f4f63 !important;
}

.el-table__body tr.current-row > td {
  color: #67c23a;
}

.el-input-number.is-controls-right .el-input-number__decrease {
  line-height: 16px;
  bottom: 1px;
}
