@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Secular+One');
body {
	margin: 0px;
	background-color: white;
	color: rgb(8, 8, 8);
	font-family: "Nunito", sans-serif;
}

.navbar {
	/* overflow: hidden; */
	display: flex;
	justify-content: flex-end; /* Align items to the right */
	padding-right: 40px;
  }
  
.navbar a {
	font-size: 16px;
	color: rgb(8, 8, 8);
	text-align: center;
	text-decoration: none;
	padding: 14px 16px;
	margin: 0 10px; /* Add margin to separate the items */
  }
  
.dropdown {
	overflow: hidden;
  }
  
.dropdown .dropbtn {
	cursor: pointer;
	font-size: 16px;
	border: none;
	outline: none;
	color: rgb(8, 8, 8);
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	display: inline-block;
  }
  
  .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
	background-color: #4DC6E2;
	color: white;
  }
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
  }
  
  .dropdown-content a {
	/* float: none; */
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
  }
  


.active {
	background-color: rgb(8, 8, 8);
	color: white;
  }

/* .topnav .icon {
	display: none;
} */

.dropdown .dropbtn {
	cursor: pointer;
	font-size: inherit;
	display: inline-block;
	text-align: center; 
	border: none;
	outline: none; 
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
} 

  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
	display: none;
	position: absolute;
	/* background-color: #f9f9f9; */
	min-width: 100px;
	/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
	z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
	/* topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #4DC6E2;
	color: white;
  }  */
  
  /* Add a grey background to dropdown links on hover */
   .dropdown-content a:hover {
	background-color:white;
	color: rgb(8, 8, 8);
  }
   
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
	display: block;
  } 
/* button {
	margin-left: 20px;
	margin-top: 10px;
	background: transparent;
	/* border: none; */
/* } */ 
/* button img {
	width: 40px;
	color: rgb(8, 8, 8);
} */

ul {
	padding: 0;
	list-style: none;
}

ul.topnav {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: white;
	line-height: 40px;
}

ul.topnav ul {
	display: flex;
	align-items: center;
}

ul.topnav li a {
	display: inline-block;
	color: rgb(8, 8, 8);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	background-color: white;
	font-family: "Nunito", sans-serif;
}

@media screen and (max-width: 601px) {
	.navbar {
		justify-content: flex-start; /* Align items to the left on smaller screens */
		}
	
	.navbar a {
		padding: 14px 8px; /* Adjust padding for mobile screens */
		margin: 0; /* Remove margin on mobile screens */
	  }
	
	
	ul.topnav li a {
		padding: 14px 8px;
	}
	button {
		margin-left: 6px;
	}

	.wrapper3 {
		border-radius: 0!important;
		padding-left: calc(1% + 10px)!important;
		padding-right: calc(1% + 10px)!important
	}
}

/* .dark-mode {
	background-color: rgb(8, 8, 8);
	color: silver;
}
.dark-mode a {
	color: silver;
}

.dark-mode ul.topnav {
	background-color: rgb(8, 8, 8);
	color: silver;
}

.dark-mode ul.topnav a {
	background-color: rgb(8, 8, 8);
	color: silver;
}

.dark-mode .form-control {
	font-family: "Nunito", sans-serif;
	font-weight: 400;
	padding: 1px 4px;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	border: 1px solid silver;
	background-color: rgb(8, 8, 8);
} */

a {
	color: rgb(8, 8, 8);
}

#link2{
	text-decoration: none;
}

#link2:hover {
	text-decoration: underline;
}

h1 { 
	font-family: "Secular One", sans-serif;
	font-size: 300%;
}
#image1 {
	display: inline-box;
	vertical-align:middle;
	height: 48px;
	width: 48px;
	padding-left: 1%;
}
  
#image2 {
	display: block; /* Ensure the image behaves as a block-level element */
	max-width: 100%; /* Limit the width of the image to its container's width */
	height: auto; /* Maintain the original aspect ratio */
	margin: 0 auto;
  }

  .image-container {
	max-height: 400px; /* Set a fixed height for the container */
	overflow-y: auto; /* Enable vertical scrolling if the image exceeds the container height */
	overflow-x: auto;
}  

