$border-color-dark: rgba(1, 245, 255, 0.3);
$border-color: #13537e;
$dark-bg-color: #0B1753;
.listview-dark {
  /*el-popover弹出的公共样式****************************************************************************************/
  &.el-popover {
    background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1));
    border: 1px solid $border-color-dark;

    .el-popover__title {
      color: rgba(255, 255, 255, 1);
    }

    div.popper__arrow {
      border-left-color: $border-color-dark;

      &::after {
        border-left-color: rgba(6, 39, 80, 0.90);
      }
    }

    &.contextmenu-popover {
      ul {
        background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1)) !important;

        li {
          background: transparent !important;
        }
      }
    }
  }

  /*el-select下拉的公共样式*****************************************************************************************/
  &.el-select-dropdown.el-popper {
    background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1)) !important;
    border: 1px solid rgba(1, 245, 255, 0.30) !important;

    .el-scrollbar {
      .el-select-dropdown__item {
        color: #FFFFFF;

        &:hover {
          background-color: transparent;
          color: rgba(1, 245, 255, 1);
        }
      }

      .el-select-dropdown__item.hover, .el-select-dropdown__item.selected {
        color: rgba(1, 245, 255, 1) !important;
        background-color: transparent !important;
      }
    }

    .popper__arrow {
      display: none;
    }
  }

  /*el-cascader下拉的公共样式*****************************************************************************************/
  &.el-popper.el-cascader__dropdown{
    background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1)) !important;
    border: 1px solid rgba(1, 245, 255, 0.30) !important;

    .el-cascader-menu{
      border-right: 1px solid rgba(1, 245, 255, 0.30);
    }

    .el-cascader-node{
      color: rgba(255, 255, 255, 1);
    }

    .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
      background: transparent;
      color: rgba(1, 245, 255, 1);
    }

    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path{
      color: rgba(1, 245, 255, 1);
    }

    .popper__arrow {
      display: none;
    }
  }

  /*[日期||时间]选择器的公共样式************************************************************************************/
  .el-date-table td.disabled div {
    background-color: transparent;
  }

  //&.el-date-editor {
  //  color: rgba(255, 255, 255, 1) !important;
  //  background: rgba(1, 245, 255, 0.10);
  //  border: 1px solid rgba(1, 245, 255, 0.30);
  //  padding: 0 !important;
  //  &.el-input{
  //    background: transparent;
  //    border: none;
  //    .el-input__prefix,.el-input__suffix{
  //      background: transparent;
  //    }
  //  }
  //
  //  .el-range-input {
  //    color: rgba(255, 255, 255, 1) !important;
  //    background: transparent;
  //  }
  //
  //  .el-range-separator {
  //    line-height: 30px !important;
  //    color: rgba(255, 255, 255, 1) !important;
  //  }
  //
  //  .el-input__prefix, .el-input__suffix {
  //    color: rgba(255, 255, 255, 1) !important;
  //    background: rgba(26, 179, 255, 0.10);
  //  }
  //
  //  i {
  //    margin-left: 0 !important;
  //    color: rgba(255, 255, 255, 1) !important;
  //  }
  //
  //  .el-range__icon {
  //    padding-left: 10px;
  //  }
  //
  //  .el-range__close-icon {
  //    padding-left: 0;
  //    padding-right: 10px;
  //  }
  //
  //  &:focus, &.is-active {
  //    border: 1px solid rgba(26, 179, 255, 1) !important;
  //  }
  //}

  /*日期选择器[选择段时间]下拉的公共样式****************************************************************************/
  &.el-picker-panel.el-popper {
    background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1));
    border: 1px solid rgba(1, 245, 255, 0.30);
    color: rgba(255, 255, 255, 1);

    .el-picker-panel__body {
      .el-input__inner {
        color: #FFFFFF;
        border-color: rgba(1, 245, 255, 0.3);
        background-color: transparent;
      }

      .el-date-range-picker__header {
        button {
          color: #FFFFFF;
        }
      }

      .el-picker-panel__icon-btn:hover {
        color: #409EFF;
      }

      .el-date-range-picker__content {
        &.is-left {
          border-right: 1px dashed rgba(1, 245, 255, 0.30) !important;
        }
      }

      .el-date-picker__time-header {
        border-bottom: 1px dashed rgba(1, 245, 255, 0.30) !important;
      }

      .el-date-picker__header {
        //border-bottom: none;
        button, .el-date-picker__header-label {
          color: #FFFFFF;
        }
      }

      table {
        border-top: none !important;
        border-left: none !important;

        th {
          color: #FFFFFF;
          border-bottom: 1px dashed rgba(1, 245, 255, 0.2);
        }

        td {
          background-color: transparent;
          //border-right: none;
          //border-bottom: none;
          .cell {
            color: #FFFFFF;
            &:hover {
              color: #01F5FF;
            }
          }

          &.today span,  &.today .cell{
            color: #01F5FF;
          }

          &.current:not(.disabled) .cell{
            color: #01F5FF;
            //background-color: #01F5FF;
          }

          &.available:hover {
            color: #01F5FF;
          }

          &.start-date span, &.end-date span, &.current:not(.disabled) span {
            color: #0E284D;
            background-color: rgba(1, 245, 255, 1);
          }

          &.in-range {
            div {
              background-color: rgba(1, 245, 255, 0.10) !important;
            }

            div:hover {
              background-color: rgba(1, 245, 255, 0.10) !important;
            }
          }

          &.prev-month, &.next-month {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }

      .el-time-panel.el-popper {
        border: 1px solid rgba(1, 245, 255, 0.20) !important;
        background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1)) !important;

        .el-time-panel__content {
          &:before, &:after {
            border-top: 1px dashed rgba(1, 245, 255, 0.20) !important;
            border-bottom: 1px dashed rgba(1, 245, 255, 0.20) !important;
          }

          .el-time-spinner__item {
            color: rgba(255, 255, 255, 0.5) !important;

            &.active:not(.disabled) {
              color: rgba(255, 255, 255, 1) !important;
            }

            &:hover:not(.disabled):not(.active) {
              background: transparent !important;
              color: rgba(1, 245, 255, 1) !important;
            }
          }
        }

        .el-time-panel__footer {
          border-top: 1px dashed rgba(1, 245, 255, 0.20) !important;

          .el-time-panel__btn {
            color: rgba(255, 255, 255, 0.80) !important;

            &.confirm {
              color: rgba(26, 179, 255, 1) !important;
            }
          }
        }

      }
    }

    .el-picker-panel__footer {
      border-top: 1px dashed rgba(1, 245, 255, 0.30) !important;
      background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1)) !important;

      .el-button {
        &.is-plain {
          background: rgba(26, 179, 255, 0.8);
          border-color: rgba(26, 179, 255, 0.8);
          color: #FFFFFF;

          &:hover, &:focus {
            background: rgba(26, 179, 255, 1);
            border-color: rgba(26, 179, 255, 1);
            color: #FFFFFF;
          }
        }

        &.el-button--text {
          color: rgba(26, 179, 255, 0.8) !important;

          :focus, :hover {
            color: rgba(26, 179, 255, 1) !important;
          }
        }
      }
    }

    .popper__arrow {
      display: none;
    }
  }

  .el-dialog, &.el-dialog {
    background-color: $dark-bg-color;
    border: 1px solid rgba(1, 245, 255, 0.3);
    /*弹出框头部*/
    .el-dialog__header {
      height: 45px;
      line-height: 45px;
      padding-left: 20px !important;
      box-sizing: border-box;
      border-bottom: none;

      .dialog-title, .el-dialog__title, > div {
        display: inline-block;
        padding-left: 26px;
        color: #FFFFFF !important;
      }

      .el-dialog__close {
        color: #FFFFFF !important;
      }
    }

    /*弹出框尾部*/
    .el-dialog__footer {
      border-top: 1px dashed rgba(26, 179, 255, 0.5);
    }
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent;
  }

  &.el-table {
    color: rgba(255, 255, 255, 1);
    background-color: transparent;

    thead {
      color: rgba(255, 255, 255, 1);
      font-weight: 400;

      tr, th {
        background: transparent;
        border-right: none;
        border-bottom: none;
      }
      tr > th.el-table__cell.gutter {
        border-bottom: none;
      }

      .cell {
        .el-checkbox {
          .el-checkbox__inner {
            border: 1px solid rgba(1, 245, 255, 1) !important;
            background-color: transparent !important;
          }

          .el-checkbox__input.is-indeterminate .el-checkbox__inner {

            &::before {
              background-color: rgba(1, 245, 255, 1) !important;
            }
          }

          .el-checkbox__input.is-checked .el-checkbox__inner {

            &::after {
              border-color: rgba(1, 245, 255, 1) !important;
            }
          }
        }
      }
    }

    tbody {
      tr.el-table__row, td.el-table__cell {
        border: none;
        //background-color: rgba(26, 179, 255, .16);
        background-color: transparent;

      }

      tr.el-table__row--striped > td.el-table__cell {
        background-color: rgba(46, 116, 203, 0.1);
        //background-color: rgba(26, 179, 255, 0.06);
      }
    }

    &::before {
      background-color: transparent;
    }

    &::after {
      background-color: transparent;
    }
  }
}

