//该文件为全局样式定义，方便统一系统风格

@import '../css/themeMixin.less';
@tableFontColor: #322550;
#app{
  font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;
}

//菜单内容标题样式
.el-main>div:nth-child(1)>div:nth-child(1) {
  text-align: center;
  margin-bottom: 48px;
  font-weight: bold;
  font-size: 18px;
}

//表头样式
body .el-table th.gutter{
  display: table-cell!important;
  }
.el-table th,
.el-table {
  background-color: #153741 !important;
  color: #35b1b7;
}

.el-table th {
  padding: 4px 0 !important
}

.el-table__expand-icon {
  color: #fff !important
}

.el-table-column--selection>div {
  text-align: left !important;
}

.el-table--border,
.el-table--group {
  border: 1px solid #446575;
  /*no*/
}

.el-table tbody td .cell {
  margin-right: 12px;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #ebeef500;
}

.el-table th div {
  text-align: center;
}

.el-table__empty-text,
.el-table td {
  color: #e2e6ec;
}

.el-table td,
.el-table th.is-leaf {
  // border-bottom: none;
  border-right: 1px solid #446575;
  /*no*/
  border-bottom: 1px solid #446575;
  /*no*/
}

.el-table__row>td {
  border: none;
  border-right: 1px solid #446575;
  /*no*/
  border-bottom: 1px solid #446575;
  /*no*/
}

.el-table::before {
  height: 0px;
  color: #446575;
}

.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}

.el-table td {
  padding: 5px 0px !important
}

.el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}

.el-table__row--striped td {
  background-color: #45797b33 !important
}

.el-table__row:not(.el-table__row--striped) {
  background: #1439391c !important;
}

.el-table {
  .el-button {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}


.el-table .ascending .sort-caret.ascending {
  border-bottom-color: #34d2d2 !important;
}

.el-table .descending .sort-caret.descending {
  border-top-color: #34d2d2 !important;
}

//二级表格
.el-table {
  .el-table tr th::before {
    display: none;
  }

  .el-table {
    margin: 20px 20px 20px 46px;
    width: 95%;

    th {
      background-color: #1a3968 !important;
      color: #a3a8e6 !important;
    }

  }
}

//input框disabled样式


.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-range-editor.is-disabled input,
.is-disabled .el-textarea__inner {
  color: #c8d4e4 !important;
  background-color: #354460 !important;
  border: none;
}

.is-disabled .el-range__icon {
  color: #abb8ca;
}

//弹窗样式
.el-dialog {
  background-color: rgba(12, 24, 49, 0.9) !important;
  margin-top: 14vh;
  margin: 14vh auto 0px !important;

  .el-dialog__header {
    border-bottom: 1px solid #40ffff59;
    /*no*/
    ;

    .el-dialog__title {
      color: #d4e0f0;
      font-weight: bold;
    }
  }

  .el-dialog__body {
    padding: 40px;

    label {
      color: #9acaf7;
    }
  }

  .el-tree__empty-text {
    color: #9acaf7;
  }

  .button-group {
    text-align: right;
    margin-top: 36px;
  }

  .el-table th {
    background-color: #111d40;
    color: #7788b9;
    padding: 0px 0px !important;
  }

  .el-table__empty-text {
    color: #7788b9;
  }

  .el-tree {
    border: 1px solid #9acaf7;
    /*no*/
    border-radius: 7px;
  }

  .el-dialog__wrapper {
    max-height: 98vh;
  }
}

.el-message-box {
  background-color: rgba(10, 18, 25, 0.9) !important;
  border: none;

  .el-message-box__title,
  .el-message-box__message {
    color: #b2bece !important;
  }
}

//穿梭框
.el-transfer-panel {
  background: #111d25 !important;
}

.el-transfer-panel .el-transfer-panel__header {
  background: #21405d !important;
}

.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
  color: #a1d8f9 !important;
}

.el-transfer-panel__item {
  display: block !important;
}

//button样式
.el-button--primary {
  background-color: #2b9999 !important;
  border: none !important;
  color: #FFF !important;

  &:hover,
  &:focus {
    background-color: #38cece !important
  }
}

