@party-red: #9B1E23;
@page-bg-white: #F9F9F9;
@party-white: #FFFFFF;
@font-color: #333333;
@party-pink: pink;
@party-border-color: #EEEEEE;
@party-black: #000000;
@party-bg-gray: #F8F8F8;
@party-btn-color: #AC9374;
@party-table-header-color: #FDFBF8;
@party-page-border-color: #DDDDDD;
@party-check-bg-color: #F5F5F5;

.f14 {
  font-size: 14px;
}

.f16 {
  font-size: 14px;
}

.f18 {
  font-size: 18px;
}

.f24 {
  font-size: 24px;
}

.f0 {
  font-size: 0px;
}

.inline-block {
  display: inline-block;
}

.height100 {
  height: 100%;
}

@media screen and (max-width:1600px) {
  .search-container {
    .el-input {
      width: 180px;
    }

    .btn-group {
      .el-button {
        width: 80px;
      }
    }
  }

  .page-tips {
    width: 365px;
  }
}

@media (min-width:1601px) and (max-width:1800px) {
  .search-container {
    .el-input {
      width: 220px;
    }

    .btn-group {
      .el-button {
        width: 96px;
      }
    }
  }

  .page-tips {
    width: 460px;
  }
}

@media (min-width:1801px) {
  .search-container {
    .el-input {
      width: 280px;
    }

    .btn-group {
      .el-button {
        width: 128px;
      }
    }
  }

  .page-tips {
    width: 480px;
  }
}

.search-container {
  background: @party-white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px 24px;
  height: 80px;
  display: flex;
  justify-content: space-between;

  .el-form {
    margin-bottom: 0;

    .el-input {
      .el-input__inner {
        border-radius: 22px;
        background-color: @party-bg-gray;
        border-color: @party-border-color;
      }
    }

    .el-range-editor.el-input__inner {
      width: 280px;
      border-radius: 22px;
      background-color: @party-bg-gray;

      .el-range-separator {
        width: 20px;
        padding: 0 2px;
      }

      .el-range-input {
        background-color: @party-bg-gray;
      }
    }

    .el-input__icon {
      width: 40px;
      font-size: 20px;
      color: @party-btn-color;
    }

    .btn-group {
      padding-left: 15px;

      .el-button {
        height: 40px;
      }
    }
  }

  .page-tip {
    display: flex;
    font-size: 14px;
    color: @font-color;

    .page-tip-title {
      font-weight: bold;
      padding-right: 10px;
    }
  }
}

.table-content {
  height: calc(100% - 100px);
  background: @party-white;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.3);
  border-radius: 8px;
  padding: 20px 40px 0 40px;

  .btn-group {
    text-align: right;
    margin-bottom: 12px;

    .el-button {
      min-width: 128px;
    }
  }
}

.btn-group {
  .el-button {
    height: 36px;
    padding: 0;
    border-radius: 28px;

    span {
      font-size: 16px;
    }
  }

  .el-button--primary {
    background-color: @party-btn-color;
    border-color: @party-btn-color;
    color: @party-white ;
  }

  .el-button--default {
    background: rgba(172, 147, 116, 0.10);
    border: 1px solid @party-btn-color;
    color: @party-btn-color;
  }
}

// 系统form 表单样式
.party-form {
  .el-input__icon {
    width: 40px;
    font-size: 20px;
    color: @party-btn-color;
  }

  .el-date-editor {
    .el-range-separator {
      width: 20px;
      padding: 0 2px;
    }
  }
  .el-input {
    width: 280px;
    .el-input__inner {
      border-radius: 22px;
      background-color: @party-bg-gray;
      border: 1px solid @party-border-color;
    }
  }

  .el-textarea .el-textarea__inner {
    background-color: @party-bg-gray;
    border-radius: 8px;
  }

  .el-range-editor.el-input__inner {
    width: 280px;
    border-radius: 22px;
  }

  .mt16 {
    margin-top: 16px;
  }

  .el-radio-group {
    .el-radio__inner {
      width: 24px;
      height: 24px;
      border-color: @party-border-color;
    }

    .el-radio__label {
      font-size: 16px;
    }

    .el-radio.is-checked {
      .el-radio__input.is-checked {
        .el-radio__inner {
          background-color: transparent;
          border-color: @party-border-color;

          &:after {
            width: 10px;
            height: 10px;
            background-color: @party-btn-color;
          }
        }
      }

      .el-radio__label {
        color: @font-color;
      }
    }

  }

  .el-checkbox-group {
    .el-checkbox {
      margin-right: 25px;

      .el-checkbox__inner {
        width: 22px;
        height: 22px;

        &:hover {
          border-color: @party-border-color;
        }
      }

      .el-checkbox__label {
        color: @font-color
      }

      &+.el-checkbox {
        margin-left: 0;
      }

      &.is-checked {
        .el-checkbox__inner {
          border-color: @party-border-color;
          background-color: @party-check-bg-color;

          &:after {
            border: 2px solid #AC9374;
            border-left: 0;
            border-top: 0;
            height: 11px;
            left: 7px;
            width: 5px;
          }
        }

        .el-checkbox__label {
          color: @font-color
        }
      }
    }
  }
}

