
body{
  margin: 0;
  padding:0;
  width: 100%;
  height: 100vh;
  background-size:cover;
  background-image: url("img/chart.jpg");
  font-family: "Varela Round", sans-serif;

}
img {
  width: 100%;
  height: 255px;
  background-image: url("img/skin.jpg");
  object-fit: none;
}
#object-position-1 {
  object-position: 210px;
  border:2px ridge grey;
}

.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.container {
    height: 100%;
    width: 100%;

	}
		.menu {
		  background-color: #333;
		  display: flex;
		  justify-content: center;
		  align-items: top;
		  max-width: 100%;
		  margin: 0 auto;
		  height: 6vh;
		  list-style: none;
		  border:5px inset silver;
		}

		.menu li {
		  width: 125px;
		  height: 50px;
		  transition: background-position-x 0.9s linear;
		  text-align: center;
		}
		.menu li a {
		  font-size: 22px;
		  color: #777;
		  text-decoration: none;
		  transition: all 0.45s;
		}
		.menu li:hover {
		  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
		  -webkit-animation: line 1s;
				  animation: line 1s;
		}
		.menu li:hover a {
		  color: #ff0000;
		}
		.menu li:not(:last-child) {
		  margin-right: 30px;
		}

		@-webkit-keyframes line {
		  0% {
			background-position-x: 390px;
		  }
		}

		@keyframes line {
		  0% {
			background-position-x: 390px;
		  }
		}
	  a:focus {
		background-color: rgb(38, 114, 114);
	  }  
	  .fleft{
		  float: left;
		  width: 25%;
	  }
	  .fleft1{
		float: left;
		width: 49%;
		text-align: right;
		text-justify: auto;
	}
	.fright{
		float: right;
		width: 49%;
	   text-align: left;
	}
	  td{
		text-align: right;
	  }
	  