/******** CLIENT DASHBOARD STYLING *************/
.framelessWindow .x-window-body {
    border: none;
    border-radius: 5px;
}
.clientDashboardItem{
    /*background-color: #45818e;
    color: white;
    border: 1px solid #387582;
    border-radius: 0px;*/
    width: 100%;
    height: 100%;
}
.clientProfileImage{
    width: 90px;
    text-align: center;
}
.clientHeader{
    font-weight: bold;
    font-size: 1.5em;
    border-bottom: 1px solid white;
}
.clientSubHeader{
    font-weight: bold;
    font-size: 1.3em;
}
.clientPhysicalAddress{
    font-weight: normal;
    font-style: italic;
}
.clientRightLinks{
    position: absolute;
    right: 2px;
    vertical-align: middle;
    top: 30px;
    color: white;
    /*border-left: 2px solid white;*/
}
.expandToggle{
    position: absolute;
    right: 8px;
    top: 3px;
    width: 20px;
    height: 20px;
}
.clientStatus {
    text-align: center;
    font-size: 0.9em;
}
.customButton .fa{
    color: white;
}
.customButton{
    padding: 2px 10px 2px 10px;
    margin: 5px;
    width: 150px;
    height: 35px;
    color: white;
    background-color: rgba(255,255,255,0.3);
    border-radius: 5px;
}
.toggleClient{
    cursor: hand;
    cursor: pointer;
}
.btnEdit{
    cursor: hand;
    cursor: pointer;
}


.clientDashboardItem .ACTIVE{
    background-color: #45818e;
    color: white;
    border: 2px solid #337988;
}

.clientDashboardItem .INACTIVE {
    background-color: #f9a400;
    color: white;
    border: 2px solid #ec7812;
}

.clientDashboardItem .TESTING {
    background-color: #99CC99;
    color: white;
    border: 2px solid #ec7812;
}

.clientDashboardItem .LEAD{
    background-color: #582A72;
    color: white;
    border: 2px solid #337988;
}

.clientDashboardItem .SUSPENDED{
    background-color: #f9a400;
    color: white;
    border: 2px solid #ec7812;
}

.clientDashboardItem .FUTURESUSPEND {
    background-color: #533480;
    color: white;
    border: 2px solid #533480;
}

.clientDashboardItem .FUTUREACTIVATE{
    background-color: #c9ac82;
    color: white;
    border: 2px solid #c9ac82;
}

.clientDashboardItem .clientStatusNotification {
    background-color: #FF5733;
    color: white;
    border: 2px solid #C70039;
    margin: 0px 0px 0px 50px;
    padding: 5px;
    border-radius: 5px;
}

.clientDashboardItem .clientStatusActivation {
    background-color: #669966;
    color: white;
    border: 2px solid #006600;
    margin: 0px 0px 0px 50px;
    padding: 5px;
    border-radius: 5px;
}
.ACTIVE .clientRightLinks .fa {
    color: white;
}

.LEAD .clientRightLinks .fa{
    color: white;
}
.SUSPENDED .clientRightLinks .fa{
    color: white;
}

.fa .fa-chevron-circle-up .fa-2x .toggleClient{
    color: white;
}

.clientDashboardItem .fa {
    color: white;
}



/********* DEBTOR SUMMARY SECTION ******************/
.debtorView{
    width: 100%;
    height: 100%;
    color: black;
    font-size: 1.0em;
}
/* CUSTOM BUTTONS */
.debtorView .customButton{
    color: black;
    background-color: whitesmoke;
}
.debtorView .customButton .fa{
    color: darkgray;
}
.btnDebtorCell{
    cursor: hand;
    cursor: pointer;
}
.btnDebtorContactPh{
    cursor: hand;
    cursor: pointer;
}
.btnDebtorPremisesPh{
    cursor: hand;
    cursor: pointer;
}

/* NORMAL STYLE */
.debtorView .active{
    background-color: #73a6b1;
    color: white;
    border: 2px solid #337988;
}

/* OVERDUE STYLE */
.debtorView .suspended {
    background-color: #f9a400;
    color: white;
    border: 2px solid #ec7812;
}

.debtorView .onhold {
    background-color: #d4b072;
    color: white;
    border: 2px solid #9a8765;
}

/* DEBTOR PAYMENT STATUS */
.debtorView .Paid {
    background-color: darkgreen;
} 
.debtorView .Overdue {
    background-color: darkred;
}


