_form.scss

.read-only-field {
    display: inline-block;
    min-height: 60px;
    width: 100%;
    padding: 5px;
    vertical-align: top;
    margin-bottom: 10px;
    font-weight: 400;

    label {
        font-size: 12px;
        font-weight: 700;
        color: var(--vitamui-primary);
    }

    div {
        color: var(--vitamui-grey-900);
        font-weight: 700;
    }
}

.vitamui-input-errors {
    width: 100%;
    padding: 4px 30px;
    font-size: 12px;
    font-weight: 400;
    color: $red;
}

input[type=text].vitamui-input,
input[type=password].vitamui-input,
input[type=email].vitamui-input {
    outline: none;
    padding: 0 30px;
    width: 100%;
    max-width: 300px;
    border: none;
    box-shadow: 0px 4px 24px rgba(var(--vitamui-grey-rgb), 0.6);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;

    &.ng-valid.ng-touched {
        border: 1px solid $green;
    }

    &.ng-invalid.ng-touched {
        border: 1px solid $red;
    }
    
    &.vitamui-small {
        height: 34px;
        border-radius: 4px;
    }

    &::-webkit-input-placeholder {
        color: var(--vitamui-grey-600);
        font-weight: 400;
    }

    &::-moz-placeholder {
        color: var(--vitamui-grey-600);
        font-weight: 400;
    }

    &:-ms-input-placeholder {
        color: var(--vitamui-grey-600);
        font-weight: 400;
    }

    &:-moz-placeholder {
        color: var(--vitamui-grey-600);
        font-weight: 400;
    }
}