* {
  margin: 0;
  padding: 0;
  font-family: serif, "Microsoft YaHei";
}

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1578405801215'); /* IE9 */
  src: url('iconfont.eot?t=1578405801215#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1578405801215') format('woff'),
  url('iconfont.ttf?t=1578405801215') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1578405801215#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header {
  display: flex;
  margin: 20px 10px;
}

.header > div {
  position: relative;
  flex: 1;

  margin: 0 10px;
  padding: 1.5vw 1.5vw 1.6vw 1.5vw;
  height: 4.9vw;
  border-radius: 4px;
  color: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.all {
  background-color: #31b48d;
}

.pending {
  background-color: #38a1f2;
}

.active {
  background-color: #7538c7;
}

.closed {
  background-color: #3b67a4;
}

.detail {
  font-size: 1vw;
  display: flex;
  justify-content: space-between;
}

.data {
  font-size: 2.2vw;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.in-time {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 4px;
  font-size: 0.8vw;
  border-radius: 3px;
}

.status-img {
  position: absolute;
  top: 0.4vw;
  right: 0.6vw;
  font-size: 7vw;
  opacity: 0.3;
}

.main {
  margin: 2vw 20px 20px 20px;
  position: relative;
}

.title {
  font-size: 1.6vw;
}

.main-table {
  margin: 20px 0;
  border-collapse: collapse;
  color: #333;
  font-size: 1.1vw;
  width: 100%;
}

#tbody > tr, .thead > tr {
  border-bottom: 1px solid #DCDEE3;
}

.header-row {
  background-color: #ebecf0;
}

.header-cell, .body-cell {
  padding: 0.9vw 1.2%;
  flex: 1;
}

.header-cell:nth-child(1) {
  width: 22%;
}

.header-cell:nth-child(2) {
  width: 42%;
}

.project-detail {
  line-height: 1.7vw;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.project-detail:hover {
  display: block;
}

.delete {
  background-color: #ee706d;
  padding: 6px 10px;
  border: 0;
  border-radius: 3px;
  font-size: 0.9vw;
  color: #ffffff;
  cursor: pointer;
}

.status-active {
  color: #666666;
}

.status-pending {
  color: #ee706d;
}

.status-closed {
  color: #f7da47;
}

.filter {
  display: none;
}

.activate {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.alert {
  position: relative;
  margin: 0 auto;
  padding: 15px;
  border-radius: 5px;
  width: 310px;
  background-color: #ffffff;
}

.close-icon {
  text-align: right;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.question {
  margin: 0 10px 0 5px;
  font-size: 24px;
  color: #f1c826;
}

.hint {
  font-size: 20px;
  line-height: 24px;
  color: #333;
}

.hint-detail {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

.info {
  display: flex;
}

.confirm-button {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

#confirm, #cancel {
  margin: 5px;
  padding: 3px 8px;
  font-size: 14px;
  border-radius: 4px;
}

#confirm {
  background-color: #3080fe;
  color: #ffffff;
}

#cancel {
  background-color: #ffffff;
}

.present {
  color: #3080fe;
}

.sort {
  cursor: pointer;
}

.search-title {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.search-button {
  position: absolute;
  right: 10px;
  top: 6px;
  font-size: 20px;
  color: #aaa;
  cursor: pointer;
}

.search-box {
  width: 200px;
  height: 32px;
  padding: 0px 38px 0px 12px;
  border-radius: 20px;
  border: solid 1px #eee;
}