#treeViewerFlexWrapper .commentWebPart_avatar.userCardImg.icon.iconPerson {
  margin-left: 20px;
}

.commentWebPartOuterDiv {
  height: 100%;
}
.commentWebPartOuterDiv .commentWebPart {
  height: 100%;
  max-width: 500px;
  text-align: left;
}
.commentWebPartOuterDiv .commentWebPart_comments {
  height: calc(100% - 40px);
  max-height: 500px;
  overflow-y: auto;
  padding-right: 15px;
  scroll-behavior: smooth;
}
.commentWebPartOuterDiv .deletedUser {
  color: var(--ui-secondary-text-color);
  font-style: italic;
}
.commentWebPartOuterDiv .marginTopSml {
  margin-top: 5px;
}
.commentWebPartOuterDiv .marginRightSml {
  margin-right: 5px;
}
.commentWebPartOuterDiv .commentflexContainer {
  display: flex;
}
.commentWebPartOuterDiv .pushRight {
  margin-left: auto;
  padding-left: 20px;
}
.commentWebPartOuterDiv .iconHeart {
  color: #be3030 !important;
  cursor: pointer;
}
.commentWebPartOuterDiv .iconHeart.hollow {
  color: transparent !important;
  -webkit-text-stroke: 0.14em black;
}
.commentWebPartOuterDiv .commentWebPart_userCardComment {
  white-space: pre-wrap;
}
.commentWebPartOuterDiv .charsRemaining {
  font-size: 12px;
  font-style: italic;
  margin: -5px 0 0 0;
}
.commentWebPartOuterDiv .charsRemaining .exceedsError {
  color: #FF0000;
}
.commentWebPartOuterDiv .charsRemaining .commentWebPart_remainingChars {
  text-align: right;
  display: inline-block;
  position: relative;
  width: 100%;
}
.commentWebPartOuterDiv .charsRemaining .commentWebPart_addCommentRemainingChars {
  top: -3px;
}
.commentWebPartOuterDiv .inputOuter {
  padding: 2px 0 5px 0;
}
.commentWebPartOuterDiv .inputOuter textarea {
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
  resize: none;
  height: 31px;
  padding: 5px;
}
.commentWebPartOuterDiv .inputOuter .addCommentTextAreaInit {
  padding-right: 25px;
}
.commentWebPartOuterDiv .inputOuter .addCommentTextAreaInit::placeholder {
  color: rgb(102, 102, 102);
}
.commentWebPartOuterDiv .inputOuter .commentTextAreaWrapper {
  position: relative;
}
.commentWebPartOuterDiv .inputOuter .commentTextAreaWrapper .commentTextarea {
  max-height: 400px;
  overflow-y: auto;
  overflow-anchor: none;
}
.commentWebPartOuterDiv .inputOuter .commentTextAreaWrapper .addTagButton {
  position: absolute;
  right: 15px;
  bottom: 7px;
  user-select: none;
  color: rgb(102, 102, 102);
  margin-right: 0;
}
.commentWebPartOuterDiv .inputOuter .commentTextAreaWrapper .addTagButton:hover, .commentWebPartOuterDiv .inputOuter .commentTextAreaWrapper .addTagButton:focus {
  color: rgb(102, 102, 102);
  text-decoration: none;
}
.commentWebPartOuterDiv .inputOuter div[contenteditable] {
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
  resize: none;
  height: 32px;
  min-height: 32px;
  padding: 5px;
  padding-right: 25px;
  --ui-field-state-color: transparent;
  --ui-field-invalid-icon: url(data:image/svg+xml;charset=utf-8,%3Csvg height="20" width="20" fill="%23BE3030" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 12v2H9v-2h2zM11 11V6H9v5h2z"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M10 18c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8zm0-2c3.3 0 6-2.7 6-6s-2.7-6-6-6-6 2.7-6 6 2.7 6 6 6z"/%3E%3C/svg%3E);
  --ui-field-valid-icon: url(data:image/svg+xml;charset=utf-8,%3Csvg height="20" width="20" fill="%23262626" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M16.2 6.9l-7.7 7.7-4.7-4.7 1.4-1.4 3.3 3.3 6.3-6.3 1.4 1.4z"/%3E%3C/svg%3E);
  --ui-field-background-color: #fff;
  --ui-field-border-color: #ccc;
  background: #fff;
  background-clip: border-box, border-box, border-box, padding-box, border-box;
  background-image: var(--ui-field-right-icon, linear-gradient(transparent, transparent)), var(--ui-field-left-icon, linear-gradient(transparent, transparent)), -webkit-gradient(linear, left top, right top, from(var(--ui-field-state-color)), to(var(--ui-field-state-color))), -webkit-gradient(linear, left top, left bottom, from(var(--ui-field-background-color)), to(var(--ui-field-background-color))), -webkit-gradient(linear, left top, left bottom, from(var(--ui-field-border-color)), to(var(--ui-field-border-color)));
  background-image: var(--ui-field-right-icon, linear-gradient(transparent, transparent)), var(--ui-field-left-icon, linear-gradient(transparent, transparent)), -webkit-linear-gradient(left, var(--ui-field-state-color), var(--ui-field-state-color)), -webkit-linear-gradient(var(--ui-field-background-color), var(--ui-field-background-color)), -webkit-linear-gradient(var(--ui-field-border-color), var(--ui-field-border-color));
  background-image: var(--ui-field-right-icon, linear-gradient(transparent, transparent)), var(--ui-field-left-icon, linear-gradient(transparent, transparent)), -o-linear-gradient(left, var(--ui-field-state-color), var(--ui-field-state-color)), -o-linear-gradient(var(--ui-field-background-color), var(--ui-field-background-color)), -o-linear-gradient(var(--ui-field-border-color), var(--ui-field-border-color));
  background-image: var(--ui-field-right-icon, linear-gradient(transparent, transparent)), var(--ui-field-left-icon, linear-gradient(transparent, transparent)), linear-gradient(90deg, var(--ui-field-state-color), var(--ui-field-state-color)), linear-gradient(var(--ui-field-background-color), var(--ui-field-background-color)), linear-gradient(var(--ui-field-border-color), var(--ui-field-border-color));
  background-origin: border-box, border-box, padding-box, border-box, border-box;
  background-position: calc(100% - 5px) 50%, calc(100% - 27px) 50%, 0 100%, 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 20px 20px, 20px 20px, 0 2px, 100% calc(100% - 1px), 100% 1px;
  border-radius: 1px;
  border: solid #ccc;
  border-width: 1px 1px 0;
  color: #262626;
  font: inherit;
  font-size: 15px;
  height: 30px;
  margin: 0;
  outline: none;
  -webkit-transition: background-size ease-in-out;
  -o-transition: background-size ease-in-out;
  transition: background-size ease-in-out;
  text-align: left;
  vertical-align: middle;
  width: 100%;
}
.commentWebPartOuterDiv .inputOuter div[contenteditable] span[data-comment-web-part-tagging-id] {
  color: #0D7294;
}
.commentWebPartOuterDiv .commentWebPart_like {
  margin-left: -8px;
  margin-right: -3px;
}
.commentWebPartOuterDiv .commentWebPart_editCommentArea {
  line-height: normal;
  padding: 5px 0;
}
.commentWebPartOuterDiv .prewrap {
  white-space: pre-wrap;
}

.commentTagging {
  max-height: 300px;
  overflow-y: auto;
}
.commentTagging hr {
  margin: 10px 0;
}
.commentTagging .autocompleteBefore + .autocompleteResults:not(:empty) {
  border-top: none;
}
.commentTagging .commentAutocompleteLabel {
  color: var(--ui-secondary-text-color);
  margin-left: 12px;
}
.commentTagging .emailAutocompleteLabel {
  margin-right: 12px;
}
.commentTagging .circleText {
  color: var(--ui-secondary-text-color);
  font-size: 12px;
}
.commentTagging .commentTaggingItem {
  display: flex;
  align-items: center;
}
.commentTagging .commentTaggingItem .commentTaggingAvatar {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-right: 10px;
}
.commentTagging .commentTaggingItem .commentTaggingAvatar .icon:before {
  font-size: 18px;
  margin-left: 3px;
  margin-right: 0px;
}

.commentWebPart.taskWebPart {
  max-width: none;
}
.commentWebPart.taskWebPart .commentWebPart_comments {
  padding-right: 0;
  margin: 0 -20px;
}
.commentWebPart.taskWebPart .commentWebPart_comments .commentWebPart_comment {
  padding-left: 60px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0;
  border-bottom: 1px solid var(--ui-hr-color);
}
.commentWebPart.taskWebPart .commentWebPart_comments .commentWebPart_comment.flaggedComment {
  margin: 5px;
  border-bottom: 1px solid #BE3030;
}
.commentWebPart.taskWebPart .taskContainer .task_section {
  margin-left: -35px;
  margin-bottom: 15px;
}
.commentWebPart.taskWebPart .taskContainer .taskAssignedLabel {
  font-style: italic;
  font-size: 14.5px;
}
.commentWebPart.taskWebPart .taskContainer .taskAssignedLabel.taskComplete {
  font-style: normal;
  font-weight: bold;
}
.commentWebPart.taskWebPart .taskContainer .taskBtn, .commentWebPart.taskWebPart .taskContainer .ancBtn.taskBtn:hover, .commentWebPart.taskWebPart .taskContainer .ancBtn.taskBtn:active {
  background: transparent;
  background-color: transparent;
  border: 0.5px solid #000000;
  color: var(--ui-text-color) !important;
}
.commentWebPart.taskWebPart .taskAssignmentArea, .commentWebPart.taskWebPart .editTaskAssignmentArea {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.commentWebPart.taskWebPart .taskAssignmentArea .checkbox + label, .commentWebPart.taskWebPart .editTaskAssignmentArea .checkbox + label {
  margin-top: 0;
}
.commentWebPart.taskWebPart .taskAssignmentArea button.task-multi-assignee-trigger, .commentWebPart.taskWebPart .editTaskAssignmentArea button.task-multi-assignee-trigger {
  color: var(--ui-link-color);
}

.task-guidance {
  list-style: disc;
  margin-left: 25px;
}

.dockedTagging, .taskTagging {
  transform: translateY(calc(-100% - 31.5px));
}

.titleContainer.titleContainer {
  padding: 0;
}
.titleContainer.titleContainer .conTitle {
  padding-bottom: 0;
}
.titleContainer.titleContainer.conSecond {
  background-color: transparent;
}

.commentWebPart_addComment {
  margin-top: 20px;
}

.sidebarContent .commentWebPart:not(.not-docked) {
  position: relative;
}
.sidebarContent .commentWebPart:not(.not-docked) .commentWebPart_comments {
  max-height: none;
}
.sidebarContent .commentWebPart:not(.not-docked) .commentWebPart_addComment {
  margin-left: -20px;
  margin-top: 0;
  padding: 23px 40px 20px 60px;
  position: fixed;
  z-index: 99;
  background-color: #fff;
  border-top: 1px solid var(--ui-hr-color);
  width: 100%;
  bottom: 0;
}
.sidebarContent .commentWebPart:not(.not-docked) .commentWebPart_addComment .addCommentArea {
  margin-right: -20px;
}

.commentsTabContent:not(.not-docked) .sidebarContent {
  padding-bottom: 0;
}
.commentsTabContent:not(.not-docked) .sidebarScrollArea:after {
  height: 10px;
}
.commentsTabContent:not(.not-docked) .taskWebPart {
  margin-bottom: -10px;
}

.emailArea {
  display: none;
}

.commentWebPartOuterDiv .inputOuter div[contenteditable] {
  font-size: 16px;
}

.commentWebPart_avatar.userCardImg, .addcommentWebPart_avatar.userCardImg {
  margin-left: -36px;
}

.clickableAvatar {
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.clickableAvatar:hover {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.commentWebPart_comment.userCard:first-child {
  padding-top: 5px;
}

.commentWebPart_linkPart {
  padding-bottom: 3px;
}

.flaggedComment {
  border: 1px solid #BE3030;
  border-radius: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 5px;
}
.flaggedComment .flaggedHeader.alert {
  border: none;
  border-radius: 0;
  padding: 0;
  padding-bottom: 5px;
  padding-left: 35px;
  margin-bottom: 5px;
  margin-left: -36px;
  border-bottom: 2px solid #BE3030;
  color: #BE3030;
  background-color: transparent;
}
.flaggedComment .flaggedHeader.alert:before {
  top: 3px;
  left: 3px;
  color: #BE3030;
  padding: 0;
}

.commentWebPart_comment .commentDeletedAlert, .commentWebPart_comment .commentHiddenAlert {
  margin-bottom: 2px;
}