/* General styling for larger screens */
body {
            font-family: 'Garamond',serif;
            margin: 0;
            background-color: white;
            padding: 0cm;
        }
	
	.mobile-home-button {
		display: none;
	}
	
	/* Upper ribbon */
	.upper-ribbon {
		position: fixed;
		top: 0;
		width: 100vw;
		background-color: #fff;
		z-index: 1002;
		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.08),
					0 1px 1px rgba(0, 0, 0, 0.12);
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100px; /* Adjust the height */
		transition: all 0.3s ease;
	}


	/* First row: CREDIT SIMULATOR text */
	.credit-text {
		text-align: left;
		font-size: 12px;
		font-weight: bold;
		padding: 8px;
		margin-top:20px;
		color: #fff;
	}

	/* Second row: Menu row (logo and sections) */
	.menu-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px;
		background-color: #8c0017;
	}

	/* Logo styling */
	.logo {
		padding: 10px;
		margin-left: 10px;
		height: 24px;
		width: 24px;
		border-radius: 20px;
	}

	/* Sections in the menu */
	.menu-section {
		padding: 10px;
		font-size: 18px;
		color: #fff;
		text-align: center;
		cursor: pointer;
		transition: color 0.3s;
		position: relative;
		margin-left: 5%;
		margin-right: 5%;
		font-weight:bold;
	}

	.menu-section:hover {
		color: #ffb012;
	}

	/* Section styles */
	.section {
		position: relative;
		cursor: pointer;
	}

	/* Dropdown list styles */
	.section-list {
		display: none;
		position: absolute;
		top: 100%;
		background-color: #ffffff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 10px;
		left: 50%;
		transform: translateX(-50%);
		list-style-type: none;
		margin: 0;
		min-width: 250px;
		z-index: 1000;
	}

	.menu-section:hover .section-list {
		display: block;
	}

	.section-list li {
		padding: 8px 10px;
		color: #333;
	}

	.section-list li:hover {
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.section-list li a {
		text-decoration: none;
		color: #333;
		font-size: 16px;
	}

	.section-list li a:hover {
		color: #ffb012;
	}
	
	.header-link {
		text-decoration: none; /* Remove underline */
		color: inherit; /* Inherit color from the parent for the text */
		display: inline-block; /* Ensure the link wraps the entire header */
	}

	.header-link .header {
		cursor: pointer; /* Shows pointer on hover to indicate a link */
	}
	
	
		.main-summary {
			display: flex;
			flex-direction: column; /* Stack elements vertically */
			align-items: center; /* Center horizontally */
			gap: 30px; /* Space between containers */
			padding:0cm;
			width:30vw;
			margin-top: 20px;
			margin-left:0px;
		}

		/* First summary container */
		.summary-container: {
			width: 100%; /* Adjust to full width or specific width as needed */
			text-align: center;
			height:30vh;
			align-items:center;
			flex-grow:1;
		}

		/* Second row holding the other two summary containers */
		.summary-row {
			display: flex;
			justify-content: center; /* Centers items side by side */
			gap: 30px; /* Space between side-by-side containers */
			width: 100%; /* Full width for row */
		}

		.summary-container {
			display: flex;
			flex-direction: column;
			justify-content:center;
			align-items: center;
			width: 100%; /* Half of the row width */
			margin-bottom:0px;
			background-color: white;
			color:#7a0110;
			border: 1px solid #ccc;
			border-radius: 8px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			
		}
		#below {
			min-height:30vh;
		}
		/* Box styling for all box-pair and box-pair-monthly elements */
		.box-pair,
		.box-pair-monthly {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content:center;
			padding: 10px;
			flex-grow:1;
		}

		.box {
			text-align: center;
		}

		.text-box {
			box-shadow:none;
			font-size: 16px;
			color: #333; /* Text color */
			margin-bottom: 3vh;
		}

		.numeric-box {
			
			font-size: 24px;
			font-weight: bold;
			color:#7a0110; /* Numeric text color */
			
		}
		#monthly-payment-main {
			font-size: 36px;
			color:#7a0110;
		}

			
		label[for="DepositAmountSlider"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
		}
		
		label[for="DepositTermSlider"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
		}
		
		
		/*input[type="number"] */ 
		/* Rate Inputs */
		
		#RateInputs {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr; /* Two columns */
			grid-gap: 10px; /* Space between columns */
			align-items: center; /* Vertically center the content */
			margin-left: 0px;
		}

		#RateInputs label {
			margin-bottom: 0px; /* Space below the label */
			text-align: center;
			font-size: 16px;
		}

		#RateInputs input[type="number"] {
			width: 100%; /* Make the input fields fill their containers */
			padding: 4px;
			text-align: center; /* Center the text inside the input fields */
		}
		label[for="dividendyield"],
		label[for="InflationRate"],
		label[for="interestRate"] {
			font-size: 24px;
		}


		
		/* CAGR calculation features */
		
		label[for="CAGR"],
		label[for="useGlobalLumpSum"] {
			font-size: 14px;
			color: gray;
		}
		
		
		#CAGRInputs, #lumpsuminput {
			display: none; /* Initially hidden */
			margin-top: 8px;
			display: grid;
			grid-template-columns: 1fr 1fr; /* Ensures two equal columns */
			gap: 8px;
			align-items: center;
		}

		.input-container {
			display: flex;
			align-items: center;
			justify-content: space-between; /* Ensures labels and inputs are spaced evenly */
			gap: 8px;
			min-height: 30px; /* Ensures all rows have the same height */
		}

		.input-container label {
			flex: 1; /* Ensures labels take up equal space */
			text-align: right; /* Align text to the right for better alignment */
			font-size: 14px;
		}

		.input-container input {
			flex: 1; /* Ensures inputs take up equal space */
			width: 100px;
			padding: 5px;
		}
		

		
		#DepositAmountInput, #DepositTermInput, #interestRate, #InflationRate, #dividendyield {
            width: 100%;
            padding: 5px;
            margin-bottom: 8px;
            margin-top: 4px;
            border: 0.5px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
			font-size:16px;
        }
		
		
		#interestRate {
            width: 40%;
            padding: 8px;
			align-items:center;
            margin-bottom: 8px;
            margin-top: 4px;
            border: 0.5px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
			font-size:16px;
        }
        

        .container {
			position:relative;
            display: flex; 
            align-items: flex-start;
			justify-content:left;
			margin-left:15vw;
			margin-top:20vh;
        }
		
        .input-section {
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-right: 20px;
            margin-left: 20px;
            width: 40%;
			min-height:40vh;
			margin-top: 5px;
			margin-left: 0vw;;
        }
		
		.options {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}

		.options label {
			font-size: 16px;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.options input[type="radio"] {
			width: 20px;
			height: 20px;
			accent-color: #8f001f; /* Customize radio button color */
			cursor: pointer;
		}

        h1 {
            text-align: center;
            color: #8c0112;
			
        }
        label {
            display: block;
            margin-bottom: 8px;
            margin-top: 8px;
            color: #8c0112;
			font-size: 18px;
        }
        .slider-container {
            margin-bottom: 20px;
        }
   
        output {
            font-weight: bold;
            margin-left: 10px;
        }
        input[type="number"] {
            width: 50%;
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            box-sizing: border-box;
			font-family:'Garamond',serif;
        }
		
				
		.simple-numeric-data {
			width: 99%;
			padding: 12px;
			margin-bottom: 8px;
			color: #7a0110;
			border-radius: 3px;
			box-sizing: border-box;
			font-size: 22px;
			font-weight:bold;
			display: flex;
			align-items: center; /* Centers content vertically */
			justify-content: center; /* Centers content horizontally */
			text-align: center; /* Ensures text is centered */
		}
		
		
			/* General style for the slider track */
		input[type="range"] {
			-webkit-appearance: none; /* Remove default appearance */
			width: 100%;
			height: 11px; /* Adjust the height to make the slider thicker */
			background: #ddd; /* Background color of the slider track */
			border-radius: 3px;
			outline: none; /* Remove the outline */
			opacity: 0.7;
			transition: opacity 0.1s;
		}

		input[type="range"]:hover {
			opacity: 1;
		}

		/* Webkit browsers (Chrome, Safari, etc.) */
		input[type="range"]::-webkit-slider-runnable-track {
			width: 100%;
			height: 11px; /* Thickness of the slider track */
			background: #fa96a2; /* Green background */
			border-radius: 10px;
			cursor: pointer;
		}
		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 20px; /* Width of the slider handle */
			height: 20px; /* Height of the slider handle */
			background: #78010f; /* Darker green handle */
			border-radius: 50%;
			cursor: pointer;
			margin-top: -6px; /* Adjust to align thumb with the track */
		}

		/* Firefox */
		input[type="range"]::-moz-range-track {
			width: 100%;
			height: 11px; /* Thickness of the slider track */
			background: #0c7832;
			border-radius: 5px;
			cursor: pointer;
		}

		input[type="range"]::-moz-range-thumb {
			width: 20px;
			height: 20px;
			background: #004d40;
			border-radius: 50%;
			cursor: pointer;
		}

		/* IE and Edge */
		input[type="range"]::-ms-track {
			width: 100%;
			height: 11px;
			background: transparent;
			border-color: transparent;
			color: transparent;
			cursor: pointer;
		}

		input[type="range"]::-ms-fill-lower {
			background: #0c7832;
		}

		input[type="range"]::-ms-fill-upper {
			background: #ddd;
		}

		input[type="range"]::-ms-thumb {
			width: 20px;
			height: 20px;
			background: #004d40;
			border-radius: 50%;
			cursor: pointer;
		}
		
		
        button {
            width: 99%;
			margin-top: 10px;
            padding: 10px;
            background-color: #6e000d;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
        }
        button:hover {
            background-color: #910314;
        }
		
		
		label[for="useGlobalLumpSum"] {
			font-size: 16px;
			color: gray;
		}
		
		
		
		#useGlobalLumpSum {
			  width: 12px;      /* increase box width */
			  height: 12px;     /* increase box height */
			  accent-color: #0073e6; /* optional: set custom check color */
			  cursor: pointer;
			  margin-left: 6px; /* spacing before label */
			  margin-top: 6px; /* spacing before label */
			}
		
				/* Result Section Styling */
		
		
		.collapsible-header {
			cursor: pointer;
			background-color: #fff7f7;
			padding: 10px;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #ccc;
			margin-bottom: 5px;
		}

		.collapsible-content {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out;
			padding: 0 10px;
			border: 1px solid #ccc;
			margin-bottom: 10px;
		}

		.collapsible-content.open {
			max-height: 500px; /* Adjust based on content height */
			padding: 10px;
		}

		.toggle-icon {
			font-size: 18px;
			font-weight: bold;
			transition: transform 0.2s;
		}

		.export-icon {
			cursor: pointer;
			margin-left: 10px;
			font-size: 18px;
			color: #007BFF;
			transition: color 0.1s;
		}

		.export-icon:hover {
			color: #0056b3;
		}


		
		#result-container {
			margin-left:15vw;
			margin-right:14vw;
			margin-top:10px;
			position:relative;
            display: flex; 
            align-items: flex-start;
			justify-content:left;
		}
        .result-section {
            flex-grow: 1;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			margin-top: 20px;
			max-width: 80vw;
        }
		.tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: bold;
			font-size:18px;
            color: #333;
        }
        .tab.active {
            border-bottom: 2px solid #800011;
			border-left: 1px solid #800011;
            color: #800011;
			background-color: #fff7f7;
        }

		.tab-content {
			border: 0px solid #ccc;
			padding: 30px;
			display: none;
		}
		.tab-content.active {
			display: block;
		}
		.hidden {
			display: none;
		}
		
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
			table-layout: flex;
        }
		
		/* Highlight the row when hovered */
		.highlight-row {
			background-color: #fff5f6;
			color:black;
			border: 1px solid #960213;
		}

		/* Highlight the column when hovered */
		.highlight-column {
			background-color: #fff5f6;
			color:black;
			border: 1px solid #960213;			/* A light blue for column highlight */
		}
		
		th {
			padding: 3px;
			border: 0px solid #ddd;
			text-align: center;
			height: 30px; /* Reduce header row height */
			font-size: 14px;
			line-height: 14px; /* Adjust line height for content */
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		#caseSensitivityTable th {
			font-size: 12px;
			border: 1px solid #960213;
		}
		
		#caseSensitivityTableRates th {
			font-size: 12px;
			border: 1px solid #960213;
		}
		
		#caseSensitivityTableRates td:first-child {
			border: 1px solid #960213;
			font-size:12px;
		}

		td {
			padding: 3px;
			border: 0px solid #ddd;
			text-align: center;
			height: 12px; /* Reduce cell height */
			font-size: 12px;
			line-height: 14px; /* Adjust line height for content */
			overflow: hidden;
			color: #3d4743;
		}
		
		#caseSensitivityTable td {
			font-size: 12px;
		}
		#caseSensitivityTable td:first-child {
			border: 1px solid #960213;
			font-size:12px;
		}
		#caseSensitivityTableRates td:first-child {
			border: 1px solid #960213;
			font-size:12px;
		}
		
		#paymentTableMonthly tbody tr {
			height: 30px; /* Ensures rows are at least 6px */
		}
		#paymentTableMonthly td {
			font-size:14px;
			line-height: 12px; /* Ensures text does not shrink below 12px */
			height: 12px; /* Enforce minimum row height */
		}
		#paymentTablePeriod td {
			font-size:14px;
		}
		
		#paymentTableMonthly td:nth-child(4) {
			font-size: 14px;
			color:#7a0110;
			font-weight:bold;
		}
		
		#paymentTableMonthly th:nth-child(4) {
			font-size: 16px; /* Adjust the font size for smaller screens */
			color:#7a0110;
			font-weight:bold;
		}

		#paymentTableMonthly td:nth-child(5) {
			font-size: 14px;
			font-weight:bold;
		}
		
		#paymentTableMonthly th:nth-child(5) {
			font-size: 16px; /* Adjust the font size for smaller screens */
			font-weight:bold;
		}
		
		#paymentTablePeriod th:nth-child(5) {
			font-size: 16px; /* Adjust the font size for smaller screens */
			color:#7a0110;
		}
		
		tr {
			height: 8px; /* Set height for table rows */
		}
		
		
		/*#paymentTableMonthly th:nth-child(2), #paymentTableMonthly td:nth-child(2),
        #paymentTableMonthly th:nth-child(3), #paymentTableMonthly td:nth-child(3) {
            display: none;
        } */
		
		/* Table Row Background Color */
		#paymentTableMonthly tbody tr:nth-child(odd) {
			background-color: #fff7f7;
		}
		#paymentTablePeriod tbody tr:nth-child(odd) {
			background-color: #fff7f7;
		}

		label[for="DepositAmountSlider"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
		}

		label[for="DepositTermSlider"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
		}		
		
		caption {
			font-weight: bold;
			margin-bottom: 15px;
		}
        footer {
		  text-align: center;
		  padding: 20px;
		  margin-top: 40px;
		  background-color: #f0f0f0;
		  color: #777;
		}


