body { background-color: #ffffff;
width: 100%;
padding-left: 20%;
}

a { display: block; padding: 0.5em; }

span { /* background-color: #ff0000; */
display: inline-block;
margin: 1.0em;
vertical-align: top;
}

div {
position: relative;
width: 50.0em;
}



.span_h { /*background-color: #ffff00;*/
display: block;
height: 25.0em;
width: 50.0em;
margin-top: 5.0em;
padding-right: 1.0em;

border-right: 1px solid #cecece;

text-align: right;
}

.span_h_title { /*background-color: #ffff00;*/
display: block;
float: right;
}

.span_h_text { /*background-color: #ff0000;*/
display: block;
width: 19.0em;
padding-top: 5.0em;
float: right;
font-family: 'Trebuchet MS';
}

.span_f {
padding-top: 10.0em;
}

.span_f_a {
width: 19.0em;
}


input[type="submit"] {
margin: 0.5em;
}

input[type="text"] {
width: 100%;
margin: 0.5em;
font-family: sans-serif;
display: inline-block;
padding-left: 1.0em;
padding-top: 1.5em;
/* background-color: #ffff00; */

&:focus {
/* background-color: #ff0000; */
~ label {
top: 1.0em;
font-size: 0.7em;
}
}
}


input[type="text"]:valid {
/*
border-left: solid 1px lightgreen;
*/
~ label {
/*
background-color: lightgreen;
*/
border-left: solid 0.2875em lightgreen;
}
}


/*
input[type="text"]:invalid {
border-left: solid 1px #000000;

background-color: lightpink;
}
*/




select {
width: 100%;
margin: 0.5em;
font-family: sans-serif;
display: inline-block;
padding-left: 1.0em;
padding-top: 1.5em;
/* background-color: #ffff00; */

&:focus {
/* background-color: #ff0000; */
~ label {
top: 1.0em;
font-size: 0.7em;
}
}
}


select:valid {
/*
border-left: solid 1px lightgreen;
*/
~ label {
/*
background-color: lightgreen;
*/
border-left: solid 0.2875em lightgreen;
}
}
















label {
user-select: none;
font-family: sans-serif;
position: absolute;
border-left: solid 0.2875em transparent;
left: 1.9em;
top: 2.1em;
font-size: 0.77em;

transition:0.2s ease all; 
-moz-transition:0.2s ease all; 
-webkit-transition:0.2s ease all;
}


input:not(:placeholder-shown) ~ label {
top: 1.0em;
font-size: 0.7em;
}


select:not([value=""]):valid ~ label {
top: 1.0em;
font-size: 0.7em;
}


textarea:not(:placeholder-shown) ~ label {
top: 1.0em;
font-size: 0.7em;
}


textarea {
width: 100%;
height: 40.0em;
margin: 1.0em;
font-family: sans-serif;
font-size: 0.38em;
display: inline-block;
padding-left: 3.0em;
padding-top: 5.0em;

&:focus {
/* background-color: #ff0000; */
~ label {
top: 1.0em;
font-size: 0.7em;
}
}
}


textarea:valid {
/*
border-left: solid 1px lightgreen;
*/
~ label {
border-left: solid 0.2875em lightgreen;
}
}