/* ---------------- ADD PROJECT POPUP ----------- */
.addProjectPopup{  
  height: 100%;
  width: 100%;
  display: none;
  z-index: 7;
  position: fixed;
  top: 0px;
  left: 0px;
}
.addProjectPopup .topArea{
  margin-bottom:20px;
}
.addProjectPopup .background{
  z-index: 3;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.4;
}
.addProjectPopup .addProjectHolder{
    width: 770px;
    /* Stretch from top:60px to ~50px from the bottom of the viewport, capped
       so it never gets so tall that fields look stranded on big monitors. */
    height: calc(100vh - 110px);
    max-height: 900px;
    background: #f1f1f1;
    position: absolute;
    z-index: 10;
    top: 60px;
    left: 22%;
    /* Flex column lets .bodyArea grow to fill, pushing .footer hard against
       the bottom of the holder regardless of content height. Header sits on
       top via absolute positioning, so we reserve 60px of top padding for it. */
    display: flex;
    flex-direction: column;
    padding: 60px 0px 0px;
    border: 3px solid #000;
    box-shadow: 2px 2px 43px #525252;
    border-radius: 5px;
    overflow: hidden;
}
.addProjectPopup .bodyArea{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 36px 30px 30px;
}
.addProjectPopup .addProjectHolder .header{
    background: var(--trackrDarkBlueColor);
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 60px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /*border-bottom: 1px solid #2b98bd;*/
}
.addProjectPopup .addProjectHolder .header .headerIcon{
    position: absolute;
    left: 24px;
    top: 0px;
    line-height: 60px;
    font-size: 22px;
}

.addProjectPopup .jobHolder{
    background: #d2d2d2;
    width: 100%;
    height: 190px;
}
.addProjectPopup .footer{
    /* Flex item that won't shrink — keeps the footer pinned to the bottom of
       .addProjectHolder regardless of body content height. Inner flex centers
       the buttons horizontally with consistent spacing. */
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: #ebebeb;
    border-top: 1px solid #d0d0d0;
}
.addProjectPopup .footer .createProjectBtn{
    background: var(--positiveColor);
    color: #fff;
    width: 156px;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}
.addProjectPopup .footer .cancelBtn{
    background: #b5b5b5;
    color: #fff;
    width: 110px;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}
.addProjectPopup .footer .cancelBtn:hover{
    background: var(--negativeColor);
}
.addProjectPopup .clientHolder{
  position: relative;
}
.addProjectPopup .clientHolder .addProjectClientSelect{
  width: 250px;
    height: 40px;
    border: 1px solid #ccc;
}
.addProjectPopup .clientHolder .addProjectClientSelect.missingInfo{
  border: 2px solid var(--negativeColor);
}
.addProjectPopup .clientHolder .newClientBtn{
  position: absolute;
    top: 0px;
    right: 170px;
    background: var(--secondaryActionColor);
    color: #fff;
    line-height: 40px;
    border-radius: 4px;
    width: 60px;
    text-align: center;
    cursor: pointer;
}
.addProjectPopup .clientHolder .editClientBtn{
  position: absolute;
    top: 0px;
    right: 250px;
    background: #b5b5b5;
    color: #fff;
    line-height: 40px;
    border-radius: 4px;
    width: 60px;
    text-align: center;
    cursor: pointer;
}
.addProjectPopup .datesHolder{
  margin:20px 0px 0px;
}
.addProjectPopup .datesHolder .startDateHolder{
  margin: 0px 50px 0px 0px;
  float:left;
}
.addProjectPopup .leadSourceHolder{
  clear: both;
    margin-top: 20px;
}
.addProjectPopup .leadSourceDetailsHolder{
  clear: both;
    width: 100%;
    height: 45px;
    margin-top: 20px;
}
.addProjectPopup .leadSourceDetailsHolder #addProjectLeadSourceDetails{
  width: 500px;
}
.addProjectPopup .documentsLinkHolder{
  clear: both;
    width: 100%;
    height: 45px;
    margin-top: 20px;
}

