/* --------------------------- Tasks Popup -------------------------- */
.tasksPopup{
  /*display:none;*/
  position:relative;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.tasksPopup.solo{
    position: fixed;
    z-index: 11;
}
.tasksPopup::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}
.tasksPopup.show{
  display:block;
}


/* background */

.tasksPopup .background{

}
.tasksPopup.solo .background{
  opacity: 0.5;
}


.tasksPopup .contentHolder{
  position:relative;
  margin:0px auto 0px;
  width:1210px;
  width: 1420px;
  top:0px;
  /*background: #fff;*/
  box-shadow: 2px 2px 55px #464646;
  border-radius: 4px;
  z-index:5;
  overflow:visible !important;
  /*overflow:auto;
  max-height:710px;*/
  max-height:95%;
  border: none !important;
}
.tasksPopup.solo .contentHolder{
  /*margin-top: 40px;*/
  overflow: auto !important;
  width: 1169px;
  width: 1140px;
  border: 2px solid #fff;
}


.tasksPopup .contentHolder .mainArea{
  float: left;
    width: 1169px;
    width: 1140px;
    overflow: auto;
    border: 2px solid #fff;
    border-radius: var(--popupBorderRadius);
    background: #fff;
}

.tasksPopup .contentHolder .sideArea{
  float: left;
    width: 230px;
    overflow: auto;
    color: #ffffffb0;
    padding-left: 20px;
}
.tasksPopup.solo .contentHolder .sideArea{
  display: none;
}

.tasksPopup .contentHolder .sideArea .completeDueDateHolder{
  margin-bottom: 30px;
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
    overflow: auto;
}
.tasksPopup .contentHolder .sideArea .completeDueDateHolder .dueDateHolder{
  float: left;
  width: 48%;
}
.tasksPopup .contentHolder .sideArea .completeDueDateHolder .dueDateHolder.finalDeliverable{
  border-right: 1px solid #aaa;
}
.tasksPopup .contentHolder .sideArea .completeDueDateHolder .dueDateHolder .title{
  font-size: 14px;
  opacity: 0.7;
}
.tasksPopup .contentHolder .sideArea .completeDueDateHolder .dueDateHolder .value{

}
.tasksPopup .contentHolder .sideArea .completeDueDateHolder .dueDateHolder.negative .value{
  color: var(--negativeColor);
}

.tasksPopup .contentHolder .sideArea .weekHolder{
  margin-bottom: 30px;
}
.tasksPopup .contentHolder .sideArea .weekHolder .title{
  font-size: 20px;
    color: #fff;
    text-align: center;
}
.tasksPopup .contentHolder .sideArea .weekHolder .totalsHolder{
  clear: both;
    background: #717171;
    overflow: hidden;
    margin-bottom: 5px;
    border-radius: 14px;
}
.tasksPopup .contentHolder .sideArea .weekHolder .totalsHolder .hoursTotal{
  float: left;
    text-align: center;
    width: 50%;
    border-right: 1px solid #cfcfcf;
}
.tasksPopup .contentHolder .sideArea .weekHolder .totalsHolder .budgetTotal{
  float: left;
    text-align: center;
    width: 50%;
}
.tasksPopup .contentHolder .sideArea .weekHolder .weekTasksHolder{
  
}
.tasksPopup .contentHolder .sideArea .task{
  overflow: auto;
    border-bottom: 1px solid #ffffff63;
    padding: 5px 0px;
    font-size: 14px;
}


/* PopupTitle */

.tasksPopup .popupTitle{
  text-align: center;
    line-height: 22px;
    background: #4d4d4d;
    color: #cbcbcb;
    display: none;
    padding-top: 10px;
    font-size: 19px;
}
.tasksPopup.linkedTasksPopup .popupTitle{
  display: block;
}



