@charset "UTF-8";
.main-block-row {
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
.main-block-row .width-left {
  float: left;
  width: calc(60% - 20px) !important;
  position: relative;
}
.main-block-row .width-right {
  float: right;
  width: calc(40% - 20px) !important;
}
.main-block-row .main-block-title {
  width: 100%;
  margin: 0px 0px 12px;
}
.main-block-row .main-block-title > p {
  width: max-content;
  height: 20px;
  padding: 0px 20px;
  border-radius: 5px;
  background-color: rgba(255, 131, 10, 0.1);
}
.main-block-row .main-block-title > p > span {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  top: -10px;
  color: #ff830a;
}
.main-block-row .main-block-title .black-tit {
  width: max-content;
  padding: 0px;
  border-radius: 5px;
  background-color: #fff;
  line-height: 26px;
  height: 26px;
}
.main-block-row .main-block-title .black-tit > span {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  top: 0px !important;
  color: #333;
}
.main-block-row .main-block-container {
  width: 100%;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.copy-time {
  font-size: 14px;
  color: #666;
}
.copy-name {
  font-size: 14px;
  color: #666;
  float: right;
}
.q-chart-circle {
  margin: 0 auto 15px;
  border-radius: 50%;
}
.q-chart-circle .per-number-box-1 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 102px;
  height: 102px;
  line-height: 90px;
  text-align: center;
  font-family: "impact";
  border-radius: 50%;
}
.q-chart-circle .per-number-box-1 .number-text {
  font-size: 36px;
}
.q-chart-circle .per-number-box-1 .unit-text {
  font-size: 18px;
}
.q-chart-circle.blue {
  border: 6px solid #e3f0ff;
  box-shadow: 0 0px 3px 3px rgba(227, 240, 255, 0.8);
}
.q-chart-circle.blue .per-number-box-1 {
  box-shadow: inset 0 0px 3px 3px rgba(227, 240, 255, 0.8);
  color: #0d6ce4;
  border: 6px solid #e3f0ff;
}
.q-chart-circle.orange {
  border: 2px solid #ffdcb5;
  box-shadow: 0 0px 3px 3px rgba(255, 220, 181, 0.8);
}
.q-chart-circle.orange .per-number-box-1 {
  box-shadow: inset 0 0px 3px 3px rgba(255, 220, 181, 0.8);
  color: #fb8200;
  border: 2px solid #ffdcb5;
  line-height: 94px;
}
.color-049-100 {
  color: #049ba7 !important;
  font-weight: bold;
}
.color-49-100 {
  color: #049ba7 !important;
}
.bg-049-05 {
  background-color: rgba(4, 155, 167, 0.05);
}
.line-049 {
  border-bottom: 1px solid #049ba7 !important;
}
.padding-20 {
  padding: 10px 20px !important;
}
.pm-30 {
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.tag-cloud-box-small .wordcloud-inside {
  height: 205px !important;
}
.tag-cloud-box-little .wordcloud-inside {
  height: 152px !important;
}
.q-chart-circle {
  margin: 0 auto 15px;
  border-radius: 50%;
}
.q-chart-circle .per-number-box-1 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 102px;
  height: 102px;
  line-height: 90px;
  text-align: center;
  font-family: "impact";
  border-radius: 50%;
}
.q-chart-circle .per-number-box-1 .number-text {
  font-size: 36px;
}
.q-chart-circle .per-number-box-1 .unit-text {
  font-size: 18px;
}
.q-chart-circle.blue {
  border: 6px solid #e3f0ff;
  box-shadow: 0 0px 3px 3px rgba(227, 240, 255, 0.8);
}
.q-chart-circle.blue .per-number-box-1 {
  box-shadow: inset 0 0px 3px 3px rgba(227, 240, 255, 0.8);
  color: #0d6ce4;
  border: 6px solid #e3f0ff;
}
.q-chart-circle.orange {
  border: 2px solid #ffdcb5;
  box-shadow: 0 0px 3px 3px rgba(255, 220, 181, 0.8);
}
.q-chart-circle.orange .per-number-box-1 {
  box-shadow: inset 0 0px 3px 3px rgba(255, 220, 181, 0.8);
  color: #fb8200;
  border: 2px solid #ffdcb5;
  line-height: 94px;
}
.q-chart-circle.green {
  border: 2px solid #0d9fa1;
  box-shadow: 0 0px 3px 3px rgba(13, 159, 161, 0.8);
}
.q-chart-circle.green .per-number-box-1 {
  box-shadow: inset 0 0px 3px 3px rgba(13, 159, 161, 0.8);
  color: #0ec891;
  border: 6px solid #0d9fa1;
}
.activity-charts-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
}
/* 2021.11.11 zhou,jt */
.activity-details-container .activity-details-col {
  margin: 15px 0px 0px !important;
}
.activity-details-container .activity-details-col .activity-details-info-item.with-badge .text-box > img {
  height: 66px ;
  margin-bottom: 20px;
}
.double-one {
  position: relative;
  top: -2px;
}
.check-content .circular-box .click-box {
  position: relative;
  top: 5px;
}
/* end */
/***板块***/
.blue-panel {
  padding: 15px 30px 20px 20px;
  border-radius: 10px;
  background-color: rgba(13, 108, 228, 0.05);
}
.details-box-panel-container {
  padding: 0 10px;
}
.details-box-panel {
  padding: 20px 20px 16px 20px;
  border-radius: 10px;
}
.details-box-panel.fold > div:nth-child(2) {
  margin: 0 0 0!important;
}
.details-box-panel.fold .open-content {
  display: none;
}
.details-box-panel:last-child {
  margin: 0 0 17px!important;
}
.details-box-panel .claim-btn {
  margin: -2px 0 0;
}
.pd-20 {
  padding: 20px !important;
}
.pd-08 {
  padding: 8px 15px 8px !important;
}
.fs-13 {
  font-size: 13px;
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px !important;
}
.fl-l {
  float: left;
}
.fl-r {
  float: right;
}
.fw-b {
  font-weight: bold;
}
.mr-10 {
  margin: 0px 10px 0px 0px !important;
}
.mr-20 {
  margin: 0px 20px 0px 0px !important;
}
.ml-10 {
  margin: 0px 0px 0px 10px !important;
}
.top-22 {
  top: 22px !important;
}
.top-33 {
  top: 33px !important;
}
.top-44 {
  top: 44px !important;
}
.top-22 {
  top: 22px !important;
}
.top-33 {
  top: 33px !important;
}
.hand {
  cursor: pointer;
}
.hand > span {
  padding: 0px !important;
  border: 0px !important;
}
.width-67 {
  width: 67% !important;
}
.bg-green-100 {
  background-color: #1baf08 !important;
}
.bg-green-20 {
  background-color: rgba(27, 175, 8, 0.2) !important;
}
.border-orange-100 {
  border-left: #fb8200 4px solid !important;
}
.bg-orange-100 {
  background-color: #fb8200;
}
.bg-green-20 {
  background-color: rgba(27, 175, 8, 0.2) !important;
}
.bg-orange-10 {
  background-color: rgba(251, 130, 0, 0.1);
}
.bg-orange-05 {
  background-color: rgba(251, 130, 0, 0.05);
}
.color-orange-100 {
  color: #fb8200;
}
.border-qing-100 {
  border-left: #189ea9 4px solid !important;
}
.bg-qing-100 {
  background-color: #189ea9 !important;
}
.bg-qing-10 {
  background-color: rgba(24, 158, 169, 0.1) !important;
}
.bg-qing-05 {
  background-color: rgba(24, 158, 169, 0.05) !important;
}
.color-qing-100 {
  color: #189ea9 !important;
}
.border-orange-100 {
  border-left: #fb8200 4px solid !important;
}
.bg-green-20 {
  background-color: rgba(27, 175, 8, 0.2) !important;
}
.bg-green-20 .bg-orange-10 {
  background-color: rgba(251, 130, 0, 0.1);
}
.bg-green-20 .bg-orange-05 {
  background-color: rgba(251, 130, 0, 0.05);
}
.bg-green-20 .color-orange-100 {
  color: #fb8200;
}
.bg-green-20 .border-qing-100 {
  border-left: #189ea9 4px solid !important;
}
.bg-green-20 .bg-qing-100 {
  background-color: #189ea9 !important;
}
.bg-green-20 .bg-qing-10 {
  background-color: rgba(24, 158, 169, 0.1) !important;
}
.bg-green-20 .bg-qing-05 {
  background-color: rgba(24, 158, 169, 0.05) !important;
}
.bg-green-20 .color-qing-100 {
  color: #189ea9 !important;
}
.border-orange-100 {
  border-left: #fb8200 4px solid !important;
}
.color-green-100 {
  color: #1baf08 !important;
}
.color-black {
  color: #333 !important;
}
.color-66 {
  color: #666 !important;
}
.color-zang {
  color: #476985 !important;
}
.color-ff {
  color: #fff !important;
  padding: 0px 13px;
  line-height: 30px;
  display: inline-block;
  border-radius: 6px;
}
.yellow-star {
  color: rgba(255, 162, 0, 0.3) !important;
  margin: 0px 15px 0px 10px;
}
.yellow-star .active {
  color: #ffa200 !important;
}
.yellow-star > img {
  width: 15px;
}
.three-blue-point {
  padding: 0px 14px;
  line-height: 30px;
  border-radius: 5px;
}
.blue-green-color {
  color: #189ea9;
  background-color: rgba(24, 158, 169, 0.1);
}
.margin-none {
  margin: 0px !important;
}
.can-change {
  display: block;
  position: relative;
  float: right;
  height: 26px;
  line-height: 26px;
  padding: 0px 10px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.opacity-06 {
  opacity: 0.6;
}
.width-right-2 {
  float: right;
  width: calc(33% - 10px) !important;
}
.width-left-2 {
  float: left;
  width: calc(67% - 10px) !important;
}
.width-left-3 {
  float: left;
  width: calc(100% - 10px) !important;
}
.top-100 {
  top: 100px !important;
}
.top-35 {
  top: 35px !important;
  left: -15px !important;
}
.top-70 {
  top: 70px !important;
}
.bottom-5 {
  bottom: 5px !important;
}
.border-b {
  border-bottom: 1px solid #dedede !important;
}
.border-blue-bottom {
  border-bottom: 1px solid rgba(13, 108, 228, 0.05) !important;
}
.border-blue-bottom-drep {
  border-bottom: 1px solid rgba(13, 108, 228, 0.2) !important;
}
.title-span {
  font-size: 20px;
  line-height: 36px;
  height: 36px;
  font-weight: bold;
  position: relative;
  top: 0px !important;
  color: #333;
}
.color-fff {
  color: #fff;
}
.stage-goal > p {
  color: #666;
  line-height: 20px;
}
.stage-goal .title-row > span:nth-child(1) {
  margin-right: 20px;
  padding: 5px 14px;
  border-radius: 10px;
  line-height: 18px;
  display: inline-block;
  text-align: center;
}
.stage-goal .title-row > span:nth-child(2) {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}
.details-page-tit {
  margin-bottom: 15px;
}
.details-page-tit > p {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  line-height: 28px;
}
.rv-model-box {
  display: none;
  width: 275px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background-color: #fff;
  padding: 15px 20px 20px;
  position: absolute;
  z-index: 66;
  right: 0px;
  top: 35px;
}
.rv-model-box > span {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
}
.rv-model-box .bot {
  border-width: 10px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #dedede transparent;
  right: 13px;
  top: -20px;
}
.rv-model-box .top {
  border-width: 8px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #fff transparent;
  right: 15px;
  top: -16px;
}
.rv-model-box .dorp-down-title {
  height: 26px;
  font-size: 16px;
  color: #333;
  line-height: 26px;
  text-align: left;
  margin: 0 0 9px;
}
.rv-model-box .dorp-down-review {
  width: 100%;
  margin: 0 0 13px;
}
.rv-model-box .dorp-down-review .yellow-star {
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: rgba(255, 162, 0, 0.3) !important;
  margin: 0px 20px 0px 10px !important;
  font-size: 24px !important;
}
.rv-model-box .dorp-down-review .yellow-star .active {
  color: #ffa200 !important;
  background-color: #fff !important;
}
.rv-model-box .dorp-down-review .yellow-star > img {
  width: 15px;
  height: 15px;
}
.rv-model-box .dorp-down-footer > a {
  width: 75px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  box-sizing: border-box;
}
.rv-model-box .dorp-down-footer > a:nth-child(2) {
  color: #333;
  border: 1px solid #dedede;
}
.rv-model-box .dorp-down-footer > a:nth-child(1) {
  color: #fff;
}
.opacity-06 {
  opacity: 0.6;
}
.stage-goal .title-row > span:nth-child(1) {
  margin-right: 20px;
  padding: 5px 14px;
  border-radius: 10px;
  line-height: 18px;
  display: inline-block;
  text-align: center;
}
.stage-goal .title-row > span:nth-child(2) {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  line-height: 28px;
}
.stage-goal > p {
  color: #666;
  line-height: 22px;
}
.search-box .left-box {
  width: calc(100% - 200px);
}
.search-box .left-box > div:nth-last-child(1) {
  margin-right: 0px;
  padding-right: 20px;
  border-right: 1px solid #dedede;
}
.search-box .left-box > div {
  float: left;
  width: calc((100% / 3) - 20px);
  margin-right: 20px;
  padding-bottom: 10px;
}
.search-box .left-box > div > p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.search-box .left-box > div > textarea {
  width: 100%;
  resize: none;
  line-height: 30px;
  height: 30px;
  border: 1px solid #dedede;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
  padding: 0px 10px;
}
.search-box .search-btn-box {
  width: 200px;
  padding-top: 30px;
}
.search-box .search-btn-box > span {
  float: left;
  font-size: 14px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
}
.search-box .search-btn-box > span:nth-child(1) {
  width: 80px;
  color: #fff;
  margin-right: 10px;
}
.search-box .search-btn-box > span:nth-child(2) {
  width: 70px;
  border: 1px solid #dedede;
  color: #333;
  box-sizing: border-box;
  margin-right: 20px;
}
.middle-line {
  position: absolute;
  width: 1px;
  height: calc(95%);
  bottom: 0px;
  right: 0px;
  background-color: rgba(255, 255, 255, 0.5);
}
.interests-and-specialties-container {
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding: 0 0 10px;
}
.interests-and-specialties-container .list-title-row {
  height: 34px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 20px;
}
.interests-and-specialties-container .list-title-row .left-box {
  width: 190px;
  line-height: 24px;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
}
.interests-and-specialties-container .list-title-row .middle-box {
  width: calc(100% - 440.01px);
  line-height: 24px;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
}
.interests-and-specialties-container .list-title-row .right-box {
  width: 250px;
  line-height: 24px;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
}
.interests-and-specialties-list {
  width: 100%;
}
.interests-and-specialties-list .interests-and-specialties-item {
  min-height: 64px;
  position: relative;
  float: left;
  width: 100%;
  border-left-width: 4px;
  border-left-style: solid;
  margin: 0 0 20px;
}
.interests-and-specialties-list .interests-and-specialties-item .title-content {
  float: left;
  width: 190px;
  position: absolute;
  padding: 0 0 0 15px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0px;
}
.interests-and-specialties-list .interests-and-specialties-item .title-content .drag-area-box {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  left: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../../../resource/image/student_growth_center/icon/six-point.png);
  cursor: pointer;
}
.interests-and-specialties-list .interests-and-specialties-item .title-content .tit-box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 30px 0 0;
}
.interests-and-specialties-list .interests-and-specialties-item .title-content .tit-box .tit-box-inside .tit-text {
  font-size: 14px;
  line-height: 22px;
}
.interests-and-specialties-list .interests-and-specialties-item .title-content .tit-box .tit-box-inside .fold-btn {
  font-size: 14px;
  line-height: 22px;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list {
  max-height: 134px;
  float: right;
  width: calc(100% - 190.01px);
  min-height: 64px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item {
  float: left;
  width: 100%;
  height: 45px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-drag-box {
  display: none;
  float: left;
  width: 10px;
  height: 44px;
  margin: 0 10px 0 0;
  background-position: center 12px;
  background-repeat: no-repeat;
  background-image: url(../../../resource/image/student_growth_center/icon/six-point.png);
  cursor: pointer;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-title {
  float: left;
  width: calc(100% - 250.01px);
  padding: 10px 0;
  height: 44px;
  font-size: 14px;
  color: #333;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-tag {
  float: left;
  width: 250px;
  padding: 9px 10px;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-tag .tag-box {
  float: left;
  margin: 0 0 0;
  padding: 0 10px 0 30px;
  max-width: 220px;
  height: 26px;
  line-height: 26px;
  border-radius: 6px;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-tag .tag-box > img {
  margin: -4px 5px 0 -35px;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-tag .tag-box > span {
  line-height: 26px;
  font-size: 14px;
  float: right;
  max-width: 170px;
}
.interests-and-specialties-list .interests-and-specialties-item .ias-child-list .ias-child-item:last-child {
  border-bottom: none;
  height: 44px;
}
.interests-and-specialties-list .interests-and-specialties-item.orange {
  border-color: #fb8200!important;
  background-color: rgba(251, 130, 0, 0.05) !important;
}
.interests-and-specialties-list .interests-and-specialties-item.orange .ias-child-list .ias-child-item {
  border-color: rgba(4, 155, 167, 0.2) !important;
}
.interests-and-specialties-list .interests-and-specialties-item.orange .ias-child-list .ias-child-item .ias-child-tag .tag-box {
  background-color: rgba(251, 130, 0, 0.1) !important;
  color: #fb8200!important;
}
.interests-and-specialties-list .interests-and-specialties-item.green {
  border-color: #189ea9!important;
  background-color: rgba(24, 158, 169, 0.05) !important;
}
.interests-and-specialties-list .interests-and-specialties-item.green .ias-child-list .ias-child-item {
  border-color: rgba(4, 155, 167, 0.2) !important;
}
.interests-and-specialties-list .interests-and-specialties-item.green .ias-child-list .ias-child-item .ias-child-tag .tag-box {
  background-color: rgba(24, 158, 169, 0.1) !important;
  color: #189ea9!important;
}
.interests-and-specialties-list .interests-and-specialties-item.unfold .ias-child-list {
  height: auto;
  max-height: 100000px;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item {
  float: left;
  width: 100%;
  border-left-width: 4px;
  border-left-style: solid;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item .title-content {
  padding: 0 0 0 20px;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item .title-content .drag-area-box {
  display: block;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item .title-content .tit-box {
  left: 35px;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-drag-box {
  display: block;
}
.interests-and-specialties-list.dragable .interests-and-specialties-item .ias-child-list .ias-child-item .ias-child-title {
  width: calc(100% - 270.01px);
}
.panel-content-01 {
  margin-bottom: 20px;
}
.panel-content-01 > div:nth-child(1) {
  margin-bottom: 15px;
}
.panel-content-01 > div:nth-child(1) .label-orange {
  padding: 0px 15px;
  border-radius: 10px;
  display: inline-block;
  color: #fff;
  line-height: 24px;
  margin-right: 10px;
  background-color: #ffa200;
}
.panel-content-01 > div:nth-child(1) > span:nth-child(1) {
  padding: 0px 15px;
  border-radius: 10px;
  display: inline-block;
  color: #fff;
  line-height: 24px;
  margin-right: 10px;
}
.panel-content-01 > div:nth-child(1) > span:nth-child(2) {
  font-size: 16px;
  color: #333;
  margin-right: 20px;
}
.panel-content-01 > div:nth-child(1) > div > span:nth-child(1) {
  font-size: 14px;
  color: #666;
  margin-right: 15px;
}
.panel-content-01 > div:nth-child(1) > div > span:nth-child(2) {
  color: rgba(255, 162, 0, 0.3);
  margin-right: 30px;
}
.panel-content-01 > div:nth-child(1) > div > span:nth-child(2) .active {
  color: #ffa200;
}
.panel-content-01 .mb-26 {
  margin-bottom: 26px !important;
}
.panel-content-01 > div:nth-child(2) {
  line-height: 14px;
  margin-bottom: 26px;
}
.panel-content-01 > div:nth-child(2) > div {
  font-size: 14px;
  color: #666;
  position: relative;
}
.panel-content-01 > div:nth-child(2) > div > span:nth-child(1) {
  padding-right: 20px;
  border-right: 1px solid #ddd;
}
.panel-content-01 > div:nth-child(2) > div > span:nth-child(2) {
  margin-left: 19px;
}
.panel-content-01 > div:nth-child(2) > div .active {
  background-color: #0d6ce4 !important;
  color: #fff !important;
}
.panel-content-01 > div:nth-child(2) > span:nth-child(1) {
  font-size: 14px;
  color: #666;
  margin-right: 15px;
}
.panel-content-01 > div:nth-child(2) .progress-bar {
  display: inline-block;
  width: 400px;
  height: 16px;
  border-radius: 8px;
  border: none;
  margin-right: 10px;
}
.panel-content-01 > div:nth-child(2) .progress-bar > span {
  width: 69%;
  height: 100%;
  display: inline-block;
  border-radius: 8px;
}
.panel-content-01 > div:nth-child(2) .progress-bar2 {
  display: inline-block;
  width: 400px;
  height: 16px;
  border-radius: 8px;
  margin-right: 10px;
}
.panel-content-01 > div:nth-child(2) .progress-bar2 > span {
  width: 23%;
  height: 100%;
  display: inline-block;
  border-radius: 8px;
}
.panel-content-01 > div:nth-child(2) .progress-bar3 {
  display: inline-block;
  width: 400px;
  height: 16px;
  border-radius: 8px;
  margin-right: 10px;
}
.panel-content-01 > div:nth-child(2) .progress-bar3 > span {
  width: 81%;
  height: 100%;
  display: inline-block;
  border-radius: 8px;
}
.panel-content-01 > div:nth-child(2) .progress-bar100 {
  display: inline-block;
  width: 400px;
  height: 16px;
  border-radius: 8px;
  margin-right: 10px;
}
.panel-content-01 > div:nth-child(2) .progress-bar100 > span {
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 8px;
}
.panel-content-01 .open-content .open-list {
  line-height: 15px;
  position: relative;
  margin-bottom: 18px;
}
.panel-content-01 .open-content .open-list > span:nth-child(1) {
  position: relative;
  top: -2px;
}
.panel-content-01 .open-content .open-list > span:nth-child(2) {
  font-size: 14px;
  color: #333;
  margin-right: 5px;
}
.panel-content-01 .open-content .open-list .can-box .active {
  background-color: #0d6ce4 !important;
  color: #fff !important;
}
.panel-content-01 .open-content .open-list .num-span {
  padding: 3px 14px;
  border-radius: 10px;
  line-height: 18px;
  display: inline-block;
  text-align: center;
  position: relative;
  top: -3px;
}
.panel-content-01 .open-content .open-list > div .tit-check-smallbox {
  padding: 4px 15px;
  border-radius: 5px;
  text-align: center;
  position: relative;
  right: -15px;
}
.panel-content-01 .open-content .open-list > div .active1 {
  background-color: #0d6ce4 !important;
  color: #fff !important;
}
.panel-content-01 .open-content .open-list .box-model-small {
  width: 93px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
  position: absolute;
  z-index: 66;
  right: -18px;
  text-align: center;
  top: 35px;
}
.panel-content-01 .open-content .open-list .box-model-small > P {
  line-height: 28px;
  border-radius: 5px;
  border: 1px solid #dedede;
  font-size: 14px;
  box-sizing: border-box;
}
.panel-content-01 .open-content .open-list .box-model-small > p:nth-child(1) {
  margin-bottom: 10px;
}
.panel-content-01 .open-content .open-list .box-model-small > p:nth-child(2) {
  background-color: #fc4441;
  color: #fff;
}
.panel-content-01 .open-content .open-list .box-model-small > span {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
}
.panel-content-01 .open-content .open-list .box-model-small .bot {
  border-width: 10px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #dedede transparent;
  right: 13px;
  top: -20px;
}
.panel-content-01 .open-content .open-list .box-model-small .top {
  border-width: 8px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #fff transparent;
  right: 15px;
  top: -16px;
}
.panel-content-01 .open-content .two-list-content {
  padding: 0px 0px 0px 35px;
  margin-bottom: 10px;
}
.panel-content-01 .open-content .two-list-content > div {
  font-size: 14px !important;
  color: #666;
  line-height: 28px;
}
.panel-content-01 .open-content .two-list-content > div .green-point {
  width: 6px;
  height: 6px;
  background-color: #1baf08;
  margin-right: 5px;
  border-radius: 50%;
  position: relative;
  top: 11px;
}
.panel-content-01 .open-content .two-list-content > div > p {
  color: #666;
}
.personal-info-block {
  width: 100%;
}
.personal-info-block .personal-info-block-item {
  width: 100%;
  margin: 0 0 20px;
}
.personal-info-block .personal-info-block-item .title-box {
  width: 100%;
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
  line-height: 24px;
  font-weight: bold;
}
.personal-info-block .personal-info-block-item .text-box {
  position: relative;
  width: 100%;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.personal-info-block .personal-info-block-item .text-box::before {
  content: "";
  display: block;
  width: 4px;
  position: absolute;
  top: 4px;
  bottom: 5px;
  left: 0;
}
.personal-info-block .personal-info-block-item.color-1 .text-box::before {
  background-color: #0d6ce4;
}
.personal-info-block .personal-info-block-item.color-2 .text-box::before {
  background-color: #fb8200;
}
.personal-info-block .personal-info-block-item.color-3 .text-box::before {
  background-color: #189ea9;
}
.personal-info-block .personal-info-block-item:last-child {
  margin: 0 0 10px;
}
.my-pins {
  margin-bottom: 2px;
}
.my-pins > div {
  float: left;
  background-color: rgba(102, 102, 102, 0.1);
  border-radius: 6px;
  padding: 0px 10px;
  line-height: 28px;
  font-size: 16px;
  color: #666;
  margin: 0px 10px 10px 0px;
  cursor: pointer;
}
.my-reflection > textarea {
  border: #ddd solid 1px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 24px;
  width: 100%;
  height: 160px;
  resize: none;
  padding: 14px 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-reflection .footer-btn {
  width: 27%;
  height: 32px;
  margin: 0 auto 20px auto;
}
.my-reflection .footer-btn > a {
  float: left;
  display: block;
  height: 32px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 13px;
  margin: 0 9px;
  cursor: pointer;
  border-radius: 5px;
}
.my-reflection .footer-btn .btn-primary {
  background-color: #0d6ce4;
  border-color: #0d6ce4;
  color: #fff;
  width: 54%;
}
.my-reflection .footer-btn .btn-default {
  border: 1px solid #ccc;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fff;
  width: 28%;
}
.my-reflection2 > textarea {
  border: #ddd solid 1px;
  border-radius: 5px;
  width: 100%;
  height: 160px;
  resize: none;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 23px;
}
.my-reflection2 .footer-btn {
  width: 55%;
  height: 32px;
  margin: 0 auto 20px auto;
}
.my-reflection2 .footer-btn > a {
  float: left;
  display: block;
  height: 32px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 13px;
  margin: 0 9px;
  cursor: pointer;
  border-radius: 5px;
}
.my-reflection2 .footer-btn .btn-primary {
  background-color: #0d6ce4;
  border-color: #0d6ce4;
  color: #fff;
  width: 44%;
}
.my-reflection2 .footer-btn .btn-default {
  border: 1px solid #ccc;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fff;
  width: 20%;
}
.self-reflection .content-1 .left-content {
  width: 120px;
  border-radius: 10px;
  font-size: 16px;
  padding: 6px 10px;
  line-height: 20px;
  margin-right: 20px;
}
.self-reflection .content-1 .left-content > span:nth-child(1) {
  margin-right: 5px;
}
.self-reflection .content-1 .left-content > span:nth-child(2) {
  width: calc(100% - 25px);
}
.self-reflection .content-1 .right-content {
  width: calc(100% - 145px);
}
.self-reflection .content-1 .right-content .self-page > div {
  float: left;
  background-color: rgba(13, 108, 228, 0.1);
  padding: 0px 10px;
  line-height: 28px;
  font-size: 16px;
  color: #0d6ce4;
  margin: 0px 10px 10px 0px;
  border-radius: 6px;
}
.self-reflection .content-1 .right-content .self-text {
  font-size: 14px;
  color: #666;
}
.self-card {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  position: relative;
  margin-bottom: 20px;
  border-radius: 23px;
  box-shadow: 0px 5px 15px 0px rgba(13, 108, 228, 0.3) !important;
  display: flex;
  align-items: center;
  align-content: center;
}
.self-card .self-img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  margin-right: 20px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  align-content: center;
}
.self-card .self-img > img {
  width: 100%;
}
.self-card .self-mes {
  margin-right: 40px;
  padding: 6px 0 0;
}
.self-card .self-mes > P {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 21px;
}
.self-card .self-mes > p:nth-child(1) {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin: 0px 0px 10px 0px;
  line-height: 22px;
}
.self-card .school-year {
  display: inline-block;
  flex: 1;
}
.self-card .school-year > div {
  padding: 0px 27px;
  text-align: center;
  position: relative;
}
.self-card .school-year > div > p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 16px;
}
.self-card .school-year > div > p:nth-child(3) {
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}
.self-card .school-year > div > p:nth-child(2) {
  margin-bottom: 13px;
}
.self-card .primary-yellow {
  position: relative;
  top: 25%;
  transform: translateY(13%);
}
.self-card2 {
  border: 1px solid rgba(13, 108, 228, 0.5);
  border-radius: 26px;
  box-shadow: 0px 5px 15px 0px rgba(13, 108, 228, 0.15) !important;
}
.over-selected {
  padding-bottom: 13px;
  margin-bottom: 7px;
}
.over-selected > p {
  color: #666;
  line-height: 20px;
  margin: 20px 0px;
}
.over-selected .page-box > div {
  float: left;
  border-radius: 6px;
  padding: 0px 10px;
  line-height: 30px;
  height: 30px;
  font-size: 16px;
  margin: 0px 10px 10px 0px;
  position: relative;
}
.over-selected .page-box > div .red-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: red;
  display: block;
  border-radius: 50%;
  top: -2px;
  right: -2px;
}
.teacher-words {
  background-color: rgba(251, 129, 0, 0.1);
  padding: 10px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.teacher-words .teacher-word-tit {
  background-color: #fb8100;
  border-radius: 10px;
  padding: 0px 12px;
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  margin-bottom: 15px;
}
.teacher-words .teacher-word-tit > i {
  margin-right: 10px;
}
.teacher-words > div {
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.teacher-words .left-blue-line {
  position: absolute;
  width: 8px;
  height: 50%;
  border-radius: 10px;
  left: -4px;
  top: 20px;
}
.teacher-words-pink {
  background-color: rgba(250, 88, 110, 0.1);
  padding: 10px;
  border-radius: 10px;
}
.teacher-words-pink .teacher-word-tit {
  background-color: #fa586e;
  border-radius: 10px;
  padding: 0px 12px;
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  margin-bottom: 15px;
}
.teacher-words-pink .teacher-word-tit > i {
  margin-right: 10px;
}
.teacher-words-pink > div {
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.green-num-and-charts .green-num-box {
  width: 260px;
}
.green-num-and-charts .green-num-box > div {
  margin-bottom: 21px;
}
.green-num-and-charts .charts-box {
  width: calc(100% - 260px);
}
.blue-title-bar {
  color: #fff;
  border-radius: 10px;
  line-height: 34px;
  padding: 0px 10px;
}
.blue-title-bar > i {
  margin-right: 10px;
}
.middle-title {
  width: 295px;
  font-size: 16px;
  padding: 15px 20px 0px 20px;
  background: linear-gradient(rgba(13, 108, 228, 0.3), rgba(13, 108, 228, 0.1));
}
.middle-title-qing {
  width: 295px;
  font-size: 16px;
  padding: 15px 20px 0px 20px;
  background: linear-gradient(rgba(24, 158, 169, 0.3), rgba(24, 158, 169, 0.1));
}
.radius-left-none {
  border-top-left-radius: 0px !important;
}
.title-145 {
  width: calc(50% - 10px);
  font-size: 16px;
}
.title-145-02 {
  width: calc(50% - 10px);
  font-size: 16px;
}
.half-tit {
  background: linear-gradient(rgba(13, 108, 228, 0.3), rgba(13, 108, 228, 0.1));
  width: 60%;
  padding: 15px 20px 0px 20px;
}
.half-tit2 {
  background: linear-gradient(rgba(251, 130, 0, 0.3), rgba(251, 130, 0, 0.1));
  width: 60%;
  padding: 15px 20px 0px 20px;
}
.middle-charts .charts-tit {
  line-height: 40px;
  border-radius: 10px;
  text-align: center;
}
.middle-charts .charts-content {
  width: 385px;
  padding: 20px;
  position: relative;
}
.middle-charts .charts-content > img {
  width: 100%;
}
.middle-charts .charts-content .up-text {
  position: absolute;
  top: 40px;
  right: 99px;
  transform: rotate(29deg);
}
.middle-charts .charts-content .middle-text {
  position: absolute;
  bottom: 227px;
  right: 11px;
  transform: rotate(93deg);
}
.long-word {
  width: 104px;
  border-radius: 10px;
  line-height: 22px;
  text-align: center;
  display: block;
}
.long-word2 {
  width: 104px;
  border-radius: 10px;
  line-height: 22px;
  margin-left: 13px;
  text-align: center;
  display: block;
}
.list-icon-big {
  position: absolute;
  left: 0;
  top: -3px;
}
.padding-20-0 {
  padding: 20px 15px !important;
}
.padding-14-0 {
  padding: 14px 15px !important;
}
.padding-5-15 {
  padding: 5px 15px !important;
}
.border-green-100 {
  border: 1px solid #1baf08;
}
.border-666-100 {
  border: 1px solid #666;
}
.border-orange-100 {
  border: 1px solid #fb8200;
}
.bg-green-10 {
  background-color: rgba(27, 175, 8, 0.1) !important;
}
.bg-orange-10 {
  background-color: rgba(251, 130, 0, 0.1) !important;
}
.bg-666-30 {
  background-color: rgba(102, 102, 102, 0.1) !important;
}
.dashed-line {
  width: calc(100% - 940px);
  padding: 1px;
  border-top-width: 1px;
  border-top-style: dashed;
  float: left;
  position: relative;
  top: 15px;
}
.border-orange-100-left {
  border-left: #fb8200 4px solid !important;
}
.line-h-30 {
  line-height: 30px;
}
.goal-box .goal-tit {
  line-height: 34px;
  position: relative;
}
.goal-box .goal-tit .goal-btn {
  padding: 0px 10px !important;
  color: #fff;
  line-height: 34px !important;
  display: inline-block;
  border-radius: 10px;
  margin-right: 10px;
}
.goal-box .goal-tit .goal-btn > img {
  position: relative;
  top: -2px;
  margin-right: 5px;
}
.goal-box .goal-tit .goal-btn.color-green {
  background-color: #189ea9 ;
  color: #fff;
}
.goal-box .goal-tit .goal-tit-text {
  font-size: 18px;
  font-weight: bold;
}
.goal-box .goal-tit .tit-check-box {
  padding: 0px 15px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  right: -15px;
  top: 4px;
}
.goal-box .goal-tit .active {
  background-color: #0d6ce4 !important;
  color: #fff !important;
}
/* 新添加点击样式 */
.fl-r .tit-check-box {
  padding: 0px 15px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  right: -15px;
  top: 0px;
}
.fl-r .active {
  background-color: #0d6ce4 !important;
  color: #fff !important;
}
/* END */
.goal-box .goal-tit .box-model {
  width: 146px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
  position: absolute;
  z-index: 66;
  right: -18px;
  text-align: center;
  top: 40px;
}
.goal-box .goal-tit .box-model > P {
  line-height: 28px;
  border-radius: 5px;
  border: 1px solid #dedede;
  font-size: 14px;
  box-sizing: border-box;
}
.goal-box .goal-tit .box-model > p:nth-child(1){
  margin-bottom: 10px;
}
.goal-box .goal-tit .box-model .delete-red-btn{
  background-color: #fc4441;
  margin-top: 10px;
  color: #fff;
}
.goal-box .goal-tit .box-model > span {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
}
.goal-box .goal-tit .box-model .bot {
  border-width: 10px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #dedede transparent;
  right: 13px;
  top: -20px;
}
.goal-box .goal-tit .box-model .top {
  border-width: 8px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #fff transparent;
  right: 15px;
  top: -16px;
}
/*  */
.one-list .box-model {
  width: 146px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
  position: absolute;
  z-index: 66;
  right: -18px;
  text-align: center;
  top: 40px;
}
.one-list .box-model > P {
  line-height: 28px;
  border-radius: 5px;
  border: 1px solid #dedede;
  font-size: 14px;
  box-sizing: border-box;
}
.one-list .box-model > p:nth-child(1){
  margin-bottom: 10px;
}
.one-list .box-model .delete-red-btn{
  background-color: #fc4441;
  margin-top: 10px;
  color: #fff;
}
.one-list .box-model > span {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
}
.one-list .box-model .bot {
  border-width: 10px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #dedede transparent;
  right: 13px;
  top: -20px;
}
.one-list .box-model .top {
  border-width: 8px;
  border-style: solid dashed dashed;
  border-color: transparent transparent #fff transparent;
  right: 15px;
  top: -16px;
}
/*  */
.goal-box .goal-tit .tag-school {
  padding: 0 10px;
  display: inline-block;
  height: 24px;
  line-height: 22px;
  border: 1px solid rgba(251, 130, 0, 0.3);
  background-color: rgba(251, 130, 0, 0.09);
  color: #fb8200;
  border-radius: 4px;
}
.goal-box .goal-small-tit {
  font-size: 14px;
  color: #666;
}
.two-cloud .cloud-content {
  width: calc(50% - 10px);
  border-radius: 10px;
  padding: 10px;
  height: 210px !important;
}
.two-cloud .cloud-content .cloud-tit {
  color: #fff;
  font-size: 16px;
  padding: 5px 15px;
  border-radius: 10px;
  display: inline-block;
}
.play-box-tit {
  border-radius: 10px;
  line-height: 34px;
  padding: 0px 10px;
}
.play-box-tit > div {
  font-size: 14px;
  color: #fff;
}
.play-box-tit .left-box {
  width: 17.5%;
}
.play-box-tit .middle-box {
  width: calc(82.5% - 240px);
}
.play-box-tit .right-box {
  width: 240px;
  float: right;
}
.drag-box {
  padding: 0px 15px;
  border-left: 4px solid;
}
.drag-box .left-box {
  float: left;
  width: 16.8%;
  position: relative;
}
.drag-box .left-box .left-tit {
  float: left;
  width: 110px;
}
.drag-box .left-box .left-tit > span {
  float: left;
  width: 100%;
  display: inline-block;
}
.drag-box .middle-box {
  float: left;
  width: calc(83.2% - 240px);
}
.drag-box .middle-box > p {
  line-height: 20px;
  padding: 12px 0;
  font-size: 14px;
  color: #333;
}
.drag-box .right-box {
  width: 240px;
  float: right;
}
.drag-box .right-box > p {
  height: 45px;
  position: relative;
}
.drag-box .right-box > p > span:nth-child(1) {
  padding: 0px 10px 0px 20px;
  top: 9.5px;
  left: 17px;
  position: relative;
  line-height: 26px;
  display: inline-block;
  border-radius: 6px;
}
.drag-box .right-box > p > span:nth-child(1) > span {
  position: absolute;
  left: -12px;
  top: -2px;
}
.orange-drag {
  border-left: 4px solid;
}
.qing-drag {
  border-left: 4px solid;
}
.right-btn > i {
  margin-right: 8px;
}
.after-goal-text {
  margin-right: 20px !important;
  line-height: 24px;
  display: block;
}
.middle-green-font {
  position: relative;
  right: -50%;
  transform: translateX(-50%);
}
.open-content .open-list > span:nth-child(1) {
  top: 0px !important;
}
.six-point-btn {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: -2px;
  float: left;
  cursor: pointer;
}
.six-point-btn-02 {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 9px;
  float: left;
  cursor: pointer;
}
.six-point-btn-03 {
  display: block;
  margin-right: 15px;
  position: relative;
  top: 9px;
  float: left;
  width: 8px;
  height: 40px;
  cursor: pointer;
}
.list-name-br {
  display: inline-block;
  width: 110px;
  line-height: 20px;
}
@media screen and (max-width: 1328px) {
  .dashed-line {
    display: none;
  }
  .after-goal-text {
    margin-right: 0px !important;
    line-height: 24px;
    width: calc(100% - 415px);
  }
}
.activity-details-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0 21px;
  margin: 0 0 18px;
  border-bottom: 1px solid #ddd;
}
.activity-details-title .title-box {
  font-size: 16px;
  line-height: 18px;
  color: #333;
  font-weight: bold;
}
.activity-details-title .tag-box {
  height: 26px;
  padding: 0 10px;
  margin: -5px 0;
  border-radius: 6px;
  font-size: 14px;
  line-height: 26px;
}
.activity-details-container {
  width: calc(100% + 40px);
  margin: 0 -20px;
}
.activity-details-container .activity-details-col {
  padding: 0 20px;
  float: left;
  margin: 0 0 20px;
}
.activity-details-container .activity-details-col.two-col {
  width: 50%;
}
.activity-details-container .activity-details-col.one-col {
  width: 100%;
}
.activity-details-container .activity-details-col.border-right {
  border-right: 1px dashed #ddd;
}
.activity-details-container .activity-details-col .activity-details-info-item {
  width: 100%;
  margin: 0 0 15px;
  display: flex;
}
.activity-details-container .activity-details-col .activity-details-info-item .title-box {
  float: left;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}
.activity-details-container .activity-details-col .activity-details-info-item .text-box {
  float: left;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  max-width: calc(100% - 110px);
}
.activity-details-container .activity-details-col .activity-details-info-item .text-box .tag-box {
  float: left;
  height: 26px;
  margin: 0 10px 10px 0;
  padding: 0 10px;
  line-height: 26px;
  font-size: 14px;
  border-radius: 6px;
}
.activity-details-container .activity-details-col .activity-details-info-item.with-tag .title-box {
  line-height: 26px;
}
.activity-details-container .activity-details-col .activity-details-info-item.with-badge .title-box {
  padding: 20px 0;
  line-height: 26px;
}
.activity-details-container .activity-details-col .activity-details-info-item.with-badge .text-box > img {
  float: left;
  height: 66px;
  margin: 0 20px 15px 0;
}
.activity-details-container .activity-details-col .activity-details-info-item:last-child {
  margin: 0 ;
}
.recommended-tasks-title {
  padding: 4px 0 13px;
}
.recommended-tasks-title .title-box {
  float: left;
  font-size: 16px;
  line-height: 26px;
  color: #333;
  font-weight: bold;
}
.recommended-tasks-title .btn-box {
  float: right;
  font-size: 14px;
  line-height: 26px;
}
.recommended-tasks-list .recommended-tasks-item {
  width: 100%;
  padding: 15px 20px 17px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
  background-color: rgba(102, 102, 102, 0.1);
}
.recommended-tasks-list .recommended-tasks-item .mark-line {
  width: 5px;
  position: absolute;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 0px;
  top: 20px;
  bottom: 20px;
  background-color: rgba(102, 102, 102, 0.5);
}
.recommended-tasks-list .recommended-tasks-item .details-col {
  float: left;
  width: calc(100% - 80.01px);
}
.recommended-tasks-list .recommended-tasks-item .details-col .details-title-box {
  float: left;
  width: 100%;
  margin: 0 0 13px;
  font-size: 16px;
  line-height: 22px;
  color: #333;
}
.recommended-tasks-list .recommended-tasks-item .details-col .details-info-box {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  font-size: 14px;
  color: #666;
  line-height: 16px;
}
.recommended-tasks-list .recommended-tasks-item .details-col .details-text-box {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #999;
  line-height: 16px;
}
.recommended-tasks-list .recommended-tasks-item .btn-col {
  float: right;
  width: 80px;
  padding: 0 0;
}
.one-col .check-box {
  margin: 20px 0px;
  border-radius: 6px;
  box-sizing: border-box;
  line-height: 50px;
  border-width: 1px;
  border-style: solid;
}
.one-col .check-box .check-content {
  width: 45px;
  display: inline-block;
  line-height: 48px;
  height: 50px;
}
.one-col .check-box .check-content .circular-box {
  position: relative;
}
.one-col .check-box .check-content .circular-box .click-box {
  cursor: pointer;
}
.one-col .check-box .text-content {
  padding: 0px 20px;
  font-weight: bold;
}
.charts-content > span {
  letter-spacing: 1px;
}
.charts-content .charts-box {
  width: 100%;
  height: 440px;
  margin: 0;
  position: relative;
  z-index: 3;
}
.charts-content .center-box {
  position: absolute;
  top: 161px;
  left: 70px;
  z-index: 3;
}
.charts-content .out-box {
  position: absolute;
  top: 131px;
  left: 40px;
  z-index: 2;
}
.charts-content .out-box2 {
  position: absolute;
  top: 40px;
  left: 145px;
  z-index: 2;
}
.charts-content .in-circle-text {
  position: absolute;
  top: 224px;
  right: 54px;
  transform: rotate(87deg);
  z-index: 4;
  color: #fff;
}
.charts-content .in-circle-text2 {
  position: absolute;
  top: 19px;
  right: 43px;
  transform: rotate(28deg);
  z-index: 4;
  color: #333;
}
.charts-content .in-circle-text2-2 {
  position: absolute;
  top: 30px;
  right: 51px;
  transform: rotate(28deg);
  z-index: 4;
  color: #333;
}
.charts-content .in-circle-text3 {
  position: absolute;
  top: 223px;
  right: -83px;
  transform: rotate(87deg);
  z-index: 4;
  color: #333;
}
.charts-content .in-circle-text3-2 {
  position: absolute;
  top: 223px;
  right: -70px;
  transform: rotate(87deg);
  z-index: 4;
  color: #333;
}
.charts-content .in-circle-text4 {
  position: absolute;
  bottom: 30px;
  right: 21px;
  transform: rotate(144deg);
  z-index: 4;
  color: #333;
}
.charts-content .in-circle-text4-2 {
  position: absolute;
  bottom: 41px;
  right: 28px;
  transform: rotate(144deg);
  z-index: 4;
  color: #333;
}
.charts-content .white-line {
  width: 10px;
  height: 140px;
  background-color: #fff;
  position: absolute;
  top: 95px;
  right: 101px;
  z-index: 3;
  transform: rotate(60deg);
  border-bottom-width: 31px;
  border-bottom-style: solid;
}
.charts-content .white-line2 {
  width: 10px;
  height: 141px;
  background-color: #fff;
  position: absolute;
  bottom: 95px;
  right: 99px;
  z-index: 3;
  border-top-width: 31px;
  border-top-style: solid;
  transform: rotate(-60deg);
}
.orange-line {
  height: 2px;
  width: calc(100% - 485px);
  background-color: #fb8200;
  position: absolute;
  top: 100px;
  left: 0px;
}
.left-content-charts {
  width: calc(100% - 385px);
  padding-right: 58px;
  margin: 30px 0 0 -140px;
}
.left-content-charts .content-box {
  padding: 50px 0 10px;
  position: relative;
  box-sizing: border-box;
}
.left-content-charts .content-box .center-text {
  position: relative;
  border-radius: 0 10px 10px 10px;
  padding: 16px 20px 16px 46px;
  width: calc(80% - 35px);
}
.left-content-charts .content-box .center-text .text-icon {
  position: absolute;
  top: 17px;
  left: 20px;
}
.left-content-charts .content-box .title-box {
  float: left;
  height: 40px;
  margin: -56px 0 10px -46px;
  padding: 10px 20px;
  font-size: 16px;
  color: #333;
  line-height: 24px;
  font-weight: bold;
  border-radius: 0 0;
  background: linear-gradient(rgba(13, 108, 228, 0.3), rgba(13, 108, 228, 0.1)) !important;
}
.left-content-charts .content-box .line-content {
  position: relative;
}
.left-content-charts .content-box .line-content .line-title {
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 14px;
  color: #333;
}
.left-content-charts .content-box .orange-line {
  height: 2px;
  width: calc(20% + 10px);
  background-color: #fb8200;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}
.left-content-charts .content-box:after {
  clear: both;
  content: '';
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
}
.rada-charts-box {
  width: 100%;
  height: 272px;
  margin: -45px 0 0 0px;
}
.rada-charts-box > div:first-child {
  width: 100% !important;
}
@media screen and (max-width: 1100px) {
  .left-content-charts {
    padding-right: 0px;
  }
}
@media screen and (max-width: 1200px) {
  .left-content-charts .content-box .center-text {
    width: calc(100% - 35px);
  }
  .left-content-charts .content-box .orange-line {
    width: 30px;
  }
}
@media screen and (max-width: 1300px) {
  .primary-yellow {
    width: 100%;
    padding: 15px 0px 10px;
  }
  .left-content-charts {
    margin: 0px 0 0 -140px;
  }
  .left-content-charts .content-box:nth-child(1) .orange-line {
    top: 80%;
  }
  .left-content-charts .content-box:nth-child(3) .orange-line {
    top: 20%;
  }
}
@media screen and (max-width: 1020px) {
  .orange-line {
    display: none;
  }
  .orange-line3 {
    display: none;
  }
}
@media screen and (max-width: 1140px) {
  .h-68 {
    max-height: 65px !important;
  }
}