// 适用于修改密码  app 界面定义样式
.page-form-box {
  background: @party-white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  height: 100%;

  .page-form-box-header {
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-bottom: 1px solid @party-border-color;
    font-size: 20px;
    color: @font-color;
    text-align: center;
    font-weight: bold;
  }

  .page-form-box-content {
    height: calc(100% - 148px);
    padding: 20px;
  }

  .page-form-box-footer {
    height: 84px;
    line-height: 84px;
    text-align: center;
    border-top: 1px solid @party-border-color;

    .el-button {
      width: 160px;
      height: 40px;
    }
  }

}

.imgSize {
  width: 160px;
  height: 100px;
}

.iconImg {
  height: 32px;
  width: 32px;
  margin-right: 8px;
}

.w50 {
  width: 50%;
}

.w100 {
  width: 100%;
}

.selectH100 {
  height: 100px;
  overflow: auto;
}

// 内容、审核详情页
.info {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .info-header {
    font-size: 20px;
    padding: 20px;
    height: 68px;
    width: 100%;
    vertical-align: middle;
    text-align: center;

    border-bottom: 2px solid #eee;
  }

  .info-wrapper {
    width: 640px;
    margin: 0 auto;
    background: #fff;

    .pageTips {
      height: 72px;
      padding: 16px;
      background: #F7F5F2;
      border-radius: 8px;
      margin: 10px 0;
    }

    .el-collapse-item__header.is-active {
      border-bottom-color: #eeeeee;
    }
  }

  .info-container {
    width: 100%;
    height: calc(100% - 156px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0;
  }

  .info-footer {
    height: 88px;
    border-top: 2px solid #eee;
    padding: 20px;
    text-align: center;

    .el-button {
      width: 160px;
      height: 40px;
    }
  }
}

// 适用于统计详情样式
.overview-detail {
  .ecahrts-panel-box {
    height: calc(50% + 20px);
  }

  .rank-panel-box {
    height: calc(50% - 40px);
    margin-top: 20px;
  }

  .ecahrts-panel-box,
  .rank-panel-box {
    background: @party-white;
    box-shadow: 0 4px 8px 0 rgba(221, 221, 221, 0.40);
    border-radius: 8px;
  }

  .panel-box-header {
    height: 64px;
    line-height: 64px;
    border-bottom: 1px solid @party-border-color;
    padding: 0 24px;

    .title {
      font-weight: bold;
      font-size: 20px;
    }

    .tip {
      float: right;
      color: @font-color;

      .tip-title {
        font-weight: bold;
        padding-right: 10px;
      }
    }

    .el-range-editor.el-input__inner {
      width: 280px;
      border-radius: 22px;
      background-color: @party-bg-gray;
      margin-left: 40px;
      padding-left: 15px;

      .el-range-input {
        background-color: @party-bg-gray;
      }

      .el-range-separator {
        width: 20px;
        padding: 0 2px;
      }

      .el-icon-date {
        color: @party-btn-color;
        font-size: 18px;
      }
    }
  }

  .panel-box-content {
    height: calc(100% - 64px);
    overflow: hidden;
  }

  .rank-box {
    width: 50%;

    &.left {
      padding-right: 10px;
    }

    &.right {
      padding-left: 10px;
    }
  }
}

.party-icon-20 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}

.party-icon-24 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-add {
  background-image: url("~@/assets/icons/add.png");
}

.icon-import {
  background-image: url("~@/assets/icons/import.png");
}

.icon-detail {
  background-image: url("~@/assets/icons/detail.png");
}

.icon-edit {
  background-image: url("~@/assets/icons/edit.png");
}

.icon-reset {
  background-image: url("~@/assets/icons/reset.png");
}

.icon-enable {
  background-image: url("~@/assets/icons/enable.png");
}

.icon-disable {
  background-image: url("~@/assets/icons/disable.png");
}
.icon-up{
  background-image: url("~@/assets/icons/up.png");
}
.icon-down{
  background-image: url("~@/assets/icons/down.png");
}
.icon-video{
  background-image: url("~@/assets/icons/video.png");
}
.icon-board{
  background-image: url("~@/assets/icons/board.png");
}

.icon-del {
  background-image: url("~@/assets/icons/del.png");
}

.icon-org {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("~@/assets/icons/org.png");
  margin-right: 8px;
}

// 组织树结构样式
.org-tree {

  // expand 三角icon
  .el-tree-node__expand-icon {
    position: absolute;
    right: 10px;
    top: 14px;
    color: #000000;
    font-size: 16px;

    &.is-leaf {
      color: transparent;
    }
  }

  .el-tree-node {
    background-color: @party-white;

    &.is-current {
      >.el-tree-node__content {
        .custom-tree-node {
          background-color: @party-border-color;
        }
      }

    }
  }

  .el-tree-node__content {
    height: auto;
    position: relative;
    background-color: transparent !important;

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

  div[class*="tree-node-level"] {
    width: 100%;
    color: @font-color;
    border-radius: 5px;
  }

  .tree-node-level1,
  .tree-node-level2 {
    span {
      font-size: 16px;
    }

  }

  .tree-node-level3 {
    span {
      font-size: 14px;
    }
  }

  .tree-node-level1 {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid @party-border-color;
    padding-left: 5px;
  }

  .tree-node-level2,
  .tree-node-level3 {
    height: 40px;
    line-height: 40px;
    margin: 5px 0;
    border-radius: 20px;
    padding-left: 10px;
  }

  .tree-node-level2:hover {
    background-color: @party-table-header-color;
  }

  .tree-node-level3:hover {
    background-color: @party-border-color;
  }
}