.floatLeft{
  float:left;
}

/* ---- Body ---- */
body{
  font-family:'Lato', sans-serif;
  font-size:14px;
  color:#565656;
}
.googleDriveHolder{
  
}
.accountInfoHolder{
  position:absolute;
  top:0px;
  right:12px;
  cursor:pointer;
  display:none;
}
.accountInfoHolder #signout-button, .accountInfoHolder .userName{
  float:left;
}
.accountInfoHolder .userName{
  margin-right:25px;
}
#signout-button:hover{
  color:#1cc4fb;
}


.loginPopup{
  display: none;
}
.popupHolder .loginText{
  text-align: center;
  font-size: 20px;
}
.popupHolder .loginBtn{
  width: 100px;
  background: #6ade6a;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 45px;
  font-size: 19px;
  margin: 23px auto 0px;
  cursor: pointer;
}

.popupHolder{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  z-index: 3;
  top:0px;
  left:0px;
}
.popupHolder .background{
  position:fixed;
  background:#000;
  opacity:0.5;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}
.popupHolder .title{
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 50px;
}
.popupHolder .closeBtn{
  position: absolute;
  background: #fff;
  border: 2px solid #5d5d5d;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  text-align: center;
  cursor: pointer;
  z-index: 11;
}
.popupHolder .popupContent{
  position: absolute;
  background: #fff;
  overflow: auto;
  border: 3px solid #565656;
  border-radius: 5px;
  padding: 30px;
  z-index: 10;
  width: 770px;
  top: 60px;
  left: 22%; 
  max-height:550px; 
}
.submitBtn{
  opacity:1;
}
.submitBtn.inactive{
  opacity:0.2;
}

.statsBtn{
      position: absolute;
    top: 25px;
    right: 302px;
    width: 87px;
    line-height: 29px;
    background: #676767;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.prospectsBtn{
    position: absolute;
    top: 25px;
    right: 180px;
    width: 87px;
    line-height: 29px;
    background: #676767;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.prospectsBtn a{
  color:white;
  text-decoration: none;
}
.prospectsBtn .notificationAlert{
  position: absolute;
  top: -6px;
  right: -7px;
  background: #ff5a5a;
  width: 22px;
  height: 22px;
  line-height: 17px;
  border-radius: 13px;
  font-size: 11px;
  border: 2px solid #fff;
}
.okkemEdit{
  min-width: 50px;
  min-height: 19px;
}
.background{
  position:fixed;
  background:#000;
  opacity:0.5;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}
.backgroundOverlay{
  background:#000;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index: 2;
  opacity: 0.3;
  display:none;
}
.loadingOverlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10;
  display:none;
}
.loadingOverlay .bgOverlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.loadingOverlay .spinnerHolder{
    width: 100px;
    text-align: center;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 44%;
}

.navigationArea{
  height: 100px;
  box-shadow: 1px 1px 4px #b5b5b5;
  margin-bottom: 30px;
}
.navigationArea img{
  height:75px;
  margin-top:14px;
}
.pageHeader{
  font-size: 27px;
  height: 80px;
  text-align: center;
  line-height: 71px;
  color: #404040;
  margin-bottom:30px;
}
.pageHeader img{
  height: 75px;
  margin-top: 14px;
}