.el-button--danger {
  background-color: #9e1e01 !important;
  border: none;
}

.el-button--warning.is-disabled,
.el-button--primary.is-disabled,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:active,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:hover,
.el-button--warning.is-disabled:active,
.el-button--warning.is-disabled:focus,
.el-button--warning.is-disabled:hover,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  background-color: #929292 !important;
  border: none;
}

.el-button--warning {
  background-color: #b4843c !important;
  border: none;

  &:hover {
    background-color: #e4a84f !important;
    border: none;
  }
}

// .el-button:focus,
// .el-button:hover {
//   background-color: #44bf9d !important;
// }

//滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
}

// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #617d96;
  border-radius: 3px;
  height: 5px !important;
}

/* IE 浏览器 */
.scrollbar {
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #fff;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #0099dd;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #0099dd;
  /*滚动条阴影*/
  scrollbar-shadow-color: #0099dd;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #0066ff;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color: #0099dd;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #0099dd;
  /*滚动条基准颜色*/
  scrollbar-base-color: #0099dd;
}


//分页样式
.el-pagination {
  margin-top: 10px;
  text-align: right;

  .el-input {
    width: 60% !important;

    .el-input__inner {
      color: #b2bece !important;
    }
  }

  .el-pagination__total,
  .el-select .el-input .el-select__caret,
  .btn-prev,
  .btn-next {
    color: #b2bece !important;
  }

  .el-dialog,
  .el-pager li,
  button:disabled,
  .btn-prev,
  .btn-next {
    background-color: transparent !important;
  }

  .el-pager li {
    color: #b2bece !important;
  }

  .el-pager .active {
    color: #09e8e8 !important;
  }
}

//页面loading样式
.el-loading-mask {
  background-color: rgba(13, 26, 40, 0.8) !important;
}

//折现图和表格切换
.select-view {
  margin-top: 16px;

  .echart-icon {
   // background: url("../../page/pageAssets/images/echart_grey.png") no-repeat;

    &:hover {
      .echart-icon-active;
      .change-icon;
    }
  }

  .echart-icon-active {
   // background: url("../../page/pageAssets/images/echart_active.png") no-repeat;
    border: 1px solid #19f602 !important;
    /*no*/
  }

  .table-icon {
    //background: url("../../page/pageAssets/images/table_grey.png") no-repeat;

    &:hover {
      .table-icon-active;
      .change-icon;
    }
  }

  .table-icon-active {
   // background: url("../../page/pageAssets/images/table_active.png") no-repeat;
    border: 1px solid #19f602 !important;
    /*no*/
  }

  .change-icon {
    width: 27px;
    height: 27px;
    border: 1px solid #8a8a8a;
    /*no*/
    vertical-align: middle;
    background-position: 4px 4px;
    background-size: 60%;
    margin-right: 0px;
    cursor: pointer;
    display: inline-block;
    margin-left: -5px;
  }
}

//块状内容模块
.block {
  position: relative;
  border: 1px solid #2c667e;
  /*no*/

  // border-image: linear-gradient(#7e74dd, #2e6125) 1 10 1;
  padding: 15px 10px 10px;
  border-radius: 5px;
  position: relative;
  height: 100%;

  .block-title {
    position: absolute;
    background-color: #153a38d9;
    padding: 5px 10px;
    color: #c1ffe9;
    top: -14px;
    border-radius: 5px;
  }

  .empty-text {
    position: absolute;
    top: 40%;
    left: 50%;
    color: #909399;
  }
}

//el-input样式
.el-input__inner {
  background-color: transparent !important;
  color: #b2bece;
}

.el-textarea__inner {
  color: #b2bece !important;
}


.el-select .el-input.is-focus .el-input__inner,
.el-input.is-focus,
.el-input__inner:focus-within {
  border-color: #40ffff !important;
}

.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
  border-color: #F56C6C !important;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #1d2a46 !important;
}

.el-select-dropdown,
.el-picker-panel,
.el-dropdown-menu {
  background-color: #1d2a46 !important;
  border: 1px solid #40ffff;
  /*no*/
}

.el-tag.el-tag--info {
  background-color: #2b9999 !important;
  border-color: #06f3d2 !important;
  color: #ffffff !important;
}

