/**
 * Contains variables that may be used across SCSS files for Draft Sharks
 */
.qb,
.tqb {
  background: #333;
}

.rb {
  background: #a41c1f;
}

.wr {
  background: #043173;
}

.te {
  background: #86a2cb;
}

.k,
.tk {
  background: #c87779;
}

.def,
.s,
.de,
.dl,
.dt,
.lb,
.olb,
.cb,
.db {
  background: #888;
}

.hc {
  background: #582325;
}

/**
 * Export position colors for use in JS
 * This does not work, as text/css mime types are not supported.
 * But would be great if we could easily import these color values.
 */
:export {
  totalColor: #3d74c7;
  qbColor: #333333;
  rbColor: #a41c1f;
  wrColor: #043173;
  teColor: #86a2cb;
  pickColor: #687087;
  defColor: #888;
  kickerColor: #c87779;
  tqbColor: #000;
  hcColor: #000;
  tkColor: #000;
  lbColor: #000;
  dbColor: #000;
  qrwtColor: #ffff00;
  rwtColor: #f78439;
  rwColor: #00ff00;
  wtColor: #800080;
  dldColor: #663399;
}

/**
 * These mixins have been taken from the figma so we can apply font
 * stuff as wel like to certain elements
 */
.progress {
  /* Text inside the control */
  /* when p>50, don't clip left half*/
  /* Progress bar filling the whole right half for values above 50% */
}
.progress .progress-circle {
  margin: 5px;
  width: 160px;
  height: 160px;
  line-height: 160px;
}
.progress .progress-circle:after {
  top: 12.8px;
  left: 12.8px;
  width: 133.6px;
  height: 136px;
}
.progress .progress-circle .ds-model-circle-text {
  width: 160px;
  height: 160px;
}
.progress .left-half-clipper {
  width: 160px;
  height: 160px;
  clip: rect(0, 160px, 160px, 80px);
}
.progress .value-bar {
  clip: rect(0, 80px, 160px, 0);
  width: 160px;
  height: 160px;
}
.progress .progress-circle.over50 .first50-bar {
  clip: rect(0, 160px, 160px, 80px);
  width: 160px;
  height: 160px;
}
.progress .ds-model-main {
  font-size: 36px;
  font-weight: 700;
  color: #043173;
  margin-bottom: 0;
}
.progress .ds-model-caption {
  font-size: 12px;
  font-weight: 700;
  color: #043173;
}
.progress .progress-circle {
  font-size: 20px;
  position: relative;
  /* so that children can be absolutely positioned */
  padding: 0;
  background-color: #e9f1ff;
  border-radius: 50%;
}
.progress .progress-circle:after {
  border: none;
  position: absolute;
  text-align: center;
  display: block;
  border-radius: 50%;
  background-color: white;
  content: " ";
}
.progress .progress-circle .ds-model-circle-text {
  position: absolute;
  line-height: normal;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #043173;
  z-index: 2;
}
.progress .left-half-clipper {
  border-radius: 50%;
  position: absolute;
}
.progress .progress-circle.over50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}
.progress .value-bar {
  /*This is an overlayed square, that is made round with the border radius,
       then it is cut to display only the left half, then rotated clockwise
       to escape the outer clipping path.*/
  position: absolute;
  /*needed for clipping*/
  border-radius: 50%;
  border: 1em solid #3d74c7;
  /*The border is 0.35 but making it larger removes visual artifacts */
  /* for debug */
  box-sizing: border-box;
}
.progress .value-bar.first-bucket {
  border-color: #3ec591 !important;
}
.progress .value-bar.second-bucket {
  border-color: #89d1b5 !important;
}
.progress .value-bar.third-bucket {
  border-color: #a7c8bd !important;
}
.progress .value-bar.fourth-bucket {
  border-color: #d4d4d4 !important;
}
.progress .value-bar.fifth-bucket {
  border-color: #dfb5b7 !important;
}
.progress .value-bar.sixth-bucket {
  border-color: #f78383 !important;
}
.progress .value-bar.seventh-bucket {
  border-color: #ff6161 !important;
}
.progress .progress-circle.over50 .first50-bar {
  /*Progress bar for the first 50%, filling the whole right half*/
  position: absolute;
  /*needed for clipping*/
  background-color: #3d74c7;
  border-radius: 50%;
}
.progress .progress-circle.over50 .first50-bar.first-bucket {
  background-color: #3ec591 !important;
}
.progress .progress-circle.over50 .first50-bar.second-bucket {
  background-color: #89d1b5 !important;
}
.progress .progress-circle.over50 .first50-bar.third-bucket {
  background-color: #a7c8bd !important;
}
.progress .progress-circle.over50 .first50-bar.fourth-bucket {
  background-color: #d4d4d4 !important;
}
.progress .progress-circle.over50 .first50-bar.fifth-bucket {
  background-color: #dfb5b7 !important;
}
.progress .progress-circle.over50 .first50-bar.sixth-bucket {
  background-color: #f78383 !important;
}
.progress .progress-circle.over50 .first50-bar.seventh-bucket {
  background-color: #ff6161 !important;
}
.progress .progress-circle:not(.over50) .first50-bar {
  /*Progress bar for the first 50%, filling the whole right half*/
  position: absolute;
  /*needed for clipping*/
  background-color: #3d74c7;
  border-radius: 50%;
}
.progress .progress-circle:not(.over50) .first50-bar.first-bucket {
  background-color: #3ec591 !important;
}
.progress .progress-circle:not(.over50) .first50-bar.second-bucket {
  background-color: #89d1b5 !important;
}
.progress .progress-circle:not(.over50) .first50-bar.third-bucket {
  background-color: #a7c8bd !important;
}
.progress .progress-circle:not(.over50) .first50-bar.fourth-bucket {
  background-color: #d4d4d4 !important;
}
.progress .progress-circle:not(.over50) .first50-bar.fifth-bucket {
  background-color: #dfb5b7 !important;
}
.progress .progress-circle:not(.over50) .first50-bar.sixth-bucket {
  background-color: #f78383 !important;
}
.progress .progress-circle:not(.over50) .first50-bar.seventh-bucket {
  background-color: #ff6161 !important;
}