.progressBar{
  background: #fff;
  height: 10px;
  border: 1px solid #f8b243;
  border-radius: 7px;
  width: 65px;
  margin-top: 5px;
  overflow:hidden;
}
.projectHolder .progressBar{
  display:none;
}
.projectHolder.InProgress .progressBar, .projectHolder.Paused .progressBar, .projectHolder.Complete .progressBar{
  display:block;
}
.progressBar .meterHolder{
  width:102%;
  height:9px;
}
.progressBar .meter{
  width:25%;
  height: 100%;
  float:left;
  background: repeating-linear-gradient( 45deg, #f9dbae, #f9dbae 2px, #fdcc85 2px, #fdcc85 5px );
}
.progressBar .meter.complete{
  background:#f9b334;
  /*border-right: 1px solid #e6a52e;*/
}
.progressBar.NotStarted .meter{
  background:#d6d6d6;
}


/* ---- Hours Progress --- */
.projectHolder .hoursProgress{
  color: #f8b243;
  font-size: 12px;
  width: 66px;
  text-align: center;
  margin-top: 3px;
  display:none;
}
.projectHolder.NotStarted .hoursProgress{
  color:#d6d6d6;
}
.projectHolder.InProgress .hoursProgress, .projectHolder.Paused .hoursProgress, .projectHolder.Complete .hoursProgress, .projectHolder.Paid .hoursProgress{
  display:block;
}
.projectHolder.Paid .hoursProgress, .projectHolder.Complete .hoursProgress{
  color:#55c456;
}

.jobsTaskHolder{
  /*position:absolute;*/
  right:10px;
  top:14px;
}

.jobsTaskHolder.empty{
  /*opacity:0;*/
}


/* --- Job Hours Holder --- */
.jobsTaskHolder .jobHoursHolder{
  position: absolute;
  right: 18px;
  text-align: center;
  font-size: 10px;
  padding-top:10px;
}
.jobsTaskHolder .jobHoursHolder .jobHours{
  line-height:30px;
  color: #f9daad;
}

/* --- Add Tasks Btns --- */
.jobsTaskHolder .addTaskBtnsHolder{
    position: absolute;
    /*background: #f00;*/
    height: 110px;
    width: 100px;
    right: 12px;
    right: -47px;
    padding-top: 9px;
    display:none;
}
.addTaskBtnsHolder .addTaskBtn{
  font-size: 11px;
  background: #f9d9ac;
  /*background: #fde9cd;*/
  color: #fff;
  line-height: 26px;
  width: 23px;
  border-radius: 3px;
  margin-bottom:5px;
  position:relative;
  left:-35px;
  transition:left 600ms ease-in;
  cursor:pointer;
  display:none;
}
.addTaskBtnsHolder .addTaskBtn.hover{
  transition:left 600ms ease-in;
  left:0px;
}



.jobsTaskHolder .addJobBtn{
    color: #f9daac;
    border-radius: 0px;
    width: 22px;
    margin: auto;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    line-height: 28px;
    height: 27px;
    position: relative;
    top:-2px;
    transition:top 300ms ease-in;
    border-radius:4px;
    opacity:0;
}
.projectHolder:hover .addJobBtn{
  /*opacity:1;*/
  /*top:-3px;*/
  opacity:1;
  transition:all 300ms ease-in;
}
.jobsTaskHolder.empty .addJobBtn{
  top:0px;
}
.jobsTaskHolder .addJobBtn i{
  margin-right:2px;
}

.taskCount{
  text-align: center;
  color: #d6d6d6;
  font-size: 12px;
  opacity:0;
}
.jobsTaskHolder:hover .taskCount{
  opacity:0;
}
.jobsHolder{
  padding:2px 6px 6px;
  background: #fff;
  width: 100%;
  border-radius: 5px;
  cursor:pointer;
  transition:all 1s ease;
  /*border: 2px solid #f9daad;*/
  position:relative;
  z-index:1;
}
.jobsHolder:hover{
  /*transform: scale(1.05);*/
  /*border:1px solid #bbb;*/
  /*box-shadow: 1px 1px 1px #cac9c9;*/
  /*box-shadow: 2px 2px 1px #eaeaea;*/

}
.jobsHolder.clicked{
  /*box-shadow: 1px 1px 1px #cac9c9;*/
}
.jobsHolder.empty, .jobsHolder.clicked.empty{
  border:none;
  box-shadow:none;
  cursor:arrow;
}
.jobsHolder .jobHolder{
  width: 100%;
  position: relative;
  height: 27px;
  margin-top: 4px;
  border: 1px solid #fff;

}


.jobsHolder .jobHolder .addTaskBtn{
  position: absolute;
  right: -45px;
  font-size: 11px;
  background: #f5c480;
  color: #fff;
  line-height: 26px;
  width: 39px;
  border-radius: 3px;
  display:none;
}
.jobsHolder .jobHolder:hover .addTaskBtn{
  display:block;
}
.jobsHolder .jobHolder .tasksHolder{
  width:102%;
}
.jobsHolder .jobHolder .timerIconHolder{
  display:none;
  position:absolute;
  top: 2px;
  left: -27px;
  color:#c7c7c7;
}
.jobsHolder .jobHolder.paused .timerIconHolder{
  display:block;
}
.jobsHolder .jobHolder.running .timerIconHolder{
  display:block;
  color:#ffa500;
}
.jobsHolder .jobHolder .jobTitle{
  position: absolute;
  left: 9px;
  font-size: 12px;
  top: 4px;
  color: #fff;
  pointer-events:none;
  text-shadow: 1px 1px 7px #f1c476;
}
.jobsHolder .jobHolder.empty .jobTitle{
  color:#f9daad;
  text-shadow:none;
}



/* ---- Tasks --- */
.jobsHolder .jobHolder .task{
  float: left;
  width: 33%;
  background: #f9dbae;
  height: 23px;
  height:100%;
  border-right: 1px solid #f7c680;
  border-right:1px solid #fff;
  border-right:1px solid #fccb84;
  transition:background 300ms ease-in;
}
.jobsHolder .jobHolder .task.InProgress{
  /*background: repeating-linear-gradient( 45deg, #f9dbae, #f9dbae 5px, #fdcc85 5px, #fdcc85 10px );*/
  background: repeating-linear-gradient( 45deg, #f9dbae, #f9dbae 5px, #fde2bd 5px, #fde2bd 10px );
}
.jobsHolder .jobHolder .task.lastTask{
  border-right:none;
}
.jobsHolder .jobHolder .task.Complete{
  border-right: 1px solid #e29d25;
  border-right:1px solid #eca82d;
  background:#f9b334;
}
.jobsHolder .jobHolder .task:hover{
  background:#de9c23;
  transition:background 300ms ease-in;
}




/* ---- Task Holder ---- */
.jobsHolder .jobHolder .taskHolder{
  width:100%;
  height:100%;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  /*transition:border 300ms ease-in;*/
}
.jobsHolder .jobHolder.empty .taskHolder{
  border:2px solid #f9daad;
}
.jobsHolder .jobHolder.firstJob .taskHolder{
  margin-top:0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.jobsHolder .jobHolder.lastJob .taskHolder{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.jobsHolder .jobHolder .taskHolder:hover{
  border: 2px solid #f9b148;
  /*transition:all 300ms ease-in;*/
}






.jobsHolder .jobHolder .task .meter{
  background: #fab334;
  height: 100%;
  width:0%;
  transition:all 1s ease;
}
.jobsHolder .jobHolder .task .meter:hover{
  background:#e0a02d;
}
.jobsHolder .jobHolder .task .meter.completed{
  width:100%;
}






.taskPopup{
  background: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  width: 200px;
  padding: 10px;
  box-shadow: 3px 3px 0px #b9b9b9;
  text-align: center;
  color: #a2a2a2;
  transform: scale(0.1);
  transition:transform 300ms ease-in;
  z-index:1;
}
.taskPopup.show{
  transform:scale(1);
}
.taskPopup .name{
  background: #fff;
  border-radius: 3px;
  color: #fcb337;
  margin-bottom: 10px;
  padding: 10px;
}


/* -------------- SIDE BAR -------------- */
.sidebar{
  background: #fff;
  border-left: 1px solid #e0e0e0;
  padding:0px;
}
.sidebar .title{
  font-size: 20px;
  text-align: center;
  background: #6cd9ff;
  width: 100%;
  padding: 0px;
  height: 60px;
  line-height: 64px;
  color: #fff;
}
.sidebar .sidebarTitle{
  margin-bottom: 10px;
    font-size: 19px;
    color: #6cdaff;
    text-align:center;
}
.sidebar .content{
  width:100%;
  padding:20px;
}
.sidebar .statHolder{
  clear:both;
  margin-top:10px;
  padding-left:10px;
  cursor:pointer;
  border-radius:5px;
  height:36px;
}
.sidebar .statHolder:hover{
  background:#d4d4d4;
}
.sidebar .statHolder.selected{
  background: #f36667;
  color: #fff;
}
.sidebar .statHolder .text{
  line-height:40px;
}
.sidebar .statHolder .value{
  margin-left: 19px;
  font-size: 30px;
  line-height: 30px;
}
.projectsPastDueHolder{
  width: 180px;
}
.projectsNextWeek{
  width:220px;
}







.projectsTitles{
  padding: 10px;
  margin-bottom: 0px;
  background: #6cdaff;
  height: 60px;
  color: #fff;
  line-height: 42px;
  font-size: 16px;
}
.projectHolder{
  clear: both;
  min-height: 142px;
  margin-bottom: 9px;
  padding: 24px 10px 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  box-shadow: 2px 2px 4px #e6e6e6;
  border-top: 1px solid #f3f3f3;
  border-radius:5px;
  overflow:auto;
  display:none;
}
.projectHolder.show{
  display:block;
}
.projectHolder:hover{
  /*background: repeating-linear-gradient( 45deg, #fff, #fff 10px, #fafafa 10px, #fafafa 20px );*/
}
.projectHolder .deleteBtn{
  opacity: 0;
  position: absolute;
  bottom: 1px;
  right: 4px;
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 27px;
  color: #d0d0d0;
  transition: opacity 300ms ease-in;
  cursor: pointer;
}
.projectHolder:hover .deleteBtn{
  opacity:1;
  transition: opacity 300ms ease-in;
}
.projectHolder .projectData{
  min-height:25px;
}
.projectHolder .customerProjectHolder, .projectsTitles .name{
  width:170px;
}  

.projectHolder .name{
  font-size:17px;
  position:relative;
  display:inline-block;
  width:100%;
}
.projectHolder .customer{
  color: #9e9e9e;
  font-size: 14px;
  position:relative;
  display:inline-block;
}



/* -------- WIDTHS AND POSITIONS -------- */

.projectHolder .projectData, .projectsTitles div{
  float:left;
  width:100px;
}
.projectHolder .statusProgressBox, .projectsTitles .projectStatus{
  width:115px;
}
.projectsTitles .projectStatus{
  position:relative;
  left:22px;
}
.projectHolder .customerProjectHolder, .projectsTitles .name{
  width:175px;
  text-align:center;
}
.projectHolder .priceHolder, .projectsTitles .price{
  width:145px;
  margin-left:20px;
  text-align:center;
}
.projectHolder .startDate, .projectHolder .endDate, .projectsTitles .startDate, .projectsTitles .endDate{
  width:75px;
}
.projectHolder .datesHolder, .projectsTitles .startDueDate{
  width:170px;
  text-align:center;
}
.projectHolder .tasks, .projectsTitles .tasks{
  width:50px;
  text-align:center;
}
.projectHolder .documents, .projectsTitles .documents{
  margin-left:10px;
  text-align:center;
}
.projectHolder .jobsTaskHolder, .projectsTitles .jobs{
  width:225px;
  text-align: center;
  margin-left:35px;
}
.projectsTitles .jobs{
  position:relative;
  left:-10px;
}




/* --- PROGRESS BOX ---- */
.projectHolder .statusProgressBox{
  background: #fff;
  padding: 9px 8px 4px;
  /*border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  border-left:1px solid #e0e0e0;*/
  /*border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;*/
  border-radius: 5px;
  width: 80px;
  position: relative;
  top: -6px;
  margin-right: 32px;
  /*box-shadow: inset 2px 2px 3px #e4e4e4;*/
}
.projectHolder.InProgress .statusProgressBox{
  /*border:1px solid #f9b334;*/
}
.projectHolder.Complete .statusProgressBox{
  /*border:1px solid #4dbf34;*/
}

.projectHolder .projectStatus{
  width:65px;
}
.projectHolder .projectStatus{
  background: #ececec;
  text-align: center;
  padding: 4px 0px 0px;
  font-size: 11px;
  border-radius: 3px;
  color: #fff;

}




/* --- PRICE AREA --- */
.projectHolder .priceHolder{
  position:relative;
  font-size:15px;
  padding-left:10px;
  top:5px;
}
.projectHolder.allPaid .priceHolder{
}
.projectHolder .priceHolder .dollarsPerHour{
  text-align: center;
  width: 48px;
  font-size: 12px;
  color: #adadad;
  margin-top: 10px;
}
.projectHolder .priceHolder .price{
  float:left;
  width:50px;
  display:inline-block;
  text-align: center;

}
.projectHolder.allPaid .priceHolder .price{
  background: #68da74;
    color: #fff;
    border-radius: 4px;
    width: 65px;
    height: 32px;
    line-height: 32px;
    position: relative;
    top: -13px;
    left: -10px;
}
.projectHolder .priceHolder .amountPaid{
  width:50px;
  text-align: center;
  color: #d4d3d3;
  font-size: 13px;
  clear:both;
  height:12px;
}
.projectHolder.allPaid .priceHolder .amountPaid{
  display:none;
}
.projectHolder .priceHolder .price a{
  width:50px;
  display:inline-block;
  text-align: center;
}
.projectHolder .priceHolder .amountPaidHolder{
  position: absolute;
    top: -31px;
    right: -30px;
    background: #fff;
    border: 2px solid #000;
    width: 81px;
    border-radius: 4px;
    display: none;
}
.projectHolder .priceHolder .amountPaidHolder.show{
  display:block;
}
.projectHolder .priceHolder .paidDotHolder{
  display:none;
  /*background: #fab334;*/
  height: 10px;
  width: 10px;
  /*border-radius: 10px;*/
  top: 0px;
  right: 0px;
  float:left;
  position: relative;
  top: 3px;
  left: 6px;
  color: #d2d2d2;
  font-size: 12px;
}
.projectHolder .priceHolder .paidDotHolder.nonePaid .fullPaid, .projectHolder .priceHolder .paidDotHolder.nonePaid .partialPaid{
  display:none;
}
.projectHolder .priceHolder .paidDotHolder.partialPaid .fullPaid, .projectHolder .priceHolder .paidDotHolder.partialPaid .nonePaid{
  display:none;
}
.projectHolder .priceHolder .paidDotHolder.allPaid .partialPaid, .projectHolder .priceHolder .paidDotHolder.allPaid .nonePaid{
  display:none;
}

/* --- PRICE --- */
.projectData.documents.noDocURL{
  opacity:0.3;
}
.projectData.documents a{
  background: #fff;
  width: 40px;
  height: 40px;
  display: block;
  /*
  border-radius: 40px;
  border:2px solid #dedede;*/
  position: relative;
  left: 30px;
  
}
.projectData.documents i{
  font-size: 23px;
  cursor:pointer;
  color: #dedede;
  position: relative;
  top: 7px;
}
.projectData.documents .documentsURL{
    position: absolute;
    width: 40px;
    background: #639;
    overflow: hidden;
    opacity: 0;
    height: 39px;
}
.projectData.documents .notesHolder{
  position:relative;
}
.projectData.documents .notesHolder .notesCount{
  position:absolute;
  top:9px;
  right:25px;
  color:#dedede;
}

/* --- DATES AREA --- */
.projectHolder .metricsHolder{
    width: 100%;
    background: #fff;
    /*border: 2px solid #4e4e4e;*/
    overflow: hidden;
    /*border-radius: 4px;*/
    height:59px;
    margin:auto;
}
.projectHolder.limitedMetrics .metricsHolder{
  width:56px;
  /*border-radius:32px;*/
}
.projectHolder.limitedMetrics .metricHolder.daysBehind, .projectHolder.limitedMetrics .metricsHolder.hoursPerDay{
  display:none;
}
.projectHolder.limitedMetrics .metricHolder{
  width:60px;
}
.projectHolder .metricHolder{
    width: 55px;
    float: left;
    border-right: 2px solid #fff;
    height:100%;
    position:relative;
    transition:all 300ms ease-in;
}
.projectHolder .metricHolder.negative{
    background: #f79494;
    color: #fff;
    transition:all 300ms ease-in;
    border-right: 2px solid #fff;
}
.projectHolder .metricHolder.positive{
  background:#9de4a4;
  color:#fff;
  transition:all 300ms ease-in;
  border-right: 2px solid #fff;
}
.projectHolder .metricHolder.na{
  background: #e0e0e0;
  color: #fff;
}
.projectHolder .metricHolder.hoursPerDay{
  border-right:none;
}
.projectHolder .metricHolder .number{
  font-size: 24px;
  line-height: 26px;
  margin: 7px 0px 2px;
}
.projectHolder .metricHolder .text{
  font-size:9px;
  position: absolute;
  text-align: center;
  width: 100%;
}

/* -------- Days Till Due ---------- */
.projectHolder .metricHolder .text.daysTill{
  opacity:1;
}
.projectHolder .metricHolder.negative .text.daysTill{
  opacity:0;
}
.projectHolder .metricHolder .text.daysPast{
  opacity:0;
}
.projectHolder .metricHolder.negative .text.daysPast{
  opacity:1;
}



/* --------- Days Behind ----------- */
.projectHolder .metricHolder .text.daysBehind{
  opacity:0;
}
.projectHolder .metricHolder.negative .text.daysBehind{
  opacity:1;
}
.projectHolder .metricHolder .text.daysAhead{
  opacity:1;
}
.projectHolder .metricHolder.negative .text.daysAhead{
  opacity:0;
}

.projectHolder .datesHolder .startDueHolder{
  margin-top:10px;
}
.projectHolder .datesHolder .dateHolder{
  width:82px;
}
.projectHolder .datesHolder .dateHolder .date{
  display:none;
}
.projectHolder .startDueHolder .date{
  color: #4e4e4e;
  font-size: 12px;
  text-align: center;
  line-height:23px;
}
.projectHolder.RFQ .datesHolder .dateHolder .date.rfq{
  display: inline-block;
}
.projectHolder.Quoted .datesHolder .dateHolder .date.quoted{
  display: inline-block;
}
.projectHolder.Approved .datesHolder .dateHolder .date.approved{
  display: inline-block;
}
.projectHolder.InProgress .datesHolder .dateHolder .date.inProgress{
  display: inline-block;
}
.projectHolder.Complete .datesHolder .dateHolder .date.complete{
  display: inline-block;
}
.projectHolder.Paid .datesHolder .dateHolder .date.paid{
  display: inline-block;
}
.projectHolder.Paused .datesHolder .dateHolder .date.paused{
  display: inline-block;
}
.projectHolder.Declined .datesHolder .dateHolder .date.declined{
  display: inline-block;
}
.projectHolder .startDueHolder .separator{
  
}
/*
.projectHolder .datesHolder{
  color:#d2d2d2;
}
.projectHolder .datesHolder.positive{
  color:#88dc90;
}
.projectHolder .datesHolder.negative{
  color:#f18989;
}
*/
.projectHolder .datesHolder .dateSeparatorCircle{
  width: 7px;
  height: 7px;
  float: left;
  background: #d8d8d8;
  border-radius: 10px;
  position: relative;
  top: 7px;
}
.projectHolder .datesHolder.positive .dateSeparatorCircle{
  background:#87dc90;
}
.projectHolder .datesHolder.negative .dateSeparatorCircle{
  background:#f18989;
}
.projectHolder .datesHolder .startDate, .datesHolder .endDate{
  text-align:center;
}
.projectHolder .datesHolder .daysCalculator{
  background: #d2d2d2;
  width: 35px;
  font-size: 11px;
  color: #fff;
  line-height: 35px;
  border-radius: 50px;
  padding: 0;
  margin: auto;
  position: relative;
  top: 2px;
  left:-8px;
}
.projectHolder .datesHolder .daysCalculator.positive{
  background:#88dc90;
}
.projectHolder .datesHolder .daysCalculator.negative{
  background: #f18989;
}

/* --- TASKS AREA --- */
.projectHolder .tasks{
  cursor:pointer;
}
.projectHolder .projectData.tasks{
  position: relative;
}
.projectHolder .projectData.tasks:hover{
  background: #dadada;
  border-radius: 4px;
}



/* --- PROJECT STATUS AREA --- */

.projectHolder.RFQ .projectStatus{
  background:#fff;
  color: #c5c5c5;
      border: 2px solid #c5c5c5;
    padding: 3px 0px 0px;
}
.projectHolder.Quoted .projectStatus, .projectHolder.Quoted .progressBar .meter.complete{
  background:#d6d6d6;
}
.projectHolder.Quoted .progressBar{
  border:1px solid #d6d6d6;
}
.projectHolder.Approved .projectStatus, .projectHolder.InProgress .projectStatus{
  background:#f9b334;
}

.projectHolder.Complete .projectStatus{
  background: #fff;
    color: #56c357;
    border: 2px solid #56c357;
    padding: 2px 0px 0px;
}
.projectHolder.Declined .projectStatus{
      border: 1px solid #f79393;
    color: #f79393;
    background: #fff;
}
.projectHolder.Paid .projectStatus, .projectHolder.Paid .progressBar .meter.complete, .projectHolder.Complete .progressBar .meter.complete{
  background:#56c357;
}
.projectHolder.Paid .progressBar, .projectHolder.Complete .progressBar{
  border:1px solid #56c357;
}
.projectHolder.Paused .projectStatus{
  /*background: repeating-linear-gradient( 45deg, #f9dbae, #f9dbae 2px, #fdcc85 2px, #fdcc85 5px );*/
      background: #fff;
    border: 2px solid #f9b334;
    color: #f9b334;
    padding: 2px 0px 0px;
}


/* --- X EDITABLE COMPONENTS --- */
.editable-container.editable-inline{
  background: #fff;
  padding: 10px 12px;
  position: relative;
  border-radius: 4px;
  box-shadow: 2px 2px 1px black;
  border: 1px solid #dcdcdc;
  top: -15px;
}
.editable-click, a.editable-click{
  border-bottom:none !important;
}
.editable-empty{
  opacity:0;
}
.xeditable{
  cursor:pointer;
}


.content .tasksContent{
  padding: 20px 30px;
}
.content .tasksContent .addJobBtn{
  color: #fff;
  cursor: pointer;
  background: #d6d6d6;
  width: 95px;
  text-align: center;
  line-height: 33px;
  border-radius: 3px;
  margin: 0px auto 30px;
}
.content .tasksContent .jobTitle{
  color: #fbb336;
  font-size: 19px;
  margin-bottom: 15px;
}
.content .tasksContent .addJobTaskBtn{
  background: #fdcb74;
  color: #fff;
  line-height: 31px;
  width: 90px;
  text-align: center;
  border-radius: 3px;
  margin: 10px auto 30px;
  cursor:pointer;
}
.content .tasksContent .addJobTaskBtn i{
  margin-right: 6px;
}
.content .tasksContent .task{
  color: #565656;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 15px;
  line-height: 14px;
  padding-bottom: 9px;
}
.content .tasksContent .task.Complete{
  text-decoration: line-through;
}
.content .tasksContent .task .chk{
  margin-right:7px;
}


.addTaskArea{
  background: #eaeaea;
  padding: 7px;
  border-radius: 4px;
}
.nameArea input{
  border-radius: 4px;
  border: 1px solid #ccc;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
  position:absolute;
  top:0px;
  right:0px;
}

.triangle-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #e0e0e0;
  position:absolute;
  top: 240px;
  right: 360px;
}
.triangle-left:after{
  content:'';
  width: 0; 
  height: 0; 
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid #fff;  
  position:absolute;
  top:-21px;
  left:1px;
}


/* ADD TASK POPUP */
.addTaskPopup{
  height:100%;
  width:100%;
  position:fixed;
  top:0px;
  left:0px;
  display:none;
  z-index:4;
}
.addTaskHolder{
  background: #fff;
  min-height: 100px;
  width: 780px;
  position: relative;
  z-index: 1;
  margin: 5% auto 0%;
  border-radius: 4px;
  padding:30px;
  border: 3px solid #2b2b2b;
}
.addTaskForm{
  /*background: #f5f5f5;
  border: 2px solid #dedede;*/
  border-radius: 3px;
  padding: 0px 20px;
  margin-top:46px;
}
.addTaskHolder .holder{
  margin-bottom:20px;
}
.addTaskHolder .holder label{
  margin-right:10px;
  width:120px;
  text-align:right;
}
.addTaskHolder .popupTitle{
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
  background: #50cbff;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.addTaskHolder .addTaskTitle{
  text-align: center;
  font-size: 20px;
  color: #51cbff;
}
.addTaskSubmitBtn{
  background: #7ed67e;
  width: 120px;
  line-height: 51px;
  text-align: center;
  margin: 24px auto 0px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 21px;
}
#taskNameInput{
  margin: 20px 0px 30px;
}

#addTaskDescriptionInput{
  margin-top:30px;
}
/* ---- TIMER ---- */
.navigationArea .timerHolder{
    position: absolute;
    top: 30px;
    right: 20px;
    width: 100px;
    height: 41px;
    line-height: 41px;
    font-size: 27px;
    text-align: center;
    cursor: pointer;
    background:#71d9fd;
    border: 2px solid #fff;
    border-radius:4px;
    color:#fff;
    z-index: 2;
}
.navigationArea .timerHolder .leftButton{
  border-right: 1px solid #fff;
  width:70px;
  position: relative;
  top: 0px;
  height:100%;
}
.navigationArea .timerHolder .rightButton{
  float:left;
  width:26px;
}
.navigationArea .timerHolder .leftButton .playPauseIconHolder{
  position:relative;
  top:-2px;
  left:3px;
  font-size:16px;
}
.navigationArea .timerHolder .leftButton .timerTextHolder{
  position:relative;
  top:-7px;
}
.navigationArea .timerHolder .leftButton .playBtn{
  font-size:16px;
}
.navigationArea .timerHolder .leftButton span{
  font-size:12px;
}
.navigationArea .timerHolder .rightButton .timerIcon{
  font-size:19px;
  position: relative;
  top: -2px;
}
.navigationArea .timerHolder .startText, .timerHolder .pauseText{
    position: absolute;
    left: -190px;
    font-size: 20px;
    display:none;
}
#timerText{
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -1px;
    width: 47px;
    display: inline-block;
}
.navigationArea .timerHolder .taskPicker{
    background: #72d9fd;
    /*height: 260px;*/
    width: 400px;
    position: absolute;
    top: 46px;
    right: 0px;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #929292;
    border: 5px solid #fff;
    display:none;
    font-size:16px;
    padding:0px 20px 20px;
}
.navigationArea .timerHolder .taskPicker .taskPickerTitle{
    margin: 12px 0px 20px;
}
.timerHolder .taskPicker .picker{
  margin-bottom:10px;
  text-align:left;
}
.timerHolder .taskPicker .picker label{
  text-align:right;
  width:60px;
}
.taskPicker .submitBtn{
  width: 120px;
  background: #1e97c1;
  border-radius: 3px;
  margin: 32px auto 0px;
  display:none;
}