.tasksPopup .linkedTaskDescription{
  background: #4d4d4d;
    text-align: center;
    width: 100%;
    margin: auto;
    max-height: 190px;
    overflow: auto;
    color: #a7a7a7;
    display: none;
}
.tasksPopup .linkedTaskDescription::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}
.tasksPopup.linkedTasksPopup .linkedTaskDescription{
  display: block;
}
.tasksPopup.linkedTasksPopup .linkedTaskDescription .value{
    width: 700px;
    margin: 10px auto;
    text-align: left;
    white-space: pre-line;
    border: 2px dashed #80808047;
    border-radius: 4px;
    min-height: 40px;
    padding: 10px 10px;
}
.tasksPopup.linkedTasksPopup .linkedTaskDescription .value.empty{
  border:2px dashed #808080;
}





.tasksPopup .showInactiveTasksBtn{
  position: absolute;
    border: 1px solid #3593b9;
    color: #1d82ab;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 12px;
    right: 15px;
    top: 25px;
    cursor: pointer;
    line-height: 30px;
}

.tasksPopup .setAllTaskDueDatesBtn{
  position: absolute;
    border: 1px solid #3593b9;
    color: #1d82ab;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 12px;
    right: 123px;
    top: 25px;
    cursor: pointer;
    line-height: 30px;
}



.tasksPopup.addingTask{
  background: #efefef;
  transition:background 300ms ease-in;
}



.tasksPopup .addTaskHeader{
    position: absolute;
    width: 74px;
    height: 30px;
    left: 16px;
    top: 19px;
    border: 2px solid #fff;
    border-radius: 4px;
    opacity:0;
    transition:opacity 300ms ease-in;
    display:none;
}
.tasksPopup .addTaskHeader{
    opacity:1;
    transition:opacity 300ms ease-in;
}

/* --- Add Task Instructions --- */
.tasksPopup .addTaskHeader .addTaskInstructions{
    text-align: center;
    color: #8a8a8a;
    height:0px;
    line-height:0px;
    overflow:hidden;
    transition:all 300ms ease-in;
}
.tasksPopup.addingTask .addTaskHeader .addTaskInstructions{
    height: 40px;
    line-height: 40px;
    transition:all 300ms ease-in;
}

.tasksPopup .titlesHolder{
  background: #909090;
  background: #6dd5ff;
  color: #fff;
  text-align: center;
  /*border-bottom: 1px solid #5a5a5a;*/
  padding: 18px 0px;
  display:none;
}

.tasksPopup .projectPrice{
  position: absolute;
  top: 26px;
  left: 9px;
  font-size: 25px;
  width: 100px;
  text-align: center;
}
.tasksPopup .dollarsPerHour{
    position: absolute;
    top: 12px;
    left: 108px;
    font-size: 17px;
    width: 60px;
    height: 60px;
    border: 1px solid #55bae2;
    color:#fff;
    background:none;
    border-radius: 50px;
    line-height: 60px;
}
.tasksPopup .dollarsPerHour.positive{
  background: #71dc71;
}
.tasksPopup .dollarsPerHour.negative{
  background: #f39898;
}
.tasksPopup .titlesHolder .jobTitleHolder{
  position:relative;
  display:inline-block;
}
.tasksPopup .origDollarPerHour{
  position: absolute;
  top: 33px;
  left: 174px;
  text-align: left;
  color: #38a7d4;
}

.tasksPopup .titlesHolder:hover .jobTitleHolder .editBtn{
  opacity:1;
  transition:all 300ms ease-in;
}

.tasksPopup .titlesHolder .projectTitle{
  font-size:18px;
  color: #464646;
  cursor:pointer;
  width: 370px;
  margin: auto;
}
.tasksPopup .titlesHolder .customerTitle{
  color: #378eb1;
}



/* ------ Add Task Btn ------- */
.tasksPopup .addTaskBtn{
  background: #71c5e2;
  position:absolute;
  top:0px;
  left:0px;
  color: #fff;
  width: 70px;
  text-align: center;
  margin: auto;
  border-radius: 3px;
  line-height: 31px;
  height:26px;
  line-height:26px;
  cursor:pointer;
  overflow:hidden;
}