/* Mobile responsive styling for 768px width */
@media screen and (max-width: 720px) {
    
  /* Hide upper ribbon on small screens */
    .mobile-home-button {
		display: block;
		position: fixed;
		top: 5px;
		left: 15px;
		background-color: #8c0017;
		color: white;
		padding: 12px 14px;
		border-radius: 50%;
		font-size: 20px;
		text-align: center;
		text-decoration: none;
		outline: 2px solid red;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		z-index: 9999;
	}

	.mobile-home-button:hover {
		background-color: #c90018;
	}

  .upper-ribbon {
    display: none;
  }

  /* Body adjustments */
  body {
    font-size: 16px;
    padding: 0;
    margin: 0;
  }

  /* General layout adjustments */
   
  .main-summary,
  .container,
  .summary-row,
  .input-section,
  .summary-container {
    width: 100% !important;
    margin: 0 0 !important;
    padding: 15px !important;
    flex-direction: column !important;
    align-items: center !important;
  }
	.input-section {
		width: 100% !important;
		margin: 4% 0 !important;
		padding: 15px !important;
		flex-direction: column !important;
		align-items: center !important;
  }

	#result-container {
			margin-left: 0vw;
			margin-right: 0vw;
			margin-top: 10px;
			position: relative;
            display: flex; 
            align-items: flex-start;
			justify-content:left;
		}
        .result-section {
            flex-grow: 1;
            background-color: #fff;
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			margin-top: 20px;
			max-width: 100vw;
        }
	
	/* #result-container, #result-section {
		width: 100vw;              
		margin: 0;                 
		padding: 0;              
		box-sizing: border-box;
	} */