.timerFinishedPopup{
    position: absolute;
    top: 46px;
    right: 0px;
    background: #6cd9ff;
    width: 300px;
    border-radius: 4px;
    overflow: auto;
    padding: 24px;
    font-size:19px;
    display:none;
    border: 2px solid #fff;
}
.timerFinishedPopup .title{
  text-align:center;
}
.timerFinishedPopup .btnsHolder{
  margin-top:22px;
}
.timerFinishedPopup .btnsHolder .finishedBtn{
    background: #47a8cc;
    width: 115px;
    float: left;
    margin-right: 10px;
    border-radius: 4px;
}
.timerFinishedPopup .btnsHolder .pauseBtn{
    background: #68ccf1;
    width: 115px;
    float: left;
    color: #dbf1f9;
}


/* ----------------- TOOLS AREA ---------------- */
.toolsArea{
  height:60px;
  position:relative;
}
.newProjectBtn{
  background: #676767;
  width: 100px;
  text-align: center;
  color: #fff;
  line-height: 38px;
  border-radius: 4px;
  position: relative;
  top: 10px;
  left: 15px;
  cursor:pointer;
}
.filterBtnsHolder{
    position: absolute;
    width: 530px;
    z-index: 3;
    top: 26px;
    left: 160px;
}
.filterBtnsHolder .filterBtn{
    float: left;
    width: 61px;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    position: relative;
    font-size: 10px;
    color: #cacaca;
    border-right: 1px solid #eaeaea;
}
.filterBtnsHolder .filterBtn.selected{
  background: #ccc;
  color: #fff;

}
.filterBtnsHolder .filterBtn .resultsCount{
    position: absolute;
    height: 17px;
    width: 100%;
    line-height: 16px;
    border-radius: 10px;
    top: -15px;
    color: #d2d2d2;
    right: 17px;
    left: 0px;
    text-align: center;
}
.toolsArea .projectsSearchHolder{
  position: absolute;
    right: 374px;
    top: 12px;
    width: 330px;
}

