@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.container-p {
	height: 134px;
	position: relative;
}

body {
	background: #292931;
	padding: 0;
	margin: 0;
   font-family: 'Open Sans', sans-serif;
}
.signUpForm {
	position: relative;
	height: 100%;
	width: 350px;
	margin: auto;
   margin-top: 20vh;
	background: #423142;
}

.bottom-form {
	position: relative;
	height: 100%;
	margin-top: 2%;
	width: 350px;
	margin: auto;
}

.fa {
	padding-top: 16%;
}

.icon {
    padding: 1%;
    height: 27px;
    padding: 5px;
    width: 11%;
    float: left;
    color: #847384;
    background: #DEDEDE;
    text-align: center;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
}

.username-input {
	letter-spacing: 0.3px;
	font-size: 13px;
    width: 79%;
    height: 37px;
    border: none;
    padding-left: 8px;
    padding: 0px 10px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
	 -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
	 -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
	 border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
	
}




.input-field {
    height: 23px;
    padding-top: 4px;
    width: 90%;
    padding-left: 5%;
    position: relative;
    height: 20px;
    border: none;
}


.input-field-password {
	float: left;
	width: 88%;
	padding-left: 5%;
	position: relative;
	height: 25px;
}

.no-top-padding {
	padding-top: 0%;
}

.password-input {
	letter-spacing: 0.3px;
	font-size: 13px;
	width: 66.6%;
    height: 37px;
    border: none;
    padding: 0px 10px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-bottomleft: 0px;
}

.login {
    color: #fff;
    float: right;
    width: 12.6%;
    height: 37px;
    border: none;
    background: #AD6BAD;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 0px 0px;
	 cursor: pointer;
}



#canvas-basic {
	position: relative;
	display: block;
	width: 100%;
	height: 5px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #ad6bad;
	background: -moz-linear-gradient(left,  #ad6bad 0%, #f1f1f1 22%, #a0de84 39%, #8cc3dd 61%, #de306e 82%, #b563a5 100%);
	background: -webkit-linear-gradient(left,  #ad6bad 0%,#f1f1f1 22%,#a0de84 39%,#8cc3dd 61%,#de306e 82%,#b563a5 100%);
	background: linear-gradient(to right,  #ad6bad 0%,#f1f1f1 22%,#a0de84 39%,#8cc3dd 61%,#de306e 82%,#b563a5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad6bad', endColorstr='#b563a5',GradientType=1 );
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.signInText {
	height: 34px;
	font-size: 2rem;
	color: #685A65;
	width: 50%;
	float: left;
}
.bottom-form {
	position: relative;
	height: 95px;
	margin-top: 2%;
	width: 350px;
	margin: auto;
}
.passwordText {
	height: 34px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	color: #685A65;
	width: 44%;
	float: left;
	display: inline-table;
	text-align: right;
	position: absolute;
	bottom: 0%;
	right: 6%;
	text-decoration: underline;
}
.refreshing {
	padding-top: 0%;
	animation: loading 1s infinite;
}

#refreshClick {
	display: none;
}

@keyframes loading {
	from {
		transform:rotate(0deg); 
	}
	to {
		transform:rotate(360deg);  		
	}
}

@-webkit-keyframes loading {
	from {
		-webkit-transform:rotate(0deg); 
	}
	to {
		-webkit-transform:rotate(360deg);  
	}
}

@-moz-keyframes loading {
	from {
		-moz-transform:rotate(0deg); 
	}
	to {
		-moz-transform:rotate(360deg);  
	}
}

@-o-keyframes loading {
	from {
		-o-transform:rotate(0deg); 
	}
	to {  
		-o-transform:rotate(360deg);  
	}
}







@media screen and (max-width: 480px) {
	.signUpForm {
		position: relative;
		height: 100%;
		width: 280px;
		margin: auto;
		margin-top: 15%;
		background: #423142;
	}
.bottom-form {
	position: relative;
	height: 85px;
	margin-top: 2%;
	width: 250px;
	margin: auto;
}	
.password-input {
	width: 64.6%;
	height: 34.5px;
	border: none;
	padding-left: 5%;
}

.username-input {
	width: 79%;
	height: 35px;
	border: none;
	padding-left: 3%;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;

}

.login {
	cursor: pointer;
	color: #fff;
	float: right;
	width: 15%;
	height: 37px;
	border: none;
	background: #AD6BAD;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
}

.login:hover {
	background: #864A86;
}
	
@media only screen and (max-width: 481px) {
	.icon {
		 padding: 1%;
		 height: 27px;
		 padding: 4px;
	}
	.username-input {
		 width: 78%;
		 height: 35px;
		 border: none;
		 padding-left: 3%;
		 -webkit-border-top-right-radius: 3px;
		 -webkit-border-bottom-right-radius: 3px;
		 -moz-border-radius-topright: 3px;
		 -moz-border-radius-bottomright: 3px;
		 border-top-right-radius: 3px;
		 border-bottom-right-radius: 3px;
	}
	.password-input {
		 width: 61.6%;
		 height: 36.5px;
		 border: none;
		 padding-left: 5%;
	}
	#pass-icon {
		height: 28.5px;
	}
}