// 卡片
.card-page {

  background-color: #222F3D;

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #40486a;
    border-color: #40486a;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #ffffff;
  }

  .el-descriptions {
    .is-bordered .el-descriptions-item__cell {
      border: 1px solid #40486a;
    }
  }

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

  .el-table {
    // 新页面中el-table的样式

    border-color: #40486a;

    .el-table__expanded-cell {
      background-color: transparent;
    }

    th {
      border-right-color: #40486a;
      border-bottom-color: #40486a !important;

      .cell {
        font-size: 14px;
        color: #c6d3ec;
        font-weight: bold;
        // font-size: 18px;
      }
    }

    td {
      border-right-color: #40486a;
      border-bottom-color: #40486a;

      .cell,
      .cell div,
      .cell span {
        // font-size: 17px;
        // color: #c6d3ec;
        // color:#000
      }
    }

    .el-table__header tr {
      background-color: #101d29 !important; // 添加这一行来修改header的背景颜色
    }

    .el-table__row {
      background-color: #172533 !important;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #202f3e !important;
    }
  }

  .el-select,
  .el-input {
    .el-input__inner {
      border-color: #40486a; // 修改el-select边框颜色
      font-size: 14px;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    color: #fff;
}

  .el-textarea {
    .el-textarea__inner {
      border-color: #40486a; // 修改el-select边框颜色
      font-size: 14px;
    }
  }

  .el-date-editor {
    border: 1px solid #40486a;

    .el-range-input {
      font-size: 14px; // 修改字体大小
      background: none;
    }
  }


  .el-form {
    .el-form-item__label {
      // font-size: 18px;
      color: #e7f5f6;
    }

    // .el-button--mini {

    //   font-size: 18px;
    // }

    // .el-select,
    // .el-input {
    //   .el-input__inner {
    //     font-size: 18px;
    //   }
    // }

    // .el-textarea {
    //   .el-textarea__inner {
    //     font-size: 18px;
    //   }
    // }

    // .el-date-editor {

    //   .el-range-input {
    //     font-size: 18px; // 修改字体大小
    //   }
    // }
  }




  .el-button:hover {
    background: linear-gradient(0deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1)),
      #247382;
  }

  .el-button:focus {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
      #247382;
  }

  .el-button:disabled {
    background: #247382;
    opacity: 0.4;
  }

  .el-button {
    background-color: #247382; // 修改按钮的背景颜色
    border: none;
  }

  .el-pagination {

    .btn-prev:disabled,
    .btn-next:disabled {
      color: #c6d3ec;
      opacity: 0.3;
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      background-color: transparent;
      color: #40e5f0;
    }

    .el-pager li:not(.disabled).active {
      background-color: transparent;
      color: #40e5f0;
    }

    .el-pager li:not(.disabled):hover {
      color: #40e5f0;
    }
  }

  .el-tree {
    // background: #202F3E;
    //   /* 分割线 */
    // border: 1px solid #40486A;

    .el-tree-node__content {
      height: 36px;

      .el-tree-node__label {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #C6D3EC;
      }

    }

    .el-tree-node__content:hover {
      background: rgba(64, 229, 240, 0.15);
      border-radius: 2px;
    }

    .el-tree-node:focus>.el-tree-node__content {
      background: rgba(64, 229, 240, 0.15);
      border-radius: 2px;
    }

    .el-tree-node.is-current>.el-tree-node__content {
      background: rgba(64, 229, 240, 0.15);
      border-radius: 2px;
      border-right: #40E5F0 3px solid;
    }
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(64, 229, 240, 0.15);
    box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  /* 6,边角，两个滚动条交汇处 */
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

.card-select-dropdown {
  background-color: #202f3e !important; // 修改弹窗的背景颜色
  border-color: #40486a !important; // 修改弹窗的边框颜色

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #172533;
  }
}

