body {
  font-family: Arial, sans-serif;
  background-color: #1f1b1b;
  color: white;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 850px;
  margin: 0 auto;
  padding: 2px;
  background-color: #181414;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 35px;
}

h1 {
  text-align: center;
}

.income-form,
.expense-form {
  margin-bottom: 20px;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 25px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #ddd;
  text-align: left;
  background: #333;
  color: white;
}

th,
td {
  padding: 10px;
}

#add-expense {
  background-color: #dc3545;
}

#add-savings {
  background-color: orange;
}

#add-income:hover,
#add-expense:hover {
  background-color: #0056b3;
}

#add-income,
#add-expense,
#add-savings {
  border-radius: 25px;
  margin-bottom: 10px;
}

#openCalculatorBtn {
  border-radius: 5px;
  padding: 2 px;
}

.charts {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* .chart {
    height: 230px;
} */

.chart {
  width: 48%; /* Adjust the width as needed */
  text-align: center;
}

.expense-chart-canvas {
  padding: 10px 0 0 10px;
}

.income-chart-canvas {
  padding: 10px 0 0 10px;
}

/* Navigation bar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  padding: 20px;
  background-color: #333; /* Background color */
  color: #fff; /* Text color */
  transition: width 0.3s ease;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  color: #fff; /* Link color */
  text-decoration: none;
  transition: color 0.2s ease;
}

.sidebar a:hover {
  color: #00bcd4; /* Hover color */
}

/* Content styles */
.main-content {
  /* margin-left: 250px;  */
  padding: 20px;
}

.button-container {
  display: flex;
  justify-content: center; /* Horizontally center the buttons */
  align-items: center; /* Vertically center the buttons */
  margin-bottom: 10px;
}

.income-form,
.expense-form,
.savings-form {
  margin: 0 10px; /* Add space between the buttons */
}

/* Style the header text */
.topName {
  margin-bottom: 15px;
  font-family: "Arial", sans-serif;
  font-size: 2.5rem;
  color: #333; /* Text color */
  text-align: center; /* Center align the text */
  padding: 20px 0; /* Add some padding for spacing */
}

/* Add a subtle background gradient */
.topName {
  opacity: 0.7; /* Adjust the opacity as desired */
  font-family: "Verdana", sans-serif;
  font-size: 4rem;
  border-radius: 30px;
  padding: 0 20px;
  background: linear-gradient(135deg, #3498db, #e74c3c);
  color: #fff; /* Text color */
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* Text shadow effect */
}

.bottomName {
  opacity: 0.7; /* Adjust the opacity as desired */
  font-family: "Verdana", sans-serif;
  font-size: 2rem;
  border-radius: 30px;
  margin-top: 20px;
  padding: 0 20px;
  background: linear-gradient(135deg, #e74c3c, #3498db);
  color: #fff; /* Text color */
  text-align: center;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* Text shadow effect */
}

/* cal */
#centercal {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#calcu {
  width: 100px;
  border: 1px solid black;
}

.calBtn {
  padding: 20px 40px;
  background-color: #333;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

.calTxt {
  padding: 20px 30px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  border: 2px solid black;
}



/* Style for the modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7); /* Black background with transparency */
}

/* Style for the modal content */
.modal-content {
  background-color: #fff;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 70%; /* Set the width of the modal */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Style for the close button */
.close {
  color: red;
  float: none;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.remaining-budget {
  display: flex;
  justify-content: space-between;
  align-items: center;
}