.cashflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    height: 30px;
}


.cashflow-info {
    display: flex;
    align-items: center;
    background: ;
}



.cashflow-info-links {
    /* margin-left: 10px; */
    background: #fff;
    border-radius: 2px;
}

.cashflow-info-links a {
    /* background: #fff; */
    padding: 7px 15px;
    display: inline-block;
    text-decoration: none;
    width: 110px;
    text-align: center;
    color: #10a88d;
    font-family: "Google Sans Medium", sans-serif;
}

.cashflow-info-links a:hover {
    color: #4e6784;
}

.cashflow-info-links i {
    margin-right: 5px;
}

.cashflow-info-links .ci {
    border-right: 1px solid #dedede;
    color: #2fb34b;
} 


.cashflow-info-links .co {
    color: #cf5c5c;
} 








/* CASHFLOW STATUS */

.cashflow-status  {
    display: flex;
    margin-bottom: 60px;
}

.cash-in-status {
    background: #e6fcde;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cash-in-status img {
    width: 50px;
    margin-left: 30px;
    opacity: 0.6;
}

.cash-out-status {
    background: #fff6dd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cash-out-status img {
    width: 55px;
    margin-left: 30px;
    opacity: 0.5;
}



.current-cashflow,
.cash-in-status,
.cash-out-status {
    padding: 15px;
    border-radius: 5px;
    margin-right: 20px;
    min-width: 200px;
}

.cash-in-status p,
.cash-out-status p {
    margin-bottom: 10px;
    color: #747474;
    font-size: 15px;
}

.cash-in-status span,
.cash-out-status span {
    font-family: "Google Sans Bold";
    font-size: 25px;
    /* color: #424956; */
}

.cash-in-status span {
    color: #3b993b;
}

.cash-out-status {
    color: #df4b4b;
}



.current-cashflow-alert {
    padding: 10px 15px;
    border-radius: 5px;
    margin-right: 20px;
}



.current-cashflow {
    background: #767676;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-cashflow img {
    width: 50px;
    margin-left: 30px;
    opacity: 0.6;
}

.current-cashflow p {
    margin-bottom: 10px;
    color: #fff;
    font-size: 15px;
}

.current-cashflow span {
    font-family: "Google Sans Bold";
    font-size: 25px;
    color: #fff;
}



.current-cashflow-alert {
    background: #dd3d3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-cashflow-alert img {
    width: 50px;
    margin-left: 30px;
    opacity: 0.6;
}


.current-cashflow-alert p {
    margin-bottom: 10px;
    color: #fff;
    font-size: 15px;
}

.current-cashflow-alert span {
    font-family: "Google Sans Bold";
    font-size: 25px;
    color: #fff;
}






/* SEARCH FIELD */

.cashflow-search {
    display: flex;
    justify-content: flex-end;
}

.cf-seach-keyword-field-container {
    position: relative;
    display: inline-block;
}

.cf-seach-input-field {
    padding-left: 35px; /* Adjust as needed based on the icon size */
    background: #fff;
    width: 250px;
    height: 30px;
    border-radius: 20px 0 0 20px;
}

.cf-seach-input-field::placeholder {
    color: #a9a9a9;
}


.svg-icon {
    position: absolute;
    left: 10px; /* Adjust as needed based on the desired spacing */
    top: 50%;
    transform: translateY(-50%);
    /*fill: #555;*/     /* Adjust the color as needed */
    width: 16px; /* Adjust the width and height as needed | width and height is where icon was placed*/
    height: 16px;
}

.svg-icon img {
    
    width: 16px; /* this is the actual icon size */
    filter: brightness(0) saturate(100%) invert(78%) sepia(3%) saturate(25%) hue-rotate(322deg) brightness(88%) contrast(86%);
}

.cashflow-search-submit {
    border: none;
    background: #3cb383;
    height: 100%;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 20px;
    height: 30px;
    border-radius: 0 20px 20px 0;
}


.cf-seach-keyword-field-container,
.monthpicker-field-container {
    margin-right: 5px;
}







/* CASH FLOW TABLE STYLES */

table.cf-table {
    border-collapse: collapse;
    border-radius: 5px;
    width: 100%;
    overflow: hidden;
}

table.cf-table th, table.cf-table td {
    border: 1px solid #e2e0e0;
    padding: 10px;
}

table.cf-table th {
    background: #f2f2f2;
    font-size: 14px;
    /* font-family: 'Google Sans Medium', sans-serif; */
}


table.cf-table tr:nth-child(odd) {
    background-color: #fff; 
}

table.cf-table tr:nth-child(even) {
    background-color: #f9f9f9; 
}

table.cf-table td {
    font-size: 14px;
    color: #595959;
}

.tar { /* text align righ plugable */
    text-align: right;
}

.tac { /* text align center plugable */
    text-align: center;
}

table.cf-table .cis { /* cash in style */
    color: #199851;
    font-family: 'Google Sans Bold', sans-serif;
}

table.cf-table .cos { /* cash out style */
    color: #e32e2e;
    font-family: 'Google Sans Bold', sans-serif;
}











/* .monthpicker-field-container {
    background: #d54747;
    display: flex;
    align-items: center;
    padding-left: 10px;
} */



/* .monthpicker-input-field {
    font-size: 15px;
    color: #fff;
}

.monthpicker-input-field::placeholder {
    color: #a9a9a9;
} */