.form-control
{
background: #282828;
cursor: text;
border: 1px solid #292929;
color: #F5F5F5;
height: 31.5px;
width: 100%;
padding: 6px 12px;
font-size: 14px;
display:block;
line-height:1.42857143;
background-color:#fff;
background-image:none;
border-radius:0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.textfield-item input.form-control
{
padding:11px 0 10px;
border:none;
height:auto;
resize:none;
color:inherit;
background:0 0;
border-bottom:1px solid #e0e0e0;
box-shadow:none;
}
.textfield-item
{
display:block;
position:relative;
}
.textfield-item-underline
{
display:block;
position:absolute;
bottom:0;
left:50%;
right:50%;
height:2px;
background:#39ade7;
transition:opacity .2s ease-out,left 0s .2s linear,right 0s .2s linear;
opacity:0;
}
.textfield-item input.form-control:focus~.textfield-item-underline
{
transition:left .2s ease-out,right .2s ease-out;
left:0;
right:0;
opacity:1;
}
.login_form_group
{
font-family:Roboto,sans-serif;
font-size:16px;
margin:0;
padding:0;
color:#212121;
width:270px;
margin:25px auto 15px;
}
.login_form_group, .login_form_group input.form-control
{
font-size:16px;
line-height:1.33;
font-weight:400;
font-family:inherit;
}
.login_form_group input.form-control:focus
{
outline:0;
}
.login_form_group .textfield-item-placeholder
{
bottom:0;
color:#ccc;
left:0;
right:0;
pointer-events:none;
position:absolute;
display:block;
top:10.5px;
width:100%;
overflow:hidden;
white-space:nowrap;
text-align:left;
z-index:-1;
}
input::placeholder
{
color:#ccc;
}