.c21-input-container {
    border-bottom: 1px solid rgba(211, 212, 213, .4);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-color: #ffffff;
    margin: 0 0 7px 0;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    // height: 36px;
    display: inline-flex;
    textarea, 
    select {
        width: 100%;
        margin: 0;
        border: 0;
        padding: 12px 0;
        background-color: #ffffff;
        vertical-align: middle;
    }

    textarea::placeholder {
        color: rgb(179, 182, 184);
        font-weight: initial;
        opacity: 1; /* Firefox */
    }
    textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
        /* color: #cccccc; */
        color: rgb(179, 182, 184);
        font-weight: initial;
    }

    /* Remove input border colour */
    textarea:focus,
    textarea:active,
    textarea:hover,
    textarea:visited {
        background-image: linear-gradient(#3ea9f5,#3ea9f5),linear-gradient(#d2d2d2,#d2d2d2);
        background-size: 0 2px,100% 1px;
        background-repeat: no-repeat;
        background-position: center bottom,center calc(100% - 1px);
        background-color: rgba(0,0,0,0);
        transition: background 0s ease-out;
        // box-shadow: none;
        // background-color: #ffffff;
        // outline: none;
    }
    
    /* Remove input background colour for Chrome autocomplete */
    // textarea:-webkit-autofill,
    // textarea:-webkit-autofill:focus,
    // textarea:-webkit-autofill:active {
    //     transition: background-color 5000s ease-in-out 0s;
    // }
}

textarea[type='text'].errors{
    border-bottom: 2px solid red;
    color: red;
}

.text-danger {
    color: red;
    font-size: 1em;
    min-height: 20px;
    background-color: #ffffff;
    margin: 0px 10px 0px 10px;
}
.form-group {
    position: relative;
    padding-bottom: 7px;
    margin: 27px 0 0;
}
.form-group label.control-label {
    font-size: 11px;
    line-height: 1.07142857;
    color: rgb(179, 182, 184);
    font-weight: 400;
    margin: 16px 0 0;
}
textarea {
    border: 0;
    background-image: linear-gradient(#3ea9f5,#3ea9f5),linear-gradient(#d2d2d2,#d2d2d2);
    background-size: 0 2px,100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom,center calc(100% - 1px);
    background-color: rgba(0,0,0,0);
    transition: background 0s ease-out;
    float: none;
    box-shadow: none;
    border-radius: 0;
    font-weight: 400;
    // height: 36px;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.42857143;
    display: block;
    width: 100%;
    color: #555;
    resize: vertical;
}


.form-group.label-static label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-floating label.control-label {
    position: absolute;
    pointer-events: none;
    transition: 0.3s ease all;
}
.form-group.label-floating label.control-label {
    will-change: left, top, contents;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
    top: -7px;
    font-size: 14px;
    line-height: 1.42857;
}
.form-group.label-static label.control-label, .form-group.label-floating.is-focused label.control-label, .form-group.label-floating:not(.is-empty) label.control-label {
    top: -28px;
    left: 0;
    font-size: 11px;
    line-height: 1.07143;
}
.form-group.label-floating textarea.form-control:-webkit-autofill ~ label.control-label label.control-label {
    top: -28px;
    left: 0;
    font-size: 11px;
    line-height: 1.07143;
}

.form-group.form-group-sm.label-floating label.control-label, .form-group.form-group-sm.label-placeholder label.control-label {
    top: -11px;
    font-size: 11px;
    line-height: 1.5;
}
.form-group.form-group-sm.label-static label.control-label, .form-group.form-group-sm.label-floating.is-focused label.control-label, .form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125;
}
.form-group.form-group-sm.label-floating textarea.form-control:-webkit-autofill ~ label.control-label label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125;
}

.form-group.form-group-lg.label-floating label.control-label, .form-group.form-group-lg.label-placeholder label.control-label {
    top: -5px;
    font-size: 18px;
    line-height: 1.33333;
}
.form-group.form-group-lg.label-static label.control-label, .form-group.form-group-lg.label-floating.is-focused label.control-label, .form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: 1.0;
}
.form-group.form-group-lg.label-floating textarea.form-control:-webkit-autofill ~ label.control-label label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: 1.0;
}

.form-group.is-focused .form-control {
    outline: none;
    background-image: linear-gradient(var(--themeColor), var(--themeColor)), linear-gradient(#D2D2D2, #D2D2D2);
    background-repeat: no-repeat;
    background-position: center bottom,center calc(100% - 1px);
    background-size: 100% 2px, 100% 1px;
    // box-shadow: none;
    transition-duration: 0.3s;
    width: 100%;
}

.form-group.is-focused.form-info .form-control {
    background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-success .form-control {
    background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-warning .form-control {
    background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-danger .form-control {
    background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-rose .form-control {
    background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-white .form-control {
    background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-black .form-control {
    background-image: linear-gradient(#555555, #555555), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.label-placeholder label,
.form-group.is-focused.label-placeholder label.control-label {
    color: #AAAAAA;
}
.form-group.is-focused select.form-control {
    box-shadow: none;
    border-color: #D2D2D2;
}