/* ---------------- ADD PROJECT POPUP ----------- */
.addProjectPopup{  
  height: 100%;
  width: 100%;
  display: none;
  z-index: 3;
  position: fixed;
  top: 0px;
  left: 0px;
}
.addProjectPopup .topArea{
  margin-bottom:20px;
}
.addProjectPopup .background{
  z-index:3;
}
.addProjectHolder{
    width: 770px;
    overflow: auto;
    background: #fff;
    position: absolute;
    z-index: 10;
    top: 60px;
    left: 22%;
    padding: 30px;
    border: 3px solid #565656;
    border-radius: 5px;
}
.addProjectPopup .jobHolder{
    background: #d2d2d2;
    width: 100%;
    height: 190px;
}
.addProjectPopup .createProjectBtn{
    background: #81d03f;
    color: #fff;
    width: 120px;
    text-align: center;
    margin: 30px auto 0px;
    line-height: 47px;
    cursor:pointer;
}
.addProjectPopup .datesHolder{
  margin:34px 0px 0px;
}
.addProjectPopup .datesHolder .startDateHolder{
  margin: 0px 50px 0px 0px;
}
.addProjectPopup .datesHolder label{
  margin-right:10px;
}
.addProjectPopup .statusHolder{
  margin-top:30px;
}
.addProjectPopup .statusHolder label{
  margin-right:10px;
}