.linear-progress-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
}
.linear-progress-container .analytic-score {
  display: flex;
  flex-direction: column;
}
.linear-progress-container .analytic-score .title {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.linear-progress-container .analytic-score label {
  font-weight: 700;
}
.linear-progress-container .analytic-score p {
  margin-bottom: 0;
}
.linear-progress-container .analytic-score progress {
  width: 100%;
  height: 16px;
  border-radius: 20px;
}
.linear-progress-container .analytic-score progress.first-bucket::-webkit-progress-value {
  background-color: #3ec591 !important;
}
.linear-progress-container .analytic-score progress.second-bucket::-webkit-progress-value {
  background-color: #89d1b5 !important;
}
.linear-progress-container .analytic-score progress.third-bucket::-webkit-progress-value {
  background-color: #a7c8bd !important;
}
.linear-progress-container .analytic-score progress.fourth-bucket::-webkit-progress-value {
  background-color: #d4d4d4 !important;
}
.linear-progress-container .analytic-score progress.fifth-bucket::-webkit-progress-value {
  background-color: #dfb5b7 !important;
}
.linear-progress-container .analytic-score progress.sixth-bucket::-webkit-progress-value {
  background-color: #f78383 !important;
}
.linear-progress-container .analytic-score progress.seventh-bucket::-webkit-progress-value {
  background-color: #ff6161 !important;
}
.linear-progress-container .analytic-score progress::-webkit-progress-value {
  border-radius: 20px;
  background-color: red;
}
.linear-progress-container .analytic-score progress::-webkit-progress-bar {
  background: #f1f1f1;
  border-radius: 20px;
}

/*# sourceMappingURL=circular-progress.css.map */