.material-textarea.material-textarea-group {
    position:relative;
}

.material-textarea{
    font-size:14px;
    margin-top: 10px;
    padding:0px 10px 10px 5px;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #757575;
}
.material-textarea:focus 		{ outline:none; }

.material-textarea-label{
    color:#999;
    font-size:14px;
    font-weight:300;
    position:absolute;
    pointer-events:none;
    top:0px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.material-textarea-label.error {
    color:#ff0202;
}

.material-textarea:focus ~ label, .material-textarea:valid ~ label{
    top:-20px;
    font-size:12px;
    color:#0f7cb6;
}
.material-textarea-bar { position:relative; display:block; width:100%; }
.material-textarea-bar:before, .material-textarea-bar:after  {
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#0f7cb6;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.material-textarea-bar:before {
    left:50%;
}
.material-textarea-bar:after {
    right:50%;
}
.material-textarea:focus ~ .material-textarea-bar:before, .material-textarea:focus ~ .material-textarea-bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.material-textarea-highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:15px;
    pointer-events:none;
    opacity:0.5;
}
.material-textarea:focus ~ .material-textarea-highlight {
    -webkit-animation:textareaHighlighter 0.3s ease;
    -moz-animation:textareaHighlighter 0.3s ease;
    animation:textareaHighlighter 0.3s ease;
}
@-webkit-keyframes textareaHighlighter {
    from { background:#0f7cb6; }
    to  { width:0; background:transparent; }
}
@-moz-keyframes textareaHighlighter {
    from { background:#0f7cb6; }
    to  { width:0; background:transparent; }
}
@keyframes textareaHighlighter {
    from { background:#0f7cb6; }
    to  { width:0; background:transparent; }
}

/* ERROR ================================== */
.material-textarea-error 	{ position:relative; display:block; width:100%; }
.material-textarea-error:before, .material-textarea-error:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background: #ff0202;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.material-textarea-error:before {
    left:50%;
}
.material-textarea-error:after {
    right:50%;
}

/* active state */
.material-textarea-error.active:before, .material-textarea-error.active:after{
    width:50%;
}