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

input:disabled {
    cursor: not-allowed !important;
}


/* form starting stylings ------------------------------- */
.field-group {
    position:relative;
    //margin-bottom: 24px;
    padding-top: 1.75em;

    .btn {
        margin-top: 0;
    }

    &:after {
        display: table;
        content: '';
        clear: both;
    }

    input,
    select {
        padding: 8px 0;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid $input-border-color;
        //margin-bottom: 4px;
        background-color: transparent;
        line-height: 1;
        height: 2em;

        &[type="file"] {
            border: 0;
        }

        &:invalid {
            box-shadow: none;
        }

        &::-webkit-input-placeholder {
            color: transparent;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

        &:-moz-placeholder {  /* FF 4-18 */
            color: transparent;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

        &::-moz-placeholder {
            color: transparent;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        } /* FF 19+ */

        &:-ms-input-placeholder {
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
            color: transparent;
        } /* IE 10+ */


        &:focus ~ label,
        &:valid ~ label,
        &:disabled ~ label,
        &.invalid ~label {
            top: 1.4em;
            font-size: 0.75em;
        }

        &:read-only ~label {
            top: 1.4em;
            font-size: 0.75em;
        }

        &:-moz-read-only ~label {
            top: 1.4em;
            font-size: 0.75em;
        }

        &:focus ~ label {
            color: map_get($ui-colors, primary-color)
        }


        &:hover:not(:disabled) {
            &~ .bar:before,
            &~ .bar:after {
                width: 50%;
                background: $input-border-hover-color;
            }
        }


        /* active state */
        &:focus ~ .bar:before,
        &:focus ~ .bar:after {
            width: 50%;
            background: map_get($ui-colors, primary-color) !important;
        }

        &:focus,
        &:valid {
            outline: none;
            &::-webkit-input-placeholder { color: map_get($default-colors-transparency, secondary); }
            &:-moz-placeholder { color: map_get($default-colors-transparency, secondary); } /* FF 4-18 */
            &::-moz-placeholder { color: map_get($default-colors-transparency, secondary); } /* FF 19+ */
            &:-ms-input-placeholder { color: map_get($default-colors-transparency, secondary); } /* IE 10+ */
        }

    }

    label {
        color: map_get($default-colors-transparency, secondary);
        font-size: 1em;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 2.25em;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
        line-height: 1;
    }


    .bar {
        position: relative;
        display: block;
        width: 100%;

        &:before,
        &:after {
            content:'';
            height: 2px;
            width: 0;
            bottom: 0;
            position: absolute;
            transition:0.2s ease all;
            -moz-transition:0.2s ease all;
            -webkit-transition:0.2s ease all;
        }

        &:before {
            left: 50%;
        }

        &:after {
            right: 50%;
        }

        &:hover {
            &:before,
            &:after {
                width: 50%;
                background: $input-border-hover-color;
            }
        }
    }

    &.invalid {
        .bar {
            &:before,
            &:after {
                width: 50%;
                background: map_get($ui-color-states, danger) !important;
            }
        }

        input {
            &~label {
                color: map_get($ui-color-states, danger) !important;
            }
        }

        .helper-text,
        .error-text {
            color: map_get($ui-color-states, danger) !important;
        }
    }


    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from { background: map_get($ui-colors, primary-color) }
        to 	{ width:0; background:transparent; }
    }
    @-moz-keyframes inputHighlighter {
        from { background: map_get($ui-colors, primary-color) }
        to 	{ width:0; background:transparent; }
    }
    @keyframes inputHighlighter {
        from { background: map_get($ui-colors, primary-color) }
        to 	{ width:0; background:transparent; }
    }


    &.inline-icon {
        .icon {
            position: absolute;
            right: 0;
            top: 2em;
            font-size: 1.1em;
            color: $input-icon-color;
        }

        input {
            padding-right: 24px;
        }
    }


    .helper-text {
        font-size: 0.75em;
        color: map_get($default-colors-transparency, secondary);
    }
}


.input-group {
    margin-right: -8px;
    margin-left: -8px;

    .field-group,
    .icon-signifier,
    .md-checkbox,
    .md-radio{
        float: left;
        padding-left: 8px;
        padding-right: 8px;

        //&.width-100 {
        //    padding-right: 0;
        //}

        &.select  {
            &:after {
                right: 16px !important;
            }

            &:last-child {

                &:after {
                    right: 0 !important;
                }
            }
        }

        &.inline-icon {
            .icon {
                right: 16px;
            }
        }

        &:last-child {
            //padding-right: 0;

            &.inline-icon {
                .icon {
                    right: 0;
                }
            }
        }
    }

    .field-group, .icon-signifier {
        label {
            left: 8px;
        }
    }

    &:after {
        display: table;
        content: '';
        clear: both;
    }
}



.icon-signifier {
    position: relative;

    .icon {
        position: absolute;
        width: 1.154em;
        top: 1em;


        > i,
        > span,
        > img {
            display: inline-block;
            font-size: 1.3em;
        }
    }

    .field-group {
        margin-left: 40px;
    }
}


