:root {
	--floating-size: 1em;
	--floating-color:#000;
	--floating-backcolor: #fff;
	--floating-unselect: #999;
	--floating-select:rgb(81, 203, 238 ,1 );
	--floating-input-line: 1px;
	--floating-error-line: 1px;
	--floating-error-color: red;
	--floating-input-border: 0px;
	--floating-textarea-border: 0px;
}
.floating-label{
	position:relative;
	border:solid 0px black;
	padding:calc(var(--floating-size)/4);
	padding-top:calc(var(--floating-size)*.7);
	background-color:var(--floating-backcolor);
}
.floating-label-input:focus-within{
	border:solid var(--floating-input-border) var(--floating-select);
	box-shadow: 0 0px calc(var(--floating-input-border)*4) var(--floating-select);
	transition: all .5s ease; 
}
.floating-label-textarea:focus-within{
	border:solid var(--floating-textarea-border) var(--floating-select);
	box-shadow: 0 0px calc(var(--floating-textarea-border)*4) var(--floating-select);
	transition: all .5s ease; 
}
.floating-label label{
	font-size:var(--floating-size);
	position:absolute;
	left: calc(var(--floating-size)/4);;
	top:calc(var(--floating-size)*0.8);
	opacity:0;
	transition: all .5s ease; 
	color:var(--floating-unselect);
	z-index:-1;
}
.floating-label textarea{
	font-family:inherit;
	font-size:var(--floating-size);
	border:0;
	width:100%;
	outline:none;
	resize:vertical;
	border-bottom: solid var(--floating-input-line) var(--floating-unselect);
}
.floating-label input{
	font-family:inherit;
	font-size:var(--floating-size);
	bottom:calc(var(--floating-size)/4);
	background-color:var(--floating-backcolor);
	border:0;
	border-bottom:solid var(--floating-input-line) var(--floating-unselect);
	transition: all .5s ease; 
}
.floating-label input:focus {
	box-shadow: 0 calc(var(--floating-input-line)*4) calc(var(--floating-input-line)*4) calc(0px - var(--floating-input-line)*4) var(--floating-select);
	outline: 0; 
  color:var(--floating-color);
}
.floating-label textarea:focus {
	box-shadow: 0 calc(var(--floating-input-line)*4) calc(var(--floating-input-line)*4) calc(0px - var(--floating-input-line)*4) var(--floating-select);
	outline: 0; 
  color:var(--floating-color);
}
.floating-label input:invalid, textarea:invalid{
	box-shadow: none;
	border-bottom:solid var(--floating-error-line) var(--floating-error-color);
	box-shadow: 0 calc(var(--floating-error-line)*4) calc(var(--floating-error-line)*4) calc(0px - var(--floating-error-line)*4) var(--floating-error-color);
}
.floating-label input:focus + label,textarea:focus + label{
  color:var(--floating-select);
}
.floating-label input:not(:placeholder-shown) + label,textarea:not(:placeholder-shown) + label{
	transform: translateY(calc(0px - calc(var(--floating-size)*0.8)));
	opacity:  1; 
	font-size:calc(var(--floating-size)*.7);
	z-index:1;
}