@charset "utf-8";

		@font-face {
		  font-family: 'Source Sans Pro';
		  font-style: normal;
		  font-weight: 200;
		  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
		}
		@font-face {
		  font-family: 'Source Sans Pro';
		  font-style: normal;
		  font-weight: 300;
		  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
		}
		* {
		  box-sizing: border-box;
		  margin: 0;
		  padding: 0;
		  font-weight: 300;
		}
		body {
		  font-family: 'Source Sans Pro', sans-serif;
		  color: wcountere;
		  font-weight: 300;
		}
		body ::-webkit-input-placeholder {
		  /* WebKit browsers */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: wcountere;
		  font-weight: 300;
		}
		body :-moz-placeholder {
		  /* Mozilla Firefox 4 to 18 */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: wcountere;
		  opacity: 1;
		  font-weight: 300;
		}
		body ::-moz-placeholder {
		  /* Mozilla Firefox 19+ */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: wcountere;
		  opacity: 1;
		  font-weight: 300;
		}
		body :-ms-input-placeholder {
		  /* Internet Explorer 10+ */
		  font-family: 'Source Sans Pro', sans-serif;
		  color: wcountere;
		  font-weight: 300;
		}
		.wrapper {
		  background: #50a3a2;
		  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100vh;
		  margin-top:0;
		  overflow: hidden;

	 
		   display:flex;
		   align-items: center;
		   justify-content: center;
		}
		.wrapper.form-success .container h1 {
		  transform: translateY(85px);
		}

 



		.container {
		  max-width: 600px;
		  margin: 0 auto;
		  padding: 80px 0;	 
		  text-align: center;
		}
		.container h1 {
		  font-size: 40px;
		  transition-duration: 1s;
		  transition-timing-function: ease-in-put;
		  font-weight: bold;
		}
		form {
		  padding: 20px 0;
		  position: relative;
		  z-index: 2;
		}
		form input {
		  -webkit-appearance: none;
			 -moz-appearance: none;
				  appearance: none;
		  outline: 0;
		  border: 1px solid rgba(255, 255, 255, 0.4);
		  background-color: #ffffff;
		  width: 250px;
		  border-radius: 3px;
		  padding: 10px 15px;
		  margin: 0 auto 10px auto;
		  display: block;
		  text-align: center;
		  font-size: 23px;
		  color: wcountere;
		  transition-duration: 0.25s;
		  font-weight: 300;
		}
		form input:hover {
		  background-color: rgba(255, 255, 255, 0.4);
		}
		form input:focus {
		  background-color: wcountere;
		  width: 300px;
		  color: #000000;
		}
		form button {
		  -webkit-appearance: none;
			 -moz-appearance: none;
				  appearance: none;
		  outline: 0;
		  background-color: #005279;
		  border: 0;
		  padding: 10px 15px;
		  color: #ffffff;
		  border-radius: 3px;
		  width: 100%; 
		  cursor: pointer;
		  font-size: 18px;
		  margin-top:30px;
		  transition-duration: 0.25s;
		}
		form button:hover {
		  background-color: #003d59;
		}
		.bg-bubbles {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		}
		.bg-bubbles li {
		  position: absolute;
		  list-style: none;
		  display: block;
		  width: 40px;
		  height: 40px;
		  background-color: rgba(255, 255, 255, 0.15);
		  bottom: -160px;
		  -webkit-animation: square 25s infinite;
		  animation: square 25s infinite;
		  transition-timing-function: linear;
		}
		.bg-bubbles li:nth-child(1) {
		  left: 10%;
		}
		.bg-bubbles li:nth-child(2) {
		  left: 20%;
		  width: 80px;
		  height: 80px;
		  -webkit-animation-delay: 2s;
				  animation-delay: 2s;
		  -webkit-animation-duration: 17s;
				  animation-duration: 17s;
		}
		.bg-bubbles li:nth-child(3) {
		  left: 25%;
		  -webkit-animation-delay: 4s;
				  animation-delay: 4s;
		}
		.bg-bubbles li:nth-child(4) {
		  left: 40%;
		  width: 60px;
		  height: 60px;
		  -webkit-animation-duration: 22s;
				  animation-duration: 22s;
		  background-color: rgba(255, 255, 255, 0.25);
		}
		.bg-bubbles li:nth-child(5) {
		  left: 70%;
		}
		.bg-bubbles li:nth-child(6) {
		  left: 80%;
		  width: 120px;
		  height: 120px;
		  -webkit-animation-delay: 3s;
				  animation-delay: 3s;
		  background-color: rgba(255, 255, 255, 0.2);
		}
		.bg-bubbles li:nth-child(7) {
		  left: 32%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 7s;
				  animation-delay: 7s;
		}
		.bg-bubbles li:nth-child(8) {
		  left: 55%;
		  width: 20px;
		  height: 20px;
		  -webkit-animation-delay: 15s;
				  animation-delay: 15s;
		  -webkit-animation-duration: 40s;
				  animation-duration: 40s;
		}
		.bg-bubbles li:nth-child(9) {
		  left: 25%;
		  width: 10px;
		  height: 10px;
		  -webkit-animation-delay: 2s;
				  animation-delay: 2s;
		  -webkit-animation-duration: 40s;
				  animation-duration: 40s;
		  background-color: rgba(255, 255, 255, 0.3);
		}
		.bg-bubbles li:nth-child(10) {
		  left: 90%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 11s;
				  animation-delay: 11s;
		}
		@-webkit-keyframes square {
		  0% {
			transform: translateY(0);
		  }
		  100% {
			transform: translateY(-700px) rotate(600deg);
		  }
		}
		@keyframes square {
		  0% {
			transform: translateY(0);
		  }
		  100% {
			transform: translateY(-700px) rotate(600deg);
		  }
		}
	


    .login_area{
	    border:1px solid #ffffff;
		width:500px;
		padding:10px 50px;
		background-color:#1fbe7a;

	
	
	}
	.login_row{
	  display:flex;
	}

	.login_row .login_text{
	   width:100px;
	   font-weight:bold;
	   color:#ffffff;
	   padding-top:10px;
	}