/*日期选择器弹窗*/
.card-date-editor {
  border: 1px solid #40486a;
  background-color: #202f3e;

  .el-picker-panel__sidebar {
    background-color: #202f3e;
    border-right: 1px solid #40486a;

    .el-picker-panel__shortcut {
      color: #fff;
    }

    .el-picker-panel__shortcut:hover {
      color: #62d0ff;
    }
  }

  .el-picker-panel,
  .el-select-dropdown,
  .el-select .el-input__inner:focus,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid #40486a;
  }

  /* 年选择器样式 */
  .el-year-table td .cell:hover {
    color: #62d0ff;
  }

  .el-year-table td.today .cell {
    color: #62d0ff;
  }

  .el-date-picker__header--bordered {
    border-bottom: solid 1px #40486a;
  }

  .el-year-table td.current:not(.disabled) .cell {
    color: #62d0ff;
  }

  .el-date-table td.disabled div,
  .el-date-table td.disabled div span {
    color: rgba(255, 255, 255, 0.3); // 修改禁止点击字体的颜色
    background-color: transparent;
  }

  .normal.disabled div {
    background-color: transparent !important;
  }

  .available.in-range.start-date div span,
  .available.in-range.end-date div span {
    background: #247382;
    border-radius: 50%;
    color: #fff;
  }

  .available.in-range div,
  .available.in-range div:hover {
    background: rgba(64, 229, 240, 0.8);
  }

  .el-date-table td.today span {
    color: #62d0ff;
    font-weight: bold;
  }

  .el-picker-panel__icon-btn:hover {
    color: #40e5f0;
  }

  .el-date-range-picker__content.is-left {
    border-right: 1px solid #40486a;
  }

  .el-date-table th {
    border-bottom: solid 1px #40486a;
  }





  /* 年选择器样式 */
  .el-year-table td .cell:hover {
    color: #62d0ff;
  }

  .el-year-table td.today .cell {
    color: #62d0ff;
  }

  .el-date-picker__header--bordered {
    border-bottom: solid 1px #40486a;
  }

  .el-year-table td.current:not(.disabled) .cell {
    color: #62d0ff;
  }

  .el-date-table td.disabled div,
  .el-date-table td.disabled div span {
    color: rgba(255, 255, 255, 0.3); // 修改禁止点击字体的颜色
    background-color: transparent;
  }

  .normal.disabled div {
    background-color: transparent !important;
  }

  .available.in-range.start-date div span,
  .available.in-range.end-date div span {
    background: #247382;
    border-radius: 50%;
    color: #fff;
  }

  .available.in-range div,
  .available.in-range div:hover {
    background: rgba(64, 229, 240, 0.8);
  }

  .el-year-table {
    .available {
      padding: 13px 3px;
    }
  }

  /*月选择器样式*/
  .el-month-table {
    .current {
      .cell {
        color: #62D0FF;
      }
    }

    td.current:not(.disabled) .cell {
      color: #62D0FF;
    }

    td.today .cell {
      color: #62D0FF;
    }

    td .cell:hover {
      color: #62D0FF;
    }

    td {
      padding: 6px 0px;
    }
  }

  /*日期选择器*/
  &.el-date-picker {
    .el-date-picker__header {
      margin: 0 10px;
      margin-top: 10px;
    }

    .el-picker-panel__content {
      margin-top: 0px;
      margin-bottom: 10px;
    }
  }

  .el-date-table {
    td {
      width: 25px;
      height: 20px;
      padding: 2px 0;

      div {
        height: 20px;
        padding: 1px 0;
      }

      span {
        height: 18px;
        width: 18px;
        line-height: 18px;
      }
    }

    td.start-date div {
      margin-left: 9px;
    }

    td.end-date div {
      margin-right: 9px;
    }
  }

}

// 卡片内容文字颜色--主要
.card-content-text-color {
  color: #c6d3ec;
}

.card-dialog-height-auto {
  height: auto;
}

