/* ----- Project Notes Popup ----- */
.projectNotesPopup{
  z-index: 12;
  z-index: 11;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.projectMasterPopup .projectNotesPopup{
  position:absolute;
  z-index: 5;
}
.projectNotesPopup .background{
  opacity:0.5;
}
.projectMasterPopup .projectNotesPopup .background{
  opacity:0;
}
.projectNotesPopup .contentHolder{
  /*overflow: hidden !important;*/
    position: relative;
    background: #fff;
    border-radius: 6px;
    top: 50px;
    width: 1125px;
    /*max-height: 644px;
    max-height:90%;*/
    max-height: calc(100% - 70px);
    min-height: 150px;
    margin: auto;
    border: 2px solid #fff;
    overflow: auto;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.projectNotesPopup .contentHolder::-webkit-scrollbar{
  display: none;
}

.popupCanvas .projectNotesPopup .contentHolder{
  top:0px;
}
.projectNotesPopup.addNote .contentHolder{
  min-height: 390px;
}
.projectNotesPopup .closeBtn{
    position: absolute;
    right: 3px;
    background: #fff;
    border: 2px solid #b17a16;
    border-radius: 14px;
    width: 25px;
    text-align: center;
    top: 8px;
    color: #a57216;
    cursor:pointer;
}
.projectNotesPopup .newNoteBtn{
  position: absolute;
    right: 13px;
    right:290px;
    /*border: 2px solid #0f6684;*/
    border-radius: 24px;
    width: 40px;
    height: 40px;
    text-align: center;
    top: 9px;
    color: #fff;
    cursor: pointer;
    font-size: 29px;
    line-height: 37px;
    z-index: 1;
}
.projectNotesPopup.allNotes .newNoteBtn{
  display:none;
}
.projectNotesPopup .filterArea{
  /*height: 55px;
  height: 110px;*/
  min-height: 110px;
  max-height: 170px;
    background: var(--trackrHeaderColor);
    position: relative;
    color: #6e6e6e;
    border-bottom: 1px solid #888;
    flex-shrink: 0;
    /*border-bottom: 1px solid #c1bcbc;*/
}
.projectNotesPopup .filterArea .filterTopBar{
  height: 110px;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder{
    left: 380px;
    width: 450px;
    position: absolute;
    top: 50px;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn{
  position:relative;
  float: left;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #6e6e6e;
    margin-right: 7px;
    color: #808080;
    border-radius: 4px;
    cursor:pointer;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.requiredNote.icon{
  color: #ffa500a8;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.icon{
  font-size: 22px;
    width: 56px;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.selected{
    /*background: var(--trackrDarkBlueColor);
    border: 1px solid var(--trackrDarkBlueColor);*/
    color: #4f4f4f;
    background: #fff;
    border: 1px solid #6c6d6e;
}
.projectNotesPopup.customDark .filterArea .notesFilterBtnsHolder .notesFilterBtn.selected{
    /*background: var(--trackrDarkBlueColor);
    border: 1px solid var(--trackrDarkBlueColor);*/
    color: #fff;
    background: var(--selectedColor);
    /*border: 1px solid #6c6d6e;*/
}

.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.requiredNote.selected{
  background: #ffa500;
    color: #4f4f4f;
}
.projectNotesPopup.customDark .filterArea .notesFilterBtnsHolder .notesFilterBtn.requiredNote.selected{
  background: var(--selectedColor);
  color: white;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn .notificationCounter{
  position: absolute;
    top: -7px;
    right: -7px;
    background: #fd7474;
    
    background: var(--negativeColor);
    color: #fff;
    border-radius: 21px;
    padding: 0px 6px;
    text-align: center;
    font-size: 13px;
    border: 2px solid #efefef;
    z-index: 1;
    line-height: 21px;
    display: none;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.requiredNote .notificationCounter{
  background: #ffa500;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn .counter{
  position: absolute;
    text-align: center;
    top: -25px;
    right: 14px;
    font-size: 18px;
    min-width: 25px;
    padding: 0px 3px;
    height: 25px;
    line-height: 25px;
    border-radius: 30px;
    z-index: 1;
    color: #fff;
    opacity: 0.5;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn.selected .counter{
  opacity: 1;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn .label{

}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn .notesFilterSoloBtn{
  position: absolute;
    background: #fff;
    font-size: 17px;
    width: 100%;
    border: 1px solid #000;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    z-index: 1;
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn .notesFilterSoloBtn:hover{
  color: var(--trackrDarkBlueColor);
}
.projectNotesPopup .filterArea .notesFilterBtnsHolder .notesFilterBtn:hover .notesFilterSoloBtn{
  display: block;
}





.projectNotesPopup .filterArea .notesThreadBtn{
  position: absolute;
    top: 73px;
    left: 822px;
    cursor: pointer;
    color: #808080;
}
.projectNotesPopup .filterArea .notesThreadBtn.selected{
  width: 70px;
    text-align: center;
    color: #fff;
}

.projectNotesPopup .filterArea .secondaryNotesFilterBtnsHolder{
      float: left;
    width: 221px;
    margin-left: 20px;
    position: relative;
    top: 67px;
    border-right: 1px solid #808080;
    padding-right: 10px;
    position: absolute;
    right: 0px;
}
.projectNotesPopup .filterArea .secondaryNotesFilterBtnsHolder .secondaryNoteFilterBtn{
  float: left;
    width: 60px;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    line-height: 30px;
    color: #fff;
    background: none;
    /*border: 1px solid #9b9b9b;*/
    position: relative;
    margin-right: 10px;
}
.projectNotesPopup .filterArea .secondaryNotesFilterBtnsHolder .secondaryNoteFilterBtn.selected{
  background: #fff;
    color: #4d4d4d;
    border: 1px solid #fff;
}
.projectNotesPopup .filterArea .secondaryNotesFilterBtnsHolder .secondaryNoteFilterBtn.approvedNotesFilterBtn.selected{
  background: orange;
  color: white;
  border: 1px solid orange;
}
.projectNotesPopup.customDark .filterArea .secondaryNotesFilterBtnsHolder .secondaryNoteFilterBtn.selected{
  background: var(--selectedColor);
  border: none;
}
.projectNotesPopup .filterArea .secondaryNoteFilterBtn .counter{
  position: absolute;
  text-align: center;
  top: -12px;
  right: -5px;
  font-size: 13px;
  min-width: 25px;
  padding:0px 3px;
  height: 25px;
  line-height: 25px;
  border-radius: 30px;
  z-index: 1;
  /*border: 1px solid #c7c5c5;*/
  background: #f3f3f3;
  background: #4d4d4d;
  color: #c7c5c5;
  border: 1px solid #808080;
}
.projectNotesPopup .filterArea .secondaryNoteFilterBtn.approvedNotesFilterBtn .counter{
  display: none;
}
.projectNotesPopup .filterArea .secondaryNoteFilterBtn.selected .counter{
  background: #fff;
  color: #595959;
}
.projectNotesPopup .filterArea .secondaryNoteFilterBtn.flaggedNotesFilterBtn .counter{
  background: var(--okkemSelectedColor);
  border-color: white;
  color: white;
}


.projectNotesPopup .filterArea .hiddenNotesFilterBtn .label{

}
.projectNotesPopup .filterArea .secondaryNoteFilterBtn .label .topIcon{
  position: absolute;
    top: 8px;
    left: 21px;
    color: #fff;
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke-width: 0.3px;
}
.projectNotesPopup .filterArea .notesPMFilterBtn{
    display: none;
}
.projectNotesPopup.allNotes .filterArea .notesPMFilterBtn{
  display: block;
}

.projectNotesPopup.allNotes .filterArea .flaggedNotesFilterBtn{
  display: none;
}




.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder{
  position: absolute;
    left: 35px;
    top: 40px;
} 
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder{
  float: left;
    position: relative;
    padding: 0px 15px;
    line-height: 40px;
    border: 1px solid white;
    cursor: pointer;
    width: 70px;
    text-align: center;
    color: #ffffff6b;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder:hover{
  background: #636363;
  color: #fff;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder.selected{
  background: var(--okkemSelectedColor);
  color: #fff;
    /*background: #fff;*/
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder .notesIcon{
  float: left;
    font-size: 25px;
    margin-right: 3px;
    line-height:38px;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder .notesCounter{
  position: absolute;
    top: -9px;
    left: -3px;
    background: #fd7474;
    color: #fff;
    border-radius: 21px;
    padding: 0px 6px;
    text-align: center;
    font-size: 13px;
    border: 2px solid #efefef;
    z-index: 1;
    line-height:21px;
    transform:scale(1);
    transition: transform 300ms ease;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder.sent .notesCounter{
  background: orange;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder .notesCounter.hide{
  transform:scale(0);
  transition: transform 300ms ease;
}
.projectNotesPopup .filterArea .notesReceiptsFilterBtnsHolder .notesReceiptsFilterBtnHolder .label{
  font-size: 21px;
}

.projectNotesPopup .filterArea .unreadReceiptsBtn{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 46px;
    left: 258px;
    border-radius: 20px;
    border: 1px solid var(--negativeColor);
    cursor: pointer;
}
.projectNotesPopup .filterArea .unreadReceiptsBtn.selected{
   background: var(--negativeColor);
}




.projectNotesPopup .filterArea .notesFilterInputHolder{
  position: absolute;
    top: 17px;
    top:10px;
    right: 17px;
    width: 270px;
}
.projectNotesPopup .filterArea .notesFilterInputHolder .notesFilterSearchIcon{
  position: absolute;
    top: 8px;
    left: 8px;
    /*color: var(--trackrDarkBlueColor);*/
    font-size:18px;
}
.projectNotesPopup .filterArea .notesFilterInputHolder .notesFilterClearIcon{
  position: absolute;
    top: 8px;
    right: 6px;
    /*color: var(--trackrDarkBlueColor);*/
    font-size:20px;
}
.projectNotesPopup .filterArea .notesFilterInputHolder input{
  /*border: 1px solid #dad8d8;
  border:none;*/
    border-radius: 4px;
    padding: 0px 4px 0px 29px;
    width: 270px;
    line-height: 33px;
    background: none;
    border: 1px solid #807e7e;
    color: #fff;
}


.projectNotesPopup .filterArea .filterBottomBar{
  display: none;
    width: fit-content;
    margin: 5px auto 15px;
    gap: 20px;
}
.projectNotesPopup.allNotes .filterArea .filterBottomBar{
  display: flex;
}
.projectNotesPopup .filterArea .filterBottomBar .globalSearchInput{
  width: 300px;
    height: 35px;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 5px 10px;
    color: #fff;
}
.projectNotesPopup .filterArea .filterBottomBar .globalSearchSubmitBtn{
  background: var(--positiveColor);
    color: white;
    line-height: 35px;
    border-radius: 4px;
    padding: 0px 10px;
    cursor: pointer;
}



.projectNotesPopup .notesHolder{
  /*padding: 16px;*/
    /*max-height: 500px;
    max-height: 426px;*/
    overflow: auto;
}
.projectNotesPopup .notesHolder .noteMonthHolder{

}
.projectNotesPopup .notesHolder .noteMonthHolder.empty{
  display: none;
}
.projectNotesPopup .notesHolder .noteMonthHolder .monthTitle{
  font-size: 34px;
    background: var(--trackrHeaderColor);
    color: white;
    padding-left: 20px;
}
.projectNotesPopup .notesHolder .noteMonthHolder .monthNotes{

}

.projectNotesPopup .notesHolder .noteHolder{
    clear: both;
    border-bottom: 1px solid #0000002b;
    overflow: auto;
    padding-bottom: 15px;
    position:relative;
    min-height: 90px;
    /*transition:all 300ms ease;*/
}
.projectNotesPopup .notesHolder .noteHolder.manualNote{
  padding-top: 10px;
  padding-bottom: 20px;
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote{
  padding-top: 10px;
  padding-bottom: 20px;
}
.projectNotesPopup .notesHolder .noteHolder.hidden{
  background: #efefef;
}
.projectNotesPopup .notesHolder .noteHolder.hide{
  height: 0px;
    padding: 0px;
    border: none;
    min-height: 0px;
    display: none;
    /*transition: all 300ms ease;*/
}
.projectNotesPopup .notesHolder .noteHolder.selected{
  /*background: #e6e6e6;*/
}
.projectNotesPopup .notesHolder .noteHolder.systemChange{
  background: #e0e0e0d9;
  background: #efefef;
    color: #282828;
}
.projectNotesPopup .notesHolder .noteHolder.notRelevant{
  opacity: 0.3;
}
.projectNotesPopup .notesHolder .noteHolder.allApproved{
  /*border-right: 15px solid var(--positiveColor);*/
}




.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon{
  height: 100%;
    background: red;
    width: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 0 0;
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Lead{
  border-right: 1px solid #d5d5d5;
  background: white;
  width: 8px;
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.RFQ{
  background: repeating-linear-gradient( 45deg, #fff, #fff 2px, #cecece 2px, #cecece 5px );
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Quoted{
  background:var(--quotedColor);
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Approved{
  background: #fff;
  border: 2px solid #ffb734;
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.InProgress{
  background:var(--inProgressColor);
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Paused{
  background: repeating-linear-gradient(45deg, #f9b334, #f9b334 4px, #fdd69000 0px, #fdd69000 6px );
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Complete{
  background: repeating-linear-gradient( 45deg, #56c25700, #56c25700 2px, #8ac925 0px, #8ac925 7px );
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Paid{
  background:var(--paidColor);
}
.projectNotesPopup .notesHolder .noteHolder .projectStatusRibbon.Declined{
  background:var(--declinedColor);
}

.projectNotesPopup .notesHolder .noteHolder .flaggedHolder{
  position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 30px;
    background: #efefef;
    border-right: 2px solid white;
    cursor: pointer;
}
.projectNotesPopup .notesHolder .noteHolder .flaggedHolder:hover{
  filter: brightness(0.9);
}
.projectNotesPopup .notesHolder .noteHolder.isFlagged .flaggedHolder{
  background: var(--okkemSelectedColor);
}
.projectNotesPopup .notesHolder .noteHolder .flaggedHolder i{
  position: absolute;
    top: 16px;
    left: 8px;
    color: #000000a3;
    opacity: 0;
}
.projectNotesPopup .notesHolder .noteHolder .flaggedHolder:hover i{
  opacity: 1;
}
.projectNotesPopup .notesHolder .noteHolder.isFlagged .flaggedHolder i{
  color: #fff;
  opacity: 1;
}
.projectNotesPopup .notesHolder .noteHolder .deleteBtn{
    position: absolute;
    right: 0px;
    color: #ffb0be;
    display:none;
    cursor:pointer;
}
.projectNotesPopup .notesHolder .noteHolder:hover .deleteBtn{
    /*display:block;*/
}

.projectNotesPopup .notesHolder .noteHolder .needsApprovalByHolder{
  position: absolute;
  top: 10px;
  right: 40px;
  text-align: right;
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote .needsApprovalByHolder{
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote .needsApprovalByHolder{

}
.projectNotesPopup .notesHolder .noteHolder.approved .needsApprovalByHolder{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote .needsApprovalByHolder{

}
.projectNotesPopup .notesHolder .noteHolder .needsApprovalByHolder .needsApprovalBySelect{
  border: 1px solid #aeaeae;
    color: #808080;
    border-radius: 4px;
    line-height: 30px;
    height: 30px;
}
.projectNotesPopup .notesHolder .noteHolder.isActionable .needsApprovalByHolder .needsApprovalBySelect{
  background: #ffa500;
  color: #fff;
  border-color: #ffa500;
}
.projectNotesPopup .notesHolder .noteHolder .approvedByHolder{
  position: absolute;
    top: 10px;
    right: 40px;
    text-align: right;
    /*background: var(--positiveColor);*/
    color: var(--positiveColor);
    padding: 0px 15px;
    border-radius: 4px;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote .approvedByHolder{
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder .approvedByHolder .approvedByName{
  
}
.projectNotesPopup .notesHolder .noteHolder .approvedByHolder .approvedByDate{
  
}

.projectNotesPopup .notesHolder .noteHolder .noteTypeIcon{
  font-size: 27px;
    background: #727272;
    color: #fff;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;
    text-align: center;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .noteTypeIcon i{
  position: relative;
  top: 15px;
}
.projectNotesPopup .notesHolder .noteHolder .leftBox{
  float: left;
    text-align: center;
    font-size: 12px;
    margin-right: 47px;
    color: #a0a0a0;
    width: 89px;
    margin-top: 0px;
    position: absolute;
    top: 0px;
    height: 100%;
    background: #efefef;
    padding-top: 12px;
    padding-left: 10px;
    padding-right: 10px;
    background: none;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .leftBox .userName{
  background: #4d4d4d;
    border-radius: 4px;
    color: #fff;
}
.projectNotesPopup .notesHolder .noteHolder .leftBox .date{
  margin-top: 3px;
    color: #747474;
    font-size: 14px;
}
.projectNotesPopup .notesHolder .noteHolder .leftBox .time{
  opacity: 0.8;
  position: relative;
  top: -2px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox{
  float: left;
    width: 700px;
    margin-left: 40px;
    margin-right: 30px;
    min-height: 50px;
    margin-top: 10px;
    position: relative;
}
.projectNotesPopup .notesHolder .noteHolder .projectAndTaskHolder{
  margin-left: 50px;
  margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 16.5px;
}
.projectNotesPopup .notesHolder .noteHolder .projectAndTaskHolder .projectName{
  color: var(--trackrDarkBlueColor);
    cursor: pointer;
    display: none;
    font-size: 15px;

}
.projectNotesPopup.allNotes .notesHolder .noteHolder .projectAndTaskHolder .projectName{
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder.noTask .projectAndTaskHolder .projectName{
  /*display: block;*/
}
.projectNotesPopup .notesHolder .noteHolder .projectAndTaskHolder .projectName:hover{
  color: var(--trackrBlueColor);
}
.projectNotesPopup .notesHolder .noteHolder .projectAndTaskHolder .taskName{
  margin-left: 0px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
}
.projectNotesPopup .notesHolder .noteHolder.noTask .projectAndTaskHolder .taskName{
  display: none;
}
.projectNotesPopup.allNotes .notesHolder .noteHolder .projectAndTaskHolder .taskName{
 margin-left: 20px;
}
.projectNotesPopup .notesHolder .noteHolder .projectAndTaskHolder .taskName:hover{
  color: var(--trackrBlueColor);
}



.projectNotesPopup .notesHolder .noteHolder .noteTaskHolder .projectName{
  overflow: auto;
    width: auto;
    height: 22px;
    clear: both;
    color: var(--trackrDarkBlueColor);
    display:none;
    margin-left: 25px;
}
.projectNotesPopup.allNotes .notesHolder .noteHolder .noteTaskHolder .projectName{
  display:block;
}

.projectNotesPopup .notesHolder .noteHolder .rightBox .description{
  white-space: pre-line;
  margin-left: 50px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .messageObjName{
  margin-bottom: 5px;
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .warning{
  background: #ffa50026;
    border: 2px solid #ffa500;
    overflow: auto;
    line-height: 32px;
    padding: 0px 20px;
    margin-left: 0px;
    border-radius: 4px;
    margin-bottom: 5px;
    display: inline-block;
    margin-right: 10px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .reasons{
  margin-bottom: 10px;
    overflow: auto;
    cursor: pointer;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .reasons .reason{
  float: left;
    margin-right: 10px;
    border: 1px solid #808080;
    border-radius: 4px;
    padding: 0px 10px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .reasons:hover .reason{
  background: #e0e0e0;
  transition: background 300ms ease;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .message .messageDirections{
  margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #80808045;
    padding: 0px 20px 15px 40px;
    text-align: center;
    color: #8080808f;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .userResponse{
  margin-bottom: 0px;
    margin-top: 10px;
    clear: both;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description{
    background: #80808024;
    border: 1px solid #c1c1c1;
    border-radius: 4px;
    padding: 15px 20px;
    min-height: 50px;
    width: 700px;
    padding-top: 15px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    position: relative;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.manualNote .description{
  cursor: pointer;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .description{
  cursor: pointer;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.isApproved.requiredNote .description{
  /*border-left: 10px solid var(--positiveColor);*/
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.hasAction.noReceipts .description{
  background: var(--negativeColor);
  color: #fff;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.email .description{
  background: white;
  border: 1px solid #bcbcbc;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .description:hover{
  /*background: #80808059;*/
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.manualNote .description:hover{
  /*background: #80808040;*/
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description .noteStatus{
  position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 32px;
    border-right: 1px solid #80808059;
    background: #e1e1e17a;
    cursor: pointer;
    color: #616161;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.manualNote .description .noteStatus,
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .description .noteStatus,
.projectNotesPopup .notesHolder .noteHolder .threadNote.systemChange .description .noteStatus,
.projectNotesPopup .notesHolder .noteHolder .threadNote.hasAction .description .noteStatus{
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .description .noteStatus{
  background: var(--inProgressColor);
  border-right: 1px solid #fff;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.hasAction .description .noteStatus{
  background: var(--inProgressColor);
  border-right: 1px solid #fff;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.isApproved .description .noteStatus{
  background: var(--positiveColor);
  border-right: 1px solid #fff;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.isApproved.requiredNote .description .noteStatus,
.projectNotesPopup .notesHolder .noteHolder .threadNote.isApproved.hasAction .description .noteStatus{
  color: #fff;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description .noteStatus:hover{
  filter: brightness(0.9);
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description .noteStatus i{
  position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    top: 15px;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .description .noteStatus i{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description .descriptionText{
  margin-left: 30px;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.timeEntry .description .descriptionText,
.projectNotesPopup .notesHolder .noteHolder .threadNote.invoice .description .descriptionText{
  margin-left: 10px;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .description .toUser{
  padding: 1px 6px;
    border-radius: 4px;
    margin-right: 2px;
    color: white;
    background: gray;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .smallNoteTypeIcon{
  margin-right: 10px;
  font-size: 20px;
    position: absolute;
    top: -2px;
    left: 9px;
    top: 10px;
    left: 21px;
    display: block;
    
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.manualNote .smallNoteTypeIcon,
.projectNotesPopup .notesHolder .noteHolder .threadNote.note .smallNoteTypeIcon,
.projectNotesPopup .notesHolder .noteHolder .threadNote.hasAction .smallNoteTypeIcon{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.requiredNote .smallNoteTypeIcon{
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder.systemChange .rightBox .smallNoteTypeIcon{
  /*color: #fff;*/
  /*text-shadow: 1px 1px 10px #00000038;*/
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .noteReplyBtn{
  position: absolute;
    left: -25px;
    bottom: 0px;
    width: 70px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
     opacity: 0; 
    background: #eee;
    color: #a29f9fdb;
    font-size: 17px;
    z-index: 1;
    border: 2px solid white;
    transition: opacity 300ms ease;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote:hover .noteReplyBtn{
  opacity: 1;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.replyNote .noteReplyBtn{
  /*top: 5px;*/
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.singleNote .noteReplyBtn{
  /*left: 380px;*/
}
.projectNotesPopup .notesHolder .noteHolder.requiredNote .threadNote.singleNote .noteReplyBtn{
  left: -25px;
}
.projectNotesPopup .notesHolder .noteHolder.note .threadNote.singleNote .noteReplyBtn{
  left: -25px;
}


.projectNotesPopup .notesHolder .noteHolder .threadNote .noteApprovalBtn{
  position: absolute;
    right: -50px;
    top: 2px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 20px;
    font-size: 17px;
    color: #989898;
    opacity: 0;
    z-index: 1;
    transition: opacity 500ms ease;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote.systemChange .noteApprovalBtn,
.projectNotesPopup .notesHolder .noteHolder .threadNote.invoice .noteApprovalBtn,
.projectNotesPopup .notesHolder .noteHolder .threadNote.timeEntry .noteApprovalBtn{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder:hover .threadNote .noteApprovalBtn{
  opacity: 1;
}
.projectNotesPopup .notesHolder .noteHolder .threadNote .noteApprovalBtn:hover{
  filter: brightness(0.9);
}
.projectNotesPopup .notesHolder .noteHolder:not(.note):not(.requiredNote) .threadNote.singleNote .noteApprovalBtn{
  right: -300px;
    top: -25px;
    font-size: 22px;
    width: 35px;
    height: 35px;
    line-height: 32px;
}

.projectNotesPopup .notesHolder .noteHolder .rightBox .smallNoteTypeIcon .requiredNote{
  /*background: #ffa500;*/
    color: #ffa500;
    line-height: 30px;
    width: 30px;
    text-align: center;
    position: relative;
    left: -4px;
    border-radius: 4px;
    background: #ffa500;
    color: #fff;
    width: 33px;
    height: 33px;
    line-height: 33px;
    border-radius: 20px;
    left: -10px;
}


.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder{
  
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote{
  position: relative;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .replyNote{
  margin-bottom: 10px;
  position: relative;
  width: 700px;
  margin-left: 20px;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .replyNote .smallNoteTypeIcon{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote .replyNoteInfo{
  position: absolute;
    color: #00000040;
    color: #00000069;
    bottom: -1px;
    right: -50px;
    background: #fff;
    padding-left: 10px;
    border-radius: 4px;
    z-index: 1;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote.replyNote .replyNoteInfo{

}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote.singleNote .replyNoteInfo{
  right: -130px;
}
.projectNotesPopup .notesHolder .noteHolder.systemChange .noteThreadHolder .threadNote.singleNote .replyNoteInfo{
  /*display: none;*/
  background: none;
    color: #9c9c9c;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote .replyNoteInfo .replyNoteUserName{
  float: left;
  margin-right: 10px;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote .replyNoteInfo .replyNoteDate{
  float: left;
}
.projectNotesPopup .notesHolder .noteHolder .noteThreadHolder .threadNote.selected .description{
  border-left: 5px solid #c4c4c4;
}
.projectNotesPopup .notesHolder .noteHolder.systemChange .noteThreadHolder .threadNote.replyNote .replyNoteDescription{
  background: #8080801f;
}
.projectNotesPopup .notesHolder .threadNote .requiredActionHolder{
  overflow: auto;
    margin-top: 15px;
    position: relative;
    top: 15px;
}
.projectNotesPopup .notesHolder .threadNote .requiredActionHolder .requiredActionSelect{
  border: none;
    background: var(--negativeColor);
    background: #868686;
    color: #fff;
    line-height: 20px;
    height: 28px;
    padding: 0px 10px;
    border-radius: 4px;
    border: 2px solid #80808000;
    cursor: pointer;
}
.projectNotesPopup .notesHolder .threadNote .requiredActionHolder .requiredActionSelect:hover{
  border: 2px solid #808080;
}
.projectNotesPopup .notesHolder .threadNote .requiredActionHolder .requiredActionSelect.positive{
  background: var(--positiveColor);
}
.projectNotesPopup .notesHolder .threadNote .requiredActionHolder .requiredActionSelect.negative{
  background: var(--negativeColor);
}


.projectNotesPopup .notesHolder .noteHolder .moreInfo{
  border: 1px solid #808080;
    display: inline-block;
    margin-left: 50px;
    margin-top: 4px;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 0px 5px;
    opacity: 0.5;
    position: absolute;
    top: 60px;
    left: -138px;
    background: #80808033;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .moreInfo.empty{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder{
  margin-top: 10px;
  margin-left: 50px;
  min-height: 38px;
  display: block;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder{
  margin-top: 10px;
    margin-left: 50px;
    min-height: 38px;
    display: block;
    position: absolute;
    right: -296px;
    top: -7px;
    width: 235px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder.hide{
  display: none;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder .assignedUser{
  border: 2px solid #f39b9b;
    border-radius: 4px;
    float: left;
    padding: 0px 10px;
    color: #f39b9b;
    margin-right: 10px;
    margin-bottom: 8px;
    cursor:pointer;
    position: relative;
    font-size: 15px;
    background: #fff;
    height: 27px;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .threadNote.isApproved .assignedUsersHolder .assignedUser{
  border: 2px solid gray;
  color: gray;
}
/*
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder .assignedUser .userName{
  border: 1px solid #f39b9b;
    border-radius: 4px;
    float: left;
    padding: 0px 10px;
    color: #f39b9b;
    margin-right: 10px;
    cursor:pointer;
    position: relative;
}
*/
.projectNotesPopup .notesHolder .noteHolder .rightBox .threadNote .assignedUsersHolder .assignedUser.read{
  color: #fff;
  border: 1px solid var(--positiveColor);
  background: var(--positiveColor);
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder .assignedUser:hover{
  border:2px solid #d05050;
  color:#d05050;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder .assignedUser.read:hover{
  color: #fff;
  border: 1px solid #81e481;
  background: #81e481;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .assignedUsersHolder .assignedUser .readDate{
  position: absolute;
    top: 26px;
    left: 0px;
    color: #cccaca;
    z-index: 41;
    width: 100%;
    text-align: center;
    font-size: 11px;
    display: none;
}

.projectNotesPopup .notesHolder .noteHolder .farRightBox{
  float: left;
    margin-left: 10px;
    background: #f1f1f1;
    border-radius: 4px;
    cursor: pointer;
    /*border: 1px solid #00000024;*/
    margin-top: 10px;
    overflow: hidden;
    border-radius: 4px;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox:hover{
  border: 2px dashed #dad9d9;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteTypeHolder{
  clear: both;
    height: 21px;
    margin-bottom: 5px;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteType{
  float:right;
  /*background: var(--trackrDarkBlueColor);
  color: #fff;*/
  padding: 0px 5px;
  border-radius: 4px;
  border: 1px solid #b8b8b8;
  color: #b1b1b1;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteDetails{
  float: right;
    margin-right: 10px;
    color: #b1b1b1;
    font-size: 12px;
    position: relative;
    top: 2px;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteTaskHolder{
  clear: both;
    font-size: 13px;
    width: 300px;
    position: relative;
    line-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #000000ba;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder.selected .farRightBox .noteTaskHolder{
  background: var(--trackrDarkBlueColor);
  color: #fff;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteTaskHolder.hide{
  display:none;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .taskStatus{
  float: left;
    background: #c1c1c1;
    width: 15px;
    height: 15px;
    top: 2px;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .taskStatus.Complete{
  background: #4dbf34;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .taskStatus.InProgress{
  background: #f9b334;
}
.projectNotesPopup .notesHolder .noteHolder .farRightBox .taskStatus.NotStarted{
  background: #d6d6d6;
}

.projectNotesPopup .notesHolder .noteHolder .farRightBox .noteTaskHolder .taskName{
  font-size: 13px;
    width: 300px;
    text-align: left;
    margin-left: 25px;
    
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .descriptionHolder{
  position: relative;
} 
.projectNotesPopup .notesHolder .noteHolder .rightBox .description{
}
.projectNotesPopup .notesHolder .noteHolder.systemChange .rightBox .description{
  background: none;
  padding-top: 10px;
  /*padding-left: 5px;*/
  /*border: 1px solid #8080805c;*/
  position: relative;
  color: #868686;
  margin-bottom: 0px;
  border: none;
}
.projectNotesPopup .notesHolder .noteHolder.invoice .rightBox .description{
    background: none;
    padding-left: 5px;
    color: #808080c2;
    border: none;
}
.projectNotesPopup .notesHolder .noteHolder.todo .rightBox .description{
  background: none;
    padding-left: 5px;
    padding-top: 15px;
    color: #808080c2;
}
.projectNotesPopup .notesHolder .noteHolder.timeEntry .rightBox .description{
  background: none;
  color: #808080c2;
  top: -5px;
  left: -15px;
  border: none;
}
.projectNotesPopup .notesHolder .noteHolder .rightBox .description .label{
  font-size: 18px;
    margin-right: 0px;
}
.projectNotesPopup .notesHolder .noteHolder .hideNoteBtn{
  position: absolute;
    right: 40px;
    bottom: 3px;
    font-size: 20px;
    color: #808080;
    cursor: pointer;
    display: none;
}
.projectNotesPopup .notesHolder .noteHolder:hover .hideNoteBtn{
  display: block;
  opacity: 0.4;
}
.projectNotesPopup .notesHolder .noteHolder.hidden .hideNoteBtn{
  display: block;
  opacity: 1;
}









.projectNotesPopup .newNoteHolder{
  padding-top: 0px;
  overflow:hidden;
  height:0px;
  transition:padding-top 300ms ease, height 300ms ease;
}
.projectNotesPopup.addNote .newNoteHolder{
  padding-top: 20px;
    height: auto;
    overflow: auto;
    transition: padding-top 300ms ease, height 300ms ease;
    position: absolute;
    z-index: 2;
    border-bottom: 1px solid #d2d2d2;
    box-shadow: 2px 2px 7px #d6d6d6;
    background: #fff;
    width: 940px;
    border: 2px solid #000;
    top: 170px;
    left: 80px;
}
.projectNotesPopup .newNoteHolder .textAreaHolder{
  width: 90%;
    margin: auto;
}
.projectNotesPopup .newNoteHolder .textAreaHolder textarea:focus{
  /*border-color:#c7c7c7 !important;*/
  border: 2px solid #dcdcdc !important;
}
.projectNotesPopup .newNoteHolder .atBtn{
  position: absolute;
    bottom: 25px;
    left: 60px;
    background: #5e5e5e;
    color: #fff;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
    visibility: hidden;
    font-size: 19px;
}
.projectNotesPopup .newNoteHolder .atBtn:hover{
  background: var(--trackrDarkBlueColor);
  transform: scale(1.15);
}
.projectNotesPopup.addNote .newNoteHolder .atBtn{
  visibility: visible;
}
.projectNotesPopup .newNoteHolder .addNoteBtn{
  width: 100px;
    background: var(--positiveColor);
    color: #fff;
    border-radius: 4px;
    margin: 24px auto;
    text-align: center;
    line-height: 39px;
    cursor: pointer;
    float: left;
    margin-left: 330px;
}
 .projectNotesPopup .newNoteHolder .cancelNoteBtn{
  width: 100px;
    background: #cecece;
    background: var(--negativeColor);
    color: #fff;
    border-radius: 4px;
    margin: 24px auto;
    text-align: center;
    line-height: 39px;
    cursor: pointer;
    float: left;
    margin-left: 30px;
}
.projectNotesPopup .newNoteHolder .addNoteActionBtn{
  position: absolute;
    bottom: 25px;
    right: 250px;
    width: 50px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: #ffffff30;
    color: #c0c0c0a6;
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid #8080804f;
    visibility: hidden;
}
.projectNotesPopup.addNote .newNoteHolder .addNoteActionBtn{
  visibility: visible;
}
.projectNotesPopup .newNoteHolder .addNoteActionBtn:hover{

}
.projectNotesPopup .newNoteHolder .addNoteActionBtn.selected{
  background: orange;
    color: white;
    border: 2px solid orange;
}
.projectNotesPopup .newNoteHolder .newNoteParentHolder{
  top: 23px;
    float: right;
    position: relative;
    right: 48px;
}
.projectNotesPopup .newNoteHolder .newNoteParentHolder .newNoteSelect{
  line-height: 20px;
    height: 40px;
    text-align: right;
    width: 170px;
}



/* ---- Assigned user Popup ---- */
.assignedUserPopup{
  position: absolute;
    top: 270px;
    left: 0px;
    z-index: 5;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    padding: 10px;
    color: #808080;
}
.assignedUserPopup .title{
    text-align: center;
    margin: auto;
}
.assignedUserPopup .assignedUserBtnsHolder{

}
.assignedUserPopup .assignedUserBtnsHolder .assignedUserBtn{
  
}



.atPopup{
  position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.atPopup .background{
  position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
}
.atPopup .content{
   position: relative;
    background: #fff;
    width: 900px;
    margin: 100px auto;
    border-radius: var(--popupBorderRadius);
    border: 2px solid #000;
    padding: 20px;
    max-height: 707px;
    overflow: auto;
}
.atPopup .content .allContactsHolder{
  overflow: auto;
    max-height: 600px
}
.atPopup .content .contactsHolder{
  overflow: auto;
  margin-bottom: 30px;
}
.atPopup .content .contactsHolder .title{
  font-size: 27px;
}
.atPopup .content .contactsHolder .contacts{
  clear: both;
   
}
.atPopup .content .contactsHolder .contacts .contact{
  clear: both;
    overflow: auto;
    border-bottom: 1px solid #dedede;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    cursor: pointer;
    line-height: 24px;
}
.atPopup .content .contactsHolder .contacts .contact.group{
  background: #ebebeb;
    border-bottom: 1px solid #c1c1c1;
    line-height: 30px;
}
.atPopup .content .contactsHolder .contacts .contact:hover{
  opacity: 0.8;
}
.atPopup .content .contactsHolder .contacts .contact.selected{
  background: var(--positiveColor);
    color: #fff;
}
.atPopup .content .contactsHolder .contacts .contact .contactCheckbox{
  float: left;
    border: 1px solid #808080;
    border-radius: 2px;
    width: 20px;
    text-align: center;
    margin-right: 15px;
    line-height: 17px;
    position: relative;
    top: 3px;
}
.atPopup .content .contactsHolder .contacts .contact.group .contactCheckbox{
  top: 5px;
}
.atPopup .content .contactsHolder .contacts .contact .contactCheckbox .checkboxIcon{
  opacity: 0;
}
.atPopup .content .contactsHolder .contacts .contact.selected .contactCheckbox .checkboxIcon{
  opacity: 1;
}
.atPopup .content .contactsHolder .contacts .contact .info{
  float: left;
}
.atPopup .content .contactsHolder .contacts .contact .info.name{
  width: 200px;
}
.atPopup .content .contactsHolder .contacts .contact .info.email{
  width: 300px;
}
.atPopup .content .contactsHolder .contacts .contact .info.nickname{
  width: 300px;
}
.atPopup .content .bottomArea{
  overflow: auto;
    padding-top: 20px;
    border-top: 2px solid #000;
    background: #fff;
}
.atPopup .content .btnsHolder{
  width: 250px;
    margin: auto;
}
.atPopup .content .btnsHolder .btn{
  width: 120px;
  cursor: pointer;
  float: left;
  color: #fff;
  text-align: center;
}
.atPopup .content .btnsHolder .insertBtn{
    margin-right: 10px;
    background: var(--positiveColor);
}
.atPopup .content .btnsHolder .cancelBtn{
    background: #c1c1c1;
}


.noteReasonsPopup{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 20;
  top: 0px;
  left: 0px;
}

.noteReasonsPopup .background{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.3;
}
.noteReasonsPopup .content{
  position: relative;
    background: #fff;
    width: 500px;
    margin: 170px auto;
    border: 3px solid #000;
    border-radius: 4px;
}
.noteReasonsPopup .content .title{
  background: var(--trackrHeaderColor);
    min-height: 60px;
    color: white;
    text-align: center;
    margin-top: 0px;
    line-height: 60px;
    font-size: 20px;
}
.noteReasonsPopup .content .reasonBtnsHolder{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 450px;
    overflow: auto;
    margin: 30px auto 30px;
}
.noteReasonsPopup .content .reasonBtnsHolder .reasonBtn{
  margin: 0px auto 15px;
    width: 200px;
    border: 2px solid #808080;
    text-align: center;
    border-radius: 4px;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
}
.noteReasonsPopup .content .reasonBtnsHolder .reasonBtn.selected{
  background: var(--trackrDarkBlueColor);
    color: #fff;
    border-color: var(--trackrDarkBlueColor);
}
.noteReasonsPopup .content .submitBtnsHolder{
 overflow: auto;
    border-top: 1px solid #808080;
    width: 490px;
    margin: 20px auto;
    padding: 30px 95px 10px;
}
.noteReasonsPopup .content .submitBtnsHolder .submitBtn{
  float: left;
    width: 140px;
    background: var(--positiveColor);
    color: #fff;
    line-height: 50px;
    border-radius: 4px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
}
.noteReasonsPopup .content .submitBtnsHolder .reasonsSubmitBtn{
  margin-right: 20px;
}
.noteReasonsPopup .content .submitBtnsHolder .reasonsSubmitBtn.disabled{
  opacity: 0.3;
}
.noteReasonsPopup .content .submitBtnsHolder .reasonsCancelBtn{
  background: #a8a8a8;
}

.subNoteTypePopup{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.subNoteTypePopup .background{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}
.subNoteTypePopup .content{
  position: absolute;
    background: white;
}
.subNoteTypePopup .content .subTypesHolder{

}
.subNoteTypePopup .content .subTypesHolder .subTypeHolder{
  width: 100px;
    text-align: center;
    border-bottom: 1px solid gray;
    line-height: 34px;
    cursor: pointer;
}
.subNoteTypePopup .content .subTypesHolder .subTypeHolder:hover{
  background: #80808029;
}


/* --- ReplyNotesPopup --- */
.noteReplyPopup{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.noteReplyPopup .background{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
}
.noteReplyPopup .content{
  position: relative;
    margin: 200px auto;
    width: 500px;
    background: white;
    border-radius: 4px;
    text-align: center;
    overflow: auto;
    box-shadow: 0px 2px 12px black;
}
.noteReplyPopup .content .title{
  margin-top: 20px;
}
.noteReplyPopup .content .noteReplyTextArea{
  width: 430px;
  padding: 10px;
    margin: 20px 0px;
    border-radius: 4px;
    min-height: 200px;
}
.noteReplyPopup .content .noteReplyBtnsHolder{
  width: 230px;
    overflow: auto;
    margin: 20px auto;
}
.noteReplyPopup .content .noteReplyBtnsHolder .noteReplyBtn{
  width: 100px;
    float: left;
    cursor: pointer;
    background: gray;
    color: white;
    border-radius: 4px;
    line-height: 40px;
    font-size: 17px;
}
.noteReplyPopup .content .noteReplyBtnsHolder .noteReplySubmitBtn{
  margin-right: 30px;
  background: var(--positiveColor);
}


/* --- Add Note Popup --- */
.addNotePopup{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.addNotePopup .background{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
}
.addNotePopup .title{
  position: relative;
    margin: 110px auto 0px;
    color: white;
    font-size: 21px;
    width: 380px;
    text-align: center;
}
.addNotePopup .content{
  position: relative;
    margin: 10px auto;
    width: 700px;
    background: #fff;
    border-radius: var(--popupBorderRadius);
    overflow: auto;
}
/* Picker mode: hide the legacy task select since the autofill inputs drive it,
   and lay out the project + task inputs side-by-side at the top. */
.addNotePopup.pickerMode .content .noteTaskSelect{
    display: none;
}
.addNotePopup .content .notePickerHolder{
    width: 600px;
    margin: 30px auto 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.addNotePopup .content .notePickerHolder input{
    width: 70%;
    height: 38px;
    padding: 0px 12px;
    border: 1px solid gray;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.addNotePopup .content .addNoteTextArea{
  width: 600px;
    margin: auto;
    display: block;
    min-height: 280px;
    border: 1px solid gray;
    border-radius: 8px;
    padding: 15px;
}
.addNotePopup .content .submitBtnsHolder{
  width: 260px;
    margin: 20px auto;
    overflow: auto;
}
.addNotePopup .content .submitBtnsHolder .createNoteBtn{
  background: var(--positiveColor);
    width: 100px;
    text-align: center;
    line-height: 40px;
    color: white;
    border-radius: 4px;
    margin-right: 30px;
    float: left;
    cursor: pointer;
}
.addNotePopup .content .submitBtnsHolder .cancelNoteBtn{
  background: var(--negativeColor);
    width: 100px;
    text-align: center;
    line-height: 40px;
    color: white;
    border-radius: 4px;
    float: left;
    cursor: pointer;
}
.addNotePopup .content .noteTypeBtnsHolder{
  border: 1px solid gray;
    border-radius: 4px;
    width: 122px;
    overflow: auto;
    position: relative;
    margin: 0px auto 20px;
}
.addNotePopup .content .noteTypeBtnsHolder .noteTypeBtn{
  float: left;
    width: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 19px;
    cursor: pointer;
    color: #808080bd;
    border-right: 1px solid gray;
}
.addNotePopup .content .noteTypeBtnsHolder .noteTypeBtn.selected{
  background: var(--trackrDarkBlueColor);
  color: #fff;
  
}
.addNotePopup .content .noteTypeBtnsHolder .noteTypeBtn.addNoteActionBtn{
  border-right: none;
}
.addNotePopup .content .noteTypeBtnsHolder .noteTypeBtn.addNoteActionBtn.selected{
  background: orange;
  color: #fff;

}
.addNotePopup .content .noteTaskSelect{
  width: 280px;
    margin: 20px auto 15px;
    display: block;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    border-radius: 18px;
}
.addNotePopup .content .atPopupBtn{
  background: gray;
    color: white;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    font-size: 19px;
    position: absolute;
    bottom: 20px;
    left: 45px;
    cursor: pointer;
}



.atWordPopup{
  position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    overflow: auto;
    z-index: 20;
    background: #cecece;
    min-height: 40px;
    border: 2px solid black;
    border-radius: 6px;
    box-shadow: 4px 4px 8px #00000059;
}
.atWordPopup .content{

}
.atWordPopup .content .usersHolder{

}
.atWordPopup .content .usersHolder .user{
  overflow: auto;
    border-bottom: 1px solid black;
    background: white;
    line-height: 40px;
    padding-left: 10px;
}
.atWordPopup .content .usersHolder .user.selected{
  background: var(--trackrBlueColor);
    color: black;
}