/* 
  display: flex;
  flex-direction: column;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: flex-end;
  justify-content: flex-start;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
  flex-wrap: wrap;
  align-content: flex-end;
  align-content: flex-start;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
  gap: 1em;
  flex-grow: 1;
  flex-shrink: 5
  flex-basis: 300px;
  flex: 1;
  align-self: center;
  align-self: flex-end;
  align-self: flex-start;
  align-self: baseline;
  order: -1;
  */  


/* Reset margins for both body and html */
html, body{
	
	margin: 0;
}

/* Apply styles to the body for the gradient background */
body {
  /* background: linear-gradient(to bottom, #f0f0f0, #ddd);  */
  background-color: white;
  background-image: url("pattern.png");
  
}


/* Apply styles to the header */
header {
  background-color: #3498db;
  color: white;
  text-align: center;
  padding: 20px 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
}

header h1 {
  margin: 0; /* Remove default margin */
  font-size: 28px;
  letter-spacing: 2px;
}


.wrapper{
	display: flex;
	flex-flow: row wrap;
	text-align: center;
	height: auto;
	background-color: transparent; /* Set the container background to transparent */
	padding: 20px;
	position: relative; /* Make the container relative for positioning */
}


.wrapper>*{
	
	padding: 10px;
	border-radius: 10px;
	flex: 1 100%;
	margin: 5px;
	padding: 20px;
	width: 300px;
	background-color: transparent;
}


#charts{
	
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center; /* center horizontally */
	width: 100%;
	height: auto;
	
	
}

#chartsWrapper h1{
	text-align: center;
}

#myBarChart {
  width: 400px; /* Make the canvas fill its parent container horizontally */
  height: 200px; /* Set a specific height, or adjust as needed */
}


#chartsWrapper{
	
	display: none;
}


#wrapper2{

	/**/
	display: none;
	margin-top: 0;
	margin-bottom: 35px;
	height: auto;
}

#wrapper2 h1{
	text-align: center;
}

#currencyDropdownDiv{
	
	
	width: 70%;
	margin-left: auto;
    margin-right: auto;
	display: flex;
    justify-content: flex-end;
    align-items: center;
    
}


#currencyDropdownDiv2{
	display: flex;
	align-items: center;
}


#currencyDropdownDiv label,
#currencyDropdownDiv select {
    
}



/* Apply styles to the entire table */
#expenseTable {
  width: 70%; /* Set the table width to 70% */
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}


/* Style the header row */
#expenseTable thead th {
  background-color: #333;
  color: white;
  padding: 8px;
  text-align: left;
}


/* Style alternating rows */
#expenseTable tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}


/* Style table cells */
#expenseTable td {
  padding: 8px;
  border: 1px solid #ddd;
}




.header{
	background: tomato;
	height: 120px;
}



#footer h1{
	
	border-bottom: 1px solid #5ccaef;
	padding-bottom: 10px;
	
}

#footer{
	
	border-radius: 0px;
    padding: 3px;
	height: auto;
}


#footerDivFlex{
	
	display: flex;
	flex-direction: column;
}





.amounts{
	display: inline;
	margin: 0;
	padding: 0;
}






#monthlyIncomeLabel{
	/*background: tomato;*/
	
	margin-top: 25px !important;
	display: none;
	
}

#monthlyInvestmentLabel{
	
	display: none;
}


#currencyDropdownDiv2{
	
	display: none;
	
}

.reportLabels{
	text-align: left; /* Align the text within the <p> tag to the left */
	font-size: 18px; /* Adjust the font size as needed */
	margin-left: 30px;
    /*font-weight: bold;*/
}


.totalLabels{
	text-align: left;
	margin-left: 30px;
	font-size: 20px;
}


.main{
	text-align: left;
	background-color: transparent;
	height: auto;
	font-size: 24px;
}


.main p{
  line-height: 1.5; /* Adjust the line height as needed */
  border-bottom: 1px solid #ccc;/*  */
  padding-bottom: 10px;/*  */
  text-align: center; /* Center-align the text */
}


.aside1{
	background: gold;
	background-color: transparent;
	height: auto;
}


.aside1 h1{
	color: black;
}



.aside2{
	background-color: transparent;
	height: auto;
}


/* Styles for the form elements */
#expenseForm,
#incomeForm,
#investmentForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: black;
}

#expenseForm label, 
#incomeForm label,
#investmentForm label{
  
  
  /*font-weight: bold;*/
}

#expenseForm input,
#expenseForm select,
#expenseForm button, 
#incomeForm button,
#investmentForm button,
#incomeForm input,
#investmentForm input{
  padding: 5px;
  border: none;
  border-radius: 5px;
}


#expenseForm,
#incomeForm,
#investmentForm{
	
	text-align: center;
}

#expenseForm input,
#incomeForm input,
#investmentForm input{
	
	border: 1px solid #ccc;
}

#expenseForm select,
#incomeForm select,
#investmentForm select{
	
	border: 1px solid #ccc;
	
}

#expenseForm button{
  background-color: #3498db;
  font-weight: bold;
  color: white;
  
}