/* ------------- ADD JOB POPUP ------------------- */
.addJobPopup{
  height:100%;
  width:100%;
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  z-index:3;
}
.addJobPopup .background{
  z-index:3;
}
.addJobPopup .addJobHolder{
    background: #fff;
    height: 280px;
    width: 580px;
    position: absolute;
    top: 50px;
    left: 420px;
    z-index: 3;
    padding: 30px;
    border-radius: 5px;
    border: 3px solid #5d5d5d;
}
.addJobPopup .addJobHolder .submitBtn{
  background: #0eb91f;
  width: 100px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin: 23px auto 0px;
  cursor:pointer;
}





/* --------------------------- Tasks Popup -------------------------- */
.tasksPopup{
  position:fixed;
  top:0px;
  left:0px;
  top: 135px;
  left: 345px;
  background: #fff;
  border: 2px solid #5d5d5d;
  border-radius: 4px;
  width: 430px;
  display:none;
  z-index: 3;
  transition:all 300ms ease-in;
  overflow:auto;
  max-height:600px;
}
.tasksPopup .deleteBtn{
  display:none;
  position:absolute;
  right: 17px;
  top: 20px;
  cursor:pointer;
}
.tasksPopup:hover .deleteBtn{
  display:block;
}
.tasksPopup.show{
  display:block;
  transition:display 300ms ease-in;
}
.tasksPopup.expanded{
  display:block;
  width:1180px;
  left:116px;
  top:50px;
  transition:all 300ms ease-in;
}
.tasksPopup.addingTask{
  background: #efefef;
  transition:background 300ms ease-in;
}



.tasksPopup .addTaskHeader{
    position: absolute;
    width: 74px;
    height: 30px;
    left: 50px;
    top: 45px;
    border: 2px solid #fff;
    border-radius: 4px;
    opacity:0;
    transition:opacity 300ms ease-in;
}
.tasksPopup.expanded .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;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #5a5a5a;
  padding: 18px 0px;
}
.tasksPopup.expanded .titlesHolder{
}
.tasksPopup .titlesHolder .jobTitleHolder{
  position:relative;
  display:inline-block;
}

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

