#quality-board-v11[hidden],
#quality-review-v11[hidden] {
  display: none !important;
  pointer-events: none;
}

.quality-board {
  overflow: visible;
}

.quality-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 21px 20px 17px;
  border-bottom: 1px solid #eeebe5;
}

.quality-heading > div:first-child h2 {
  margin: 8px 0 0;
  color: #303430;
  font-size: 17px;
  font-weight: 750;
}

.quality-heading > div:first-child p {
  margin-top: 6px;
  color: #767a74;
  font-size: 9px;
}

.quality-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.quality-filter button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #797d77;
  font-size: 8px;
  font-weight: 700;
}

.quality-filter button.active {
  background: #f1eee9;
  color: #303430;
}

.quality-filter button i {
  margin-left: 4px;
  color: #9b8073;
  font-size: 8px;
  font-style: normal;
}

.quality-list {
  padding: 9px 14px 14px;
}

.quality-card {
  margin-top: 9px;
  padding: 14px 15px 11px;
  border: 1px solid #ece9e3;
  border-radius: 10px;
  background: #fff;
}

.quality-card.revision {
  border-color: #ebd5ce;
  background: #fffdfb;
}

.quality-card-main {
  display: grid;
  grid-template-columns: minmax(165px, 1.4fr) 84px 113px 103px 96px 101px 44px;
  align-items: center;
  gap: 11px;
}

.quality-client {
  min-width: 0;
}

.quality-client > button {
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2d312d;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-client > button:hover {
  color: #bb6048;
}

.quality-client > small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #777b75;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-priority {
  margin-left: 6px;
  color: #bb6048;
  font-size: 7px;
  font-weight: 750;
}

.quality-kind {
  width: max-content;
  padding: 6px 8px;
  border-radius: 7px;
  background: #edf0f3;
  color: #566b79;
  font-size: 8px;
  font-weight: 700;
}

.quality-assignee,
.quality-deadline,
.quality-delivery {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.quality-assignee > small,
.quality-deadline > small,
.quality-delivery > small {
  color: #848780;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.quality-assignee > b,
.quality-deadline > b,
.quality-delivery > b {
  overflow: hidden;
  color: #343934;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-deadline > i {
  color: #777b75;
  font-size: 8px;
  font-style: normal;
}

.quality-deadline.overdue > b,
.quality-deadline.overdue > i {
  color: #b74438;
}

.quality-deadline.today > b,
.quality-deadline.today > i,
.quality-deadline.soon > b,
.quality-deadline.soon > i {
  color: #b9613d;
}

.quality-deadline.done > i {
  color: #367458;
}

.quality-state {
  display: inline-flex;
  justify-content: center;
  padding: 7px 6px;
  border-radius: 8px;
  background: #eef0ee;
  color: #666c67;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.quality-state.waiting {
  background: #eaf0f5;
  color: #46677e;
}

.quality-state.revision {
  background: #fae9e4;
  color: #a14935;
}

.quality-state.approved {
  background: #e5f1ea;
  color: #347257;
}

.quality-score {
  color: #303430;
  font-size: 16px;
  font-weight: 750;
  text-align: right;
}

.quality-score > small {
  color: #8a8e87;
  font-size: 8px;
}

.quality-score.approved {
  color: #39755c;
}

.quality-score.revision {
  color: #a94d39;
}

.quality-score.empty {
  color: #a4a69f;
}

.quality-card > footer {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f1efeb;
}

.quality-draft,
.quality-no-draft,
.quality-last-review,
.quality-feedback,
.quality-readonly {
  font-size: 8px;
}

.quality-draft {
  color: #496b82;
  font-weight: 700;
  text-decoration: none;
}

.quality-no-draft,
.quality-last-review,
.quality-readonly {
  color: #81857e;
}

.quality-feedback {
  color: #b4503d;
  font-weight: 700;
}

.quality-card-spacer {
  flex: 1;
}

.quality-action {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #e7d5ce;
  border-radius: 7px;
  background: #fff9f6;
  color: #a8503c;
  font-size: 8px;
  font-weight: 750;
}

.quality-action:hover {
  border-color: #d59a88;
  background: #faeee8;
}

.quality-existing-note {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: #fbefeb;
  color: #934a39;
  font-size: 9px;
  line-height: 1.6;
}

.quality-empty {
  display: flex;
  min-height: 165px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #737771;
  font-size: 10px;
}

.quality-empty > b {
  color: #3c403c;
  font-size: 13px;
}

.quality-empty > span {
  margin-top: 8px;
  color: #8c8f88;
  font-size: 9px;
}

.quality-overlay {
  z-index: 90;
}

.quality-review-modal {
  width: min(550px, 95vw);
}

.quality-review-person {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
  padding: 13px;
  border: 1px solid #eae7e1;
  border-radius: 9px;
  background: #faf9f6;
}

.quality-review-person > b {
  color: #323632;
  font-size: 11px;
}

.quality-review-person > small {
  color: #767a73;
  font-size: 9px;
}

.quality-review-scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 19px;
}

.quality-review-scores > label {
  display: grid;
  gap: 6px;
  color: #666b65;
  font-size: 8px;
  font-weight: 700;
}

.quality-review-scores input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e6e2db;
  border-radius: 7px;
  color: #353a35;
  font-size: 13px;
  font-weight: 700;
}

.quality-review-scores > label > small {
  color: #858981;
  font-size: 8px;
}

.quality-review-note {
  display: grid;
  gap: 7px;
  margin-top: 17px;
  color: #666b65;
  font-size: 9px;
  font-weight: 700;
}

.quality-review-note textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px;
  border: 1px solid #e6e2db;
  border-radius: 8px;
  color: #343934;
  font-size: 9px;
  line-height: 1.6;
}

.quality-review-message {
  min-height: 15px;
  margin: 10px 0 0;
  color: #ac4b37;
  font-size: 9px;
}

.quality-review-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
  padding-top: 15px;
  border-top: 1px solid #ece9e3;
}

.quality-request-revision {
  border-color: #e8d0c8;
  color: #a64d39;
}

@media (max-width: 1200px) {
  .quality-card-main {
    grid-template-columns: minmax(145px, 1.2fr) 80px 100px 100px 95px 95px 40px;
    gap: 8px;
  }
}

@media (max-width: 980px) {
  .quality-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .quality-card-main {
    grid-template-columns: minmax(150px, 1fr) 100px 105px;
    gap: 12px;
  }

  .quality-kind {
    justify-self: start;
  }

  .quality-score {
    text-align: left;
  }
}

@media (max-width: 580px) {
  .quality-card {
    padding: 12px;
  }

  .quality-card-main {
    grid-template-columns: 1fr 1fr;
  }

  .quality-client {
    grid-column: 1 / -1;
  }

  .quality-card > footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .quality-review-scores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}