.addProjectPopup #addProjectDocsFolderInput{
  width: 300px;
}
.addProjectPopup .parentProjectHolder{
  clear: both;
    width: 100%;
    height: 45px;
    margin-top: 20px;
}
.addProjectPopup .parentProjectHolder #addProjectParentIdInput{
  width: 300px;
}
.addProjectPopup .projectTypeHolder{
  clear: both;
    margin-top: 20px;
}
.addProjectPopup .addressHolder{
  clear: both;
    margin-top: 20px;
}
.addProjectPopup .statusHolder{
  margin-top:20px;
}
.addProjectPopup .assignedToHolder{
  clear: both;
  margin-top: 20px;
}

.addProjectPopup .harvestPicklist .picklistLbl{
  width: 100px !important;
  margin-right: 0px;
}
.addProjectPopup label.label{
  float:left;
  width:100px;
  position: relative;
  top: 4px;
}
.addProjectPopup .input{
  line-height: 35px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #51585e;
    padding: 0px 10px;
}
.addProjectPopup .input.missingInfo{
  border: 2px solid var(--negativeColor);
}
#addProjectName{
  width: 580px;
}
#addProjectAddress{
  width: 500px;
}

/* ---- Harvest Picklist ----- */

.harvestPicklist{
  position: relative;
  z-index: 3;
}
.harvestPicklist .picklistLbl{
    width: 53px !important;
    text-align: left;
    margin-right: 15px;
    float: left;
    line-height: 38px;
}
.harvestPicklist .picklist{
  width:300px;
}
.harvestPicklist .addNewHarvestObjBtn{
  position: absolute;
  top: 5px;
  left: 414px;
  color: #fff;
  border-radius: 4px;
  line-height: 27px;
  text-align: center;
  width: 90px;
  cursor: pointer;
  background: #e4e4e4;
  border: 1px solid #cecece;
}
.harvestPicklist .addNewHarvestObjHolder{
  height:0px;
  width: 500px;
  padding:0px 15px;
  margin:0px auto 0px;
  transition: height 300ms ease, padding 300ms ease, margin 300ms ease;
  overflow: hidden;
  border-radius: 5px;
  background: #e8e8e8;
  position:absolute;
  /*box-shadow: 4px 7px 0px #737373;
  box-shadow: 8px 8px 10px #e0dede;*/
}
.harvestPicklist.addNewObject .addNewHarvestObjHolder{
    height: auto;
    border: 2px solid #8e8e8e;
    border: 1px solid #c5c5c5;
    padding: 24px 15px 10px;
    margin: 10px auto 0px;
    transition: height 300ms ease, padding 300ms ease, margin 300ms ease;
}
.harvestPicklist .addNewHarvestObjHolder .inputHolder{
  margin-bottom:3px;
}
.harvestPicklist .addNewHarvestObjHolder .inputHolder.clientName{
  border-bottom: 1px solid #d0bfbf;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.harvestPicklist .addNewHarvestObjHolder .inputHolder .label{
  float: left;
    width: 130px;
}
.harvestPicklist .addNewHarvestObjHolder .inputHolder input{
  width: 320px;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    padding: 0px 10px;
    color: #808080;
}

.harvestPicklist .addNewHarvestObjHolder .nameInput{
    /*width: 420px;
    margin: auto;
    text-align: center;*/
}
.harvestPicklist .tooltipText{
  margin: 5px auto;
  width: 418px;
  text-align: center;
  color: #a2a2a2;
}
.harvestPicklist .addNewHarvestObjHolder.disabled .tooltipText{
  color:#ff8b8b;
}
.harvestPicklist .addNewHarvestObjHolder .btnsHolder{
  width: 150px;
  margin: 10px auto;
}
.harvestPicklist .addBtn{
  float: left;
  width: 70px;
  background: #56d456;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  line-height: 29px;
  cursor: pointer;
  margin-right:10px;
  cursor:pointer;
}
.harvestPicklist .addBtn.disabled{
  opacity:0.3;
}
.harvestPicklist .addNewHarvestObjHolder.disabled .addNewHarvestObjBtn{
  opacity:0.3;
}
.harvestPicklist .cancelBtn{
  float: left;
  width: 70px;
  background: #f57d7d;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  line-height: 29px;
  cursor: pointer;
}