.html_container {
  height: auto !important;
}

.qc_report_wrap {
  width: 1000px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  margin: 60px auto;
  padding: 100px;
}

.qc_report_wrap .title_w {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}

.qc_report_wrap .result_img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.qc_report_wrap .title {
  font-size: 40px;
  margin: 0 auto;
  /*margin-left: 50px;*/
}

.qc_report_wrap .basic_info_table {
  width: 100%;
}

.qc_report_wrap .basic_info_table th,
.qc_report_wrap .basic_info_table td {
  width: 25%;
  padding: 15px;
  word-break: break-all;
}

.qc_report_wrap .basic_info_table th {
  background-color:#94b8b8; /*#495a64;*/
  color: #fff;
  text-align: center;
}

.qc_report_wrap .basic_info_table td {
  background-color: rgba(73, 90, 100, 0.1);
  color: #000;
  text-align: center;
}

.qc_report_wrap .report_item {
  margin-top: 80px;
}

.qc_report_wrap .report_item_title {
  font-size: 30px;
  color: #00a3ff;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 2px solid #00a3ff;
}

.qc_report_wrap .result_item_comment {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 20px;
  width: 100%;
  word-wrap: break-word;
}

.qc_report_wrap .result_item_header {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 20px;
  width: 100%;
  word-wrap: break-word;
}

.qc_report_wrap .result_item_footer {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 20px;
  width: 100%;
  word-wrap: break-word;
}

.qc_report_wrap .result_table {
  width: 100%;
}

.qc_report_wrap .result_table th,
.qc_report_wrap .result_table td {
  padding: 15px;
}

.qc_report_wrap .result_table th {
  background-color: #00a3ff;
  color: #fff;
  text-align: center;
}

.qc_report_wrap .result_table th:nth-child(1) {
  text-align: left;
}

.qc_report_wrap .result_table td {
  background-color: rgba(0, 163, 255, 0.07);
}

.qc_report_wrap .result_table td:nth-child(1) {
  width: 300px;
}

.qc_report_wrap .result_table td:not(:nth-child(1)) {
  text-align: center;
}

.qc_report_wrap .result_w {
  margin-bottom: 80px;
}

.qc_report_wrap .result_w:nth-child(1) {
  margin-top: 30px;
}

.qc_report_wrap .result_w:last-child {
  margin-bottom: 0;
}

.qc_report_wrap .result_pic {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.qc_report_wrap .result_caption {
  margin-top: 15px;
  margin-bottom: 0;
  text-align: center;
  font-size: 20px;
}

.qc_report_wrap .report_item_header {
  margin-top: 15px;
  margin-bottom: 0;
  text-align: center;
  font-size: 20px;
}

.qc_report_wrap .reference_caption {
  margin-top: 15px;
  margin-bottom: 0;
  text-align: left;
  font-size: 20px;
}

.qc_report_wrap .report_item.ied_number_timing>.result_w {
  display: inline-block;
  width: calc(50% - 5px);
}

.report_item.ied_number_timing>.result_w .result_caption {
  font-size: 14px;
}

.inline-container{
  display: flex;
  align-items: center;
}
.inline-container a {
  margin-right: auto;
}

.inline-container ul {
  margin-left: auto;
}

.bootstrap-iso .fixed-top{
  background-color: white;
}

.bootstrap-iso .nav{
  padding-left: 15px;
}

.report-change{
  text-align: right !important;
}

.container-fluid{
  margin-left: 20px !important;
  margin-right: 20px !important;
  margin-bottom: 20px;
}

.footer-text{
  padding:20px;
  text-align: center;
  font-size: smaller;
}
.row:after{
  clear:both
}
.center-block{
  display:block;
  margin-right:auto;
  margin-left:auto
}

.nav-pills .nav-link{
  border-radius: 0.15rem !important;
  padding: 5px;
}

.qc_report_wrap .report_item {
  margin-top: 20px;
  margin-left: 15px;
}

.qc_report_wrap .report_text {
  margin-top: 1px;
  margin-left: 12px;
}


/*demo*/
.mt-100{
  margin-top: 200px;
}
.cprogress {
  width: 150px;
  height: 150px !important;
  float: left;
  line-height: 150px;
  background: none;
  margin: 1px;
  box-shadow: none;
  position: relative;
}
.cprogress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cprogress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cprogress .cprogress-left {
  left: 0;
}
.cprogress .cprogress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cprogress .cprogress-left .cprogress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cprogress .cprogress-right {
  right: 0;
}
.cprogress .cprogress-right .cprogress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 0.5s linear forwards;
}
.cprogress .cprogress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  font-weight: bolder;
  color: #000;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}
.cprogress.blue .cprogress-bar {
  border-color: #049dff;
}
.cprogress.blue .cprogress-left .cprogress-bar {
  animation: loading-2 0.3s linear forwards 0.5s;
}
.cprogress.yellow .cprogress-bar {
  border-color: #fdba04;
}
.cprogress.yellow .cprogress-right .cprogress-bar {
  animation: loading-3 0.5s linear forwards;
}
.cprogress.yellow .cprogress-left .cprogress-bar {
  animation: none;
}
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
}

/*progres for score*/
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:20;
  --b:10px;
  --c:darkred;
  --w:150px;

  display:inline-grid;
  width: 150px;
  height: 150px !important;
  float: left;
  line-height: 150px;
  background: white;
  margin: 1px;
  box-shadow: none;
  position: relative;
  place-content:center;
  font-size:15px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}