.summarization-note-assignments {
  width: 100%;
  max-width: 500px;
  margin-top: 20px;
}

.container-form-box.summarization-note-assignments-page > .title {
  margin-top: 20px;
  margin-bottom: 15px;
}

.summarization-note-assignments .note-name-field {
  margin-bottom: 10px;
}

.summarization-note-assignments .summarization-note-additional-instructions-field textarea {
  height: auto;
  min-height: 120px;
}

.summarization-note-assignments .char-counter {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: right;
}

.summarization-note-assignments .char-counter.over-limit {
  color: var(--color-text-error-primary);
  font-weight: var(--weight-medium);
}

.summarization-note-additional-instructions-edit {
  margin: 8px 0 12px;

  > summary {
    cursor: pointer;
    padding: 6px 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    user-select: none;
  }

  > summary:hover {
    color: var(--color-text-primary);
  }

  &[open] > summary {
    margin-bottom: 6px;
    color: var(--color-text-primary);
  }
}

.summarization-note-assignments .form-container > .row:first-child p {
  margin-bottom: 5px;
}

.summarization-note-assignments .notification.warning {
  padding: 12px 16px;
  border: 1px solid var(--color-bg-warning-primary);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--color-bg-warning-primary);
  color: var(--color-text-warning-primary);
  margin-bottom: 10px;
}