.tasksPopup .addTaskBtn i{
  margin-right:5px;
}



/* ----------------- Tasks Titles and Widths ------------ */
.tasksPopup .tasksTitles{
    position: relative;
    width: 100%;
    background:var(--trackrDarkBlueColor);
    height: 50px;
    line-height: 50px;
    color: #fff;
    margin-top: 0px;
    font-size: 14px;
    color: #fff;
   /* background: linear-gradient(0deg, #1f8db5, #3bbcea);
    border-bottom: 2px solid #353535;
    background: linear-gradient(45deg, #1f8db5, #3bbcea);
    border-bottom: 3px solid #135169;*/
    background: var(--trackrHeaderColor);
    transition:height 300ms ease;
}
.tasksPopup:not(.linkedTasksPopup) .tasksTitles:hover, .tasksPopup .tasksTitles.onHover{
  height:88px;
  transition:height 300ms ease;
}
.tasksPopup .taskHeader.assignedTo{
  margin-left: 15px;
}
.tasksPopup .taskHeader.review{
  visibility: hidden;
}
.tasksPopup .tasksTitles .headerTools{
    height: 0px;
    width: 100%;
    overflow: hidden;
    transition: height 300ms ease;
    clear: both;
    margin: auto;
    position: relative;
    top: -8px;
    line-height: 31px;    
}
.tasksPopup:not(.linkedTasksPopup) .tasksTitles:hover .headerTools, .tasksPopup .tasksTitles.onHover .headerTools{
  height:42px;
  /*border-top: 1px solid #2f809f;*/
  padding: 5px 0px 0px 0px;
  transition:height 300ms ease, padding 300ms ease;
}
.tasksPopup .tasksTitles .headerTools .taskNameInputHolder{
  height: 100%;
    width: 270px;
    overflow: auto;
    margin: auto;
}
.tasksPopup .tasksTitles .headerTools .taskNameInputHolder .taskNameInput{
  width: 100%;
    border: none;
    border-radius: 4px;
    padding:0px 5px;
}
.tasksPopup .tasksTitles .headerTools .taskNameInputHolder .taskNameInput:focus{
    outline: none;
}
.tasksPopup .tasksTitles .gantChartBtn{
  position: absolute;
    right: 90px;
    font-size: 24px;
    top: 0px;
    cursor: pointer;
    width: 30px;
    text-align: center;
}
.tasksPopup.linkedTasksPopup .tasksTitles .gantChartBtn{
  display: none;
}
.tasksPopup.solo .tasksTitles .gantChartBtn{
  display: none;
}
.tasksPopup .tasksTitles .projectTasksScheduleBtn{
  position: absolute;
    right: 130px;
    top: 0px;
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    text-align: center;
}
.tasksPopup .tasksTitles .projectTasksScheduleBtn:hover{
    color: var(--trackrDarkBlueColor);
    transform: scale(1.15);
}
.tasksPopup .tasksTitles .timeEntriesPopupBtn{
  position: absolute;
    right: 50px;
    top: 5px;
    top:0px;
    font-size: 27px;
    cursor: pointer;
}
.tasksPopup .tasksTitles .timeEntriesPopupBtn:hover{
  color: var(--trackrDarkBlueColor);
  transform: scale(1.2);
}
.tasksPopup.linkedTasksPopup .tasksTitles .projectTasksScheduleBtn{
  display: none;
}
.tasksPopup.solo .tasksTitles .projectTasksScheduleBtn{
  display: none;
}
.tasksPopup .tasksTitles .taskMultiEditModuleBtn{
  position: absolute;
    right: 10px;
    top: 5px;
    top:0px;
    font-size: 27px;
    cursor: pointer;
}
.tasksPopup.linkedTasksPopup .tasksTitles .taskMultiEditModuleBtn{
  display: none;
}
.tasksPopup.solo .tasksTitles .taskMultiEditModuleBtn{
  display: none;
}
.tasksPopup .taskTitle{
  float:left;
  text-align:center;
}