.main-summary > .summary-container:nth-of-type(2) {
    order: -2;
  }
  .summary-row {
    gap: 20px;
	/*display: flex; */
	justify-content: center; /* Centers items side by side */
	width: 100%; /* Full width for row */
  }

  .summary-container {
    width: 80% !important;
	height: 20% !important;
  }

  .box-pair,
  .box-pair-monthly {
    padding: 5px !important;
  }

  #below {
    min-height: auto;
  }
	.text-box {
    font-size: 18px !important;
  }
  .numeric-box {
    font-size: 24px;
  }


  /* Input section */
  .input-section {
    padding: 5px !important;
  }
  
	input[type="range"] {
		-webkit-appearance: none; /* Remove default appearance */
		/*margin-left: 5%;*/
		width: 99%;
		height: 16px; /* Adjust the height to make the slider thicker */
		border-radius: 2px;
		cursor: pointer;
	}

		input[type="range"]::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  /*margin-left: 5%;*/
		  height: 28px;      /* increase thumb height */
		  width: 28px;       /* increase thumb width */
		  border-radius: 50%; /* circular thumb */
		  background: #8c0017;
		  cursor: pointer;
		  border: solid;
		  margin-top: -8px; /* adjust vertical alignment */
		}

		/* Firefox */
		input[type="range"]::-moz-range-thumb {
		  /*margin-left: 5%;*/
		  height: 28px;
		  width: 28px;
		  border-radius: 50%;
		  background: #8c0017;
		  cursor: pointer;
		  border: solid;
		}

		/* IE (if needed) */
		input[type="range"]::-ms-thumb {
		  /*margin-left: 5%;*/
		  height: 28px;
		  width: 28px;
		  border-radius: 50%;
		  background: #8c0017;
		  cursor: pointer;
		  border: solid;
		}



  /*input[type="number"],
  #loanAmountInput,
  #loanTermInput,
  #interestRate {
	/*margin-left: 5%;
    width: 99% !important;
    font-size: 20px;
	margin-top: 18px;
  }*/