/* .img {
	display: inline-box;
	vertical-align: middle;
	height: 500px;
	padding-left: 1%;
} */
h2 {
	font-family: "Secular One", sans-serif;
	font-size: large;
}
h3 {
	font-family: "Secular One", sans-serif;
	font-size: medium;
	font-weight: lighter

}
h4,
h5,
h6 {
	text-align: left;
}

.h2-medium {
	font-size: medium;
}
p {
	text-align: left;
}

p.thick {
	font-weight:bold;
}
p.italic {
	font-style: italic;
	font-size: smaller;
	font-weight: thin;
}
p.left {
	text-align: left;
}

pre {
	text-align: center;
	padding-left: 2%;
	padding-right: 2%;
}

pre.copyright {
	font-family: "Nunito", sans-serif;
	/* color:slategray; */
	font-size: x-small;
}
/* 
label {
	font-size: 30px;
} */

.wrapper {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(1% + 10px);
	padding-right: calc(1% + 10px);
}

.wrapper2 {
	max-width: 800px;
}

.wrapper3 {
	max-width: 800px;
	background-color: #4dc7e2a1;
	border-radius: 2.5vh;
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(1%);
	padding-right: calc(1%);
	padding-top: calc(0.5%);
	padding-bottom: calc(0.5%)
}
/* .center {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	border: 0px solid white;
} */
/* .subButton {
	border-width: thin;
	background-color: rgb(22, 19, 19);
	padding: 1px 4px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	border: 4px solid;
	font-family: "Nunito", sans-serif;
	font-weight: 500;
	color: white;
} */

.btn {	
	border-width: 0;
	width: 168px;
	background-color: #4DC6E2;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	/* border: 1.75px solid;
	border-color: rgb(8, 8, 8); */
	font-family: "Nunito", sans-serif;
	font-weight: 700;
	color: white;
	cursor: pointer;
	padding: 1vh;
	border-radius: 2.5vh;
	font-size: 14px
}
.btn:hover {
	opacity: 0.6
}

.btn:active {
  background-color: #4DC6E2;
  /* border: 1.75px solid;
  border-color: rgb(8, 8, 8); */
  transform: translateY(2px);
}

.btn:focus {
	border-width: thin;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/* border: 1.75px solid;
	border-color: rgb(8, 8, 8); */
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	background-color: #4DC6E2;
	opacity: 0.6;
	color: white;
	padding: 1vh;
	border-radius: 2.5vh
}
  
  /* Hide the default file input button */
  input[type="file"] {
	display: none;
  }

.button-container {
	display: flex; /* Display the button and SVG side by side */
	align-items: center; /* Vertically center the elements */
  }

.btn2 {	
	border-width: 0;
	background-color: #4DC6E2;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	/* border: 1.75px solid;
	border-color: rgb(8, 8, 8); */
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	color: white;
	cursor: pointer;
	padding: 1vh;
	border-radius: 2.5vh;
}

.btn2:hover {
	opacity: 0.6;
	/* border: 1.75px solid; */
	/* border-color: rgb(8, 8, 8); */
}

.btn2:active {
  background-color: #4DC6E2;
  /* border: 1.75px solid;
  border-color: rgb(8, 8, 8); */
  transform: translateY(2px);
}

.btn2:focus {
	border-width: thin;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/* border: 1.75px solid;
	border-color: rgb(8, 8, 8); */
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	background-color: #4DC6E2;
	opacity: 0.6;
	color: white;
	padding: 1vh;
	border-radius: 2.5vh
}

.btn3 {
	margin-right: 10px; /* Add space between the button and the SVG */
	border-width: 0;
	width: 168px;
	background-color: #4DC6E2;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	border: 1.75px solid;
	border-color: rgb(8, 8, 8);
	font-family: "Nunito", sans-serif;
	font-weight: 700;
	color: white;
	cursor: pointer;
	padding: 1vh;
	border-radius: 2.5vh;
	font-size: 14px
}

.btn3:hover {
	opacity: 0.6
}

.btn3:active {
  background-color: #4DC6E2;
  border: 1.75px solid;
  border-color: rgb(8, 8, 8);
  transform: translateY(2px);
}

