* {
  font-family: "Muli";
  text-align: center;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  background: #474854;
}

.container {
  width: 1000px;
  height: 850px;
}

.header h1 {
  font-size: 2.5em;
  line-height: 60px;
  color: rgb(160, 27, 255);
}

.dashboard {
  width: 100%;
  height: 220px;
}

.hDashBoard {
  width: 25%;
  height: 220px;
  float: left;
}

.TDashBoard,
.TBetween {
  height: 100%;
  float: left;
}

.TDashBoard {
  width: 98%;
  background: #96bafc;
  border-radius: 8px;
  color: #051e4c;
}

.TDashBoard h5,
.iDashBoard h5,
.income h5,
.expense h5 {
  font-size: 1.2em;
  padding-top: 5px;
}

.TBetween {
  width: 2%;
}

.budgetOptions {
  margin-top: 0px;
}

.budgetOptions label,
.budgetDesc label {
  width: 100%;
  font-size: 0.85em;
}

.budgetOptions select,
.budgetDesc input {
  width: 80%;
  height: 25px;
  border: none;
  padding-left: 15px;
  margin: 2px 0;
  color: #001a4b;
  border-radius: 3px;
}

.budgetDesc button {
  width: 60%;
  height: 30px;
  margin-top: 7px;
  border: none;
  border-radius: 3px;
  background-image: linear-gradient(#78a2f0, #7199e4, #698ed4);
  font-size: 1.01em;
  font-weight: 600;
  color: #051e4c;
}

.budgetDesc button:hover {
  background-image: linear-gradient(#698ed4, #7199e4, #78a2f0);
  color: black;
}

select:focus,
input:focus,
button:focus {
  outline: 0;
}

select:hover,
input:hover,
button:hover,
.close:hover {
  cursor: pointer;
}

.jDashBoard {
  width: 75%;
  height: 220px;
  float: left;
}

.jTopDashBoard {
  width: 100%;
  height: 160px;
}

.iDashBoard {
  height: 100%;
  width: 32.8%;
  background: #fdc769;
  float: left;
  border-radius: 8px;
}
.jBetween {
  width: 0.8%;
  height: 100%;
  float: left;
}

.iIncome {
  background: #5df45b;
  color: #023b01;
}

.iExpense {
  background: #fa7676;
  color: #3d0202;
}

.iBalance {
  background: #43defd;
  color: #02323d;
}

.iDashBoard p {
  line-height: 90px;
  font-size: 2.4em;
}

.jBottomDashBoard {
  height: 45px;
  width: 100%;
  /* background: orange */
}

.bar {
  width: 98%;
  height: 35px;
  background: rgb(151, 254, 131);
  margin-left: 1%;
  margin-top: 15px;
}
.spot {
  float: left;
  height: 35px;
}

.summary {
  width: 100%;
  height: 570px;
  margin-top: 5px;
}

.income,
.expense {
  width: 49.7%;
  height: 570px;
  float: left;
}
.inBetween {
  width: 0.6%;
  float: left;
  height: 100%;
}
.income {
  background: #c2eac2;
  color: #023b01;
  border-radius: 10px;
}

.incomeSummary,
.expenseSummary {
  width: 100%;
  height: 520px;
  list-style: none;
  overflow: auto;
}

.listIncome,
.listExpenses {
  width: 90%;
  background: #63f863;
  margin: 10px 5% 0 5%;
  height: 30px;
  line-height: 30px;
}
.desc,
.percent,
.amount {
  line-height: 30px;
}

.listIncome .desc,
.listExpenses .desc {
  width: 59%;
  float: left;
  text-align: left;
  padding-left: 3%;
}

.listIncome .percent,
.listExpenses .percent {
  width: 12%;
  float: left;
}

.listIncome .amount,
.listExpenses .amount {
  width: 19%;
  float: left;
  text-align: right;
  padding-right: 0%;
}

.listIncome .close,
.listExpenses .close {
  width: 7%;
  float: left;
  line-height: 27px;
}

.expense {
  background: #99befd;
  color: #031e4e;
  height: 570px;
  border-radius: 10px;
}

.listIncome .empty {
  line-height: 30px;
}