.financial-summary {
margin: 20px 0;
background: #ffffff;
border-radius: 7px;
padding: 25px;
border: 1px solid #dddddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.financial-summary h2 {
font-size: 30px !important;
margin: 0px !important;
padding: 0px !important;
}

.all-data {
display: flex;
gap: 30px;
margin-top: 10px;
}

.all-data div {
font-size: 30px;
padding: 30px;
text-align: center;
border-radius: 7px;
color: #ffffff;
font-weight: 700;
}

.all-data div strong {
width: 100%;
display: block;
margin-bottom: 15px;
font-size: 18px;
text-transform: uppercase;
}

.income {
background: #009900;
}

.expense {
background: #cc0000;
}

.target {
background: #0052cc;
}

.target-left {
background: #997300;
}

.saving {
background: #26734d;
}

.financial-summary table {
width: 100%;
border-collapse: collapse;
}

.financial-summary th, .financial-summary td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.financial-summary th {
background-color: #f2f2f2;
}


.postbox {
border: 1px solid #dddddd;
background: #fff;
border-radius: 7px;
padding: 10px;
}

#add-income,
#add-expense {
background: #555555;
color: #ffffff;
border: none;
padding: 5px 10px 7px 10px;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}

.postbox-header {
border-bottom: 1px solid #dddddd;
margin-bottom: 20px;
}

.income-field,
.expense-field {
margin-bottom: 10px;
display: grid;
grid-template-columns: 15% 75% 10%;
gap: 5px;
}