ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  background-color: #1f77b4;
	}
	
	li {
	  float: left;
	}
	
	li a, .dropbtn {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}
	
	li a:hover, .dropdown:hover .dropbtn {
	  background-color: #1a6396;
	}
	
	li.dropdown {
	  display: inline-block;
	}
	
	.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 {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}
	
	.dropdown-content a:hover {background-color: #f1f1f1;}
	
	.dropdown:hover .dropdown-content {
	  display: block;
	}
.main_card {
	width: 520px;
	height: 200px;
	background-color: #e67b01;
	border-radius: 20px;
	color: white;
	margin: 20px auto;
	cursor: pointer;
	table-layout: fixed;
}
.indev {
	background-color: gray !important;
	cursor: unset;
}
.indev:hover {
	box-shadow: none !important;
}
.main_card:hover {
	box-shadow: 0px 0px 20px rgb(0 0 0 / 0.2);
}

.comment {
	font-size: 12px;
	cursor: pointer;
}

#l1 {
	font-size: 22px;
	cursor: pointer;
}

#img1 {
	width: 230px;
	height: 160px;
	padding: 5px;
}

.img_wrapper {
	background-color: white;
	border-radius: 10px;
	width: 240px;
	height: 170px;
	margin-top: 5px;
	margin-bottom: 5px;
}
	

.slider {
	  -webkit-appearance: none;  /* Override default CSS styles */
	  appearance: none;
	  width: 200px; /* Full-width */
	  height: 25px; /* Specified height */
	  background: #d3d3d3; /* Grey background */
	  outline: none; /* Remove outline */
	  /*opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
	  transition: opacity .2s;
	  margin-left: 20px;
	}
	
	/* Mouse-over effects 
	.slider:hover {
	  opacity: 1;
	}
	*/
	
	.slider:hover {
	  background: #bdbdbd;
	}
	
	/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none; /* Override default look */
	  appearance: none;
	  width: 25px; /* Set a specific slider handle width */
	  height: 25px; /* Slider handle height */
	  background: black; /* Green background */
	  cursor: pointer; /* Cursor on hover */
	}
	
	.slider::-moz-range-thumb {
	  width: 25px; /* Set a specific slider handle width */
	  height: 25px; /* Slider handle height */
	  background: black; /* Green background */
	  cursor: pointer; /* Cursor on hover */
	}
	
	body {
	  margin: 0;
	  font-family: Arial, Helvetica, sans-serif;
	  height: 100%;
	}
	
	.topnav {
	  overflow: hidden;
	  background-color: #1f77b4;
	  //position: sticky;
	  top: 0;
	  height: 50px !important;
	}
	
	.topnav a {
	  float: left;
	  display: block;
	  color: #f2f2f2;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	  font-size: 17px;
	}
	
	.topnav a:hover {
	  //background-color: #68cca7;
	  //color: white;
	}
	
	.topnav a.active {
	  background-color: #04AA6D;
	  color: white;
	}
	
	.topnav .icon {
	  display: none;
	}
	
	@media screen and (max-width: 600px) {
	  .topnav a:not(:first-child) {display: none;}
	  .topnav a.icon {
		float: right;
		display: block;
	  }
	}
	
	@media screen and (max-width: 600px) {
	  .topnav.responsive {position: relative;}
	  .topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	  }
	  .topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	  }
	}
	
	#logo {
		width: auto;
		height: 46px !important;
		padding: 0;
		margin: 0;
	}
	#logoa {
		height: 46px !important;
		margin: 0;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		//border-radius: 6px;
		//margin-top: 4px;
		//margin-left: 4px;
	}
 	
	
	#main {
	  height: 97vh;
	  background-color: #EEEEEE;
	  width: 100%;
	  display: table;
	 
	}
	
	
	.card {
	  width: 80%;
	  max-width: 510px;
	  height: auto;
	  background-color: white;
	  border-radius: 10px;
	  margin: 20px auto;
	}
	
	label {
	  font-size: 12px;
	  margin-left: 20px;
	}
	
	.field {
	  width: 200px;
	  height: 30px;
	  text-shadow: none;
	  border: 1px solid black;
	  border-radius: 10px;
	}
	
	#calc {
	  background-color: #1f77b4;
	  color: white;
	  border-width: 0;
	  margin-left: 20px;
	  border-radius: 5px;
	  width: 100px;
	  height: 30px
	}
	
	#calc:disabled {
	  background-color: lightgrey;
	  color: white;
	}
	
	#calc:enabled {
	  cursor: pointer;
	}
	
	#progressBar {
		border-radius: 10px;
	  width: 100%;
	  height: 30px;
	  background-color: lightgrey;
	  margin: 0 auto;
	  font-size: 14px;
	}
	
	#progress {
	  width: 0%;
	  height: 30px;
	  background-color: #04AA6D;
	  border-radius: 10px;
	}
	
	#graph {
	  margin-left: 20px;
	  width: 90%;
	  height: auto;
	}
	
	.katex { font-size: 1.5em !important; margin-left: 20px }