/* Labels design */

 button {
            width: 99%;
			/*margin-left: 5%; */
			margin-top: 10px;
            padding: 10px;
            background-color: #6e000d;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 21px;
        }

/* Summary section reordered */


  /* Tabs */
  
  

  .tab {
    font-size: 14px;
    padding: 8px 10px;
  }

  .tab-content {
    padding: 5px;
  }
  
  /*.tabs .tab:last-child, .tab:nth-child(2) {
    display: none;
  } */

  /* Table adjustments */
  table {
    font-size: 12px;
    width: 99%;
  }

  th,
  td {
    font-size: 12px !important;
    padding: 4px !important;
  }
  
	.lump-sum-input {
	  width: 60px !important;       /* Adjust width as needed */
	  font-size: 12px !important;   /* Adjust text size */
	}

	.toggle-icon {
		font-size: 22px;
	}

	.export-icon {
		font-size: 22px;
	}

  #paymentTableMonthly td:nth-child(1),
  #paymentTableMonthly th:nth-child(2) {
    font-size: 12px !important;
  }

  /* Hide less important table columns on small screens if needed */
  
	.caseSensitivity th:nth-child(2),
	.caseSensitivity td:nth-child(2),
	.caseSensitivity th:nth-child(3),
	.caseSensitivity td:nth-child(3),
	.caseSensitivity th:nth-child(5),
	.caseSensitivity td:nth-child(5),
	.caseSensitivity th:nth-child(7),
	.caseSensitivity td:nth-child(7),
	.caseSensitivity th:nth-child(9),
	.caseSensitivity td:nth-child(9),
	.caseSensitivity th:nth-child(11),
	.caseSensitivity td:nth-child(11),
	.caseSensitivity th:nth-child(13),
	.caseSensitivity td:nth-child(13),
	.caseSensitivity th:nth-child(14),
	.caseSensitivity td:nth-child(14),
	.caseSensitivity th:nth-child(15),
	.caseSensitivity td:nth-child(15),
	.caseSensitivity th:nth-child(16),
	.caseSensitivity td:nth-child(16),
	.caseSensitivity th:nth-child(17),
	.caseSensitivity td:nth-child(17),
	.caseSensitivity th:nth-child(18),
	.caseSensitivity td:nth-child(18),
	.caseSensitivity th:nth-child(19),
	.caseSensitivity td:nth-child(19) {
		display: none;
	}




  /* Footer spacing */
  footer {
	width: 97%;
    padding: 20px;
    font-size: 14px;
  }
}