.group {
    position: relative;
    margin-bottom: 55px;
}

.inputMaterial {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    color: #162d3d;
    border-bottom: 1px solid #cecece;
    background: none;
    background-position: right 10px center;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

    .inputMaterial[value=""]:hover {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #162d3d;
        background: none;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

    .inputMaterial[value=""]:focus:invalid ~ label, .inputMaterial[value=""]:focus:valid ~ label, .inputMaterial.focus ~ label.focus {
        top: -15px;
        font-size: 13px;
        color: #31b0d5;
    }

    .inputMaterial[value=""]:focus:invalid, .inputMaterial[value=""]:focus:valid, .inputMaterial.focus {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #31b0d5;
        background: url(../img/loading.gif) no-repeat scroll 7px 7px;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

    .inputMaterial:focus:invalid, .inputMaterial:focus:valid, .inputMaterial.focus {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #31b0d5;
        background: url(../img/loading.gif) no-repeat scroll 7px 7px;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

        .inputMaterial:focus:invalid ~ label, .inputMaterial:focus:valid ~ label, .inputMaterial.focus ~ label.focus {
            top: -15px;
            font-size: 13px;
            color: #31b0d5;
        }



    .inputMaterial:valid, .inputMaterial.valid {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #04700C;
        background: url(../img/success.png) no-repeat scroll 7px 7px;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

        .inputMaterial:valid ~ label, .inputMaterial.valid ~ label.valid {
            top: -15px;
            font-size: 13px;
            color: #04700C;
        }

    .inputMaterial:invalid, .inputMaterial.invalid.touched {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #AB0B00;
        background: url(../img/error.png) no-repeat scroll 7px 7px;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

        .inputMaterial:invalid ~ label, .inputMaterial.invalid.touched ~ label.invalid {
            top: -15px;
            font-size: 13px;
            color: #AB0B00;
        }



    .inputMaterial.untouched ~ label {
        color: #162d3d;
        font-size: 17px;
        top: 10px;
    }

    .inputMaterial.untouched {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        color: #162d3d;
        border-bottom: 1px solid #cecece;
        background: none;
        background-position: right 10px center;
        -webkit-transition: background-image 0.4s ease-in-out;
        transition: background-image 0.4s ease-in-out;
    }

.no-error {
    font-family: 'Lato',sans-serif;
    color: #AB0B00;
    font-size: 13px;
    padding-left: 5px;
    padding-top: 3px;
    float: left;
    visibility: hidden;
    font-weight: normal;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.has-error {
    font-family: 'Lato',sans-serif;
    color: #AB0B00;
    font-size: 13px;
    padding-left: 5px;
    padding-top: 3px;
    float: left;
    font-weight: normal;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}



/* LABEL ======================================= */

.CandidateFloatLabel label {
    color: #162d3d;
    font-size: 17px;
    font-family: 'Lato',sans-serif;
    font-weight: 500;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}