$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)

.el-skeleton {
  width: 400px;
  height: 956px;
  background-color: rgba(255, 255, 255, 0.3);
  &.is-animated .el-skeleton__item {
    background-image: linear-gradient(
      90deg,
      rgba(0, 255, 255, 0.5) 25%,
      #fff,
      37%,
      rgba(0, 255, 255, 0.5) 63%
    );
    animation: el-skeleton-loading 1.4s ease infinite;
  }
}
.skeleton-box {
  width: 100%;
  height: 100%;
}
// 日期时间选择器下拉框
.el-picker-panel1 {
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    color: #12407f;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    // 左侧 侧边栏
    .el-picker-panel__sidebar {
      background-color: #12407f;
      button {
        color: #fff;
        &:hover {
          color: $pry;
        }
      }
    }
    // 右侧 主体
    .el-picker-panel__body {
      background-color: #12407f;
      // 头部
      .el-date-range-picker__time-header {
        // 输入框
        .el-date-range-picker__time-picker-wrap {
          .el-input__inner {
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: $pry;
            font-size: 14px;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        // 图标
        .el-icon-arrow-right {
          color: #fff;
        }
        // 时间选择
        .el-time-panel {
          background-color: #12407f;
          border-color: #fff;

          .el-time-panel__content {
            div {
              box-sizing: content-box;
            }
            li {
              color: #fff;
              &:hover {
                background-color: #1e5197;
              }
              &.active {
                background-color: transparent;
                color: $pry;
              }
            }
          }
          .el-time-panel__footer {
            button:nth-child(1) {
              color: #fff;
            }
            button:nth-child(2) {
              color: $pry;
            }
          }
        }
      }
      // 主体
      .el-picker-panel__content {
        // 头部
        .el-date-range-picker__header {
          div {
            color: #fff;
          }
          button {
            color: #fff;
            &:hover {
              color: $pry;
            }
          }
        }
        table {
          th {
            color: #fff;
          }
          .available {
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
  // 尾部
  .el-picker-panel__footer {
    background-color: #12407f;
    .el-button:nth-child(1) {
      color: $pry;
      &:hover {
        color: rgba(0, 255, 255, 0.8);
      }
    }
    .el-button:nth-child(2) {
      background-color: rgba(39, 146, 160, 0.2);
      border-color: #2792a0;
      color: #fff;
      &:hover {
        border-color: $pry;
        color: $pry;
      }
      &.is-disabled {
        border-color: rgba(39, 146, 160, 0.2);
        color: #606266;
      }
    }
  }
}

// 雨量自定义日期时间选择器
.el-picker-panel3 {
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    color: #12407f;
    border-bottom-color: #12407f !important;
    border-top-color: #12407f !important;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    // 右侧 主体
    .el-picker-panel__body {
      background-color: #12407f;
      // 头部
      .el-date-picker__time-header {
        // 输入框
        .el-date-picker__editor-wrap {
          .el-input__inner {
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: $pry;
            font-size: 14px;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        // 图标
        .el-icon-arrow-right {
          color: #fff;
        }
        // 时间选择
        .el-time-panel {
          background-color: #12407f;
          border-color: #fff;

          .el-time-panel__content {
            div {
              box-sizing: content-box;
            }
            li {
              color: #fff;
              &:hover {
                background-color: #1e5197;
              }
              &.active {
                background-color: transparent;
                color: $pry;
              }
            }
          }
          .el-time-panel__footer {
            button:nth-child(1) {
              color: #fff;
            }
            button:nth-child(2) {
              color: $pry;
            }
          }
        }
      }
      // 头部
      .el-date-picker__header {
        div {
          color: #fff;
        }
        button {
          color: #fff;
          &:hover {
            color: $pry;
          }
        }
        .el-date-picker__header-label {
          color: #fff;
        }
      }
      // 主体
      .el-picker-panel__content {
        table {
          th {
            color: #fff;
          }
          .available {
            &.current span {
              background-color: #37ccc4;
            }
            &.current.today span {
              color: #fff !important;
            }
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
  // 尾部
  .el-picker-panel__footer {
    background-color: #12407f;
    .el-button:nth-child(1) {
      color: $pry;
      &:hover {
        color: rgba(0, 255, 255, 0.8);
      }
    }
    .el-button:nth-child(2) {
      background-color: rgba(39, 146, 160, 0.2);
      border-color: #2792a0;
      color: #fff;
      &:hover {
        border-color: $pry;
        color: $pry;
      }
      &.is-disabled {
        border-color: rgba(39, 146, 160, 0.2);
        color: #606266;
      }
    }
  }
}

// 历史雨晴分析 日期选择下拉框
.el-picker-panel2 {
  background-color: #12407f;
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    color: #12407f;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    .el-picker-panel__body {
      .el-picker-panel__content {
        // 头部
        .el-date-range-picker__header {
          div {
            color: #fff;
          }
          button {
            color: #fff;
            &:hover {
              color: $pry;
            }
          }
        }
        table {
          th {
            color: #fff;
          }
          .available {
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
}
// 提示气泡框
.el-popover {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 375px;
  padding: 0;
  padding-bottom: 20px;
  background-color: black;
  border: 0;
  .el-popover__title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #60fff6;
    color: #e8eff6;
    font-size: 18px;
    padding-left: 20px;
    line-height: 40px;
  }
  .txt {
    width: 100%;
    padding: 0 20px;
    line-height: 24px;
    color: #e8eff6;
    font-size: 14px;
  }
  .popper__arrow {
    &::after {
      border-top-color: #000 !important;
      border-bottom-color: #000 !important;
    }
  }
}

// 右上角下拉列表
.el-dropdown-menu {
  width: 160px;
  background-color: rgba(34, 102, 151, 0.8);
  border: 0;
  padding: 5px;
  .el-dropdown-menu__item {
    color: #fff;
    border-radius: 2px;
    &:hover {
      background-color: rgba(57, 160, 187);
      color: #fff;
    }
  }
  .popper__arrow {
    border-bottom-color: rgba(34, 102, 151, 0.8) !important;
    border-top-color: rgba(34, 102, 151, 0.8) !important;
    &::after {
      top: 0 !important;
      border-bottom-color: rgba(34, 102, 151, 0.8) !important;
      border-top-color: rgba(34, 102, 151, 0.8) !important;
    }
  }
}
.tf-body {
  .el-dropdown-menu {
    width: 110px;
    background-color: #1f6681;
    border: 0;
    padding: 5px;
    .el-dropdown-menu__item {
      color: #fff;
      border-radius: 2px;
      &:hover {
        background-color: #39a0bb;
        color: #fff;
      }
      // .popper__arrow::after {
      //   border-top-color: #1f6681 !important;
      //   border-bottom-color: #1f6681 !important;
      // }
    }
  }
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.3);
  .el-loading-spinner .path {
    stroke: $pry;
  }
}

// 雨量自定义
// 日期时间选择器下拉框
.el-picker-panel5 {
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    color: #12407f;
    border-bottom-color: #12407f !important;
    border-top-color: #12407f !important;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    // 左侧 侧边栏
    .el-picker-panel__sidebar {
      background-color: #12407f;
      button {
        color: #fff;
        &:hover {
          color: $pry;
        }
      }
    }
    // 右侧 主体
    .el-picker-panel__body {
      background-color: #12407f;
      // 头部
      .el-date-range-picker__time-header {
        // 输入框
        .el-date-range-picker__time-picker-wrap {
          .el-input__inner {
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: $pry;
            font-size: 14px;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        // 图标
        .el-icon-arrow-right {
          color: #fff;
        }
        // 时间选择
        .el-time-panel {
          background-color: #12407f;
          border-color: #fff;
          .el-time-panel__content {
            div {
              box-sizing: content-box;
            }
            li {
              color: #fff;
              &:hover {
                background-color: #1e5197;
              }
              &.active {
                background-color: transparent;
                color: $pry;
              }
            }
          }
          .el-time-panel__footer {
            button:nth-child(1) {
              color: #fff;
            }
            button:nth-child(2) {
              color: $pry;
            }
          }
        }
      }
      // 主体
      .el-picker-panel__content {
        // 头部
        .el-date-range-picker__header {
          div {
            color: #fff;
          }
          button {
            color: #fff;
            &:hover {
              color: $pry;
            }
          }
        }
        table {
          th {
            color: #fff;
          }
          .available {
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
  // 尾部
  .el-picker-panel__footer {
    background-color: #12407f;
    .el-button:nth-child(1) {
      color: $pry;
      &:hover {
        color: rgba(0, 255, 255, 0.8);
      }
    }
    .el-button:nth-child(2) {
      background-color: rgba(39, 146, 160, 0.2);
      border-color: #2792a0;
      color: #fff;
      &:hover {
        border-color: $pry;
        color: $pry;
      }
      &.is-disabled {
        border-color: rgba(39, 146, 160, 0.2);
        color: #606266;
      }
    }
  }
}

// 运维-日常巡检新增表单
// 日期时间范围选择器下拉框
.date-frame-panel1 {
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    border-bottom-color: #12407f !important;
    border-top-color: #12407f !important;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    // 左侧 侧边栏
    .el-picker-panel__sidebar {
      background-color: #12407f;
      button {
        color: #fff;
        &:hover {
          color: $pry;
        }
      }
    }
    // 右侧 主体
    .el-picker-panel__body {
      background-color: #12407f;
      // 头部
      .el-date-range-picker__time-header {
        // 输入框
        .el-date-range-picker__time-picker-wrap {
          .el-input__inner {
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: $pry;
            font-size: 14px;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        // 图标
        .el-icon-arrow-right {
          color: #fff;
        }
        // 时间选择
        .el-time-panel {
          background-color: #12407f;
          border-color: #fff;
          .el-time-panel__content {
            div {
              box-sizing: content-box;
            }
            li {
              color: #fff;
              &:hover {
                background-color: #1e5197;
              }
              &.active {
                background-color: transparent;
                color: $pry;
              }
            }
          }
          .el-time-panel__footer {
            button:nth-child(1) {
              color: #fff;
            }
            button:nth-child(2) {
              color: $pry;
            }
          }
        }
      }
      // 主体
      .el-picker-panel__content {
        // 头部
        .el-date-range-picker__header {
          div {
            color: #fff;
          }
          button {
            color: #fff;
            &:hover {
              color: $pry;
            }
          }
        }
        table {
          th {
            color: #fff;
          }
          .available {
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
  // 尾部
  .el-picker-panel__footer {
    background-color: #12407f;
    .el-button:nth-child(1) {
      color: $pry;
      &:hover {
        color: rgba(0, 255, 255, 0.8);
      }
    }
    .el-button:nth-child(2) {
      background-color: rgba(39, 146, 160, 0.2);
      border-color: #2792a0;
      color: #fff;
      &:hover {
        border-color: $pry;
        color: $pry;
      }
      &.is-disabled {
        border-color: rgba(39, 146, 160, 0.2);
        color: #606266;
      }
    }
  }
}
// 日期时间选择器下拉框
.date-time-panel1 {
  border-color: #12407f;
  // 三角形
  .popper__arrow {
    color: #12407f;
    border-bottom-color: #12407f !important;
    border-top-color: #12407f !important;
    &::after {
      border-bottom-color: #12407f !important;
      border-top-color: #12407f !important;
    }
  }
  // 主体
  .el-picker-panel__body-wrapper {
    // 左侧 侧边栏
    .el-picker-panel__sidebar {
      background-color: #12407f;
      button {
        color: #fff;
        &:hover {
          color: $pry;
        }
      }
    }
    // 右侧 主体
    .el-picker-panel__body {
      background-color: #12407f;
      // 头部
      .el-date-picker__time-header {
        // 输入框
        .el-date-picker__editor-wrap {
          .el-input__inner {
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: $pry;
            font-size: 14px;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        // 图标
        .el-icon-arrow-right {
          color: #fff;
        }
        // 时间选择
        .el-time-panel {
          background-color: #12407f;
          border-color: #fff;

          .el-time-panel__content {
            div {
              box-sizing: content-box;
            }
            li {
              color: #fff;
              &:hover {
                background-color: #1e5197;
              }
              &.active {
                background-color: transparent;
                color: $pry;
              }
            }
          }
          .el-time-panel__footer {
            button:nth-child(1) {
              color: #fff;
            }
            button:nth-child(2) {
              color: $pry;
            }
          }
        }
      }
      // 头部
      .el-date-picker__header {
        div {
          color: #fff;
        }
        button {
          color: #fff;
          &:hover {
            color: $pry;
          }
        }
        .el-date-picker__header-label {
          color: #fff;
        }
      }
      // 主体
      .el-picker-panel__content {
        table {
          th {
            color: #fff;
          }
          .available {
            &.current span {
              background-color: #37ccc4;
            }
            &.current.today span {
              color: #fff !important;
            }
            span {
              color: #fff;
              &:hover {
                color: $pry;
              }
            }
            &.today span {
              color: $pry !important;
            }
            &.start-date span,
            &.end-date span {
              color: #fff !important;
              background-color: #37ccc4;
            }
            &.in-range div {
              background-color: #1e5197;
            }
          }
          .prev-month,
          .next-month {
            color: #606266;
          }
        }
      }
    }
  }
  // 尾部
  .el-picker-panel__footer {
    background-color: #12407f;
    .el-button:nth-child(1) {
      color: $pry;
      &:hover {
        color: rgba(0, 255, 255, 0.8);
      }
    }
    .el-button:nth-child(2) {
      background-color: rgba(39, 146, 160, 0.2);
      border-color: #2792a0;
      color: #fff;
      &:hover {
        border-color: $pry;
        color: $pry;
      }
      &.is-disabled {
        border-color: rgba(39, 146, 160, 0.2);
        color: #606266;
      }
    }
  }
}

.pagination-select {
  background-color: #226697;
  border-color: #226697;
  // 弹出框的数据列表
  .el-select-dropdown__list {
    padding: 5px;
    // 弹出框的单条数据
    .el-select-dropdown__item {
      display: flex;
      align-items: center;
      height: 30px;
      margin-bottom: 4px;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
    }
  }
  // 经过选项时选项的背景色
  .el-select-dropdown__item.hover {
    background-color: #39a0bb;
  }
  // 已选中的选项
  &.is-multiple .el-select-dropdown__item.selected {
    background-color: #39a0bb;
    color: #fff;
  }
  // 弹出框三角形
  .popper__arrow {
    border-bottom-color: #226697 !important;
    border-top-color: #226697 !important;
    &::after {
      border-bottom-color: #226697 !important;
      border-top-color: #226697 !important;
    }
  }
}
