.loadingProgressBar{
	position: fixed;
    top: 104px;
    left: 0px;
    width: 800px;
    width:100%;
    height: 2px;
    background: #616161;
    z-index: 20;
    border-radius: 14px;
    overflow: hidden;
}
.loadingProgressBar .meter{
	background:#6cdaff;
	height: 100%;
	width:0%;
}


.alertPopup{
    position: fixed;
    z-index: 15;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.alertPopup .background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
}
.alertPopup .content{
    position: relative;
    background: white;
    width: 500px;
    margin: 50px auto;
    border-radius: 10px;
    border: 2px solid black;
    padding: 20px;
}
.alertPopup .content .textHolder{
    text-align: center;
    margin: 20px auto 0px;
    width: 320px;
    font-size: 17px;
}
.alertPopup .content .textHolder .mainText{

}
.alertPopup .content .textHolder .subText{
    opacity: 0.4;
    font-size: 15px;
}
.alertPopup .content .buttonsHolder{

}
.alertPopup .content .buttonsHolder .button{

}
.alertPopup .content .buttonsHolder .okBtn{
    width: 130px;
    margin: 30px auto 0px;
    background: gray;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
    font-size: 18px;
    color: white;
    cursor: pointer;
}
.alertPopup .content .buttonsHolder .clearMasterPopupBtn{
    width: 200px;
    margin: 40px auto 0px;
    /*border: 1px solid #dbdbdb;*/
    border-radius: 4px;
    line-height: 41px;
    text-align: center;
    color: #a9a2a2;
    cursor: pointer;
}


.projectMasterPopup{
	position: fixed;
    top: 0px;
    top: 30px;
    left: 0px;
    width: 100%;
    height: 100%;
    height: calc(100% - 30px);
    z-index: 11;
}
body.printProposal .projectMasterPopup{
    display:none;
}

.trueProjectPriceTooltip{
    position: fixed;
    top: 34px;
    left: 140px;
    background: #fff;
    z-index: 12;
    padding: 10px;
    border-radius: 4px;
    border: 2px solid #000;
    font-size: 20px;
}