.card-dialog {
  .el-dialog__header {
    background-color: #222F3D;
    color: #fff;
    border-bottom: #40486a 1px solid;
    height: 63px;
    padding: 17px 24px;


    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    .el-dialog__title {
      color: #fff;
      font-size: 20px;
    }
  }

  .el-dialog__body {
    background-color: #222F3D;
    padding: 24px;
    flex: 1;
    // 添加后，垂直滚动才不至于超出
    height: 0;
  }

  .el-dialog__footer {
    border-top: #40486a 1px solid;
    background-color: #222F3D;
    height: 72px;
    padding: 17px 24px;
    color: #fff;

    .card-dialog-cancel-btn {
      background-color: rgba(64, 72, 106, 0.1) !important;
      background-image: url('../card_btn_border.png');
      background-repeat: no-repeat;
      /* 防止背景图像重复 */
      background-position: center center;
      /* 将背景图像居中 */
      height: 41px;
      width: 77px;

      &:hover {
        background-image: url('../card_btn_border.png');
        background-color: rgba(197, 201, 219, 0.2) !important;
      }

      &:focus {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 72, 106, 0.05) !important;
      }

      &:disabled {
        background-image: url('../card_btn_border.png');
        background-color: rgba(68, 68, 68, 0.1) !important;
      }
    }

    .card-dialog-sure-btn {
      background-color: rgba(64, 229, 240, 0.1) !important;
      background-image: url('../card_btn_border.png');
      background-repeat: no-repeat;
      /* 防止背景图像重复 */
      background-position: center center;
      /* 将背景图像居中 */
      height: 41px;
      width: 77px;

      &:hover {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 229, 240, 0.2) !important;
      }

      &:focus {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 124, 240, 0.1) !important;
      }

      &:disabled {
        background-image: url('../card_btn_border.png');
        background-color: rgba(68, 68, 68, 0.1) !important;
      }
    }
  }
}

.card-message-box {
  border: none;
  padding-bottom: 0;

  .el-message-box__header {
    background-color: #222F3D;
    color: #fff;
    border-bottom: #40486a 1px solid;
    height: 63px;
    padding: 17px 24px;


    .el-message-box__headerbtn .el-message-box__close {
      color: #fff;
    }

    .el-message-box__title {
      color: #fff;
      font-size: 20px;
    }
  }

  .el-message-box__content {
    background-color: #222F3D;
    padding: 24px;
  }

  .el-message-box__btns {
    border-top: #40486a 1px solid;
    background-color: #222F3D;
    height: 72px;
    padding: 17px 24px;
    color: #fff;

    .el-button {
      background-color: rgba(64, 72, 106, 0.1) !important;
      background-image: url('../card_btn_border.png');
      background-repeat: no-repeat;
      /* 防止背景图像重复 */
      background-position: center center;
      /* 将背景图像居中 */
      height: 41px;
      width: 77px;

      &:hover {
        background-image: url('../card_btn_border.png');
        background-color: rgba(197, 201, 219, 0.2) !important;
      }

      &:focus {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 72, 106, 0.05) !important;
      }

      &:disabled {
        background-image: url('../card_btn_border.png');
        background-color: rgba(68, 68, 68, 0.1) !important;
      }
    }

    .el-button--primary {
      background-color: rgba(64, 229, 240, 0.1) !important;
      background-image: url('../card_btn_border.png');
      background-repeat: no-repeat;
      /* 防止背景图像重复 */
      background-position: center center;
      /* 将背景图像居中 */
      height: 41px;
      width: 77px;

      &:hover {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 229, 240, 0.2) !important;
      }

      &:focus {
        background-image: url('../card_btn_border.png');
        background-color: rgba(64, 124, 240, 0.1) !important;
      }

      &:disabled {
        background-image: url('../card_btn_border.png');
        background-color: rgba(68, 68, 68, 0.1) !important;
      }
    }


  }
}

.el-notification__title {
  color: #fff;
}

.el-notification {
  background-color: #40486a;
  border-color: #005d6b;
}


.vue-treeselect {
  .vue-treeselect__menu {
    background-color: #202f3e;
    border-color: #40486a;
    border-top-color: transparent;
  }
  .vue-treeselect__option--highlight {
    background: #172533;
  }
}