.chaoti-os-ui-black {
  .el-button--primary,
  .el-button--default {
    color: #ffffff;
    background-color: #014757 !important;
    border-color: #008190 !important;
    opacity: 0.7;
  }
  .el-button--primary:focus,
  .el-button--primary:hover,
  .el-button--default:focus,
  .el-button--default:hover {
    border-color: #00e5ff !important;
    background-color: #014757 !important;
    opacity: 1;
  }
  .el-button--primary.is-active,
  .el-button--primary.active,
  .el-button--default.is-active,
  .el-button--default.active {
    background-color: #008190 !important;
    border-color: #00e5ff !important;
    opacity: 0.7;
  }
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled.active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover,
  .el-button--default.is-disabled,
  .el-button--default.is-disabled.active,
  .el-button--default.is-disabled:focus,
  .el-button--default.is-disabled:hover {
    background-color: #014757 !important;
    border-color: #014757 !important;
    opacity: 0.6;
  }
  //空白按钮
  .el-button--primary.is-plain {
    color: #008190 !important;
    background: transparent !important;
    border-color: #008190 !important;
  }
  .el-button--primary.is-plain:focus,
  .el-button--primary.is-plain:hover {
    border-color: #00e5ff !important;
    color: #00e5ff !important;
  }
  .el-button--primary.is-plain.active {
    background: #014757 !important;
    color: #00e5ff !important;
    border-color: #014757 !important;
  }
  .el-button--primary.is-plain.selected {
    background: #014757 !important;
    color: #00e5ff !important;
    border-color: #00e5ff !important;
  }
  .el-button--primary.is-plain.is-disabled,
  .el-button--primary.is-plain.is-disabled.active,
  .el-button--primary.is-plain.is-disabled:focus,
  .el-button--primary.is-plain.is-disabled:hover {
    color: #027282 !important;
    background-color: transparent !important;
    border-color: #014757 !important;
  }
  //文字按钮
  .el-button--text {
    color: #3d8bf9 !important;
    text-underline-offset: 12px;
    text-decoration: underline;
    font-weight: 400;
  }
  .el-button--text:focus,
  .el-button--text:hover {
    color: #6aa8ff !important;
  }
  .el-button--text.active,
  .el-button--text.selected {
    color: #3d8bf9 !important;
    text-decoration: none;
  }
  .el-button.is-disabled.el-button--text {
    color: #0f3f81 !important;
    text-decoration: none;
  }

  // 主要背景颜色
  .backgroundColor1 {
    background: rgba(0, 37, 55, 0.95);
  }
  .backgroundColor2 {
    background: #002436;
  }
  .backgroundColor3 {
    background: #002e43;
  }
  .backgroundColor4 {
    background: #004362;
  }
  .backgroundColor5 {
    background: #014757;
  }

  //边框颜色(border)
  .borderColor1 {
    border-color: #00e5ff;
  }
  .borderColor2 {
    border-color: #007583;
  }
  .borderColor3 {
    border-color: #015d6c;
  }
  .borderColor4 {
    border-color: #015d6c;
  }

  //正文文字颜色
  .fontColor1 {
    color: #007e8c;
  }
  .fontColor2 {
    color: #00b5ca;
  }
  .fontColor3 {
    color: #00e5ff;
  }
  .fontColor4 {
    color: #c9ffff;
  }

  //数据文字和状态文字颜色
  .DataFontColor1 {
    color: #ac47e5;
  }
  .DataFontColor2 {
    color: #3d8bf9;
  }
  .DataFontColor3 {
    color: #00e863;
  }
  .DataFontColor4 {
    color: #ffcc00;
  }
  .DataFontColor5 {
    color: #ff881f;
  }
  .DataFontColor6 {
    color: #ee3f3f;
  }

  //box边框色值
  .boxBorderColor1 {
    background: linear-gradient(-45deg, #59c8ce 12px, transparent 0) bottom right, linear-gradient(45deg, #59c8ce 12px, transparent 0) bottom left, linear-gradient(135deg, #59c8ce 12px, transparent 0) top left,
      linear-gradient(-135deg, #59c8ce 12px, transparent 0) top right;
    border: solid 1px #007583;
    background-color: rgba(0, 37, 55, 0.95);
    box-shadow: 0px 0 8px rgba(0, 255, 255, 0.5) inset;
  }

  // radio样式
  .el-radio__label {
    color: #007e8c !important;
  }
  .el-radio__inner {
    border: 1px solid #008190 !important;
    background-color: transparent !important;
  }
  .el-radio__inner::after {
    width: 6px;
    height: 6px;
    background-color: #00e5ff;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #00e5ff !important;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border: 1px solid #00e5ff !important;
    background-color: transparent !important;
  }
  .el-radio.disabled {
    .el-radio__inner::after {
      background-color: #007e8c;
    }
    .el-radio__inner {
      border: 1px solid #008190 !important;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #007e8c !important;
    }
  }

  //checkBox
  .el-checkbox__label {
    color: #007e8c !important;
  }
  .el-checkbox__inner {
    background: #001e2e !important;
    border: 1px solid #008190 !important;
  }
  .el-checkbox__inner::after {
    border: 1px solid #00e5ff;
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #014757 !important;
    border: 1px solid #00e5ff !important;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #00e5ff !important;
  }
  .el-checkbox.disabled {
    .el-checkbox__inner {
      background: transparent !important;
      border: 1px solid #007e8c !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #001e2e !important;
      border: 1px solid #00505d !important;
    }
    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
      border-color: #215c6d !important;
    }
  }

  // input
  .el-input__inner,
  .el-textarea__inner {
    border: 1px solid #015d6c !important;
    background: #001e2e !important;
    color: #c9ffff !important;
  }
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #007583 !important;
  }
  :-moz-placeholder {
    /* Mozilla  Firefox 4 to 18 */
    color: #007583 !important;
  }
  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #007583 !important;
  }
  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #007583 !important;
  }
  .el-input__inner:hover,
  .el-textarea__inner:hover {
    border: 1px solid #00e5ff !important;
  }
  .el-input.readonly,
  .el-textarea.readonly {
    .el-input__inner,
    .el-textarea__inner {
      background: #002e43 !important;
      border: 1px solid #002e43 !important;
      color: #c9ffff !important;
    }
  }
  .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner {
    background: #002436 !important;
    border: 1px solid #015d6c !important;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background: #002436 !important;
    border: 1px solid #015d6c !important;
    color: #c9ffff !important;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-right: none !important;
  }

  // 数字框
  .el-input-number__decrease {
    left: calc(100% - 80px);
  }
  .el-input-number__increase {
    right: 0px;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    top: 0px;
  }
  .el-input-number .el-input__inner {
    padding-left: 0px !important;
    padding-right: 80px !important;
    text-align: center !important;
    text-indent: 0rem;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    background: #014757 !important;
    border: 1px solid #008190 !important;
    color: #008695 !important;
  }
  .el-input-number .el-input__inner:hover {
    background: transparent !important;
    border: 1px solid #008190 !important;
  }
  .el-input-number__decrease:hover,
  .el-input-number__increase:hover {
    border: 1px solid #00e5ff !important;
    color: #00e5ff !important;
    background: #014757 !important;
  }
  .el-input-number.is-disabled .el-input-number__decrease,
  .el-input-number.is-disabled .el-input-number__increase {
    background: #014757 !important;
    color: #015d6c !important;
    border: 1px solid #015d6c !important;
  }

  //dropDown 下拉框
  .el-dropdown {
    color: #00b5ca !important;
    font-weight: 400 !important;
    i {
      color: #008190 !important;
    }
    .el-button--primary:focus,
    .el-button--primary {
      i {
        color: #008190 !important;
      }
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      color: #00b5ca !important;
      i {
        color: #00b5ca !important;
      }
    }
  }
  .el-dropdown-menu__item {
    color: #008695 !important;
    padding: 0 20px;
  }
  .el-dropdown-menu {
    background: #002436 !important;
    border: 1px solid #007583 !important;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 6px 0px rgba(0, 0, 0, 0.04);
  }
  .el-popper[x-placement^="bottom"] .popper__arrow::after,
  .el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #007583 !important;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #00354e !important;
    color: #fff !important;
  }
  .el-dropdown-menu__item--divided:before {
    height: 1px;
    background-color: #007583 !important;
    margin: 0 -20px;
  }
  .el-dropdown-menu__item--divided {
    border: 1px solid #007583 !important;
  }
  .el-dropdown:hover {
    .el-button-group .el-button--primary:first-child,
    .el-button-group .el-button--primary:last-child {
      border-color: #00e5ff !important;
      background: #014757 !important;
    }
  }

  //select
  .el-select-dropdown {
    border: 1px solid #007583 !important;
    background: #002436 !important;
    // text-indent: 1rem;
  }
  .el-select-dropdown__item {
    color: #007e8c !important;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #00354e !important;
    color: #00e5ff !important;
    .selectRight {
      color: #00e5ff !important;
    }
  }
  .el-select .el-input .el-select__caret {
    color: #028299 !important;
  }
  .el-input:hover {
    .el-input__icon {
      color: #00e5ff !important;
    }
    .el-icon-circle-close {
      color: #005a67 !important;
    }
  }
  .el-popper[x-placement^="top"] .popper__arrow::after,
  .el-popper[x-placement^="top"] .popper__arrow {
    border-top-color: #007583 !important;
  }
  .el-select-dropdown__item.is-disabled {
    color: #007e8c !important;
  }
  .el-tag.el-tag--info {
    background: #00354e;
    border: 1px solid #008190;
    color: #00e5ff !important;
  }
  .el-tag.el-tag--info .el-tag__close {
    color: #00bfd3;
    background: transparent;
  }
  .el-tag.el-tag--info .el-tag__close:hover {
    color: #051c2e;
    background: #00e5ff;
  }
  .el-select-dropdown__item.selected {
    color: #36d8a4 !important;
    background: transparent !important;
  }
  .el-select-dropdown__item:hover.selected {
    color: #36d8a4 !important;
    background: #014757 !important;
    .selectRight {
      color: #36d8a4 !important;
    }
  }
  .el-scrollbar__thumb {
    background: #005a67;
  }
  .selectLeft {
    float: left;
  }
  .selectRight {
    float: right;
    color: #007e8c;
    font-size: 13px;
    margin-right: 12px;
  }
  .el-select-group__title {
    color: #00e5ff;
    padding-left: 0px;
  }
  .el-select-group__wrap:not(:last-of-type)::after {
    height: 0px;
  }
  .el-select-group__wrap:not(:last-of-type) {
    padding-bottom: 10px;
  }
  .el-select-group .el-select-dropdown__item {
    padding-left: 10px;
  }

  //Cascader级联关系
  .el-cascader__dropdown {
    background: #002436 !important;
    border: 1px solid #007583 !important;
  }
  .el-cascader-menu {
    color: #007e8c !important;
    border: 1px solid #007583 !important;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background: #014757 !important;
    color: #00b5ca !important;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    background: #014757 !important;
    color: #00b5ca !important;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #027e95 !important;
  }

  // switch
  .el-switch {
    width: 50px;
  }
  .el-switch.is-checked .el-switch__core {
    background: rgba(0, 129, 144, 0.5);
    border: 1px solid #00e5ff;
  }
  .el-switch.is-checked .el-switch__core:after {
    background: #00e5ff;
  }
  .el-switch .el-switch__core {
    background: #001e2e;
    border: 1px solid #015d6c;
  }
  .el-switch .el-switch__core:after {
    background: #015d6c;
  }
  .el-switch.is-disabled .el-switch__core,
  .el-switch.is-disabled .el-switch__label {
    background-color: #00354e;
    border: none;
  }
  .el-switch.is-disabled .el-switch__core:after {
    background: #004362 !important;
  }
  .el-switch__label--right {
    position: absolute;
    left: -6px;
    top: 1px;
    visibility: hidden;
  }
  .el-switch__label--left {
    position: absolute;
    right: -6px;
    top: 1px;
    visibility: hidden;
  }
  .el-switch__label.el-switch__label--left.is-active {
    visibility: visible;
    color: #ffa2a2;
    z-index: 1;
  }
  .el-switch__label.el-switch__label--right.is-active {
    visibility: visible;
    color: #96ffc5;
    z-index: 0;
  }
  .elSwitchText.el-switch.is-checked .el-switch__core {
    background: rgba(19, 206, 102, 0.4);
    border: 1px solid #13ce66;
  }
  .elSwitchText.el-switch.is-checked .el-switch__core:after {
    background: #13ce66;
  }
  .elSwitchText.el-switch .el-switch__core {
    background: rgba(255, 55, 55, 0.4);
    border: 1px solid #ff3737;
  }
  .elSwitchText.el-switch .el-switch__core:after {
    background: #ff3737;
  }
  .elSwitchText.el-switch.is-disabled .el-switch__core {
    background: #003249;
    border: 1px solid #003249;
  }
  .elSwitchText.el-switch.is-disabled .el-switch__label {
    color: #007e8c;
    background: transparent;
  }

  //slider
  .el-slider__runway {
    background: #00333e;
  }
  .el-slider__bar {
    background: #00b5c9;
  }
  .el-slider__runway.disabled {
    background: #00354e;
  }
  .el-slider__runway.disabled .el-slider__bar {
    background: #004362;
  }
  .el-slider__runway.disabled .el-slider__button {
    background: #004362;
    border: 3px solid #00354e;
  }
  .el-slider__button {
    border: 3px solid #00b5c9;
    background-color: #007384;
  }
  .el-tooltip__popper.is-dark {
    background: #014757 !important;
    color: #ffffff;
  }
  .el-slider__stop {
    background: #007384;
  }
  .el-slider.el-slider--with-input {
    .el-input-number__decrease {
      left: calc(100% - 64px);
    }
  }
  .el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
    border-top-color: #014757;
  }
  .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #014757;
  }
  .el-tooltip__popper[x-placement^="left"] .popper__arrow::after {
    border-left-color: #014757;
  }
  .el-tooltip__popper[x-placement^="right"] .popper__arrow::after {
    border-right-color: #014757;
  }
  // TimePicker
  .el-date-editor {
    .el-input__prefix {
      left: calc(100% - 30px);
    }
  }
  .el-input--prefix .el-input__inner {
    padding-left: 10px !important;
  }
  .el-time-panel,
  .el-picker-panel {
    background: #002436;
    border: 1px solid #007583;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 6px 0px rgba(0, 0, 0, 0.04);
  }
  .el-time-range-picker__body {
    border: 1px solid #007583;
  }
  .el-time-spinner__item {
    color: #00b5ca;
  }
  .el-time-range-picker__header {
    color: #00e5ff;
  }
  .el-time-spinner__item.active:not(.disabled) {
    color: #c9ffff;
    background: #014757;
  }
  .el-time-spinner__item.active:not(.disabled):hover {
    background: #008190;
  }
  .el-scrollbar__bar.is-vertical > div {
    width: 0px;
  }
  .el-time-panel__footer {
    border-top: 1px solid #007583;
  }
  .el-time-panel__btn {
    color: #007e8c;
  }
  .el-time-panel__content::after,
  .el-time-panel__content::before {
    border: none;
  }
  .el-time-spinner__item:hover:not(.disabled):not(.active) {
    background: #005467;
  }
  .el-time-panel__btn.confirm {
    color: #00b5ca;
  }
  .el-date-editor:hover {
    .el-input__prefix {
      display: none;
    }
  }
  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    background: transparent;
    color: #c9ffff;
  }

  .el-date-editor .el-range__icon,
  .el-range__close-icon {
    position: absolute;
    right: 10px;
    float: right;
    color: #005a67;
    display: block;
  }
  .el-date-editor:hover {
    .el-icon-time {
      display: none;
    }
    .el-date-editor .el-range__icon,
    .el-range__close-icon {
      color: #00e5ff;
    }
  }
  .time-select-item {
    color: #007e8c;
  }
  .time-select-item:hover {
    background: #00354e;
    color: #00b5ca;
  }
  .time-select-item.selected:not(.disabled) {
    color: #c9ffff;
    background: #014757;
  }

  // DatePicker
  .el-date-picker__header-label {
    color: #00e5ff;
  }
  .el-picker-panel__icon-btn {
    color: #00bfd3;
  }
  .el-date-table th,
  .el-date-picker__header--bordered,
  .el-date-range-picker__header {
    color: #00b5ca;
    border-bottom: none;
  }
  .el-date-table td.next-month,
  .el-date-table td.prev-month {
    color: #007e8c;
  }
  .available,
  .el-year-table td .cell,
  .el-month-table td .cell {
    color: #00b5ca;
  }
  .el-date-table td.today span {
    color: #ffffff !important;
  }
  .el-date-table td.available:hover {
    background: #004362;
    color: #00e5ff;
    border-radius: 0px;
  }
  .el-date-table td.current:not(.disabled) span {
    color: #ffffff;
    background: transparent;
  }
  .el-date-table td.current:not(.disabled) {
    background: #008190;
  }
  .el-year-table td .cell:hover,
  .el-year-table td.current:not(.disabled) .cell,
  .el-month-table td.current:not(.disabled) .cell,
  .el-month-table td .cell:hover {
    background: #008190;
    color: #ffffff;
    border-radius: 0px;
  }
  .is-week-mode {
    .el-date-table__row:hover {
      td {
        color: #00e5ff !important;
        background: #00354e !important;
      }
      div {
        background: transparent !important;
      }
    }
  }
  .el-date-table__row.current {
    td {
      color: #00e5ff !important;
      background: #00354e !important;
    }
    div {
      background: transparent !important;
    }
    .start-date,
    .end-date {
      background: #008190 !important;
      color: #ffffff;
    }
  }
  .el-date-table td.end-date span,
  .el-date-table td.start-date span {
    background: transparent;
  }
  .el-picker-panel [slot="sidebar"],
  .el-picker-panel__sidebar {
    background: #002e43;
    box-shadow: 1px 0px 0px 0px #015d6c;
    border-color: #015d6c;
  }
  .el-picker-panel__shortcut {
    color: #00b5ca;
  }
  .el-picker-panel__shortcut:hover {
    color: #00e5ff;
    background: #005a67;
  }
  .el-date-table td.disabled div {
    background: rgba(0, 37, 55, 0.95);
    span {
      color: #007e8c;
    }
  }
  .el-date-range-picker__content.is-left {
    border-color: #015d6c;
  }
  .el-date-range-picker__content.is-left,
  .el-date-range-picker__content.is-right {
    td.available.in-range {
      color: #00e5ff !important;
      background: #00354e;
    }
    div {
      background: transparent !important;
    }
    .in-range.start-date,
    .in-range.end-date {
      background: #008190 !important;
      color: #ffffff;
    }
  }

  //upload
  .el-upload__tip {
    color: #007e8c;
  }
  .el-upload-list__item-name {
    color: #00b5ca;
  }
  .el-upload-list__item-name [class^="el-icon"] {
    color: #00e5ff;
  }
  .el-upload-list__item:hover {
    .el-upload-list__item-name {
      color: #c9ffff !important;
    }
    .el-icon-close:before {
      color: #c9ffff;
      content: "删除";
    }
    background: #003946;
    .el-upload-list__item-name [class^="el-icon"] {
      color: #c9ffff;
    }
  }
  .el-progress-bar__inner {
    background: linear-gradient(-90deg, #1cb6ff 0%, rgba(28, 182, 255, 0.2) 100%);
  }
  .el-progress__text,
  .el-upload-list__item .el-icon-upload-success {
    color: #00e5ff;
  }

  .flexs.upload-demo {
    display: flex;
    flex-direction: column-reverse;
  }
  .uploadFiexd {
    width: 100%;
    text-align: left;
    margin-top: 10px;
  }
  .el-upload-dragger {
    background: #002436;
    border: 1px solid #007583;
  }
  .el-upload-dragger .el-icon-upload {
    color: #014f60;
  }
  .el-upload-dragger .el-upload__text {
    color: #008695;
    em {
      color: #00e5ff;
      font-weight: 500;
    }
  }
  .el-upload-dragger:hover {
    background: #00354e;
    border: 1px solid #00b5c9;
    .el-upload-dragger .el-upload__text {
      color: #008695;
    }
  }
  .el-upload-dragger.is-dragover {
    background: #014757;
    border: 2px dotted #00b5c9;
  }
  .el-upload--picture-card {
    background: #002436;
    border: 1px solid #007583;
  }
  .el-upload--picture-card i {
    color: #008190;
  }
  .el-upload--picture-card:hover,
  .el-upload:focus {
    background: #00354e;
    border: 1px solid #00b5c9;
  }

  // rate
  .readBlue_1 {
    .el-rate__item {
      .el-rate__icon.el-icon-star-on {
        color: #004750 !important;
      }
    }
  }
  .readBlue_2 {
    .el-rate__item:nth-child(2),
    .el-rate__item:nth-child(3),
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #004750 !important;
      }
    }
  }
  .readBlue_3 {
    .el-rate__item:nth-child(3),
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #004750 !important;
      }
    }
  }
  .readBlue_4 {
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #004750 !important;
      }
    }
  }
  .readBlue_5 {
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }
  .readYellow_1 {
    .el-rate__item {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }
  .readYellow_2 {
    .el-rate__item:nth-child(2),
    .el-rate__item:nth-child(3),
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }
  .readYellow_3 {
    .el-rate__item:nth-child(3),
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }
  .readYellow_4 {
    .el-rate__item:nth-child(4),
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }
  .readYellow_5 {
    .el-rate__item:nth-child(5) {
      .el-rate__icon.el-icon-star-on {
        color: #594700 !important;
      }
    }
  }

  //from
  .el-form-item__label {
    color: #007e8c;
  }
  .promptInfo {
    color: #007e8c;
  }
  .el-input .el-input__count .el-input__count-inner {
    background: transparent;
    color: #007e8c;
  }
  .el-form-item.is-error.is-required,
  .el-form-item.is-error,
  .el-form-item.is-error.is-required {
    .el-input__inner,
    .el-textarea__inner {
      border: 1px solid red !important;
    }
  }

  // table
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #015d6c;
  }
  .el-table tr {
    background: #002436;
    color: #00b5ca;
  }
  .el-table th.el-table__cell {
    background: #002e43 !important;
    color: #ffffff;
  }
  tr.el-table__row--striped > td {
    background: #002e43 !important;
    color: #00b5ca;
  }
  tr.el-table__row.hover-row > td {
    background: #004362;
  }
  .el-table__body tr:hover > td {
    background: #004362 !important;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    border-bottom: 1px solid #015d6c;
  }
  .el-table--border,
  .el-table--group {
    border-color: #015d6c;
  }
  .el-table--border .el-table__cell,
  .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: 1px solid #015d6c;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before,
  .el-table__fixed-right::before,
  .el-table__fixed::before {
    background: #015d6c;
  }
  .warning-row {
    background: #002e43 !important;
  }
  .success-row {
    background: rgba(43, 36, 7, 90%) !important;
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    background: #003e51;
  }
  .TableMergeTemplate.el-table {
    .el-table__header {
      width: calc(100% + 5px) !important;
    }
    .el-table__body {
      width: calc(100% - 2px) !important;
    }
  }
  .el-table {
    ::-webkit-scrollbar {
      width: 5px;
      height: 15px;
      background: transparent;
    } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar-track {
      background-color: #003e51;
      width: 5px !important;
    } /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(0deg, #02838b 0%, #2bf2ff 100%);
      margin: auto;
      opacity: 0.6;
      border-radius: 4px;
    } /*定义滑块 内阴影+圆角*/

    .scrollbarHide ::-webkit-scrollbar {
      display: none;
    }
    .scrollbarShow ::-webkit-scrollbar {
      display: block;
    }
  }
  .el-table__body-wrapper tr:hover > td {
    background: #004362 !important;
  }
  .fixeds {
    .el-table__fixed {
      tr.el-table__row > td.el-table__cell {
        background: #002e43;
        box-shadow: 4px 0px 4px 0px rgba(0, 12, 27, 0.3);
      }
    }
  }
  //带合计的表单
  .el-table__footer-wrapper tbody td.el-table__cell,
  .el-table__header-wrapper tbody td.el-table__cell {
    background: #002436;
    color: #00b5ca;
  }
  .el-table__footer-wrapper td.el-table__cell {
    border-top: 1px solid #015d6c;
  }

  //Badge
  .el-badge__content {
    background: rgba(255, 73, 73, 0.6);
    border: 1px solid #ff4949;
  }
  .el-badge {
    color: #00b5ca !important;
  }

  // tag
  .el-tag {
    background-color: #00354e;
    color: #007e8c !important;
    border: 1px solid #00354e;
    font-weight: 800 !important;
    .el-tag__close:hover {
      background: #008f91;
    }
  }
  .el-tag.el-tag--success {
    background: rgba(2, 255, 133, 0.2);
    border: 1px solid #00c063;
    color: #00c063 !important;
    .el-tag__close:hover {
      background: #00c063;
    }
  }
  .el-tag.el-tag--warning {
    background: rgba(255, 204, 0, 0.2);
    border: 1px solid #ba9500;
    color: #ba9500 !important;
    .el-tag__close:hover {
      background: #ba9500;
    }
  }
  .el-tag.el-tag--danger {
    background: rgba(255, 84, 88, 0.2);
    border: 1px solid #bf3134;
    color: #bf3134 !important;
    .el-tag__close:hover {
      background: #bf3134;
    }
  }
  .primary.el-tag.el-tag--light {
    background: rgba(28, 182, 255, 0.2);
    border: 1px solid #007bb6;
    color: #007bb6 !important;
    .el-tag__close:hover {
      background: #007bb6;
    }
  }

  //Pagination
  .el-pagination.is-background .btn-next.disabled,
  .el-pagination.is-background .btn-next:disabled,
  .el-pagination.is-background .btn-prev.disabled,
  .el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .el-pager li.disabled {
    background: #002e43;
    color: #00595e;
    border-color: transparent;
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background: #014757;
    border: 1px solid #008190;
    color: #00b5ca;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #008190;
    color: #ffffff;
    border: 1px solid #008190 !important;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    background: #005a67;
    border: 1px solid #00cde4;
    color: #00b5ca;
  }
  .el-pagination__total {
    color: #00b5ca;
  }
  .el-pagination button:disabled {
    background: #002e43;
    color: #00595e;
    border-color: #002e43;
  }
  .el-pager li.active {
    background: #008190;
    color: #ffffff;
  }
  .totals {
    .el-pager li {
      background: #014757;
      border: 1px solid #008190;
      color: #00b5ca;
      border-radius: 2px;
      margin-right: 10px;
      &:first-child {
        margin-left: 10px;
      }
    }
    .el-pager li.active {
      background: #008190;
      color: #ffffff;
      border: 1px solid #008190 !important;
    }
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    background: #014757;
    border: 1px solid #008190;
    color: #00b5c9;
  }
  .el-pager li:hover,
  .el-pagination button:hover {
    background: #005a67;
    border: 1px solid #00cde4;
    color: #00cde4;
  }
  .el-pagination button:disabled:hover {
    background: #002e43 !important;
    border: 1px solid #002e43 !important;
    color: #00595e !important;
  }
  .el-pagination__jump {
    color: #00cde4;
  }
  .smallTotals {
    .btn-next,
    .btn-prev,
    button:disabled {
      background: transparent !important;
      border-color: transparent;
    }
    .el-pager li {
      color: #00b5ca;
      background: transparent !important;
      margin-right: 10px;
      &:first-child {
        margin-left: 10px;
      }
    }
    .el-pager li.active {
      background: #008190 !important;
      color: #ffffff;
    }
    .el-pager li:hover,
    button:hover {
      border: none;
      color: #ffffff;
    }
    button:disabled:hover {
      background: transparent !important;
      border: 1px solid transparent !important;
      color: #008190 !important;
    }
  }

  //card
  .el-card {
    background: #002e43;
    border: 1px solid #015d6c;
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0px 0px 8px 0px rgba(0, 28, 68, 0.1);
    position: relative;
  }
  .box-card-number {
    display: block;
    padding: 0px;
    margin: 0px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    color: #007e8c;
    text-align: center;
    border: 1px solid #015d6c;
    position: absolute;
    top: -1px;
    left: -1px;
    border-bottom-right-radius: 10px;
  }
  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    background: #002e43;
    border: 1px solid #00e5ff;
    border-radius: 0px 0px 6px 6px;
    .box-card-number {
      border: 1px solid #00e5ff;
      color: #00b5ca;
    }
  }
  .box-card.active {
    background: #014757;
    border: 1px solid #00e5ff;
    border-radius: 0px 0px 6px 6px;
    .box-card-number {
      border: 1px solid #00e5ff;
      color: #00b5ca;
    }
  }

  //tree
  .el-tree {
    background: #002436;
    border: 1px solid #007583;
  }
  .el-tree-node__expand-icon,
  .el-tree-node__label {
    color: #009999;
  }
  .el-tree-node__content:hover {
    background: #00354e !important;
    .el-tree-node__expand-icon,
    .el-tree-node__label {
      color: #00e5ff;
    }
  }
  .el-tree-node__content {
    background-color: #002436 !important;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #00354e !important;
  }

  // progress
  .el-progress-bar__outer {
    background: #00191e;
    border: 1px solid #00313a;
  }

  .el-progress.is-success .el-progress-bar__inner {
    background: linear-gradient(90deg, rgba(0, 232, 99, 0.2) 0%, #00e863 100%);
  }
  .el-progress.is-exception .el-progress-bar__inner {
    background: linear-gradient(90deg, #ee3f3f 0%, rgba(238, 63, 63, 0.19) 100%);
  }
  .default {
    .el-progress-bar__inner {
      background: linear-gradient(-90deg, #3d8bf9 0%, rgba(61, 139, 249, 0.2) 100%);
    }
    .el-progress__text {
      color: #20a0ff;
    }
  }
  .el-progress-circle svg path:first-child {
    stroke: #00191e;
  }
  .default {
    .el-progress-circle svg path:last-child {
      stroke: #3d8bf9;
    }
  }
  .el-progress.is-success {
    .el-progress-circle svg path:last-child {
      stroke: #00e863;
    }
  }
  .el-progress.is-exception {
    .el-progress-circle svg path:last-child {
      stroke: #ee3f3f;
    }
  }

  //tabs
  .el-tabs__nav-wrap::after {
    background: #007583;
  }
  .el-tabs__active-bar {
    background: #00e5ff;
  }
  .el-tabs__item.is-active {
    color: #c9ffff;
  }
  .el-tabs__item {
    color: #00b5ca;
  }
  .el-tabs__item:hover {
    color: #00e5ff;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
    background: #005a67 !important;
    border: 1px solid #008190;
    color: #c9ffff;
  }
  .tabsAngle.el-tabs--card > .el-tabs__header .el-tabs__nav,
  .tabsRounded.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  .tabsAngle.el-tabs--card > .el-tabs__header .el-tabs__item,
  .tabsRounded.el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid #008190;
    margin-right: 5px;
    background: transparent;
  }
  .el-tabs--card > .el-tabs__header {
    border-bottom: 1px solid #007583;
  }
  .tabsAngle,
  .tabsRounded,
  .tabsBtns {
    .el-tabs__item:hover {
      background: #014757;
      border: 1px solid #008994;
      color: #00e5ff;
    }
  }
  .tabsRounded.el-tabs--card > .el-tabs__header .el-tabs__item {
    border-radius: 4px 4px 0px 0px !important;
  }
  .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__nav,
  .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__item {
    border: none;
  }
  .tabsBtns.el-tabs--card > .el-tabs__header {
    border-bottom: 1px solid transparent;
  }
  .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-top: 1px solid #00e5ff;
    color: #00e5ff !important;
  }
  .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-bottom: 1px solid transparent;
  }
  .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid #007583;
    border-right: none;
    &:last-child {
      border-right: 1px solid #007583;
    }
  }
  .tabsBtnsClose {
    .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs__header .el-tabs__item {
      border: none;
    }
    .el-tabs__item .el-icon-close:hover {
      color: #00333e;
      background: #00c9c9;
    }
    .el-tabs__item.is-active {
      background: #005a67;
      color: #c9ffff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
  }
  .tabsBtnsCard {
    .el-tabs__header {
      margin: 0px;
    }
    .el-tabs__content {
      border: 1px solid #007583;
      background: #002e43;
      color: #00b5ca;
      border-top: 0px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }

  //Breadcrumb
  .el-breadcrumb__inner {
    color: #00b5ca;
  }
  .el-breadcrumb__separator {
    color: #00b5ca;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    color: #c9ffff;
  }
  .el-breadcrumb__inner:hover {
    color: #00e5ff;
    text-decoration: underline;
    text-underline-offset: 12px !important;
  }

  //Steps
  .el-step__title {
    font-size: 14px;
  }
  .iconSteps {
    .el-step__icon {
      background: transparent;
    }
    .el-step.is-horizontal .el-step__line {
      left: 38px;
    }
    .el-step__head.is-finish {
      .el-step__icon-inner {
        color: #1cb6ff;
      }
    }
    .el-step__head.is-process {
      .el-step__icon-inner {
        color: #004362;
      }
    }
  }
  .el-step__head.is-finish {
    .el-step__icon.is-text {
      background: #1cb6ff;
      color: #000;
      border: none;
    }
    .el-step__title.is-process {
      color: #1cb6ff;
    }
    .el-step__line {
      background: #1cb6ff;
    }
    & + .el-step__main {
      .el-step__title.is-finish,
      .el-step__description.is-finish {
        color: #1cb6ff;
      }
    }
  }
  .el-step__head.is-process {
    .el-step__icon.is-text {
      border: none;
      background: #004362;
      color: #00b5ca;
    }
    .el-step__line {
      background: #004362;
    }
    & + .el-step__main {
      .el-step__title.is-process,
      .el-step__description.is-process {
        color: #00e5ff;
      }
    }
  }
  .el-step__head.is-wait {
    .el-step__line {
      background: #004362;
    }
    .el-step__icon.is-text {
      border: 1px solid #004362;
      background: rgba(0, 37, 55, 0.95);
      color: #007e8c;
    }
    .el-step__icon-inner {
      color: #004362;
    }
    & + .el-step__main {
      .el-step__title.is-wait,
      .el-step__description.is-wait {
        color: #007e8c !important;
      }
    }
  }
  .sameColor {
    .el-step__head.is-finish {
      .el-step__icon.is-text {
        background: #00e5ff;
        color: #000;
        border: none;
      }
      .el-step__title.is-process {
        color: #00e5ff;
      }
      .el-step__icon-inner {
        color: #000;
      }
      & + .el-step__main {
        .el-step__title.is-finish {
          color: #00e5ff;
        }
      }
      .el-step__line {
        background: #00e5ff;
      }
    }
    .el-step__head.is-process {
      .el-step__icon.is-text {
        border: none;
        background: #004362;
        color: #00b5ca;
      }
      .el-step__line {
        background: #004362;
      }
    }
  }
  .el-step__head.is-success {
    .el-step__icon.is-text {
      background: #02ff85;
      border: none;
    }
    .el-step__icon-inner.is-status {
      color: #000;
    }
    .el-step__line {
      background: #02ff85;
    }
    & + .el-step__main {
      .el-step__title.is-success {
        color: #02ff85 !important;
      }
    }
  }
  .successSameColor {
    .el-step__head.is-success {
      .el-step__icon.is-text {
        background: #00e5ff;
        border: none;
      }
      .el-step__icon-inner.is-status {
        color: #000;
      }
      .el-step__line {
        background: #00e5ff;
      }
      & + .el-step__main {
        .el-step__title.is-success {
          color: #00e5ff !important;
        }
      }
    }
  }
  .el-step__head.is-error {
    .el-step__icon.is-text {
      border: none;
      background: #ff5458;
      color: #000;
    }
    .el-step__line {
      background: #004362;
    }
  }

  //alert
  .default.el-alert--warning.is-light {
    background: rgba(0, 229, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
    .el-alert__description {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .el-alert.is-light .el-alert__closebtn {
    color: #ffffff;
  }
  .el-alert--success.is-light {
    background: rgba(0, 232, 99, 0.5);
    color: rgba(255, 255, 255, 0.5);
    .el-alert__description {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .el-alert--info.is-light {
    background: rgba(61, 139, 249, 0.5);
    color: rgba(255, 255, 255, 0.5);
    .el-alert__description {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .el-alert--warning.is-light {
    background: rgba(255, 204, 0, 0.5);
    color: rgba(255, 255, 255, 0.5);
    .el-alert__description {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .el-alert--error.is-light {
    background: rgba(238, 63, 63, 0.5);
    color: rgba(255, 255, 255, 0.5);
    .el-alert__description {
      color: rgba(255, 255, 255, 0.5);
    }
  }

  //Message
  .el-message__closeBtn {
    color: #00e5ff;
    opacity: 0.4;
  }
  .el-message.el-message--info {
    background: #001e21 !important;
    border: 1px solid #00e5ff !important;
  }
  .el-message__content {
    color: #00e5ff;
  }
  .el-message .el-icon-info {
    color: #00e5ff;
  }
  .el-message--success {
    background: rgba(0, 35, 18, 0.9);
    border: 1px solid #00e863;
    .el-message__content {
      color: #00e863;
    }
    .el-message .el-icon-info {
      color: #00e863;
    }
  }
  .el-message--warning {
    background: rgba(35, 28, 0, 0.9);
    border: 1px solid #ffcc00;
    .el-message__content {
      color: #ffcc00;
    }
    .el-message .el-icon-info {
      color: #ffcc00;
    }
  }
  .el-message--error {
    background: rgba(39, 10, 11, 0.9);
    border: 1px solid #ee3f3f;
    .el-message__content {
      color: #ee3f3f;
    }
    .el-message .el-icon-info {
      color: #ee3f3f;
    }
  }
  .rightMessage {
    left: calc(100% - 220px);
  }

  //messageBox
  .el-message-box {
    background: rgba(0, 36, 54, 0.9);
    border: 1px solid #007583;
    box-shadow: 0px 2px 6px 0px rgba(0, 201, 201, 0.3);
  }
  .el-message-box__title {
    color: #c9ffff;
  }
  .el-message-box__headerbtn .el-message-box__close {
    color: #008994;
  }
  .el-message-box__content {
    color: #00e5ff;
  }
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }

  //Notification
  .el-notification {
    background: #002436;
    border: 1px solid #007583;
    box-shadow: 0px 2px 6px 0px rgba(0, 201, 201, 0.3);
  }
  .el-notification__title {
    color: #c9ffff;
  }
  .el-notification__content i {
    color: #00e5ff !important;
  }
  .el-notification__closeBtn {
    color: #008994;
  }
  .el-notification__content {
    color: #00e5ff !important;
  }
  .notifyInfo {
    .el-icon-info {
      color: #1cb6ff;
    }
  }
  .notifyInfoIcon {
    .el-icon-info,
    .el-icon-success,
    .el-icon-warning,
    .el-icon-error {
      color: #006371;
    }
  }

  //Popover
  .el-popover {
    background: rgba(0, 36, 54, 0.9);
    border: 1px solid #007583;
    box-shadow: 0px 2px 6px 0px rgba(0, 201, 201, 0.3);
    color: #00e5ff;
  }
  .el-popover__title {
    color: #c9ffff;
  }

  //table的自定义组件
  .xTable {
    height: 100%;
    .thead {
      height: 2.2rem;
      line-height: 2.2rem;
      position: relative;
      margin-bottom: 0.8vh;
      .left,
      .right {
        position: absolute;
        top: -5.2px;
        left: -20px;
        width: 18px;
        height: 45px;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAtCAYAAACj4jsvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFMEZEN0ZEMDgxOTExRUQ5NDY3RkU4MDVBODE1NjVDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFMEZEN0ZFMDgxOTExRUQ5NDY3RkU4MDVBODE1NjVDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUUwRkQ3RkIwODE5MTFFRDk0NjdGRTgwNUE4MTU2NUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUUwRkQ3RkMwODE5MTFFRDk0NjdGRTgwNUE4MTU2NUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5S8GyVAAABNklEQVR42mJkmLqTgQAoBeI8IObGo+YECx5JViCeCcSJDISBDC6DBIB4DRA7A/FXII4H4r14DPqAzSB5IN4MxLpA/BKIfYD4DCEnMaHxTYD4JNSQy0BsTowh6AZ5A/EBIBaHesMOiB8yEAlgBuUD8RZozMwHYk+QvxlIAEzQ6J0A5dcDcRIQ/2YgEYACuwLKjgHipQxkApCLhKBssg3BFmujBo0aNGrQqEGjBo0aNGoQtQ16B2UnUGpQE5QNas7UUWLQRCDOgvIbgXgxtCFKVhhNh7YVv0KbN7uhDVKyAnsrENsA8RMgtgfi09CGKVmxdgGILaENURVow9SE3OgHucgaiLdDG6agBmow1Ku4MCuuBvtnIPYH4slAnA5tvOMDl/F1IUAN0gwgvgjERUAsjEftfYAAAwAtcTJt/7g/gwAAAABJRU5ErkJggg==")
          no-repeat;
        background-size: 100% 100%;
        z-index: 1;
      }
      .left::before,
      .right::before {
        content: "";
        position: absolute;
        width: 13px;
        height: 35.6px;
        top: 50%;
        transform: translateY(-50%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .left::before {
        right: -3px;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAjCAYAAABPTYA6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3OGE0NTQ3Ni02ZjdkLTFkNDMtODRhOC1jNjEyOTEyN2E1MjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUY0NDcwMzMwODE3MTFFRDg2RkZCNjU2QkRGNDc1MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUY0NDcwMzIwODE3MTFFRDg2RkZCNjU2QkRGNDc1MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjA5ZDQ0OWUtNjhiNS0xOTQ4LWExYTUtYmQzYjQwZThiOTNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc4YTQ1NDc2LTZmN2QtMWQ0My04NGE4LWM2MTI5MTI3YTUyMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmzrk38AAAB0SURBVHja7NDNDYAgDAXgwlo6hM7jT8S4D0u4V20IMUE09HGVd+mlX9I+w8z0jOnHVYajj1gUZEjAUgIJimAnRWwEsxaEfeqGSeZBQCwKXtsr3FWBuAZRQw019EPkYMSn31AYzkPh/RMCkyK0MGtPAy8BBgCs3x/PsFdhLwAAAABJRU5ErkJggg==")
          no-repeat center center;
        background-size: 100% 100%;
      }
      .right::before {
        left: -3px;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAjCAYAAABPTYA6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3OGE0NTQ3Ni02ZjdkLTFkNDMtODRhOC1jNjEyOTEyN2E1MjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUY0NDcwMzcwODE3MTFFRDg2RkZCNjU2QkRGNDc1MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUY0NDcwMzYwODE3MTFFRDg2RkZCNjU2QkRGNDc1MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjA5ZDQ0OWUtNjhiNS0xOTQ4LWExYTUtYmQzYjQwZThiOTNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc4YTQ1NDc2LTZmN2QtMWQ0My04NGE4LWM2MTI5MTI3YTUyMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkz24n0AAABoSURBVHja7NRBCoAwDETRRLyVl/BGNiePdlNoqzIT0FU+dFN4pHQRlW13ea5cx8bLRd6r6GDRLUTQBFHUwVW4CjupwQiSD5BGkP/2vERRpBHk+XuJwIxFxu49YzdsAyjqAIImUDsFGACKng9ViVen0AAAAABJRU5ErkJggg==")
          no-repeat center center;
        background-size: 100% 100%;
      }
      .right {
        left: auto;
        right: -20px;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAtCAYAAACj4jsvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE3QzU3MjBBMDgxOTExRURBRTYxREQzN0JDQzY0OUIyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE3QzU3MjBCMDgxOTExRURBRTYxREQzN0JDQzY0OUIyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTdDNTcyMDgwODE5MTFFREFFNjFERDM3QkNDNjQ5QjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTdDNTcyMDkwODE5MTFFREFFNjFERDM3QkNDNjQ5QjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4H6kIIAAABP0lEQVR42uzWr0tDURjG8ePYkoZpEQz6ByhoGDjBNIsgNmHFMC0GtRoFBZs/igsWxWC0+bMMg0U0aLA7MIsiJovfA8/gCjuHe+6t54UPd2zvffbec8vbY5q3V8aYqnHXDw6w7+kxRQyh39Njf9vDGFbw262pgAk1uyxoqiXcoOyayNanZ6JztHGBGu4xp+/+TZSmnjCJV4ziAZUsQUYTTKOFQdxpsuCgzhHM4gS9etzV5BmFlH1ry3jDFg7RVzDZaxuL+ryRJ8jWma4DeYNM1sOOQTEoBsWgGBSDYlCKauj6kSdoU+uNrZ0sa00Jx4lNZA3N0KCydsqaFtQ6LkMXrRHdZHfId8zjOfSwK1pAbcgLppIhnYlK2gddNYNT9Vzrcb677dmPGE8x1RHWXZt/UWvvsCfgC7v2zfj+5U+AAQCUxTTzaFne3gAAAABJRU5ErkJggg==");
      }
      .fields {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABtAAAAABCAIAAADIEX3qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3OGE0NTQ3Ni02ZjdkLTFkNDMtODRhOC1jNjEyOTEyN2E1MjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkMzMDEzRTkwODE4MTFFREI0NEFGQjNDNzc4QkRCQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkMzMDEzRTgwODE4MTFFREI0NEFGQjNDNzc4QkRCQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjA5ZDQ0OWUtNjhiNS0xOTQ4LWExYTUtYmQzYjQwZThiOTNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc4YTQ1NDc2LTZmN2QtMWQ0My04NGE4LWM2MTI5MTI3YTUyMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqpI9+EAAAKaSURBVHja3FjXdcQwDCPmyhLZfxnm5VQINtlO+Tl/XJFssQgEIUM+PuX9LxWBqApQjX9/yPqiyTGyntLXIFQUr+E9O6Yg+ybAZsurn6k8l+m8wDmowzTWgsNPnSPDMZHp7Rxfq81AnufQO+VmLGTMxXOYYYT/zt/q1/WJNV9WUClPxfpgJ/fnTpT46fCYtFt1cW/YjmDCxz/wwxFpTu8O5LWypozBWz9gLuSk2WS/GuXOAK8XUGZDQm7LhsclRDr3VhnuOg2GQgyal8+G1uobHmDMn4P1UzgARwnAgZrUwxhWpLcYw7PciGLy2w5nR4lFIB7GWm4eHBEBDQtUUUfPFwwK/JX1jpX8qiIuWGhj41CGMDQW1U1Zqq17GrGSFCNn6YJFZLDoQ1XpSNVrHhKEZOGnwCFieiPIKrTteK1jZiYkcsA/8ElbCd6hDI/dK+E7/kiatQP1qUPDJ5iANGiRyXMEhorf8ckdQnggM/76qk2noM73XNxQJdyk15JAm/ck6DQQFxF+4GXhJZ8YThJFRIRWtVOE9qQEUPnJcYEGd+ODOAAXfHIgroN+6JQbkhjj2od7tFNWZaJU+xsqUWfmlJRzlosHPsk66hA180mpT5ruJ9JEl7sV+n6NFlwIPU5WjZAizRhAPkR0QYMOIDtLSjmkiqj17o3KMM9hskoO+gS3yirwSThS2dEDrmTEy8Wy1VrdebL6AZ+0bWIptEL5kJAAnpE4vCJiadryye3EByTV5xo+PqRWeOgOEfdqyCkEK9piCd5ayVBDR+5N8PRyA9us5VqjkOcprrKO9B6DdKPJb/HbmjN83wf4ozEJe/emQqzn8tFGJEK32Kbn2TgdQ7lfqJ3T7RhFgj/zVPGmAl6X3iPAd7m+BBgAdbH4nFSZRyIAAAAASUVORK5CYII=")
          repeat-y;
        background-size: 100% 1px;
        display: flex;
        width: 100%;
        margin: auto;
        > div {
          flex: 1;
          font-size: 1rem;
          font-weight: bold;
          color: #fff;
          > div {
            display: inline-block;
            padding: 0 10px;
            user-select: none;
            &.cursor {
              cursor: pointer;
            }
            i {
              display: inline-block;
              vertical-align: middle;
              margin-top: -0.2vh;
              width: 16px;
              height: 16px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            i.desc {
              background-image: url("./black/sortPos.png");
            }
            i.asc {
              background-image: url("./black/sortOrd.png");
            }
          }
        }
        &.current {
          padding-right: 8px;
        }
      }
      &::before,
      &::after {
        position: absolute;
        content: "";
        height: 1px;
        width: calc(100% - 29.2px);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABtAAAAABCAIAAADIEX3qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3OGE0NTQ3Ni02ZjdkLTFkNDMtODRhOC1jNjEyOTEyN2E1MjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkMzMDEzRTUwODE4MTFFREI0NEFGQjNDNzc4QkRCQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkMzMDEzRTQwODE4MTFFREI0NEFGQjNDNzc4QkRCQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjA5ZDQ0OWUtNjhiNS0xOTQ4LWExYTUtYmQzYjQwZThiOTNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc4YTQ1NDc2LTZmN2QtMWQ0My04NGE4LWM2MTI5MTI3YTUyMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PspvZOcAAALkSURBVHja3FhBchxBCIN8K5/w/x8Teb0zAwKp44NPyVbZNe7uaQQIwTrj90f8J5+MwP3werye8V7Mayv7WD5b/NZ98nD36wf0d+K5vE9sLJddvA9ntjWGg4w8OZT7cK+Dfj/wLnzlbJug12/HY8KeBpLXybWyKKHRAMhV63xBFQzpbul4KlpBdccEG9Z1hokQTAMOY6p/D4x3NtlrMMKVfcnaDpdz2eQ9HwYWmcNfNejKYRF6FzlXmryPzutMQ5har5JJw4nh1yJwHQDdvI9NTgYZHZG/FmfKd4arcH55eo+cHmo2eTEdvaUiLgFZsWVUEO5tp8roA26RkCUr41zj2Zq2UyxMvosIX+Eaehs+biA13idTvHsEzbLa6EmaIi2ndgWhSzVUNE4qRti+nip3SrN4ZCcnDU4if6jfroPiwEFwjBJGd7ec3SqID4v8u5UIAzKfiOnuvBCnNGHUBex+6TNtK5+5NTnBbiZj0gBLyjAP7yFikGfYkAYB1fmQqOLcJu0sk1QOkCihJ5nWXnJNKQff7X/80evgID2Z1XbJXYOfgW8GPbVVGnJvFrcnOg9+4twnVwsoX0qusYcm5eoaAQeHqdagtjlQdrM4jG8OJOUFLpjAqldXbKBgkju9zzM241/jN2/CJBdzntGrwgYEO1MVnIY36wgrQStyEADWR3odLmsmpOy+hmu6hwM9BmMlHTVsVGaNdUWFFswjKpZZ8tri2XFejseIW2IHFrkXoVQvK5gT6cHHtuUSDdVNSB8kmbIkDDGx71Q9gWF78DfKtUgwUPMJvFT7FJ9X4PRk64wWZohEuICrKOMvahBHzRy9u5rOAv96+mO6qr2cFTIcbTJMh8JZAYJK5h774fSZ2jqiv+7hwa9BAQ2ZyqJBsDCE3BMXNkW7ZUiP8K2NuiHmf1p8I+b00fzfBEvHH0vKPCqkLfxdX9KbcqpT8WoJb0sTBzY3h9PJXRxgliHk8eQ/+PkUYADI70mrlhxUZgAAAABJRU5ErkJggg==")
          no-repeat;
        background-size: 100% 1px;
      }
      &::after {
        bottom: 0;
        top: auto;
      }
    }
    .noData {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6vh;
    }
    .tbody,
    .noData {
      height: 100%;
      background-color: #002436;
      border: 1px solid #015d6c;
      overflow-y: auto;
      color: #00dcf5;
      margin-top: 10px;
      .row {
        display: flex;
        height: 2.2rem;
        line-height: 2.2rem;
        font-size: 0.8rem;
        font-weight: bold;
        position: relative;
        border-bottom: 1px solid #015d6c;
        // &:first-child {
        //   border-bottom: none;
        // }
        &:hover {
          background: #004362 !important;
        }
        &:last-child {
          border-bottom: none;
        }
        &:first-of-type {
          &::before {
            display: none !important;
          }
        }
        &.stripeClass {
          &:nth-child(2n) {
            background: rgba(0, 67, 98, 0.6);
          }
        }
        &.current {
          background-color: #004362 !important;
          &::after {
            top: auto;
            bottom: 0;
          }
          &:hover {
            background-color: #013e52;
          }
        }
        > div {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            padding: 2px 0;
            font-size: 0.8rem;
            color: #3d8bf9;
            font-weight: bold;
            cursor: pointer;
            margin: 0 5px;
            line-height: 1vh;
            &.spanColor {
              color: #00dcf5;
              cursor: auto;
            }
          }
          span:hover {
            text-decoration: underline;
          }
          span:hover.spanColor {
            text-decoration: none;
          }
        }
        .btns {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }
      }
      &::-webkit-scrollbar {
        width: 10px;
        background-color: #eff2f7;
      }
      &::-webkit-scrollbar-track {
        width: 10px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #d3dae4;
        border-radius: 10px;
      }
    }
    .page {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      .el-pagination {
        padding: 0;
      }
    }
  }
  .tbody::-webkit-scrollbar {
    width: 6px !important;
  }
  .tbody::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(0, 36, 54, 0.9);
  }

  .tbody::-webkit-scrollbar-track {
    background-color: rgba(0, 36, 54, 0.9);
  }

  .tbody::-webkit-scrollbar-thumb {
    background: #007e87 !important;
    border-radius: 5px;
  }

  //title
  .search_title {
    width: 50%;
    max-width: 200px;
    margin: auto;
    height: 2.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 8px;
    box-sizing: border-box;
    color: #ffffff;
    background: url("./black/biaoti_bg.png") no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
  }
  .jplvr_header {
    width: 100%;
    height: auto;
    text-align: center;
    background: url("./black/zbtbh_s.png") no-repeat;
    background-size: 100% 100%;
    height: 2rem;
    position: relative;
    .htClass {
      position: absolute;
      top: 0.2rem;
      left: 0rem;
      z-index: 20;
      width: 3.5rem;
      height: 1.6rem;
      background: url("./black/fanhui_icon.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .htClass:hover {
      background: url("./black/fanhui_icon_anxia.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .jplvr_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      color: white;
      height: 2.5rem;
      line-height: 2.4rem;
      font-size: 1rem;
      padding: 0px 20px;
      background: url("./black/zbtc_rp.png") repeat-x center top;
      .jplvr_title1 {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("./black/zbtd.png") no-repeat center bottom;
        background-size: 50px 5px;
        &::after {
          content: "";
          position: absolute;
          top: 0px;
          left: -30px;
          width: 10px;
          height: 100%;
          background: url("./black/zbta.png") no-repeat center center;
          background-size: 100% 100%;
        }
        &::before {
          content: "";
          position: absolute;
          top: 0px;
          right: -30px;
          width: 10px;
          height: 100%;
          background: url("./black/zbtb.png") no-repeat center center;
          background-size: 100% 100%;
        }
      }
      span {
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
      }
      .jplvr_title_span {
        margin: 0;
        padding: 0;
        display: inline-block;
      }
    }
  }
  .first_chart_title {
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: url("./black/zbtbjx.png") no-repeat center center;
    background-size: 100% 2px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    position: relative;
  }
  .first_chart_title_bg {
    span {
      padding: 6px 20px;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAiCAYAAACeLbMRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlFNDg3RjgwOEJGMTFFREIxODZCMjUxMzIwQzI3OUQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlFNDg3RjcwOEJGMTFFREIxODZCMjUxMzIwQzI3OUQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUEyMDQ0MDMwOEJFMTFFREI4QzJFNjI0OUQzNDlGRDUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUEyMDQ0MDQwOEJFMTFFREI4QzJFNjI0OUQzNDlGRDUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5yvjmqAAAASklEQVR42mL4//8/AxMDGIRl/Gdi+PoVyP31C0h8/wYk/vwBEr//QJQgE3//YophU4ekA68smGBmARIc7ECCkwNEcDEwwN0HEGAAsQkX1FMIK+wAAAAASUVORK5CYII=")
        repeat-x left top;
      background-size: 100% 100%;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: -1px;
        left: -8px;
        width: 8px;
        height: 34px;
        background: url("./black/zbta1.png") no-repeat center center;
        background-size: 100% 100%;
      }
      &::before {
        content: "";
        position: absolute;
        top: -1px;
        right: -8px;
        width: 8px;
        height: 34px;
        background: url("./black/zbtb1.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  //body样式表
  .boxBlock {
    position: relative;
    border-radius: 24px;
    background-repeat: no-repeat;
  }
  .boxTop {
    &::after {
      position: absolute;
      content: "";
      top: -1.4px;
      left: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./black/mbbga.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .boxLeft {
    &::after {
      position: absolute;
      content: "";
      right: -1.4px;
      top: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./black/mbbgb.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .boxBottom {
    &::after {
      position: absolute;
      content: "";
      right: -1.4px;
      bottom: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./black/mbbgd.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .boxRight {
    &::after {
      position: absolute;
      content: "";
      left: -1.4px;
      bottom: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./black/mbbgc.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  //Dialog
  .el-dialog {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #007583;
  }
  .el-dialog__header {
    background: url("./black/tc_repeatx.png") repeat-x center center;
    text-align: left !important;
    height: 40px;
    padding: 10px 20px 10px;
    background-color: transparent;
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn {
    top: 12px;
    right: 12px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .el-dialog__body {
    background: #002436;
    box-shadow: 0px 0px 12px 0px rgba(11, 90, 124, 0.4);
  }
  .el-dialog__footer {
    background: #002436;
    border-top: 1px dashed #007583;
    text-align: center;
  }
  //合并表格
  .items {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .tree-list-zb {
    width: 100%;
    .list-box {
      ul {
        width: 100%;
        li {
          width: 100%;
          line-height: 40px;
          border-bottom: 1px solid #017785;
          .li-item-left {
            padding: 0 15px;
            text-align: center;
          }
          .li-item-right {
            width: 100%;
            li {
              text-align: left;
            }
          }
        }
        li:last-child {
          border-bottom: 0px;
        }
        .no-li {
          // height: 40px;
          // border-color: transparent;
          border-bottom: 0px;
        }
      }
    }
  }

  .flex {
    display: flex;
  }
  .flex-align {
    display: flex;
    align-items: center;
  }
  .tree-list-xm {
    .list-box {
      ul {
        li {
          line-height: 40px;
          border-bottom: 1px solid #017785;
          .li-item-left {
            flex: 1;
            padding: 0 15px;
          }
          .li-item-right {
            width: 75%;
            border-left: 1px solid #017785;
            li {
              text-align: left;
            }
          }
        }
        li:last-child {
          border-bottom: 0px;
        }
      }
    }
  }
  .el-table .cell {
    padding: 0px;
  }

  .tree-list-dw {
    width: 100%;
    .list-box {
      ul {
        width: 100%;
        li {
          width: 100%;
          line-height: 30px;
          border-bottom: 1px solid #017785;
          .li-item-left {
            // padding: 0px 15px;
            text-align: center;
          }
          .li-item-right {
            width: 100%;
            li {
              text-align: left;
            }
          }
          .el-input-number {
            width: 100%;
            .el-input-number__increase,
            .el-input-number__decrease {
              display: none;
            }
            .el-input__inner {
              padding-right: 0px !important;
            }
          }
          .el-input {
            border: none !important;
            .el-input__inner {
              border: none !important;
              padding: 0;
              border-radius: 0;
              border-color: transparent;
              background-color: transparent;
              color: #c7fff0;
            }
          }
          .el-input.is-disabled {
            .el-input__inner {
              background-color: #20526d;
            }
          }
        }
        li:last-child {
          border-bottom: 0px;
        }
      }
    }
  }

  .public-table {
    height: 100%;
    position: relative;
    .el-table {
      background-color: transparent;
      thead {
        color: #c7fff0;
      }
      tbody {
        color: #02e3e5;
      }
      td {
        padding: 0;
        font-size: 13px;
        border-color: #017785;
      }
      th {
        padding: 0;
        background: #013e52;
        border-color: #017785;
      }
      tr {
        background-color: #002537;
      }
      .cell {
        padding-left: 0;
        padding-right: 0;
      }
      .gutter {
        border-bottom: 1px solid #017785;
      }
      .scope-label,
      .scope-item {
        display: block;
        font-size: 14px;
      }
      .el-table-column--selection {
        .cell {
          padding-right: 10px;
        }
      }
      .el-table__header-wrapper {
        th {
          padding: 10px 0;
          background: #013e52;
        }
        th.is-leaf {
          border-color: #017785;
        }
      }
      .el-table__body-wrapper {
        padding-bottom: 0;
        .el-table__row {
          height: 40px;
        }
        tr:hover > td {
          background-color: #013e52;
        }
      }
      .el-table__footer-wrapper {
        tr {
          height: 40px;
        }
        td {
          color: #02e3e5;
          background-color: #013e52;
        }
      }
      .el-table__fixed-header-wrapper {
        th {
          padding: 10px 0;
          border-bottom: 0;
        }
      }
      .el-table__fixed-footer-wrapper {
        td {
          color: #02e3e5;
          background-color: #013e52;
        }
        .cell {
          height: 38px;
          line-height: 38px;
        }
      }
      .hover-row > td {
        background-color: #013e52;
      }
    }
    .table-no-border {
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        border-left: 1px solid #017785;
        border-right: 1px solid #017785;
      }
      .el-table__header-wrapper {
        border-top: 1px solid #017785;
      }
    }
    .el-table--border {
      border-color: #017785;
    }
    .el-table__fixed::before,
    .el-table--border::after,
    .el-table--group,
    .el-table--group::after,
    .el-table::before {
      background-color: #017785;
    }
    .thead-is-image {
      .el-table__header {
        margin-bottom: 13px;
        tr {
          background-color: transparent;
        }
        th {
          height: 47px;
          border-bottom: none;
          background-color: transparent;
        }
      }
      .el-table__header-wrapper {
        border: none;
      }
      .el-table__body-wrapper {
        border-top: 1px solid #017785;
      }
    }
    .thead-slot {
      position: absolute;
      top: 0;
      left: -6px;
      right: -6px;
      .slot-default-img {
        width: 100%;
        background-size: 100% 100%;
        // background-image: var(--publicBg02);
      }
    }
    .el-table__fixed-footer-wrapper tbody td.el-table__cell {
      border-top: none;
    }
  }
  .public-table-template {
    /* 表格不出现横向滚动条 */
    .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    .el-table {
      ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background: transparent;
      } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    }
  }
  //附加合并单元格样式
  .temClass {
    p {
      padding: 0px;
      margin: 0px;
      padding: 5px 0px;
    }

    ul {
      display: flex;

      li {
        flex: 1;
        padding: 5px 0px;
        text-align: center;
        border-left: 1.2px solid #017785;
        border-top: 1.2px solid #017785;

        &:first-child {
          border-left: none;
        }
      }
    }
  }
  .li-item-left1_li {
    display: flex;

    li {
      border-right: 1px solid #017785;

      &:last-child {
        border: none;

        .li-item-left1 {
          border-bottom: 1px solid #017785;
        }
      }
    }
  }
  .el-table__body tr.current-row > td {
    background: #004362 !important;
  }
  .sortFont {
    display: inline-block;
  }
  .sortCss {
    display: flex;
    flex-direction: column;
    float: right;
    align-items: center;
    justify-content: center;
    margin-top: 0.4vh;
    margin-left: 0.2vh;
  }
}