.projectMasterPopup .popupBackground{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 9;
    opacity:0;
}
.projectMasterPopup .popupModule{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.projectMasterPopup .contentHolder{
	position:relative;
	margin:0px auto 0px;
	background: #fff;
	border-radius: var(--popupBorderRadius);
	z-index:5;
	overflow:auto;
    /*box-shadow: 2px 2px 55px #464646;
    box-shadow: 2px 7px 9px var(--trackrDarkGrayColor);
    border: 3px solid var(--trackrDarkGrayColor);
    border: 3px solid #3e3e3e;*/
    border: 2px solid #fff;
}

.projectMasterPopup .popupTopBar{
	position: absolute;
    top: -200px;
    left: 0px;
    width: 100%;
    z-index: 10;
    opacity: 1;
    overflow:auto;
    /*box-shadow: 0px 3px 2px #484848;
    border-bottom: 2px solid #2d2d2d;*/
}
.projectMasterPopup .popupTopBar .topBarBG{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    /*background: #000;*/
    /*background: #0000008f;*/
    /*opacity: 0.75;*/
}
.projectMasterPopup .popupTopBar .topBarContent{
	position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    /*background: linear-gradient(0deg, #000, #545454);*/
}


/* -- Project Info */

.projectMasterPopup .popupTopBar .projectInfo{
	height: 70px;
    padding-top: 5px;
   	border-bottom: 1px solid #505050;
    border-bottom: 1px solid #7c7c7c;
}
.projectMasterPopup .popupTopBar .projectInfo .closeBtn{
	position: absolute;
    top: 15px;
    right: 35px;
    border-radius: 20px;
    color: #fff;
    height: 30px;
    width: 30px;
    line-height: 27px;
    text-align: center;
    font-size: 41px;
    cursor: pointer;
    z-index: 1;
}
.projectMasterPopup .popupTopBar .projectInfo .closeBtn:hover{
    color: var(--trackrBlueColor);
}
/* Project Price Holder */
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder{
	float:left;
	width:520px;
    position: absolute;
    left: 0px;
}
.projectMasterPopup .popupTopBar .projectStatus{
	float: left;
    line-height: 31px;
    margin-left: 30px;
    color: #fff;
    border: 1px solid #828282;
    height: 31px;
    padding: 0px 10px;
    border-radius: 4px;
    position: relative;
    top: 15px;
}
.projectMasterPopup .popupTopBar .projectBillingMethod{
    position: relative;
    top: 22px;
    margin-left: 15px;
    float: left;
    color: #fff;
    font-size: 13px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectPrice{
	float: left;
    font-size: 30px;
    color: #fff;
    margin-left: 30px;
    line-height: 56px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectExpenses{
    position: absolute;
    top: 38px;
    left: 28px;
    color: var(--negativeColor);
    width: 100px;
    text-align: center;
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectDollarsPerHour{
	float: left;
    font-size: 23px;
    color: #808080;
    margin-left: 20px;
    line-height: 61px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectDollarsPerHour.positive{
	color:var(--positiveColor);
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectDollarsPerHour.negative{
	color:var(--negativeColor);
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectDollarsPerHour .label{
	font-size:14px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectPriceHolder .projectOrigDollarsPerHour{
	float: left;
    margin-left: 15px;
    line-height: 66px;
    color:#adadad;
}
/* Project Name And Client Holder */
.projectMasterPopup .popupTopBar .projectInfo .projectNameAndClientHolder{
	/*float:left;*/
	width:40%;
	text-align:center;
	padding-top:7px;
    margin: auto;
}
.projectMasterPopup .popupTopBar .projectInfo .projectNameAndClientHolder .projectName{
	color:#fff;
	font-size:18px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectNameAndClientHolder .projectClient{
	position: relative;
	top: -5px;
	color:#adadad;
}
/* Project Hours Holder */
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder{
	width: 220px;
    position: absolute;
    top: 14px;
    right: 50px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectProgressMeter{
    height: 22px;
    width: 110px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #8a8a8aba;
    position: relative;
    top: 2px;
    margin: auto;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectProgressMeter .meter{
    height: 100%;
    background: var(--okkemSelectedColor);
    width: 20%;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectHours{
    font-size: 17px;
    text-align: center;
    color: #fff;
    width: 100%;
    position: relative;
    top: 2px;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectHours span{
    opacity: 0.5;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectPaceHours{
	float: right;
    margin-right: 25px;
    font-size: 20px;
    padding: 0px 21px;
    background: #808080;
    text-align: center;
    border-radius: 4px;
    position: relative;
    line-height: 26px;
    top: 16px;
    color: #fff;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectPaceHours.positive{
	background:var(--positiveColor);;
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectPaceHours.negative{
	background:var(--negativeColor);
}
.projectMasterPopup .popupTopBar .projectInfo .projectHoursHolder .projectPercentComplete{
	float: right;
    margin-right: 70px;
    font-size: 30px;
    line-height: 56px;
    color: #fff;
}









/* Nav Bar */
.projectMasterPopup .popupTopBar .navBar{
	height:38px;
	position:relative;
}
.projectMasterPopup .popupTopBar .navBar .navBtnHolder{
	position: absolute;
    left: 0px;
    top: 0px;
}
.projectMasterPopup .popupTopBar .navBar .navBtn{
	float: left;
    width: 100px;
    width: 130px;
    color:#fff;
    height: 38px;
    text-align: center;
    font-size: 15px;
    line-height: 38px;
    opacity: 1;
    position: relative;
    cursor:pointer;
    transition:background 300ms ease, color 300ms ease;
}
.projectMasterPopup .popupTopBar .navBar .navBtn.selected{
    /*background: #3db1f5;*/
    color: #fff;
    color: #383838;
    border-color: #fff;
    opacity:1;
}
.projectMasterPopup .popupTopBar .navBar .navBtn.contacts{
    
}
.projectMasterPopup .popupTopBar .navBar .navBtn:hover{
	/*color: #fff;*/
    background: #2f2f2f;
    transition:all 300ms ease;
}
.projectMasterPopup .popupTopBar .navBar .navBtn .btnBG{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: var(--trackrDarkBlueColor);
    background: var(--trackrHeaderColor);
    background: #fff;
    clip-path: circle(0px at 65px 20px);
    transition: clip-path 500ms ease;
    /*border-radius:4px;*/
}
.projectMasterPopup.customDark .popupTopBar .navBar .navBtn .btnBG{
    background: var(--selectedColor);
}
.projectMasterPopup .popupTopBar .navBar .navBtn.selected .btnBG{
	clip-path: circle(71px at 65px 20px);
	transition: clip-path 500ms ease;
}
.projectMasterPopup .popupTopBar .navBar .navBtn .label{
	position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
}
.projectMasterPopup.customDark .popupTopBar .navBar .navBtn .label{
    color: white;
}


.projectMasterPopup .popupTopBar .navBar .navBtn .label i{
    margin-right: 5px;
}
.projectMasterPopup .popupTopBar .syncProjectBtn{
    position: absolute;
    right: 20px;
    top: 4px;
    font-size: 20px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectBtn{
    color: white;
}
.projectMasterPopup .popupTopBar .projectMessagePopupBtn{
    position: absolute;
    right: 180px;
    font-size: 23px;
    top: 2px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectHarvestBtn{
    position: absolute;
    right: 140px;
    font-size: 23px;
    top: 2px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectOkkemProjectsBtn{
    position: absolute;
    right: 100px;
    font-size: 23px;
    top: 2px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectFolderBtn{
    position: absolute;
    right: 60px;
    top: 4px;
    font-size: 20px;
    cursor: pointer;
}
.projectMasterPopup .popupTopBar .projectFolderBtn.negative{
    color: var(--negativeColor);
}
.projectMasterPopup .popupTopBar .projectBtn:hover{
    color:var(--trackrBlueColor);
}
.projectMasterPopup .popupCanvas{
	position:fixed;
	width:100%;
	left:0px;
	top:0px;
	height:100px;
	z-index: 9;
	/*overflow: auto;*/
}
.projectMasterPopup .popupCanvas::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

.projectMasterPopup .popupCanvas .popupCanvasScreen{
	background: #00dcff;
    height: 100%;
    /*border: 2px solid #fff;*/
    float: left;
    position: relative;
    background:none;
    transition: background 300ms ease;
}
.projectMasterPopup .popupCanvas .popupCanvasScreen.selected{
	/*border:22px solid white;*/
	/*background:#a8f3ff;*/
	border: 22px solid #3c3c3c;
	border: 22px solid #a8f3ff;
    border-radius: 60px;
	transition: background 300ms ease;
}
.projectMasterPopup .popupCanvas .popupCanvasScreen .canvasTitle{
	position: absolute;
	height:350px;
    top: -320px;
    font-size: 190px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
    cursor:pointer;

}
.projectMasterPopup .popupCanvas .popupCanvasScreen .canvasTitle .titleBG{
	background: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.3;
    display:none;
}
.projectMasterPopup .popupCanvas .popupCanvasScreen .canvasTitle .titleLabel{
	position: relative;
	text-shadow: 6px 15px 69px black;
	opacity:0;
}
.projectMasterPopup .popupCanvas .popupCanvasScreen .clickOverlay{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 6;
    cursor:pointer;
}
/* --- Popup Bottom Bar --- */

.projectMasterPopup .popupBottomBar{
	position: absolute;
    bottom: -60px;
    left: 0px;
    width: 100%;
    height: 60px;
    z-index: 10;
    opacity: 1;
}
.projectMasterPopup .popupBottomBar .bottomBarBG{
	position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.15;
}
.projectMasterPopup .popupBottomBar .bottomBarContent{
	position:relative;
}

.projectMasterPopup .popupBottomBar .bottomBarBtnsHolder{
	position: absolute;
    top: 13px;
    right: 0px;
}
.projectMasterPopup .popupBottomBar .bottomBarBtnsHolder .bottomBarBtn{
	float: left;
    width: 120px;
    background: var(--trackrBlueColor);
    background: var(--okkemSelectedColor);
    margin-right: 15px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    cursor:pointer;
}
.projectMasterPopup.customDark .popupBottomBar .bottomBarBtnsHolder .bottomBarBtn{
    background: var(--selectedColor);
}
.projectMasterPopup .popupBottomBar .bottomBarBtnsHolder .bottomBarBtn.green{
	background: var(--positiveColor);
}

.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder{
	position: absolute;
    top: 14px;
    left: 16px;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock{
	float: left;
    margin-right: 12px;
    border-right: 1px solid #777;
    padding-right: 12px;
    text-align: center;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock.clickable{
    cursor: pointer;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock .label{
	color: #c7c7c7;
    float: left;
    line-height: 32px;
    margin-right: 7px;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock.smallLabel .label{
    width: 58px;
    line-height: 16px;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock.clickable:hover .label{
    color: var(--trackrBlueColor);
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock .valueHolder{
	color: #fff;
    float: left;
    font-size: 21px;
    background: #1e8eb5;
    background: #fff;
    color: #000;
    padding: 7px;
    border-radius: 4px;
    position: relative;
    top: -8px;
}
.projectMasterPopup.customDark .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock .valueHolder{
    background: white;
    color: #606060;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock.positive .valueHolder{
    background: var(--positiveColor) !important;
    color: white !important;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock.negative .valueHolder{
    background: var(--negativeColor) !important;
    color: white !important;
}
.projectMasterPopup .popupBottomBar .bottomBarInfoBlocksHolder .bottomBarInfoBlock .value{

}


.messagePopup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 11;
}
.messagePopup .background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
}
.messagePopup .content{
    position: relative;
    background: white;
    width: 650px;
    margin: 200px auto;
    padding: 20px;
    border-radius: 4px;
}
.messagePopup .content div{

}
.messagePopup .content div span{
    font-weight: 700;
    font-size: 15px;
}




.bottomBarInfoTooltip{
    position: fixed;
    z-index: 11;
    background: #fff;
    padding: 10px;
    width: 300px;
    border-radius: 4px;
    text-align: center;
    border: 2px solid black;
}
.bottomBarInfoTooltip .content div{
    border-bottom: 1px solid #dadada;
    padding: 10px 0px;
}
.bottomBarInfoTooltip .content div:last-child{
    border: none;
}
.bottomBarInfoTooltip span{
    font-weight: 500;
    font-size: 16px;
    background: var(--trackrBlueColor);
    padding: 0px 5px;
}