.inputHolder {position: relative; border: 1px solid #dcdcdc; border-radius: 3px; overflow: hidden; font-family: Arial; display: list-item;}
.inputHolder * {position: relative;}
.inputHolder:focus,
.inputHolder input:focus,
.inputHolder textarea:focus {outline: none;}
.inputHolder .input {display: inline-block; vertical-align: bottom; width: 100%; z-index: 1; height: 40px; line-height: 40px;}
.inputHolder.textarea .input {height: auto;}
.inputHolder input {height: 40px; line-height: 40px;}
.inputHolder input,
.inputHolder textarea {border: none; padding-right: 30px !important; min-width: 300px; background: none;}
.inputHolder textarea {padding: 25px 20px 10px 20px; resize: none; height: 100px;}
.inputHolder .placeholder {position: absolute; z-index: 2; top: 0; left: 0; color: #868686; pointer-events: none; font-size: 14px;}

.inputHolder,
.inputHolder .placeholder {height: 60px; line-height: 60px;}
.inputHolder.textarea .placeholder {height: 40px; line-height: 40px;}

.inputHolder .input input,
.inputHolder .placeholder {padding: 0 20px;}

.inputHolder.hasValue .placeholder,
.inputHolder.hasFocus .placeholder,
.inputHolder.hasLabel .placeholder,
.inputHolder:focus .placeholder {height: 40px; line-height: 40px; font-size: 12px;}
.inputHolder.textarea.hasValue .placeholder,
.inputHolder.textarea.hasFocus .placeholder,
.inputHolder.textarea.hasLabel .placeholder,
.inputHolder.textarea:focus .placeholder {height: 30px; line-height: 30px;}

.inputHolder.hasFocus:not(.hasValue),
.inputHolder:focus:not(.hasValue),
.inputHolder.wrong {border: 1px solid #e66d6d; }
.inputHolder.hasFocus:not(.hasValue),
.inputHolder.hasFocus:not(.hasValue) .placeholder,
.inputHolder:focus:not(.hasValue),
.inputHolder:focus:not(.hasValue) .placeholder,
.inputHolder.wrong .placeholder{color: red;}

.inputHolder.correct {border: 1px solid #2fa92f;}
.inputHolder.correct,
.inputHolder.correct .placeholder {color: #2fa92f;}

.inputHolder,
.inputHolder *
{
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.inputHolder.fontIcons.wrong:after,
.inputHolder.fontIcons.correct:after
{
    font-family: "icomoon";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
    text-align: center;
    margin: -10px 0 0 0;
    font-size: 14px;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

.inputHolder.fontIcons.wrong:after {color: #de3e3e; content: "\e951"; font-size: 16px;}
.inputHolder.fontIcons.correct:after {color: #2fa92f; content: "\e955";}

.inputHolder.textarea {height: auto !important;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

input.wrong,
textarea.wrong {border-color: #e66d6d}
input.correct,
textarea.correct {border-color: #2fa92f;}

/*
 * SMALL Template
 */
.formified.small .inputHolder,
.formified.small .inputHolder .placeholder {height: 40px; line-height: 40px;}

.formified.small .inputHolder.hasValue .placeholder,
.formified.small .inputHolder.hasFocus .placeholder,
.formified.small .inputHolder.hasLabel .placeholder,
.formified.small .inputHolder:focus .placeholder {height: 20px; line-height: 20px;}

.inputHolder .input,
.inputHolder .input input {height: 30px; line-height: 30px;}