
.anno_container  {
    max-height: 75vH;
}
.anno_list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 50px;    
    background-color: initial;
}
.anno_annotation {
    border: 1px solid #fcfcfc;
    padding: 20px;
    border-left: 5px solid var(--secondary-color)
}
.anno_subject {
    padding: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;    
    /* border: 1px solid #faf0fa; */
    margin: 5px;
    border-radius: 3px;
}
/* .anno_subject .cn_row {
    border-bottom: 1px solid var(--secondary-color);
    padding-top: 10px;
    padding-bottom: 25px;
} */
.anno_subject_title {
    font-style: italic;
    font-weight: 700;
}
.anno_date {
    font-size: 8pt;
    font-style: italic;
    color: #777;
    padding-left: 10px;
    display: flex;
    justify-content: right;
    gap: 5px
}
.anno_subject .anno_date {    
    padding-top: 3px;    
}
.anno_comments_list {
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 5px
}
.anno_comment {
    width:fit-content;
    border-radius: 0px;    
    padding: 20px;
    background-color: #f4f5ff;
}
.anno_comment:nth-child(odd) {
    align-self: flex-start;
    background: #fafaff;
    border: none;
    border-right: 2px solid #afb6fd;
    border-top-left-radius: 5px;
    border-top-left-radius: 5px    ;
    border-bottom-left-radius: 5px    ;
}
.anno_comment:nth-child(even) {
    align-self: flex-end;
    background: #f5fff3;    
    border-left: 2px solid #57ec70;
    border-top-right-radius: 5px;
    border-top-right-radius: 5px    ;
}
textarea.edit_comment {
    padding: 25px;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    background-color: #fcfcfc;
    border: none
}
textarea.is_editing {        
    outline: 1px solid #f3f3f3;    
  }
.anno_comment_image img {
    height: 75px;
}