.masterScoringBoxModule{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}
.masterScoringBoxModule .background{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.3;
    display: none;
    pointer-events: all;
}
.masterScoringBoxModule.active .background{
    display: block;
}
.masterScoringBox{
	position: fixed;
    right: 0px;
    top: 0px;
    height: 100px;
    width: 150px;
    background: #6A4C93;
    background: var(--trackrHeaderColor);
    transition: width 300ms ease, height 300ms ease;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--trackrHeaderColor);
    pointer-events: all;
    border-left: 1px solid #8a8a8a;
    /*border: 3px solid #4e3177;*/
    /* box-shadow: -2px 2px 12px #adadad; */
}
.masterScoringBoxModule.active .masterScoringBox{
    border:2px solid white;
    border-radius: 4px;
}
.masterScoringBox:hover{
    /*filter: brightness(120%);*/
}
.masterScoringBox.refreshable{
    width: 210px;
    height: 150px;
    transition: width 300ms ease, height 300ms ease;
}
.masterScoringBox .valueName{
    
}
.masterScoringBox .infoView{
    position: absolute;
    top: -7px;
    left: 0px;
    width: 100%;
    opacity: 1;
    transition: opacity 300ms ease;
    opacity: 0;
}
.masterScoringBox .infoView.search{
    color: #fff;
    text-align: center;
    top: 15px;
    font-size: 40px;
}


.masterScoringBox.profit .infoView.profit{
    opacity: 1;
    transition: opacity 300ms ease;
}
.masterScoringBox.billableHours .infoView.billableHours{
    opacity: 1;
    transition: opacity 300ms ease;
}
.masterScoringBox.search .infoView.search{
    opacity: 1;
    transition: opacity 300ms ease;
}

.masterScoringBox .details{
    position: absolute;
    top: 65px;
    width: 100%;
    text-align: center;
    color: #fff;
    opacity: 0.4;
}
.masterScoringBox .details .avgDetailsHolder{
    width: 135px;
    margin: auto;
}
.masterScoringBox .details .avgDetailsHolder .avgDetails{
    float: left;
    width: 45px;
    border-right: 1px solid #808080;
}
.masterScoringBox .valueHolder{
	color: #fff;
    font-size: 29px;
    text-align: center;
    line-height: 94px;
}
.masterScoringBox .valueHolder .dollarLbl{
    font-size: 21px;
    position: relative;
    top: -5px;
    left: -2px;
}
.masterScoringBox .valueHolder .lbl{
	    font-size: 19px;
}
.masterScoringBox .refreshBtn{
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center;
    color: #fff;
    background: #7e7e7e;
    width: 40px;
    border-radius: 4px;
    font-size: 19px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 300ms ease;
}
.masterScoringBox.refreshable .refreshBtn{
    opacity:1;
    transition:opacity 300ms ease;
}
.masterScoringBox .remainingRevenueBtn{
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: center;
    color: #fff;
    background: #7e7e7e;
    width: 40px;
    border-radius: 4px;
    font-size: 19px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.masterScoringBox .remainingRevenueBtn.hide{
    display: none;
}
.masterScoringBox.refreshable .remainingRevenueBtn{
    opacity:1;
    transition:opacity 300ms ease;
    pointer-events: auto;
}
.masterScoringBox .projectSearchInputHolder{
    width: 100%;
    position: absolute;
    top: 100px;
}
.masterScoringBox .projectSearchInputHolder .projectSearchInput{
    width: 180px;
    margin: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid #808080;
    background: #848484;
    padding: 0px 10px;
    color: white;
}
.masterScoringBox .projectSearchInputHolder .projectSearchInput:focus{
    outline: none;
}


.masterScoringMoreInfoPopup{
    position: fixed;
    top: 0px;
    right: 220px;
    width: 290px;
    background: var(--trackrHeaderColor);
    color: #fff;
    border: 2px solid #4e3176;
    z-index: 11;
    padding-bottom:20px;
    border: 2px solid #fff;
    border-radius: 4px;
    overflow: hidden;
    max-height: 85px;
}
.masterScoringMoreInfoPopup.expand{
    max-height: 785px;
    /*transition: max-height 300ms ease;*/
}
.masterScoringMoreInfoPopup .header{
    clear: both;
    font-size: 25px;
    margin-left: 20px;
    margin-top: 20px;
}
.masterScoringMoreInfoPopup .infoHolder{
    clear:both;
    margin-left:40px;
    height:35px;
}
.masterScoringMoreInfoPopup .infoHolder.profit{
    /*opacity: 0;
    transition: all 500ms ease;
    cursor: pointer;*/
}
.masterScoringMoreInfoPopup .infoHolder.profit:hover{
    /*opacity: 0.5;
    transition: all 500ms ease;*/
}
.masterScoringMoreInfoPopup .infoHolder .label{
    float: left;
    width: 145px;
    line-height: 40px;
}
.masterScoringMoreInfoPopup .infoHolder .value{
    float: left;
    font-size: 23px;
    line-height: 40px;
}
.masterScoringMoreInfoPopup .divider{
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #ffffff3b;
    margin-top: 20px;
    margin-bottom: 20px;
    clear: both;
}