#incomeForm button,
#investmentForm button{
	
	background-color: orange;
	font-weight: bold;
	color: white;
}
  
/* Add margin-top to the budgetButton */
#budgetButton {
  background-color: #3498db;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
}


#scrollToExpensesBtn{
	
	background-color: #3498db;
	font-weight: bold;
	color: white;
	padding: 5px;
	border: none;
	border-radius: 5px;
	width: 100%;
	margin-top: 10px;
	
}


#page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 3px;
  text-align: center;
  height: auto;
  
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
  color: #333;
}

.footer-content a {
  color: #007bff;
  text-decoration: none;
}

.footer-content a:hover {
  text-decoration: underline;
}


/* Styling for the toast */
#toast {
  display: none;
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}



/* Style the "Edit" and "Delete" buttons with the "edit-button" and "delete-button" classes */
td .edit-button,
td .delete-button {
  background-color: #ff3333; /* Red background color */
  color: white; /* White text color */
  padding: 5px 10px; /* Padding around the button text */
  margin: 0;
  width: 70px;
  border: none; /* Remove button border */
  cursor: pointer; /* Add pointer cursor on hover */
}

/* Style the "Edit" and "Delete" buttons with the "edit-button" and "delete-button" classes on hover */
td .edit-button:hover,
td .delete-button:hover {
  background-color: #ff0000; /* Darker red background color on hover */
}




/* Modal container */
.modal {
  display: none; /* Hide the modal by default */
  position: fixed; /* Fixed position */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 1; /* Ensure the modal appears on top of other elements */
  overflow: auto; /* Enable scrolling when the content exceeds the modal's height */
}



/* Modal content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Center the modal vertically */
  padding: 20px;
  border: 1px solid #888;
  width: 70%; /* Adjust the modal width as needed */
  box-shadow: 0px 0px 10px 0px #888;
  position: relative;
}



/* Close button (x icon) */
#closeModalButton {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}



/* Close button hover effect */
#closeModalButton:hover {
  color: #ff3333; /* Red color on hover */
}



/* Modal Form label and input styles */
.modalLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}



#editExpenseName,
#editExpenseAmount
 {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

#editExpenseCategorySelect{
	
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
}



/* Submit button and Cancel button style */
#editExpenseSave,
#editExpenseCancel{
  background-color: #ff3333;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}



/* Submit button and Cancel button hover effect */
#editExpenseSave:hover,
#editExpenseCancel:hover{
  background-color: #ff0000; /* Darker red color on hover */
}




@media screen and (min-width: 1058px){
	
	.main{
		flex: 3;
		height: auto;
	}
		
	#footer{
		
		/*display: none;*/
		
		flex: 3;
		order: 4;
	}
	
	.aside1{
		flex: 4;
	}
	
	.aside2{
		flex: 4;
	}
	
	
	#footerDivFlexElement1{
		/*background-color: #3498db;*/
		border-bottom: 2px solid #5ccaef;
		display: none;
	
	}
	

}



@media screen and (min-width: 600px){
	
	.main{
		height: auto;
	}
	
	.main h2{
		text-align: center;
	}
	
	.aside{
		flex: 1;
	}
	
		
}


@media screen and (max-width: 992px){
	

	#footerDivFlex{
		
		/*background-color: #3498db;*/
		flex-direction: row;
		justify-content: center;
	}
	
	
	#footerDivFlexElement1{
		
		/*border-bottom: 2px solid #5ccaef;*/
		/*border-right: 2px solid #5ccaef;*/
		padding-right: 20px;
		display: none;
	}
	
	#footerDivFlexElement2{
		
		border-left: 2px solid #5ccaef;
		display: none;
		
	}
	

    .wrapper{
        /*background-color: green;*/
        overflow: hidden;
        
    }
    

}




@media only screen and (max-width: 601px){
	
	

	
	#footerDivFlex{
		
		/*background-color: #3498db;*/
		flex-direction: row;
		justify-content: center;
	}
	
	
	#footerDivFlexElement1{
		
		/*border-bottom: 2px solid #5ccaef;*/
		/*border-right: 2px solid #5ccaef;*/
		padding-right: 20px;
		display: none;
	}
	
	#footerDivFlexElement2{
		
		border-left: 2px solid #5ccaef;
		display: none;
		
	}
	
	
	.wrapper{
		margin-bottom: 50px;
		flex-direction: column;
		justify-content: center;
		align-items: center; /* center horizontally */
		overflow: hidden;
		padding: 0;
		width:100%;
	}
	
	.wrapper>*{
	
    	padding: 0;
    	border-radius: 10px;
    	flex: 1 100%;
    	margin: 0;
    	width: 300px;
    	background-color: transparent;
    }   
	
	#wrapper2{
		
		margin-bottom: 100px;
	}
	
	
	.main{
	    font-size: 16px;
	}
	
	.main h2{
	    
	   text-align: center;
	    
	}
	
	body{
	    width: 100%;
	    text-align: center;
	}
	
	
    #charts{
        padding: 40px;
    }
	

	
}