.tasksPopup .taskTitle.status, .tasksPopup .statusHolder{
  width:50px;
  height:20px;
  margin-right:10px;
}
.tasksPopup .taskTitle.name, .tasksPopup .taskHolder .nameHolder{
  width:275px;
  text-align:left;
}
.tasksPopup .taskTitle.dueDate, .tasksPopup .dueDateHolder{
  text-align:center;
  width:88px;
}
.tasksPopup .taskTitle.startDate, .tasksPopup .startDateHolder, .tasksPopup .taskTitle.dueDate, .tasksPopup .dueDateHolder{
  width:88px;
  text-align:center;
  transition:all 300ms ease-in;
}
.tasksPopup .startDateHolder .startDate{
  width:70px;
  margin:auto;
}
.tasksPopup .dueDateHolder .dueDate{
  width:70px;
  margin:auto;
}
.tasksPopup .taskTitle.timer, .tasksPopup .taskHolder .timerHolder{
  width:104px;
  height:24px;
  text-align:center;
  transition:all 300ms ease-in;
  cursor:pointer;
}
.tasksPopup .taskTitle.assigned, .tasksPopup .taskHolder .assigned{
  text-align:center;
  width:100px;
}
.tasksPopup .taskTitle.notes, .tasksPopup .taskHolder .notesHolder{
  width:50px;
  text-align:center;
  transition:all 300ms ease-in;
}
.tasksPopup .taskTitle.docs, .tasksPopup .taskHolder .docsHolder{
  width:50px;
  text-align:center;
  transition:all 300ms ease-in;
}


.tasksPopup .tasksBottomBar{
  height: 40px;
    background: var(--trackrHeaderColor);
    color: #fff;
    position: relative;
}
.tasksPopup .tasksBottomBar .totalCompletedHoursHolder{
  display: flex;
    font-size: 16px;
    gap: 5px;
    position: absolute;
    left: 783px;
    top: 8px;
}
.tasksPopup .tasksBottomBar .totalCompletedHoursHolder .totalCompletedHours{

}
.tasksPopup .tasksBottomBar .totalCompletedHoursHolder .divider{
  opacity: 0.5;
}
.tasksPopup .tasksBottomBar .totalCompletedHoursHolder .totalBudgetHours{

}

.tasksPopup .tasksBottomBar .tasksHoursRemainingTotal{
  position: absolute;
    top: 4px;
    left: 873px;
    width: 80px;
    text-align: center;
    font-size: 20px;
}
.tasksPopup .tasksBottomBar .clientViewBtn{
  position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 20px;
    cursor: pointer;
}