/* DEBTOR RIGHTS LINKS */
.debtorView .SUSPENDED .clientRightLinks{
    color: white;
}
.debtorView .ACTIVE .clientRightLinks{
    color: white;
}
.debtorView .ONHOLD .clientRightLinks{
    color: white;
}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
.btnClientMsg{
    cursor: hand;
    cursor: pointer;
}
.btnClientMsg:hover{
    /*animation: fade 1500ms infinite;*/
    animation: fade 1500ms;
}
.btnDebtorMsg{
    cursor: hand;
    cursor: pointer;
}
.btnDebtorMsg:hover{
    /*animation: fade 1500ms infinite;*/
    animation: fade 1500ms;
}
.btnTechnical{
    cursor: hand;
    cursor: pointer;
}
.btnTechnical:hover{
    animation: fade 1500ms;
}
.btnClientActions{
    cursor: hand;
    cursor: pointer;
}
.btnClientActions:hover{
    animation: fade 1500ms;
}
.btnDebtorEdit{
    cursor: hand;
    cursor: pointer;
}
.btnDebtorEdit:hover{
    animation: fade 1500ms;
}

/* AGING TABLE STYLE */
.debtorView .paid .aging{
    border: 1px solid seagreen;
    background-color: darkgreen;
}
.debtorView .overdue .aging{
    background-color: maroon;
    border: 1px solid darkred;
    color: white;
}
.aging .overdue {
    background-color: maroon;
}
.aging .normal{
    background-color: darkgreen;
}
.agingField{
    border: 1px solid darkgray;
    border-radius: 5px;
    background-color: white;
    color: black;
    height: 25px;
    font-size: 1.0em;
    text-align: right;
    padding: 5px;
}
.aging {
    width: 100%;
    color: white;
    border-radius: 5px;
    table-layout: fixed;
}
.overdue .agingField{
    color: maroon;
}
.normal .agingField{
    color: seagreen;
}
.tdOverdue{
    background: maroon;
    border-radius: 5px;
}
.tdBlue {
    background: #2f7483;
    border-radius: 5px;
}

.tdNormal {
    background: seagreen;
    border-radius: 5px;
}
.payterms{
    border-left: 3px dashed white;
}
.toggleDebtor{
    cursor: hand;
    cursor: pointer;
}
/* PAYMENT INDICATOR LINE */
.indicatorLine {
    border-left: 5px;
    background-color: none;
}
.overdue .indicatorLine {
    border-left-color: maroon;
    background-color: none;
}
.normal .indicatorLine {
    border-left-color: seagreen;
}
/* PAYEMNT STATUS INDICATOR */
.indicator{
    width: 5px;
    height: 15px;
    border: 2px solid black;
    border-radius: 5px; 
}
.overdue .indicator {
/*    width: 20px;
    height: 10px;
    border: 2px solid black;
    border-radius: 5px;
*/    background-color: maroon;
}
.normal .indicator {
/*    width: 20px;
    height: 10px;
    border: 2px solid black;
    border-radius: 5px;
*/    background-color: seagreen;
}
/* DEBTOR INFORMATION HEADING STYLES */                         
.debtorHeader{
    font-size: 1.3em;
    font-style: italic;
    font-weight: bold;
    border-bottom: 1px solid white;
}
.head_paid .x-tab-inner {
    background-color: green;
    color: purple;
} 


.debtorSubHeader{
    font-size: 1.2em;
    font-style: italic;
    border-bottom: 1px solid white;
}
.debtorContextHeader{
    font-size: 1.1em;
}
.paymentHeader{
    font-weight: bold;
}
.tooltipMenu{
    background-color: #bdbdbd;
}
.MissingInfoSubHeader{
    background-color: #bdbdbd;
    font-size: 1.1em;
    font-style: italic;
    font-weight: bold;
}
.summaryLevel1{
    font-weight: bold;
    font-size: 1.2em;
}
.summaryLevel2{
    font-weight: normal;
    font-size: 1.0em;
}
.summaryLevel3{
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}
/********** STYLES FOR AUDIT GRID ***************************/
.grdDetail{
    background-color: whitesmoke;
    font-size: 0.9em;
}
.detailHead{
    background-color: #68bac1;
    font-weight:bold;
}
.detailSubHead{
    background-color: #b8d9d5;
    font-weight: normal;
    font-style: italic;
}
.detailTable{
    border: 1px solid darkgray;
    padding: 2px;
    width: 100%;
}
.detailTable td{
    border: 1px solid darkgray;
}

/******* STYLES FOR HISTORY GRID ****************/
.monitoringHeader{
    font-size: 16px;
    font-weight: bold;
    color: #074d79;
}
.auditVariables{
    background-color: lightgray;
}
.lblStyleTop{
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
    margin: 0;
}
.clientSection{
    background-color:rebeccapurple;
    table-layout: fixed;
}