button,
input,
select,
textarea {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: inherit;
    outline-offset: 0;
    outline-style: none;
    outline-width: 0;
    -webkit-font-smoothing: inherit;
    background: none;
    border: 0;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    border: 0;
    display: block;
    padding-top: 2px;
    padding-left: 0;
    height: 34px;
    color: #111;
    vertical-align: middle;
    font-size: 14px;
    line-height: 16px;
}

:invalid {
    box-shadow: none;
}

:-moz-submit-invalid {
    box-shadow: none;
}

:-moz-ui-invalid {
    box-shadow: none;
}

.dmt-dark-background {
    .dmt-field-wrapper {

        &.ng-invalid{
            .dmt-field-input {
                &.dmt-active {
                    .dmt-input{
                        border-bottom-color: $light-gray;
                    }

                    .dmt-input-label{
                        color: $medium-gray;
                    }
                }
            }
        }

        .dmt-field-input {
            &.dmt-active {
                .dmt-input:focus {
                    + .dmt-input-label {
                        color: $light-gray;
                    }
                }
            }

            &.dmt-disabled {
                .dmt-input {
                    border-bottom: 1px solid $dark-gray;
                    opacity: 0.8;
                }
                .dmt-input-label {
                    opacity: 0.8;
                }
            }

            .dmt-input {
                border-bottom: 1px solid $light-gray;
            }
        }
    }

    &.dmt-error {
        .dmt-field-wrapper {
            .dmt-field-input {
                &.dmt-active {
                    .dmt-input {
                        color: $light-gray;
                    }

                    .dmt-input-label {
                        //color: $light-gray;
                    }
                }

                &.dmt-disabled {
                    .dmt-input {
                        border-bottom: 1px solid $light-gray;
                        -webkit-text-fill-color: $light-gray; /* Safari fix */
                    }
                }

                .dmt-input-label {
                    //color: $light-gray;
                }
            }
        }
    }
}

.dmt-field-wrapper {
    position: relative;
    margin: 30px 0;

    &.ng-invalid{
        .dmt-field-input {
            &.dmt-active {
                .dmt-input{
                    border-bottom-color: $offline;
                }

                .dmt-input-label{
                    color: $offline;
                }
            }
        }
    }

    .dmt-field-input {
        &.dmt-active {
            .dmt-input:focus {
                border-width: 2px;
                padding-bottom: 4px;

                + .dmt-input-label {
                    color: $medium-gray;
                }
            }
            .dmt-input-label {
                @include transform(translate3d(1px, -20px, 0) scale3d(0.7, 0.7, 1));
                @include transform-origin(0 0);
                /*
                color: $dark-gray;
                */
            }
            .dmt-input {
                color: $light-blue;
            }
        }

        &.dmt-disabled {
            .dmt-input {
                border-bottom: 1px solid $medium-gray;
                opacity: 0.3;
                -webkit-text-fill-color: $light-blue; /* Safari fix */
            }
            .dmt-input-label {
                color: $medium-gray !important;
                opacity: 0.3;
            }
        }

        &.dmt-light {
            &:not(.dmt-active) {
                .dmt-input {
                    border-bottom-color: $light-gray;
                }

                .dmt-input-label {
                    color: $light-gray;
                }
            }
        }

        &.dmt-light-mono {
            &.dmt-active {
                .dmt-input {
                    border-bottom-color: $light-gray;
                    color: $light-gray;
                }

                .dmt-input-label {
                    color: $light-gray;
                }
            }

            .dmt-input {
                border-bottom-color: $light-gray;
            }

            .dmt-input-label {
                color: $light-gray;
            }
        }

        $field-label-z-index: 30;

        .dmt-input {
            @include border-radius(0);
            position: relative;
            z-index: $field-label-z-index + 1;
            background-color: transparent;
            border-bottom: 1px solid $medium-gray;
            font-size: 18px;
            line-height: 30px;
            color: $medium-gray;
            width: 100%;
            transition: border-bottom-color 0.5s ease-out;
            padding-bottom: 5px;
        }

        .dmt-input-label {
            position: absolute;
            top: 0;
            left: 0;
            z-index: $field-label-z-index;
            font-size: 16px;
            line-height: 30px;
            color: $medium-gray;
            transition: all 0.5s ease-out;
            white-space: nowrap;
        }

        .dmt-show-password {
            position: absolute;
            top: 2px;
            right: 0;
            font-size: 20px;
            line-height: 26px;
            color: $dark-gray;
            z-index: 99;
            cursor: pointer;
        }
    }

    .dmt-field-error {
        position: absolute;
        left: 0;
        bottom: -18px;
        color: #fff;
        font-size: 12px;
        line-height: 14px;
        width: 100%;
        background: $offline;
        @include border-radius(3px);
        padding: 0 5px;
    }

    .dmt-password-bar {
        height: 2px;
        position: absolute;
        bottom: 0;
        z-index: 9999;

        &.dmt-weak {
            width: 25%;
            background-color: $offline-opaque-10;
        }

        &.dmt-medium {
            width: 60%;
            background-color: $favourites;
        }

        &.dmt-strong {
            width: 100%;
            background-color: $online;
        }
    }
}