:root {
    --primary-color: #000; /* black by default */
    --background-color: #fff; /* White by default */
    --text-color: #000; /* Black by default */
	--grid-color: #FBFBFB; /* grey by default */
	--section-color: #FBFBFB; /* gray */
	--box-shadow: rgba(0, 0, 0, 0.2);
	-webkit-text-size-adjust: auto;
	text-size-adjust: auto;
	font-size: 12px;
	--ranktxt-color: #fff;
	--rankbg-color: #52595D;
	--chartbd-color: #777777;
		}

		.light-theme {
			--primary-color: #4169E1; /* black */
			--background-color: #fff; /* White */
			--text-color: #000; /* Black */
			--grid-color: #FBFBFB; /* gray */
			--section-color: #FBFBFB; /* gray */
			--box-shadow: rgba(0, 0, 0, 0.2);
			--ranktxt-color: #fff;
			--rankbg-color: #52595D;
			--chartbd-color: #777777;
		}

		.dark-theme {
			--primary-color: #fff; /* white */
			--background-color: #1c243c; /* Black */
			--text-color: #fff; /* White */
			--grid-color: #151c32; /* dark blue */
			--section-color: #1e2946; /* dark blue */
			--box-shadow: rgba(27, 32, 49, 0.2);
			--ranktxt-color: #000;
			--rankbg-color: #d3d3d3;
			--chartbd-color: #a8a8a8;
		}
		.light-theme .fa-lightbulb {
			color: #000 !important; /* Light theme text color */
			background-color: #fff !important;
		}

		.dark-theme .fa-lightbulb {
			color: #fff !important; /* Dark theme text color */
			background-color: #1c243c !important;
		}
	
	    /* Default styles */
		body {
			font-size: 12px;
		}

		/* Media query for small screens */
		@media (max-width: 600px) {
			body {
				font-size: 12px;
			}
		}

		/* Media query for medium screens */
		@media (min-width: 600px) and (max-width: 900px) {
			body {
				font-size: 13px;
			}
		}

		/* Media query for large screens */
		@media (min-width: 900px) {
			body {
				font-size: 14px;
			}
		}
	
        /* CSS for dark blue background */
        body {
        background-color: var(--background-color);
		color: var(--text-color);
        }
        
        /* CSS for white text */
        p, h1, h2, h3 {
            color: var(--primary-color);
        }
		table {
		  table-layout: fixed;
		  width: 100%; /* or any other desired width */
		}

		td {
		  float:left;
		  width:100%
		  min-width:150px;
		}
		
		/* css for links */
		a,visited {
			text-decoration:none;
			color: #1569C7;
		}
	

        /* CSS for Collapsing sections */
        .collapsible {
            background-color: var(--section-color);
            color: var(--text-color);
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
			margin: 0 auto; /* Center the container font-size: 15px;*/
            
        }
		/* CSS for darker blue background of section headers */
		.collapsible {
			background-color: var(--section-color); /* or any other darker shade of blue */
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 4px 8px 0 var(--box-shadow);
			margin: 0 auto; /* Center the container */
		}
		/* CSS for darker blue background of sections */
		.content {
			background-color: var(--section-color); /* or any other darker shade of blue */
			padding: 2px;
			border-radius: 10px;
			box-shadow: 0 4px 8px 0 var(--box-shadow);
			margin: 0 auto; /* Center the container */
		}
		.third-section {
			background-color: var(--section-color); /* or any other darker shade of blue */
			padding: 2px;
			border-radius: 10px;
			box-shadow: 0 4px 8px 0 var(--box-shadow);
			width: 100%;
			margin: 0 auto; /* Center the grid container horizontally */
		}

		.container {
			width: 100%; /* 90% width of the page */
			margin: 0 auto; /* Center the container */
			background-color: var(--grid-color); /* Light gray background */
			
		}
		.collapsible::before {
			font-family: 'Font Awesome 5 Free';
			content: "\f067"; /* Plus icon */
			font-size: 22px;
			color: var(--text-color);
			float: left;
			margin-right: 10px;
		}

		.collapsible.active::before {
			content: "\f068"; /* Minus icon */
		}
		/* CSS for expanding/closing icon */
		.collapsible::before {
			content: "+";
			font-size: 22px;
			color: var(--text-color);
			float: right; /* Position the icon on the right */
			margin-left: 10px; /* Add some space between the icon and the text */
		}

		/* CSS for expanded icon */
		.collapsible.active::before {
			content: "-";
		}
		

		/* CSS for grid items */
		.grid-item {
			background-color: var(--grid-color);
			width:48%;
			float:left;
			padding: 3px;
			border: 0px solid #ccc; /* Add a grey border to the grid items */
			border-radius: 10px; /* Add rounded corners to the grid container */
			box-shadow: 0 4px 8px 0 var(--box-shadow);
		}

		/* CSS for grid item titles */
		.grid-item h2 {
			align-self: flex-start; /* Vertically adjust the title to the top */
			border-radius: 10px; /* Add rounded corners to the grid items */
		}

        /* CSS for grid container with rounded corners and no border */
		.grid-container {
			
			display: flex;
			flex-wrap: wrap;
			grid-gap: 3px;
			grid-template-columns: repeat(2, 1fr); /* Create a 2-column grid */
			width: 100%; /* Set the width of the grid container to 80% of the page */
			margin: 0 auto; /* Center the grid container horizontally */
			border: 0px solid #ccc; /* Add a grey border to the grid container */
			border-radius: 10px; /* Add rounded corners to the grid container */
			box-shadow: 0 4px 8px 0 var(--box-shadow);
		}

		
		/* CSS for main content */
		.main-content {
			min-height: calc(100vh - 60px); /* Set the minimum height of the main content to the full height of the viewable page minus the height of the footer */
			position: relative; /* Set the parent container to position relative */
			margin: 0 auto; /* Center the container */
			width: 100%;
		}
		
		/* CSS for footer container */
		.footer-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* Create a 3-column grid */
			width: 100%; /* Set the width of the grid container to the full width of the page */
			background-color: var(--grid-color); /* Set the background color to theme */
			color: var(--text-color); /* Set the text color to theme */
			padding-bottom: 20px; /* Add some padding to the footer */
			padding-top: 20px;
			margin-left: 0;
			padding-left: 0;
			position: fixed;
			bottom: 0; /* Set the footer to the bottom of the viewable page */
		}

		/* CSS for footer items */
		.footer-item {
			text-align: center; /* Center the text in the footer items */
			width: 90%; /* Set the width of the grid items to the full width of their parent container */
		}
		/* CSS for last section */
		.last-section {
			/* other styles */
			float: left; /* or right if needed */
			height: 100%; /* Set the height of the container to 100% */
			overflow-y: no scroll; /*
			padding-bottom: 150px;
		}
		.switch-theme-btn {
			width: 30px;
			height: 30px;
			background-color: var(--grid-color);
			border: 0;
		}

		.nav-history-bar {
		background-color: var(--background-color); /* Light gray background */
		border-top: 1px solid var(--text-color) !important; /* adjust the width of the border as needed */
        border-bottom: 1px solid var(--text-color) !important; /* adjust the width of the border as needed */
		}

		.containerChart {
			width: 97%; /* 70% width of the page */
			margin: 0 auto; /* Center the container */
			background-color: var(--grid-color); /* Light gray background */
			border-radius: 10px; /* Rounded corners */
			padding: 10px;
			box-shadow: 0 4px 8px 0 var(--box-shadow);
			color: #1569C7 !important;
		}
		#popup {
		  display: none; /* hide the pop-up by default */
		  position: fixed; /* position the pop-up in the center of the screen */
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background-color: var(--background-color);
		  padding: 20px;
		  border: 1px solid black;
		  box-shadow: 0 4px 8px 0 var(--box-shadow);
		  border-radius: 10px;
		  color: var(--text-color);
		}

		#popup-content {
		  text-align: center;
		  color: var(--text-color);
		}

		#close-popup {
		  position: absolute; /* position the close button in the top right corner of the pop-up */
		  top: 10px;
		  right: 10px;
		  background-color: transparent; /* remove the default background color */
		  border: none; /* remove the default border */
		  color: black; /* set the text color to black */
		  cursor: pointer; /* change the cursor to a pointer when hovering over the button */
		}
		#popup2 {
		  display: none; /* hide the pop-up by default */
		  position: fixed; /* position the pop-up in the center of the screen */
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background-color: var(--background-color);
		  padding: 20px;
		  border: 1px solid black;
		  box-shadow: 0 4px 8px 0 var(--box-shadow);
		  border-radius: 10px;
		  color: var(--text-color);
		}

		#popup-content2 {
		  text-align: center;
		  color: var(--text-color);
		}

		#close-popup2 {
		  position: absolute; /* position the close button in the top right corner of the pop-up */
		  top: 10px;
		  right: 10px;
		  background-color: transparent; /* remove the default background color */
		  border: none; /* remove the default border */
		  color: black; /* set the text color to black */
		  cursor: pointer; /* change the cursor to a pointer when hovering over the button */
		}
		.rank-text {
		  border-radius: 10px; /* set the radius of the rounded corners */
		  border: 2px solid var(--rankbg-color); /* create a black border */
		  padding: 5px; /* add some padding to the text */
		  background-color: var(--rankbg-color);
		  color: var(--ranktxt-color);
		}
		.chart-container{
			fill: #1569C7 !important;
			color: #1569C7 !important;
		}