.tasksPopup .titlesHolder .projectTitle{
  font-size:18px;
  color: #464646;
}
.tasksPopup .progressBarHoursHolder{
  position:relative;
  width: 183px;
  margin: auto;
}
.tasksPopup .progressBar{
    background: #fff;
    height: 14px;
    border: 2px solid #5a5a5a;
    border-radius: 7px;
    width: 183px;
    /*margin: 12px auto 0px;*/
    overflow: hidden;
    transition:all 300ms ease-in;
}
.tasksPopup .progressBar .meter{
  width:25%;
  height: 100%;
  float:left;
  background: repeating-linear-gradient( 45deg, #f9dbae, #f9dbae 2px, #fdcc85 2px, #fdcc85 5px );
  transition:all 300ms ease-in;
}
.tasksPopup .progressBar .meter.complete{
  background:#f9b334;
  border-right: 1px solid #e6a52e;
  transition:all 300ms ease-in;
}
.tasksPopup .titlesHolder .completedHours{
    font-size: 11px;
    color: #636363;
    position: absolute;
    right: -107px;
    top: -1px;
    width: 101px;
    text-align: left;
}


/* ------ 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{
    width: 100%;
    background: #909090;
    height: 33px;
    line-height: 33px;
    color: #fff;
    margin-top: 0px;
    font-size: 12px;
    transition: all 400ms ease-in;
    border-bottom: 2px solid #000;
    overflow:auto;
}
.tasksPopup .taskTitle{
  float:left;
  text-align:center;
}
.tasksPopup .expandedShow{
  width:0px;
  overflow:hidden;
}
.tasksPopup .taskTitle.status, .tasksPopup .statusHolder{
  width:50px;
  height:20px;
  margin-right:10px;
}
.tasksPopup .taskTitle.name, .tasksPopup .taskHolder .nameHolder{
  width:250px;
  text-align:left;
}
.tasksPopup.expanded .taskTitle.startDate, .tasksPopup.expanded .startDateHolder, .tasksPopup.expanded .taskTitle.dueDate, .tasksPopup.expanded .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.projectedHours, .tasksPopup .taskHolder .projectedHours{
  width:98px;
  text-align:center;
}
.tasksPopup.expanded .taskTitle.completedHours, .tasksPopup.expanded .taskHolder .completedHours{
  width:98px;
  text-align:center;
  transition:all 300ms ease-in;
} 
.tasksPopup.expanded .taskTitle.timer, .tasksPopup.expanded .taskHolder .timerHolder{
  width:104px;
  height:24px;
  text-align:center;
  transition:all 300ms ease-in;
  cursor:pointer;
}
.tasksPopup.expanded .taskTitle.assigned, .tasksPopup.expanded .taskHolder .assigned{
  width:100px;
  text-align:center;
  transition:all 300ms ease-in;
}
.tasksPopup.expanded .taskTitle.notes, .tasksPopup.expanded .taskHolder .notesHolder{
  width:50px;
  text-align:center;
  transition:all 300ms ease-in;
}
.tasksPopup.expanded .taskTitle.docs, .tasksPopup.expanded .taskHolder .docsHolder{
  width:50px;
  text-align:center;
  transition:all 300ms ease-in;
}





/* --- Task Holder --- */
.tasksPopup .tasksHolder{
  padding:0px 0px;
}
.tasksPopup .taskHolder{
  width: 100%;
  min-height: 34px;
  clear: both;
  padding: 6px 0px 10px;
  transition: all 300ms ease-in;
  /*overflow: auto;*/
  border-bottom: 1px solid #efefef;
  position:relative;
}
.tasksPopup .taskHolder .deleteBtn{
  display:none;
  position:absolute;
  cursor:pointer;
  top:8px;
  right:23px;
}
.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.expanded .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:orange;
}
.tasksPopup .taskHolder .status:hover{
  border: 2px solid #545454;
}

.tasksPopup .taskHolder .name{
  position:relative;
  display:inline-block;
  min-width: 50px;
  min-height: 19px;
}
.tasksPopup .taskHolder .name .editBtn{
}




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

/* ----------- TIMER ACTIVATED HOLDER ------------ */
.timerActivatedHolder{
    position: relative;
    background: #dedede;
    border-radius: 3px;
    color: #fff;
    height: 22px;
    width: 98px;
    overflow:hidden;
}
.timerActivatedHolder .pauseIcon, .timerActivatedHolder .playIcon{
    position:absolute;
    top: 4px;
    left: 9px;
    text-align:center;
}
.timerActivatedHolder .pauseBtn{
    width: 26px;
    font-size: 12px;
    line-height: 20px;
    height: 21px;
}
.timerActivatedHolder .timerDisplay{
  font-size:11px;
  line-height:20px;
  width:50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  height: 21px;
  text-align:center;
}
.timerActivatedHolder .finishBtn{
    width: 20px;
    cursor:pointer;
    text-align:center;
    line-height: 20px;
}
.timerActivatedHolder .finishBtn:hover{
  background: #69d469;
}
.sidebar .timersContent{
  padding:18px;
}
.sidebar .timersContent .timerContentHolder{
  background: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 16px;
}
.sidebar .timersContent .projectName{
  font-size: 14px;
    margin-top: 0px;
    background: #6cdbff;
    border-radius: 5px 5px 0px 0px;
    padding: 4px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #5acbef;
}
.sidebar .timersContent .phaseName{
  font-size: 13px;
  text-align: center;
  background: #6cdbff;
  color: #fff;
  line-height:24px;
}
.sidebar .timersContent .timerHolder{
    position: relative;
    /*margin-bottom: 5px;*/
    /*border-bottom: 1px solid #d0d0d0;*/
    border-bottom:1px solid #ececec;
    padding: 1px 5px 5px 14px;
    height: 33px;
    line-height: 28px;
}
.sidebar .timersContent .timerHolder .timerIcon{
  position: absolute;
    color: #bbb;
    left: 6px;
    top: 8px;
}
.sidebar .timersContent .timerHolder .taskName{
  margin-left:10px;
}
.sidebar .timersContent .timerActivatedHolder{
  margin-bottom:5px;
  position:absolute;
  right:6px;
  top:4px;
}
.sidebar .timerActivatedHolder.paused .pauseIcon, .sidebar .timerActivatedHolder.running .playIcon{
  opacity:0;
}
.sidebar .timerActivatedHolder.running .pauseIcon, .sidebar .timerActivatedHolder.paused .playIcon{
  opacity:1;
}
/* ----- 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.expanded .taskHolder .timerIconHolder{
  width:20px;
  margin:auto;
}
.tasksPopup.expanded .taskHolder .timerIconHolder:hover{
  transform:scale(1.2);
  transition:all 300ms ease-in;
}











/* ---------- Task Status Popup ------------- */
.taskStatusPopup{
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
  border: 2px solid #5d5d5d;
  border-radius: 5px;
  z-index:3;
  transform:scale(0.1);
  opacity:0;
}
.taskStatusPopup.show{
  transform:scale(1);
  opacity:1;
  transition:all 300ms ease-in;
}
.taskStatusPopup .statusHolder{
  float: left;
  width: 92px;
  border-right: 1px solid #5d5d5d;
  text-align: center;
  padding: 10px 0px 10px;
  cursor:pointer;
}
.taskStatusPopup .statusInnerHolder{
    background: #fff;
    border-radius: 5px;
    width: 81px;
    margin: 0px auto 0px;
    padding: 6px 0px 6px;
}
.taskStatusPopup .statusInnerHolder:hover{
  background:#efefef;
  transition:all 150ms ease-in;
}
.taskStatusPopup .statusHolder .circle{
    width: 30px;
    height: 30px;
    background: #bfbfbf;
    border-radius: 30px;
    margin: 0px auto 6px;
    border: 2px solid #fff;
}
.taskStatusPopup .statusHolder .circle.inProgress{
  background:#f9b334;
}
.taskStatusPopup .statusHolder .circle.complete{
  background:#4dbf34;
}
.taskStatusPopup .statusHolder:hover .circle{
  /*box-shadow: 1px 1px 4px black;
  transition:all 300ms ease-in;*/
}
.taskStatusPopup .bottomTriangle {
  width: 0;
  height: 0;
  border-left: 21px solid #0000;
  border-right: 21px solid #0000;
  border-top: 21px solid #5d5d5d;
  position: absolute;
  bottom: -23px;
  left: 114px;
}
.taskStatusPopup .bottomTriangle:after{
  content:'';
  width: 0; 
  height: 0; 
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-top: 21px solid #fff;  
  position:absolute;
  top: -25px;
  left: -21px;
} 
.taskStatusPopup .closeBtn{
  position: absolute;
  right: -10px;
  top: -9px;
  background: #fff;
  border: 2px solid #5d5d5d;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  text-align: center;
  cursor: pointer;
}