.listview-dark, .pl-el-form-dark {
  /*智能建表配置表单的公共样式**************************************************************************************/
  .pl-el-form, &.pl-el-form {
    border-left: none;
    border-bottom: none;

    .main-table {
      border-left-color: rgba(26, 179, 255, 0.5) !important;
      border-top-color: rgba(26, 179, 255, 0.5) !important;

      tr {
        td {
          background-color: transparent !important;
          border-bottom-color: rgba(26, 179, 255, 0.5) !important;
          border-right-color: rgba(26, 179, 255, 0.5) !important;

          .main-div-comp {
            .display-box-style{
              background-color: transparent !important;
            }
            .display-box-div{
              background-color: transparent !important;
            }
            .form-content-outSideBox {
              //color: rgba(1, 245, 255, 1) !important;
              //line-height: 50px;
              //background-color: rgba(5, 20, 51, 0.94) !important;
              border-right: 1px solid rgba(26, 179, 255, 0.5);

              .form-content-word {
                color: rgba(1, 245, 255, 1) !important;
                padding: 0 16px 0 8px !important;
              }

              .require-mark {
                font-size: 26px;
                top: 6px !important;
                right: 8px !important;
              }
            }
          }

          .el-form-item__content .listview-table tr td{
            border-bottom: none !important;
            border-right: none !important;
          }
        }
      }
    }

    .el-form-item__content {
      color: #FFFFFF;
      //单行文本框
      .el-input__inner {
        color: #FFFFFF;
        border: 1px solid rgba(1, 245, 255, 0.3);
        background-color: rgba(1, 245, 255, 0.1);
        border-radius: 3px;
      }

      .date-picker-multiple {
        .date {
          background: rgba(26, 179, 255, 0.10);
          color: rgba(255, 255, 255, 1);

          .el-date-editor {
            background: transparent;
          }
        }
      }

      .el-date-editor {
        background: transparent;
        border: 1px solid rgba(26, 179, 255, 0.4);
        &.el-input {
          border: none !important;

          .el-input__inner:focus {
            border: 1px solid rgba(1, 245, 255, 1);
          }
          .el-input__prefix {
            background: transparent !important;

            .el-input__icon.el-icon-date {
              background: transparent !important;
            }
          }
        }
      }

      .el-date-editor.el-date-editor--timerange {
        background: rgba(1, 245, 255, 0.10) !important;
        border: 1px solid rgba(1, 245, 255, 0.30) !important;

        .el-range-input, .el-range-separator {
          background: transparent !important;
        }
      }

      .title-box-style {
        color: rgba(255, 255, 255, 1) !important;
        background-color: rgba(9, 59, 107, 1) !important;
      }
      .measurementClass{
        background-color: rgba(1, 245, 255, 0.34);
        border: 1px solid rgba(1, 245, 255, 0.8);
        color: rgba(1, 245, 255, 1);
      }

      .el-header {
        margin: 0 0 0 10px;
        .search-form-parent {
          padding: 0 !important;
          background: transparent;
          border: none !important;
        }
      }
      .el-main .el-header{
        margin: 0;
      }
    }
  }

  /*el-textarea的公共样式*******************************************************************************************/
  .el-textarea {
    .el-textarea__inner {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(1, 245, 255, 0.1);
      border: 1px solid rgba(1, 245, 255, 0.3);
    }

    .el-textarea__inner[disabled=disabled] {
      color: rgb(115, 115, 115);
      background-color: rgba(1, 245, 255, 0.1);
      border-color: rgba(66, 142, 145, 0.3);
    }

    .el-textarea__inner:focus {
      border: 1px solid rgba(1, 245, 255, 1);
    }
  }

  /*附件的公共样式**************************************************************************************************/
  .pl-upload-container {
    .el-upload-dragger {
      background-color: transparent;
      //border: none !important;

      .el-icon-upload {
        color: #02BACB !important;
      }

      .el-upload__text {
        color: rgba(255, 255, 255, 1) !important;

        em {
          color: #02BACB !important;
        }
      }
    }

    .pl-flie-list .pl-file-list-item {
      border: 1px solid rgba(1, 245, 255, 0.30);

      .center-btn {
        .el-button.el-button--primary.is-round {
          color: rgba(255, 255, 255, 1);
          background: rgba(26, 179, 255, 1);
          border: 1px solid rgba(26, 179, 255, 1);

          &:hover, &:focus {
            background: rgba(26, 179, 255, 0.8);
            border: 1px solid rgba(26, 179, 255, 0.8);
          }
        }

        .el-button.el-button--info.is-round {
          color: #FFFFFF;
          background: rgba(127, 127, 127, 0.8);
          border: 1px solid rgba(127, 127, 127, 0.8);

          &:hover, &:focus {
            background: rgba(127, 127, 127, 0.5);
            border: 1px solid rgba(127, 127, 127, 0.5);
          }
        }
      }
    }
  }

  /*el-button的公共样式*********************************************************************************************/
  .el-button {
    font-family: PingFangSC, PingFangSC-Regular;
    color: #FFFFFF;
    border-radius: 3px;
    background: rgba(26, 179, 255, 0.18);
    border-color: rgba(26, 179, 255, 0.18);

    &:hover, &:focus {
      background: rgba(26, 179, 255, 0.32);
      border-color: rgba(26, 179, 255, 0.32);
    }

    &.is-round {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 1);

      &:hover, &:focus {
        background: rgba(255, 255, 255, 0.3);
      }
    }

    &.el-button--mini, &.el-button--mini.is-round {
      padding: 7px 15px;
      font-size: 12px;
    }

    &.el-button--small, &.el-button--small.is-round {
      padding: 8px 14px;
      font-size: 12px;
    }

    &.is-round {
      border-radius: 20px;
      padding: 12px 23px;
    }

    &.el-button--primary {
      background: rgba(26, 179, 255, 0.5);
      border-color: rgba(26, 179, 255, 0.5);

      &:hover, &:focus {
        background: rgba(26, 179, 255, 0.6);
        border-color: rgba(26, 179, 255, 0.6);
      }

      &.is-round {
        color: rgba(1, 245, 255, 1);
        background: rgba(1, 245, 255, 0.20);
        border: 1px solid rgba(1, 245, 255, 0.80);

        &:hover, &:focus {
          background: rgba(1, 245, 255, 0.34);
        }
      }
    }

    &.el-button--success {
      background: rgba(1, 245, 255, 0.5);
      border-color: rgba(1, 245, 255, 0.5);

      &:hover, &:focus {
        color: rgba(255, 255, 255, 1);
        background: rgba(1, 245, 255, 0.8);
        border-color: rgba(1, 245, 255, 0.8);
      }

      &.is-round {
        color: rgba(26, 179, 255, 1);
        background: rgba(26, 179, 255, 0.20);
        border: 1px solid rgba(26, 179, 255, 1);

        &:hover, &:focus {
          background: rgba(26, 179, 255, 0.34);
        }
      }
    }

    &.el-button--info {
      background: rgba(127, 127, 127, 0.5);
      border-color: rgba(127, 127, 127, 0.5);

      &:hover, &:focus {
        color: #FFFFFF;
        background: rgba(127, 127, 127, 0.8);
        border-color: rgba(127, 127, 127, 0.8);
      }

      &.is-round {
        color: rgba(190, 190, 190, 1);
        background: rgba(127, 127, 127, 0.20);
        border: 1px solid rgba(127, 127, 127, 1);

        &:hover, &:focus {
          background: rgba(127, 127, 127, 0.4);
        }
      }
    }

    &.el-button--warning {
      background: rgba(255, 185, 2, 0.73);
      border-color: rgba(255, 185, 2, 0.73);

      &:hover, &:focus {
        color: rgba(255, 255, 255, 1);
        background: rgba(255, 185, 2, 0.9);
        border-color: rgba(255, 185, 2, 0.9);
      }

      &.is-round {
        color: rgba(255, 185, 2, 1);
        background: rgba(255, 185, 2, 0.2);
        border: 1px solid rgba(255, 185, 2, 1);

        &:hover, &:focus {
          background: rgba(255, 185, 2, 0.34);
        }
      }
    }

    &.el-button--danger {
      background: rgba(255, 66, 66, 0.7);
      border-color: rgba(255, 66, 66, 0.7);

      &:hover, &:focus {
        color: rgba(255, 255, 255, 1);
        background: rgba(255, 66, 66, 0.9);
        border-color: rgba(255, 66, 66, 0.9);
      }

      &.is-round {
        color: rgba(255, 66, 66, 1);
        background: rgba(255, 66, 66, 0.2);
        border: 1px solid rgba(255, 66, 66, 1);

        &:hover, &:focus {
          background: rgba(255, 66, 66, 0.34);
        }
      }
    }
  }

  /*联系方的公共样式************************************************************************************************/
  div.pl-org-select {
    .pl-org-select-title {
      color: #FFFFFF;
      border-color: rgba(1, 245, 255, 0.3);
      background-color: rgba(1, 245, 255, 0.1);
    }

    button.el-button.el-button--info {
      color: rgba(1, 245, 255, 1);
      border-color: rgba(1, 245, 255, 0.6);
      background-color: rgba(1, 245, 255, 0.36);

      &:hover {
        background-color: rgba(1, 245, 255, 0.5);
      }
    }
  }

  /*el-card的公共样式***********************************************************************************************/
  .el-card {
    border-color: transparent;
    color: #FFFFFF;
    background: transparent;
  }

  /*el-form的公共样式***********************************************************************************************/
  .el-form {
    .el-form-item__label {
      //font-family: PingFangSC, PingFangSC-Regular;
      color: #FFFFFF;
    }

    .el-form-item__content {
      background: rgba(5, 20, 51, 0.94);

      div > .el-container {
        padding: 0 !important;
      }
    }
  }

  /*el-input的公共样式**********************************************************************************************/
  div.el-input {
    .el-input__inner {
      color: #ffffff;
      background: rgba(1, 245, 255, 0.10);
      border: 1px solid rgba(1, 245, 255, 0.30);
      border-radius: 3px;
    }

    .el-input__inner:focus {
      border: 1px solid rgba(1, 245, 255, 1);
    }

    input:disabled, input[disabled] {
      color: rgba(255, 255, 255, 1);
      -webkit-text-fill-color: rgba(255, 255, 255, 1);
    }

    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    input::-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    .el-input__prefix, .el-input__suffix {
      color: rgba(1, 245, 255, 1);

      .el-input__count {
        .el-input__count-inner {
          background-color: transparent;
        }
      }
    }
  }

  /*el-checkbox的公共样式*******************************************************************************************/
  .el-checkbox {
    color: rgba(255, 255, 255, 1);

    .el-checkbox__inner {
      border: 1px solid rgba(1, 245, 255, 1) !important;
      background-color: transparent !important;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: rgba(1, 245, 255, 1);
    }

    .el-checkbox__input.is-indeterminate .el-checkbox__inner {

      &::before {
        background-color: rgba(1, 245, 255, 1) !important;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {

      &::after {
        border-color: rgba(1, 245, 255, 1) !important;
      }
    }
  }

  /*el-radio的公共样式**********************************************************************************************/
  .el-radio {
    color: #FFFFFF;

    .el-radio__input.is-checked .el-radio__inner {
      border-color: #01f5ff;
      background-color: #01f5ff;
    }

    .el-radio__inner, .el-radio__inner:hover {
      border-color: #01f5ff
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #01f5ff;
    }
  }

  .el-radio-button {
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: rgba(1, 245, 255, 1) !important;
      border-color: rgba(1, 245, 255, 1) !important;
    }

    &.is-active {
      .el-radio-button__inner:hover {
        color: rgba(255, 255, 255, 1) !important;
      }
    }

    .el-radio-button__inner:hover {
      color: rgba(1, 245, 255, 1) !important;
    }
  }

  /*计数器的公共样式************************************************************************************************/
  .el-input-number{
    .el-input-number__decrease{
      border-right: rgba(1, 245, 255, 0.30);
    }
    .el-input-number__increase{
      border-left: rgba(1, 245, 255, 0.30);
    }
    .el-input-number__decrease,.el-input-number__increase{
      background: rgba(1,245,255,0.1);
      color: rgba(255, 255, 255, 1);
    }
  }

  /*追加意见的公共样式**********************************************************************************************/
  div.additional-comment-container-border {
    border: 1px solid rgba(1, 245, 255, 0.3);

    .bottom-border-1 {
      border-bottom: 1px solid rgba(1, 245, 255, 0.3);
    }

    .additional-comment-editor {
      .el-form {
        border-left: none;
        border-bottom: none;

        .el-form-item__content {
          background-color: transparent;

          textarea.editor {
            color: #FFFFFF;
            background-color: transparent;
          }
        }
      }

      .common-lang-button button{
        background: transparent;
        border: none;
      }
    }

    .additional-comment-shadow {
      box-shadow: none;
    }
  }
}