/* --- Task Holder --- */
.tasksPopup .tasksHolder{
  padding:0px 0px;
  width: 1185px;
  overflow: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.tasksPopup .tasksHolder::-webkit-scrollbar {
  display: none;
}
/*
.tasksPopup .tasksHolder::-webkit-scrollbar { 
    display: none; 
} 
*/
.tasksPopup .taskHolder{
  /*min-height:52px;*/
}
.tasksPopup .taskHolder.hide{
  opacity:0.30;
  opacity:0.5;
  /*display:none;*/
}
.tasksPopup .taskHolder .deleteBtn{
  display:none;
  position:absolute;
  cursor:pointer;
  top:8px;
  right:23px;
  z-index:2;
}
.tasksPopup .taskHolder:hover .deleteBtn{
  /*display:block;*/
}
.tasksPopup .taskHolder.selected{
  background: #e8e8e8;
  border-radius: 3px;
  transition: all 300ms ease-in;
}
.tasksPopup .taskHolder.hover .name{
  color:#ff9d00;
}
.tasksPopup .taskHolder:hover{
  /*background: #e8e8e8;
  border-radius: 3px;*/
}
.tasksPopup.addingTask .taskHolder{
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}

.tasksPopup .taskHolder .timerIcon{
  position:absolute;
  right:13px;
  opacity: 0;
  color:#c7c7c7;
}
.tasksPopup .taskHolder .timerIcon{
  display:none;
}
.tasksPopup .taskHolder.showTimer .timerIcon{
  opacity:1;
}
.tasksPopup .taskHolder.showTimer.running .timerIcon{
  color:#ffa500;
}

/* --- Status --- */
/*
.tasksPopup .taskHolder .status{
  height: 15px;
  width: 14px;
  background: #b7b7b7;
  border-radius: 10px;
  position:relative;
  top:3px;
  margin:auto;
  cursor:pointer;
}
.tasksPopup .taskHolder.Complete .status{
  background:#60e660;
}
.tasksPopup .taskHolder.NotStarted .status{
  background:#d6d6d6;
}
.tasksPopup .taskHolder.InProgress .status{
  background:var(--inProgressColor);
}
.tasksPopup .taskHolder .status:hover{
  border: 2px solid #545454;
}
*/
.tasksPopup .taskHolder .name{
  position:relative;
  display:inline-block;
  min-width: 50px;
  min-height: 19px;
}
/*
.tasksPopup .hours .progressBarHolder{
  
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  width: 65px;
  margin: auto;
}
*/
.tasksPopup .hours .progressBarHolder.small{
  width:35px;
}
.tasksPopup .hours .progressBarHolder.medium{
  width:50px;
}
.tasksPopup .hours .progressBarHolder.large{
  width:65px;
}
.tasksPopup .hours .progressBarHolder.overBudget{
  background:var(--overBudgetColor);
}
.tasksPopup .hours .progressBarHolder.underBudget{
  background:var(--underBudgetColor);
}

.tasksPopup .hours .progressBarHolder .meter{
  background: var(--trackrDarkBlueColor);
    height: 100%;
}
.tasksPopup .hours .hoursHolder{
  font-size: 13px;
    color: var(--trackrDarkBlueColor);
}
.tasksPopup .hours .hoursHolder .completedHours{
  cursor:pointer;
}
.tasksPopup .hours .hoursHolder .completedHours:hover{
  color:#278cb3;
}
.tasksPopup .hours .hoursHolder .projectedHours{
  
}

/* ----- Tasks Popup Timer Holder (Lives on the TaskHolder)------- */
.tasksPopup .timerHolder{
  position:relative;
}

/* ----- Tasks Popup TimerActivatedHolder ----- */
.tasksPopup .timerHolder .timerActivatedHolder{
  display:none;
  /*position:absolute;*/
}
.tasksPopup .timerHolder .timerActivatedHolder:hover{
  background: #dadada;
}
.tasksPopup .taskHolder.showTimer .timerHolder .timerActivatedHolder{
  display:block;
}

/* ------------- TimerActivatedHolder RUNNING ------------ */
.tasksPopup .taskHolder.showTimer.running .timerActivatedHolder{
  background:orange;
}
.tasksPopup .taskHolder.showTimer.running .timerActivatedHolder:hover{
  background:#ffbe46;
}
.taskHolder.showTimer.running .pauseIcon, .taskHolder.showTimer.paused .playIcon{
  opacity:1;
}
.taskHolder.showTimer.paused .pauseIcon, .taskHolder.showTimer.running .playIcon{
  opacity:0;
}


.tasksPopup .taskHolder .timerIconHolder{
  width:20px;
  margin:auto;
}
.tasksPopup .taskHolder .timerIconHolder:hover{
  transform:scale(1.2);
  transition:all 300ms ease-in;
}

.tasksPopup .taskHolder .bottom .todosHolder .newTodoBtn{
  margin-right: 13px;
}