.relative {
    position: relative;
}
/* Forms */

/*
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
    margin: 0 0 0.3rem;
}

*/

label {
    margin-bottom: 0.4rem;
}
label.is-invalid {
    color: #f02;
}

textarea {
    height: 5rem;
    padding-top: 0.5rem;
}
::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
    color: #999;
    font-size: 0.8rem;
}
::-moz-placeholder {
   /* Firefox 19+ */
    color: #999;
    font-size: 0.8rem;
}
:-ms-input-placeholder {
   /* IE 10+ */
    color: #999;
    font-size: 0.8rem;
}
:-moz-placeholder {
   /* Firefox 18- */
    color: #999;
    font-size: 0.8rem;
}
/* Icons */
.hide {
    display: none;
}
.icon.validation {
    width: 13px;
    height: 13px;
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 0.4rem;
    text-align: center;
    color: #fff;
}
.icon.success {
    background: #0a1;
}
.icon.error {
    background: #f02;
}
.success {
    color: #0a1;
}
/* Fields */
.input-wrap.is-invalid input, .input-wrap.is-invalid select, .input-wrap.is-invalid textarea {
    border: 1px solid #f02;
}
/* Helper/Error */
.is-helpful {
    color: #999;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}

.is-helpful.error-message {
    color: #f02;
}