// dark
$midDark: #666;
$dark: #555;
$gray: #999;
$midgray: #a38888;

// main
$mainColor: rgba(67, 80, 136, 1);
$purple: rgba(151, 94, 229, 1);
$blue: rgba(61, 160, 255, 1);
$cyan: rgba(48, 203, 203, 1);
$green: rgba(75, 203, 116, 1);
$yellow: rgba(250, 212, 68, 1);
$lightGray: rgba(217, 217, 217, 1);
// bold
$darkBlue: #3589d8;

// struct
$boxShadow: #d7dae3;
$borderColor: rgba(233, 233, 233, 1);
$lightBackground: rgba(250, 250, 250, 1);

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
tr,
th,
td,
span {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.font-normal {
  font-family: "PingFang SC Regular", "Microsoft YaHei", Tahoma, Helvetica,
    Arial, sans-serif;
}
.font-bold {
  font-family: "PingFang SC Semibold", "Microsoft YaHei", Tahoma, Helvetica,
    Arial, sans-serif;
}
li {
  list-style: none;
}
em,
i,
u {
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
fieldset,
img {
  border: 0;
}

.page-error {
  color: $purple;
  font-size: 25px;
  text-align: center;
  padding: 150px 30px;
}

.mb-15 {
  margin-bottom: 15px;
}

/* report-page */
.report-page {
  width: 793px;
  height: 1122px;
  margin: 0 auto;
  position: relative;
  padding: 27px 40px 72px;
  page-break-after: always;
  font-size: 15px;
  color: $midDark;
  font-family: "PingFang SC", Tahoma, Helvetica, Arial, sans-serif;

  .page-body {
    background: #fff;
    height: 1023px;
    overflow: hidden;
  }
  .page-content {
    margin-top: 20px;
    position: relative;
  }
  .page-foot {
    position: absolute;
    width: 100%;
    height: 72px;
    bottom: 0;
    left: 0;
    padding: 27px 40px;
    color: $gray;

    .foot-left {
      float: left;
    }
    .foot-right {
      float: right;
      height: 18px;
      padding-right: 120px;

      position: relative;
    }
    .page-num {
      display: block;
      line-height: 18px;
      font-size: 14px;
    }
    .foot-num-bg {
      position: absolute;
      width: 110px;
      height: 4px;
      top: 7px;
      right: 0;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAAGCAYAAABNYTWkAAAAj0lEQVRYR2N0Duj4z0BFsHdDBSOycdPjnlLV/MxF0ijm2y74T1XzDycwophvcPo0Vc2/YGqKYr736RKqmr/VtAfF/F9XXKhqPpvOHhTzb968SVXzGUcTJGpuHE2Q+Eun0QSJFj6jJST+BDNaQqKFz2iVjT/BjFbZ+MNntMpGC5/RKnu0yiapSzVaZQ/vKhsAs/ylQ4nC3o8AAAAASUVORK5CYII=);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .page-chart {
    min-height: 200px;
    max-height: 100%;
  }
  // page-title
  .page-title-1 {
    font-size: 27px;
    font-weight: 600;
    color: $mainColor;
    line-height: 48px;
  }
  .page-title-2 {
    font-size: 19px;
    font-weight: 600;
    color: $mainColor;
    line-height: 27px;
  }
}

/* table */
.report-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  text-align: center;

  th {
    padding: 5px 3px;
    background-color: $blue;
    color: #fff;
    line-height: 19px;
  }
  td {
    padding: 5px 3px;
    color: $dark;
    line-height: 19px;
  }

  &-border {
    th {
      border: 1px solid $darkBlue;
    }
    td {
      border: 1px solid $borderColor;
    }
  }
}

// summary
.report-summary {
  .summary-chart {
    height: 260px;
  }
  .page-title-1 {
    display: none;
  }
  .page-content {
    margin: 0;
  }
  .report-title {
    font-size: 27px;
    font-weight: 600;
    color: $mainColor;
    line-height: 48px;
    text-align: center;
  }
  .report-sub-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 19px;
    font-weight: 600;
    color: $mainColor;
    line-height: 27px;
  }
}
// college
.college-chart {
  height: 234px;
}

// report-college
.report-college {
  td.td-college {
    width: 170px;
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
    }
  }
}
// report-class
.report-class {
  td.td-class {
    width: 170px;
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
    }
  }
}

// report-teacher
.report-teacher {
  td.td-teacher {
    width: 90px;
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
    }
  }
  td.td-class {
    width: 140px;
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 130px;
    }
  }
}
// report-question
.report-question {
  td.td-question {
    width: 200px;
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 190px;
    }
  }
}