/* ----------- EDIT POPUP -------------- */
.editBtn{
  position: absolute;
  right: -31px;
  top: 0px;
  cursor: pointer;
  opacity:1;
  background: #fff;
  border: 2px solid #737373;
  height: 24px;
  width: 24px;
  border-radius: 20px;
  z-index: 4;
  color: #6f6f6f;
  box-shadow: 2px 2px 1px #d4d4d4;
  font-size: 13px;
  text-align:center;
}
.editBtn.dark{
  box-shadow:none;
}
.editPopupBGOverlay{
    position: fixed;
    top: 0px;
    left: 0px;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0.1;
    display:none;
}
.editPopup{
  position: absolute;
  top: -17px;
  left: -19px;
  background: #fff;
  border: 1px solid #ababab;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 1px 1px 1px black;
  width: 296px;
  z-index: 5;
  display:none;
}
.editPopup.dark{
  background: #7d7d7d;
  border: 1px solid #7d7d7d;
}
.editPopup .inputHolder{
  margin-right: 10px;
  position: relative;
  width: 198px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  overflow: hidden;
  background:#fff;
}
.editPopup.dark .inputHolder{
  border: 1px solid #656565;
}
.editPopup .inputHolder input{
  border:none;
  width:94%;
}
.editPopup .inputHolder .clearBtn{
  position: absolute;
    top: 12px;
    right: 5px;
    background: #d4d4d4;
    color: #fff;
    height: 15px;
    width: 15px;
    text-align: center;
    line-height: 15px;
    border-radius: 10px;
    font-size: 10px;
}
.editPopup.picklist .inputHolder{
  display:none;
}

/* ----- Picklist Holder ------- */
.editPopup .picklistHolder{
  width: 198px;
  float: left;
  height: 40px;
  line-height: 40px;
  display:none;
}
.editPopup .picklistHolder .picklist{
  height:36px;
  min-width:190px;
}
.editPopup.picklist .picklistHolder{
  display:block;
}


.editPopup .cancelBtn, .editPopup .acceptBtn{
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    line-height: 30px;
    position: relative;
    top: 5px;
    cursor:pointer;
}
.editPopup.dark .cancelBtn, .editPopup.dark .acceptBtn{
    border: 1px solid #636363;
}
.editPopup .cancelBtn{
  background:#f18889;
  margin-right:6px;
}
.editPopup .acceptBtn{
  background:#68e668;
}













/* ------------------------------ TIME ENTRY POPUP ----------------------------- 
--------------------------------------------------------------------------------*/
.timeEntryPopup{
  position: absolute;
    top: -100px;
    left: -100px;
    background: #fff;
    border: 2px solid #000;
    width: 248px;
    padding: 10px;
    border-radius:4px;
    z-index:3;
    opacity:0;
    transform:scale(0.7);
    transition:all 200ms ease-in;
}
.timeEntryPopup.show{
  opacity:1;
  transform:scale(1);
  transition:opacity 200ms ease-in, transform 200ms ease-in, width 300ms ease-in;
}
.timeEntryPopup.showContent{
  padding:20px;
  width:330px;
  transition:padding 300ms ease-in, width 300ms ease-in;
}



.timeEntryPopup .leftSmallTriangle {
    width: 0;
    height: 0;
    border-top: 12px solid #0000;
    border-bottom: 12px solid #0000;
    border-right: 12px solid #5d5d5d;
    position: absolute;
    top: 14px;
    left: -13px;
}
.timeEntryPopup .leftSmallTriangle:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 12px solid #0000;
  border-bottom: 12px solid #0000;
  border-right: 12px solid #fff;
  position: absolute;
  top: -12px;
  left: 3px;
} 


.timeEntryPopup .closeBtn{
  position: absolute;
  right: -10px;
  top: -9px;
  background: #fff;
  border: 2px solid #5d5d5d;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  text-align: center;
  cursor: pointer;
}



.timeEntryPopup .startTimerAddEntryHolder{
    height: 54px;
    clear: both;
    width: 210px;
    text-align: center;
    margin:0px auto 0px;
    position:relative;
    transition:all 300ms ease-in;
}
.timeEntryPopup.showContent .startTimerAddEntryHolder{
  margin:0px auto 20px;
  transition:all 300ms ease-in;
}
.timeEntryPopup .startTimerAddEntryHolder .startTimerIcon, .timeEntryPopup .addEntryIcon{
  font-size:30px;
}



.timeEntryPopup .backBtn{
    position: absolute;
    background: #fff;
    border: 1px solid #8a8a8a;
    height: 28px;
    line-height: 24px;
    width: 28px;
    border-radius: 14px;
    color: #8a8a8a;
    text-align: center;
    top: 3px;
    left: -20px;
    opacity:0;
    transition:all 300ms ease-in;
}
.timeEntryPopup.showContent .backBtn{
  opacity:1;
  cursor:pointer;
  transition:all 300ms ease-in;
}
.timeEntryPopup.showContent .backBtn:hover{
  background: #e2e2e2;
}



.timeEntryPopup .button{
    float: left;
    width: 100px;
    line-height: 34px;
    border-radius: 4px;
    cursor:pointer;
    overflow:hidden;
}




/* ----------- StartTimerHolder && AddEntryHolder ------------ */
.timeEntryPopup .startTimerHolder, .timeEntryPopup .addEntryHolder{
  transition:all 300ms ease-in;
  width:100px;
  float:left;
  overflow:hidden;
  cursor:pointer;
}
.timeEntryPopup .startTimerHolder:hover, .timeEntryPopup .addEntryHolder:hover{
  background: #dedede;
}
.timeEntryPopup.showContent .startTimerHolder{
  width:0px;
  opacity:0;
  transition:all 300ms ease-in;
}
.timeEntryPopup.showContent .startTimerHolder:hover, .timeEntryPopup.showContent .addEntryHolder:hover{
  background: #fff;
}


.timeEntryPopup.showContent .button:hover{
  background:#fff;
}


/* -------- Add Entry Holder ----------- */
.timeEntryPopup .addEntryHolder, .timeEntryPopup .addEntry{
  transition:all 300ms ease-in;
}