.el-select-dropdown__item,
.el-dropdown-menu__item {
  color: #b2bece !important;
}

.el-select-dropdown__item.hover,
.el-tree-node__content:hover,
.el-dropdown-menu__item:hover {
  background-color: #145e5e !important;
}

.el-tree-node__content {
  background: transparent !important;
}


.is-current>.el-tree-node__content,
.is-current>.el-tree-node__content:focus {
  background-color: #247676 !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #2f3235;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0dcac1;
  border-color: #dfefed;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #0be9ff
}


//input框placeholder颜色
input::-webkit-input-placeholder {
  color: #787b80 !important;
}

input::-moz-input-placeholder {
  color: #787b80 !important;
}

input::-ms-input-placeholder {
  color: #787b80 !important;
}

//日期选择器
.el-time-spinner__item {
  height: auto !important
}

.el-picker-panel {
  color: #afb9b9 !important;
}

.time-select-item.selected:not(.disabled) {
  color: #32fbf2 !important;
}

.time-select-item:hover {
  background-color: #12504d !important;
}

.el-date-table td.today span {
  color: #00fff3 !important;
}

.el-date-table td.disabled div {
  background-color: #1d2a46;
  color: #616263;

  span {
    color: #616263 !important;
  }
}

.el-time-range-picker__header {
  color: #e4e4e4 !important;
}

.el-time-spinner__item.disabled {
  color: #575e6d !important;
}

.el-picker-panel__body-wrapper span,
.el-picker-panel__body-wrapper a {
  color: #b2bece !important
}

.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: #40ffff;
}

.el-range-input {
  background: transparent;
  color: #b2bece !important;
}

.el-date-editor .el-range-separator,
.el-date-range-picker__header div {
  color: #b2bece;
}

.el-picker-panel__footer {
  background: transparent;

  .el-button--text {
    color: #40ffff;
  }

  .el-button--default {
    background: #2b9494;
    border: none;

    span {
      color: #fff;
    }
  }

  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    background: #1a5c5c !important;
    border: none;
  }
}

.el-select-dropdown__item.selected,
.el-month-table td .cell:hover,
.current a {
  color: #40ffff !important;
}

.el-date-picker__header {
  padding-bottom: 2px;
  margin: 3px !important;
  border-bottom: solid 1px #40ffff;
  /*no*/
}

.el-picker-panel__content th {
  color: #b2bece !important
}

.el-picker-panel__content {
  .el-date-table td.in-range div {
    background-color: #13969647;
  }

  .el-date-table td.end-date span,
  .el-date-table td.start-date span,
  .el-date-table td.current:not(.disabled) span {
    background-color: #1d881b;
  }
}

.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
  background-color: #616868 !important;
}

.el-time-panel {
  background-color: #1d2a46;
}

.el-time-panel__btn {
  color: #40ffff !important;
}

.el-time-spinner__item {
  color: #b2bece;
}

.el-time-spinner__item:not(.active):hover {
  background-color: #2b9494 !important;
}

.el-time-spinner__item.active:not(.disabled) {
  color: #40ffff;
}

.el-picker-panel__icon-btn {
  color: #40ffff !important;
}

.popper__arrow::after {
  border-bottom-color: #40ffff !important;
}

.el-tree {
  background-color: transparent !important;
  overflow-y: scroll;

  span {
    color: #b2bece !important
  }
}

.el-textarea__inner {
  background: transparent;
}

//el-raidio
.el-radio {
  color: #b2bece !important
}

.is-checked .el-radio__inner {
  border-color: #40ffff !important;
  background: #40ffff !important;
}

.is-disabled .is-checked .el-radio__inner {
  border-color: #7a8e8e !important;
  background: #5a6363 !important;
}

.el-radio__input.is-checked+.el-radio__label {
  color: #40ffff !important;
}

.is-disabled .el-radio__input.is-checked+.el-radio__label {
  color: #b2bece !important;
}

