.mat-form-field {
    display: inline-block;
    position: relative;
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
    .mat-icon {
        color: $main-color !important;
    }
}
// mat-icon-stepper selected color change
::ng-deep .mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
    background-color: $main-color !important;
}

//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: $main-color !important;
    // opacity: 1!important;
}

//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: $main-color !important;
}

// mat-input error outline color
::ng-deep
    .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
    .mat-form-field-outline-thick {
    color: $error !important;
    opacity: 0.8 !important;
}

// mat-input cursor color
::ng-deep .mat-input-element {
    caret-color: $main-color !important;
}

// mat-input error cursor color
::ng-deep .mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
    caret-color: $main-color !important;
}

// mat-label normal state style
::ng-deep .mat-form-field-label {
    color: $main-color !important;
    // color: $mainColor!important;
}

// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: $main-color !important;
}

// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: $error !important;
}

// error message
.mat-hint {
    color: $error !important;
    font-size: 14px;
}