.timeEntryPopup.showContent .addEntryHolder, .timeEntryPopup.showContent .addEntry{
  width:200px;
  font-size:20px;
  transition:all 300ms ease-in;
}



.timeEntryPopup .separator{
    width: 1px;
    height: 100%;
    float: left;
    background: #a9a9a9;
    margin: 0px 4px;
    position: relative;
    top: 5px;
    overflow: hidden;
}
.timeEntryPopup.showContent .separator{
  display:none;
}

.timeEntryPopup .contentHolder{
  overflow:hidden;
  height:0px;
  clear:both;
  transition:all 300ms ease-in;
}
.timeEntryPopup.showContent .contentHolder{
  height:225px;
  transition:all 300ms ease-in;
}
.timeEntryPopup .notesHolder{
  margin-top:10px;
}
.timeEntryPopup .notesHolder .notesInput{
  height:120px;
}
.timeEntryPopup .submitBtnHolder{
      height: 36px;
    width: 100%;
    margin: 19px auto 0px;
}
.timeEntryPopup .submitAndCompleteTaskBtn{
  background: #10c3ff;
    line-height: 36px;
    width: 168px;
    text-align: center;
    color: #fff;
    margin-right: 10px;
    border-radius: 4px;
    float: left;
    height: 36px;
    cursor:pointer;
}
.timeEntryPopup .submitBtn{
  background: #c5c5c5;
    line-height: 36px;
    width: 100px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    float: left;
    height: 36px;
    cursor:pointer;
}   



.notesPopup{
  position: fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index: 3;
  display: none;
}
.notesPopup .background{
  opacity: 0.2;
}
.notesPopup .notesAreaHolder{
  position: absolute;
    background: #fff;
    min-height: 200px;
    width: 630px;
    top: 49px;
    left: 757px;
    border: 2px solid #000;
    padding: 20px;
}
.notesPopup .notesHolder{
      max-height: 300px;
    overflow: auto;
    /*border: 2px solid #dadada;*/
    padding: 5px;
}
.notesPopup .noteHolder{
    border-bottom: 1px solid #d6d6d6;
    overflow: auto;
    padding:11px 0px;
}
.notesPopup .noteHolder .leftHolder{
  float:left;
  width:90px;
}
.notesPopup .noteHolder .rightHolder{
  float:left;
  width:475px;
}
.notesPopup .addNoteArea{
  width:100%;
  padding:20px;
}
.notesPopup .addNoteBtn{
  clear:both;
  background: white;
  border:2px solid black;
  border-radius: 4px;
  width: 81px;
  text-align: center;
  margin: 10px auto 17px;
}
.notesPopup #addNoteInput{
  min-height:150px;
}





/* ---- SIDEBAR ---- */
.sidebar .statusBuckets{
  padding:10px;
  text-align:center;
}
.sidebar .statusBuckets .statusHeadersHolder{
  background: #6cdbff;
  clear: both;
  height: 29px;
  color: #fff;
  line-height: 29px;
  padding: 0px 8px;
}
.sidebar .statusBuckets .statusHeadersHolder div{
  float:left;
}
.sidebar .statusBuckets .statusHolder{
  clear: both;
    padding: 0px 8px;
    border-bottom: 1px solid #eaeaea;
    height: 30px;
    line-height: 30px;
}
.sidebar .statusBuckets .statusHolder div{
  float:left;
}
.sidebar .statusBuckets .statusNumber{
  width:30px;
}
.sidebar .statusBuckets .statusName{
  width:130px;
}
.sidebar .statusBuckets .statusTotalDollar{
  width:92px;
}
.sidebar .statusBuckets .statusDollarRemaining{
  width:50px;
}




/* ----------- Dollars Per Day Popup ---------- */
.popupHolder .dollarsPerDayHolder .dateHolder{
  margin-bottom:3px;
  position:relative;
}
.popupHolder .dollarsPerDayHolder .totalHoursDollarsHolder{
      position: absolute;
    color: #fff;
    top: 8px;
    right: 20px;
}

.popupHolder .dollarsPerDayHolder .monthlyTitle{
  font-size: 20px;
    margin-bottom: 11px;
    text-align: center;
    padding-bottom: 15px;
    background: #2a8bbb;
    line-height: 90px;
    height: 90px;
    color: #fff;
    border-radius: 5px;
}
.popupHolder .dollarsPerDayHolder .monthlyTitleHolder{
  position:relative;
  padding-top: 20px;
  border-top: 2px dashed #ff9100;
  margin-top: 20px;
}
.popupHolder .dollarsPerDayHolder .monthlyStatsHolder{
  position: absolute;
    top: 34px;
    right: 22px;
    color: #fff;
}
.popupHolder .dollarsPerDayHolder .weeklyTitleHolder{
  position:relative;
}
.popupHolder .dollarsPerDayHolder .weeklyStatsHolder{
      position: absolute;
    top: -2px;
    right: 19px;
    color: #fff;
}
.popupHolder .dollarsPerDayHolder .statsHolder{
    position: absolute;
    top: 0px;
    right: -3px;
}
.popupHolder .dollarsPerDayHolder .statsHolder .hours{
  font-size:14px;
}
.popupHolder .dollarsPerDayHolder .statsHolder .dollars{
  font-size:14px;
}
.popupHolder .dollarsPerDayHolder .statsHolder .dollarsPerHour{
  font-size:14px;
}

/* ------ Stats -------- */
.popupHolder .dollarsPerDayHolder .hours{
  width: 85px;
    float: left;
    font-size: 17px;
    text-align: right;
    margin-right: 19px;
    line-height: 29px;
}
.popupHolder .dollarsPerDayHolder .dollars{
  width: 58px;
    float: left;
    font-size: 16px;
    text-align: right;
    margin-right: 28px;
    line-height: 28px;
}
.popupHolder .dollarsPerDayHolder .dollarsPerHour{
  float: left;
    font-size: 15px;
    text-align: right;
    line-height: 27px;
    width:60px;
}


.popupHolder .dollarsPerDayHolder .weeklyTitle{
  font-size: 17px;
    margin-bottom: 2px;
    text-align: center;
    margin-top: 40px;
    background: #4ab2e6;
    color: #fff;
    border-radius: 4px 4px 0px 0px;
}
.popupHolder .dollarsPerDayHolder .dateTitle{
  background: #99dcff;
    color: #fff;
    line-height: 40px;
    padding-left: 13px;
    border-radius:4px;
}
.popupHolder .dollarsPerDayHolder .projectsHolder{
  margin-left:20px;
  overflow:hidden;
  transition:height 0.3s ease-in;
}
.popupHolder .dollarsPerDayHolder .projectsHolder.hide{
  height:0px;
  transition:height 0.3s ease-in;
}
.popupHolder .dollarsPerDayHolder .tasksHolder{
  margin-left:20px;
  margin-bottom:20px;
}
.popupHolder .dollarsPerDayHolder .taskHolder{
  clear: both;
    width: 630px;
    height: 30px;
    border-bottom: 1px solid #dedede;
    line-height: 30px;
    position:relative;
}
.popupHolder .dollarsPerDayHolder .taskName{
  width:250px;
}
.popupHolder .dollarsPerDayHolder .taskHours{
  width:100px;
}
.popupHolder .dollarsPerDayHolder .taskDollars{
  width:100px;
}




/* ----------- CLEAR FIX ------------- */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}