.info {
display: inline-block;
position: relative;
}

.fa-info-circle {
color: #d3d3d3;
margin-left: 5px;
cursor: pointer;
display: inline-block;
}

.popupp {
display: none;
position: absolute;
background-color: white;
padding: 10px;
border: 1px solid gray;
width: 200px;
left: -250px;
top: 100%;
transform: translateX(100%);
z-index: 1;
}
		@media only screen and (min-width: 992px) {
		  .info {
			font-size: larger;
		  }
		  .popupp {
			font-size: smaller;
		  }
		  div[style="border:0px;vertical-align:middle;margin: 0 auto;padding-top:30px;padding-bottom:30px;width:200px !important;display:flex;flex-direction:column;align-items:center;"] {
			width: 80% !important;
		  }
		}
		.conv-box {
		display: inline-block;
		position: relative;
		margin: 10px;
		padding-top:20px;
		}
		.conv-title {
		float:left;
		position: relative;
		margin-right: 10px;
		font-size: 16px;
		color: gray;
		}

		input[type="number"] {
		width: 200px;
		padding: 10px;
		border-radius: 10px;
		border: none;
		box-shadow: 0px 4px 10px 0px var(--box-shadow);
		outline: none;
		font-size: 16px;
		text-align: center;
		}
.search-icon {
  position: relative;
  float: right;
  top: 1px;
  right: 10px;
  color:var(--text-color);
  padding: 3px;
  background-color: transparent;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.search-popup {
  display: none; /* hide the pop-up by default */
		  position: fixed; /* position the pop-up in the center of the screen */
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background-color: var(--background-color);
		  padding: 20px;
		  border: 1px solid var(--text-color);
		  box-shadow: 0 4px 8px 0 var(--box-shadow);
		  border-radius: 10px;
		  color: var(--text-color);
		  z-index: 1000;
}

form {
  display: flex;
  align-items: center;
  border: 2px #4CAF50;
}

.input-group {
  display: flex;
  align-items: center;
  padding-top:30px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  background-color: white;
  border-radius: 10px 0 0 10px;
  border: 1px solid #4CAF50;  
  flex: 1;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border-radius: 0 10px 10px 0;
  border: none;
  cursor: pointer;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.fa-search {
  font-size: 20px;
}

.fa-times {
  font-size: 16px;
}
.box{
  float:left;
  border: 1px solid var(--text-color);
  padding: 5px;
  margin: 5px;
}
.button-box{
  float:left;
  border: 1px solid var(--background-color);
  border-radius: 8px;
  background-color: var(--background-color);
  padding: 5px;
  margin: 5px;
  vertical-align: middle;
  box-shadow: 0 4px 8px 0 var(--box-shadow);
}
.button-box a,visited {
	text-decoration:none;
	color: var(--text-color);

}
.button-box img {
	text-decoration:none;
	height: 20px;
	padding-right: 5px;
	vertical-align: middle;
	border: none;
}
.fibcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.fibbuttons-container {
  display: flex;
  margin-bottom: 20px;
}

button {
  padding: 8px;
  margin-right: 10px;
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.active {
  background-color: #4c84af;
  color: white;
}

.fiblevels-container {
  width: 98%;
  padding: 20px;
  background-color: transparent;
  border-radius: 4px;
  text-align: center;
}

ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex: 1;
  text-align: center;
}
.Chart-image{
	background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,rgba(192, 192, 192, .1) 0) 0 0/8px 8px;
	filter: brightness(100%) saturate(100%);
	width:300px;
	border-left:2px solid var(--text-color);
	border-bottom:2px solid var(--text-color);
}