//过滤区域
.filter {
  display: flex;
  //background: url("../../page/pageAssets/images/filter.png") no-repeat;
  background-size: 28px;
  padding-left: 40px;
  border-bottom: 1px solid #2c667e;
  /*no*/
  // border-image: linear-gradient(to right, #50d8ee, #665a05) 1 10 1;
  padding-bottom: 10px;

  &>div {
    margin-right: 40px;
    line-height: 36px;
    font-size: 15px;
  }
}

//树形菜单选择后名称区域
.menu-select-title {
  //background: url("../../page/pageAssets/images/location.png") no-repeat;
  height: 38px;
  background-size: 46px 46px;
  margin-bottom: 0.09375rem;
  line-height: 46px;
  padding-left: 13px;

  span {
    margin-left: 24px;
    border-bottom: 1px solid #2b6c09;
    /*no*/
    border-image: linear-gradient(to right, #00deff, #023c3e) 1 10 1;
    border-image: -webkit-linear-gradient(to right, #00deff, #023c3e) 30 30;
    border-image: -moz-linear-gradient(to right, #00deff, #023c3e) 30 30;
    display: inline-block;
    padding: 0 29px 0px 10px;
    line-height: 26px;
    color: #00d6ff;
  }
}

//文字提示框
.el-tooltip__popper.is-dark {
  background: #2b3853d4;
}

.home-title {
  //background: url("../../page/pageAssets/images/home_title.png") no-repeat 0 0;
  background-size: 150px 35px;
  height: 25px;
  width: 100%;
  color: #40ffff;
  padding-left: 14px;
  line-height: 25px;
  background-position: -14px -4px;
}

.home-block {
  // background-color: #0521494a;
  position: relative;

  &>div:nth-child(1) {
    // background: url("../../page//pageAssets/images/border1.png") no-repeat;
    background-size: 100% 100%;
  }
}

//上边栏动画
.opacity1 {
  animation: move_down 1s ease-in;
  animation-fill-mode: forwards;
}

.opacity0 {
  animation: move_top 1s ease-out;
  animation-fill-mode: forwards;
}

@-webkit-keyframes move_top {
  0% {
    top: 0px;
  }

  100% {
    top: -50px;
    opacity: 0;
  }
}

@keyframes move_top {
  0% {
    top: 0px;
  }

  100% {
    top: -50px;
    opacity: 0;
  }
}

@-webkit-keyframes move_down {
  0% {
    top: -60px;
    opacity: 0;
  }

  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes move_down {
  0% {
    top: -60px;
    opacity: 0;
  }

  100% {
    top: 0px;
    opacity: 1;
  }
}

// 以下为兼容IE配置
.el-input__inner,
.el-checkbox__inner::after {
  border-width: 1px !important;
  /*no*/
}


//暂无数据
.empty-text2 {
  color: #e6e6e6;
  margin-top: 17%;
  margin-left: 27%;

  &::before {
    content: "";
    display: block;
    //background: url("../images/empty_icon.png") no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
    text-align: center;
  }
  &::after {
    content: "暂无数据";
  }
}

//四个角边框样式
.rect-border {
  background: rgba(18, 24, 26, 0.98);
  //   min-width: 402px;
  // min-height: 251px;
  border: 1px solid #075252;
  padding: 15px;
  position: relative;
  display: block;




  .rect-border-title {
    //background: url("../../page/pageAssets/images/box-title.png") no-repeat;
    width: 200px;
    height: 40px;
    background-size: cover;
    line-height: 40px;
    padding-left: 38px;
    margin-bottom: 5px;
    color: #00ffd5;
    text-align: left;

    .icon {
      color: rgb(255 252 0);
      font-size: 16px;
      padding-right: 5px;
    }
  }

  .close-icon {
    float: right;
    color: #00ffd5;
    cursor: pointer;
  }

  &::before,
  &::after,
  .border-foot::before,
  .border-foot::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #05e2e2;
    box-shadow: 0px 0px 8px #11fec7;
    background: rgba(18, 24, 26, 0.98);
  }

  &::before {
    left: -3px;
    top: -2px;
  }

  &::after {
    right: -3px;
    top: -2px;
  }

  .border-foot::before {
    left: -3px;
    bottom: -2px;
  }

  .border-foot::after {
    right: -3px;
    bottom: -2px;
  }
}