@mobile: ~"screen and (max-width: 575px)";
@tablet: ~"screen and (min-width: 576px) and (max-width: 1025px)";

:host ::ng-deep {
  .progress-progressbar {
    .ant-progress-bg {
      background-color: green;
    }

    .ant-progress-status-success .ant-progress-bg {
      background-color: #52c41a;
    }
  }

  .progress-progressbar-failed {
    .ant-progress-bg {
      background-color: rgba(255, 0, 0, 0.7);
    }
  }

  .cp-amount {
    .ant-progress-bg {
      background-color: #9254AD;
    }
  }

  .ant-progress-status-success .ant-progress-text {
    color: inherit;
  }

  .ant-card-body {
    @media @mobile {
      padding: 12px;
    }
  }

  .ant-input-group {
    width: auto;
  }
}

.quality-bar {
  position: relative;

  .threshold-marker {
    position: absolute;
    height: 17px;

    .marker {
      background-color: var(--primary-color);
      height: 100%;
      width: 2px;
      z-index: 1000;
    }

    .value {
      font-size: .8em;
      padding-left: 2px;
      margin-top: -7px;
      height: 10px;
    }
  }
}

.durability {
  .durability-value {
    font-size: 2rem;
  }

  .durability-value-failed {
    color: rgba(255, 0, 0, .7);
  }
}

.report {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 40px;
}

.mobile-stats {
  text-align: center;
}