.btn3:focus {
	border-width: thin;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border: 1.75px solid;
	border-color: rgb(8, 8, 8);
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	background-color: #4DC6E2;
	opacity: 0.6;
	color: white;
	padding: 1vh;
	border-radius: 2.5vh
}

.form-control {
	font-family: "Nunito", sans-serif;
	font-weight: 400;
	padding: 1px 4px;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	border: 1px solid;
	background-color: whitesmoke;
	border-color: rgb(8, 8, 8);
}

.or-text {
	display: flex;
	align-items: center;
	margin: 0 3px; /* Adjust the margin as needed to separate the "or" from the buttons */
	color: rgb (8,8,8); /* Optional: change the color of the "or" text */
	font-weight: 600; /* Optional: change the font weight of the "or" text */
  }

/* Customize the label (the container) */
.container {
	display: box;
	position: relative;
	text-align: left;
	padding-left: 30px;
	cursor: pointer;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #eee;
	/* border: 1.75px solid rgb(8, 8, 8); */
	border-radius: 4px;
}


.container:hover input ~ .checkmark {
	background-color: #ccc;
	/* border: 1.75px solid rgb(8, 8, 8); */
	border-radius: 2.5vh; /* Specify the border style as "solid" */
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
	background-color: #4DC6E2;
	/* border: 1.75px solid rgb(8, 8, 8); */
}

/* Checkmark symbol style */
.checkmark::after {
	content: "✓";
	position: absolute;
	top: 1px;
	left: 4px;
	font-size: 12px;
	color: rgb(8, 8, 8);
	display: none;
  }

/* Show the checkmark when checked */
.container input:checked ~ .checkmark::after {
	display: block;
}

  
.header h1 {	
	position: relative;
	
  }
  
.collapsible {
	background-color: white;
	color: rgb(8, 8, 8);
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	cursor: pointer;
	margin-left: 0px;
	padding: 10px;
	width: 100%;
	border: 2px solid white;;
	border-radius: 2.5vh;
	text-align: left;
	outline: none;
	font-size: 16px;
  }
  
.content {
	padding: 0 20px;
	display: none;
	overflow: hidden;
	background-color: white;
  }

.collapsible.active {
	background-color: #4DC6E2; /* Set the background color to blue */
	/* color: white;  */
	margin-left: 0px;
	/* border: 1.75px solid rgb(8, 8, 8); */
	border-radius: 2.5vh;
  }

.collapsible:after {
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 13px;
	color: white;
	float: right;
	margin-left: 5px;
  }

.collapsible:hover {
	background-color: #4dc7e2a1;
	/* color: white; */
	margin-left: 0px;
	/* border: 1.75px solid rgb(8, 8, 8);
	border-radius: 2.5vh */
  }
  
.active:after {
	content: "\2796" /* Unicode character for "minus" sign (-) */
}

/* PFD table */

.table-container {
	overflow-x: auto;
	border-radius: 2.5vh;
	max-height: 500px; /* Set a fixed height for the container */
	overflow-y: auto;
  }

.table-wrapper {
	/* border-collapse: collapse; */
	border: 1.75px solid rgb(8, 8, 8); /* Add a 2px solid border with the color rgb(8, 8, 8) */
	border-radius: 2.5vh;
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	font-weight: bold;
}

table {
	border-collapse: collapse;
}
  
th {	
	background: #4DC6E2;
	color: white;
	text-align: left;
  }
  
  th,
  td {
	padding: 10px 20px;
  }
  
  tr:nth-child(even) {
	background: whitesmoke;
  }

  input[type=text] {
	border-width: 0;
	background-color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	border: 1.75px solid;
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	color: rgb(8, 8, 8);
	cursor:text;
	padding: 1vh;
	border-radius: 2.5vh;
  }

  #download_link {
	display: none;
  }

  .key-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    color: #4DC6E2;
}

.key-tooltip .key-text {
    visibility: hidden; /* Ensure text is hidden by default */
    opacity: 0; /* Set opacity to 0 by default */
    width: 250px;
    background-color: #4DC6E2;
    color: white;
    text-align: left;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    margin-left: -125px;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

.key-tooltip .key-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #4DC6E2 transparent transparent transparent;
}

.key-tooltip:hover .key-text {
    visibility: visible; /* Make the text visible */
    opacity: 1; /* Increase opacity to 1 */
}